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

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

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

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

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

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

    Build a web app that can identify food products from an uploaded picture or
in-browser camera. The app should provide a recipe that contains the
identified ingredients.

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

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

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

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

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

  5. انقر على إنشاء نموذج أولي لهذا التطبيق. يبدأ Gemini في ترميز تطبيقك. بما أنّ وصف التطبيق يصف ميزات تتطلّب استخدام الذكاء الاصطناعي التوليدي، سيطلب منك Gemini مفتاح Gemini API.

  6. أضِف مفتاح Gemini API الخاص بك أو انقر على إنشاء تلقائي لإنشاء مفتاح Gemini API.

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

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

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

  2. تعديل تطبيقك: يمكنك مواصلة استخدام واجهة المحادثة لطلب Gemini إضافة ميزات وتحسين التطبيق. أو يمكنك النقر على رمز تبديل الرموز التبديل إلى "الرمز" لفتح طريقة العرض Code، حيث يمكنك تعديل الرمز مباشرةً في مساحة عمل Firebase Studio.

  3. اختبار التطبيق: في لوحة معاينة التطبيق، حمِّل صورة تعرض أطعمة مختلفة لاختبار قدرة تطبيقك على تحديد المكونات وتقديم وصفة. يمكنك اختياريًا استخدام Code العرض لمشاركة تطبيقك بشكل علني وبشكل مؤقت باستخدام Firebase Studio الميزات التجريبية العلنية.

  4. تصحيح أخطاء التطبيق: افتح Code بالنقر على رمز تبديل الرموز التبديل إلى الرمز البرمجي لفتح طريقة عرض Code، حيث يمكنك استخدام Firebase Studio ميزات تصحيح الأخطاء وإعداد التقارير المضمّنة لفحص تطبيقك وتصحيح أخطاءه وتدقيقه. يمكنك الرجوع إلى App Prototyping agent في أي وقت.

  5. تكرار العملية: إذا لم يعمل التطبيق على النحو المتوقّع، يمكنك تحسين الطلب، أو استخدام لوحة المحادثة لطلب Gemini تحسين التطبيق، أو تعديل الرمز مباشرةً Code.

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

بعد اختبار التطبيق والشعور بالرضا عنه، يمكنك نشره على الويب باستخدام Firebase App Hosting.

تتطلب خدمة

عند إعداد App Hosting، تنشئ Firebase Studio مشروعًا على Firebase نيابةً عنك وترشدك خلال عملية ربط حساب Cloud Billing.

لنشر تطبيقك على Firebase App Hosting، اتّبِع الخطوات التالية:

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

  2. في خطوة مشروع Firebase، سجِّل اسم مشروع Firebase الذي تم إنشاؤه نيابةً عنك، ثم انقر على التالي.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • للرجوع إلى إصدار سابق من موقع إلكتروني منشور، اتّبِع الخطوات التالية:

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

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

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

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

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

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

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

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

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

(اختياري) الخطوة 6: استخدام 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.

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