Atoms
البدءالميزاتعمليات التكاملنصائح وحيلالباقات والفوترةسجل التغييرات
الموصلات

ربط Supabase

باستخدام Supabase، يمكنك بسهولة إعداد واجهة خلفية لمواقعك الإلكترونية — دون الحاجة إلى أي خبرة في التطوير.

نظرة عامة

Supabase هي منصة واجهة خلفية مفتوحة المصدر تُمكّن المستخدمين من تخزين البيانات وتوفير وظائف شبيهة بالواجهة الخلفية. يمكنك الاتصال بـ Supabase لحل مشكلة أن فريق Atoms الخاص بك يخزن فقط في ذاكرة المتصفح، والتي قد تُفقد عند التحديث أو الإغلاق. من خلال دمج Atoms مع Supabase، يمكنك تحويل موقعك الإلكتروني إلى تطبيق كامل الوظائف مع تخزين دائم وميزات متقدمة.

اطّلع على المزيد من التعليمات هنا:

المزايا الرئيسية

إلى جانب عدم الحاجة إلى خبرة في التطوير، فإنه يوفّر ثلاث مزايا رئيسية أخرى:

  1. إعداد سريع: جهّز واجهتك الخلفية وسرّع عملية التطوير.
  2. قابلية توسّع عالية: تكيّف مع نمو المستخدمين، مما يسمح لمشروعك بالتوسع دون قيود.
  3. فعّال من حيث التكلفة: يوفّر فئة مجانية مثالية للمشاريع الصغيرة والشركات الناشئة.

ربط Supabase بـ Atoms

إليك دليلاً قصيراً لربط Atoms مع Supabase.

  1. ابدأ تكامل Supabase في Atoms

    • افتح الإعدادات.

    • اختر Connectors من الشريط الجانبي الأيسر.

    • ابحث عن موصل Supabase وانقر على Connect.

    • سيعرض Atoms واجهة إعداد الاتصال التي يمكنك اتباعها.

  2. قم بالمصادقة وتهيئة مشروعك

    ستظهر نافذة منبثقة تطلب منك تسجيل الدخول إلى حسابك في Supabase.

    • اختر مؤسستك من القائمة المنسدلة.

    • انقر على Authorize Atoms لتفويض حساب Supabase الخاص بك. (يكتمل الاتصال خلال ثوانٍ — ولا حاجة إلى إعداد يدوي)

    • بعد التفويض، يمكنك:

      • اختيار مشروع Supabase موجود من القائمة، أو
      • النقر على +Add New One لإضافة مؤسسة جديدة على الفور. (إذا كنت بحاجة إلى إرشاد، فإن مساعد Atoms متاح لمساعدتك خطوة بخطوة في ربط Supabase بـ Atoms.)

  3. التهيئة التلقائية

    • بمجرد تحديد مشروعك، سيتصل Atoms تلقائياً بمشروع Supabase الخاص بك. وسيجمع بنية قاعدة البيانات والجداول وإعدادات الأمان.
    • عندما ترى إشعار "Supabase Connected"، ستكون واجهتك الخلفية قد تم إعدادها بالكامل وأصبحت جاهزة للاستخدام.

مصادقة المستخدم

بعد إنشاء تطبيقك في Atoms، قد ترغب في تنفيذ مصادقة المستخدم. يعمل Supabase Auth على تبسيط إضافة المصادقة والتفويض إلى تطبيقك. في هذه العملية، سيرشدك Atoms عبر طريقتين: (1) البريد الإلكتروني وكلمة المرور و(2) تسجيلات الدخول الاجتماعية (Google).

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

  1. اربط Supabase مع Atoms

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

  2. أخبر Agents بمتطلباتك

    • أدخل متطلباتك في الدردشة. على سبيل المثال، يمكنك ببساطة كتابة Prompt: "Add authentication".
    • سيؤدي هذا عادةً إلى إنشاء صفحة أساسية لتسجيل الدخول والتسجيل متصلة بنظام المصادقة الخاص بـ Supabase.

  3. أنشئ مستخدمين للاختبار

    • استخدم واجهة تسجيل الدخول/التسجيل المضافة حديثاً لإنشاء مستخدم اختباري.
    • حدّث الصفحة للتحقق من استمرار جلسة المستخدم.
    • بدلاً من ذلك، انتقل إلى لوحة تحكم Supabase، ثم إلى Authentication > Users، وأضف مستخدماً يدوياً للاختبار.

  4. انشر تطبيقك

تسجيلات الدخول الاجتماعية (Google)

  1. قم بتهيئة Google OAuth في مشروع Supabase

    • انتقل إلى صفحة Authentication في لوحة تحكم Supabase.
    • انتقل إلى الصفحة الفرعية Sign In/Up.
    • حدّد خيار Google وفعّل المفتاح لتمكينه. (للاطلاع على خطوات تهيئة Supabase بالتفصيل، راجع Configuring Google OAuth in Supabase أو Supabase Docs.)

  2. أخبر Agents بمتطلباتك

    • أدخل متطلباتك في الدردشة. على سبيل المثال: "Add Google authentication".
    • سيؤدي هذا إلى إضافة زر Continue with Google إلى صفحة تسجيل الدخول الخاصة بك.

  3. اختبر مصادقة Google

    • انتقل إلى صفحة تسجيل الدخول.
    • انقر على زر Continue with Google.
    • سجّل الدخول باستخدام حساب Google وتحقق من تحديث ملف المستخدم الشخصي بشكل صحيح.
    • أكمل تدفق Google OAuth للتأكد من إعادة توجيه المستخدم إلى تطبيقك.

  4. انشر تطبيقك إلى عالم التطبيقات الخاص بـ Atoms

تهيئة Google OAuth في Supabase

  1. أنشئ مشروع Google Cloud

    • الوصول إلى Google Cloud Console

    • أنشئ مشروعاً جديداً

      • انقر على القائمة المنسدلة في الأعلى واختر New Project.
      • أدخل اسم المشروع، وحدد حساب الفوترة، ثم انقر على Create.

  2. قم بتهيئة بيانات اعتماد Google OAuth

    • إعداد شاشة الموافقة

      • في شريط البحث، اكتب OAuth وافتح شاشة الموافقة الخاصة بـ OAuth.
      • املأ اسم تطبيقك، والبريد الإلكتروني لدعم المستخدم، والحقول المطلوبة الأخرى.
      • اختر External أو Internal، ثم انقر على Create.

    • أنشئ OAuth Client ID

      • انقر على Create OAuth Client، ثم اختر OAuth Client ID.
      • بالنسبة إلى Application Type، اختر Web application.
      • في Authorized redirect URIs، أضف رابط callback من لوحة تحكم Supabase.
      • انقر على Create ودوّن Client ID وClient Secret اللذين تم إنشاؤهما.

  3. قم بتهيئة Google OAuth في Supabase

    • سجّل الدخول إلى لوحة تحكم Supabase

    • تمكين Google OAuth

      • انتقل إلى صفحة Authentication.
      • في قسم Providers، ابحث عن خيار Google وقم بتمكينه.
      • أضف Client ID وClient Secret اللذين تم إنشاؤهما سابقاً إلى الحقول المخصصة لهما.

    • حفظ التهيئة

      • انقر على Save لتطبيق التغييرات.

تخزين البيانات

قد ترغب أيضاً في تخزين بيانات المستخدم بعد تهيئة مصادقة المستخدم لتطبيق الويب/التطبيق الخاص بك.

بمجرد الاتصال بـ Supabase، ما عليك سوى إخبار Atoms بالبيانات التي تريد حفظها في قاعدة البيانات. سيقوم Agents تلقائياً بتهيئة جداول قاعدة البيانات ودمجها مباشرةً في واجهة المستخدم لديك.

  1. حدّد متطلباتك

    • أدخل متطلباتك في الدردشة. على سبيل المثال: "Please ensure that new trip records are saved to the database".
    • صف البيانات التي تريد تخزينها بأكبر قدر ممكن من الوضوح.
    • سيقوم Atoms تلقائياً بتهيئة بنية قاعدة البيانات المطلوبة بناءً على مدخلاتك.

  2. اختبر الوظيفة في Atoms

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

  3. تحقّق من مزامنة البيانات بين Atoms وSupabase

    • افتح لوحة تحكم Supabase وانتقل إلى Table Editor.
    • عدّل البيانات الموجودة أو أنشئ بيانات جديدة.
    • ستتم مزامنة التغييرات التي تُجرى في Supabase في الوقت الفعلي مع تطبيق Atoms الخاص بك.
    • ارجع إلى Atoms وتحقق مما إذا كانت البيانات المعدّلة أو المنشأة حديثاً معروضة بشكل صحيح.
    • إذا تمت مزامنة البيانات بنجاح، فهذا يعني أن التهيئة قد اكتملت.

  4. انشر تطبيقك

Edge Functions

تُعد Supabase Edge Functions برامج واجهة خلفية دون خوادم يتم نشرها على عُقد خوادم قريبة من المستخدمين. وهي تلغي الحاجة إلى بناء الخوادم التقليدية وصيانتها، مما يتيح لك تشغيل أي منطق مخصص بزمن وصول أقل للشبكة وأوقات استجابة أسرع. في معظم تطبيقات الويب، تتولى الواجهة الأمامية (الأزرار، والنماذج، وواجهة المستخدم) التفاعلات الأساسية، لكن بعض العمليات المهمة يجب أن تعمل على الواجهة الخلفية، مثل:

  • إرسال رسالة ترحيب عبر البريد الإلكتروني تلقائياً بعد تسجيل المستخدم؛
  • استدعاء واجهات AI البرمجية لتحليل المحتوى أو تقييمه عند إرسال النموذج؛
  • دمج بوابات الدفع التابعة لجهات خارجية وتسجيل تفاصيل الطلب أثناء إتمام الشراء.

يتم تنفيذ جميع هذه العمليات عبر Edge Functions.

حالات الاستخدام

باستخدام Supabase Edge Functions في Atoms، يمكنك:

  • إرسال رسائل ترحيب: إرسال رسالة ترحيب تلقائياً إلى المستخدمين الجدد عبر البريد الإلكتروني مع إرشادات للخطوات التالية بعد تسجيلهم، مما يعزز التفاعل وتجربة الإعداد الأولي.
  • التعامل مع عمليات إرسال نماذج المستخدمين: عند إرسال الملاحظات أو التسجيل أو التعليقات، أنشئ وأرسل إشعار تأكيد تلقائياً (مثل: "We've received your feedback and will review it shortly") حتى يعرف المستخدمون أن الإجراء تم بنجاح.
  • جدولة التذكيرات: إعداد إشعارات يومية أو أسبوعية عبر البريد الإلكتروني أو الإشعارات الفورية (للاجتماعات أو المهام أو الفعاليات) لمساعدة المستخدمين على إدارة وقتهم والبقاء منتجين.
  • الاستفادة من خدمات AI: بعد أن يُدخل المستخدم نصاً، استدعِ تلقائياً واجهات AI البرمجية مثل OpenAI للتدقيق النحوي أو إعادة الصياغة الذكية، ثم أعد النتائج المحسّنة إلى المستخدم.
  • معالجة المدفوعات عبر الإنترنت: عندما يبدأ المستخدمون عملية دفع على منصة التجارة الإلكترونية أو الخدمات الخاصة بك، قم بالدمج مع بوابات مثل Stripe للتعامل مع المعاملات بأمان وعرض صفحات واضحة للنجاح أو الفشل مع تفاصيل الطلب.

إدارة المفاتيح والتخزين

تتطلب العديد من التطبيقات مفاتيح أو بيانات اعتماد API للاتصال بخدمات الجهات الخارجية (مثل Stripe وOpenAI). عند ربط Supabase، يوفّر Atoms طريقة آمنة لإدارة هذه الأسرار واستخدامها. من خلال تكامل Atoms مع Supabase، كلما احتاجت وظيفة إلى سر، يكتشف Atoms ذلك تلقائياً ويطلب منك إدخال القيمة المطلوبة. ما عليك سوى النقر على زر Agent "Add API Key" وإدخال مفتاحك؛ ثم يقوم Atoms بتشفيره وتخزينه في Supabase's Edge Functions Secrets Manager. وعند وقت التشغيل، يتم حقن هذه المفاتيح في الوظيفة بشكل آمن، مما يمنع تخزين بيانات الاعتماد كنص عادي.

إضافة وظائف الواجهة الخلفية ونشرها

بعد الاتصال بـ Supabase، أخبر Agent بما تحتاج إليه:

  • اكتب طلبك في الدردشة. على سبيل المثال: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."

  • بمجرد أن ينشئ Agent الكود، سيظهر زران: Add API Key وView in Edge Function.

  • انقر على Add API Key.

  • أدخل مفتاح API الخاص بك وانقر على Send.

  • انقر على View in Edge Function.

  • ستتم إعادة توجيهك إلى صفحة Supabase Edge Function.

    ملاحظة أمنية: يتم تشفير جميع المفاتيح وتخزينها في Supabase؛ ولا يمكن لـ Atoms الوصول إليها.

الأسئلة الشائعة

كيف أضيف ميزات الواجهة الخلفية الخاصة بـ Supabase إلى تطبيقي؟

قم بدمج Supabase في تطبيقك في ثلاث خطوات بسيطة:

  • انقر على زر التفويض في الزاوية العلوية اليمنى من واجهة الدردشة لتفويض حساب Supabase الخاص بك.
  • اختر مشروع Supabase الذي تريد استخدامه وقم بربطه.
  • شارك متطلباتك في الدردشة، وسيقوم Agents بتطوير الميزات بناءً على مشروع Supabase المتصل.
هل يدعم Supabase تسجيلات الدخول الاجتماعية؟

يدعم Supabase طرق مصادقة متنوعة، بما في ذلك:

  • البريد الإلكتروني وكلمة المرور.
  • المصادقة بدون كلمة مرور: خيارات مثل كلمات المرور لمرة واحدة (OTP) أو الروابط السحرية.
  • تسجيلات الدخول الاجتماعية: دعم لموفري الجهات الخارجية مثل Google وTwitter وGitHub.
  • مصادقة الهاتف.
  • Single Sign-On (SSO): دعم SAML SSO.
  • تسجيل الدخول المجهول: يتيح للمستخدمين تسجيل الدخول بشكل مجهول.
هل أحتاج إلى إنشاء مشروع Supabase منفصل لتطبيقي؟

يمكنك إما اختيار مشروع Supabase موجود أو إنشاء مشروع جديد. يمكن لكل دردشة الاتصال بمشروع واحد فقط في كل مرة.

بعد الاتصال بـ Supabase، هل سيبقى الاتصال قائماً إذا قمت بعمل ريمكس لمشروعي؟

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

هل يمكنني استخدام قاعدة بيانات Supabase واحدة لعدة مشاريع Atoms؟

نعم، يمكنك استخدام قاعدة بيانات Supabase واحدة لعدة مشاريع Atoms. ومع ذلك، تحتاج إلى إدارة الاتصالات والتهيئات بعناية.

لماذا لا يظهر مشروعي ضمن مؤسسات Supabase؟

في الباقة المجانية من Supabase، يتم إيقاف أي مشروع لا يشهد أي نشاط لمدة سبعة أيام متتالية تلقائياً. في قائمة مؤسسات Atoms، بدّل إلى عامل التصفية Inactive لعرض أي من مشاريعك التي تم إيقافها مؤقتاً.

لماذا أرى \

يفرض Supabase ربط OAuth واحداً لواحد بين كل مؤسسة وحساب Atoms. إذا كانت مؤسسة “Test” قد تم تفويضها بالفعل بواسطة مستخدم Atoms آخر، فسيتم رفض أي محاولة لاحقة لربطها بحساب مختلف مع ظهور هذا الخطأ. لحل ذلك، افتح الشريط الجانبي في Supabase Dashboard ضمن Settings → API → OAuth Apps، واحذف منحة Atoms OAuth الحالية لتلك المؤسسة، ثم ارجع إلى Atoms وأعد الاتصال باستخدام حسابك الخاص.

هل كانت هذه الصفحة مفيدة؟

مقالات ذات صلة

قم بالاتصال واستخدم التكاملاتربط GitHubربط Stripe
جميع المجموعات
في هذه الصفحة