Firebase for web را بشناسید

1. بررسی اجمالی

در این کد لبه، برخی از اصول اولیه Firebase برای ایجاد برنامه های کاربردی وب تعاملی را خواهید آموخت. با استفاده از چندین محصول Firebase، یک رویداد RSVP و برنامه چت کتاب مهمان ایجاد خواهید کرد.

اسکرین شات از این مرحله

چیزی که یاد خواهید گرفت

  • احراز هویت کاربران با Firebase Authentication و FirebaseUI.
  • همگام سازی داده ها با استفاده از Cloud Firestore.
  • قوانین امنیتی Firebase را برای ایمن سازی پایگاه داده بنویسید.

آنچه شما نیاز دارید

  • مرورگر دلخواه شما، مانند کروم.
  • دسترسی به stackblitz.com (بدون نیاز به حساب کاربری یا ورود به سیستم).
  • یک حساب Google، مانند یک حساب کاربری جیمیل. ما حساب ایمیلی را که قبلاً برای حساب GitHub خود استفاده می کنید توصیه می کنیم. این به شما امکان می دهد از ویژگی های پیشرفته در StackBlitz استفاده کنید.
  • کد نمونه آزمایشگاه کد. برای نحوه دریافت کد به مرحله بعدی مراجعه کنید.

2. کد شروع را دریافت کنید

در این کد لبه، شما یک برنامه با استفاده از StackBlitz می سازید، یک ویرایشگر آنلاین که دارای چندین جریان کاری Firebase است که در آن ادغام شده است. Stackblitz نیازی به نصب نرم افزار یا حساب StackBlitz خاصی ندارد.

StackBlitz به شما امکان می دهد پروژه ها را با دیگران به اشتراک بگذارید. سایر افرادی که URL پروژه StackBlitz شما را دارند می توانند کد شما را ببینند و پروژه شما را فورک کنند، اما نمی توانند پروژه StackBlitz شما را ویرایش کنند.

  1. برای کد شروع به این URL بروید: https://stackblitz.com/edit/firebase-gtk-web-start
  2. در بالای صفحه StackBlitz، روی Fork کلیک کنید:

اسکرین شات از این مرحله

اکنون یک کپی از کد شروع به عنوان پروژه StackBlitz خود دارید که دارای یک نام منحصر به فرد به همراه یک 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>

<!-- ... -->

پیش نمایش برنامه شما باید چیزی شبیه به این باشد:

پیش نمایش برنامه

اسکرین شات از این مرحله

4. یک پروژه Firebase ایجاد و راه اندازی کنید

نمایش اطلاعات رویداد برای مهمانان شما عالی است، اما فقط نشان دادن رویدادها برای هیچ کس چندان مفید نیست. بیایید برخی از عملکردهای پویا را به این برنامه اضافه کنیم. برای این کار، باید Firebase را به برنامه خود متصل کنید. برای شروع کار با Firebase، باید یک پروژه Firebase ایجاد و راه اندازی کنید.

یک پروژه Firebase ایجاد کنید

  1. وارد Firebase شوید.
  2. در کنسول Firebase، روی Add Project (یا Create a project ) کلیک کنید، سپس نام پروژه Firebase خود را Firebase-Web-Codelab بگذارید.

    اسکرین شات از این مرحله

  3. روی گزینه های ایجاد پروژه کلیک کنید. در صورت درخواست، شرایط Firebase را بپذیرید. در صفحه Google Analytics، روی «فعال نشود» کلیک کنید، زیرا از Analytics برای این برنامه استفاده نخواهید کرد.

برای کسب اطلاعات بیشتر درباره پروژه‌های Firebase، به درک پروژه‌های Firebase مراجعه کنید.

محصولات Firebase را در کنسول فعال و تنظیم کنید

برنامه ای که می سازید از چندین محصول Firebase استفاده می کند که برای برنامه های وب در دسترس هستند:

  • Firebase Authentication و Firebase UI به کاربران شما اجازه می دهد تا به راحتی وارد برنامه شما شوند.
  • Cloud Firestore برای ذخیره داده‌های ساخت‌یافته در فضای ابری و دریافت اطلاع‌رسانی فوری هنگام تغییر داده‌ها.
  • قوانین امنیتی Firebase برای ایمن سازی پایگاه داده شما.

برخی از این محصولات نیاز به پیکربندی خاصی دارند یا باید با استفاده از کنسول Firebase فعال شوند.

ورود به ایمیل را برای احراز هویت Firebase فعال کنید

برای اینکه به کاربران اجازه دهید وارد برنامه وب شوند، از روش ورود به سیستم ایمیل/گذرواژه برای این لبه کد استفاده خواهید کرد:

  1. در پانل سمت چپ کنسول Firebase، روی Build > Authentication کلیک کنید. سپس روی Get Started کلیک کنید. اکنون در داشبورد احراز هویت هستید، جایی که می توانید کاربران ثبت نام شده را ببینید، ارائه دهندگان ورود به سیستم را پیکربندی کنید و تنظیمات را مدیریت کنید.

    اسکرین شات از این مرحله

  2. برگه روش ورود به سیستم را انتخاب کنید (یا برای رفتن مستقیم به برگه اینجا را کلیک کنید ).

    اسکرین شات از این مرحله

  3. روی Email/Password از گزینه های ارائه دهنده کلیک کنید، سوئیچ را روی Enable تغییر دهید و سپس روی Save کلیک کنید.

    اسکرین شات از این مرحله

Cloud Firestore را راه اندازی کنید

برنامه وب از Cloud Firestore برای ذخیره پیام های چت و دریافت پیام های چت جدید استفاده می کند.

در اینجا نحوه راه اندازی Cloud Firestore در پروژه Firebase آمده است:

  1. در پنل سمت چپ کنسول Firebase، Build را گسترش دهید و سپس پایگاه داده Firestore را انتخاب کنید.
  2. روی ایجاد پایگاه داده کلیک کنید.
  3. شناسه پایگاه داده را روی (default) بگذارید.
  4. یک مکان برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
    برای یک برنامه واقعی، می خواهید مکانی را انتخاب کنید که به کاربران شما نزدیک باشد.
  5. در حالت تست روی Start کلیک کنید. سلب مسئولیت در مورد قوانین امنیتی را بخوانید.
    بعداً در این کد، قوانین امنیتی را برای ایمن سازی داده های خود اضافه خواهید کرد. بدون افزودن قوانین امنیتی برای پایگاه داده خود، یک برنامه را به صورت عمومی توزیع یا افشا نکنید .
  6. روی ایجاد کلیک کنید.

5. Firebase را اضافه و پیکربندی کنید

اکنون که پروژه Firebase خود را ایجاد کرده‌اید و برخی از سرویس‌ها را فعال کرده‌اید، باید کدی را که می‌خواهید از Firebase استفاده کنید و همچنین از کدام پروژه Firebase استفاده کنید.

کتابخانه های Firebase را اضافه کنید

برای اینکه برنامه شما بتواند از Firebase استفاده کند، باید کتابخانه های Firebase را به برنامه اضافه کنید. روش های مختلفی برای انجام این کار وجود دارد، همانطور که در مستندات Firebase توضیح داده شده است . برای مثال، می‌توانید کتابخانه‌ها را از CDN Google اضافه کنید، یا می‌توانید با استفاده از npm آنها را به صورت محلی نصب کنید و اگر از Browserify استفاده می‌کنید، آنها را در برنامه خود بسته‌بندی کنید.

StackBlitz بسته بندی خودکار را فراهم می کند، بنابراین می توانید کتابخانه های Firebase را با استفاده از دستورات import اضافه کنید. شما از نسخه‌های مدولار (v9) کتابخانه‌ها استفاده خواهید کرد، که به کاهش اندازه کلی صفحه وب با فرآیندی به نام "تکان دادن درخت" کمک می‌کند. می توانید درباره SDK های مدولار در اسناد اطلاعات بیشتری کسب کنید.

برای ساخت این برنامه، از کتابخانه های Firebase Authentication، FirebaseUI و Cloud Firestore استفاده می کنید. برای این کد لبه، عبارات import زیر قبلاً در بالای فایل 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 خود اضافه کنید

  1. در کنسول Firebase، با کلیک بر روی Project Overview در بالا سمت چپ، به صفحه نمای کلی پروژه خود بروید.
  2. در مرکز صفحه نمای کلی پروژه خود، روی نماد وب کلیک کنید نماد برنامه وب برای ایجاد یک برنامه وب Firebase جدید.

    اسکرین شات از این مرحله

  3. برنامه را با نام مستعار Web App ثبت کنید.
  4. برای این کد لبه، کادر کنار « همچنین میزبانی Firebase را برای این برنامه تنظیم کنید» علامت نزنید. در حال حاضر از صفحه پیش نمایش StackBlitz استفاده خواهید کرد.
  5. روی ثبت برنامه کلیک کنید.

    اسکرین شات از این مرحله

  6. شی پیکربندی Firebase را در کلیپ بورد خود کپی کنید.

    اسکرین شات از این مرحله

  7. برای کنسول روی Continue کلیک کنید. شیء پیکربندی Firebase را به برنامه خود اضافه کنید:
  8. بازگشت به StackBlitz، به فایل index.js بروید.
  9. Add Firebase project configuration object here خط نظر قرار دهید، سپس قطعه پیکربندی خود را درست در زیر نظر قرار دهید.
  10. برای راه اندازی Firebase با استفاده از پیکربندی پروژه Firebase منحصر به فرد خود، فراخوانی تابع initializeApp اضافه کنید.
    // ...
// 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.firebasestorage.app",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. افزودن ورود به سیستم کاربر (RSVP)

اکنون که Firebase را به برنامه اضافه کرده اید، می توانید یک دکمه RSVP تنظیم کنید که افراد را با استفاده از Firebase Authentication ثبت می کند.

با استفاده از Email Sign-In و FirebaseUI کاربران خود را احراز هویت کنید

شما به یک دکمه RSVP نیاز دارید که از کاربر می خواهد با آدرس ایمیل خود وارد سیستم شود. می توانید این کار را با اتصال FirebaseUI به یک دکمه RSVP انجام دهید. FirebaseUI کتابخانه ای است که یک رابط کاربری از پیش ساخته شده در بالای Firebase Auth به شما می دهد.

FirebaseUI به پیکربندی نیاز دارد (به گزینه های موجود در اسناد مراجعه کنید) که دو کار را انجام می دهد:

  • به FirebaseUI می گوید که می خواهید از روش ورود به سیستم ایمیل/گذرواژه استفاده کنید.
  • پاسخ تماس را برای ورود موفقیت آمیز مدیریت می کند و برای جلوگیری از تغییر مسیر، false را برمی گرداند. شما نمی خواهید صفحه به روز شود زیرا در حال ساخت یک برنامه وب تک صفحه ای هستید.

کد را برای مقداردهی اولیه FirebaseUI Auth اضافه کنید

  1. در StackBlitz به فایل index.js بروید.
  2. در بالا، عبارت firebase/auth import را پیدا کنید، سپس getAuth و EmailAuthProvider را اضافه کنید، مانند:
    // ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';
  3. یک ارجاع به شی auth را درست بعد از 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 استفاده کنید که در زیر نشان داده شده است زیرا برای این کد لبه، از قبل قلاب هایی برای این شناسه های خاص در فایل 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>
<!-- ... -->
    پیش نمایش برنامه

     اسکرین شات از این مرحله

  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 فعال کرده‌اید.
    پیش نمایش برنامه

     اسکرین شات از این مرحله

  2. به داشبورد Authentication در کنسول Firebase بروید. در تب کاربران ، باید اطلاعات حسابی را که برای ورود به برنامه وارد کرده اید، مشاهده کنید.

    اسکرین شات از این مرحله

وضعیت احراز هویت را به رابط کاربری اضافه کنید

در مرحله بعد، مطمئن شوید که رابط کاربری این واقعیت را منعکس می کند که شما وارد سیستم شده اید.

شما از پاسخ تماس شنونده وضعیت Firebase Authentication استفاده خواهید کرد که هر زمان که وضعیت ورود به سیستم کاربر تغییر کند، مطلع می شود. اگر در حال حاضر کاربری وارد سیستم شده باشد، برنامه شما دکمه «RSVP» را به دکمه «خروج» تغییر می‌دهد.

  1. در StackBlitz به فایل index.js بروید.
  2. در بالا، عبارت firebase/auth import را پیدا کنید، سپس 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 برگردد.

پیش نمایش برنامه

اسکرین شات از این مرحله

7. برای Cloud Firestore پیام بنویسید

دانستن اینکه کاربران در حال آمدن هستند عالی است، اما بیایید به مهمانان کار دیگری برای انجام در برنامه بدهیم. اگر آنها بتوانند در دفترچه مهمان پیام بگذارند چه می شود؟ آنها می توانند به اشتراک بگذارند که چرا برای آمدن هیجان زده هستند یا با چه کسی امیدوارند ملاقات کنند.

برای ذخیره پیام‌های چتی که کاربران در برنامه می‌نویسند، از Cloud Firestore استفاده می‌کنید.

مدل داده

Cloud Firestore یک پایگاه داده NoSQL است و داده های ذخیره شده در پایگاه داده به مجموعه ها، اسناد، فیلدها و زیر مجموعه ها تقسیم می شود. شما هر پیام چت را به عنوان یک سند در یک مجموعه سطح بالا به نام guestbook ذخیره خواهید کرد.

گرافیک مدل داده Firestore مجموعه ای از کتاب مهمان را با چندین سند پیام نشان می دهد

افزودن پیام به Firestore

در این بخش، قابلیت نوشتن پیام‌های جدید به پایگاه داده را برای کاربران اضافه می‌کنید. ابتدا HTML را برای عناصر UI (فیلد پیام و دکمه ارسال) اضافه می کنید. سپس، کدی را اضافه می‌کنید که این عناصر را به پایگاه داده متصل می‌کند.

برای افزودن عناصر رابط کاربری یک فیلد پیام و یک دکمه ارسال:

  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>

<!-- ... -->

پیش نمایش برنامه

اسکرین شات از این مرحله

کاربری که روی دکمه SEND کلیک می کند، قطعه کد زیر را فعال می کند. محتویات فیلد ورودی پیام را به مجموعه guestbook پایگاه داده اضافه می کند. به طور خاص، روش addDoc محتوای پیام را به یک سند جدید (با شناسه ای که به طور خودکار تولید می شود) به مجموعه guestbook اضافه می کند.

  1. در StackBlitz به فایل index.js بروید.
  2. در بالا، عبارت firebase/firestore import را پیدا کنید، سپس 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 Authentication برای همه کاربران وارد شده ارائه می‌کند.
    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 نیز ایمن کنید. (اطلاعات بیشتری در مورد قوانین امنیتی بعداً در Codelab وجود دارد.)

  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. پیامی مانند "Hey There!" را وارد کنید، سپس روی SEND کلیک کنید.

این عمل پیام را در پایگاه داده Cloud Firestore شما می نویسد. با این حال، شما هنوز پیام را در برنامه وب واقعی خود نخواهید دید زیرا هنوز باید بازیابی داده ها را پیاده سازی کنید. بعدش اینکارو میکنی

اما می توانید پیام تازه اضافه شده را در کنسول Firebase ببینید.

در کنسول Firebase، در داشبورد پایگاه داده Firestore ، باید مجموعه guestbook را با پیامی که به تازگی اضافه کرده‌اید ببینید. اگر به ارسال پیام ادامه دهید، مجموعه کتاب مهمان شما حاوی اسناد زیادی است، مانند:

کنسول Firebase

اسکرین شات از این مرحله

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. در بالا، دستور import 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 دو پارامتر دارد: Query مورد استفاده و تابع callback. وقتی هر گونه تغییری در اسنادی که با پرس و جو مطابقت دارند، ایجاد می شود، عملکرد برگشت تماس فعال می شود. این ممکن است در صورتی باشد که پیامی حذف، اصلاح یا اضافه شود. برای اطلاعات بیشتر، به مستندات Cloud Firestore مراجعه کنید.

همگام سازی پیام ها را آزمایش کنید

Cloud Firestore به صورت خودکار و فوری داده ها را با مشتریان مشترک پایگاه داده همگام می کند.

  • پیام هایی که قبلاً در پایگاه داده ایجاد کرده اید باید در برنامه نمایش داده شوند. با خیال راحت پیام های جدید بنویسید. آنها باید فورا ظاهر شوند.
  • اگر فضای کاری خود را در چندین پنجره یا برگه باز کنید، پیام ها در زمان واقعی در بین برگه ها همگام می شوند.
  • (اختیاری) می توانید مستقیماً در بخش پایگاه داده کنسول Firebase، پیام های جدید را حذف، اصلاح یا اضافه کنید. هر تغییری باید در UI ظاهر شود.

تبریک می گویم! شما در حال خواندن اسناد Cloud Firestore در برنامه خود هستید!

پیش نمایش برنامه

اسکرین شات از این مرحله

9. قوانین اساسی امنیتی را تنظیم کنید

شما در ابتدا Cloud Firestore را برای استفاده از حالت تست تنظیم کردید، به این معنی که پایگاه داده شما برای خواندن و نوشتن باز است. با این حال، شما فقط باید از حالت تست در مراحل اولیه توسعه استفاده کنید. به عنوان بهترین روش، هنگام توسعه برنامه خود، باید قوانین امنیتی را برای پایگاه داده خود تنظیم کنید. امنیت باید در ساختار و رفتار برنامه شما یکپارچه باشد.

قوانین امنیتی به شما امکان می دهد دسترسی به اسناد و مجموعه های موجود در پایگاه داده خود را کنترل کنید. سینتکس قوانین انعطاف پذیر به شما امکان می دهد قوانینی ایجاد کنید که هر چیزی را از همه نوشته ها گرفته تا کل پایگاه داده تا عملیات روی یک سند خاص مطابقت دهد.

می توانید قوانین امنیتی برای Cloud Firestore را در کنسول Firebase بنویسید:

  1. در بخش ساخت کنسول Firebase، روی Firestore Database کلیک کنید، سپس برگه Rules را انتخاب کنید (یا اینجا را کلیک کنید تا مستقیماً به برگه Rules بروید).
  2. باید قوانین امنیتی پیش‌فرض زیر را با محدودیت زمانی دسترسی عمومی چند هفته از امروز مشاهده کنید.

اسکرین شات از این مرحله

مجموعه ها را شناسایی کنید

ابتدا مجموعه هایی را که برنامه داده ها را در آنها می نویسد، شناسایی کنید.

  1. بند match /{document=**} حذف کنید، بنابراین قوانین شما به این صورت است:
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
  2. در 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 تأیید هویت منطبق باشد.

  1. مطابق شکل زیر قوانین خواندن و نوشتن را به مجموعه قوانین خود اضافه کنید:
    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;
    }
  }
}
  2. برای استقرار قوانین جدید خود، روی انتشار کلیک کنید. اکنون، برای دفترچه مهمان، فقط کاربرانی که وارد سیستم شده اند می توانند پیام ها را بخوانند (هر پیامی!)، اما شما فقط می توانید با استفاده از شناسه کاربری خود پیام ایجاد کنید. ما همچنین اجازه ویرایش یا حذف پیام ها را نمی دهیم.

قوانین اعتبار سنجی را اضافه کنید

  1. برای اطمینان از وجود تمام فیلدهای مورد انتظار در سند، اعتبارسنجی داده را اضافه کنید:
    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;
    }
  }
}
  2. برای استقرار قوانین جدید خود روی انتشار کلیک کنید.

شنوندگان را بازنشانی کنید

از آنجایی که برنامه شما اکنون فقط به کاربران احراز هویت شده اجازه ورود به سیستم را می دهد، باید جستار firestore کتاب مهمان را به داخل شنونده Authentication منتقل کنید. در غیر این صورت، خطاهای مجوز رخ می دهد و با خروج کاربر، برنامه قطع می شود.

  1. در StackBlitz به فایل index.js بروید.
  2. مجموعه کتاب مهمان را در شنونده onSnapshot به یک تابع جدید به نام 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);
    });
  });
}
  3. یک تابع جدید به نام 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. مرحله پاداش: آنچه را که آموخته اید تمرین کنید

وضعیت RSVP یک شرکت کننده را ثبت کنید

در حال حاضر، برنامه شما فقط به افراد این امکان را می دهد که در صورت علاقه مندی به رویداد، چت را شروع کنند. همچنین، تنها راهی که می‌توانید از آمدن کسی مطلع شوید این است که آن را در چت پست کند. بیایید سازماندهی کنیم و به مردم اطلاع دهیم که چند نفر می آیند.

برای ثبت نام افرادی که می خواهند در این رویداد شرکت کنند، یک کلید اضافه می کنید، سپس تعداد افرادی را که می آیند جمع آوری کنید.

  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>
<!-- ... -->

پیش نمایش برنامه

اسکرین شات از این مرحله

بعد، شنونده را برای کلیک دکمه ثبت کنید. اگر کاربر YES را کلیک کرد، سپس از Authentication UID خود برای ذخیره پاسخ در پایگاه داده استفاده کنید.

  1. در StackBlitz به فایل index.js بروید.
  2. در بالا، عبارت firebase/firestore import را پیدا کنید، سپس 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، یک مرجع سند ثبت کنید. بسته به اینکه روی کدام دکمه کلیک شده است، آن مرجع را روی 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 اضافه شود.

  1. برای مجموعه attendees ، از آنجایی که شما از Authentication 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;
    }
  }
}
  2. برای استقرار قوانین جدید خود روی انتشار کلیک کنید.

قوانین اعتبار سنجی را اضافه کنید

  1. برای اطمینان از وجود تمام فیلدهای مورد انتظار در سند، برخی از قوانین اعتبارسنجی داده را اضافه کنید:
    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;

    }
  }
}
  2. فراموش نکنید که برای استقرار قوانین خود روی انتشار کلیک کنید!

(اختیاری) اکنون می توانید نتایج کلیک روی دکمه ها را مشاهده کنید. به داشبورد Cloud Firestore خود در کنسول Firebase بروید.

وضعیت RSVP را بخوانید

اکنون که پاسخ‌ها را ثبت کرده‌اید، بیایید ببینیم چه کسی می‌آید و آن را در UI منعکس می‌کنیم.

  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. در پایین تابع 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. توابع را از شنونده Authentication فراخوانی کنید.
    // ...
// 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();
      // Subscribe 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. سعی کنید به عنوان چند کاربر وارد سیستم شوید و مشاهده کنید که با هر کلیک دکمه بله اضافی، تعداد آنها افزایش می یابد.

پیش نمایش برنامه

اسکرین شات از این مرحله

11. تبریک می گویم!

شما از Firebase برای ساختن یک برنامه وب تعاملی و بلادرنگ استفاده کرده اید!

آنچه را پوشش داده ایم

  • احراز هویت Firebase
  • FirebaseUI
  • Cloud Firestore
  • قوانین امنیتی Firebase

مراحل بعدی

  • آیا می‌خواهید درباره گردش کار توسعه‌دهنده Firebase بیشتر بدانید؟ برای آشنایی با نحوه آزمایش و اجرای برنامه خود به صورت کاملاً محلی، کد لبه شبیه ساز Firebase را بررسی کنید.
  • آیا می خواهید درباره سایر محصولات Firebase بیشتر بدانید؟ شاید بخواهید فایل های تصویری را که کاربران آپلود می کنند ذخیره کنید؟ یا برای کاربران خود نوتیفیکیشن بفرستید؟ برای مشاهده یک کد لبه وب Firebase که در بسیاری از محصولات Firebase برای وب عمیق‌تر می‌شود، بررسی کنید.
  • آیا می خواهید درباره Cloud Firestore بیشتر بدانید؟ شاید بخواهید در مورد زیر مجموعه ها و تراکنش ها بیاموزید؟ برای یافتن کدهایی که در Cloud Firestore عمیق‌تر می‌شود، به آزمایشگاه کد وب Cloud Firestore بروید. یا برای آشنایی با Cloud Firestore این مجموعه YouTube را بررسی کنید!

بیشتر بدانید

چطور گذشت؟

بازخورد شما را دوست داریم! لطفاً یک فرم (بسیار) کوتاه را در اینجا پر کنید.