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

1- قبل البدء

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

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

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

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

المعلومات التي ستطّلع عليها

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

المتطلبات

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

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

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

تطبيق الويب

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

قرّر موظفو المؤتمر الودود استخدام الذكاء الاصطناعي (AI) لتقديم تجربة مستخدم ممتعة ومخصّصة للحاضرين. بعد إكمال المؤتمر، تم إكمال برنامج دردشة مبرمجة مستند إلى الذكاء الاصطناعي الحواري يستند إلى نموذج للذكاء الاصطناعي التوليدي متعدد الوسائط (يُعرف أيضًا باسم النموذج اللغوي الكبير أو النموذج اللغوي الكبير)، كما يمكنه الإجابة عن أسئلة حول مواضيع عامة ومخصَّصة حسب الجدول الزمني للمؤتمر ومواضيعه. يمتلك روبوت الدردشة سياقًا تاريخيًا ومعرفة بالتاريخ/الوقت الحالي ومواضيع 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، يمكنك تنزيل أحدث إصدار من قناة الدعم الطويل الأمد (LTS) وتثبيته.

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

إذا كان لديك حساب على 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

1. يُرجى التحقّق من تثبيت واجهة سطر الأوامر في Firebase ومن أنّه الإصدار 13.6 أو إصدار أحدث:

   firebase --version
   

2. في حال تثبيت واجهة سطر الأوامر بنظام Firebase بعد تثبيت الإصدار 13.6 أو إصدار أحدث، يُرجى تحديثه:

   npm update -g firebase-tools
   

3. في حال عدم تثبيت واجهة سطر الأوامر في Firebase، يمكنك تثبيته:

   npm install -g firebase-tools
   

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

تسجيل الدخول إلى Firebase

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

   cd codelab-gemini-api-extensions
   firebase login
   

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

4- إعداد مشروع Firebase

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

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

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

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

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

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

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

ترقية خطة فوترة Firebase

لاستخدام إضافات Firebase وخدمات السحابة الإلكترونية الأساسية، يجب ترقية مشروع Firebase لتفعيل الفوترة.

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

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

1. انتقِل إلى خطط فوترة Firebase ضمن مشروعك في Firebase.
2. في مربّع حوار خطط الفوترة من Firebase، اختَر خطة Blaze واشترِها.

تفعيل مصادقة Firebase

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

تفعيل Cloud Firestore

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

تفعيل خدمة Cloud Storage لمنصّة Firebase

1. انتقِل إلى مساحة التخزين باستخدام مساحة التنقّل اليمنى.
2. انقر على البدء > البدء في وضع الاختبار > التالي. وستنشر قواعد أمان Firebase أكثر فعالية في وقت لاحق من هذا الدرس التطبيقي حول الترميز.
3. بما أنّك أعددت Firestore في مشروعك أولاً، تم ضبط موقع حزمتك التلقائية على Cloud Storage.
4. انقر على تم.

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

5- إعداد الإضافة "إنشاء روبوت دردشة باستخدام واجهة برمجة التطبيقات Gemini"

تثبيت الإضافة "إنشاء روبوت دردشة باستخدام واجهة برمجة تطبيقات Gemini"

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

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

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

في الوحدة الطرفية، اطلب من واجهة سطر الأوامر (CLI) استخدام مشروع 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. انتظِر بضع ثوانٍ حتى يستجيب برنامج الدردشة المبرمَجة.

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

خصِّص الدردشة المبرمَجة للتطبيق

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

1. في تطبيق الويب في المتصفّح، امحُ المحادثة بالنقر على الزر "x" الأحمر (بجانب الرسالة في سجلّ المحادثات).
2. في أداة تعديل الرموز، افتح ملف src/app/page.tsx.
3. مرِّر لأسفل واستبدل الرمز في السطر 77 أو بالقرب منه الذي يشير إلى 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.

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

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

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

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

   firebase init emulators
   firebase emulators:start
   

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

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

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

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

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

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

الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة "المهام المتعددة الوسائط باستخدام واجهة برمجة تطبيقات Gemini" من خلال تطبيق ويب، ولكن من المفيد معرفة طريقة عمل الإضافة من خلال تجربتها أولاً في "وحدة تحكُّم 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. في مربّع القيمة، أدخِل معرّف الموارد المنتظم (URI) لموقع التخزين للصورة التي حمّلتها للتو.
5. انقر على إضافة حقل.
6. في مربّع نص الحقل، أدخِل: published. في مربّع النوع، اختَر منطقي. في مربّع القيمة، اختَر true.
7. انقر على حفظ وانتظِر بضع ثوانٍ.

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

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

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

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

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

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

• الخيار 1: استضافة Firebase: يمكنك استخدام هذا الخيار إذا قررت عدم إنشاء مستودع GitHub الخاص بك (والاحتفاظ برمز المصدر محليًا على جهازك فقط).
• الخيار 2: استضافة تطبيقات Firebase: استخدِم هذا الخيار إذا كنت تريد النشر التلقائي في أي وقت ترسل فيه التغييرات إلى مستودع 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"

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

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

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

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

9- الخاتمة

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

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

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

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

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

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

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

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

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

الخطوات اللاحقة

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