أنشئ تطبيقات ويب مدعومة بالذكاء الاصطناعي باستخدام ملحقات Firebase

1. قبل أن تبدأ

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

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

• معرفة Node.js وجافا سكريبت

ما ستتعلمه

• كيفية استخدام الامتدادات المرتبطة بالذكاء الاصطناعي لمعالجة إدخال اللغة والفيديو.
• كيفية استخدام Cloud Functions لـ Firebase لتشكيل خط أنابيب بين الامتدادات.
• كيفية استخدام JavaScript للوصول إلى المخرجات التي تنتجها الإضافات.

ماذا ستحتاج

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

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

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

تطبيق المراجعة

شركة القمصان غارقة في المراجعات الطويلة حول أحد قمصانها وغير متأكدة من تصنيفها الإجمالي. يلخص تطبيق الويب Reviewly المكتمل كل مراجعة، ويوفر تصنيفًا بالنجوم لكل مراجعة، ويستخدم كل مراجعة لاستنتاج تقييم عام للمنتج. يمكن للمستخدمين أيضًا توسيع كل مراجعة ملخصة لرؤية المراجعة الأصلية.

تطبيق الشات بوت

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

تطبيق تلميح الفيديو

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

هذه هي الملحقات المستخدمة في تطبيق Video Hint :

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

3. قم بإعداد بيئة التطوير الخاصة بك

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

1. في جهازك الطرفي، تأكد من تثبيت Node.js v20.0.0 أو إصدار أحدث:

   node -v
   

2. إذا لم يكن لديك Node.js v20.0.0 أو أعلى، فقم بتنزيله وتثبيته .

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

1. إذا كان لديك git مثبتًا، فانسخ مستودع GitHub الخاص ببرنامج Codelab:

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

2. إذا لم يكن git مثبتًا لديك، فقم بتنزيل مستودع GitHub كملف مضغوط .

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

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

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

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

قم بتثبيت Firebase CLI

قم بتشغيل الأمر التالي للتحقق من تثبيت Firebase CLI وأنه الإصدار 12.5.4 أو أعلى:

firebase --version

• إذا كان لديك Firebase CLI مثبتًا، ولكنه ليس الإصدار 12.5.4 أو أعلى، فقم بتحديثه:

  npm update -g firebase-tools
  

• إذا لم يكن Firebase CLI مثبتًا لديك، فقم بتثبيته:

  npm install -g firebase-tools
  

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

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

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

يتم استخدام Firebase Admin SDK لـ Node.js لضمان عمل قواعد الأمان من التعليمات البرمجية من جانب الخادم. لاستخدام واجهات برمجة التطبيقات في Firebase Admin، يلزمك تنزيل حساب خدمة Firebase من وحدة تحكم Firebase.

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

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

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

قم بترقية خطة تسعير Firebase الخاصة بك

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

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

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

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

1. في وحدة تحكم Firebase، حدد ترقية خطتك .
2. في مربع الحوار، حدد خطة Blaze، ثم اتبع التعليمات التي تظهر على الشاشة لربط مشروعك بحساب Cloud Billing.
   إذا كنت بحاجة إلى إنشاء حساب Cloud Billing، فقد تحتاج إلى الرجوع مرة أخرى إلى تدفق الترقية في وحدة تحكم 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. استخدم الموقع الافتراضي أو حدد موقعًا من اختيارك.
   بالنسبة للتطبيق الحقيقي، فأنت تريد اختيار موقع قريب من المستخدمين. لاحظ أنه لا يمكن تغيير هذا الموقع لاحقًا، وسيكون أيضًا تلقائيًا موقع حاوية التخزين السحابي الافتراضية (الخطوة التالية).
4. انقر فوق تم .

قم بإعداد التخزين السحابي لـ Firebase

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

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

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

5. قم بإعداد ملحق "مهام اللغة باستخدام PaLM API" لتطبيق Reviewly

قم بتثبيت مهام اللغة بامتداد PaLM API

1. انتقل إلى مهام اللغة بامتداد PaLM API .
2. انقر فوق "تثبيت" في وحدة تحكم Firebase .
3. حدد مشروع Firebase الخاص بك.
4. في قسم مراجعة واجهات برمجة التطبيقات الممكّنة والموارد التي تم إنشاؤها ، انقر فوق تمكين بجوار أي خدمات مقترحة لك:

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

جرب مهام اللغة مع ملحق PaLM API

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

لمعرفة كيفية عمل الامتداد باستخدام وحدة تحكم Firebase، اتبع الخطوات التالية:

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

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

لتشغيل تطبيق Reviewly ، تحتاج إلى إعداد رمز التطبيق الخاص بك وFirebase CLI للتفاعل مع مشروع Firebase الخاص بك.

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

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

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

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

قم بإعداد المحطة الطرفية الخاصة بك لتشغيل أوامر Firebase CLI ضد مشروع Firebase الخاص بك

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

   cd reviewly-start
   

3. اجعل Firebase CLI يقوم بتشغيل الأوامر مقابل مشروع Firebase محدد:

   firebase use YOUR_PROJECT_ID
   

قم بتشغيل وعرض تطبيق الويب Review

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

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 محليًا، لكنه لم يكن به الكثير من الوظائف ولم يستخدم الملحق المثبت بعد. في هذه الخطوة من الدرس التطبيقي حول التعليمات البرمجية، ستضيف هذه الوظيفة وتستخدم تطبيق الويب لتشغيل الإضافة.

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

يحتوي نموذج تطبيق Codelab هذا على مجموعات من قواعد الأمان لـ Firestore وCloud Storage لـ 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 CLI، اتبع الخطوات التالية:

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

   firebase deploy --only functions
   

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

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

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

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

1. في جهازك الطرفي، قم بتشغيل الخادم مرة أخرى:

   npm run dev
   

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

8. قم بإعداد ملحق "Chatbot with PaLM API" لتطبيق Chatbot

قم بتثبيت Chatbot بامتداد PaLM API

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

جرب Chatbot مع ملحق PaLM API

في حين أن الهدف من هذا الدرس التطبيقي حول البرمجة هو التفاعل مع Chatbot مع امتداد 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 CLI للتفاعل مع مشروع Firebase الخاص بك.

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

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

يشتمل نموذج تطبيق Codelab هذا بالفعل على جميع أكواد الاستيراد والتهيئة اللازمة لحزم 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 Hosting لهذا التطبيق . ستنفذ هذه الخطوات لاحقًا في الدرس التطبيقي حول التعليمات البرمجية.
4. انقر فوق تسجيل التطبيق .
5. تعرض وحدة التحكم مقتطف تعليمات برمجية لإضافة Firebase SDK وتهيئته باستخدام كائن تكوين Firebase خاص بالتطبيق. انسخ جميع الخصائص الموجودة في كائن تكوين Firebase.
6. في محرر التعليمات البرمجية الخاص بك، افتح ملف chatbot-start/lib/firebase/firebase-config.js .
7. استبدل قيم العنصر النائب بالقيم التي نسختها للتو. لا بأس إذا كانت لديك خصائص وقيم لخدمات Firebase لا تستخدمها في تطبيق Chatbot .
8. حفظ الملف.
9. مرة أخرى في وحدة تحكم Firebase، انقر فوق "متابعة إلى وحدة التحكم" .

قم بإعداد المحطة الطرفية الخاصة بك لتشغيل أوامر Firebase CLI ضد مشروع Firebase الخاص بك

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

   cd ../chatbot-start
   

3. اجعل Firebase CLI يقوم بتشغيل الأوامر مقابل مشروع Firebase محدد:

   firebase use YOUR_PROJECT_ID
   

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

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

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

   firebase experiments:enable webframeworks
   

2. تهيئة استضافة Firebase:

   firebase init hosting
   

3. عندما يُطلب منك اكتشاف قاعدة تعليمات برمجية Next.js Detected an existing codebase in your current directory, should we use this? ، اضغط Y.
4. عندما يُطلب منك In which region would you like to host server-side content, if applicable? ، وحدد إما المنطقة الافتراضية أو الموقع الذي حددته مسبقًا لـ Firestore وCloud Storage، ثم اضغط على 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

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

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

يحتوي نموذج تطبيق Codelab هذا على مجموعات من قواعد الأمان لـ Firestore وCloud Storage لـ 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. انقر فوق تسجيل الدخول باستخدام جوجل .
3. إذا لزم الأمر، حدد حساب Google الخاص بك.
4. بعد تسجيل الدخول، قم بإعادة تحميل الصفحة.
5. في مربع النص أدخل رسالتك ، أدخل رسالة، مثل Tell me about space .
6. انقر فوق إرسال وانتظر بضع ثوانٍ حتى يستجيب تطبيق الويب Chatbot .

فائدة أخرى لـ Chatbot مع ملحق PaLM API هي سجل المحادثات الخاص به.

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

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

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

11. قم بإعداد ملحق "تحويل النص إلى كلام" لتطبيق Video Hint

قم بتثبيت ملحق تحويل النص إلى كلام

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

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. قم بإعداد ملحق "Label Videos with Cloud Video AI" لتطبيق Video Hint

قم بتثبيت تسمية مقاطع الفيديو باستخدام ملحق Cloud Video AI

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

جرّب تسمية مقاطع الفيديو باستخدام ملحق Cloud Video AI

على الرغم من أن الهدف من هذا الدرس التطبيقي حول التعليمات البرمجية هو التفاعل مع ملحق Label Videos with 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 ، انتقل إلى التخزين السحابي .
7. حدد دلو التخزين الافتراضي الخاص بك ، والذي لاحظته سابقًا.
8. انقر فوق المجلد video_annotation_output .
   إذا كنت لا ترى مجلد video_annotation_output ، فانتظر بضع ثوانٍ وقم بتحديث الصفحة لأن API الذكاء بالفيديو قد لا يزال يعالج الفيديو.

9. لاحظ أن ملف JSON موجود يتبع اسمًا مشابهًا للملف الذي قمت بتحميله مسبقًا.
10. انقر تنزيل اسم الملف .
11. افتح ملف JSON الذي تم تنزيله في محرر الرمز الخاص بك. يحتوي على الإخراج الخام من API لذكاء الفيديو ، والذي يتضمن ملصقات مكتشفة من الفيديو الذي قمت بتحميله.

13. قم بإعداد تطبيق تلميح الفيديو لاستخدام Firebase

لتشغيل تطبيق تلميح الفيديو ، تحتاج إلى إعداد رمز التطبيق الخاص بك و Firebase CLI للتفاعل مع مشروع Firebase الخاص بك.

أضف خدمات Firebase والتكوين إلى رمز التطبيق الخاص بك

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

يتضمن تطبيق نموذج CODELAB بالفعل جميع رمز الاستيراد والتهيئة اللازم لـ SDKs (انظر 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 Hosting لخانة الاختيار هذا التطبيق . ستقوم بهذه الخطوات لاحقًا في Codelab.
4. انقر فوق تطبيق التسجيل .
5. تعرض وحدة التحكم مقتطف رمز لإضافة وتهيئة SDK Firebase مع كائن تكوين Firebase الخاص بالتطبيق. انسخ جميع الخصائص في كائن تكوين Firebase.
6. في محرر التعليمات البرمجية ، افتح ملف video-hint-start/lib/firebase/firebase-config.js .
7. استبدل قيم العنصر النائب بالقيم التي نسختها للتو. لا بأس إذا كان لديك خصائص وقيم لخدمات Firebase التي لا تستخدمها في تطبيق تلميح الفيديو .
8. حفظ الملف.
9. مرة أخرى في وحدة التحكم في Firebase ، انقر فوق "متابعة إلى وحدة التحكم" .

قم بإعداد المحطة الخاصة بك لتشغيل أوامر Firebase CLI ضد مشروع Firebase الخاص بك

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

   cd ../video-hint-start
   

3. اجعل أوامر Firebase CLI Run ضد مشروع Firebase معين:

   firebase use YOUR_PROJECT_ID
   

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

يستخدم CodeLab أطر الويب مع الاستضافة (معاينة) مع تطبيق ويب تلميح الفيديو .

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

   firebase experiments:enable webframeworks
   

2. تهيئة Firebase استضافة:

   firebase init hosting
   

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

قم بتشغيل وعرض تطبيق ويب تلميح الفيديو

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/ أو شيء مشابه.

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

استكشاف الأخطاء وإصلاحها تشغيل تطبيق الويب

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

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

2. انقر فوق حفظ وانتظر حتى تتغير الحالة من المبنى إلى تمكين .

14. أضف وظيفة إلى تطبيق تلميح الفيديو

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

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

يحتوي تطبيق عينة Codelab هذا على مجموعات من قواعد الأمان لـ Firestore والتخزين السحابي لـ 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 . هذه البيانات كافية لتحميل ملف إلى التخزين السحابي.
3. في جسم وظيفة uploadVideo ، أضف الكود التالي:

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

نشر وظائفك

لنشر وظائفك مع Firebase CLI ، اتبع هذه الخطوات:

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
   

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

لتشغيل وعرض تطبيق الويب الوظيفي الآن ، اتبع هذه الخطوات:

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

15. الاستنتاج

تهانينا! لقد حققت الكثير في هذا codelab!

تم تثبيت وتكوين ملحقات Firebase

لقد استخدمت وحدة تحكم Firebase لتكوين وتثبيت مختلف ملحقات الذكاء الاصطناعي . يعد استخدام الامتدادات مناسبًا لأنك لست بحاجة إلى كتابة الكثير من كود BoilerPlate الذي يتعامل مع المصادقة مع Google Cloud Services ، والقراءة والكتابة من Firestore والتفاعل مع خدمات Google Cloud - والمختلف الفروق الدقيقة التي تشارك في تلك المهام.

عملت مع امتدادات باستخدام وحدة تحكم Firebase

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

صمم ثلاثة تطبيقات ويب تعمل بالنيابة التي تستخدم ملحقات Firebase

مراجعة

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

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

روبوت الدردشة

في تطبيق ChatBot Web ، استخدمت chatbot مع امتداد Palm API لتزويد المستخدم بواجهة دردشة تفاعلية ، تتضمن سياقًا تاريخيًا في المحادثات - حيث يتم تخزين كل رسالة في مستند Firestore تم تحديده إلى مستخدم معين.

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

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?

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

تلميح الفيديو

في تطبيق ويب تلميح الفيديو ، استخدمت نص التحويل إلى الكلام ، ومهام اللغة مع Palm API ، ومقاطع فيديو التسمية مع ملحقات الفيديو السحابية لتشكيل خط أنابيب تمديد يؤدي إلى وصف نص وصوتي للفيديو.

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

16. التذييل: استكشاف الأخطاء وإصلاحها مع وظائف السحابة

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

السماح للوصول العام غير المصادق

إذا حصلت على أي أخطاء متعلقة بالإذن في لوحة وحدة التحكم في DevTools 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، انتقل إلى صفحة أذونات IAM ، ثم حدد مشروعك.
5. في الجدول، ابحث عن عمود الاسم .
   في صفحة IAM & Admin ، يوجد جدول للمستخدمين والأدوار. يصف عمود الاسم في الجدول الغرض من المستخدم أو المدير. قد يكون لديك حساب رئيسي باسم حساب خدمة الحوسبة الافتراضي .

إذا رأيت حساب خدمة الحوسبة الافتراضي ، فاتبع الخطوات التالية:

1. انقر تحرير المدير .

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

إذا لم تتمكن من رؤية حساب خدمة الحوسبة الافتراضي ، فاتبع الخطوات التالية:

1. انقر فوق منح الوصول .
2. في مربع نص مديري المدارس الجديدة ، أدخل compute .
3. في قائمة الاقتراحات التلقائية التي تظهر، حدد حساب خدمة الحوسبة الافتراضي .

أضف أدوارًا إلى حساب خدمة الحوسبة الافتراضية

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

1. قم بتوسيع قائمة تحديد دور .
2. في مربع نص التصفية ، أدخل Cloud Datastore User .
3. في قائمة الاقتراحات التلقائية التي تظهر، حدد مستخدم Cloud Datastore .
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 Service Agent .
6. انقر فوق حفظ .