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

1. نظرة عامة

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

59abdefbcc23bbbe.png

ماذا ستتعلم

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

ماذا ستحتاج

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

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

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

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

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

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

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

توفر مواد البداية لمخطط الشفرات هذا بعض الهياكل لتطبيق الويب ، بما في ذلك بعض أوراق الأنماط واثنين من حاويات 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

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

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

أنشئ مشروع Firebase

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

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

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

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

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

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

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

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

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

تفعيل Cloud Firestore

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

تمكين Cloud Firestore:

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

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

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

أضف مكتبات Firebase

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

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

لإنشاء هذا التطبيق ، يمكنك استخدام مكتبات Firebase Authentication و FirebaseUI و Cloud Firestore. لهذا codelab، مدرجة بالفعل في بيانات الاستيراد التالية في الجزء العلوي من 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 إلى المشروع

  1. مرة أخرى في وحدة التحكم Firebase، انتقل إلى صفحة نظرة عامة المشروع الخاص بك عن طريق النقر محة عامة عن المشروع في أعلى اليسار.
  2. في وسط صفحة النظرة العامة على مشروعك ، انقر فوق أيقونة الويب b286f3d215e1f578.png لإنشاء تطبيق ويب Firebase جديد.
    c167e9526fad2825.png
  3. تسجيل التطبيق مع لقب تطبيق الويب.
  4. لهذا codelab، لم تضع علامة على المربع بجانب كذلك وضعت Firebase استضافة لهذا التطبيق. ستستخدم جزء معاينة 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
    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 .

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

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

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

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

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

  1. في StackBlitz، انتقل إلى index.js الملف.
  2. في الجزء العلوي، حدد موقع 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';
    
  3. حفظ إشارة إلى كائن المصادقة مباشرة بعد initializeApp ، كما يلي:
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. لاحظ أنه تم توفير تكوين FirebaseUI بالفعل في كود البداية. تم الإعداد بالفعل لاستخدام موفر مصادقة البريد الإلكتروني.
  5. في الجزء السفلي من main() وظيفة في index.js ، إضافة العبارة التهيئة FirebaseUI، كما يلي:
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

أضف زر RSVP إلى HTML

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

    كن حذرا لاستخدام نفس id القيم كما هو موضح أدناه، لأنه لهذا codelab، هناك السنانير بالفعل لهذه معرفات محددة في index.js الملف.

    علما بأن في index.html الملفات، وهناك وعاء مع ID 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
  3. قم بإعداد مستمع على زر RSVP واستدعاء وظيفة بدء FirebaseUI. يخبر هذا FirebaseUI أنك تريد رؤية نافذة تسجيل الدخول.

    قم بإضافة التعليمات البرمجية التالية إلى أسفل main() وظيفة في index.js :
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

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

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

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

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

  1. في StackBlitz، انتقل إلى index.js الملف.
  2. في الجزء العلوي، حدد موقع 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';
    
  3. قم بإضافة التعليمات البرمجية التالية في الجزء السفلي من main() وظيفة:
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. في مستمع الأزرار ، تحقق مما إذا كان هناك مستخدم حالي وقم بتسجيل الخروج. للقيام بذلك، تحل محل الحكومة الحالية 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);
      }
    });
    

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

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

4c540450924f1607.png

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

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

لتخزين رسائل الدردشة يمكن للمستخدمين الكتابة في التطبيق، عليك استخدام سحابة 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

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

  1. في StackBlitz، انتقل إلى index.js الملف.
  2. في الجزء العلوي، حدد موقع 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';
    
  3. الآن نحن سوف توفر مرجعا ل firestore db الحق الكائن بعد initializeApp :
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. في الجزء السفلي من 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 . (هناك المزيد من المعلومات حول قواعد الأمان لاحقًا في مختبر الرموز.)

  1. في StackBlitz، انتقل إلى index.js الملف.
  2. تحرير 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';
      }
    });
    

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

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

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

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

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

وحدة تحكم Firebase

713870af0b3b63c.png

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

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

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

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

ستضيف رمزًا يستمع إلى الرسائل المضافة حديثًا من التطبيق. أولاً ، أضف قسمًا في 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. في الجزء العلوي، حدد موقع firebase/firestore بيان الاستيراد، ثم إضافة query ، orderBy ، و onSnapshot ، كما يلي:
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. في الجزء السفلي من 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 الدالة تأخذ معلمتين: الاستعلام لاستخدام وظيفة رد. يتم تشغيل وظيفة رد الاتصال عند وجود أي تغييرات على المستندات التي تطابق الاستعلام. قد يكون هذا في حالة حذف رسالة أو تعديلها أو إضافتها. لمزيد من المعلومات، راجع وثائق سحابة Firestore .

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

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

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

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

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

e30df0a9614bae7d.png

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

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

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

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

  1. في قسم بناء وحدة Firebase، وانقر فوق قاعدة بيانات Firestore، ثم حدد علامة التبويب قواعد (أو انقر هنا للذهاب مباشرة إلى علامة التبويب قواعد).
  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 المستمع إلى وظيفة جديدة تسمى subscribeGuestbook . أيضا، تعيين نتائج onSnapshot وظيفة إلى guestbookListener متغير.

    وFirestore onSnapshot المستمع يعود وظيفة إلغاء الاشتراك أن عليك أن تكون قادرا على استخدام لإلغاء المستمع لقطة في وقت لاحق.
    // ...
    // Listen to guestbook updates
    // 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);
        });
      });
    }
    
  2. إضافة تحت وظيفة جديدة تسمى unsubscribeGuestbook . تحقق ما إذا كان guestbookListener المتغير غير فارغة، ثم استدعاء الدالة لإلغاء المستمع.
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

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

  1. إضافة subscribeGuestbook() في الجزء السفلي من if (user) .
  2. إضافة 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. خطوة إضافية: تدرب على ما تعلمته

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

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

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

  1. في StackBlitz، انتقل إلى index.html الملفات.
  2. في guestbook-container ، إضافة مجموعة من أزرار YES و NO، كما يلي:
    <!-- ... -->
      <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

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

  1. في StackBlitz، انتقل إلى index.js الملف.
  2. في الجزء العلوي، حدد موقع 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';
    
  3. في الجزء السفلي من main() وظيفة، بإضافة التعليمة البرمجية التالية للاستماع إلى وضع RSVP:
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. إنشاء مجموعة جديدة تسمى attendees ، ثم تسجيل إشارة المستند إذا تم النقر على زر إما RSVP.
  5. تعيين هذا إشارة إلى 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 جمع، منذ كنت تستخدم مصادقة UID مثل اسم المستند، يمكنك الاستيلاء عليها والتحقق من أن مقدم على 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 جمع وحساب عدد الردود YES:

  1. في StackBlitz، انتقل إلى index.js الملف.
  2. في الجزء السفلي من 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();
    

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

  1. إنشاء دالة الشيكات ما إذا كانت مصادقة 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';
          }
        }
      });
    }
    
  2. أيضًا ، لنقم بعمل وظيفة لإلغاء الاشتراك. سيتم استخدام هذا عندما يقوم المستخدم بتسجيل الخروج.
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. اتصل بالوظائف من مستمع المصادقة.
    // ...
    // 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();
        }
      });
    
  4. حاول تسجيل الدخول كما العديد من المستخدمين والاطلاع على زيادة عدد مع كل إضافي انقر زر YES.

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

3df607d3e0b3c35.png

11. مبروك!

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

ما غطينا

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

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

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

يتعلم أكثر

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

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