تطوير تطبيق ويب كامل الميزات ونشره ومراقبته باستخدام أداة "نماذج أولية للتطبيقات"

يوضّح لك هذا الدليل كيفية استخدام App Prototyping agent لتطوير تطبيق كامل المكدس ونشره بسرعة بمساعدة Gemini. ستستخدم طلبًا باللغة الطبيعية لإنشاء تطبيق Next.js يحدّد المواد الغذائية من صورة أو كاميرا داخل المتصفّح يقدّمها مستخدم مسجّل الدخول، وينشئ وصفة تحتوي على المكوّنات المحدّدة. بعد ذلك، يمكن للمستخدمين اختيار تخزين الوصفة في قاعدة بيانات قابلة للبحث.

بعد ذلك، ستحسّن التطبيق وتعدّله قبل نشره في Firebase App Hosting.

تشمل التقنيات الأخرى التي ستستخدمها أثناء متابعة هذا الدليل ما يلي:

الخطوة 1: إنشاء تطبيقك

  1. سجِّل الدخول إلى حسابك على Google وافتح Firebase Studio.

  2. في حقل إنشاء نموذج أولي لتطبيق باستخدام الذكاء الاصطناعي ، أدخِل الطلب التالي الذي سينشئ تطبيق وصفات مستند إلى الصور ويستخدم كاميرا المتصفّح والذكاء الاصطناعي التوليدي.

    على سبيل المثال، يمكنك إدخال طلب مثل ما يلي لإنشاء تطبيق لإنشاء الوصفات:

    Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.

  3. يمكنك اختياريًا تحميل صورة لإرفاقها بطلبك. على سبيل المثال، يمكنك تحميل صورة تحتوي على نظام الألوان الذي تريد أن يستخدمه تطبيقك، واطلب من Firebase Studio استخدامها. يجب أن تكون الصور أقل من 3 ميغابايت.

  4. انقر على إنشاء نموذج أولي باستخدام الذكاء الاصطناعي.

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

  5. راجِع المخطط الأولي. إذا لزم الأمر، أدخِل بعض التغييرات. على سبيل المثال، يمكنك تغيير اسم التطبيق المقترَح أو نظام الألوان باستخدام أحد الخيارَين التاليَين:

    • انقر على تخصيص وعدِّل الـ مخطط الأولي مباشرةً. أدخِل التغييرات التي تريدها، وانقر على حفظ.

    • في حقل صِف... في لوحة المحادثة، أضِف أسئلة توضيحية وسياقًا. يمكنك أيضًا تحميل صور إضافية.

  6. انقر على إنشاء نموذج أولي لهذا التطبيق.

  7. تبدأ App Prototyping agent في ترميز تطبيقك.

    • بما أنّ تطبيقك يستخدم الذكاء الاصطناعي، يُطلب منك إضافة مفتاح Gemini API أو إنشاؤه. إذا نقرت على "الإنشاء تلقائيًا"، ستوفّر App Prototyping agent مشروعًا على Firebase ومفتاح Gemini API لك.

الخطوة 2: الاختبار والتحسين وتصحيح الأخطاء والتكرار

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

  • مراجعة تطبيقك والتفاعل معه: بعد اكتمال إنشاء الرمز، تظهر معاينة لتطبيقك. يمكنك التفاعل مع المعاينة مباشرةً لاختبارها. مزيد من المعلومات في مقالة معاينة تطبيقك

  • إضافة Cloud Firestore وFirebase Authentication: خلال مرحلة التكرار، يمكنك أن تطلب من App Prototyping agent إضافة مصادقة المستخدم و قاعدة بيانات باستخدام Cloud Firestore وFirebase Authentication. على سبيل المثال، امنح المستخدمين إمكانية حفظ الوصفات وتنزيلها باستخدام طلب مثل ما يلي:

    Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.

  • إصلاح أي أخطاء عند حدوثها: في معظم الحالات، تطلب منك App Prototyping agent إصلاح أي أخطاء تظهر. انقر على إصلاح الخطأ للسماح لها بمحاولة إجراء إصلاح.

    إذا ظهرت لك أخطاء لم يُطلب منك إصلاحها تلقائيًا، انسخ الخطأ وأي سياق ذي صلة (على سبيل المثال، "هل يمكنك إصلاح هذا الخطأ في رمز تهيئة Firebase؟") في نافذة المحادثة و أرسِله إلى Gemini.

  • الاختبار والتكرار باستخدام اللغة الطبيعية: اختبِر تطبيقك بدقة و استخدِم App Prototyping agent لتكرار الرمز والمخطط الأولي إلى أن تصبح راضيًا عنهما.

    أثناء عرض Prototyper، يمكنك أيضًا استخدام الميزات التالية:

    • انقر على رمز إضافة تعليق توضيحي إضافة تعليق توضيحي للرسم مباشرةً على نافذة "المعاينة". استخدِم أدوات الأشكال والصور والنصوص المتاحة، بالإضافة إلى طلب نص اختياري، لوصف ما تريد أن تغيّره App Prototyping agent بشكل مرئي.

    • انقر على اختيار الرمز اختيار لاختيار عنصر معيّن وإدخال تعليمات لـ App Prototyping agent. يتيح لك ذلك استهداف رمز أو زر أو نص أو عنصر آخر معيّن بسرعة. عند النقر على صورة، يكون لديك أيضًا خيار البحث عن صورة مخزّنة من Unsplashواختيارها.

    يمكنك اختياريًا النقر على رمز الرابط مشاركة رابط المعاينة لمشاركة تطبيقك علنًا وبشكل مؤقت باستخدام Firebase Studio المعاينات العلنية.

  • إنشاء مشروع على Firebase: توفّر App Prototyping agent مشروعًا على Firebase نيابةً عنك في الحالات التالية:

    • الإنشاء التلقائي لمفتاح Gemini API
    • طلب ربط تطبيقك بمشروع Firebase
    • طلب المساعدة في ربط تطبيقك بخدمات Firebase، مثل Cloud Firestore أو Firebase Authentication
    • النقر على الز0}نشر وإعداد Firebase App Hosting

    لتغيير مشروع Firebase المرتبط بمساحة عملك، اطلب من App Prototyping agent استخدام رقم تعريف المشروع الذي تريد استخدامه بدلاً منه. على سبيل المثال، "التبديل إلى مشروع Firebase برقم التعريف <your-project-id>."

  • اختبار التطبيق والتحقّق من قواعد قاعدة بيانات Cloud Firestore: في لوحة معاينة التطبيق ، حمِّل صورة تعرض أطعمة مختلفة لاختبار قدرة تطبيقك على تحديد المكوّنات وإنشاء الوصفات وحفظها.

    سجِّل الدخول كمستخدمين مختلفين وأنشئ وصفات: تأكَّد من أنّ المستخدمين الذين تمّت مصادقتهم يمكنهم الاطّلاع على وصفاتهم الخاصة والوصفات التي أنشأوها، وأنّ جميع المستخدمين يمكنهم الاطّلاع على الوصفات العلنية.

    عندما تطلب من App Prototyping agent إضافة Cloud Firestore، فإنّها تكتب قواعد قاعدة بيانات Cloud Firestore وتنشرها نيابةً عنك. راجِع القواعد في الـ Firebase console.

  • تصحيح الأخطاء والتكرار مباشرةً في الرمز: انقر على رمز تبديل الرمز التبديل إلى الرمز لفتح طريقة عرض Code، حيث يمكنك الاطّلاع على جميع ملفات تطبيقك وتعديل الرمز مباشرةً. يمكنك العودة إلى وضع Prototyper في أي وقت.

    أثناء عرض Code، يمكنك أيضًا استخدام الميزات المفيدة التالية:

    • ميزات تصحيح الأخطاء وإعداد التقارير المضمّنة في Firebase Studio's لفحص تطبيقك وتصحيح الأخطاء فيه وتدقيقه

    • المساعدة المستندة إلى الذكاء الاصطناعي باستخدام Gemini إما مضمّنة في الرمز أو باستخدام المحادثة التفاعلية (كلاهما متاحان تلقائيًا).Gemini يمكن للمحادثة التفاعلية تشخيص المشاكل وتقديم الحلول وتشغيل الأدوات للمساعدة في إصلاح تطبيقك بشكل أسرع. للوصول إلى المحادثة، انقر على رمز الشرارةGemini في أسفل مساحة العمل.

    • الوصول إلى Firebase Local Emulator Suite لعرض بيانات قاعدة البيانات و بيانات المصادقة. لفتح المحاكي في مساحة عملك:

      1. انقر على رمز تبديل الرمز التبديل إلى الرمز وافتح إضافة Firebase Studio (Ctrl+',Ctrl+' أو Cmd+',Cmd+' على نظام التشغيل MacOS).

      2. انتقِل إلى منافذ الخلفية ووسِّعها.

      3. في عمود الإجراءات الذي يتوافق مع المنفذ 4000، انقر على فتح في نافذة جديدة.

  • اختبار أداء ميزة الذكاء الاصطناعي التوليدي وقياسه: يمكنك استخدام Genkit Developer UI لتشغيل تدفقات الذكاء الاصطناعي في Genkit واختبارها وتصحيح الأخطاء فيها، والتفاعل مع نماذج مختلفة وتحسين طلباتك وغير ذلك.

    لتحميل تدفقاتك Genkit في Genkit Developer UI وبدء الاختبار:

    1. من الوحدة الطرفية في مساحة عملك في Firebase Studio، شغِّل الأمر التالي لضبط مفتاح Gemini API وبدء خادم Genkit:

       npm run genkit:watch

    2. انقر على الرابط Genkit Developer UI. تُفتح Genkit Developer UI في نافذة جديدة تحتوي على تدفقاتك وطلباتك وأدوات تضمينك ومجموعة من النماذج المختلفة المتاحة.

    مزيد من المعلومات عن Genkit Developer UI في أدوات المطوّرين في Genkit.

(اختياري) الخطوة 3: نشر تطبيقك باستخدام App Hosting

بعد اختبار تطبيقك والتأكّد من أنّه يلبي احتياجاتك في مساحة عملك، يمكنك نشره على الويب باستخدام Firebase App Hosting.

عند إعداد App Hosting، ينشئ Firebase Studio مشروعًا على Firebase نيابةً عنك (إذا لم يتم إنشاء مشروع من قبل من خلال الإنشاء التلقائي لمفتاح Gemini API أو خدمات الخلفية الأخرى)، ويرشدك خلال عملية ربط حساب على Cloud Billing.

لنشر تطبيقك:

  1. انقر على نشر لإعداد مشروعك على Firebase ونشر تطبيقك. تظهر لوحة نشر تطبيقك.

  2. في خطوة مشروع Firebase ، تعرض App Prototyping agent مشروع Firebase المرتبط بمساحة العمل. إذا لم يكن هناك مشروع على Firebase، تنشئ App Prototyping agent مشروعًا جديدًا لك. انقر على التالي للمتابعة.

  3. في خطوة ربط Cloud Billing حساب ، اختَر أحد الخيارَين التاليَين:

    • اختَر حساب Cloud Billing الذي تريد ربطه بمشروعك على Firebase.

    • إذا لم يكن لديك حساب Cloud Billing أو أردت إنشاء حساب جديد، انقر على إنشاء حساب Cloud Billing. سيؤدي ذلك إلى فتح الـ Google Cloud console، حيث يمكنك إنشاء حساب جديد للخدمة الذاتية Cloud Billing. بعد إنشاء الحساب، ارجِع إلى Firebase Studio واختَر الحساب من قائمة Link Cloud Billing.

  4. انقر على التالي. Firebase Studio يربط حساب الفوترة بالمشروع المرتبط بمساحة عملك، والذي تم إنشاؤه إما عند الإنشاء التلقائي لمفتاح Gemini API أو عند النقر على نشر.

  5. انقر على إعداد الخدمات. تبدأ App Prototyping agent في توفير خدمات Firebase.

  6. انقر على النشر الآن. Firebase Studio يضبط خدمات Firebase ثم يبدأ عملية طرح App Hosting يمكن أن يستغرق اكتمال هذا الإجراء عدة دقائق. لمعرفة المزيد من المعلومات عن ما يحدث وراء الكواليس، اطّلِع على مقالة عملية التصميم.App Hosting

  7. عند اكتمال خطوة النشر، تظهر نظرة عامة على التطبيق مع عنوان URL وإحصاءات التطبيق المستندة إلى App Hosting إمكانية المراقبة. لاستخدام نطاق مخصّص (مثل example.com أو app.example.com) بدلاً من النطاق الذي أنشأته Firebase، يمكنك إضافة نطاق مخصّص في وحدة تحكُّم Firebase.

لمزيد من المعلومات عن App Hosting، اطّلِع على مقالة التعرّف على App Hosting وكيفية عملها.

(مقترَحة) الخطوة 4: اختبار تطبيقك المنشور

عند اكتمال عملية النشر ونشر تطبيقك على Firebase، يصبح Cloud Firestore وFirebase Authentication جاهزَين للاختبار في مرحلة الإنتاج.

إنشاء الفهارس لقاعدة بيانات Cloud Firestore

عند نشر تطبيقك على Cloud Firestore، لا يتم إنشاء الفهارس تلقائيًا. هذا يعني أنّه بعد النشر، قد تحتاج إلى إنشاء فهارس لطلبات البحث.

قد يظهر ذلك في رسائل الخطأ أو في "وحدة تحكّم المطوّرين" في المتصفّح.

لإنشاء الفهارس بعد النشر:

  1. من تطبيق منشور: في لوحة نظرة عامة على التطبيق (انقر على نشر إذا لم تكن ظاهرة)، ابحث عن الرابط زيارة تطبيقك وانقر عليه.

    من معاينة Firebase Studio:افتح "وحدة تحكّم المطوّرين" في المتصفّح وابحث عن رسالة الخطأ 200 التي ينشئها Cloud Firestore.

  2. اختبِر جميع التدفقات ضِمن تطبيقك. قد يظهر خطأ يشير إلى ما يلي: "حدث خطأ أثناء تحميل الوصفات. يتطلّب طلب البحث فهرسًا. يمكنك إنشاؤه هنا:" مع رابط يؤدي إلى وحدة تحكُّم Firebase.

  3. اتّبِع الرابط للانتقال إلى وحدة تحكُّم Firebase وسيظهر فهرس مقترَح.

  4. انقر على حفظ لقبول الفهرس المقترَح.

  5. ارجِع إلى تطبيقك وأعِد تحميل الصفحة.

  6. واصِل اختبار جميع التدفقات في تطبيقك لإضافة الفهارس عند الضرورة.

مزيد من المعلومات في مقالة إدارة الفهارس في Cloud Firestore

عرض بيانات Cloud Firestore وFirebase Authentication في وحدة تحكُّم Firebase

يمكنك عرض البيانات المباشرة من تطبيقك في وحدة تحكُّم Firebase بعد النشر.

  • لعرض قاعدة بيانات Cloud Firestore المباشرة، افتح Firebase وحدة تحكُّم واختَر إنشاء > قاعدة بيانات Firestore من قائمة التنقّل.

    من هنا، يمكنك فحص البيانات المخزّنة وعرض قواعد الأمان واختبارها وإنشاء الفهارس. مزيد من المعلومات في مقالة Cloud Firestore.

  • لعرض بيانات Firebase Authentication المباشرة، افتح Firebase وحدة تحكُّم واختَر إنشاء > المصادقة من قائمة التنقّل.

    من هنا، يمكنك فحص إعدادات المصادقة ومستخدمي التطبيق. مزيد من المعلومات في Firebase Authentication.

اختبار قواعد Cloud Firestore في مرحلة الإنتاج

بعد نشر تطبيقك، عليك اختبار قواعد الأمان في Cloud Firestore مرة أخرى ، وذلك في بيئة التشغيل الفعلي. يساعد ذلك في ضمان إمكانية وصول المستخدمين المصرَّح لهم إلى بياناتك وحمايتها من الوصول غير المصرَّح به.

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

  • اختبار التطبيق: تفاعَل مع تطبيقك المنشور، ونفِّذ عمليات تؤدي إلى ظهور أنماط مختلفة للوصول إلى البيانات (القراءة، والكتابة، والحذف) لأدوار المستخدمين أو حالاتهم المختلفة. يساعد هذا الاختبار في العالم الحقيقي في التأكّد من تطبيق قواعدك بشكل صحيح في الواقع.

  • ساحة قواعد الأمان: لإجراء عمليات تحقّق مستهدَفة، استخدِم ساحة قواعد الأمان في وحدة تحكُّم Firebase تتيح لك هذه الأداة محاكاة الطلبات (القراءة والكتابة والحذف) في قاعدة البيانات Cloud Firestoreباستخدام قواعد الإنتاج. يمكنك تحديد حالة مصادقة المستخدم والمسار إلى البيانات ونوع العملية لمعرفة ما إذا كانت قواعدك تسمح بالوصول أو ترفضه على النحو المطلوب.

  • اختبار الوحدة: لإجراء اختبار أكثر شمولاً، يمكنك كتابة اختبارات الوحدة لقواعد الأمان الخاصة بك. تتيح لك الخلفية لمعاينة Firebase Studio المستندة إلى Firebase Local Emulator Suite تشغيل هذه الاختبارات محليًا، ما يحاكي سلوك قواعد الإنتاج. هذه طريقة فعالة للتحقّق من منطق القواعد المعقّد والتأكّد من تغطية السيناريوهات المختلفة. بعد النشر، عليك التحقّق مرة أخرى من أنّ اختبارات الوحدة التي تستخدم المحاكي تعمل على النحو المتوقّع وتغطّي جميع السيناريوهات.