این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

۱. مرور کلی

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

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

آنچه یاد خواهید گرفت

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

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

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

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

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

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

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

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

اکنون یک کپی از کد اولیه به عنوان پروژه StackBlitz خود دارید که دارای نام منحصر به فرد و یک URL منحصر به فرد است. تمام فایل‌ها و تغییرات شما در این پروژه StackBlitz ذخیره می‌شوند.

۳. اطلاعات رویداد را ویرایش کنید

مواد اولیه برای این آزمایشگاه کد، ساختاری برای برنامه وب فراهم می‌کنند، از جمله برخی از شیوه‌نامه‌ها و چند کانتینر HTML برای برنامه. بعداً در این آزمایشگاه کد، این کانتینرها را به Firebase متصل خواهید کرد.

برای شروع، بیایید کمی بیشتر با رابط کاربری StackBlitz آشنا شویم.

در StackBlitz، فایل index.html را باز کنید.
event-details-container و description-container را پیدا کنید، سپس سعی کنید جزئیات برخی از رویدادها را ویرایش کنید.

همزمان با ویرایش متن، بارگذاری مجدد خودکار صفحه در StackBlitz جزئیات رویداد جدید را نمایش می‌دهد. عالیه، نه؟

<!-- ... -->

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

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

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

  </section>

  <hr>

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

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

<!-- ... -->

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

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

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

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

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

ایجاد یک پروژه فایربیس

با استفاده از حساب گوگل خود وارد کنسول فایربیس شوید.
برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، Firebase-Web-Codelab ).
روی ادامه کلیک کنید.
در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
(اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

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

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

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

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

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

برای اینکه کاربران بتوانند به برنامه وب وارد شوند، از متد ورود با ایمیل/رمز عبور برای این codelab استفاده خواهید کرد:

در پنل سمت چپ کنسول Firebase، روی Build > Authentication کلیک کنید. سپس روی Get Started کلیک کنید. اکنون در داشبورد Authentication هستید، جایی که می‌توانید کاربران ثبت‌نام‌شده را ببینید، ارائه‌دهندگان ورود را پیکربندی کنید و تنظیمات را مدیریت کنید.
برگه «روش ورود» را انتخاب کنید (یا برای رفتن مستقیم به آن برگه ، اینجا کلیک کنید ).
از گزینه‌های ارائه‌دهنده، روی ایمیل/رمز عبور کلیک کنید، سوئیچ را به فعال کردن تغییر دهید و سپس روی ذخیره کلیک کنید.

راه اندازی کلود فایر استور

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

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

در پنل سمت چپ کنسول Firebase، گزینه Build را باز کرده و سپس Firestore database را انتخاب کنید.
روی ایجاد پایگاه داده کلیک کنید.
شناسه پایگاه داده را روی (default) تنظیم کنید.
مکانی را برای پایگاه داده خود انتخاب کنید، سپس روی Next کلیک کنید.
برای یک اپلیکیشن واقعی، شما می‌خواهید مکانی را انتخاب کنید که به کاربرانتان نزدیک باشد.
روی شروع در حالت آزمایشی کلیک کنید. سلب مسئولیت مربوط به قوانین امنیتی را مطالعه کنید.
بعداً در این آزمایشگاه کد، قوانین امنیتی را برای ایمن‌سازی داده‌های خود اضافه خواهید کرد. بدون اضافه کردن قوانین امنیتی برای پایگاه داده خود، برنامه را به صورت عمومی توزیع یا افشا نکنید .
روی ایجاد کلیک کنید.

۵. اضافه کردن و پیکربندی فایربیس

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

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

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

StackBlitz قابلیت بسته‌بندی خودکار را فراهم می‌کند، بنابراین می‌توانید کتابخانه‌های Firebase را با استفاده از دستورات import اضافه کنید. شما از نسخه‌های ماژولار (v9) کتابخانه‌ها استفاده خواهید کرد که به کاهش حجم کلی صفحه وب از طریق فرآیندی به نام "tree shake" کمک می‌کنند. می‌توانید اطلاعات بیشتری در مورد 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 خود اضافه کنید

به کنسول فایربیس برگردید، با کلیک روی نمای کلی پروژه در بالا سمت چپ، به صفحه نمای کلی پروژه خود بروید.
در مرکز صفحه نمای کلی پروژه خود، روی نماد وب کلیک کنید برای ایجاد یک برنامه وب جدید Firebase.
برنامه را با نام مستعار Web App ثبت کنید.
برای این codelab، کادر کنار Also set up Firebase Hosting for this app را علامت نزنید. فعلاً از صفحه پیش‌نمایش StackBlitz استفاده خواهید کرد.
روی ثبت برنامه کلیک کنید.
Stackblitz وابستگی‌های شما را مدیریت می‌کند، بنابراین می‌توانید از مرحله npm install firebase که در کنسول نمایش داده می‌شود، صرف نظر کنید.
شیء پیکربندی Firebase را در کلیپ‌بورد خود کپی کنید.
برای کنسول روی ادامه کلیک کنید. شیء پیکربندی Firebase را به برنامه خود اضافه کنید:
به StackBlitz برگردید، به فایل index.js بروید.
خط توضیحات Add Firebase project configuration object here را پیدا کنید، سپس قطعه کد پیکربندی خود را درست زیر توضیحات قرار دهید.

برای راه‌اندازی 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);

اگر قطعه کد firebaseConfig را از دست داده‌اید (یا در یک نقطه‌ی بازرسی به آن نیاز دارید)...

شما می‌توانید شیء پیکربندی پروژه فایربیس خود را از کنسول فایربیس دریافت کنید.

در کنسول Firebase، روی آیکون تنظیمات در گوشه بالا سمت چپ کلیک کنید، سپس تنظیمات پروژه (Project settings) را انتخاب کنید.
در برگه عمومی ، به پایین اسکرول کنید تا به کارت «برنامه‌های شما» برسید.
روی برنامه وب خود کلیک کنید، سپس گزینه پیکربندی (Config) را برای قطعه کد Firebase SDK انتخاب کنید.
کل قطعه تنظیمات را در کلیپ‌بورد خود کپی کنید.

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

۶. افزودن ورود کاربر (RSVP)

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

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

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

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

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

در StackBlitz، به فایل index.js بروید.

در بالا، عبارت import مربوط به firebase/auth را پیدا کنید، سپس getAuth و EmailAuthProvider را مانند زیر اضافه کنید:

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

import {} from 'firebase/firestore';

درست بعد از initializeApp ، یک ارجاع به شیء auth به صورت زیر ذخیره کنید:
```
initializeApp(firebaseConfig);
auth = getAuth();
```
توجه داشته باشید که پیکربندی FirebaseUI از قبل در کد اولیه ارائه شده است. از قبل تنظیم شده است که از ارائه دهنده احراز هویت ایمیل استفاده کند.

در پایین تابع main() در index.js ، عبارت مقداردهی اولیه FirebaseUI را به صورت زیر اضافه کنید:

async function main() {
  // ...

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

دکمه RSVP را به HTML اضافه کنید

در StackBlitz، به فایل index.html بروید.
کد HTML مربوط به دکمه RSVP را همانطور که در مثال زیر نشان داده شده است، درون event-details-container اضافه کنید.

مراقب باشید که از همان مقادیر id که در زیر نشان داده شده است استفاده کنید، زیرا برای این آزمایشگاه کد، از قبل قلاب‌هایی برای این شناسه‌های خاص در فایل index.js وجود دارد.

توجه داشته باشید که در فایل index.html ، یک کانتینر با شناسه firebaseui-auth-container وجود دارد. این شناسه‌ای است که برای نگهداری اطلاعات ورود خود به FirebaseUI ارسال خواهید کرد.
```


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

```
پیش‌نمایش برنامه
یک شنونده (listener) روی دکمه‌ی RSVP تنظیم کنید و تابع شروع FirebaseUI را فراخوانی کنید. این به FirebaseUI می‌گوید که می‌خواهید پنجره‌ی ورود به سیستم را ببینید.

کد زیر را به انتهای تابع main() در index.js اضافه کنید:
```
async function main() {
  // ...

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

ورود آزمایشی به برنامه

در پنجره پیش‌نمایش StackBlitz، برای ورود به برنامه، روی دکمه RSVP کلیک کنید.
- برای این codelab، می‌توانید از هر آدرس ایمیلی، حتی یک آدرس ایمیل جعلی، استفاده کنید، زیرا مرحله تأیید ایمیل را برای این codelab تنظیم نمی‌کنید.
- اگر پیام خطایی با مضمون auth/operation-not-allowed یا The given sign-in provider is disabled for this Firebase project مشاهده کردید، بررسی کنید که Email/Password را به عنوان ارائه دهنده ورود به سیستم در کنسول Firebase فعال کرده باشید.
پیش‌نمایش برنامه
به داشبورد احراز هویت در کنسول فایربیس بروید. در تب کاربران ، باید اطلاعات حسابی را که برای ورود به برنامه وارد کرده‌اید، ببینید.

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

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

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

در StackBlitz، به فایل index.js بروید.

در بالا، عبارت import مربوط به firebase/auth را پیدا کنید، سپس signOut و onAuthStateChanged مانند زیر اضافه کنید:

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

import {} from 'firebase/firestore';

کد زیر را در انتهای تابع main() اضافه کنید:

async function main() {
  // ...

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

در شنونده دکمه، بررسی کنید که آیا کاربر فعلی وجود دارد و او را از سیستم خارج کنید. برای انجام این کار، startRsvpButton.addEventListener فعلی را با کد زیر جایگزین کنید :

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

حالا، دکمه‌ی موجود در برنامه‌ی شما باید عبارت LOGOUT را نشان دهد و وقتی روی آن کلیک شود، باید به RSVP برگردد.

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

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

۷. ارسال پیام به Cloud Firestore

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

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

مدل داده

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

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

اضافه کردن پیام به Firestore

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

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

در StackBlitz، به فایل index.html بروید.

فایل guestbook-container را پیدا کنید، سپس کد HTML زیر را برای ایجاد فرمی با فیلد ورودی پیام و دکمه ارسال، اضافه کنید.

<!-- ... -->

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

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

 </section>

<!-- ... -->

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

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

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

در StackBlitz، به فایل index.js بروید.

در بالا، عبارت import مربوط به 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';

اکنون درست پس از initializeApp یک ارجاع به شیء db Firestore ذخیره خواهیم کرد:
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

در انتهای تابع 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 وجود دارد.)

در StackBlitz، به فایل index.js بروید.

برای مخفی کردن و نمایش دادن guestbook، شنونده‌ی onAuthStateChanged را ویرایش کنید.

// ...

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

تست ارسال پیام

مطمئن شوید که وارد برنامه شده‌اید.
پیامی مانند «سلام!» وارد کنید، سپس روی «ارسال» کلیک کنید.

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

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

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

کنسول فایربیس

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

۸. خواندن پیام‌ها

همگام‌سازی پیام‌ها

خیلی خوبه که مهمان‌ها می‌تونن توی پایگاه داده پیام بنویسن، اما هنوز نمی‌تونن اون‌ها رو توی برنامه ببینن.

برای نمایش پیام‌ها، باید شنونده‌هایی اضافه کنید که هنگام تغییر داده‌ها فعال شوند، سپس یک عنصر رابط کاربری ایجاد کنید که پیام‌های جدید را نشان دهد.

شما کدی اضافه خواهید کرد که پیام‌های جدید اضافه شده از برنامه را دریافت می‌کند. ابتدا، بخشی را در HTML برای نمایش پیام‌ها اضافه کنید:

در StackBlitz، به فایل index.html بروید.

در guestbook-container ، یک بخش جدید با شناسه guestbook اضافه کنید.

<!-- ... -->

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

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

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

 </section>

<!-- ... -->

در مرحله بعد، شنونده‌ای را ثبت کنید که تغییرات ایجاد شده در داده‌ها را شنود می‌کند:

در StackBlitz، به فایل index.js بروید.
در بالا، عبارت import مربوط به firebase/firestore را پیدا کنید، سپس query ، orderBy و onSnapshot به صورت زیر اضافه کنید:
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

در پایین تابع main() ، کد زیر را برای پیمایش تمام اسناد (پیام‌های guestbook) در پایگاه داده اضافه کنید. برای کسب اطلاعات بیشتر در مورد آنچه در این کد اتفاق می‌افتد، اطلاعات زیر قطعه کد را بخوانید.

async function main() {
  // ...

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

برای گوش دادن به پیام‌های موجود در پایگاه داده، با استفاده از تابع collection ، یک کوئری روی یک مجموعه خاص ایجاد کرده‌اید. کد بالا به تغییرات در مجموعه guestbook گوش می‌دهد، جایی که پیام‌های چت ذخیره می‌شوند. پیام‌ها همچنین بر اساس تاریخ مرتب می‌شوند و از orderBy('timestamp', 'desc') برای نمایش جدیدترین پیام‌ها در بالا استفاده می‌شود.

تابع onSnapshot دو پارامتر می‌گیرد: پرس‌وجوی مورد استفاده و یک تابع فراخوانی. تابع فراخوانی زمانی فعال می‌شود که هرگونه تغییری در اسناد مطابق با پرس‌وجو ایجاد شود. این می‌تواند زمانی باشد که پیامی حذف، اصلاح یا اضافه شود. برای اطلاعات بیشتر، به مستندات Cloud Firestore مراجعه کنید.

تست همگام‌سازی پیام‌ها

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

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

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

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

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

۹. قوانین امنیتی اولیه را تنظیم کنید

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

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

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

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

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

شناسایی مجموعه‌ها

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

عبارت match /{document=**} موجود را حذف کنید، تا قوانین شما به این شکل باشند:
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}
```

در match /databases/{database}/documents ، مجموعه‌ای را که می‌خواهید ایمن کنید، مشخص کنید:

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

اضافه کردن قوانین امنیتی

از آنجا که شما از شناسه کاربری احراز هویت (Authentication UID) به عنوان یک فیلد در هر سند guestbook استفاده کرده‌اید، می‌توانید شناسه کاربری احراز هویت را دریافت کرده و تأیید کنید که هر کسی که سعی در نوشتن در سند دارد، دارای شناسه کاربری احراز هویت منطبق است.

قوانین خواندن و نوشتن را مطابق شکل زیر به مجموعه قوانین خود اضافه کنید:

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

برای اعمال قوانین جدید خود، روی انتشار کلیک کنید.

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

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

در StackBlitz، به فایل index.js بروید.

مجموعه شنونده‌ی onSnapshot مربوط به guestbook را به تابع جدیدی به نام subscribeGuestbook منتقل کنید. همچنین، نتایج تابع onSnapshot را به متغیر guestbookListener اختصاص دهید.

شنونده‌ی onSnapshot مربوط به Firestore یک تابع لغو اشتراک (unsubscribe) برمی‌گرداند که می‌توانید بعداً از آن برای لغو شنونده‌ی snapshot استفاده کنید.

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

یک تابع جدید به نام unsubscribeGuestbook در زیر اضافه کنید. بررسی کنید که آیا متغیر guestbookListener تهی (null) نیست، سپس تابع را برای لغو شنونده (listener) فراخوانی کنید.
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

در نهایت، توابع جدید را به تابع فراخوانی onAuthStateChanged اضافه کنید.

subscribeGuestbook() در انتهای if (user) اضافه کنید.

unsubscribeGuestbook() را در انتهای عبارت else اضافه کنید.

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

۱۰. مرحله‌ی اضافه: آموخته‌هایتان را تمرین کنید

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

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

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

در StackBlitz، به فایل index.html بروید.

در guestbook-container ، مجموعه‌ای از دکمه‌های بله و خیر را مانند زیر اضافه کنید:

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

   <h2>Discussion</h2>

   <!-- ... -->

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

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

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

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

در StackBlitz، به فایل index.js بروید.

در بالا، عبارت import مربوط به firebase/firestore را پیدا کنید، سپس doc ، setDoc و where به صورت زیر اضافه کنید:

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

در پایین تابع main() ، کد زیر را برای گوش دادن به وضعیت RSVP اضافه کنید:

async function main() {
  // ...

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

در مرحله بعد، یک مجموعه جدید به نام attendees ایجاد کنید، سپس در صورت کلیک بر روی هر یک از دکمه‌های RSVP، یک مرجع سند ثبت کنید. بسته به اینکه کدام دکمه کلیک شده است، آن مرجع را روی true یا false تنظیم کنید.

اول، برای rsvpYes :

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

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

سپس، همین کار را برای rsvpNo انجام دهید، اما با مقدار false :

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

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

قوانین امنیتی خود را به‌روزرسانی کنید

از آنجا که شما از قبل برخی قوانین را تنظیم کرده‌اید، داده‌های جدیدی که با دکمه‌ها اضافه می‌کنید، رد خواهند شد.

اجازه اضافه کردن افراد به مجموعه `attendees`

برای اینکه بتوانید به مجموعه attendees اضافه کنید، باید قوانین را به‌روزرسانی کنید.

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

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

برای اطمینان از وجود تمام فیلدهای مورد انتظار در سند، چند قانون اعتبارسنجی داده اضافه کنید:

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

    }
  }
}

فراموش نکنید که برای اعمال قوانین خود، روی انتشار کلیک کنید!

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

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

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

در StackBlitz، به فایل index.html بروید.

در description-container ، یک عنصر جدید با شناسه‌ی number-attending اضافه کنید.

<!-- ... -->

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

<!-- ... -->

در مرحله بعد، شنونده را برای مجموعه attendees ثبت کنید و تعداد پاسخ‌های بله را بشمارید:

در StackBlitz، به فایل index.js بروید.

در پایین تابع main() ، کد زیر را اضافه کنید تا وضعیت RSVP را بررسی کرده و کلیک‌های YES را بشمارد.

async function main() {
  // ...

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

در نهایت، دکمه مربوط به وضعیت فعلی را هایلایت می‌کنیم.

تابعی ایجاد کنید که بررسی کند آیا شناسه کاربری احراز هویت فعلی (Authentication UID) در مجموعه attendees ورودی دارد یا خیر، سپس کلاس دکمه (button) را روی clicked تنظیم کنید.

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

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

همچنین، بیایید یک تابع برای لغو اشتراک ایجاد کنیم. این تابع هنگام خروج کاربر استفاده خواهد شد.

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

توابع را از شنونده‌ی احراز هویت (Authentication listener) فراخوانی کنید.

// ...
// 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();
    }
  });

سعی کنید با چندین کاربر وارد سیستم شوید و ببینید که با هر کلیک اضافی روی دکمه YES، تعداد کاربران افزایش می‌یابد.

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

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

۱۱. تبریک می‌گویم!

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

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

احراز هویت فایربیس
رابط کاربری فایربیس
فروشگاه ابری فایر استور
قوانین امنیتی فایربیس

مراحل بعدی

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

بیشتر بدانید

سایت فایربیس: firebase.google.com
کانال یوتیوب فایربیس

چطور پیش رفت؟

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

Firebase for web را بشناسید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

۱. مرور کلی

آنچه یاد خواهید گرفت

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

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

۳. اطلاعات رویداد را ویرایش کنید

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

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

ایجاد یک پروژه فایربیس

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

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

راه اندازی کلود فایر استور

۵. اضافه کردن و پیکربندی فایربیس

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

یک برنامه وب Firebase را به پروژه Firebase خود اضافه کنید

۶. افزودن ورود کاربر (RSVP)

کاربران خود را با ورود به سیستم از طریق ایمیل و FirebaseUI تأیید اعتبار کنید

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

دکمه RSVP را به HTML اضافه کنید

ورود آزمایشی به برنامه

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

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

۷. ارسال پیام به Cloud Firestore

مدل داده

اضافه کردن پیام به Firestore

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

نمایش دفتر مهمان فقط برای کاربران وارد شده

تست ارسال پیام

کنسول فایربیس

۸. خواندن پیام‌ها

همگام‌سازی پیام‌ها

تست همگام‌سازی پیام‌ها

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

۹. قوانین امنیتی اولیه را تنظیم کنید

شناسایی مجموعه‌ها

اضافه کردن قوانین امنیتی

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

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

۱۰. مرحله‌ی اضافه: آموخته‌هایتان را تمرین کنید

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

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

قوانین امنیتی خود را به‌روزرسانی کنید

اجازه اضافه کردن افراد به مجموعه attendees

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

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

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

۱۱. تبریک می‌گویم!

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

مراحل بعدی

بیشتر بدانید

چطور پیش رفت؟

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

اجازه اضافه کردن افراد به مجموعه `attendees`