من الفكرة إلى التطبيق: برمجة تطبيق خدمات وعمالة محلية خطوة بخطوة باستخدام flutter و hosteday انشاء الخادم وربطه بالمشروع.

بناء تطبيق “At Your Service” باستخدام HosteDay وFlutter

في هذا الدليل العملي، ستتعلّم كيفية إنشاء تطبيق Flutter متكامل مرتبط بخادم خاص بك على منصة HosteDay، بدءًا من تجهيز الخادم وقاعدة البيانات، مرورًا بإنشاء واجهات الـ API تلقائيًا، وانتهاءً بربط التطبيق باستخدام حزمة hosteday_flutter.

سننشئ نموذجًا عمليًا لإدارة ملفات المستخدمين عبر جدول profiles، مع دعم التسجيل وتسجيل الدخول، وحماية الاتصال باستخدام API Token. تم تقسيم المشروع إلى مراحل واضحة ومتسلسلة، بحيث يمكنك تنفيذ كل جزء وفهمه واختباره قبل الانتقال إلى المرحلة التالية.

بنهاية هذا الدليل، سيكون لديك أساس جاهز لتطوير تطبيق حقيقي يمكن توسيعه لاحقًا بإضافة واجهات احترافية، إدارة الحسابات، الملفات الشخصية، الإشعارات، وأي خصائص أخرى يحتاجها مشروعك.

المرحلة الأولى: إنشاء خادم لتطبيقك على HosteDay

1. افتح منصة HosteDay عبر الرابط: hosteday.com.
2. أنشئ حسابًا جديدًا أو سجّل الدخول إلى حسابك الحالي، ثم انتقل إلى لوحة التحكم.
3. من لوحة التحكم، اضغط على زر إنشاء خادم مجاني.
4. أدخل اسم الخادم أو النطاق الفرعي، مثل: a-y-service.
5. اضغط على زر إنشاء الخادم لتأكيد العملية.
6. انتظر حتى يكتمل إعداد وبناء الخادم، ثم تابع إلى المرحلة التالية.

المرحلة الثانية: إنشاء جدول البيانات

1. انتقل إلى صفحة إنشاء API.
2. ضمن قسم إنشاء وحدة (CRUD) جديدة مع القواعد، أدخل اسم الجدول التالي: profiles
3. أضف الحقول التالية وقم بضبط أنواعها وقواعد التحقق كما هو موضح:

4. بعد إكمال إعداد جميع الحقول والقواعد، اضغط على زر بناء وبرمجة الـ CRUD الآن.

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

المرحلة الثالثة: تجهيز مشروع Flutter

1. افتح برنامج Android Studio.
2. اضغط على New Project، ثم اختر New Flutter Project واضغط Next.
3. أدخل بيانات المشروع، مع إمكانية تعديلها بما يناسبك. مثال:

Project name: at_your_service

4. اضغط على Create لإنشاء المشروع.
5. بعد فتح المشروع، شغّل التطبيق أولًا للتأكد من أن بيئة Flutter والإعدادات تعمل بشكل صحيح. عند ظهور التطبيق بنجاح، تابع الخطوات التالية.

إضافة حزمة HosteDay Flutter

1. افتح صفحة الحزمة عبر الرابط التالي: https://pub.dev/packages/hosteday_flutter
2. افتح ملف pubspec.yaml داخل مشروع Flutter.
3. أضف حزمة hosteday_flutter ضمن قسم dependencies كما يلي:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  hosteday_flutter: ^1.0.6

4. اضغط على زر Pub get لتنزيل الحزمة وربطها بالمشروع.

إضافة مثال التطبيق

1. افتح مثال الحزمة الكامل من الرابط التالي: https://pub.dev/packages/hosteday_flutter/example
2. انسخ محتوى المثال بالكامل.
3. افتح الملف التالي داخل مشروعك:

lib/main.dart

4. احذف المحتوى الحالي واستبدله بمحتوى المثال.

إعداد رمز الوصول API Token

ابحث في ملف main.dart عن الكود التالي:

const apiToken = String.fromEnvironment(
  'HOSTEDAY_API_TOKEN',
  defaultValue: 'YOUR_API_TOKEN',
);

استبدل القيمة الافتراضية YOUR_API_TOKEN برمز الوصول الخاص بالخادم الذي أنشأته في HosteDay.

في حال لم تقم بإنشاء API_TOKEN داخل الخادم، يمكنك حذف هذا الجزء من الكود مؤقتًا. لكن يُوصى بشدة بإنشاء رمز وصول وتفعيل حماية روابط الـ API لمنع الوصول غير المصرح به إلى بيانات مشروعك.

اختبار الاتصال

شغّل التطبيق، ثم جرّب أحد الخيارات التالية:

• إنشاء حساب جديد.
• تسجيل الدخول بحساب موجود.

عند نجاح إنشاء الحساب أو تسجيل الدخول، يكون التطبيق قد اتصل بالخادم بنجاح. بعد ذلك يمكنك الانتقال إلى المرحلة التالية: بناء واجهات التطبيق وربطها ببيانات الـ API.

الخطوة التالية

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

المرحلة التالية ستكون بناء واجهات التطبيق بشكل احترافي، بما يشمل شاشات التسجيل وتسجيل الدخول، الصفحة الرئيسية، عرض وتعديل الملف الشخصي، وربط الواجهات مباشرةً ببيانات الـ API.

يمكنك تحميل كود هذه المرحلة ومتابعة التطوير من خلال مستودع GitHub، حيث تم تخصيص فرع مستقل لكل مرحلة لتسهيل التعلم ومراجعة التغييرات:

تحميل المشروع من GitHub

احرص على عدم رفع رموز الوصول أو بيانات الخادم الحساسة إلى GitHub، واستخدم --dart-define أو أي آلية آمنة لإدارة القيم السرية داخل مشروع Flutter.