في هذا البرنامج التعليمي ، سوف نلقي نظرة فاحصة على كيفية دمج Bubble و AppMaster . لنفترض أن الواجهة الأمامية للتطبيق الذي يتم تطويره تم إنشاؤها في Bubble ، ولكن تبين أن إمكانياتها للعمل مع النهاية الخلفية غير كافية ، وتريد استخدام وظيفة AppMaster .
لنكتشف كيف:
- استخدم AppMaster كقاعدة بيانات لـ Bubble
- إرسال طلبات API إلى Appmaster
- إجراء مصادقة المستخدم
- استخدم رمز التفويض المميز في رؤوس الطلب
تكوين API Connector
بادئ ذي بدء ، تحتاج إلى إنشاء إمكانية إرسال طلبات واجهة برمجة التطبيقات الخارجية من Bubble . للقيام بذلك ، تحتاج إلى إضافة المكون الإضافي API Connector .
دعنا نقوم بتكوينه على الفور لإرسال طلب مصادقة إلى AppMaster . مهمتنا هي إرسال معلومات تسجيل الدخول وكلمة المرور لتلقي رمز التفويض ردًا على ذلك. سنستخدم نقطة النهاية القياسية التي يتم إنشاؤها في كل مشروع افتراضيًا - POST /auth/ (Auth: Authentication) . يمكن الحصول على معلومات كاملة حول هذا الموضوع ، مع العنوان الدقيق المطلوب طلبه في مشروعك ، من Swagger .
لتكوين API Connector ، انقر فوق الزر Add Another API وقم بتعيين معلمات الطلب المراد استخدامها. المعلمات الرئيسية هي:
- طريقة الطلب. POST
- URL. نفس Request URL من Swagger
- Use as. Data . استجابةً لذلك ، تحتاج إلى تلقي بيانات رمز التفويض.
- Data type. JSON
- Body . الإعداد الأكثر أهمية فيه هو أنك تحتاج إلى تحديد البيانات التي سيتم إرسالها إلى خادم AppMaster . في الوقت نفسه ، يحتوي <> على قيم ديناميكية يجب الحصول عليها من حقول الإدخال المقابلة.
{
"login": "<login>",
"password": "<password>"
}
عند الملء ، يجب عليك تحديد بيانات طلب الاختبار (ملء قيم تسجيل الدخول وكلمة المرور في Body parameters ) ، وتهيئة الطلب ، والتأكد من أنه يعمل بشكل صحيح وأن الإجابة تأتي بالفعل.
إعداد حقول الإدخال
الخطوة التالية هي إنشاء واجهة للتطبيق. نحن نقصر أنفسنا على الحد الأدنى الضروري. سنحتاج إلى إنشاء 3 حقول إدخال:
- تسجيل الدخول
- كلمة المرور
- رمز التفويض
الأولين واضحان جدًا. سيشيرون إلى اسم المستخدم وكلمة المرور الخاصة بالمستخدم للمصادقة. الأكثر أهمية هو المجال الثالث - مجال الرمز المميز. يمكن أيضًا إدخال قيمة الرمز المميز يدويًا ، ولكن مهمتنا هي إتاحة إمكانية تلقي البيانات من الواجهة الخلفية AppMaster وعرضها هناك.
للقيام بذلك ، تحتاج إلى تكوين قيمة المحتوى الأولية :
- Get data from an External API مع تحديد الطلب الذي تم إنشاؤه مسبقًا في API Connector (في هذا المثال ، اسمه هو AppMaster Auth Call )
- في حقلي (body) login (النص الأساسي (body) password النص الأساسي) ، تحتاج إلى تحديد القيم من حقول الإدخال المقابلة
- حدد قيمة token (يأتي الكثير من البيانات المختلفة استجابةً للطلب ، ولكن في هذا المثال ، يكون token فقط هو موضع الاهتمام)
يمكن اختبار النتيجة. عند إدخال البيانات في حقلي تسجيل الدخول وكلمة المرور ، سيتم تقديم طلب تلقائيًا إلى الواجهة الخلفية AppMaster . عندما يتم إدخال البيانات بشكل صحيح ، ويعيد الطلب نتيجة ناجحة ، سيظهر رمز التفويض المستلم في الحقل الثالث.
طلب GET على قاعدة البيانات
الخطوة التالية هي إنشاء طلب API جديد. هذه المرة ستكون المهمة هي الحصول على البيانات من قاعدة البيانات. في الوقت نفسه ، فإن الوضع معقد بسبب حقيقة أن هذه البيانات ليست متاحة مجانًا ولكنها متاحة فقط للمستخدمين المصرح لهم.
للقيام بذلك ، ستحتاج إلى إضافة عنوان خاص للطلب. يجب أن يطلق عليه " Authorization " ويجب أن تكون قيمته " Bearer " ومفتاح التفويض الذي تم الحصول عليه مسبقًا.
دعونا نفعل ذلك في الممارسة. تحتاج إلى العودة إلى المكون الإضافي API Connector وإنشاء طلب API جديد. في المثال الموجود على لقطة الشاشة ، هذه مكالمة إلى قاعدة بيانات المطعم للحصول على قائمة بالأطباق وإنشاء قائمة.
يتمثل الاختلاف المهم عن الطلب السابق في أنه بدلاً من المعلمات (على الرغم من إمكانية إضافتها أيضًا) ، يتم استخدام رأس:
- Key = Authorization
- Value = Bearer {authorization token} (لتهيئة الطلب ، يجب أن تحدد فورًا الرمز الحقيقي الذي تلقيته سابقًا)
يرجى ملاحظة أنه في إعدادات الرأس ، يجب عليك إلغاء تحديد خانة الاختيار Private ؛ وإلا فلن يكون من الممكن إنشائه ديناميكيًا. أخيرًا ، لا تنسَ تهيئة الطلب والتأكد من أنه يعمل.
Repeating Group
الآن يجب أن نعود إلى المصمم ونضيف عنصر مجموعة متكررة جديدًا ونقوم بإعداده:
- Type of content - بيانات طلب AppMaster Get Data .
- Data source - من المهم تحديد Authorization بشكل صحيح. وهو يتألف من جزأين. الثابت الأول هو " Bearer ". يجب أن يحتوي المتغير الثاني على رمز ترخيص وأن يؤخذ من حقل الإدخال المقابل.
إذا تم كل شيء بشكل صحيح ، فسيتم استلام البيانات ، وستبقى الخطوة الأخيرة فقط - تحتاج إلى عرضها. للقيام بذلك ، يمكنك إضافة حقلين نصيين إلى Repeating Group . سيظهر أحدهم اسم الطبق ، والثاني سيظهر سعره.
يمكنك فتح التطبيق الناتج والتحقق من نجاح تكامل Bubble و AppMaster . تم إنشاء الواجهة الأمامية في Bubble.io ، ويتم تشغيل كل ما يتعلق بالواجهة الخلفية بواسطة AppMaster.io :
- يتم تنفيذ مصادقة المستخدم
- يتم عرض رمز التفويض المستلم
- يتم تنفيذ العمل مع قاعدة البيانات
- يتم عرض البيانات المتاحة فقط للمستخدمين المصرح لهم
