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

يوضّح لك هذا الدليل كيفية استخدام App Prototyping agent من أجل تطوير تطبيق كامل الميزات ونشره بسرعة بمساعدة Gemini في Firebase. ستستخدم طلبًا بلغة طبيعية لإنشاء تطبيق 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. انقر على إنشاء نموذج أوّلي باستخدام الذكاء الاصطناعي.

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

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

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

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

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

  7. يبدأ وكيل إنشاء النماذج الأوّلية للتطبيقات في كتابة الرمز البرمجي لتطبيقك.

    • بما أنّ تطبيقك يستخدم الذكاء الاصطناعي، سيُطلب منك إضافة مفتاح 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 view, you can also use the following features:

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

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

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

  • إنشاء مشروع على Firebase: يوفّر وكيل إنشاء نماذج التطبيقات مشروعًا على 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، سيكتب App Prototyping agent قواعد بيانات Cloud Firestore وينشرها نيابةً عنك. راجِع القواعد في Firebase وحدة التحكّم.

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

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

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

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

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

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

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

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

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

    لتحميل مسارات Genkit في واجهة مستخدم Genkit Developer وبدء الاختبار:

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

       npm run genkit:watch

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

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