إتقان تدوين الملاحظات باستخدام FlutterFlow و Supabase: دليل شامل

في هذا الدليل الشامل، ستتعلم كيفية بناء تطبيق ملاحظات متين باستخدام FlutterFlow للواجهة الأمامية و Supabase للواجهة الخلفية. مع هذا الدليل، سنرشدك خلال كل خطوة، من إعداد قاعدة بيانات Supabase إلى تكاملها مع FlutterFlow، مما يضمن أن حتى المبتدئين يمكنهم المتابعة بفعالية. لنبدأ!

إعداد قاعدة بيانات Supabase

أكمل هذه الخطوات الأساسية لإعداد قاعدة بيانات Supabase الخاصة بك قبل الغوص في واجهة المستخدم ومنطق التطبيق.

1. إنشاء مشروع جديد في لوحة تحكم Supabase

ابدأ بزيارة صفحة Supabase الرئيسية، وانقر على "Start a project" أو قم ببساطة بتسجيل الدخول.

1. إنشاء مشروع جديد: أعطِ مشروعك اسماً فريداً وحدد كلمة مرور قوية لقاعدة البيانات. اختر منطقة خادم قاعدة البيانات المفضلة واضغط على "Create new project."

2. إنشاء جدول المستخدمين

في لوحة تحكم Supabase، انتقل إلى Table Editor لإنشاء جدول جديد باسم users. يجب أن يشبه هيكل الجدول الخاص بك هذا:

الحقول:

• id: UUID (المفتاح الرئيسي)
• email: Text
• name: Text
• created_at: Timestamp (الافتراضي: NOW())

قم بتعيين المفتاح الرئيسي لـ id وتهيئة القيود الضرورية.

3. إنشاء جدول الملاحظات

بعد ذلك، أنشئ جدولاً آخر باسم notes بالمخطط التالي:

الحقول:

• id: UUID (المفتاح الرئيسي)
• title: Text
• description: Text
• image_url: Text (لتخزين مسارات الصور)
• created_at: Timestamp (الافتراضي: NOW())

4. إعداد حاوية تخزين في Supabase

لتخزين الصور المتعلقة بالملاحظات، أنشئ حاوية تخزين:

1. إنشاء حاوية عامة: اذهب إلى قسم Storage، سمِّ حاويتك notes، واجعلها عامة.

2. تعيين السياسات: ضمن Configuration > Policies، أنشئ سياسة لإدراج الملفات بهذه الأذونات:

   (bucket_id = 'notes'::text) AND (lower((storage.foldername(name))[1]) = (auth.uid())::text)

ربط تطبيق FlutterFlow الخاص بك مع Supabase

الخطوة 1: استنساخ مشروع البداية

استنسخ مشروع FlutterFlow الأولي المقدم للبدء في تكامل Supabase مع FlutterFlow.

الخطوة 2: تهيئة المصادقة

انتقل إلى Settings > App Settings > Authentication في FlutterFlow:

1. تمكين المصادقة: اضبط Authentication Type على Supabase.
2. تعيين الصفحات: قم بتهيئة Entry Page لشاشة تسجيل الدخول و Logged In Page لشاشتك الرئيسية.

الخطوة 3: تكامل Supabase

1. تمكين Supabase: قم بتشغيل Supabase في قسم Integrations.
2. إضافة رابط API ومفتاح Anon: يمكن العثور عليها في إعدادات مشروع Supabase الخاص بك.
3. جلب المخطط: انقر على "Get Schema" لاسترداد جداول قاعدة البيانات.

الخطوة 4: بناء صفحة تسجيل الدخول

صمم صفحة تسجيل دخول سهلة الاستخدام مع حقول نصية لبيانات الاعتماد:

1. إضافة إجراء 'On Tap': على زر 'Create Account'، أضف إجراءً جديداً Backend/Database > Supabase > Insert Row لتخزين بيانات المستخدم.

const userInsertAction = {
  actionType: 'Insert Row',
  table: 'users',
  fields: {
    id: AuthenticatedUser.uid,
    email: TextField.email,
    name: TextField.name,
    created_at: GlobalProperties.CurrentTime,
  },
};

الخطوة 5: إضافة منطق تسجيل الدخول

كرر العملية لزر 'Sign In'، لكن اضبط نوع الإجراء على Login.

الخطوة 6: تنفيذ وظيفة تسجيل الخروج

أنشئ إجراء تسجيل خروج على زر تسجيل الخروج في HomeListPage:

1. نوع الإجراء: Logout
2. الخصائص: لا توجد إعدادات إضافية مطلوبة.

استرداد وعرض الملاحظات

الخطوة 7: إنشاء عرض قائمة الملاحظات

1. الانتقال إلى صفحة قائمة الملاحظات:
2. استعلام جدول الملاحظات: في HomeListPage، اضبط استعلام Supabase لاسترداد قائمة الملاحظات.

const notesQuery = {
  queryType: 'List of Rows',
  table: 'notes',
  fields: ['title', 'created_at'],
};

الخطوة 8: ربط عناصر واجهة المستخدم بالبيانات

اربط البيانات من جدول الملاحظات بعناصر NoteItem:

• العنوان: ربط بـ notes Row > title
• التاريخ: ربط بـ notes Row > created_at

التنقل بين الصفحات

الخطوة 9: تحديد إجراءات التنقل

1. الانتقال إلى NoteDisplayPage: عند النقر على NoteItem، انتقل إلى NoteDisplayPage، مع تمرير بيانات الملاحظة المحددة.

الخطوة 10: عرض محتوى الملاحظة

اربط بيانات الملاحظة المستلمة بعناصر واجهة المستخدم في NoteDisplayPage:

• العنوان والوصف والصورة

إضافة ملاحظات جديدة

الخطوة 11: الانتقال إلى CreateNotePage

اضبط زر Create للانتقال من HomeListPage إلى CreateNotePage بدون معلمات.

الخطوة 12: وظيفة رفع الملفات

أضف إجراءً لزر رفع الصورة لحفظ الملف في Supabase.

const uploadAction = {
  uploadType: 'Supabase',
  bucket: 'notes',
  filePath: URL.path,
};

الخطوة 13: الظهور الشرطي للصور المرفوعة

قم بإعداد الظهور الشرطي لعنصر الصورة لمنع استثناءات null:

1. الشرط: رابط الملف المرفوع ليس فارغاً.

الخطوة 14: إجراء إنشاء ملاحظة

عيّن إجراءات الواجهة الخلفية لزر 'Create' لإدراج صف جديد في جدول الملاحظات والعودة.

const createNoteAction = {
  actionType: 'Insert Row',
  table: 'notes',
  fields: {
    title: TextField.title,
    description: TextField.description,
    image_url: WidgetState.uploadedFileURL,
    created_at: GlobalProperties.CurrentTime,
  },
};

الخلاصة

مبروك! لقد نجحت في بناء تطبيق تدوين ملاحظات باستخدام FlutterFlow و Supabase. قدم هذا الدليل إرشاداً كاملاً، من إعداد قاعدة البيانات إلى عمليات CRUD، مما يضمن أن لديك أساساً متيناً لتوسيع تطبيقك بشكل أكبر.

لمزيد من الدروس والموارد التفصيلية، ارجع إلى وثائق FlutterFlow الرسمية و وثائق Supabase.

شكراً لمتابعتك هذا الدليل، وبرمجة سعيدة!

المرجع: "FlutterFlow Docs Troubleshooting Guides Docs FeedbackAsk or Search⌘ + K" متاح على وثائق FlutterFlow.