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

1- قبل البدء

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

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

• الإلمام بـ Node.js وJavaScript

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

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

المتطلبات

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

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

يصف هذا القسم تطبيقات الويب التي ستنشئها في هذا الدرس التطبيقي حول الترميز ومنصة Firebase التي ستستخدمها لإنشائها.

تطبيق Reviewly

أثمرت شركة القمصان بالمراجعات الطويلة حول أحد قمصانها وهي غير متأكدة من تقييمها العام. يلخّص تطبيق الويب Reviewly المكتمل كل مراجعة ويقدم تقييمًا بالنجوم لكل مراجعة ويستخدم كل مراجعة لاستنتاج تقييم عام للمنتج. ويمكن للمستخدِمين أيضًا توسيع كلّ مراجعة ملخّصة للاطّلاع على المراجعة الأصلية.

تطبيق Chatbot

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

تطبيق Video Hint

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

في ما يلي الإضافات المستخدَمة في تطبيق Video Hint:

• تصنيف الفيديوهات باستخدام Cloud Video AI: يمكنك استخراج التصنيفات من كل فيديو يتم تحميله إلى مساحة التخزين.
• المهام الخاصة باللغة مع واجهة برمجة التطبيقات PaLM: يمكنك تلخيص التصنيفات في وصف نصي.
• تحويل النص إلى كلام: يمكنك إنشاء نسخة صوتية من وصف الفيديو.

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

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

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

   node -v
   

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

تنزيل المستودع

1. في حال تثبيت git، يمكنك استنساخ مستودع GitHub الخاص بالدرس التطبيقي حول الترميز:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. في حال عدم تثبيت git، يمكنك تنزيل مستودع GitHub كملف zip.

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

على جهازك المحلي، ابحث عن المستودع المستنسخ وراجع بنية المجلد. يحتوي الجدول التالي على المجلدات وأوصافها:

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

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

تثبيت واجهة سطر الأوامر في Firebase

شغِّل الأمر التالي للتحقّق من تثبيت واجهة سطر الأوامر في Firebase ومن أنّه الإصدار 12.5.4 أو إصدار أحدث:

firebase --version

• في حال تثبيت واجهة سطر الأوامر في Firebase لك، ولكنه ليس الإصدار 12.5.4 أو إصدار أحدث، يُرجى تحديثه:

  npm update -g firebase-tools
  

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

  npm install -g firebase-tools
  

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

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

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

   cd ai-extensions-codelab
   firebase login
   

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

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

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

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

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

تنزيل حساب خدمة Firebase

بعض تطبيقات الويب التي ستنشئها في هذا الدرس التطبيقي حول الترميز تستخدِم العرض من جهة الخادم مع Next.js.

يتم استخدام حزمة تطوير البرامج (SDK) لمشرف Firebase لنظام Node.js لضمان عمل قواعد الأمان من الرمز من جهة الخادم. لاستخدام واجهات برمجة التطبيقات في "مشرف Firebase"، عليك تنزيل حساب خدمة Firebase من وحدة تحكُّم Firebase.

1. في "وحدة تحكُّم Firebase"، انتقِل إلى صفحة حسابات الخدمة في إعدادات المشروع.
2. انقر على إنشاء مفتاح خاص جديد > إنشاء مفتاح:
3. بعد تنزيل الملف إلى نظام الملفات، احصل على المسار الكامل لذلك الملف.
   على سبيل المثال، إذا نزّلت الملف إلى مجلد عمليات التنزيل، قد يظهر المسار الكامل على النحو التالي: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. في الوحدة الطرفية، اضبط متغيّر البيئة GOOGLE_APPLICATION_CREDENTIALS على مسار المفتاح الخاص الذي تم تنزيله. في بيئة Unix، قد يبدو الأمر كما يلي:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

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

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

لاستخدام وظائف السحابة الإلكترونية وإضافات Firebase، يجب أن يكون مشروعك في Firebase ضمن خطة أسعار Blaze، ما يعني أنه مرتبط بحساب فوترة Cloud.

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

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

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

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

إعداد خدمات Firebase في وحدة تحكُّم Firebase

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

إعداد المصادقة

ستستخدم المصادقة مع كل من تطبيق Chatbot وتطبيق Video Hint. لا تنسَ أنّه إذا كنت تنشئ تطبيقًا حقيقيًا، يجب أن يكون لكل تطبيق مشروعه الخاص على Firebase.

1. في "وحدة تحكُّم Firebase"، انتقِل إلى المصادقة.
2. انقر على البدء.
3. في عمود مزوّدو الخدمات الإضافيون، انقر على Google > تفعيل.

4. في مربّع النص اسم المشروع الذي يظهر بشكل علني، أدخِل اسمًا يسهل تذكّره، مثل My AI Extensions Codelab.
5. من القائمة المنسدلة البريد الإلكتروني للدعم للمشروع، اختَر عنوان بريدك الإلكتروني.
6. انقر على حفظ.
   

إعداد Cloud Firestore

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

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

إعداد Cloud Storage لمنصّة Firebase

ستستخدم Cloud Storage مع تطبيق Video Hint ويمكنك تجربة إضافة تحويل النص إلى كلام (الخطوة التالية من الدرس التطبيقي حول الترميز).

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

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

5- ضبط إعدادات "مهام اللغة باستخدام PaLM API" الإضافة الخاصة بـ تطبيق Reviewly

تثبيت الإضافة Language Tasks with PaLM API

1. انتقِل إلى إضافة Language Tasks with PaLM API.
2. انقر على التثبيت في "وحدة تحكُّم Firebase".
3. اختَر مشروعك على Firebase.
4. في القسم Review APIs المفعَّلة والموارد التي تم إنشاؤها، انقر على تفعيل بجانب أي خدمات يتم اقتراحها لك:

5. انقر على التالي >. التالي.
6. في مربّع النص مسار المجموعة، أدخِل bot.
7. في مربّع النص مطالبة، أدخِل {{ input }}.
8. في مربّع النص حقول المتغيّر، أدخِل input.
9. في مربّع النص حقل الردّ، أدخِل text.
10. من القائمة المنسدلة موقع Cloud Functions، اختَر آيوا (us-central1) أو الموقع الجغرافي الذي اخترته في السابق لـ Firestore وCloud Storage.
11. من القائمة المنسدلة نموذج اللغة، اختَر text-bison-001.
12. واترك جميع القيم الأخرى كقيم تلقائية.
13. انقر على تثبيت الإضافة وانتظِر حتى يتم تثبيت الإضافة.

تجربة الإضافة Language Tasks with PaLM API

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة مهام اللغات مع واجهة برمجة التطبيقات PaLM من خلال تطبيق ويب، إلا أنّه من المفيد فهم آلية عمل الإضافة من خلال تشغيلها باستخدام وحدة تحكُّم Firebase. يتم تشغيل الإضافة عند إضافة مستند Cloud Firestore إلى مجموعة bot.

للاطّلاع على آلية عمل الإضافة باستخدام "وحدة تحكُّم Firebase"، يمكنك اتّباع الخطوات التالية:

1. في "وحدة تحكُّم Firebase"، انتقِل إلى Firestore.
2. في المجموعة bot، انقر على إضافة مستند.
3. في مربّع النص معرّف المستند، انقر على المعرّف التلقائي.
4. في مربّع نص الحقل، أدخِل input.
5. في مربّع النص القيمة، أدخِل Tell me about the moon.
6. انقر على حفظ وانتظِر بضع ثوانٍ. يتضمّن مستندك في مجموعة "bot" الآن ردًا على طلبك.

6- يجب إعداد تطبيق Reviewly لاستخدام Firebase.

لتشغيل تطبيق Reviewly، عليك إعداد رمز تطبيقك وواجهة سطر الأوامر في Firebase للتفاعل مع مشروع Firebase.

إضافة خدمات Firebase وإعداداته إلى رمز تطبيقك

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

يتضمّن نموذج تطبيق هذا الدرس التطبيقي حول الترميز جميع رموز الاستيراد والإعداد اللازمة لحِزم SDK (راجِع reviewly-start/js/reviews.js)، لذا لا تحتاج إلى إضافتها. ومع ذلك، لا يحتوي نموذج التطبيق على قيم العنصر النائب إلا لضبط إعدادات Firebase (راجِع reviewly-start/js/firebase-config.js)، لذا عليك تسجيل تطبيقك في مشروع Firebase للحصول على قيم إعدادات Firebase الفريدة لتطبيقك.

1. ضِمن مشروع Firebase في "وحدة تحكُّم Firebase"، انتقِل إلى نظرة عامة على المشروع، ثم انقر على الويب.
   
2. في مربّع النص اسم التطبيق، أدخِل لقب تطبيق لا ينسى، مثل My Reviewly app.
3. لا تضع علامة في مربّع الاختيار إعداد استضافة Firebase أيضًا لهذا التطبيق. ستتمكّن من تنفيذ هذه الخطوات لاحقًا في الدرس التطبيقي حول الترميز.
4. انقر على تسجيل التطبيق.
5. تعرض وحدة التحكم مقتطف رمز لإضافة وإعداد حزمة تطوير البرامج (SDK) لمنصّة Firebase باستخدام كائن ضبط Firebase خاص بالتطبيق. انسخ جميع السمات في كائن ضبط Firebase.
6. في أداة تعديل الرموز، افتح ملف reviewly-start/js/firebase-config.js.
7. استبدل قيم العنصر النائب بالقيم التي نسختها للتو. لا بأس إذا كانت لديك خصائص وقيم لخدمات Firebase لا تستخدمها في تطبيق Reviewly.
8. احفظ الملف.
9. ارجع إلى "وحدة تحكُّم Firebase"، انقر على متابعة إلى وحدة التحكُّم.

إعداد الوحدة الطرفية لتشغيل أوامر واجهة سطر الأوامر في Firebase مقابل مشروع Firebase

1. في الوحدة الطرفية، انتقِل إلى مجلد ai-extensions-codelab الذي تم تنزيله سابقًا.
2. الانتقال إلى مجلد تطبيق الويب "reviewly-start":

   cd reviewly-start
   

3. يمكنك جعل واجهة سطر الأوامر في Firebase تشغِّل الأوامر على مشروع محدّد في Firebase على النحو التالي:

   firebase use YOUR_PROJECT_ID
   

تشغيل تطبيق الويب Reviewly وعرضه

لتشغيل تطبيق الويب وعرضه، اتّبِع الخطوات التالية:

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

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. في المتصفّح، انتقِل إلى عنوان URL الذي يظهر في الوحدة الطرفية. على سبيل المثال: http://localhost:8080.

من المفترض أن يتم تحميل الصفحة، ولكن ستلاحظ عدم توفّر ميزات مختلفة. سنضيفها في الخطوات التالية من هذا الدرس التطبيقي حول الترميز.

7- إضافة وظيفة إلى تطبيق Reviewly

في الخطوة الأخيرة من هذا الدرس التطبيقي، تم تشغيل تطبيق Reviewly محليًا، ولكن لم يتضمّن وظائف كثيرة ولم يستخدم بعد الإضافة المثبّتة. في هذه الخطوة من الدرس التطبيقي حول الترميز، عليك إضافة هذه الوظيفة واستخدام تطبيق الويب لتشغيل الإضافة.

نشر قواعد الأمان

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

يمكنك الاطّلاع على هذه القواعد في ملفَي firestore.rules وstorage.rules.

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

   firebase deploy --only firestore:rules,storage
   

2. إذا طُلب منك ذلك: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"، انقر على نعم.

يجب تعديل رمز التطبيق لتشغيل الإضافة

في تطبيق Reviewly، تؤدّي إضافة جديدة تمت إضافتها إلى Firestore إلى تشغيل الإضافة لتلخيص المراجعة.

1. في أداة تعديل الرموز، افتح ملف functions/add-mock-reviews.js.
2. استبدِل المتغيّر reviewWithPrompt بالرمز التالي، الذي يطلب من النموذج اللغوي إجراء مراجعة أقصر.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. بعد المتغير reviewWithPrompt، استبدِل المتغيّر reviewDocument بالرمز التالي، ما سيؤدي إلى إنشاء مستند مراجعة حتى يمكن إضافته إلى Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. احفظ الملف.
5. في ملف js/reviews.js، بعد التعليق Insert code below, to import your Firebase Callable Cloud Function، استورِد دالة Firebase HTTP القابلة للاستدعاء باستخدام مساعد httpsCallable:

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. بعد التعليق Insert code below, to invoke your Firebase Callable Cloud Function، استدعِ دالة Firebase HTTP القابلة للاستدعاء:

   await addMockReviews();
   

7. احفظ الملف.

تفعيل دالة لإضافة مراجعات جديدة

يستخدم تطبيق الويب Reviewly وظيفة السحابة الإلكترونية لإضافة المراجعات. ولكن في الوقت الحالي، لا تتوفر وظيفة السحابة الإلكترونية.

لنشر الدالة باستخدام واجهة سطر الأوامر في Firebase، اتّبِع الخطوات التالية:

1. في الوحدة الطرفية أثناء وجودك في مجلد reviewly-start، اضغط على Control+C لإيقاف الخادم.
2. نشر الدالة:

   firebase deploy --only functions
   

3. إذا ظهر لك خطأ Permission denied while using the Eventarc Service Agent أو خطأ مشابه، يُرجى الانتظار بضع دقائق، ثم إعادة محاولة تنفيذ الأمر.

لقد نشرت للتو أول دالة مخصصة باستخدام دوال Cloud. توفّر وحدة تحكُّم Firebase لوحة بيانات تتيح لك الاطّلاع على جميع الوظائف التي تنشرها في مشروع Firebase.

تشغيل تطبيق الويب Reviewly وعرضه مرة أخرى (مزود الآن بوظائف)

لتشغيل تطبيق الويب الذي يعمل الآن وعرضه، اتّبِع الخطوات التالية:

1. في الوحدة الطرفية، شغِّل الخادم مرة أخرى:

   npm run dev
   

2. في المتصفّح، انتقِل إلى عنوان URL الذي يظهر في الوحدة الطرفية. على سبيل المثال: http://localhost:8080.
3. في التطبيق، انقر على إضافة بعض المراجعات الوهمية وانتظِر بضع ثوانٍ حتى تظهر بعض المراجعات الطويلة.
   في الخلفية، تتفاعل الإضافة Language Tasks with PaLM API مع المستند الجديد الذي يمثّل المراجعة الجديدة. إنّ الطلب الذي أضفته سابقًا يتطلّب ملخّصًا أقصر عن النموذج اللغوي.
4. للاطّلاع على مراجعة كاملة والطلبات المستخدمة في المراجعة، انقر على إحدى المراجعات، ثم اختَر عرض طلب PaLM.

8- إعداد "Chatbot with PaLM API" الإضافة الخاصة بـ تطبيق الدردشة المبرمَجة

تثبيت الإضافة Chatbot with PaLM API

1. انتقِل إلى الإضافة Chatbot with PaLM API.
2. انقر على التثبيت في "وحدة تحكُّم Firebase".
3. اختَر مشروعك على Firebase.
4. انقر على التالي >. التالي > بعد ذلك، إلى أن تصل إلى القسم ضبط الإضافة.
5. في مربّع النص مسار المجموعة، أدخِل users/{uid}/discussion/{discussionId}/messages.
6. من القائمة المنسدلة موقع Cloud Functions، اختَر آيوا (us-central1) أو الموقع الجغرافي الذي اخترته في السابق لـ Firestore وCloud Storage.
7. من القائمة المنسدلة نموذج اللغة، اختَر chat-bison.
8. واترك جميع القيم الأخرى كقيم تلقائية.
9. انقر على تثبيت الإضافة وانتظِر حتى يتم تثبيت الإضافة.

تجربة الإضافة Chatbot with PaLM API

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة Chatbot with PaLM API من خلال تطبيق ويب، إلا أنّه من المفيد فهم آلية عمل الإضافة من خلال تشغيلها باستخدام وحدة تحكُّم Firebase. يتم تشغيل الإضافة عند إنشاء مستند Cloud Firestore في مجموعة "users/{uid}/discussion/{discussionId}/messages".

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

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

9- إعداد تطبيق Chatbot لاستخدام Firebase

لتشغيل تطبيق Chatbot، عليك إعداد رمز تطبيقك وواجهة سطر الأوامر في Firebase للتفاعل مع مشروع Firebase.

إضافة خدمات Firebase وإعداداته إلى رمز تطبيقك

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

يتضمّن نموذج تطبيق هذا الدرس التطبيقي حول الترميز جميع رموز الاستيراد والإعداد اللازمة لحِزم SDK (راجِع chatbot-start/lib/firebase/firebase.js)، لذا لا تحتاج إلى إضافتها. ومع ذلك، لا يحتوي نموذج التطبيق على قيم العنصر النائب إلا لضبط إعدادات Firebase (راجِع chatbot-start/lib/firebase/firebase-config.js)، لذا عليك تسجيل تطبيقك في مشروع Firebase للحصول على قيم إعدادات Firebase الفريدة لتطبيقك.

1. في "وحدة تحكُّم Firebase"، انتقِل في مشروعك على Firebase إلى نظرة عامة على المشروع، ثم انقر على الويب (أو انقر على إضافة تطبيق إذا سبق لك تسجيل تطبيق في المشروع).
2. في مربّع النص اسم التطبيق، أدخِل لقب تطبيق لا ينسى، مثل My Chatbot app.
3. لا تضع علامة في مربّع الاختيار إعداد استضافة Firebase أيضًا لهذا التطبيق. ستتمكّن من تنفيذ هذه الخطوات لاحقًا في الدرس التطبيقي حول الترميز.
4. انقر على تسجيل التطبيق.
5. تعرض وحدة التحكم مقتطف رمز لإضافة وإعداد حزمة تطوير البرامج (SDK) لمنصّة Firebase باستخدام كائن ضبط Firebase خاص بالتطبيق. انسخ جميع السمات في كائن ضبط Firebase.
6. في أداة تعديل الرموز، افتح ملف chatbot-start/lib/firebase/firebase-config.js.
7. استبدل قيم العنصر النائب بالقيم التي نسختها للتو. لا بأس إذا كانت لديك خصائص وقيم لخدمات Firebase لا تستخدمها في تطبيق Chatbot.
8. احفظ الملف.
9. ارجع إلى "وحدة تحكُّم Firebase"، انقر على متابعة إلى وحدة التحكُّم.

إعداد الوحدة الطرفية لتشغيل أوامر واجهة سطر الأوامر في Firebase مقابل مشروع Firebase

1. في الوحدة الطرفية، اضغط على Control+C لإيقاف الخادم من تشغيل تطبيق الويب السابق.
2. في الوحدة الطرفية، انتقِل إلى مجلد تطبيق الويب "chatbot-start":

   cd ../chatbot-start
   

3. يمكنك جعل واجهة سطر الأوامر في Firebase تشغِّل الأوامر على مشروع محدّد في Firebase على النحو التالي:

   firebase use YOUR_PROJECT_ID
   

إعداد قاعدة رموز تطبيقك لاستخدام استضافة Firebase وفقًا لإطار العمل

يستخدم هذا الدرس التطبيقي أُطر عمل الويب مع الاستضافة (معاينة) مع تطبيق الويب Chatbot.

1. في الوحدة الطرفية، فعِّل إطارات العمل على الويب من خلال "استضافة Firebase":

   firebase experiments:enable webframeworks
   

2. إعداد استضافة Firebase:

   firebase init hosting
   

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

تشغيل تطبيق الويب Chatbot وعرضه

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

   npm install
   firebase emulators:start --only hosting
   

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

من المفترض أن يتم تحميل الصفحة، ولكن ستلاحظ عدم توفّر ميزات مختلفة. سنضيفها في الخطوات التالية من هذا الدرس التطبيقي حول الترميز.

تحديد المشاكل في تشغيل تطبيق الويب وحلّها

إذا ظهرت لك رسالة الخطأ هذه في صفحة الويب التي تبدأ على هذا النحو: Error: Firebase session cookie has incorrect...، عليك حذف جميع ملفات تعريف الارتباط في بيئة المضيف المحلي. لإجراء ذلك، اتبع الإرشادات حول حذف ملفات تعريف الارتباط | مستندات "أدوات مطوّري البرامج"

10- إضافة وظيفة إلى تطبيق الدردشة المبرمَجة

في الخطوة الأخيرة من هذا الدرس التطبيقي، تم تشغيل تطبيق Chatbot محليًا، ولكن لم يتضمّن وظائف كثيرة ولم يسبق لك استخدام الإضافة المثبَّتة. في هذه الخطوة من الدرس التطبيقي حول الترميز، عليك إضافة هذه الوظيفة واستخدام تطبيق الويب لتشغيل الإضافة.

نشر قواعد الأمان

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

يمكنك الاطّلاع على هذه القواعد في ملفَي firestore.rules وstorage.rules.

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

   firebase deploy --only firestore:rules,storage
   

2. إذا طُلب منك ذلك: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"، انقر على نعم.

يُرجى تعديل الرمز لإضافة رسائل إلى Cloud Firestore

في تطبيق Chatbot، تتم إضافة رسالة جديدة من المستخدم إلى Firestore، ما يؤدي إلى تشغيل الإضافة لإنشاء رد.

1. في أداة تعديل الرموز، افتح ملف lib/firebase/firestore.js.
2. بالقرب من نهاية الملف، ابحث عن الدالة addNewMessage التي تعالج إضافة رسائل جديدة.
   تستخدم الدالة حاليًا خصائص الكائن التالية:
   

   المعلَمة	الوصف
   userId	رقم تعريف المستخدم الذي سجَّل الدخول
   discussionId	رقم تعريف المناقشة الذي تمت إضافة الرسالة إليه
   message	محتوى نص الرسالة
   db	مثيل قاعدة بيانات Firestore

   مع تجهيز هذه المتغيّرات، يمكنك إضافة مستند Cloud Firestore لتمثيل الرسالة الجديدة.
3. أضِف الرمز التالي في نص الدالة addNewMessage بعد التعليق // Insert your code below ⬇️:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

عدِّل الرمز لإنشاء طلب بحث للحصول على الرسائل.

1. في ملف lib/firebase/firestore.js، حدِّد موقع الدالة getMessagesQuery التي تحتاج إلى عرض طلب Cloud Firestore من أجل تحديد موقع الرسائل المخزَّنة في مسار المجموعة users/{uid}/discussion/{discussionId}/messages.
2. استبدل دالة getMessagesQuery بأكملها بالرمز التالي:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

تحديث الرمز للتعامل مع مستندات رسائل Cloud Firestore

1. في ملف lib/firebase/firestore.js، حدِّد موقع الدالة handleMessageDoc التي تتلقّى مستند Cloud Firestore الذي يمثّل رسالة واحدة.
   تحتاج هذه الدالة إلى تنسيق البيانات وبنيتها بطريقة مفيدة لواجهة المستخدم في تطبيق Chatbot.
2. استبدل دالة handleMessageDoc بأكملها بالرمز التالي:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. احفظ الملف.

تشغيل تطبيق الويب Chatbot وعرضه مرة أخرى (مع وظائف الآن)

لتشغيل تطبيق الويب الذي يعمل الآن وعرضه، اتّبِع الخطوات التالية:

1. في المتصفّح، ارجع إلى علامة التبويب التي تحتوي على تطبيق الويب Chatbot وأعِد تحميل الصفحة.
2. انقر على Sign in with Google (تسجيل الدخول باستخدام حساب Google).
3. اختَر حسابك على Google إذا لزم الأمر.
4. بعد تسجيل الدخول، أعِد تحميل الصفحة.
5. في مربع النص إدخال رسالتك، أدخِل رسالة، مثل Tell me about space.
6. انقر على إرسال وانتظر بضع ثوانٍ حتى يستجيب تطبيق الويب Chatbot.

فائدة أخرى للإضافة Chatbot with PaLM API هي سجلّ المحادثات.

للاطلاع على مثال على قدرته على التحدث مع السياق التاريخي، اتبع الخطوات التالية:

1. في مربّع النص إدخال رسالتك، اطرح سؤالاً، مثل What are five random fruits?.
2. في مربّع النص إدخال رسالتك، اطرح سؤال متابعة يتعلق بالسؤال السابق، مثل And what about vegetables?.

يستجيب تطبيق الويب Chatbot استنادًا إلى المعلومات السابقة. على الرغم من أنّ سؤالك الأخير لم يحدّد خمسة خضروات عشوائية، إلا أن إضافة Chatbot with PaLM API تتفهم أسئلة المتابعة.

11- إعداد ميزة "تحويل النص إلى كلام" الإضافة الخاصة بـ تطبيق Video Hint

تثبيت الإضافة تحويل النص إلى كلام

1. انتقِل إلى الإضافة تحويل النص إلى كلام.
2. انقر على التثبيت في "وحدة تحكُّم Firebase".
3. اختَر مشروعك على Firebase.
4. انقر على التالي.
5. في القسم Review APIs المفعَّلة والموارد التي تم إنشاؤها، انقر على تفعيل بجانب أي خدمات يتم اقتراحها لك:

6. انقر على التالي، ثم اختَر منح بجانب أي أذونات مقترَحة لك.

7. انقر على التالي.
8. في مربّع النص مسار المجموعة، أدخِل bot.
9. في مربّع النص مسار مساحة التخزين، أدخِل tts.
10. واترك جميع القيم الأخرى كخيارات تلقائية.
11. انقر على تثبيت الإضافة وانتظِر حتى يتم تثبيت الإضافة.

يمكنك تجربة الإضافة تحويل النص إلى كلام.

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

للاطّلاع على آلية عمل الإضافة باستخدام "وحدة تحكُّم Firebase"، يمكنك اتّباع الخطوات التالية:

1. في "وحدة تحكُّم Firebase"، انتقِل إلى Firestore.
2. انقر على بدء جمع الصور.
3. في مربّع النص معرّف المجموعة، أدخِل bot.
4. انقر على التالي.

5. في مربّع النص معرّف المستند، انقر على المعرّف التلقائي.
6. في مربّع نص الحقل، أدخِل text.
7. في مربّع النص القيمة، أدخِل The quick brown fox jumps over the lazy dog.
8. انقر على حفظ.

لعرض وسماع ملف MP3 الذي أنشأته، اتبع الخطوات التالية:

1. في "وحدة تحكُّم Firebase"، انتقِل إلى مساحة التخزين.
2. في الجزء الذي يمكنك تحميل الملفات منه، دوِّن اسم الحزمة بعد القيمة gs://. هذا هو اسم حزمتك التلقائية لهذا المشروع. ستحتاج إليها في مهام مختلفة خلال هذا الدرس التطبيقي حول الترميز.

3. في Google Cloud Console، انتقِل إلى Cloud Storage.
4. اختَر مشروعك.
   إذا لم يظهر مشروعك في قائمة المشاريع الأخيرة، انقر على اختيار مشروع لتحديد موقع مشروعك في منتقي المشاريع.

5. اختَر حزمة مساحة التخزين التلقائية.
6. الانتقال إلى المجلد "tts/"
7. انقر على ملف MP3.
8. في نهاية ملف MP3، انقر على ولاحظ أن النص يتم تحويله إلى كلام.

12- إعداد ميزة "تصنيف الفيديوهات باستخدام Cloud Video AI" الإضافة الخاصة بـ تطبيق Video Hint

تثبيت الإضافة تصنيف الفيديوهات باستخدام الذكاء الاصطناعي في Cloud Video

1. انتقِل إلى إضافة تصنيف الفيديوهات باستخدام الذكاء الاصطناعي (AI) في السحابة الإلكترونية.
2. انقر على التثبيت في "وحدة تحكُّم Firebase".
3. اختَر مشروعك على Firebase.
4. انقر على التالي >. التالي > بعد ذلك، إلى أن تصل إلى القسم ضبط الإضافة.
5. من القائمة المنسدلة موقع Cloud Functions الجغرافي، اختَر موقعًا جغرافيًا متوافقًا (إما الموقع الذي اخترته سابقًا لـ Firestore وCloud Storage أو الأقرب إليه). للاطّلاع على المواقع الجغرافية التي تتوفّر فيها الميزة، راجِع قسم location_id في AnnotateVideoRequest.
6. من القائمة المنسدلة النموذج، اختَر الأحدث.
7. من القائمة المنسدلة الكاميرا الثابتة، اختَر لا.
8. واترك جميع القيم الأخرى كقيم تلقائية.
9. انقر على تثبيت الإضافة وانتظِر حتى يتم تثبيت الإضافة.

تجربة الإضافة تصنيف الفيديوهات باستخدام الذكاء الاصطناعي (AI) في السحابة الإلكترونية

على الرغم من أنّ الهدف من هذا الدرس التطبيقي هو التفاعل مع إضافة تصنيف الفيديوهات باستخدام Cloud Video AI من خلال تطبيق ويب، إلا أنّه من المفيد فهم آلية عمل الإضافة من خلال تشغيلها باستخدام "وحدة تحكُّم Firebase". يتم تشغيل الإضافة عند تحميل ملف فيديو إلى حزمة مساحة التخزين.

للاطّلاع على آلية عمل الإضافة باستخدام "وحدة تحكُّم Firebase"، يمكنك اتّباع الخطوات التالية:

1. انتقِل إلى التخزين ضمن مشروع Firebase > إنشاء مجلد
2. في مربّع النص اسم المجلد، أدخِل video_annotation_input.

3. انقر على إضافة مجلد.
4. في المجلد video_annotation_input، انقر على تحميل ملف.
5. في المجلد ai-extensions-codelab/video-hint-start/public/videos الذي استنسخته أو نزّلته سابقًا، اختَر ملف الفيديو الأول.
6. في المتصفِّح مرة أخرى، في Google Cloud Console، انتقِل إلى Cloud Storage.
7. اختَر حزمة مساحة التخزين التلقائية، كما ذكرت سابقًا.
8. انقر على المجلد video_annotation_output.
   إذا لم يظهر المجلد video_annotation_output، انتظِر بضع ثوانٍ ثم أعِد تحميل الصفحة لأنّ Video Intelligence API قد لا تزال تعالج الفيديو.

9. لاحِظ وجود ملف JSON يحمل اسمًا مشابهًا للملف الذي حمّلته سابقًا.
10. انقر على تنزيل FILENAME.
11. افتح ملف JSON الذي تم تنزيله في أداة تعديل الرموز. يحتوي هذا الملف على الناتج الأولي من Video Intelligence API التي تتضمّن التصنيفات التي تم رصدها للفيديو الذي حمّلته.

13- إعداد تطبيق Video Hint لاستخدام Firebase

لتشغيل تطبيق Video Hint، يجب إعداد رمز التطبيق وواجهة سطر الأوامر في Firebase للتفاعل مع مشروع Firebase.

إضافة خدمات Firebase وإعداداته إلى رمز تطبيقك

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

يتضمّن نموذج تطبيق هذا الدرس التطبيقي حول الترميز جميع رموز الاستيراد والإعداد اللازمة لحِزم SDK (راجِع video-hint-start/lib/firebase/firebase.js)، لذا لا تحتاج إلى إضافتها. ومع ذلك، لا يحتوي نموذج التطبيق على قيم العنصر النائب إلا لضبط إعدادات Firebase (راجِع video-hint-start/lib/firebase/firebase-config.js)، لذا عليك تسجيل تطبيقك في مشروع Firebase للحصول على قيم إعدادات Firebase الفريدة لتطبيقك.

1. في "وحدة تحكُّم Firebase"، انتقِل في مشروعك على Firebase إلى نظرة عامة على المشروع، ثم انقر على الويب (أو انقر على إضافة تطبيق إذا سبق لك تسجيل تطبيق في المشروع).
2. في مربّع النص اسم التطبيق، أدخِل لقب تطبيق لا ينسى، مثل My Video Hint app.
3. لا تضع علامة في مربّع الاختيار إعداد استضافة Firebase أيضًا لهذا التطبيق. ستتمكّن من تنفيذ هذه الخطوات لاحقًا في الدرس التطبيقي حول الترميز.
4. انقر على تسجيل التطبيق.
5. تعرض وحدة التحكم مقتطف رمز لإضافة وإعداد حزمة تطوير البرامج (SDK) لمنصّة Firebase باستخدام كائن ضبط Firebase خاص بالتطبيق. انسخ جميع السمات في كائن ضبط Firebase.
6. في أداة تعديل الرموز، افتح ملف video-hint-start/lib/firebase/firebase-config.js.
7. استبدل قيم العنصر النائب بالقيم التي نسختها للتو. لا بأس إذا كانت لديك خصائص وقيم لخدمات Firebase لا تستخدمها في تطبيق تلميح الفيديو.
8. احفظ الملف.
9. ارجع إلى "وحدة تحكُّم Firebase"، انقر على متابعة إلى وحدة التحكُّم.

إعداد الوحدة الطرفية لتشغيل أوامر واجهة سطر الأوامر في Firebase مقابل مشروع Firebase

1. في الوحدة الطرفية، اضغط على Control+C لإيقاف الخادم من تشغيل تطبيق الويب السابق.
2. في الوحدة الطرفية، انتقِل إلى مجلد تطبيق الويب "video-hint-start":

   cd ../video-hint-start
   

3. يمكنك جعل واجهة سطر الأوامر في Firebase تشغِّل الأوامر على مشروع محدّد في Firebase على النحو التالي:

   firebase use YOUR_PROJECT_ID
   

إعداد قاعدة رموز تطبيقك لاستخدام استضافة Firebase وفقًا لإطار العمل

يستخدم هذا الدرس التطبيقي أُطر عمل ويب مع الاستضافة (معاينة) مع تطبيق الويب Video Hint.

1. في الوحدة الطرفية، فعِّل إطارات العمل على الويب من خلال "استضافة Firebase":

   firebase experiments:enable webframeworks
   

2. إعداد استضافة Firebase:

   firebase init hosting
   

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

تشغيل تطبيق الويب Video Hint وعرضه

1. في الوحدة الطرفية، ثبِّت الملحقات في المجلدَين video-hint-start وfunctions، ثم شغِّل التطبيق:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

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

من المفترض أن يتم تحميل الصفحة، ولكن ستلاحظ عدم توفّر ميزات مختلفة. سنضيفها في الخطوات التالية من هذا الدرس التطبيقي حول الترميز.

تحديد المشاكل في تشغيل تطبيق الويب وحلّها

إذا ظهرت رسالة خطأ مثل Error: The query requires an index. You can create it here: https://console.firebase.google.com في لوحة وحدة التحكّم في "أدوات مطوري البرامج"، اتّبِع الخطوات التالية:

1. انتقِل إلى عنوان URL المقدَّم.

2. انقر على حفظ وانتظر حتى يتم تغيير الحالة من المبنى إلى مُفعَّل.

14- إضافة وظيفة إلى تطبيق Video Hint

في الخطوة الأخيرة من هذا الدرس التطبيقي، تم تشغيل تطبيق Video Hint محليًا، ولكن لم يتضمّن وظائف كثيرة ولم يسبق لك استخدام الإضافة المثبّتة. في هذه الخطوة من الدرس التطبيقي حول الترميز، عليك إضافة هذه الوظيفة واستخدام تطبيق الويب لتشغيل الإضافة.

نشر قواعد الأمان

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

يمكنك الاطّلاع على هذه القواعد في ملفَي firestore.rules وstorage.rules.

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

   firebase deploy --only firestore:rules,storage
   

2. إذا طُلب منك ذلك: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"، انقر على نعم.

قم بتحديث التعليمة البرمجية لدمج الدوال

1. في أداة تعديل الرموز، وسِّع مجلد "functions".
   يحتوي هذا المجلد على عدة دوال يتم دمجها لإنشاء مسار الإضافة. يسرد الجدول التالي كل دالة ويصفها:

   الدالة	الوصف
   functions/01-handle-video-upload.js	الخطوة الأولى في مسار الإضافة. يعالج ملف الفيديو الذي يحمّله المستخدم.
   functions/02-handle-video-labels.js	الخطوة الثانية في مسار التمديد. وتعالج هذه المعالجة ملف تصنيفات الفيديو الذي تم إنشاؤه بواسطة الإضافة storage-label-videos.
   functions/03-handle-audio-file.js	الخطوة الثالثة في مسار التمديد. وهي تعالج الملف الصوتي المحوّل إلى نص.

   ومع ذلك، لا تزال بحاجة إلى إضافة ملف يجمع هذه الدوال معًا.
2. في ملف functions/index.js، أضِف الرمز التالي:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

يستخدم هذا الرمز وحدات JavaScript لاستيراد الدوال وتصديرها من ملف index.js لتوفير موقع مركزي واحد لجميع الدوال.

تعديل الرمز للتعامل مع تحميل الفيديو

1. في أداة تعديل الرموز، افتح ملف lib/firebase/storage.js.
2. حدِّد موقع الدالة uploadVideo.
   وتتلقّى هذه الدالة المَعلمات userId وfilePath وfile. هذه البيانات تكفي لتحميل ملف إلى Cloud Storage.
3. أضِف الرمز التالي في نص الدالة uploadVideo:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

نشر الدوال

لتفعيل وظائفك باستخدام واجهة سطر الأوامر في Firebase، اتّبِع الخطوات التالية:

1. في الوحدة الطرفية أثناء وجودك في مجلد video-hint-start، اضغط على Control+C لإيقاف العملية الحالية.
2. نشر الدوال:

   firebase deploy --only functions
   

   إذا طُلب منك حذف أي دوال سحابية سابقة، اختَر No.
3. إذا ظهرت لك رسالة مشابهة لـ Permission denied while using the Eventarc Service Agent، يُرجى الانتظار بضع دقائق ثم إعادة محاولة تنفيذ الأمر.
4. بعد انتهاء الأمر، شغِّل التطبيق على الجهاز مرة أخرى:

   firebase emulators:start --only hosting
   

تشغيل تطبيق الويب Video Hint وعرضه مرة أخرى (مع توفير وظائفه الآن)

لتشغيل تطبيق الويب الذي يعمل الآن وعرضه، اتّبِع الخطوات التالية:

1. في المتصفّح، ابحث عن علامة التبويب التي انتقلت إليها إلى http://localhost:5000.
2. إذا لزم الأمر، انقر على تسجيل الدخول باستخدام حساب Google واختَر حسابك على Google.
3. انقر على تحميل مثال فيديو رقم 1 وانتظِر بضع دقائق للاطّلاع على نتائج ملخّص الفيديو.
4. إذا لم تظهر أي نتائج بعد تحميل الفيديو، يُرجى الاطّلاع على مقالة تحديد وحلّ الأخطاء في دوال السحابة الإلكترونية في ملحق هذا الدرس التطبيقي حول الترميز.

15- الخاتمة

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

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

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

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

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

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

مراجعة

في تطبيق الويب Reviewly، استخدمت الإضافة مهام اللغة مع واجهة برمجة تطبيقات PaLM لتلخيص المراجعات الطويلة التي أضافها المستخدمون لمنتج قميص. طلبت أيضًا من نموذج اللغة تقديم استجابة JSON لطلب بحثك، حيث قدّم ملف JSON تقييمًا بالنجوم ومراجعة موجزة للمراجعة الأصلية الطويلة.

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

الدردشة المبرمجة

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

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

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

تلميح: يمكنك استخدام خيار سياق قابل للضبط لتحقيق ذلك.

تلميح بشأن الفيديو

في تطبيق الويب Video Hint، استخدمت الإضافات تحويل النص إلى كلام ومهام اللغات باستخدام واجهة برمجة تطبيقات PaLM وتصنيف الفيديوهات باستخدام السحابة الإلكترونية للفيديو لإنشاء مسار إضافة يؤدي إلى عرض وصف نصي وصوتي للفيديو.

تمرين اختياري: وجدت الوزارة أن النموذج الأوّلي مثيرًا للاهتمام، وتريد الآن أيضًا أن يتمكن المستخدم من النقر على تصنيف نصي للانتقال إلى النقطة التي تم فيها رصد التصنيف في الفيديو.

16- الملحق: تحديد المشاكل وحلّها في دوال السحابة الإلكترونية

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

السماح بالوصول العلني بدون مصادقة

إذا ظهرت لك أي أخطاء متعلّقة بالأذونات في لوحة وحدة التحكّم في "أدوات مطوري البرامج في Chrome"، اتّبِع الخطوات التالية:

1. يُرجى الاطّلاع على نظرة عامة على المصادقة | صفحة تشغيل السحابة الإلكترونية
2. انقر على الرابط لعرض المهام المطلوبة وإكمالها من أجل السماح بالوصول العلني الذي لم تتم مصادقته إلى الدالة.

3. انتقِل مرة أخرى إلى تطبيق Reviewly. على سبيل المثال: http://localhost:8080.
4. انقر على إضافة بعض المراجعات الوهمية وانتظِر بضع ثوانٍ.
   • في حال ظهور مراجعات، ليس عليك مواصلة تنفيذ هذه الخطوات لتحديد المشاكل وحلّها، ويمكنك الانتقال مباشرةً إلى قسم إعداد تطبيق Chatbot على الويب في هذا الدرس التطبيقي حول الترميز.
   • إذا لم تظهر المراجعات، يمكنك المتابعة من خلال قسم تحديد المشاكل وحلّها.

التعامل مع أخطاء الأذونات غير الكافية

1. في "وحدة تحكُّم Firebase"، انتقِل إلى الدوال.
2. مرِّر مؤشر الماوس فوق الدالة addMockReviews، ثم انقر على >. الاطّلاع على السجلّات

3. قم بالتمرير خلال السجلات حتى تعثر على خطأ مشابه لأحد الأخطاء التالية:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. في Google Cloud Console، انتقِل إلى صفحة أذونات "إدارة الهوية وإمكانية الوصول"، ثم اختَر مشروعك.
5. في الجدول، ابحث عن عمود الاسم.
   في قسم إدارة الهوية وإمكانية الوصول المشرف، هناك جدول بالمستخدمين والأدوار. يصف عمود الاسم في الجدول الغرض من استخدام المستخدم أو المدير. قد يكون لديك مدير رئيسي يحمل اسم حساب خدمة Compute Engine التلقائي.

إذا ظهر لك حساب خدمة Compute Engine التلقائي، اتّبِع الخطوات التالية:

1. انقر على تعديل المدير.

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

إذا لم يظهر لك حساب خدمة Compute Engine التلقائي، اتّبِع الخطوات التالية:

1. انقر على منح إذن الوصول.
2. في مربّع النص القواعد الجديدة، أدخِل compute.
3. في قائمة الاقتراحات التلقائية التي تظهر، اختَر حساب خدمة Compute Engine التلقائي.

إضافة أدوار إلى حساب خدمة Compute Engine التلقائي

في قسم تعيين الأدوار ضمن حساب خدمة Compute Engine التلقائي:

1. وسِّع القائمة اختيار دور.
2. في مربّع النص فلتر، أدخِل Cloud Datastore User.
3. في قائمة الاقتراحات التلقائية التي تظهر، اختَر مستخدم تخزين البيانات في السحابة الإلكترونية.
4. انقر على إضافة دور آخر.
   1. وسِّع القائمة اختيار دور.
   2. في مربّع النص فلتر، أدخِل Cloud Storage for Firebase Admin.
   3. في قائمة الاقتراحات التلقائية التي تظهر، اختَر Cloud Storage for Firebase Admin.
5. انقر على إضافة دور آخر.
   1. وسِّع القائمة اختيار دور.
   2. في مربّع النص فلتر، أدخِل Cloud Storage for Firebase Service Agent.
   3. في قائمة الاقتراحات التلقائية التي تظهر، اختَر وكيل خدمة Cloud Storage for Firebase.
6. انقر على حفظ.