Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

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

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

59abdefbcc23bbbe.png

ماذا ستتعلم

  • قم بمصادقة المستخدمين باستخدام مصادقة Firebase و FirebaseUI.
  • مزامنة البيانات باستخدام Cloud Firestore.
  • اكتب قواعد أمان Firebase لتأمين قاعدة بيانات.
  • انشر تطبيق ويب على Firebase Hosting.

ماذا ستحتاج

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

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

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

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

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

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

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

  1. في StackBlitz ، افتح ملف index.html .
  2. حدد موقع 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>



<!-- ... -->

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

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

908cc57ce3a5b5fe.png

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

أنشئ مشروع Firebase

  1. سجّل الدخول إلى Firebase .
  2. في وحدة تحكم Firebase ، انقر على إضافة مشروع (أو إنشاء مشروع ) ، وقم بتسمية مشروع Firebase Firebase-Web-Codelab .

a67c239f8cc7f4b5.png

  1. انقر من خلال خيارات إنشاء المشروع. اقبل شروط Firebase إذا طُلب منك ذلك. تخطي إعداد Google Analytics ، لأنك لن تستخدم Analytics لهذا التطبيق.

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

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

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

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

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

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

  1. في وحدة تحكم Firebase ، انقر على " تطوير" في اللوحة اليمنى.
  2. انقر فوق المصادقة ، ثم انقر فوق علامة التبويب طريقة تسجيل الدخول (أو انقر هنا للانتقال مباشرةً إلى علامة التبويب طريقة تسجيل الدخول ).
  3. انقر فوق البريد الإلكتروني / كلمة المرور في قائمة موفري تسجيل الدخول ، واضبط مفتاح تمكين على وضع التشغيل ، ثم انقر فوق حفظ . 4c88427cfd869bee.png

تفعيل Cloud Firestore

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

تمكين Cloud Firestore:

  1. في قسم التطوير بوحدة تحكم Firebase ، انقر على قاعدة البيانات .
  2. ضمن Cloud Firestore ، انقر على إنشاء قاعدة بيانات . 3ce19fd6467e51c5.png
  1. حدد خيار البدء في وضع الاختبار . اقرأ إخلاء المسؤولية حول قواعد الأمان. يضمن وضع الاختبار أنه يمكنك الكتابة بحرية إلى قاعدة البيانات أثناء التطوير. انقر فوق التالي . 56369cebb9300eb.png
  1. حدد موقع قاعدة البيانات الخاصة بك (يمكنك فقط استخدام الافتراضي). لاحظ أنه لا يمكن تغيير هذا الموقع لاحقًا. 32f815f4648c3174.png
  2. انقر فوق تم .

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

أضف مكتبات Firebase

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

يوفر StackBlitz تجميعًا تلقائيًا ، بحيث يمكنك إضافة مكتبات Firebase باستخدام عبارات الاستيراد.

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

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

// Firebase App (the core Firebase SDK) is always required
// and must be listed first
import firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

import * as firebaseui from "firebaseui";

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

  1. مرة أخرى في وحدة تحكم Firebase ، انتقل إلى صفحة نظرة عامة على مشروعك بالنقر فوق نظرة عامة على المشروع في الجزء العلوي الأيمن.
  2. في وسط صفحة النظرة العامة على مشروعك ، انقر فوق أيقونة الويب b286f3d215e1f578.png لإنشاء تطبيق ويب Firebase جديد. c167e9526fad2825.png
  3. قم بتسجيل التطبيق باستخدام لقب Web App .
  4. بالنسبة إلى مختبر الرموز هذا ، لا تحدد المربع بجوار إعداد Firebase Hosting لهذا التطبيق أيضًا . ستستخدم جزء معاينة StackBlitz في الوقت الحالي.
  5. انقر فوق تسجيل التطبيق . c85ac8aa351e2560.png
  6. انسخكائن تكوين Firebase إلى الحافظة. ed1e598c6132f734.png
  7. انقر فوق " متابعة" لوحدة التحكم .

أضف كائن تهيئة Firebase إلى تطبيقك:

  1. مرة أخرى في StackBlitz ، انتقل إلى ملف index.js .
  2. حدد موقع Add Firebase project configuration object here سطر التعليق ، والصق مقتطف التكوين الخاص بك أسفل التعليق مباشرة.
  3. أضف استدعاء وظيفة initializeApp لإعداد Firebase باستخدام تكوين مشروع Firebase الفريد.
// ...

// Add Firebase project configuration object here
var 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
firebase.initializeApp(firebaseConfig);

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

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

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

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

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

أولاً ، أضف الرمز لتهيئة FirebaseUI:

  1. في StackBlitz ، انتقل إلى ملف index.js . لاحظ أنه تم توفير تهيئة FirebaseUI بالفعل.
  2. في الجزء السفلي من index.js, أضف عبارة تهيئة FirebaseUI ، مثل:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

بعد ذلك ، أضف زر RSVP إلى HTML:

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

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

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

<!-- ... -->

<section id="event-details-container">
    <!-- ... -->
    <!-- ADD THE RSVP BUTTON HERE -->
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>
<!-- ... -->

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

ab9ad7d61bb7b28c.png

  1. قم بإعداد مستمع على زر RSVP واستدعاء وظيفة بدء FirebaseUI. يخبر هذا FirebaseUI أنك تريد رؤية نافذة تسجيل الدخول. أضف الكود التالي إلى أسفل index.js :
// ... 
// At the bottom

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

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

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

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

3024f90b52ad55fe.png

682fc0eca86a99fc.png

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

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

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

  1. في StackBlitz ، انتقل إلى ملف index.js .
  2. أضف الكود التالي في الأسفل:
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user)=> {
  if (user) {
    startRsvpButton.textContent = "LOGOUT"
  }
  else {
    startRsvpButton.textContent = "RSVP"
  }
});
  1. في مستمع الأزرار ، تحقق مما إذا كان هناك مستخدم حالي وقم بتسجيل الخروج. للقيام بذلك ، startRsvpButton.addEventListener الحالي بما يلي:
// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener("click",
 () => {
    if (firebase.auth().currentUser) {
      // User is signed in; allows user to sign out
      firebase.auth().signOut();
    } else {
      // No user is signed in; allows user to sign in
      ui.start("#firebaseui-auth-container", uiConfig);
    }
});

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

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

4c540450924f1607.png

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

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

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

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

b447950f9f993789.png

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

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

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

  1. في StackBlitz ، انتقل إلى ملف index.html .
  2. حدد موقع 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>

<!-- ... -->

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

4a892284443cf73d.png

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

  1. في StackBlitz ، انتقل إلى ملف index.js .
  2. في الجزء السفلي من الملف ، أضف التعليمات البرمجية التالية.

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

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

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

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

  1. في StackBlitz ، انتقل إلى ملف index.js .
  2. قم بتحرير مستمع onAuthStateChanged لإخفاء وإظهار سجل الزوار.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((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";
 }
});

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

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

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

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

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

وحدة تحكم Firebase

713870af0b3b63c.png

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

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

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

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

  1. في StackBlitz ، انتقل إلى ملف index.html .
  2. في guestbook-container ، أضف قسمًا جديدًا بمعرف guestbook .
<!-- ... -->

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

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

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

 </section>

<!-- ... -->

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

  1. في StackBlitz ، انتقل إلى ملف index.js .
  2. في الجزء السفلي من الملف ، أضف الكود التالي للتكرار خلال جميع المستندات (رسائل سجل الزوار) في قاعدة البيانات:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((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);
 });
});

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

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

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

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

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

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

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

e30df0a9614bae7d.png

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

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

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

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

7767a2d2e64e7275.png

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

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

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

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

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

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((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);
   });
 });
};
  1. أضف وظيفة جديدة أسفلها تسمى unsubscribeGuestbook . تحقق مما إذا كان متغير guestbookListener ليس فارغًا ، ثم قم باستدعاء الوظيفة لإلغاء المستمع.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. أخيرًا ، أضف الوظائف الجديدة إلى رد onAuthStateChanged (استخدم الخطوتين التاليتين).
  2. أضف subscribeGuestbook() في الجزء السفلي من if (user) .
  3. أضف unsubscribeGuestbook() في أسفل عبارة else .
// ...
firebase.auth().onAuthStateChanged((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();
}
});

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

يمكنك استخدام تكامل StackBlitz's Firebase لإخبار StackBlitz بمشروع Firebase الذي ترغب في نشر الأصول فيه:

  1. إذا لم تكن قد سجلت الدخول بالفعل باستخدام GitHub في StackBlitz ، فانقر فوق تسجيل الدخول في الجزء العلوي الأيمن ، ثم أدخل بيانات اعتماد حساب GitHub الخاص بك.

99a41778bb3c194c.png

  • إذا كان لديك بالفعل حساب GitHub ، فقم بتسجيل الدخول باستخدام حساب GitHub الخاص بك.
  • إذا لم يكن لديك حساب GitHub بالفعل ، فأنشئ حساب GitHub باستخدام نفس عنوان البريد الإلكتروني الذي استخدمته لتسجيل الدخول إلى Firebase.
  1. يجب أن يكون هناك الآن رمز Firebase في اللوحة اليمنى .

2981c2e3ad13c2c1.png 3. انقر فوق تسجيل الدخول إلى Google . سجّل الدخول باستخدام نفس عنوان البريد الإلكتروني الذي استخدمته لتسجيل الدخول إلى Firebase. 4. من قائمة مشاريع Firebase ، حدد مشروع Firebase-Web-Codelab .

يعد النشر في Firebase Hosting باستخدام StackBlitz عملية نقرة واحدة:

  1. في مساحة العمل StackBlitz ، انقر فوق Deploy على الجانب الأيسر من الصفحة. نعم ، هذا كل شيء. خطوة واحدة! 8fe6c0bfc04c8935.png

تفضل بزيارة الوثائق لمعرفة المزيد حول كيفية عمل استضافة Firebase .

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

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

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

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

  1. في StackBlitz ، انتقل إلى ملف index.html .
  2. في 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>
<!-- ... -->

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

73ca99ca35c13ee7.png

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

  1. في StackBlitz ، انتقل إلى ملف index.js .
  2. في الجزء السفلي من الملف ، أضف الكود التالي للاستماع إلى حالة RSVP:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. قم بإنشاء مجموعة جديدة تسمى attendees ، ثم قم بتسجيل مرجع مستند إذا تم النقر فوق زر RSVP.
  2. اضبط هذا المرجع على true أو false بناءً على الزر الذي تم النقر عليه.

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

// ...

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

 // If they RSVP'd yes, save a document with attending: true
 userDoc.set({
   attending: true
 }).catch(console.error)
}

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

rsvpNo.onclick = () => {
 // Get a reference to the user's document in the attendees collection
 const userDoc = firebase.firestore().collection('attendees').doc(firebase.auth().currentUser.uid);

 // If they RSVP'd no, save a document with attending: false
 userDoc.set({
   attending: false
 }).catch(console.error)
}

أضف القواعد

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

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

  1. في StackBlitz ، انتقل إلى ملف index.html .
  2. في description-container ، أضف عنصرًا جديدًا بمعرّف number-attending .
<!-- ... -->

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

<!-- ... -->

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

  1. في StackBlitz ، انتقل إلى ملف index.js .
  2. في الجزء السفلي من الملف ، أضف الكود التالي للاستماع إلى حالة RSVP وإحصاء نقرات YES .
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. أخيرًا ، دعنا نبرز الزر المقابل للحالة الحالية. تحقق مما إذا كان UID للمصادقة الحالي يحتوي على إدخال في مجموعة attendees ، ثم قم بتعيين الفئة clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((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";
     }
   }
 });
}
  1. أيضًا ، لنقم بعمل وظيفة لإلغاء الاشتراك. سيتم استخدام هذا عندما يقوم المستخدم بتسجيل الخروج.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. اتصل بالوظائف من مستمع المصادقة.
// ...

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

  // Subscribe to the guestbook collection
  subscribeGuestbook();
  // Subscribe to the guestbook collection
  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();

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

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

3df607d3e0b3c35.png

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

ما غطينا

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

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

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

يتعلم أكثر

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

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