بناء تطبيق ملاحظات باستخدام Flutter وHosteDay – الدرس الأول

في هذه السلسلة التعليمية سنبدأ ببناء تطبيق ملاحظات متكامل باستخدام إطار العمل Flutter ومنصة HosteDay، حيث سنتعلم كيفية إنشاء تطبيق احترافي مع نظام مصادقة وإدارة ملاحظات وربطه بواجهة API جاهزة بسهولة وسرعة.

في هذا الدرس سنتعرف على:

• فكرة التطبيق وهيكل الصفحات
• نظرة عامة على منصة HosteDay
• إنشاء مشروع Flutter باستخدام VS Code
• تثبيت المكتبات الأساسية للمشروع
• إنشاء خادم Backend على HosteDay

شرح فكرة التطبيق

فكرة التطبيق بسيطة وعملية، حيث سنقوم ببناء تطبيق ملاحظات يحتوي على ثلاثة أقسام رئيسية:

قسم المصادقة

ويشمل الصفحات التالية:

• صفحة تسجيل الدخول
• صفحة إنشاء حساب جديد
• صفحة حذف الحساب

قسم الملف الشخصي

ويتضمن:

• صفحة عرض المعلومات الشخصية مثل:

• البريد الإلكتروني
• الصورة الشخصية

• صفحة إعادة تعيين كلمة المرور

قسم الملاحظات

ويتكون من:

• صفحة عرض جميع الملاحظات
• صفحة عرض ملاحظة واحدة
• صفحة إنشاء ملاحظة جديدة
• صفحة تحديث الملاحظة
• صفحة حذف الملاحظة

الهدف من التطبيق هو تعلم كيفية بناء تطبيق Flutter متكامل وربطه مع Backend احترافي بطريقة سهلة ومنظمة.

نظرة عامة على منصة HosteDay

توفر منصة HosteDay إمكانية إنشاء API مستقل لكل عميل مع عزل كامل للبيانات، بالإضافة إلى إنشاء Subdomain تلقائي لكل مشروع.

ومن أبرز المميزات التي توفرها المنصة:

• روابط API جاهزة للمصادقة
• تسجيل الدخول وإنشاء الحساب
• عرض وتحديث الملف الشخصي
• إنشاء جداول قاعدة البيانات بدون كتابة كود
• توليد روابط CRUD تلقائياً لكل جدول

فعلى سبيل المثال، عند إنشاء جدول باسم note سيتم إنشاء روابط API جاهزة من أجل:

• عرض جميع الملاحظات
• عرض ملاحظة واحدة
• إنشاء ملاحظة
• تحديث الملاحظة
• حذف الملاحظة

كل ذلك يتم مباشرة من لوحة التحكم وبدون الحاجة لكتابة Backend يدوي.

وخلال هذه السلسلة سنكتشف قوة HosteDay وكيفية استغلالها لبناء تطبيقات عملية بسرعة كبيرة.

إنشاء مشروع Flutter باستخدام VS Code

الخطوة الأولى: إنشاء مجلد المشروع

قم بإنشاء مجلد جديد على جهازك بأي مكان تريده، وليكن مثلاً على سطح المكتب باسم:

app-noti

سيكون هذا هو المجلد الرئيسي للمشروع.

ملاحظة: اسم التطبيق الحالي سيكون noti ويمكنك اختيار أي اسم آخر مناسب.

الخطوة الثانية: إنشاء مشروع Flutter

افتح برنامج Visual Studio Code أو أي محرر تفضله مثل:

• Android Studio
• IntelliJ IDEA

ثم قم بفتح المجلد app-noti.

بعد ذلك:

اضغط على:

Ctrl + Shift + P

اكتب:

Flutter

اختر:

Flutter: New Project

اختر نوع المشروع:

Application

حدد مجلد app-noti لإنشاء المشروع بداخله.

أدخل اسم التطبيق:

noti

انتظر حتى يتم إنشاء المشروع.

بعد انتهاء العملية ستظهر ملفات ومجلدات المشروع داخل VS Code، كما ستجد مجلد التطبيق noti داخل المجلد الرئيسي.

تشغيل التطبيق لأول مرة

قبل البدء بالتطوير تأكد من أن المشروع يعمل بشكل صحيح.

في الطرفية Terminal نفذ الأمر التالي:

flutter run -d chrome

إذا عمل التطبيق بنجاح يمكنك المتابعة، أما إذا ظهرت مشاكل فقم بمراجعة خطوات تثبيت Flutter وإصلاح الأخطاء أولاً.

تثبيت المكتبات الأساسية للمشروع

لتسهيل إدارة التطبيق سنستخدم المكتبات التالية:

مكتبة إدارة الحالة والتنقل:

get

مكتبة التخزين المحلي:

get_storage

روابط المكتبات

• GetX Package
• Get Storage Package

إضافة المكتبات إلى المشروع

افتح ملف:

pubspec.yaml

وأضف التالي:

dependencies: get: ^4.7.3 get_storage: ^2.1.1

ثم نفذ الأمر التالي داخل Terminal:

flutter pub get

وبذلك تصبح المكتبات جاهزة للاستخدام داخل التطبيق.

إنشاء خادم Backend على HosteDay

قم بالدخول إلى منصة HosteDay عبر الرابط التالي:

الدخول إلى HosteDay

ثم اضغط على زر:

ابدأ الآن

إنشاء حساب أو تسجيل الدخول

قم بتسجيل الدخول إلى حسابك أو أنشئ حساباً جديداً، ثم انتقل إلى لوحة التحكم.

من القائمة الجانبية اختر:

الخوادم

ثم اضغط على:

إضافة خادم جديد

إنشاء الخادم

أدخل اسم الخادم، وليكن مثلاً:

noti

أو أي اسم آخر بشرط ألا يكون مستخدماً مسبقاً.

بعد ذلك انتظر قليلاً حتى يتم إنشاء الخادم وتوليد روابط المصادقة الافتراضية.

إذا لم تظهر الروابط تلقائياً اضغط على:

إعادة البناء

اختبار روابط الـ API

لاختبار الروابط:

• اختر الخادم
• اضغط على:

مختبر API

تجربة رابط إنشاء حساب

اختر الرابط التالي:

api/auth/register

ثم أدخل البيانات التالية:

• اسم المستخدم
• البريد الإلكتروني
• كلمة المرور

بعد ذلك اضغط:

إرسال الطلب

إذا نجحت العملية ستظهر استجابة مشابهة للتالي:

{ "success": true, "message": null, "data": { "user_id": "019e1e08-7af1-7226-9c47-6cc07d5ce329", "token": "1|dlYVuxHQBcYraqSnBPgEBcM6iSN4S5MH1D8TSKZJffb8dfe5", "verified": false } }

تجربة رابط الملف الشخصي

اضغط على الرابط:

api/user

ثم اضغط على:

إرسال الطلب

ستظهر استجابة مشابهة للتالي:

{ "success": true, "message": null, "data": { "id": "019e1e08-7af1-7226-9c47-6cc07d5ce329", "name": "max", "email": "max@max.com", "avatar": "/assets/images/user.png", "email_verified": false } }

تأمين روابط الـ API

من المهم جداً حماية روابط الـ API الخاصة بخادمك.

توفر منصة HosteDay طريقة سهلة لتأمين الروابط عبر الرموز المميزة (API Tokens).

لتفعيل الحماية:

اضغط على:

حماية الروابط

أدخل اسم الرمز المميز، مثلاً:

noti-key

اضغط على:

إنشاء الرمز المميز

سيتم عرض الرمز مرة واحدة فقط، لذلك قم بنسخه وحفظه في مكان آمن.

إذا فقدت الرمز فلن تتمكن من عرضه مجدداً، وسيتوجب عليك حذف الرمز القديم وإنشاء رمز جديد.

بعد تفعيل الحماية لن تعمل أي روابط API إلا باستخدام هذا الرمز.

وخلال الدروس القادمة سنتعلم كيفية إرسال الرمز داخل تطبيق Flutter للوصول الآمن إلى الـ API.

خاتمة الدرس

وصلنا إلى نهاية الدرس الأول، وقد تعلمنا فيه:

• فكرة تطبيق الملاحظات
• إنشاء مشروع Flutter
• تثبيت المكتبات الأساسية
• إنشاء خادم Backend باستخدام HosteDay
• اختبار روابط الـ API
• حماية الروابط باستخدام API Token

في الدرس القادم سنقوم بإنشاء جدول note داخل HosteDay لتوليد روابط إدارة الملاحظات، ثم سنتعلم كيفية تحويل استجابات الـ API إلى Dart Models داخل تطبيق Flutter.

انتظروا الدرس القادم قريباً.