مشاركة متقاطعة من مقالتي على مدونة Zing.

Supabase هو بديل مفتوح المصدر لـ Firebase. هناك مجموعة متنوعة من الخدمات التي تقدمها، ولكن لأغراض هذه المقالة، سنتعمق في كيفية عملها كواجهة خلفية بسيطة لشبكاتنا.

الإعداد الأولي

هناك بعض الخطوات التي نحتاج إلى تنفيذها على جانب Supabase من الأشياء قبل أن نتمكن من البدء في تكوين شبكاتنا.

1. إنشاء الحساب

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

2. أنشئ مشروعك الأول

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

3. قم بتدوين معلومات المشروع

في هذه المرحلة، يجب أن ترى عنوان URL لمشروعك ومفتاح واجهة برمجة التطبيقات (API) الخاص بك. سنحتاج إلى إعطاء كليهما إلى ZingGrid في الكود الخاص بنا لاحقًا لذا تأكد من تخزينهما في ملف محلي آمن.

4. أنشئ جدولك الأول

من الشريط الجانبي، انقر فوق قسم محرر الجدول. من هنا يمكننا إنشاء جدولنا الأول

الخطوة الأولى هي تسمية الجدول الخاص بنا، هنا سأستخدم جدول العرض التوضيحي

ثم يمكننا تعديل الأعمدة، سيكون لدي عمودين لهذا المثال. واحد للأسماء الأولى وواحد للأسماء الأخيرة.

5. أضف بعض نماذج البيانات

6. تحديث إعدادات الأمان

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

⚠️ ملاحظة: هذا التغيير في الإعدادات مخصص فقط لغرض هذا العرض التوضيحي، وليس مخصصًا للإنتاج

محول Supabase - REST API

يدعم ZingGrid كلا الطريقتين للتفاعل مع Supabase - عبر REST API وعبر البرنامج النصي للعميل. سنتناول أولاً استخدام REST API.

باستخدام الرمز التجريبي الأولي أدناه، تأكد من استبدال ما يلي:

• ***رابط*** - عنوان URL للمشروع الذي قمت بتدوينه سابقًا
• ***tableName*** - اسم جدول Supabase الذي أنشأته للتو
• ***apiKey*** - مفتاح Supabase API الذي قمت بتدوينه سابقًا

عند عرض تلك الصفحة في المتصفح، يجب أن تبدأ في رؤية البيانات الأولية التي قمنا بملءها!

محول SupabaseJS - البرنامج النصي للعميل

إذا كان تطبيقك يستخدم مكتبة عميل Supabase JavaScript (والتي يمكنك قراءة المزيد عنها على موقع المستندات الخاص بهم)، فستكون قادرًا على تخزين بيانات اعتماد Supabase خارج الترميز الخاص بك مما يجعله أكثر مرونة.

تعديل المثال السابق، نقوم أولاً بإنشاء كائن عميل Superbase (المزيد حول ذلك في مستنداتهم)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

ثم قم بتسجيل هذا العميل مع ZingGrid

ZingGrid.registerClient(supabaseClient);

أخيرًا قمنا بتعيين سمة المحول على بيانات zg على SupabaseJS ولدينا ما يلي

العمل بنفس الطريقة السابقة