تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

النشر إلى "استضافة التطبيقات على Firebase" باستخدام تطبيق Next.js

1. قبل البدء

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

تطبيق الويب Friendly Eats

يوفّر تطبيق الويب المكتمل ميزات مفيدة توضّح كيف يمكن أن تساعدك Firebase في إنشاء تطبيقات Next.js.

إنشاء ونشر تلقائيان: يوضّح لك هذا الدرس التطبيقي كيفية استخدام Firebase App Hosting لإنشاء ونشر رمز Next.js تلقائيًا في كل مرة تنشر فيها إلى فرع تم إعداده.
تسجيل الدخول والخروج: يتيح تطبيق الويب المكتمل للمستخدمين تسجيل الدخول والخروج باستخدام حساب Google. تتم إدارة تسجيل دخول المستخدمين واستمرارهم في تسجيل الدخول بالكامل من خلال Firebase Authentication.
الصور: يتيح تطبيق الويب المكتمل للمستخدمين الذين سجّلوا الدخول تحميل صور المطاعم. يتم تخزين مواد عرض الصور في Cloud Storage for Firebase. توفّر حزمة تطوير البرامج (SDK) في JavaScript من Firebase عنوان URL عامًا للصور التي تم تحميلها. يتم بعد ذلك تخزين عنوان URL العام هذا في مستند المطعم ذي الصلة في Cloud Firestore.
الفلاتر: يتيح تطبيق الويب المكتمل للمستخدمين الذين سجّلوا الدخول فلترة قائمة المطاعم استنادًا إلى الفئة والموقع الجغرافي والسعر. يمكنك أيضًا تخصيص طريقة الترتيب المستخدَمة. يتم الوصول إلى البيانات من Cloud Firestore، ويتم تطبيق طلبات بحث Firestore استنادًا إلى الفلاتر المستخدَمة.
المراجعات: يتيح تطبيق الويب المكتمل للمستخدمين الذين سجّلوا الدخول نشر مراجعات للمطاعم تتضمّن تقييمًا بالنجوم ورسالة نصية. يتم تخزين معلومات المراجعات في Cloud Firestore.
ملخّصات المراجعات: يلخّص تطبيق الويب المكتمل المراجعات تلقائيًا باستخدام أحد نماذج Gemini. يتم تخزين الملخّصات من إنشاء الذكاء الاصطناعي في Cloud Firestore.

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

معرفة Next.js وJavaScript

أهداف الدورة التعليمية

كيفية استخدام Firebase مع "موجّه التطبيق" والعرض على جهة الخادم في Next.js
كيفية تفويض طلبات إلى Gemini API باستخدام أسرار من جهة الخادم فقط

المتطلبات

متصفّح من اختيارك، مثل Google Chrome
الوصول إلى IDX.dev (مساحة عمل مستندة إلى الويب)
حساب Google لإنشاء مشروعك على Firebase وإدارته
ملاحظة: للوصول إلى أرصدة Cloud لهذا الدرس العملي، عليك استخدام حساب @gmail.com وليس حساب طالب أو حساب شركة.
حساب على GitHub (ليس بالضرورة أن يكون حساب البريد الإلكتروني نفسه المذكور أعلاه)

2. إعداد بيئة التطوير ومستودع GitHub

يوفّر هذا الدرس التطبيقي حول الترميز قاعدة الرموز البرمجية الأولية للتطبيق ويعتمد على واجهة سطر الأوامر (CLI) في Firebase وIDX.dev.

إنشاء مستودع GitHub جديد واستيراده إلى IDX

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

أنشئ مستودع GitHub جديدًا لهذا الدرس التطبيقي العملي: https://github.com/new. يمكنك اختيار أي اسم تريده، مثل MyFriendlyEatsCodelab.
انسخ عنوان URL الجديد للمستودع. سيبدو على النحو التالي:
https://github.com/USER_NAME/REPOSITORY_NAME.git
انتقِل إلى https://idx.google.com وسجِّل الدخول.
انقر على استيراد مستودع والصِق عنوان URL المنسوخ من GitHub.
سيطلب منك IDX الربط بحساب GitHub، ثم سيستنسخ المستودع (الفارغ).

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

يمكنك الاطّلاع على مصدر الدرس التطبيقي حول الترميز على https://github.com/firebase/friendlyeats-web. يحتوي مستودع friendlyeats-web على نماذج مشاريع لمنصات متعددة.

يركّز هذا الدرس العملي الذي تعمل عليه على خدمة Firebase App Hosting وGemini API فقط، وهو نسخة مختصرة من الدرس العملي الكامل "دمج Firebase مع تطبيق Next.js". يتطلّب هذا الدرس البرمجي القصير العمل فقط مع رمز المصدر في فرع #io-connect من مستودع friendlyeats-web، وتحديدًا دليل nextjs-step10.

يُرجى ملاحظة الدلائل الإضافية التالية في مستودع friendlyeats-web. على الرغم من أنّك لست بحاجة إلى هذه الدلائل في هذا الدرس العملي، من المفيد معرفة ماهيتها.

‫nextjs-start: يحتوي على رمز البداية لبرنامج التدريب العملي الكامل "دمج Firebase مع تطبيق Next.js".
‫nextjs-end: يحتوي على رمز الحلّ لتطبيق الويب المكتمل.

نسخ مصدر الدرس التطبيقي العملي إلى المستودع الجديد

في ما يلي كيفية نسخ دليل nextjs-step10 إلى المستودع الخاص بك:

في IDX، افتح الوحدة الطرفية باستخدام القائمة > الوحدة الطرفية > وحدة طرفية جديدة.
استخدِم حزمة npm giget لجلب الدليل nextjs-step10 فقط من الفرع io-connect:
```
npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
```
تتبُّع التغييرات محليًا باستخدام git:
```
git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main
```
ملاحظة: يمكنك أيضًا استخدام علامة التبويب "التحكّم في المصدر" في الشريط الجانبي لـ IDX لتنفيذ عملية الإرسال إلى GitHub.

من المفترض أن يظهر الرمز الأولي الآن في مستودعك على GitHub.

3- مراجعة قاعدة الرموز البرمجية الأولية

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

بنية المجلدات والملفات

يحتوي الجدول التالي على نظرة عامة على بنية المجلدات والملفات في التطبيق:

المجلدات والملفات	الوصف
`src/components`	مكوّنات React للفلاتر والعناوين وتفاصيل المطاعم والمراجعات
`src/lib`	الدوال المساعدة التي لا تكون مرتبطة بالضرورة بـ React أو Next.js
`src/lib/firebase`	رمز Firebase وإعدادات Firebase
`public`	مواد العرض الثابتة في تطبيق الويب، مثل الرموز
`src/app`	التوجيه باستخدام App Router في Next.js
`src/app/restaurant`	معالج مسار واجهة برمجة التطبيقات
`package.json` و`package-lock.json`	تبعيات المشروع باستخدام npm
`next.config.js`	إعدادات خاصة بمنصة Next.js (يجب أن تكون "إجراءات الخادم" مفعّلة)
`jsconfig.json`	إعدادات خدمة لغة JavaScript

مكوّنات الخادم والعميل

التطبيق هو تطبيق ويب Next.js يستخدم App Router. يتم استخدام العرض على جهة الخادم في جميع أنحاء التطبيق. على سبيل المثال، ملف src/app/page.js هو مكوّن خادم مسؤول عن الصفحة الرئيسية. الملف src/components/RestaurantListings.jsx هو أحد مكونات العميل ويتم تحديده بواسطة التوجيه "use client" في بداية الملف.

عبارات الاستيراد

في بعض الملفات، قد تلاحظ عبارات استيراد مثل ما يلي:

import RatingPicker from "@/src/components/RatingPicker.jsx";

يستخدم التطبيق الرمز @ لتجنُّب مسارات الاستيراد النسبية المعقّدة، ويتم ذلك من خلال أسماء المسارات المستعارة.

واجهات برمجة التطبيقات الخاصة بمنصة Firebase

يتم تضمين جميع رموز Firebase API في الدليل src/lib/firebase. بعد ذلك، تستورد مكوّنات React الفردية الدوال المغلفة من الدليل src/lib/firebase، بدلاً من استيراد دوال Firebase مباشرةً.

بيانات تجريبية

يحتوي الملف src/lib/randomData.js على بيانات وهمية خاصة بالمطاعم والمراجعات. يتم تجميع البيانات من هذا الملف في الرمز البرمجي في الملف src/lib/fakeRestaurants.js.

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

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

إنشاء مشروع Firebase

سجِّل الدخول إلى وحدة تحكّم Firebase باستخدام حساب Google نفسه الذي استخدمته في الخطوة السابقة.
انقر على الزر لإنشاء مشروع جديد، ثم أدخِل اسم المشروع (على سبيل المثال، FriendlyEats Codelab).
يُستخدَم اسم المشروع هذا كاسم معروض في واجهات Firebase، وتنشئ Firebase تلقائيًا رقم تعريف مشروع فريدًا استنادًا إلى اسم المشروع هذا. يُرجى العِلم أنّه يمكنك اختياريًا النقر على رمز تعديل الآن لضبط رقم تعريف المشروع المفضّل، ولكن لا يمكنك تغيير رقم التعريف هذا بعد إنشاء المشروع.

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

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

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

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

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

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

5- إنشاء خلفية لاستضافة التطبيقات

في هذا القسم، ستُعدّ خادمًا خلفيًا لخدمة App Hosting لمراقبة فرع في مستودع git. ستضبط أيضًا جميع الخدمات التي سيتواصل معها الخلفية.

في نهاية هذا القسم، سيكون لديك خلفية App Hosting مرتبطة بمستودعك في GitHub، وسيتم تلقائيًا إعادة إنشاء إصدار جديد من تطبيقك وطرحه كلما أرسلت عملية تثبيت جديدة إلى فرع main.

إنشاء خادم خلفي

في وحدة تحكّم Firebase، انتقِل إلى صفحة App Hosting:
انقر على البدء لبدء عملية إنشاء الخلفية.
اتّبِع التعليمات لاستيراد مستودع GitHub الذي أنشأته سابقًا وربطه.
اضبط إعدادات النشر:
- الاحتفاظ بالدليل الجذر على النحو /
- ضبط الفرع المباشر على main
- تفعيل عمليات الطرح التلقائي
أدخِل اسمًا لخادمك الخلفي friendlyeats-codelab (أو اسمًا من اختيارك). يصبح هذا الجزء من النطاق المستخدَم للوصول إلى الخلفية.
تؤدي سير العمل هذه أيضًا إلى إنشاء تطبيق ويب على Firebase تلقائيًا في مشروعك على Firebase. في وقت لاحق من هذا الدرس العملي، ستستخدم قيم الإعدادات لتطبيق الويب هذا من أجل ربط قاعدة الرموز بمشروعك على Firebase.
انقر على إنهاء ونشر. بعد لحظات، سيتم نقلك إلى صفحة جديدة يمكنك فيها الاطّلاع على حالة الخلفية الجديدة لخدمة "استضافة التطبيقات".
ملاحظة: يمكنك مراقبة خدمات Google Cloud الأساسية لخادم App Hosting الخلفي من خلال اتّباع الروابط من وحدة التحكّم. يمكنك الاطّلاع على مزيد من المعلومات في عرض السجلات والمقاييس.
من لوحة بيانات App Hosting، انسخ نطاقك الجديد.
سيكون له نمط مثل BACKEND_ID--PROJECT_ID.REGION.hosted.app. ستحتاج إلى هذا النطاق لإعداد Firebase Authentication لاحقًا.

قد يستغرق بدء عمل النطاق بضع دقائق بسبب نشر نظام أسماء النطاقات وإنشاء شهادة SSL. أثناء إنشاء الخلفية، واصِل إعداد بقية مشروع Firebase وضبط الخلفية (الخطوات التالية من هذا الدرس العملي).

في كل مرة ترسل فيها عملية تثبيت جديدة إلى فرع main في مستودع GitHub، سيظهر لك إصدار جديد ويبدأ طرحه في وحدة تحكّم Firebase، وسيتم تعديل موقعك الإلكتروني تلقائيًا بعد اكتمال عملية الطرح.

6. إعداد خدمات Firebase الأخرى

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

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

في وحدة تحكّم Firebase، انتقِل إلى المصادقة.
انقر على البدء.
في عمود موفّرو الهوية الإضافيون، انقر على Google > تفعيل.
1. في مربّع النص الاسم المعروض للجمهور للمشروع، أدخِل اسمًا، مثل My FriendlyEatsCodelab app.
2. من القائمة المنسدلة عنوان البريد الإلكتروني المخصّص للدعم في المشروع، اختَر عنوان بريدك الإلكتروني.
3. انقر على حفظ.
انقر على علامة التبويب الإعدادات في صفحة المصادقة.
1. انقر على النطاقات المعتمَدة من القائمة على يمين الشاشة.
2. انقر على إضافة نطاق، ثم أضِف نطاق استضافة التطبيقات الذي أنشأته حديثًا (ينتهي بـ .hosted.app).
3. انقر على إضافة لحفظ التغييرات.

إعداد Cloud Firestore

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

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

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

7. إعداد تطبيق الويب

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

تسجيل الدخول إلى Firebase CLI من داخل IDX

تم تثبيت Node.js وواجهة سطر الأوامر (CLI) في IDX مسبقًا، لذا يمكنك تخطّي عملية التثبيت والبدء في إعداد واجهة سطر الأوامر.

في الوحدة الطرفية ضمن IDX، نفِّذ الأوامر التالية لإعداد واجهة سطر الأوامر لاستخدام مشروع Firebase الذي أنشأته سابقًا:
```
firebase login --no-localhost
firebase use --add
```
عندما يُطلب منك إدخال اسم مستعار، أدخِل codelab.
استنادًا إلى ما إذا كنت تريد أن يجمع Firebase البيانات، أدخِل Y أو N. يمكنك استخدام أي من الخيارين في هذا الدرس العملي.
في المتصفّح، اختَر حسابك على Google، ثم انقر على السماح.

نشر قواعد الأمان والفهارس

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

يمكنك أيضًا استخدام واجهة سطر الأوامر لنشر مجموعة من الفهارس في Firestore (في firestore.indexes.json) لتفعيل طلبات البحث المتقدّمة.

في الوحدة الطرفية ضمن IDX، شغِّل الأمر التالي لنشر قواعد الأمان والفهارس هذه:
```
firebase deploy --only firestore,storage
```
إذا طُرح عليك السؤال: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"، اضغط على Enter لاختيار نعم.

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

في وحدة تحكّم Firebase، اتّبِع الخطوات التالية:
1. انتقِل إلى إعدادات المشروع.
2. انتقِل للأسفل إلى قسم تطبيقاتك، ثم اختَر التطبيق الذي يحمل الاسم نفسه الذي يحمله الخلفية في App Hosting.
3. ضمن إعداد حزمة SDK وإعداداتها، اختَر الخيار الإعداد، ثم انسخ خصائص المتغيّر firebaseConfig وقيمها.
في IDX، اتّبِع الخطوات التالية:
1. افتح ملف apphosting.yaml. هذا هو المكان الذي يمكنك فيه إعداد متغيرات البيئة على "استضافة التطبيقات"، بالإضافة إلى الأسرار وإعدادات وقت التشغيل.
  ملاحظة: بالإضافة إلى استخدام apphosting.yaml، يمكنك أيضًا إدارة متغيرات البيئة لتطبيقات Next.js باستخدام .env.
  
  مزيد من المعلومات
2. املأ قيم متغيرات البيئة المقدَّمة بقيم الإعداد التي نسختها من وحدة تحكّم Firebase.على سبيل المثال (استبدِلها بقيمك الخاصة):
```
runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
```
3. احفظ الملف. بعد ذلك، في الوحدة الطرفية ضمن IDX، شغِّل الأوامر التالية لنقل التغييرات إلى GitHub:
```
git commit -a -m "Setup Firebase Config"

git push
```
ارجع إلى "وحدة تحكّم Firebase"، وانتقِل مجددًا إلى صفحة "استضافة التطبيق"، ثمّ اتّبِع الخطوات التالية:
1. انقر على عرض لوحة البيانات للخادم الخلفي.
2. لاحظ أنّه تم إنشاء إصدار جديد من خلال عملية git push. من المفترض أن يستغرق إنشاء هذا التطبيق وطرحه على Cloud Run حوالي 3 دقائق. يمكنك تتبُّع مستوى تقدُّمها من خلال النقر على شريحة build-ID.
3. أعِد تحميل صفحة وحدة التحكّم لمعرفة ما إذا اكتمل طرح الإصدار. بعد اكتمال العملية، انقر على رابط نطاقك (الذي ينتهي بـ .hosted.app) ضمن النطاقات لفتحه وعرض التطبيق الذي تم نشره حديثًا.

تهانينا، لقد نشرت تطبيق الويب الأولي. لنتعمّق في الأمر أكثر.

8. تجربة تطبيق الويب في متصفّح

في المتصفّح، أعِد تحميل الصفحة التي تعرض تطبيق الويب.
انقر على تسجيل الدخول باستخدام حساب Google.
سجِّل الخروج ثم سجِّل الدخول مرة أخرى. يتم تعديل الصفحة في الوقت الفعلي بدون إعادة تحميلها. يمكنك تكرار هذه الخطوة مع مستخدمين مختلفين.
اختياري: في المتصفّح، أعِد تحميل تطبيق الويب. انقر بزر الماوس الأيمن على تطبيق الويب، واختَر عرض مصدر الصفحة، وابحث عن الاسم المعروض. يظهر في مصدر HTML الأولي الذي يعرضه الخادم.

عرض معلومات المطعم

يتضمّن تطبيق الويب بيانات تجريبية للمطاعم والمراجعات.

لإدراج بيانات مطاعم وهمية في قاعدة بيانات Cloud Firestore، انقر على > إضافة مطاعم نموذجية.

التأكّد من تحميل بيانات المطاعم في وقت تشغيل الخادم

باستخدام إطار عمل Next.js، قد لا يكون من الواضح متى يتم تحميل البيانات في وقت تشغيل الخادم أو وقت تشغيل العميل.

للتأكّد من تحميل بيانات المطاعم في وقت تشغيل الخادم، اتّبِع الخطوات التالية:

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

إضافة مراجعات لمطعم

لإضافة مراجعة والتأكّد من إدراجها في Cloud Firestore، اتّبِع الخطوات التالية:

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

9. تلخيص مراجعات المطاعم باستخدام الذكاء الاصطناعي التوليدي

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

تخزين مفتاح Gemini API في Cloud Secret Manager

تتكامل خدمة App Hosting مع Cloud Secret Manager لتتيح لك تخزين القيم الحسّاسة، مثل مفاتيح واجهة برمجة التطبيقات، بأمان.

لاستخدام Gemini API، ستحتاج إلى مفتاح واجهة برمجة التطبيقات. أنشئ مفتاحًا في Google AI Studio.
عندما يُطلب منك ذلك، اختَر المشروع نفسه الذي كنت تستخدمه في هذا الدرس العملي (في الخلفية، مشروع Firebase هو مشروع Google Cloud).
في الوحدة الطرفية ضمن IDX، شغِّل الأمر التالي لإنشاء سر جديد:
```
firebase apphosting:secrets:set gemini-api-key
```
عندما يُطلب منك إدخال القيمة السرية، انسخ مفتاح Gemini API والصِقه من Google AI Studio.
إذا طُرح عليك السؤال: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?"، اضغط على Enter لاختيار نعم.
عندما يُطلب منك تحديد ما إذا كان يجب إضافة السر الجديد إلى apphosting.yaml، أدخِل Y للموافقة، ثم اضغط على Enter لاختيار GEMINI_API_KEY كاسم لمتغيّر البيئة.

يتم الآن تخزين مفتاح Gemini API بشكل آمن في Cloud Secret Manager، ويمكن الوصول إليه من خلفية App Hosting. يمكنك أيضًا عرض القيمة في لوحة بيانات Secrets Manager في "وحدة تحكّم Google Cloud".

افتح الملف apphosting.yaml ولاحظ أنّه تم تسجيل اسم سرّك، ولكن ليس قيمه.يجب أن يبدو على النحو التالي:

runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

تنفيذ مكوّن ملخّص المراجعات

في IDX، افتح src/components/Reviews/ReviewSummary.jsx.

استبدِل الدالة GeminiSummary بالرمز التالي:

export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}

في الوحدة الطرفية ضمن IDX، شغِّل الأوامر التالية لإنشاء عملية إيداع ونقلها إلى مستودع GitHub.
```
git commit -a -m "Use AI to summarize reviews"

git push
```
في وحدة تحكّم Firebase، افتح صفحة App Hosting وانتظِر إلى أن يكتمل طرح الإصدار الجديد.
في المتصفّح، انقر على بطاقة مطعم. في أعلى الشاشة، من المفترض أن يظهر لك ملخّص من جملة واحدة لجميع المراجعات الخاصة بالمطعم.
أضِف مراجعة جديدة وأعِد تحميل الصفحة. من المفترض أن يظهر لك التغيير في الملخّص.

10. الخاتمة

تهانينا! تعرّفت على كيفية استخدام خدمة "استضافة التطبيقات" من Firebase لنشر تطبيق Next.js واستخدام Gemini API لتلخيص النصوص. على وجه التحديد، استخدمت ما يلي:

Firebase App Hosting لإنشاء رمز Next.js ونشره تلقائيًا في كل مرة يتم فيها إرسال الرمز إلى فرع GitHub تم إعداده
Cloud Secret Manager (المتكامل مع App Hosting) لتخزين مفتاح Gemini API بشكل آمن حتى تتمكّن من إنشاء ميزات الذكاء الاصطناعي التوليدي في تطبيقك

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

يمكنك الاطّلاع على الدرس التطبيقي الكامل حول الترميز "دمج Firebase مع تطبيق Next.js" للتعرّف على كيفية إضافة Firebase Authentication وCloud Firestore وCloud Storage for Firebase إلى هذا التطبيق.

يمكنك أيضًا الاطّلاع على المزيد من الدروس التطبيقية حول الترميز: