أنشِئ تطبيقات ويب مستندة إلى الذكاء الاصطناعي (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).
   
3. انقر على متابعة.
4. إذا طُلب منك ذلك، راجِع بنود Firebase واقبلها، ثم انقر على متابعة.
5. (اختياري) فعِّل ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" في وحدة تحكّم Firebase (المعروفة باسم "Gemini في Firebase").
6. في هذا الدرس العملي، لا تحتاج إلى "إحصاءات Google"، لذا أوقِف خيار "إحصاءات Google".
7. انقر على إنشاء مشروع، وانتظِر إلى أن يتم توفير مشروعك، ثم انقر على متابعة.

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

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

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

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

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

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

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

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

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

إعداد خدمة "مصادقة Firebase"

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

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

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

تثبيت إضافة "إنشاء روبوت محادثة باستخدام 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}/discussion/{discussionId}/messages.
      في الخطوات المستقبلية من هذا الدرس التطبيقي حول الترميز، ستؤدي إضافة مستندات إلى هذه المجموعة إلى تفعيل الإضافة لاستدعاء Gemini API.
   3. في قائمة موقع "وظائف السحابة"، اختَر الموقع الجغرافي المفضّل لديك (مثل Iowa (us-central1) أو الموقع الجغرافي الذي سبق أن حدّدته لقاعدة بيانات Firestore).
   4. اترك جميع القيم الأخرى على الإعداد التلقائي.
7. انقر على تثبيت الإضافة وانتظِر إلى أن يتم تثبيتها.

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

على الرغم من أنّ الهدف من هذا الدرس التطبيقي حول الترميز هو التفاعل مع إضافة "إنشاء روبوت دردشة باستخدام 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 دور IAM لاستخدام قواعد الخدمات المتعددة، أدخِل Y أو N. (يمكنك استخدام أي من الخيارين في هذا الدرس التطبيقي حول الترميز)

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

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

1. احصل على إعدادات Firebase:
   1. في "وحدة تحكّم Firebase"، انتقِل إلى إعدادات المشروع ضِمن مشروعك على Firebase.
   2. انتقِل للأسفل إلى قسم تطبيقاتك، واختَر تطبيق الويب المسجَّل.
   3. في لوحة إعداد حزمة تطوير البرامج (SDK) وضبطها، انسخ الرمز الكامل initializeApp بما في ذلك الثابت firebaseConfig.
2. أضِف إعدادات Firebase إلى قاعدة رموز تطبيق الويب:
   1. في محرِّر الرموز، افتح الملف src/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. انتظِر بضع ثوانٍ حتى يردّ عليك روبوت الدردشة.

يردّ برنامج الدردشة الآلي في التطبيق بردّ عام.

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

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

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

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

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

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

يمكنك أيضًا تجربة إمكانية إجراء محادثة مع برنامج الدردشة الآلي مع سياق تاريخي:

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

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

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

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

في تطبيقك، عندما تحمّل صورة إلى حزمة Cloud Storage، يمكنك إنشاء عنوان URL وإضافته إلى مستند جديد في Cloud Firestore، ما يؤدي إلى تفعيل الإضافة لإنشاء طلب متعدد الوسائط واستدعاء Gemini API. في الرمز المصدر لهذا الدرس التطبيقي حول الترميز، قدّمنا الرمز اللازم لتحميل صورة وكتابة عنوان 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. في قائمة موقع "وظائف السحابة"، اختَر الموقع الجغرافي المفضّل لديك (مثل 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. انتقِل إلى Storage ضِمن مشروع Firebase.
2. انقر على إنشاء مجلد.
3. في مربّع النص اسم المجلد، أدخِل gallery
4. انقر على إضافة مجلد.
5. في مجلد gallery، انقر على تحميل ملف.
6. اختَر ملف صورة بتنسيق JPEG لتحميله.

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

1. انتقِل إلى Firestore ضِمن مشروع Firebase
2. انقر على بدء عملية التحصيل ضمن العمود الأول.
3. في مربّع النص معرّف المجموعة، أدخِل: gallery، ثم انقر على التالي.
4. إضافة مستند إلى المجموعة:
   1. في مربّع النص معرّف المستند، انقر على المعرّف التلقائي.
   2. في مربّع النص الحقل، أدخِل: image. في مربّع القيمة، أدخِل معرّف الموارد المنتظم لموقع التخزين الخاص بالصورة التي حمّلتها للتو.
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 App Hosting: استخدِم هذا الخيار إذا كنت تريد نشر التغييرات تلقائيًا كلّما أرسلتها إلى مستودع GitHub الخاص بك. تم إنشاء خدمة Firebase الجديدة هذه خصيصًا لتلبية احتياجات تطبيقات Next.js وAngular الديناميكية.

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

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

1. في الوحدة الطرفية، ابدأ خدمة استضافة Firebase من خلال تنفيذ الأوامر التالية:

   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. انشر تطبيق الويب على خدمة الاستضافة من خلال تنفيذ الأمر التالي:

   firebase deploy --only hosting
   

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

الخيار 2: النشر باستخدام Firebase App Hosting

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

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

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

من الآن فصاعدًا، في كل مرة تدفع فيها تغييرًا إلى مستودع GitHub، ستعمل خدمة Firebase App Hosting تلقائيًا على إنشاء تطبيقك ونشره.

9. الخاتمة

تهانينا! لقد حقّقت الكثير في هذا الدرس التطبيقي حول الترميز.

تثبيت الإضافات وإعدادها

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

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

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

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

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

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

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

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

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