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

يوضّح لك هذا الدليل كيفية استخدام 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
    • انقر على الزر نشر وأعِدّ Firebase App Hosting

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

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

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

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

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

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

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

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

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

      1. انقر على رمز تبديل الرمز التبديل إلى Code وافتح إضافة 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، حيث يمكنك إنشاء حساب جديد للخدمة الذاتية على Cloud Billing. بعد إنشاء الحساب، ارجع إلى Firebase Studio واختَر الحساب من قائمة ربط 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 مرة أخرى في بيئة التشغيل الفعلي. يساعد ذلك في ضمان إمكانية وصول المستخدمين المصرَّح لهم إلى بياناتك وحمايتها من الوصول غير المصرَّح به.

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

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

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

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