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

تعرف على Firebase للويب

1. نظرة عامة

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

لقطة شاشة لهذه الخطوة

ماذا ستتعلم

قم بمصادقة المستخدمين باستخدام مصادقة Firebase و FirebaseUI.
مزامنة البيانات باستخدام Cloud Firestore.
اكتب قواعد أمان Firebase لتأمين قاعدة بيانات.

ماذا ستحتاج

متصفح من اختيارك ، مثل Chrome.
الوصول إلى stackblitz.com (لا حاجة إلى حساب أو تسجيل الدخول).
حساب Google ، مثل حساب gmail. نوصي باستخدام حساب البريد الإلكتروني الذي تستخدمه بالفعل لحساب GitHub الخاص بك. يتيح لك هذا استخدام الميزات المتقدمة في StackBlitz.
نموذج التعليمات البرمجية لمعمل الرموز. انظر الخطوة التالية لمعرفة كيفية الحصول على الرمز.

2. احصل على كود البداية

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

يتيح لك StackBlitz مشاركة المشاريع مع الآخرين. يمكن للأشخاص الآخرين الذين لديهم عنوان URL لمشروع StackBlitz الخاص بك رؤية التعليمات البرمجية الخاصة بك وتقسيم مشروعك ، لكن لا يمكنهم تعديل مشروع StackBlitz الخاص بك.

انتقل إلى عنوان URL هذا للحصول على رمز البداية: https://stackblitz.com/edit/firebase-gtk-web-start
في الجزء العلوي من صفحة StackBlitz ، انقر فوق Fork :

لقطة شاشة لهذه الخطوة

لديك الآن نسخة من كود البداية كمشروع StackBlitz الخاص بك ، والذي له اسم فريد ، إلى جانب عنوان URL فريد. يتم حفظ جميع ملفاتك وتغييراتك في مشروع StackBlitz هذا.

3. تعديل معلومات الحدث

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

للبدء ، دعنا نتعرف أكثر على واجهة StackBlitz.

في StackBlitz ، افتح ملف index.html .
حدد موقع event-details-container و description-container ، ثم حاول تعديل بعض تفاصيل الحدث.

أثناء قيامك بتحرير النص ، تعرض إعادة التحميل التلقائي للصفحة في StackBlitz تفاصيل الحدث الجديد. رائع ، أجل؟

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

يجب أن تبدو معاينة التطبيق كما يلي:

معاينة التطبيق

لقطة شاشة لهذه الخطوة

4. إنشاء مشروع Firebase وإعداده

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

أنشئ مشروع Firebase

سجّل الدخول إلى Firebase .
في وحدة تحكم Firebase ، انقر على إضافة مشروع (أو إنشاء مشروع ) ، ثم قم بتسمية مشروع Firebase Firebase-Web-Codelab .
انقر من خلال خيارات إنشاء المشروع. اقبل شروط Firebase إذا طُلب منك ذلك. في شاشة Google Analytics ، انقر فوق "عدم التمكين" ، لأنك لن تستخدم Analytics لهذا التطبيق.

لمعرفة المزيد حول مشاريع Firebase ، راجع فهم مشاريع Firebase .

قم بتمكين وإعداد منتجات Firebase في وحدة التحكم

يستخدم التطبيق الذي تنشئه العديد من منتجات Firebase المتوفرة لتطبيقات الويب:

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

تحتاج بعض هذه المنتجات إلى تكوين خاص أو تحتاج إلى التمكين باستخدام وحدة تحكم Firebase.

للسماح للمستخدمين بتسجيل الدخول إلى تطبيق الويب ، ستستخدم طريقة تسجيل الدخول إلى البريد الإلكتروني / كلمة المرور لمختبر الرموز هذا:

في اللوحة اليمنى لوحدة تحكم Firebase ، انقر على إنشاء > المصادقة . ثم انقر فوق البدء . أنت الآن في لوحة معلومات المصادقة ، حيث يمكنك رؤية المستخدمين المسجلين وتهيئة موفري تسجيل الدخول وإدارة الإعدادات.
حدد علامة التبويب طريقة تسجيل الدخول (أو انقر هنا للانتقال مباشرة إلى علامة التبويب).
انقر فوق البريد الإلكتروني / كلمة المرور من خيارات الموفر ، وقم بتبديل المفتاح إلى تمكين ، ثم انقر فوق حفظ .

قم بإعداد Cloud Firestore

يستخدم تطبيق الويب Cloud Firestore لحفظ رسائل الدردشة وتلقي رسائل الدردشة الجديدة.

إليك كيفية إعداد Cloud Firestore:

في اللوحة الموجودة على الجانب الأيسر من وحدة تحكم Firebase ، انقر فوق إنشاء > قاعدة بيانات Firestore . ثم انقر فوق إنشاء قاعدة بيانات .
انقر فوق إنشاء قاعدة بيانات .
حدد خيار البدء في وضع الاختبار . اقرأ إخلاء المسؤولية حول قواعد الأمان. يضمن وضع الاختبار أنه يمكنك الكتابة بحرية إلى قاعدة البيانات أثناء التطوير. انقر فوق التالي .

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

5. قم بإضافة وتهيئة Firebase

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

أضف مكتبات Firebase

لكي يستخدم تطبيقك Firebase ، تحتاج إلى إضافة مكتبات Firebase إلى التطبيق. هناك طرق متعددة للقيام بذلك ، كما هو موضح في وثائق Firebase . على سبيل المثال ، يمكنك إضافة المكتبات من شبكة CDN الخاصة بـ Google ، أو يمكنك تثبيتها محليًا باستخدام npm ثم حزمها في تطبيقك إذا كنت تستخدم Browserify.

يوفر StackBlitz تجميعًا تلقائيًا ، بحيث يمكنك إضافة مكتبات Firebase باستخدام عبارات الاستيراد. ستستخدم الإصدارات المعيارية (الإصدار 9) من المكتبات ، والتي تساعد في تقليل الحجم الكلي لصفحة الويب من خلال عملية تسمى "اهتزاز الشجرة". يمكنك معرفة المزيد حول مجموعات SDK المعيارية في المستندات .

لإنشاء هذا التطبيق ، يمكنك استخدام مكتبات Firebase Authentication و FirebaseUI و Cloud Firestore. بالنسبة إلى مختبر الشفرات هذا ، تم تضمين عبارات الاستيراد التالية بالفعل في الجزء العلوي من ملف index.js ، وسنقوم باستيراد المزيد من الأساليب من كل مكتبة من مكتبات Firebase أثناء انتقالنا:

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

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

مرة أخرى في وحدة تحكم Firebase ، انتقل إلى صفحة نظرة عامة على مشروعك بالنقر فوق نظرة عامة على المشروع في الجزء العلوي الأيمن.
في وسط صفحة النظرة العامة على مشروعك ، انقر فوق أيقونة الويب لإنشاء تطبيق ويب Firebase جديد.
قم بتسجيل التطبيق باستخدام لقب Web App .
بالنسبة إلى مختبر الرموز هذا ، لا تحدد المربع بجوار إعداد Firebase Hosting لهذا التطبيق أيضًا . ستستخدم جزء معاينة StackBlitz في الوقت الحالي.
انقر فوق تسجيل التطبيق .
يدير Stackblitz تبعياتك نيابةً عنك ، لذا يمكنك تخطي خطوة npm install firebase المعروضة في وحدة التحكم.
انسخ كائن تكوين Firebase إلى الحافظة الخاصة بك.
انقر فوق "متابعة" للتحكم ، وأضف كائن تكوين Firebase إلى تطبيقك:
مرة أخرى في StackBlitz ، انتقل إلى ملف index.js .
حدد موقع Add Firebase project configuration object here سطر التعليق ، ثم الصق مقتطف التكوين الخاص بك أسفل التعليق مباشرة.

أضف استدعاء وظيفة initializeApp لإعداد Firebase باستخدام تكوين مشروع Firebase الفريد.

// ...
// Add Firebase project configuration object here
const firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. إضافة تسجيل دخول المستخدم (RSVP)

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

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

يتطلب FirebaseUI تكوينًا (راجع الخيارات في الوثائق ) يقوم بأمرين:

يخبر FirebaseUI أنك تريد استخدام طريقة تسجيل الدخول إلى البريد الإلكتروني / كلمة المرور .
يعالج رد الاتصال من أجل تسجيل دخول ناجح ويعيد القيمة false لتجنب إعادة التوجيه. لا تريد تحديث الصفحة لأنك تقوم بإنشاء تطبيق ويب من صفحة واحدة.

أضف الرمز لتهيئة FirebaseUI Auth

في StackBlitz ، انتقل إلى ملف index.js .

في الجزء العلوي ، حدد موقع بيان استيراد firebase/auth ، ثم أضف getAuth و EmailAuthProvider ، مثل:

// ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';

احفظ مرجعًا إلى كائن المصادقة مباشرةً بعد initializeApp ، مثل:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
لاحظ أنه تم توفير تكوين FirebaseUI بالفعل في كود البداية. تم الإعداد بالفعل لاستخدام موفر مصادقة البريد الإلكتروني.

في الجزء السفلي من الدالة main() في index.js ، أضف عبارة تهيئة FirebaseUI ، مثل:

async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

أضف زر RSVP إلى HTML

في StackBlitz ، انتقل إلى ملف index.html .
أضف HTML لزر RSVP داخل event-details-container كما هو موضح في المثال أدناه.

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

لاحظ أنه في ملف index.html ، توجد حاوية بالمعرف firebaseui-auth-container . هذا هو المعرف الذي ستمرره إلى FirebaseUI للاحتفاظ بتسجيل الدخول الخاص بك. معاينة التطبيق
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
قم بإعداد مستمع على زر RSVP واستدعاء وظيفة بدء FirebaseUI. يخبر هذا FirebaseUI أنك تريد رؤية نافذة تسجيل الدخول.

أضف التعليمات البرمجية التالية إلى أسفل الدالة main() في index.js :
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

اختبار تسجيل الدخول إلى التطبيق

في نافذة معاينة StackBlitz ، انقر فوق الزر RSVP لتسجيل الدخول إلى التطبيق.
- بالنسبة إلى مختبر الرموز هذا ، يمكنك استخدام أي عنوان بريد إلكتروني ، حتى عنوان بريد إلكتروني مزيف ، نظرًا لأنك لا تقوم بإعداد خطوة للتحقق من البريد الإلكتروني لمعمل الرموز هذا.
- إذا رأيت رسالة خطأ تفيد بأن auth/operation-not-allowed أو The given sign-in provider is disabled for this Firebase project ، فتحقق للتأكد من أنك قمت بتمكين البريد الإلكتروني / كلمة المرور كموفر تسجيل دخول في وحدة تحكم Firebase.
معاينة التطبيق
انتقل إلى لوحة معلومات المصادقة في وحدة تحكم Firebase. في علامة التبويب المستخدمون ، من المفترض أن ترى معلومات الحساب التي أدخلتها لتسجيل الدخول إلى التطبيق.

أضف حالة المصادقة إلى واجهة المستخدم

بعد ذلك ، تأكد من أن واجهة المستخدم تعكس حقيقة أنك قمت بتسجيل الدخول.

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

في StackBlitz ، انتقل إلى ملف index.js .

في الجزء العلوي ، حدد موقع بيان استيراد firebase/auth ، ثم أضف signOut و onAuthStateChanged ، مثل:

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

أضف التعليمات البرمجية التالية في الجزء السفلي من الدالة main() :

async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();

في مستمع الأزرار ، تحقق مما إذا كان هناك مستخدم حالي وقم بتسجيل الخروج. للقيام بذلك ، استبدل startRsvpButton.addEventListener الحالي بما يلي:

// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener('click', () => {
  if (auth.currentUser) {
    // User is signed in; allows user to sign out
    signOut(auth);
  } else {
    // No user is signed in; allows user to sign in
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});

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

معاينة التطبيق

لقطة شاشة لهذه الخطوة

7. اكتب رسائل إلى Cloud Firestore

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

لتخزين رسائل الدردشة التي يكتبها المستخدمون في التطبيق ، ستستخدم Cloud Firestore .

نموذج البيانات

Cloud Firestore هي قاعدة بيانات NoSQL ، ويتم تقسيم البيانات المخزنة في قاعدة البيانات إلى مجموعات ومستندات وحقول ومجموعات فرعية. سوف تخزن كل رسالة من الدردشة كمستند في مجموعة المستوى الأعلى تسمى guestbook .

رسم نموذج بيانات Firestore يظهر مجموعة دفتر الزوار مع مستندات رسائل متعددة

أضف رسائل إلى Firestore

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

لإضافة عناصر واجهة المستخدم لحقل الرسالة وزر الإرسال:

في StackBlitz ، انتقل إلى ملف index.html .

حدد guestbook-container ، ثم أضف HTML التالي لإنشاء نموذج مع حقل إدخال الرسالة وزر الإرسال.

<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

معاينة التطبيق

لقطة شاشة لهذه الخطوة

يقوم المستخدم بالنقر فوق الزر "إرسال" بتشغيل مقتطف الشفرة أدناه. يضيف محتويات حقل إدخال الرسالة إلى مجموعة guestbook لقاعدة البيانات. على وجه التحديد ، تضيف طريقة addDoc محتوى الرسالة إلى مستند جديد (بمعرف تم إنشاؤه تلقائيًا) إلى مجموعة guestbook .

في StackBlitz ، انتقل إلى ملف index.js .

في الجزء العلوي ، حدد موقع بيان استيراد firebase/firestore ، ثم أضف getFirestore و addDoc و collection ، مثل:

// ...

// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {
  getFirestore,
  addDoc,
  collection
} from 'firebase/firestore';

سنقوم الآن بحفظ مرجع إلى كائن Firestore db بعد initializeApp مباشرة:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

في الجزء السفلي من الدالة main() ، أضف الكود التالي.

لاحظ أن auth.currentUser.uid هو مرجع إلى المعرف الفريد الذي يتم إنشاؤه تلقائيًا والذي توفره مصادقة Firebase لجميع المستخدمين المسجلين.

async function main() {
  // ...

  // Listen to the form submission
  form.addEventListener('submit', async e => {
    // Prevent the default form redirect
    e.preventDefault();
    // Write a new message to the database collection "guestbook"
    addDoc(collection(db, 'guestbook'), {
      text: input.value,
      timestamp: Date.now(),
      name: auth.currentUser.displayName,
      userId: auth.currentUser.uid
    });
    // clear message input field
    input.value = '';
    // Return false to avoid redirect
    return false;
  });
}
main();

عرض سجل الزوار فقط للمستخدمين الذين قاموا بتسجيل الدخول

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

في StackBlitz ، انتقل إلى ملف index.js .

قم بتحرير مستمع onAuthStateChanged لإخفاء وإظهار سجل الزوار.

// ...

// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
  }
});

اختبار إرسال الرسائل

تأكد من تسجيل الدخول إلى التطبيق.
أدخل رسالة مثل "مرحبًا!" ، ثم انقر فوق إرسال .

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

ولكن يمكنك رؤية الرسالة المضافة حديثًا في وحدة تحكم Firebase.

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

وحدة تحكم Firebase

لقطة شاشة لهذه الخطوة

8. اقرأ الرسائل

مزامنة الرسائل

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

لعرض الرسائل ، ستحتاج إلى إضافة مستمعين يتم تشغيلهم عند تغيير البيانات ، ثم إنشاء عنصر واجهة مستخدم يعرض رسائل جديدة.

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

في StackBlitz ، انتقل إلى ملف index.html .

في guestbook-container ، أضف قسمًا جديدًا بمعرف سجل guestbook .

<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

بعد ذلك ، قم بتسجيل المستمع الذي يستمع للتغييرات التي تم إجراؤها على البيانات:

في StackBlitz ، انتقل إلى ملف index.js .
في الجزء العلوي ، حدد موقع عبارة استيراد firebase/firestore ، ثم أضف query و orderBy و onSnapshot ، مثل:
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

في الجزء السفلي من الوظيفة main() ، أضف الكود التالي للتكرار خلال جميع المستندات (رسائل سجل الزوار) في قاعدة البيانات. لمعرفة المزيد حول ما يحدث في هذا الرمز ، اقرأ المعلومات الموجودة أسفل المقتطف.

async function main() {
  // ...

  // Create query for messages
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}
main();

للاستماع إلى الرسائل في قاعدة البيانات ، قمت بإنشاء استعلام حول مجموعة معينة باستخدام وظيفة collection . يستمع الرمز أعلاه إلى التغييرات في مجموعة guestbook ، حيث يتم تخزين رسائل الدردشة. يتم أيضًا ترتيب الرسائل حسب التاريخ ، باستخدام orderBy('timestamp', 'desc') لعرض أحدث الرسائل في الأعلى.

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

اختبار مزامنة الرسائل

يقوم Cloud Firestore بمزامنة البيانات تلقائيًا وفوريًا مع العملاء المشتركين في قاعدة البيانات.

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

تهانينا! أنت تقرأ مستندات Cloud Firestore في تطبيقك!

معاينة التطبيق

لقطة شاشة لهذه الخطوة

9. إعداد قواعد الأمان الأساسية

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

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

يمكنك كتابة قواعد أمان لـ Cloud Firestore في وحدة تحكم Firebase:

في قسم إنشاء وحدة تحكم Firebase ، انقر على قاعدة بيانات Firestore ، ثم حدد علامة التبويب القواعد (أو انقر هنا للانتقال مباشرةً إلى علامة التبويب القواعد ).
يجب أن تشاهد قواعد الأمان الافتراضية التالية ، مع حد زمني للوصول العام بعد أسبوعين من اليوم.

لقطة شاشة لهذه الخطوة

تحديد المجموعات

أولاً ، حدد المجموعات التي يكتب التطبيق البيانات إليها.

احذف عبارة match /{document=**} ، بحيث تبدو قواعدك على النحو التالي:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
```

في match /databases/{database}/documents ، حدد المجموعة التي تريد تأمينها:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

أضف قواعد الأمان

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

أضف قواعد القراءة والكتابة إلى مجموعة القواعد الخاصة بك كما هو موضح أدناه:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

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

أضف قواعد التحقق من الصحة

أضف التحقق من صحة البيانات للتأكد من أن جميع الحقول المتوقعة موجودة في المستند:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

انقر فوق نشر لنشر القواعد الجديدة.

إعادة تعيين المستمعين

نظرًا لأن تطبيقك لا يسمح الآن إلا للمستخدمين المصادق عليهم بتسجيل الدخول ، يجب عليك نقل استعلام firestore النارية داخل مستمع المصادقة. بخلاف ذلك ، ستحدث أخطاء في الأذونات وسيتم قطع اتصال التطبيق عند تسجيل خروج المستخدم.

في StackBlitz ، انتقل إلى ملف index.js .

اسحب مجموعة سجل الزوار onSnapshot listener إلى وظيفة جديدة تسمى subscribeGuestbook . أيضًا ، قم بتعيين نتائج الدالة onSnapshot إلى متغير guestbookListener .

يقوم مستمع Firestore onSnapshot بإرجاع وظيفة إلغاء الاشتراك التي ستتمكن من استخدامها لإلغاء مستمع اللقطة لاحقًا.

// ...
// Listen to guestbook updates
function subscribeGuestbook() {
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  guestbookListener = onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}

أضف وظيفة جديدة أسفلها تسمى unsubscribeGuestbook . تحقق مما إذا كان متغير guestbookListener ليس فارغًا ، ثم قم باستدعاء الوظيفة لإلغاء المستمع.
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

أخيرًا ، أضف الوظائف الجديدة إلى رد نداء onAuthStateChanged .

أضف subscribeGuestbook() في الجزء السفلي من if (user) .

أضف unsubscribeGuestbook() في أسفل عبارة else .

// ...
// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
    // Subscribe to the guestbook collection
    subscribeGuestbook();
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
    // Unsubscribe from the guestbook collection
    unsubscribeGuestbook();
  }
});

10. خطوة إضافية: تدرب على ما تعلمته

سجل حالة الرد على دعوة الحضور

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

ستضيف مفتاح تبديل لتسجيل الأشخاص الذين يرغبون في حضور الحدث ، ثم جمع عدد الأشخاص القادمين.

في StackBlitz ، انتقل إلى ملف index.html .

في guestbook-container ، أضف مجموعة من الأزرار " نعم " و " لا" ، مثل:

<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

معاينة التطبيق

لقطة شاشة لهذه الخطوة

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

في StackBlitz ، انتقل إلى ملف index.js .

في الجزء العلوي ، حدد موقع بيان استيراد firebase/firestore ، ثم أضف doc و setDoc where ، مثل:

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

في الجزء السفلي من الدالة main() ، أضف الكود التالي للاستماع إلى حالة RSVP:

async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();

بعد ذلك ، قم بإنشاء مجموعة جديدة تسمى attendees ، ثم قم بتسجيل مرجع مستند إذا تم النقر فوق زر RSVP. اضبط هذا المرجع على true أو false بناءً على الزر الذي تم النقر عليه.

أولاً ، بالنسبة لـ rsvpYes :

// ...
// Listen to RSVP responses
rsvpYes.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attendi()ng: true
  try {
    await setDoc(userRef, {
      attending: true
    });
  } catch (e) {
    console.error(e);
  }
};

ثم ، نفس الشيء بالنسبة rsvpNo ، لكن مع القيمة false :

rsvpNo.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attending: true
  try {
    await setDoc(userRef, {
      attending: false
    });
  } catch (e) {
    console.error(e);
  }
};

قم بتحديث قواعد الأمان الخاصة بك

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

السماح بالإضافات إلى مجموعة `attendees`

ستحتاج إلى تحديث القواعد للسماح بالإضافة إلى مجموعة attendees .

بالنسبة لمجموعة attendees ، نظرًا لأنك استخدمت معرّف المصادقة باعتباره اسم المستند ، يمكنك الحصول عليه والتحقق من أن uid المرسل هو نفس المستند الذي يكتبه. ستسمح للجميع بقراءة قائمة الحضور (نظرًا لعدم وجود بيانات خاصة هناك) ، ولكن يجب أن يتمكن المنشئ فقط من تحديثها.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
انقر فوق نشر لنشر القواعد الجديدة.

أضف قواعد التحقق من الصحة

أضف بعض قواعد التحقق من صحة البيانات للتأكد من وجود جميع الحقول المتوقعة في المستند:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

لا تنس النقر فوق "نشر" لنشر القواعد الخاصة بك!

(اختياري) يمكنك الآن عرض نتائج النقر فوق الأزرار. انتقل إلى لوحة معلومات Cloud Firestore في وحدة تحكم Firebase.

قراءة حالة RSVP

الآن بعد أن سجلت الردود ، دعنا نرى من سيأتي ونعكسها في واجهة المستخدم.

في StackBlitz ، انتقل إلى ملف index.html .

في description-container ، أضف عنصرًا جديدًا بمعرّف number-attending .

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

بعد ذلك ، قم بتسجيل المستمع لمجموعة attendees وحساب عدد الردود بنعم :

في StackBlitz ، انتقل إلى ملف index.js .

في الجزء السفلي من الوظيفة main() ، أضف الكود التالي للاستماع إلى حالة RSVP وعد نقرات YES .

async function main() {
  // ...

  // Listen for attendee list
  const attendingQuery = query(
    collection(db, 'attendees'),
    where('attending', '==', true)
  );
  const unsubscribe = onSnapshot(attendingQuery, snap => {
    const newAttendeeCount = snap.docs.length;
    numberAttending.innerHTML = newAttendeeCount + ' people going';
  });
}
main();

أخيرًا ، دعنا نبرز الزر المقابل للحالة الحالية.

قم بإنشاء وظيفة تتحقق مما إذا كان UID للمصادقة الحالي يحتوي على إدخال في مجموعة attendees ، ثم قم بتعيين فئة الزر clicked .

// ...
// Listen for attendee list
function subscribeCurrentRSVP(user) {
  const ref = doc(db, 'attendees', user.uid);
  rsvpListener = onSnapshot(ref, doc => {
    if (doc && doc.data()) {
      const attendingResponse = doc.data().attending;

      // Update css classes for buttons
      if (attendingResponse) {
        rsvpYes.className = 'clicked';
        rsvpNo.className = '';
      } else {
        rsvpYes.className = '';
        rsvpNo.className = 'clicked';
      }
    }
  });
}

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

// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}

اتصل بالوظائف من مستمع المصادقة.

// ...
// Listen to the current Auth state
  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
      // Show guestbook to logged-in users
      guestbookContainer.style.display = 'block';

      // Subscribe to the guestbook collection
      subscribeGuestbook();
      // Subcribe to the user's RSVP
      subscribeCurrentRSVP(user);
    } else {
      startRsvpButton.textContent = 'RSVP';
      // Hide guestbook for non-logged-in users
      guestbookContainer.style.display = 'none'
      ;
      // Unsubscribe from the guestbook collection
      unsubscribeGuestbook();
      // Unsubscribe from the guestbook collection
      unsubscribeCurrentRSVP();
    }
  });

حاول تسجيل الدخول كمستخدمين متعددين ولاحظ زيادة العدد مع كل نقرة إضافية على زر YES .

معاينة التطبيق

لقطة شاشة لهذه الخطوة

11. مبروك!

لقد استخدمت Firebase لإنشاء تطبيق ويب تفاعلي في الوقت الفعلي!

ما غطينا

مصادقة Firebase
FirebaseUI
سحابة Firestore
قواعد أمان Firebase

الخطوات التالية

هل تريد معرفة المزيد حول سير عمل مطور Firebase؟ تحقق من مختبر كود محاكي Firebase للتعرف على كيفية اختبار وتشغيل تطبيقك محليًا بالكامل.
هل تريد معرفة المزيد عن منتجات Firebase الأخرى؟ ربما تريد تخزين ملفات الصور التي يقوم المستخدمون بتحميلها؟ أو إرسال إخطارات إلى المستخدمين لديك؟ تحقق من Firebase web codelab للحصول على مختبر ترميز يتعمق أكثر في العديد من منتجات Firebase للويب.
هل تريد معرفة المزيد عن Cloud Firestore؟ ربما تريد التعرف على المجموعات الفرعية والمعاملات؟ توجه إلى مختبر كود الويب Cloud Firestore للحصول على مختبر ترميز يتعمق أكثر في Cloud Firestore. أو تحقق من سلسلة YouTube هذه للتعرف على Cloud Firestore !

يتعلم أكثر

موقع Firebase: firebase.google.com
قناة Firebase على YouTube

كيف سار الأمر؟

نحن نحب ملاحظاتك! يرجى ملء نموذج قصير (جدًا) هنا .

تعرف على Firebase للويب

1. نظرة عامة

ماذا ستتعلم

ماذا ستحتاج

2. احصل على كود البداية

3. تعديل معلومات الحدث

معاينة التطبيق

4. إنشاء مشروع Firebase وإعداده

أنشئ مشروع Firebase

قم بتمكين وإعداد منتجات Firebase في وحدة التحكم

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

قم بإعداد Cloud Firestore

5. قم بإضافة وتهيئة Firebase

أضف مكتبات Firebase

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

6. إضافة تسجيل دخول المستخدم (RSVP)

قم بمصادقة المستخدمين من خلال تسجيل الدخول بالبريد الإلكتروني و FirebaseUI

أضف الرمز لتهيئة FirebaseUI Auth

أضف زر RSVP إلى HTML

اختبار تسجيل الدخول إلى التطبيق

أضف حالة المصادقة إلى واجهة المستخدم

معاينة التطبيق

7. اكتب رسائل إلى Cloud Firestore

نموذج البيانات

أضف رسائل إلى Firestore

معاينة التطبيق

عرض سجل الزوار فقط للمستخدمين الذين قاموا بتسجيل الدخول

اختبار إرسال الرسائل

وحدة تحكم Firebase

8. اقرأ الرسائل

مزامنة الرسائل

اختبار مزامنة الرسائل

معاينة التطبيق

9. إعداد قواعد الأمان الأساسية

تحديد المجموعات

أضف قواعد الأمان

أضف قواعد التحقق من الصحة

إعادة تعيين المستمعين

10. خطوة إضافية: تدرب على ما تعلمته

سجل حالة الرد على دعوة الحضور

معاينة التطبيق

قم بتحديث قواعد الأمان الخاصة بك

السماح بالإضافات إلى مجموعة attendees

أضف قواعد التحقق من الصحة

قراءة حالة RSVP

معاينة التطبيق

11. مبروك!

ما غطينا

الخطوات التالية

يتعلم أكثر

كيف سار الأمر؟

السماح بالإضافات إلى مجموعة `attendees`