أنشِئ تطبيقات ويب مستندة إلى الذكاء الاصطناعي (AI) باستخدام إضافات Firebase لـ Gemini API

1- قبل البدء

تتيح لك "إضافات Firebase" إضافة وظائف مُجمَّعة مسبقًا إلى تطبيقاتك باستخدام الحد الأدنى من الرموز البرمجية، حتى الوظائف المستندة إلى الذكاء الاصطناعي. يوضّح لك هذا الدليل التعليمي كيفية دمج اثنتيْن من إضافات Firebase في تطبيق ويب حتى تتمكّن من الاستفادة من Gemini API لإنشاء أوصاف للصور وملخّصات وحتى اقتراحات مخصّصة استنادًا إلى السياق المقدَّم ومدخلات المستخدم النهائي.

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

المتطلبات الأساسية

• معرفة بـ Node.js وNext.js وTypeScript

ما ستتعرّف عليه

• كيفية استخدام الإضافات في Firebase لواجهة برمجة التطبيقات Gemini API لمعالجة اللغة
• كيفية استخدام "وظائف السحابة الإلكترونية لبرنامج Firebase" لإنشاء سياق مُحسَّن لنموذجك اللغوي
• كيفية استخدام JavaScript للوصول إلى الإخراج الذي تنشئه إضافات Firebase

المتطلبات

• متصفّح من اختيارك، مثل Google Chrome
• بيئة تطوير تتضمّن محرِّر رموز ووحدة تحكّم
• حساب Google لإنشاء مشروعك على Firebase وإدارته

2- مراجعة تطبيق الويب وخدمات Firebase والإضافات

في هذا القسم، ستراجع تطبيق الويب الذي ستُنشئه باستخدام هذا الدليل التعليمي للترميز، وستتعرّف أيضًا على خدمات Firebase وإضافات Firebase التي ستستخدمها.

تطبيق الويب

في هذا الدرس التطبيقي حول الترميز، ستُنشئ تطبيق ويب باسم Friendly Conf.

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

خدمات Firebase

في هذا الدليل التعليمي حول الرموز البرمجية، ستستخدم العديد من خدمات Firebase وميزاتها، وسيتم توفير معظم الرموز البرمجية الأساسية لها. يحتوي الجدول التالي على الخدمات التي ستستخدمها وأسباب استخدامها.

إضافات Firebase

تشمل إضافات Firebase التي ستستخدمها في هذا الدليل التعليمي على رموز البرمجة ما يلي:

• إنشاء روبوت دردشة باستخدام Gemini API
• مهام متعددة الوسائط باستخدام Gemini API

تكون الإضافات مفيدة لأنّها تستجيب للأحداث التي تحدث في مشروعك على Firebase. تستجيب كلتا الامتدادَين المستخدَمَين في هذا الدليل التعليمي عند إنشاء مستندات جديدة في مجموعات تم إعدادها مسبقًا في Cloud Firestore.

3- إعداد بيئة التطوير

التحقّق من إصدار Node.js

1. في وحدة التحكّم، تأكَّد من تثبيت الإصدار 20.0.0 أو إصدار أحدث من Node.js:

   node -v
   

2. إذا لم يكن لديك الإصدار 20.0.0 من Node.js أو إصدار أحدث، عليك تنزيل أحدث إصدار يتطلّب دعمًا على المدى الطويل وتثبيته.

الحصول على رمز المصدر للدرس التطبيقي حول الترميز

إذا كان لديك حساب على GitHub:

1. أنشئ مستودعًا جديدًا باستخدام النموذج من github.com/FirebaseExtended/codelab-gemini-api-extensions
2. استنسِخ مستودع GitHub الذي أنشأته للتو في دورة تعلم البرمجة:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

إذا لم يكن لديك git مثبّتًا أو كنت تفضّل عدم إنشاء مستودع جديد:

نزِّل مستودع GitHub كملف zip.

مراجعة بنية المجلد

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

إذا لم تكن متأكّدًا من تطبيق الرمز بشكل صحيح وفقًا للتعليمات الواردة في هذا الدليل التعليمي حول الرموز البرمجية، يمكنك العثور على رمز الحل في فرع git‏ end.

تثبيت Firebase CLI

1. تأكَّد من تثبيت واجهة برمجة التطبيقات Firebase CLI وأنّها بالإصدار 13.6 أو إصدار أحدث:

   firebase --version
   

2. إذا كان لديك Firebase CLI مثبّتًا، ولكن ليس الإصدار 13.6 أو إصدارًا أحدث، عليك تحديثه:

   npm update -g firebase-tools
   

3. إذا لم يكن لديك Firebase CLI مثبّتًا، ثبِّته:

   npm install -g firebase-tools
   

إذا لم تتمكّن من تحديث واجهة برمجة التطبيقات Firebase CLI أو تثبيتها بسبب أخطاء في الأذونات، اطّلِع على مستندات npm أو استخدِم خيار تثبيت آخر.

سجِّل الدخول إلى Firebase.

1. في وحدة التحكّم الطرفية، انتقِل إلى مجلد codelab-gemini-api-extensions وسجِّل الدخول إلى Firebase:

   cd codelab-gemini-api-extensions
   firebase login
   

   إذا أظهرت وحدة التحكّم الطرفية أنّك سجّلت الدخول إلى Firebase من قبل، يمكنك الانتقال إلى قسم إعداد مشروعك على Firebase في هذا الدليل التعليمي.
2. في وحدة التحكّم، أدخِل Y أو N بناءً على ما إذا كنت تريد أن يجمع Firebase البيانات. (يمكن استخدام أيّ من الخيارَين في هذا الدرس التطبيقي حول الترميز)
3. في المتصفّح، اختَر حسابك على Google وانقر على السماح.

4. إعداد مشروعك على Firebase

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

تتم تنفيذ جميع الخطوات الواردة في هذا القسم في وحدة تحكّم Firebase.

إنشاء مشروع على Firebase

1. سجِّل الدخول إلى وحدة تحكّم Firebase باستخدام حساب Google.
2. انقر على إنشاء مشروع، ثم أدخِل اسمًا للمشروع (مثل AI Extensions Codelab).
   تذكَّر رقم تعريف المشروع الذي تمّ تعيينه تلقائيًا لمشروعك على Firebase (أو انقر على رمز تعديل لضبط رقم تعريف المشروع المفضّل لديك). ستحتاج إلى رقم التعريف هذا لاحقًا لتحديد مشروعك على Firebase في واجهة Firebase CLI. إذا نسيت رقم التعريف، يمكنك العثور عليه لاحقًا في إعدادات المشروع.
3. انقر على متابعة.
4. راجِع بنود Firebase واقبلها، في حال طُلب منك ذلك، ثم انقر على متابعة.
5. بالنسبة إلى هذا الدليل التعليمي حول الرموز البرمجية، لست بحاجة إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
6. انقر على إنشاء مشروع، وانتظِر حتى يتم توفير مشروعك، ثم انقر على متابعة.

ترقية خطة أسعار Firebase

لاستخدام "إضافات Firebase" (وخدمات السحابة الإلكترونية الأساسية) بالإضافة إلى "مساحة تخزين Cloud لبرنامج Firebase"، يجب أن يكون مشروعك على Firebase مُدرَجًا في خطة الأسعار "الدفع حسب الاستخدام" (Blaze)، ما يعني أنّه مرتبط بحساب على Cloud Billing.

• يتطلّب حساب "الفوترة في Google Cloud" طريقة دفع، مثل بطاقة الائتمان.
• إذا كنت حديث العهد باستخدام Firebase وGoogle Cloud، تحقّق ممّا إذا كنت مؤهلاً للحصول على رصيد بقيمة 300 دولار أمريكي وحساب "الفوترة في السحابة الإلكترونية" في الفترة التجريبية المجانية.
• إذا كنت تُجري هذا الإصدار التجريبي من رمز المصدر كجزء من حدث، اسأل المنظِّم ما إذا كانت هناك أي أرصدة متاحة في Cloud.

يُرجى العلم أيضًا أنّه عند تفعيل الفوترة في مشروعك على Firebase، سيتم تحصيل رسوم منك مقابل طلبات البيانات التي تجريها الإضافة إلى Gemini API (بغض النظر عن مزوّد الخدمة الذي تختاره، سواء كان Google AI أو Vertex AI). اطّلِع على مزيد من المعلومات حول أسعار تكنولوجيات الذكاء الاصطناعي من Google وVertex AI.

لترقية مشروعك إلى خطة Blaze، اتّبِع الخطوات التالية:

1. في "وحدة تحكّم Firebase"، اختَر ترقية خطتك.
2. اختَر خطة Blaze. اتّبِع التعليمات الظاهرة على الشاشة لربط حساب "فوترة على Cloud" بمشروعك.
   إذا كنت بحاجة إلى إنشاء حساب "فوترة على Cloud" كجزء من هذه الترقية، قد تحتاج إلى الرجوع إلى مسار الترقية في وحدة تحكّم Firebase لإكمال الترقية.

إضافة تطبيق ويب إلى مشروعك على Firebase

1. انتقِل إلى شاشة نظرة عامة على المشروع في مشروعك على Firebase، ثم انقر على الويب.
2. في مربّع النص لقب التطبيق، أدخِل لقبًا مألوفًا للتطبيق، مثل My AI Extensions.
3. انقر على تسجيل التطبيق > التالي > التالي > الانتقال إلى وحدة التحكّم.
   يمكنك تخطّي جميع الخطوات المتعلّقة "بالاستضافة" في مسار تطبيق الويب لأنّك ستُنشئ خدمة استضافة اختياريًا لاحقًا في هذا الدليل التعليمي حول رموز البرامج.

رائع. لقد سجّلت الآن تطبيق ويب في مشروعك الجديد على Firebase.

إعداد Firebase Authentication

1. انتقِل إلى المصادقة باستخدام مساحة الروابط على الجانب الأيمن.
2. انقر على البدء.
3. في عمود مزوّدو الخدمة الإضافيون، انقر على Google > تفعيل.
4. في مربّع النص الاسم المعروض للجمهور للمشروع، أدخِل اسمًا مفيدًا، مثل My AI Extensions Codelab.
5. في قائمة عنوان البريد الإلكتروني لفريق الدعم المعني بالمشروع، اختَر عنوان بريدك الإلكتروني.
6. انقر على حفظ.

إعداد Cloud Firestore

1. في اللوحة اليمنى من "وحدة تحكّم Firebase"، وسِّع الإنشاء، ثم اختَر قاعدة بيانات Firestore.
2. انقر على إنشاء قاعدة بيانات.
3. اترك رقم تعريف قاعدة البيانات مضبوطًا على (default).
4. اختَر موقعًا لقاعدة بياناتك، ثم انقر على التالي.
   بالنسبة إلى التطبيق الحقيقي، عليك اختيار موقع قريب من المستخدمين.
5. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية عن قواعد الأمان.
   في وقت لاحق من هذا الدليل التعليمي، ستضيف قواعد أمان لتأمين بياناتك. لا توزِّع تطبيقًا علنًا أو تعرضه بدون إضافة قواعد أمان لقاعدة بياناتك.
6. انقر على إنشاء.

إعداد "مساحة التخزين في السحابة الإلكترونية" لبرنامج Firebase

1. في اللوحة اليمنى من وحدة تحكّم Firebase، وسِّع الإصدار، ثم اختَر مساحة التخزين.
2. انقر على البدء.
3. اختَر موقعًا جغرافيًا لحزمة التخزين التلقائية.
   يمكن للحِزم في US-WEST1 وUS-CENTRAL1 وUS-EAST1 الاستفادة من المستوى"مجاني دائمًا" في Google Cloud Storage. تخضع الحِزم في جميع المواقع الجغرافية الأخرى لأسعار Google Cloud Storage واستخدامها.
4. انقر على البدء في وضع الاختبار. اقرأ بيان إخلاء المسؤولية بشأن قواعد الأمان.
   في وقت لاحق من هذا الدليل التعليمي، ستضيف قواعد أمان لتأمين بياناتك. لا توزِّع تطبيقًا علنًا أو تعرضه بدون إضافة قواعد أمان لحزمة التخزين.
5. انقر على إنشاء.

في القسم التالي من هذا الدرس التطبيقي حول الترميز، ستثبّت مادّتَي Firebase Extension وستضبطهما، وهما المادتان اللتان ستستخدمهما في تطبيق الويب على مدار هذا الدرس التطبيقي.

5- إعداد إضافة "إنشاء برنامج محادثة آلي باستخدام Gemini API"

تثبيت إضافة "إنشاء برنامج Chatbot باستخدام Gemini API"

1. انتقِل إلى إضافة "إنشاء برنامج محادثة باستخدام Gemini API".
2. انقر على التثبيت في وحدة تحكُّم Firebase.
3. اختَر مشروعك على Firebase، ثم انقر على التالي.
4. في قسم مراجعة واجهات برمجة التطبيقات المفعَّلة والموارد التي تم إنشاؤها، انقر على تفعيل بجانب أي خدمات مقترَحة لك، ثم انقر على التالي.
5. اختَر منح لأي أذونات يتم اقتراحها عليك، ثم انقر على التالي.
6. ضبط الإضافة:
   1. في قائمة موفِّر Gemini API، اختَر ما إذا كنت تريد استخدام Gemini API من Google AI أو Vertex AI. بالنسبة إلى المطوّرين الذين يستخدمون Firebase، ننصحك باستخدام Vertex AI.
   2. في مربّع نص مسار مجموعة Firestore، أدخِل: users/{uid}/messages.
      في الخطوات المستقبلية من هذا الدليل التعليمي، ستؤدي إضافة مستندات إلى هذه المجموعة إلى تنشيط الإضافة للاتصال بواجهة برمجة التطبيقات Gemini API.
   3. في قائمة الموقع الجغرافي لخدمة Cloud Functions، اختَر موقعك الجغرافي المفضّل (مثل Iowa (us-central1) أو الموقع الجغرافي الذي حدّدته سابقًا لقاعدة بيانات Firestore).
   4. اترك جميع القيم الأخرى على الإعداد التلقائي.
7. انقر على تثبيت الإضافة وانتظِر تثبيت الإضافة.

تجربة إضافة "إنشاء برنامج محادثة باستخدام Gemini API"

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة "إنشاء chatbot باستخدام Gemini API" من خلال تطبيق ويب، من المفيد معرفة آلية عمل الإضافة من خلال تجربتها في وحدة تحكّم Firebase أولاً.

يتم تفعيل الإضافة عند إنشاء مستند Firestore ضمن المجموعة users/{uid}/discussion/{discussionId}/messages، وهو ما يمكنك تنفيذه في وحدة تحكّم Firebase.

1. في وحدة تحكّم Firebase، انتقِل إلى Firestore، ثم انقر على بدء عملية جمع البيانات في العمود الأول.
2. في مربّع نص رقم تعريف المجموعة، أدخِل users، ثم انقر على التالي.
3. في مربّع نص رقم تعريف المستند، انقر على رقم التعريف التلقائي، ثم انقر على حفظ.
4. في مجموعة users، انقر على بدء عملية جمع البيانات.
5. في مربّع نص رقم تعريف المجموعة، أدخِل messages، ثم انقر على التالي.
   1. في مربّع نص رقم تعريف المستند، انقر على رقم التعريف التلقائي.
   2. في مربّع نص الحقل، أدخِل prompt.
   3. في مربّع نص القيمة، أدخِل Tell me 5 random fruits.
6. انقر على حفظ وانتظر بضع ثوانٍ.

عند إضافة هذا المستند، فعّلت الإضافة طلب بيانات من واجهة برمجة التطبيقات Gemini API. يتضمّن المستند الذي أضفته للتو إلى مجموعة messages الآن prompt الخاص بك بالإضافة إلى response للنموذج في طلب البحث.

يمكنك تنشيط الإضافة مرة أخرى من خلال إضافة مستند آخر إلى مجموعة messages:

1. في مجموعة messages، انقر على إضافة مستند.
2. في مربّع نص رقم تعريف المستند، انقر على رقم التعريف التلقائي.
3. في مربّع نص الحقل، أدخِل prompt.
4. في مربّع نص القيمة، أدخِل And now, vegetables.
5. انقر على حفظ وانتظر بضع ثوانٍ. يتضمّن المستند الذي أضفته للتو إلى مجموعة messages الآن response في طلب البحث.
   
   عند إنشاء هذا الردّ، استخدَم نموذج Gemini الأساسي المعرفة السابقة من طلب البحث السابق.

6- إعداد تطبيق الويب

لتشغيل تطبيق الويب، عليك تنفيذ الأوامر في وحدة التحكّم الطرفية وإضافة رمز في محرِّر الرموز.

إعداد واجهة Firebase CLI لتشغيلها مع مشروعك على Firebase

في الوحدة الطرفية، اطلب من واجهة برمجة التطبيقات استخدام مشروعك على Firebase من خلال تنفيذ الأمر التالي:

firebase use YOUR_PROJECT_ID

نشر قواعد الأمان في Firestore وCloud Storage

تتضمّن قاعدة بيانات هذا الإصدار الاختباري للترميز مجموعة من قواعد أمان Firestore وقواعد أمان Cloud Storage التي تم إعدادها لك. بعد نشر "قواعد الأمان" هذه، تتم حماية خدمات Firebase في مشروعك على Firebase بشكل أفضل من إساءة الاستخدام.

1. لنشر قواعد الأمان، شغِّل الأمر التالي في الوحدة الطرفية:

   firebase deploy --only firestore:rules,storage
   

2. إذا طُلب منك منح Cloud Storage دور "إدارة الهوية وإمكانية الوصول" لاستخدام قواعد على مستوى الخدمات، أدخِل Y أو N. (يمكن استخدام أيّ من الخيارَين في هذا الدرس التطبيقي حول الترميز)

ربط تطبيق الويب بمشروعك على Firebase

يجب أن يعرف رمز تطبيق الويب مشروع Firebase الذي يجب استخدامه لقاعدة البيانات ومساحة التخزين وما إلى ذلك. ويمكنك إجراء ذلك من خلال إضافة إعدادات Firebase إلى رمز تطبيقك البرمجي.

1. الحصول على إعدادات Firebase:
   1. في "وحدة تحكّم Firebase"، انتقِل إلى إعدادات المشروع ضمن مشروعك على Firebase.
   2. انتقِل إلى قسم تطبيقاتك واختَر تطبيق الويب المسجَّل.
   3. في لوحة إعداد حزمة تطوير البرامج (SDK) وضبطها، انسخ رمز initializeApp الكامل بما في ذلك الثابت firebaseConfig.
2. أضِف إعدادات Firebase إلى قاعدة بيانات تطبيق الويب:
   1. في محرِّر الرموز البرمجية، افتح ملف src/app/lib/firebase/firebase.config.js.
   2. اختَر الكل في الملف، واستبدِل الرمز الذي نسخته.
   3. احفظ الملف.

معاينة تطبيق الويب في المتصفّح

1. في وحدة التحكّم الطرفية، ثبِّت العناصر التابعة ثم شغِّل تطبيق الويب:

   npm install
   npm run dev
   

2. في المتصفّح، انتقِل إلى عنوان URL للمضيف المستضاف محليًا لعرض تطبيق الويب. على سبيل المثال، في معظم الحالات، يكون عنوان URL هو http://localhost:3000/ أو ما شابه ذلك.

استخدام روبوت الدردشة في تطبيق الويب

1. في المتصفّح، ارجع إلى علامة التبويب التي تتضمّن تطبيق الويب Friendly Conf الذي يتم تشغيله على الجهاز.
2. انقر على تسجيل الدخول باستخدام حساب Google، واختَر حسابك على Google إذا لزم الأمر.
3. بعد تسجيل الدخول، ستظهر لك نافذة محادثة فارغة.
4. اكتب رسالة ترحيب (مثل hi)، ثم انقر على إرسال.
5. يُرجى الانتظار بضع ثوانٍ حتى يردّ عليك محادثة الدردشة.

يقدّم chatbot في التطبيق ردًا عامًا.

تخصيص روبوت الدردشة للتطبيق

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

1. في تطبيق الويب في المتصفّح، امسح المحادثة من خلال النقر على الزر الأحمر "x" (بجانب الرسالة في سجلّ المحادثة).
2. في محرِّر الرموز البرمجية، افتح ملف src/app/page.tsx.
3. انتقِل للأسفل واستبدِل الرمز prompt: userMsg في السطر 77 أو بالقرب منه بما يلي:
   prompt: preparePrompt(userMsg, messages),
4. احفظ الملف.
5. ارجع إلى تطبيق الويب الذي يعمل في المتصفّح.
6. اكتب رسالة ترحيب مرة أخرى (مثل hi)، ثم انقر على إرسال.
7. يُرجى الانتظار بضع ثوانٍ حتى يردّ عليك محادثة chatbot.

يردّ روبوت الدردشة بمعرفة مستندة إلى السياق المقدَّم في src/app/lib/context.md. على الرغم من عدم كتابة طلب محدّد، ينشئ نموذج Gemini الأساسي اقتراحًا مخصّصًا استنادًا إلى هذا السياق والتاريخ/الوقت الحاليَين. يمكنك الآن تحديد أسئلة متابعة والتعمّق في التفاصيل.

هذا السياق الموسّع مهمّ لخدمة الدردشة الآلية، ولكن يجب عدم عرضه لمستخدم تطبيق الويب. في ما يلي كيفية إخفائه:

1. في محرِّر الرموز البرمجية، افتح ملف src/app/page.tsx.
2. انتقِل للأسفل واستبدِل الرمز ...doc.data(), في السطر 56 أو بالقرب منه بما يلي:
   ...prepareMessage(doc.data()),
3. احفظ الملف.
4. ارجع إلى تطبيق الويب الذي يعمل في المتصفّح.
5. يُرجى إعادة تحميل الصفحة.

يمكنك أيضًا تجربة إمكانية التواصل مع برنامج المحادثة المبرمَجة باستخدام السياق السابق:

1. في مربّع النص كتابة رسالة، اطرح سؤالاً مثل: Any other interesting talks about AI?سيعرض لك محادثة الدردشة ردًا.
2. في مربّع النص كتابة رسالة، اطرح سؤال متابعة مرتبطًا بالسؤال السابق: Give me a few more details about the last one.

يقدّم روبوت الدردشة معلومات تاريخية. بما أنّ سجلّ المحادثات أصبح الآن جزءًا من السياق، يفهم محادثة الروبوت أسئلة المتابعة.

ميزة إضافية: تشغيل تطبيق الويب باستخدام مجموعة أدوات المحاكاة المحلية لمنصة Firebase

تتيح لك مجموعة أدوات المحاكاة المحلية لمنصة Firebase اختبار معظم ميزات تطبيق الويب محليًا.

1. في وحدة التحكّم، تأكَّد من أنّك في جذر تطبيق الويب.
2. شغِّل الأمر التالي لتثبيت مجموعة أدوات المحاكاة المحلية لمنصة Firebase ثم تشغيلها:

   firebase init emulators
   firebase emulators:start
   

7- إعداد إضافة "مهام متعددة الوسائط باستخدام Gemini API"

تستدعي إضافة "المهام المتعدّدة الوسائط باستخدام Gemini API" واجهة برمجة التطبيقات Gemini API باستخدام طلبات متعددة الوسائط تحتوي على طلب نصي بالإضافة إلى عنوان URL لملف متوافق أو عنوان URL لـ Cloud Storage (يُرجى العِلم أنّ واجهة برمجة التطبيقات Google AI Gemini API تستخدم عنوان URL لـ Cloud Storage كبنية أساسية لعنوان URL للملف). تتيح الإضافة أيضًا استخدام متغيّرات علامات الترقيم لاستبدال القيم من مستند Cloud Firestore لتخصيص الطلب النصي.

في تطبيقك، عند تحميل صورة إلى حزمة في Cloud Storage، يمكنك إنشاء عنوان URL وإضافته إلى مستند جديد في Cloud Firestore، ما يؤدي إلى تنشيط الإضافة لإنشاء طلب متعدد الوسائط واستدعاء Gemini API. في الرمز المصدري لموقع Codelab هذا، سبق أن قدّمنا الرمز البرمجي لتحميل صورة وكتابة عنوان URL في مستند Firestore.

تثبيت إضافة "مهام متعددة الوسائط باستخدام Gemini API"

1. انتقِل إلى إضافة "مهام متعددة الوسائط باستخدام Gemini API".
2. انقر على التثبيت في وحدة تحكُّم Firebase.
3. اختَر مشروعك على Firebase.
4. انقر على التالي > التالي > التالي، إلى أن تصل إلى قسم ضبط الإضافة.
   1. في قائمة موفِّر Gemini API، اختَر ما إذا كنت تريد استخدام Gemini API من Google AI أو Vertex AI. بالنسبة إلى المطوّرين الذين يستخدمون Firebase، ننصحك باستخدام Vertex AI.
   2. في مربّع نص مسار مجموعة Firestore، أدخِل: gallery
   3. في مربّع نص الطلب، أدخِل: Please describe the provided image; if there is no image, say "no image".
   4. في مربّع نص حقل الصورة، أدخِل: image
   5. في قائمة الموقع الجغرافي لخدمة Cloud Functions، اختَر موقعك الجغرافي المفضّل (مثل Iowa (us-central1) أو الموقع الجغرافي الذي حدّدته سابقًا لقاعدة بيانات Firestore).
   6. اترك جميع القيم الأخرى على الإعداد التلقائي.
5. انقر على تثبيت الإضافة وانتظِر تثبيت الإضافة.

تجربة إضافة "مهام متعددة الوسائط باستخدام Gemini API"

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة "مهام متعددة الوسائط باستخدام Gemini API" من خلال تطبيق ويب، من المفيد التعرّف على آلية عمل الإضافة من خلال تجربتها في وحدة تحكّم Firebase أولاً.

يتم تفعيل الإضافة عند إنشاء مستند Firestore ضمن المجموعة users/{uid}/gallery، وهو ما يمكنك تنفيذه في وحدة تحكّم Firebase. بعد ذلك، تأخذ الإضافة عنوان URL للصورة في Cloud Storage في مستند Cloud Firestore وتُمرّره كجزء من الطلب المتعدّد الوسائط في طلب إلى Gemini API.

أولاً، حمِّل صورة إلى حزمة Cloud Storage:

1. انتقِل إلى مساحة التخزين في مشروعك على Firebase.
2. انقر على إنشاء مجلد.
3. في مربّع نص اسم المجلد، أدخِل gallery.
4. انقر على إضافة مجلد.
5. في مجلد gallery، انقر على تحميل ملف.
6. اختَر ملف صورة بتنسيق JPEG لتحميله.

بعد ذلك، أضِف عنوان URL الخاص بالصورة في Cloud Storage إلى مستند Firestore (وهو عامل التفعيل للإضافة):

1. انتقِل إلى Firestore ضمن مشروعك على Firebase.
2. انقر على بدء مجموعة في العمود الأول.
3. في مربّع نص معرّف المجموعة، أدخِل: gallery، ثم انقر على التالي.
4. إضافة مستند إلى المجموعة:
   1. في مربّع نص رقم تعريف المستند، انقر على رقم التعريف التلقائي.
   2. في مربّع نص الحقل، أدخِل: image. في مربّع القيمة، أدخِل عنوان URL الخاص بمكان التخزين للصورة التي حمّلتها للتو.
5. انقر على إضافة حقل.
6. في مربّع نص الحقل، أدخِل: published. في مربّع النوع، اختَر boolean. في مربّع القيمة، اختَر true.
7. انقر على حفظ وانتظر بضع ثوانٍ.

تتضمّن مجموعة gallery الآن مستندًا يحتوي على ردّ على طلب البحث.

استخدام معرض الصور في تطبيق الويب

1. في المتصفّح، ارجع إلى علامة التبويب التي تتضمّن تطبيق الويب Friendly Conf الذي يتم تشغيله على الجهاز.
2. انقر على علامة التبويب المعرض في شريط التنقّل.
3. سيظهر لك معرض للصور التي تم تحميلها والأوصاف التي أنشأها الذكاء الاصطناعي. من المفترض أن يتضمّن هذا المجلد الصورة التي حمّلتها سابقًا إلى مجلد gallery في حزمة التخزين.
4. انقر على الزر "تحميل" واختَر صورة JPEG أخرى.
5. انتظِر بضع ثوانٍ إلى أن تظهر الصورة في معرض الصور. بعد بضع لحظات، سيتم أيضًا عرض الوصف الذي أنشأه الذكاء الاصطناعي للصورة التي تم تحميلها حديثًا.

إذا كنت تريد فهم الرمز البرمجي لكيفية تنفيذ ذلك، يمكنك الاطّلاع على src/app/gallery/page.tsx في قاعدة بيانات تطبيق الويب.

8- ميزة إضافية: نشر تطبيقك

تقدّم Firebase عدة طرق يمكنك من خلالها نشر تطبيق ويب. في هذا الدليل التعليمي حول رموز البرامج، اختَر أحد الخيارَين التاليَين:

• الخيار 1: استضافة Firebase: استخدِم هذا الخيار إذا قرّرت عدم إنشاء مستودع GitHub الخاص بك (ويكون لديك رمز المصدر فقط على جهازك).
• الخيار 2: استضافة التطبيقات على Firebase: استخدِم هذا الخيار إذا كنت تريد نشر التطبيقات تلقائيًا في أي وقت تُرسل فيه التغييرات إلى مستودع GitHub الخاص بك. تم تصميم خدمة Firebase الجديدة هذه خصيصًا لتلبية احتياجات تطبيقات Next.js وAngular الديناميكية.

الخيار 1: النشر باستخدام "استضافة Firebase"

استخدِم هذا الخيار إذا قرّرت عدم إنشاء مستودع GitHub خاص بك (ويكون لديك الرمز المصدر فقط على جهازك).

1. في الوحدة الطرفية، يمكنك إعداد Firebase Hosting من خلال تنفيذ الأوامر التالية:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. للطلب: Detected an existing Next.js codebase in your current directory, should we use this?، اضغط على Y.
3. بالنسبة إلى الطلب: In which region would you like to host server-side content, if applicable?، اختَر الموقع التلقائي أو الموقع الذي استخدمته سابقًا في هذا الدرس التطبيقي. بعد ذلك، اضغط على Enter (أو return على نظام التشغيل macOS).
4. للطلب: Set up automatic builds and deploys with GitHub?، اضغط على N.
5. يمكنك نشر تطبيق الويب في "استضافة Google" من خلال تنفيذ الأمر التالي:

   firebase deploy --only hosting
   

لقد أكملت كل المسائل الحسابية التدريبية. إذا عدّلت تطبيقك وأردت نشر هذا الإصدار الجديد، ما عليك سوى إعادة تشغيل firebase deploy --only hosting وستُنشئ خدمة "استضافة Firebase" تطبيقك وتعيد نشره.

الخيار 2: النشر باستخدام ميزة "استضافة تطبيقات Firebase"

استخدِم هذا الخيار إذا كنت تريد نشر التطبيق تلقائيًا في أي وقت تُرسل فيه التغييرات إلى مستودع GitHub الخاص بك.

1. احفظ التغييرات في GitHub.
2. في "وحدة تحكّم Firebase"، انتقِل إلى استضافة التطبيقات ضمن مشروعك على Firebase.
3. انقر على البدء > الربط بحساب GitHub.
4. اختَر حسابك على GitHub والمستودع. انقر على التالي.
5. في إعدادات النشر > الدليل الجذر، أدخِل اسم المجلد الذي يحتوي على رمز المصدر (إذا لم يكن package.json في الدليل الجذر لمستودعك).
6. بالنسبة إلى الفرع المنشور، اختَر الفرع main في مستودع GitHub. انقر على التالي.
7. أدخِل معرّفًا لنظامك الأساسي (على سبيل المثال، chatbot).
8. انقر على إنهاء ونشر.

سيستغرق النشر الجديد بضع دقائق إلى أن يصبح جاهزًا. يمكنك الاطّلاع على حالة النشر في قسم "استضافة التطبيقات" ضمن وحدة تحكّم Firebase.

من الآن فصاعدًا، في كل مرة تُجري فيها تغييرًا على مستودع GitHub، ستنشئ خدمة "استضافة التطبيقات" من Firebase تطبيقك وتنشره تلقائيًا.

9- الخاتمة

تهانينا! لقد حقّقت الكثير في هذا البرنامج التعليمي المبرمَج.

تثبيت الإضافات وضبطها

استخدمت وحدة تحكُّم Firebase لضبط وتركيب إضافات Firebase المختلفة التي تستخدم الذكاء الاصطناعي التوليدي. إنّ استخدام "إضافات Firebase" ملائم لأنّك لا تحتاج إلى التعرّف على الكثير من الرموز البرمجية الجاهزة وكتابتها من أجل التعامل مع المصادقة باستخدام خدمات Google Cloud أو منطق Cloud Functions في الخلفية للاستماع إلى خدمات وواجهات برمجة تطبيقات Firestore وGoogle Cloud والتفاعل معها.

تجربة الإضافات باستخدام "وحدة تحكُّم Firebase"

بدلاً من الانتقال مباشرةً إلى الرموز البرمجية، استغرقت بعض الوقت لفهم آلية عمل إضافات الذكاء الاصطناعي التوليدي هذه، استنادًا إلى إدخال قدّمته من خلال Firestore أو Cloud Storage. ويمكن أن يكون ذلك مفيدًا بشكل خاص أثناء تصحيح أخطاء ناتج إضافة.

إنشاء تطبيق ويب مستند إلى الذكاء الاصطناعي

لقد أنشأت تطبيق ويب مستندًا إلى الذكاء الاصطناعي يستخدم "إضافات Firebase" للوصول إلى بعض إمكانات نموذج Gemini فقط.

في تطبيق الويب، يمكنك استخدام إضافة "Chatbot with Gemini API" لتزويد المستخدم بواجهة محادثة تفاعلية تتضمّن سياقًا تاريخيًا وخاصًا بالتطبيق في المحادثات، حيث يتم تخزين كل رسالة في مستند Firestore محصور بمستخدم معيّن.

استخدَم تطبيق الويب أيضًا إضافة "مهام متعددة الوسائط باستخدام Gemini API" لإنشاء أوصاف تلقائية للصور التي تم تحميلها.

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

• جرِّب طلبات البحث واستفِد من نافذة السياق الكبيرة في Google AI Studio أو Vertex AI Studio.
• مزيد من المعلومات عن البحث باستخدام ميزة "إنشاء المحتوى الموسّع لاسترداد المعلومات باستخدام الذكاء الاصطناعي" (RAG)
• جرِّب أحد مشاريع Codelab ذات السرعة الذاتية التي توضّح كيفية إضافة محادثة آلية إلى تطبيق حالي على Firebase باستخدام Firebase Genkit (وهي خدمة جديدة لإطار عمل الذكاء الاصطناعي).
• تعرَّف على إمكانات البحث عن التشابه في Firestore وCloud SQL for PostgreSQL.
• يمكنك تعليم chatbot الاتصال بتطبيقك الحالي باستخدام وظائف الاتصال.