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

دمج Firebase مع تطبيق Next.js

1- قبل البدء

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

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

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

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

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

حساب GitHub
معرفة Next.js وJavaScript

ما ستتعرّف عليه

كيفية استخدام Firebase مع "جهاز توجيه التطبيقات" في Next.js والعرض من جهة الخادم
كيفية الاحتفاظ بالصور في "مساحة التخزين في السحابة الإلكترونية" لبرنامج Firebase
كيفية قراءة البيانات وكتابتها في قاعدة بيانات Cloud Firestore.
كيفية استخدام ميزة "تسجيل الدخول باستخدام حساب Google" باستخدام حزمة تطوير البرامج (SDK) لJavaScript لمنصة Firebase

المتطلبات

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

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

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

إنشاء مستودع GitHub

يمكن العثور على مصدر الدرس التطبيقي حول الترميز على الرابط https://github.com/firebase/friendeats-web. يحتوي المستودع على نماذج مشروعات لأنظمة أساسية متعددة. مع ذلك، يستخدم هذا الدرس التطبيقي دليل nextjs-start فقط. يُرجى ملاحظة الدلائل التالية:

* `nextjs-start`: contains the starter code upon which you build.
* `nextjs-end`: contains the solution code for the finished web app.

انسخ المجلد nextjs-start إلى مستودعك الخاص:

باستخدام وحدة طرفية، أنشئ مجلدًا جديدًا على جهاز الكمبيوتر وانتقِل إلى الدليل الجديد:
```
mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
```

استخدم حزمة giget npm لجلب مجلد nextjs-start فقط:

npx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install

تتبُّع التغييرات محليًا باستخدام git:

git init

git commit -a -m "codelab starting point"

git branch -M main

أنشئ مستودعًا جديدًا على GitHub: https://github.com/new. يمكنك اختيار أي اسم تريده.
1. سيمنحك GitHub عنوان URL جديدًا للمستودع يشبه https://github.com//.git أو git@github.com:/.git. انسخ عنوان URL هذا.
ادفع التغييرات المحلية إلى مستودع GitHub الجديد. شغِّل الأمر التالي، مع استبدال العنصر النائب بعنوان URL الخاص بالمستودع.
```
git remote add origin <your-repository-url>

git push -u origin main
```
من المفترض أن يظهر لك الرمز المبدئي في مستودع GitHub.

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

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

firebase --version

إذا ظهر لك إصدار أقل أو لم يكن لديك Firebase CLI مثبّتًا، شغِّل الأمر install:

npm install -g firebase-tools@latest

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

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

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

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

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

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

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

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

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

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

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

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

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

انتقِل إلى نظرة عامة على المشروع في مشروعك على Firebase، ثم انقر على الويب.

إذا كانت لديك تطبيقات مسجّلة في مشروعك، انقر على إضافة تطبيق لعرض رمز الويب.
في مربّع النص لقب التطبيق، أدخِل لقبًا سهل التذكر للتطبيق، مثل My Next.js app.
لا تضع علامة في مربّع الاختيار إعداد ميزة "استضافة Firebase" لهذا التطبيق أيضًا.
انقر على Register app (تسجيل التطبيق) > Next (التالي) > Next (التالي) >Continue to console (المتابعة إلى وحدة التحكّم).

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

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

في وحدة تحكُّم Firebase، انتقِل إلى المصادقة.
انقر على البدء.
في عمود مزوّدو الخدمة الإضافيون، انقر على Google > تفعيل.
في مربّع النص اسم المشروع الذي يظهر بشكل علني، أدخِل اسمًا يسهل تذكّره، مثل My Next.js app.
من القائمة المنسدلة عنوان البريد الإلكتروني لفريق الدعم المعني بالمشروع، اختَر عنوان بريدك الإلكتروني.
انقر على حفظ.

إعداد Cloud Firestore

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

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

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

4. مراجعة قاعدة بيانات التطبيق الأساسي

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

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

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

المجلدات والملفات	الوصف
`src/components`	تفاعل مكونات الفلاتر والعناوين وتفاصيل المطعم والمراجعات
`src/lib`	دوال الأداة التي لا ترتبط بالضرورة بحزمة React أو Next.js
`src/lib/firebase`	الرمز البرمجي الخاص بمنصّة Firebase وإعداداتها
`public`	مواد العرض الثابتة في تطبيق الويب، مثل الرموز
`src/app`	التوجيه باستخدام "موجِّه تطبيقات 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.

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

في هذا القسم، ستقوم بإعداد واجهة خلفية لاستضافة التطبيقات لمشاهدة فرع على مستودع git.

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

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

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

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

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

في "وحدة تحكُّم Firebase"، انتقِل إلى إعدادات المشروع.
في لوحة إعداد حزمة تطوير البرامج (SDK) وضبطها، انقر على "إضافة تطبيق" وانقر على رمز أقواس الرموز لتسجيل تطبيق ويب جديد.
في نهاية عملية إنشاء تطبيق الويب، انسخ المتغيّر firebaseConfig وانسخ خصائصه وقيمه.
افتح ملف apphosting.yaml في محرِّر الرموز البرمجية، واملأ قيم متغيّرات البيئة بقيم الإعدادات من وحدة تحكّم Firebase.
في الملف، استبدِل المواقع الإلكترونية الحالية بتلك التي نسختها.
احفظ الملف.

إنشاء خلفية

انتقِل إلى صفحة استضافة التطبيق في وحدة تحكُّم Firebase:

الحالة الصفرية لمحطة تحكّم "استضافة التطبيقات"، مع زر "البدء"

انقر على "البدء" لبدء عملية إنشاء الخلفية. اضبط الخلفية كما يلي:
اتّبِع التعليمات الواردة في الخطوة الأولى لربط مستودع GitHub الذي أنشأته سابقًا.
اضبط إعدادات النشر:
1. إبقاء الدليل الجذر على القيمة /
2. اضبط الفرع المنشور على main.
3. تفعيل عمليات الطرح التلقائية
أدخِل اسمًا للخلفية friendlyeats-codelab.
في "إنشاء تطبيق ويب على Firebase أو ربطه"، اختر تطبيق الويب الذي ضبطته سابقًا من القائمة المنسدلة "اختيار تطبيق ويب Firebase حالي".
انقر على "إنهاء ونشر". بعد لحظات، سيتم نقلك إلى صفحة جديدة يمكنك من خلالها الاطلاع على حالة الواجهة الخلفية الجديدة لاستضافة التطبيق.
ملاحظة: يمكنك تتبُّع خدمات Google Cloud الأساسية لخلفية "استضافة التطبيقات" من خلال اتّباع الروابط من وحدة التحكّم. اطّلِع على مزيد من المعلومات في مقالة عرض السجلّات والمقاييس.
بعد اكتمال عملية الطرح، انقر على النطاق المجاني ضمن "النطاقات". قد يستغرق ذلك بضع دقائق لبدء العمل بسبب نشر نظام أسماء النطاقات.

لقد نشرت تطبيق الويب الأولي! في كل مرة تُرسِل فيها مشاركة جديدة إلى فرع main في مستودع GitHub، سترى بدء عملية إنشاء وطرح جديدة في وحدة تحكّم Firebase، وسيتم تعديل موقعك الإلكتروني تلقائيًا بعد اكتمال عملية الطرح.

6- إضافة طريقة مصادقة إلى تطبيق الويب

في هذا القسم، يمكنك إضافة مصادقة إلى تطبيق الويب حتى تتمكّن من تسجيل الدخول إليه.

في الملف src/lib/firebase/auth.js، استبدِل الدوال onAuthStateChanged وsignInWithGoogle وsignOut بالرمز التالي:

export function onAuthStateChanged(cb) {
	return _onAuthStateChanged(auth, cb);
}

export async function signInWithGoogle() {
  const provider = new GoogleAuthProvider();

  try {
    await signInWithPopup(auth, provider);
  } catch (error) {
    console.error("Error signing in with Google", error);
  }
}

export async function signOut() {
  try {
    return auth.signOut();
  } catch (error) {
    console.error("Error signing out with Google", error);
  }
}

يستخدم هذا الرمز واجهات برمجة تطبيقات Firebase التالية:

Firebase API	الوصف
`GoogleAuthProvider`	لإنشاء مثيل لموفِّر مصادقة Google
`signInWithPopup`	لبدء عملية مصادقة مستندة إلى مربّع الحوار
`auth.signOut`	خروج المستخدم

في ملف src/components/Header.jsx، تستدعي التعليمات البرمجية دالتَي signInWithGoogle وsignOut.

أنشئ التزامًا برسالة "إضافة مصادقة Google" وادفعها إلى مستودع جيت هب. 1- افتح صفحة "استضافة التطبيقات" في وحدة تحكُّم Firebase وانتظِر اكتمال عملية الطرح الجديدة.
في تطبيق الويب، أعِد تحميل الصفحة وانقر على تسجيل الدخول باستخدام حساب Google. لا يتم تعديل تطبيق الويب، لذا من غير الواضح ما إذا كان تسجيل الدخول قد تم بنجاح.

إرسال حالة المصادقة إلى الخادم

لتمرير حالة المصادقة إلى الخادم، سنستخدم عامل خدمة. استبدل الدالتين fetchWithFirebaseHeaders وgetAuthIdToken بالرمز التالي:

async function fetchWithFirebaseHeaders(request) {
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const installations = getInstallations(app);
  const headers = new Headers(request.headers);
  const [authIdToken, installationToken] = await Promise.all([
    getAuthIdToken(auth),
    getToken(installations),
  ]);
  headers.append("Firebase-Instance-ID-Token", installationToken);
  if (authIdToken) headers.append("Authorization", `Bearer ${authIdToken}`);
  const newRequest = new Request(request, { headers });
  return await fetch(newRequest);
}

async function getAuthIdToken(auth) {
  await auth.authStateReady();
  if (!auth.currentUser) return;
  return await getIdToken(auth.currentUser);
}

قراءة حالة المصادقة على الخادم

سنستخدم FirebaseServerApp لعرض حالة مصادقة البرنامج على الخادم.

افتح src/lib/firebase/serverApp.js، واستبدِل الدالة getAuthenticatedAppForUser:

export async function getAuthenticatedAppForUser() {
  const idToken = headers().get("Authorization")?.split("Bearer ")[1];
  console.log('firebaseConfig', JSON.stringify(firebaseConfig));
  const firebaseServerApp = initializeServerApp(
    firebaseConfig,
    idToken
      ? {
          authIdToken: idToken,
        }
      : {}
  );

  const auth = getAuth(firebaseServerApp);
  await auth.authStateReady();

  return { firebaseServerApp, currentUser: auth.currentUser };
}

للاشتراك في تغييرات المصادقة، اتبع الخطوات التالية:

انتقِل إلى ملف src/components/Header.jsx.
استبدِل الدالة useUserSession بالرمز البرمجي التالي:

function useUserSession(initialUser) {
	// The initialUser comes from the server via a server component
	const [user, setUser] = useState(initialUser);
	const router = useRouter();

	// Register the service worker that sends auth state back to server
	// The service worker is built with npm run build-service-worker
	useEffect(() => {
		if ("serviceWorker" in navigator) {
			const serializedFirebaseConfig = encodeURIComponent(JSON.stringify(firebaseConfig));
			const serviceWorkerUrl = `/auth-service-worker.js?firebaseConfig=${serializedFirebaseConfig}`
		
		  navigator.serviceWorker
			.register(serviceWorkerUrl)
			.then((registration) => console.log("scope is: ", registration.scope));
		}
	  }, []);

	useEffect(() => {
		const unsubscribe = onAuthStateChanged((authUser) => {
			setUser(authUser)
		})

		return () => unsubscribe()
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		onAuthStateChanged((authUser) => {
			if (user === undefined) return

			// refresh when user changed to ease testing
			if (user?.email !== authUser?.email) {
				router.refresh()
			}
		})
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [user])

	return user;
}

يستخدم هذا الرمز hook React state لتعديل المستخدم عندما تحدّد الدالة onAuthStateChanged حدوث تغيير في حالة المصادقة.

التحقّق من التغييرات

يعرض التنسيق الجذر في ملف src/app/layout.js العنوان ويتم تمريره في صفحة المستخدم، إذا كان ذلك متاحًا، كأداة مساعدة.

<Header initialUser={currentUser?.toJSON()} />

وهذا يعني أنّ المكوّن <Header> يعرض بيانات المستخدم، إذا كانت متاحة، أثناء وقت تشغيل الخادم. إذا حدثت أي تعديلات على المصادقة خلال دورة حياة الصفحة بعد التحميل الأولي للصفحة، سيعالجها معالج onAuthStateChanged.

حان الآن وقت طرح إصدار جديد والتحقّق من ما تم إنشاؤه.

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

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

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

إضافة مطعم واحد أو أكثر

لإدراج بيانات مطعم وهمية في قاعدة بيانات Cloud Firestore المحلية، اتبع الخطوات التالية:

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

عرض قائمة المطاعم

تحتوي قاعدة بيانات Cloud Firestore الآن على مطاعم يمكن لتطبيق الويب Next.js عرضها.

لتحديد رمز استرجاع البيانات، اتّبِع الخطوات التالية:

في الملف src/app/page.js، ابحث عن مكوّن الخادم <Home /> وراجِع الطلب إلى الدالة getRestaurants التي تسترد قائمة المطاعم وقت تشغيل الخادم. يمكنك تنفيذ الدالة getRestaurants في الخطوات التالية.
في ملف src/lib/firebase/firestore.js، استبدِل الدالتَين applyQueryFilters وgetRestaurants بالرمز البرمجي التالي:

function applyQueryFilters(q, { category, city, price, sort }) {
	if (category) {
		q = query(q, where("category", "==", category));
	}
	if (city) {
		q = query(q, where("city", "==", city));
	}
	if (price) {
		q = query(q, where("price", "==", price.length));
	}
	if (sort === "Rating" || !sort) {
		q = query(q, orderBy("avgRating", "desc"));
	} else if (sort === "Review") {
		q = query(q, orderBy("numRatings", "desc"));
	}
	return q;
}

export async function getRestaurants(db = db, filters = {}) {
	let q = query(collection(db, "restaurants"));

	q = applyQueryFilters(q, filters);
	const results = await getDocs(q);
	return results.docs.map(doc => {
		return {
			id: doc.id,
			...doc.data(),
			// Only plain objects can be passed to Client Components from Server Components
			timestamp: doc.data().timestamp.toDate(),
		};
	});
}

أنشئ التزامًا برسالة التزام "اقرأ قائمة المطاعم من Firestore" وأرسلها إلى مستودع GitHub.
افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
في تطبيق الويب، أعِد تحميل الصفحة. تظهر صور المطاعم كمربّعات على الصفحة.

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

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

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

في تطبيق الويب، افتح DevTools وأوقِف JavaScript.

إيقاف JavaScipt في "أدوات مطوري البرامج"

يُرجى إعادة تحميل تطبيق الويب، وسيستمر تحميل بيانات المطاعم. يتم عرض معلومات المطعم في استجابة الخادم. عند تفعيل JavaScript، تتم إعادة تحميل معلومات المطعم من خلال رمز JavaScript من جهة العميل.
في "أدوات مطوّري البرامج"، أعِد تفعيل JavaScript.

استمِع إلى أحدث المعلومات عن المطاعم مع مستمعي اللقطات من Cloud Firestore

في القسم السابق، اطّلعت على كيفية تحميل المجموعة الأولية من المطاعم من ملف src/app/page.js. ملف src/app/page.js هو مكوّن خادم ويتم عرضه على الخادم، بما في ذلك رمز جلب البيانات في Firebase.

ملف src/components/RestaurantListings.jsx هو مكوّن عملاء ويمكن ضبطه لإعادة ترطيب الترميز الذي يعرضه الخادم.

لضبط ملف src/components/RestaurantListings.jsx على إعادة تحميل الترميز المعروض من خلال الخادم، اتّبِع الخطوات التالية:

في ملف src/components/RestaurantListings.jsx، راقِب الرمز البرمجي التالي الذي سبق أن كتبناه نيابةً عنك:

useEffect(() => {
        const unsubscribe = getRestaurantsSnapshot(data => {
                setRestaurants(data);
        }, filters);

        return () => {
                unsubscribe();
        };
}, [filters]);

تستدعي هذه التعليمة البرمجية الدالة getRestaurantsSnapshot()، وهي مشابهة للدالة getRestaurants() التي نفّذتها في خطوة سابقة. ومع ذلك، توفّر دالة اللقطة هذه آلية استدعاء لتشغيلها كلما تم إجراء تغيير على مجموعة المطاعم.

في ملف src/lib/firebase/firestore.js، استبدِل الدالة getRestaurantsSnapshot() بالرمز البرمجي التالي:

export function getRestaurantsSnapshot(cb, filters = {}) {
	if (typeof cb !== "function") {
		console.log("Error: The callback parameter is not a function");
		return;
	}

	let q = query(collection(db, "restaurants"));
	q = applyQueryFilters(q, filters);

	const unsubscribe = onSnapshot(q, querySnapshot => {
		const results = querySnapshot.docs.map(doc => {
			return {
				id: doc.id,
				...doc.data(),
				// Only plain objects can be passed to Client Components from Server Components
				timestamp: doc.data().timestamp.toDate(),
			};
		});

		cb(results);
	});

	return unsubscribe;
}

تظهر التغييرات التي يتم إجراؤها من خلال صفحة قاعدة بيانات متجر Firestore الآن في تطبيق الويب في الوقت الفعلي.

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

8- حفظ المراجعات التي يرسلها المستخدمون من تطبيق الويب

في الملف src/lib/firebase/firestore.js، استبدِل الدالة updateWithRating() بالرمز التالي:

const updateWithRating = async (
	transaction,
	docRef,
	newRatingDocument,
	review
) => {
	const restaurant = await transaction.get(docRef);
	const data = restaurant.data();
	const newNumRatings = data?.numRatings ? data.numRatings + 1 : 1;
	const newSumRating = (data?.sumRating || 0) + Number(review.rating);
	const newAverage = newSumRating / newNumRatings;

	transaction.update(docRef, {
		numRatings: newNumRatings,
		sumRating: newSumRating,
		avgRating: newAverage,
	});

	transaction.set(newRatingDocument, {
		...review,
		timestamp: Timestamp.fromDate(new Date()),
	});
};

تُدرج هذه القيمة مستندًا جديدًا في Firestore يمثّل المراجعة الجديدة. تعدّل التعليمة البرمجية أيضًا مستند Firestore الحالي الذي يمثّل المطعم بأرقام معدَّلة لعدد التقييمات ومتوسّط التقييم المحسوب.

استبدل الدالة addReviewToRestaurant() بالرمز التالي:

export async function addReviewToRestaurant(db, restaurantId, review) {
	if (!restaurantId) {
		throw new Error("No restaurant ID has been provided.");
	}

	if (!review) {
		throw new Error("A valid review has not been provided.");
	}

	try {
		const docRef = doc(collection(db, "restaurants"), restaurantId);
		const newRatingDocument = doc(
			collection(db, `restaurants/${restaurantId}/ratings`)
		);

		// corrected line
		await runTransaction(db, transaction =>
			updateWithRating(transaction, docRef, newRatingDocument, review)
		);
	} catch (error) {
		console.error(
			"There was an error adding the rating to the restaurant",
			error
		);
		throw error;
	}
}

تنفيذ إجراء خادم Next.js

يوفِّر إجراء خادم Next.js واجهة برمجة تطبيقات مناسبة للوصول إلى بيانات النموذج، مثل data.get("text") للحصول على القيمة النصية من حمولة إرسال النموذج.

لاستخدام إجراء خادم Next.js لمعالجة إرسال نموذج المراجعة، يمكنك اتباع الخطوات التالية:

في ملف src/components/ReviewDialog.jsx، ابحث عن السمة action في العنصر <form>.

<form action={handleReviewFormSubmission}>

تشير قيمة السمة action إلى دالة يتم تنفيذها في الخطوة التالية.

في ملف src/app/actions.js، استبدِل الدالة handleReviewFormSubmission() بالرمز البرمجي التالي:

// This is a next.js server action, which is an alpha feature, so
// use with caution.
// https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
export async function handleReviewFormSubmission(data) {
        const { app } = await getAuthenticatedAppForUser();
        const db = getFirestore(app);

        await addReviewToRestaurant(db, data.get("restaurantId"), {
                text: data.get("text"),
                rating: data.get("rating"),

                // This came from a hidden form field.
                userId: data.get("userId"),
        });
}

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

لقد نفّذت ميزة إرسال المراجعات، لذا يمكنك الآن التأكّد من إدراج مراجعاتك في Cloud Firestore بشكل صحيح.

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

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

المستندات المتوفّرة في محاكي Firestore

9- حفظ الملفات التي حمّلها المستخدمون من تطبيق الويب

في هذا القسم، يمكنك إضافة وظيفة تتيح لك استبدال الصورة المرتبطة بمطعم عندما تكون مسجِّلاً الدخول. يمكنك تحميل الصورة إلى Firebase Storage، وتعديل عنوان URL للصورة في مستند Cloud Firestore الذي يمثّل المطعم.

لحفظ الملفات التي حمّلها المستخدم من تطبيق الويب، اتّبِع الخطوات التالية:

في ملف src/components/Restaurant.jsx، راقِب الرمز البرمجي الذي يتم تنفيذه عندما يحمّل المستخدم ملفًا:

async function handleRestaurantImage(target) {
        const image = target.files ? target.files[0] : null;
        if (!image) {
                return;
        }

        const imageURL = await updateRestaurantImage(id, image);
        setRestaurant({ ...restaurant, photo: imageURL });
}

لا يلزم إجراء أي تغييرات، ولكن عليك تنفيذ سلوك الدالة updateRestaurantImage() في الخطوات التالية.

في ملف src/lib/firebase/storage.js، استبدِل الدالتَين updateRestaurantImage() وuploadImage() بالرمز البرمجي التالي:

export async function updateRestaurantImage(restaurantId, image) {
	try {
		if (!restaurantId)
			throw new Error("No restaurant ID has been provided.");

		if (!image || !image.name)
			throw new Error("A valid image has not been provided.");

		const publicImageUrl = await uploadImage(restaurantId, image);
		await updateRestaurantImageReference(restaurantId, publicImageUrl);

		return publicImageUrl;
	} catch (error) {
		console.error("Error processing request:", error);
	}
}

async function uploadImage(restaurantId, image) {
	const filePath = `images/${restaurantId}/${image.name}`;
	const newImageRef = ref(storage, filePath);
	await uploadBytesResumable(newImageRef, image);

	return await getDownloadURL(newImageRef);
}

سبق أن تم تنفيذ الدالة updateRestaurantImageReference() من أجلك. تعدِّل هذه الدالة مستند مطعم حاليًا في Cloud Firestore باستخدام عنوان URL معدَّل للصورة.

التحقّق من وظيفة تحميل الصور

للتأكّد من تحميل الصورة على النحو المتوقّع، اتّبِع الخطوات التالية:

أنشئ عملية إرسال مع رسالة الإرسال "السماح للمستخدمين بتغيير صورة كل مطعم" وادفعها إلى مستودع GitHub.
افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
في تطبيق الويب، تأكَّد من تسجيل الدخول واختَر مطعمًا.
انقر على وحمِّل صورة من نظام الملفات. تغادر صورتك بيئتك المحلية ويتم تحميلها إلى Cloud Storage. تظهر الصورة فور تحميلها.
انتقِل إلى Cloud Storage لبرنامج Firebase.
انتقِل إلى المجلد الذي يمثّل المطعم. تتوفّر الصورة التي حمّلتها في المجلد.

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

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

تخزين مفتاح واجهة برمجة تطبيقات Gemini في "مدير Cloud Secret Manager"

لاستخدام Gemini API، ستحتاج إلى مفتاح واجهة برمجة التطبيقات. أنشئ مفتاحًا في Google AI Studio.
يتم دمج ميزة "استضافة التطبيقات" مع Cloud Secret Manager للسماح لك بتخزين القيم الحساسة، مثل مفاتيح واجهة برمجة التطبيقات، بأمان:
1. في نافذة Terminal، شغِّل الأمر لإنشاء مفتاح سرّي جديد:
```
firebase apphosting:secrets:set gemini-api-key
```
1. يجب نسخ مفتاح Gemini API ولصقه من Google AI Studio عندما يُطلب منك إدخال قيمة السر.
2. عندما يُطلب منك تحديد ما إذا كان يجب إضافة الرمز السري الجديد إلى apphosting.yaml، أدخِل Y للموافقة.

أصبح مفتاح Gemini API مخزّنًا بأمان في Cloud Secret Manager، ويمكنك الوصول إليه من خلال خلفية "استضافة التطبيقات".

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

في 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-pro"});

    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>;
    }
}

أنشئ عملية إرسال مع رسالة الإرسال "استخدام الذكاء الاصطناعي لتلخيص المراجعات" وادفعها إلى مستودع GitHub.
افتح صفحة استضافة التطبيق في وحدة تحكُّم Firebase وانتظِر إلى أن تكتمل عملية الطرح الجديدة.
افتح صفحة خاصة بمطعم. من المفترض أن يظهر في أعلى الصفحة ملخّص عبارة واحدة لجميع المراجعات الواردة فيها.
أضِف مراجعة جديدة وأعِد تحميل الصفحة. من المفترض أن يظهر لك التغيير في الملخّص.

11- الخاتمة

تهانينا! لقد تعرّفت على كيفية استخدام Firebase لإضافة ميزات ووظائف إلى تطبيق Next.js. ولقد استخدمت على وجه التحديد ما يلي:

استضافة التطبيقات على Firebase لإنشاء رمز Next.js ونشره تلقائيًا في كل مرة يتم فيها الدفع إلى فرع تم ضبطه
Firebase Authentication لتفعيل وظائف تسجيل الدخول وتسجيل الخروج
Cloud Firestore لبيانات المطاعم وبيانات مراجعات المطاعم.
مساحة التخزين في السحابة الإلكترونية لبرنامج Firebase لصور المطاعم