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

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

تشمل التقنيات الأخرى التي ستستخدمها أثناء التقدّم في هذا الدليل ما يلي:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    أثناء زيارة Prototyper mode, you can also use the following features:

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

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

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

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

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

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

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

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

       npm run genkit:watch

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

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

  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.

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

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

(إجراء مقترَح) الخطوة 6: إضافة Firebase App Check إلى تطبيقك

إذا كنت قد دمجت خدمات Firebase أو Google Cloud في تطبيقك، تساعدك أداة Firebase App Check في حماية الخلفيات في تطبيقك من إساءة الاستخدام من خلال منع العميل غير المصرّح له من الوصول إلى موارد Firebase. وهو متوافق مع كلّ من خدمات Google (بما في ذلك Firebase وخدمات Google Cloud) و الخلفيات المخصّصة للحفاظ على أمان مواردك.

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

يرشدك هذا القسم خلال عملية إعداد App Check ضمن Firebase Studio باستخدام reCAPTCHA Enterprise لتطبيق ويب أنشأه App Prototyping agent، ولكن يمكنك إعداد App Check ضمن أي تطبيق ينفذ خدمات Firebase ويمكنه تنفيذ مقدّمي خدمات مخصّصين. يمكنك الاطّلاع على مزيد من المعلومات على Firebase App Check.

توفّر خدمة reCAPTCHA Enterprise ما يصل إلى 10,000 تقييم مجاني.

الخطوة 1: إعداد reCAPTCHA Enterprise لتطبيقك

  1. افتح قسم reCAPTCHA Enterprise في وحدة تحكّم Google Cloud.

  2. اختَر اسم مشروعك على Firebase من أداة اختيار المشاريع في Google Cloud وحدة التحكّم.

  3. إذا طُلب منك تفعيل واجهة برمجة التطبيقات reCAPTCHA Enterprise API، فعِّلها.

  4. انقر على البدء وأضِف اسمًا معروضًا لمفتاح reCAPTCHA الموقع الإلكتروني.

  5. اقبل مفتاح نوع التطبيق التلقائي الويب.

  6. انقر على إضافة نطاق وأضِف نطاقًا. عليك إضافة نطاق App Hosting (مثل studio--PROJECT_ID.REGION.hosted.app) وأي نطاقات مخصّصة تستخدمها مع تطبيقك أو تخطّط لاستخدامها معه.

  7. انقر على الخطوة التالية.

  8. اترك الخيار هل ستستخدم اختبارات التحقق؟ غير محدّد.

  9. انقر على إنشاء مفتاح.

  10. انسخ رقم تعريف المفتاح واحفظه وانتقِل إلى ضبط App Check.

الخطوة 2: ضبط App Check

  1. افتح وحدة تحكّم Firebase وانقر على إنشاء > فحص التطبيق من قائمة التنقّل.

  2. انقر على البدء، ثم انقر على تسجيل بجانب تطبيقك.

  3. انقر لتوسيع ReCAPTCHA والصق رقم تعريف المفتاح الذي أنشأته للخدمة ReCAPTCHA Enterprise.

  4. انقر على حفظ.

الخطوة 3: إضافة App Check إلى الرمز

  1. ارجع إلى Firebase Studio وفي عرض Code، أضِف مفتاح الموقع الإلكتروني الذي أنشأته إلى ملف .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  2. إذا لم تكن قد حفظت إعدادات Firebase في .env، يمكنك الحصول عليها باتّباع الخطوات التالية:

    • من وحدة تحكّم Firebase، افتح إعدادات المشروع وحدِّد موقعها في القسم الذي يتوافق مع تطبيقك.

    • من "مبنى الركّاب" في عرض Code:

      1. سجِّل الدخول إلى Firebase: firebase auth login
      2. اختَر مشروعك: firebase use FIREBASE_PROJECT_ID
      3. الحصول على ملف إعدادات Firebase: firebase apps:sdkconfig

  3. أضِف الإعدادات إلى ملف .env لكي يظهر على النحو التالي:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY

  4. أضِف App Check إلى رمز تطبيقك. يمكنك أن تطلب من Gemini إضافة App Check مع reCAPTCHA Enterprise إلى تطبيقك (احرص على تحديد "reCAPTCHA Enterprise" وتأكَّد من التحقّق منه مرة أخرى)، أو اتّباع الخطوات الواردة في إعداد App Check.

  5. أعِد نشر موقعك الإلكتروني على App Hosting. جرِّب اختبار ميزات Firebase لإنشاء بعض البيانات.

  6. تأكَّد من أنّ App Check يتلقّى طلبات في وحدة تحكّم Firebase من خلال فتح الإصدار > فحص التطبيق.

  7. انقر على فحص خدمات Firebase. بعد التأكّد من وصول الطلبات، انقر على فرض لفرض App Check.

  8. كرِّر عملية إثبات الهوية وفرض الشروط على Firebase Authentication.

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

(اختياري) الخطوة 7: مراقبة تطبيقك

تقدّم لوحة نظرة عامة على التطبيق في Firebase Studio مقاييس ومقاييس مهمة عن تطبيقك، ما يتيح لك رصد أداء تطبيق الويب باستخدام أدوات المراقبة المضمّنة في App Hosting. بعد طرح موقعك الإلكتروني، يمكنك الوصول إلى النظرة العامة من خلال النقر على نشر. من هذه اللوحة، يمكنك تنفيذ ما يلي:

  • انقر على نشر لإصدار نسخة جديدة من تطبيقك.
  • شارِك الرابط المؤدّي إلى تطبيقك أو افتح تطبيقك مباشرةً في الانتقال إلى تطبيقك.
  • راجِع ملخّصًا لأداء تطبيقك خلال آخر 7 أيام، بما في ذلك إجمالي عدد الطلبات وحالة آخر عملية طرح. انقر على عرض التفاصيل للوصول إلى مزيد من المعلومات فيconsole Firebase.
  • اطّلِع على رسم بياني لعدد الطلبات التي تلقّاها تطبيقك خلال آخر 24 ساعة، مقسّمة حسب رمز حالة HTTP.

إذا أغلقت لوحة "نظرة عامة على التطبيق"، يمكنك إعادة فتحها في أي وقت من خلال النقر على نشر.

اطّلِع على مزيد من المعلومات عن إدارة عمليات طرح App Hosting ومراقبتها على الرابط إدارة عمليات الطرح والإصدارات.

(اختياري) الخطوة 8: التراجع عن عملية النشر

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

  • للرجوع إلى إصدار سابق من موقع إلكتروني منشور:

    1. افتح App Hosting فيconsole Firebase.

    2. حدِّد موقع الخلفية في تطبيقك، وانقر على عرض، ثمّ انقر على عمليات الطرح.

    3. بجانب عملية النشر التي تريد الرجوع إليها، انقر على المزيد ، ثم اختَر الرجوع إلى هذا الإصدار، وأكِّد.

    اطّلِع على مزيد من المعلومات في مقالة إدارة عمليات الطرح والإصدارات.

  • لإزالة نطاق App Hosting من الويب:

    1. من وحدة تحكّم Firebase، افتح App Hosting، ثم انقر على عرض في قسم تطبيق Firebase Studio.

    2. في قسم معلومات الخلفية، انقر على إدارة. يتم تحميل صفحة النطاقات.

    3. بجانب نطاقك، انقر على رمز المزيد ، ثم اختَر إيقاف النطاق، وأكِّد.

    سيؤدي ذلك إلى إزالة نطاقك من الويب. لإزالة خلفيّة App Hosting بالكامل، اتّبِع التعليمات الواردة في مقالة حذف خلفيّة.

(اختياري) الخطوة 9: استخدام Genkit مراقبة الميزات المنشورة

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

لإعداد المراقبة في Genkit، عليك إضافة بيانات القياس إلى مسارات الذكاء الاصطناعي في Genkit، ثم عرض النتائج في وحدة تحكّم Firebase.

الخطوة 1: إضافة بيانات القياس إلى رمز مسار Genkit في Firebase Studio

لإعداد ميزة "المراقبة" في الرمز البرمجي:

  1. إذا لم تكن في وضع Code، انقر على رمز التبديل بين اللغتَين التبديل إلى رمز لفتحه.

  2. تحقَّق من package.json للتأكّد من إصدار Genkit المثبَّت.

  3. افتح المحطة الطرفية (Ctrl-Shift-C أو Cmd-Shift-C في نظام التشغيل MacOS).

  4. انقر داخل وحدة التحكّم واثبِت المكوّن الإضافي Firebase باستخدام الإصدار الذي يتطابق مع ملف package.json. على سبيل المثال، إذا كانت حِزم Genkit في package.json هي من الإصدار 1.0.4، عليك تنفيذ الأمر التالي لتثبيت المكوّن الإضافي:

    npm i --save @genkit-ai/firebase@1.0.4

  5. من المستكشف، وسِّع src > ai > flows. يظهر ملف TypeScript واحد أو أكثر يحتوي على عمليات تدفق Genkit في مجلد flows.

  6. انقر على أحد المسارات لفتحه.

  7. في أسفل قسم "عمليات الاستيراد" في الملف، أضِف ما يلي ل استيراد FirebaseTelemetry وتفعيله:

    import { enableFirebaseTelemetry } from '@genkit-ai/firebase';

enableFirebaseTelemetry();

الخطوة 2: إعداد الأذونات

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

لإعداد الأذونات:

  1. افتح Google Cloud وحدة تحكّم إدارة الهوية وإمكانية الوصول اختَر مشروعك، ثم امنح الأدوار التالية لحساب الخدمة استضافة التطبيقات:

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Cloud Trace Agent (roles/cloudtrace.agent)
    • كاتب السجلّات (roles/logging.logWriter)

  2. إعادة نشر تطبيقك على App Hosting

  3. عند اكتمال عملية النشر، حمِّل تطبيقك وابدأ استخدامه. بعد مرور خمس دقائق، من المفترض أن يبدأ تطبيقك في تسجيل بيانات القياس عن بُعد.

الخطوة 3: مراقبة ميزات الذكاء الاصطناعي التوليدي في وحدة تحكّم Firebase

عند ضبط ميزة "التتبُّع"، يسجِّل Genkit عدد الطلبات، وحالات النجاح، ووقت الاستجابة لجميع عمليات المعالجة، وبالنسبة إلى كل عملية معالجة معيّنة، يجمع Genkit مقاييس الثبات ويعرض رسومات بيانية تفصيلية ويسجِّل عمليات التتبُّع التي تم تسجيلها.

اتّبِع الخطوات التالية لمراقبة ميزات الذكاء الاصطناعي التي تم تنفيذها باستخدام Genkit:

  1. بعد مرور خمس دقائق، افتح Genkit فيconsole Firebase وراجِع طلبات Genkit واستجاباتها.

    يجمع Genkit مقاييس الثبات التالية:

    • إجمالي الطلبات: إجمالي عدد الطلبات التي تلقّتها مسار الإحالة الناجحة.
    • نسبة النجاح: النسبة المئوية للطلبات التي تمت معالجتها بنجاح
    • وقت استجابة الشريحة المئوية التسعون: وقت استجابة الشريحة المئوية التسعون لمسار الإحالة الناجحة، وهو الوقت الذي تستغرقه معالجة% 95 من الطلبات.

    • استخدام الرمز المميّز:

      • الرموز المميّزة للدخل: عدد الرموز المميّزة المُرسَلة إلى النموذج في الطلب
      • الرموز المميّزة الناتجة: عدد الرموز المميّزة التي أنشأها النموذج في الاستجابة

    • استخدام الصورة:

      • صور الإدخال: عدد الصور المُرسَلة إلى النموذج في الطلب
      • صور الإخراج: عدد الصور التي أنشأها النموذج في الاستجابة.

    في حال توسيع مقاييس الثبات، تتوفّر الرسومات البيانية التفصيلية:

    • عدد الطلبات بمرور الوقت
    • معدّل النجاح بمرور الوقت
    • الرموز المميّزة للإدخال والإخراج بمرور الوقت
    • وقت الاستجابة (الشريحة المئوية الخامسة والتسعون والخمسون) بمرور الوقت

اطّلِع على مزيد من المعلومات عن Genkit على Genkit.

الخطوات التالية