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

يوضّح لك هذا الدليل كيفية استخدام 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 يمكن للمحادثة التفاعلية تشخيص المشاكل وتقديم الحلول وتشغيل الأدوات للمساعدة في إصلاح تطبيقك بشكل أسرع. للوصول إلى المحادثة، انقر على الرمز sparkGemini في أسفل مساحة العمل.

    • الوصول إلى 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 تشغيل هذه الاختبارات محليًا، ما يحاكي سلوك قواعد الإنتاج. هذه طريقة فعّالة للتحقّق من منطق القواعد المعقّد والتأكّد من تغطية السيناريوهات المختلفة. بعد النشر، عليك التحقّق مرة أخرى من أنّ اختبارات الوحدة التي تستخدم المحاكي تعمل على النحو المتوقّع وتغطّي جميع السيناريوهات.