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

Firebase را برای وب بشناسید

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

59abdefbcc23bbbe.png

آنچه خواهید آموخت

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

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

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

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

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

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

اکنون یک کپی از کد شروع به عنوان پروژه StackBlitz خود دارید. از آنجا که وارد سیستم نشده اید ، حساب شما @anonymous نامیده می شود ، اما پروژه دارای یک نام منحصر به فرد ، همراه با یک URL منحصر به فرد است. تمام پرونده ها و تغییرات شما در این پروژه StackBlitz ذخیره شده است.

مواد اولیه این Codelab برخی از ساختارها را برای برنامه وب فراهم می کند ، از جمله برخی از شیوه نامه ها و چند ظرف HTML برای برنامه. بعداً در این Codelab ، این ظروف را در Firebase قلاب می کنید.

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

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

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

<!-- ... -->

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

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

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

  </section>

  <hr>

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

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



<!-- ... -->

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

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

908cc57ce3a5b5fe.png

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

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

  1. وارد Firebase شوید .
  2. در کنسول Firebase ، روی افزودن پروژه (یا ایجاد پروژه ) کلیک کنید و نام پروژه Firebase خود را Firebase-Web-Codelab بگذارید .

a67c239f8cc7f4b5.png

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

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

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

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

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

ورود به سیستم ایمیل برای تأیید اعتبار Firebase را فعال کنید

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

  1. در کنسول Firebase ، روی توسعه در پانل سمت چپ کلیک کنید.
  2. روی تأیید اعتبار کلیک کنید و سپس روی برگه روش ورود به سیستم کلیک کنید (یا اینجا را کلیک کنید تا مستقیماً به تب روش ورود به سیستم بروید).
  3. روی Email / Password در لیست ارائه دهندگان ورود به سیستم کلیک کنید ، کلید Enable را در موقعیت روشن تنظیم کرده و سپس Save را کلیک کنید. 4c88427cfd869bee.png

Cloud Firestore را فعال کنید

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

فعال کردن Cloud Firestore:

  1. در بخش توسعه کنسول Firebase ، روی پایگاه داده کلیک کنید.
  2. در بخش Cloud Firestore ، روی ایجاد پایگاه داده کلیک کنید. 3ce19fd6467e51c5.png
  1. گزینه Start in test mode را انتخاب کنید. سلب مسئولیت در مورد قوانین امنیتی را بخوانید. حالت آزمون تضمین می کند که در حین توسعه می توانید آزادانه در پایگاه داده بنویسید. روی Next کلیک کنید. 56369cebb9300eb.png
  1. مکان پایگاه داده خود را انتخاب کنید (فقط می توانید از پیش فرض استفاده کنید). توجه داشته باشید که بعداً نمی توان این مکان را تغییر داد. 32f815f4648c3174.png
  2. روی انجام شد کلیک کنید.

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

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

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

StackBlitz بسته بندی خودکار را فراهم می کند ، بنابراین می توانید کتابخانه های Firebase را با استفاده از دستورات import اضافه کنید.

برای ساخت این برنامه ، از کتابخانه های تأیید اعتبار Firebase ، FirebaseUI و Cloud Firestore استفاده می کنید. برای این Codelab ، خطوط زیر قبلاً در بالای پرونده index.js گنجانده شده است:

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

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

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

import * as firebaseui from "firebaseui";

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

  1. دوباره به کنسول Firebase بروید ، با کلیک بر روی نمای اجمالی پروژه در بالا سمت چپ ، به صفحه نمای کلی پروژه خود بروید.
  2. در مرکز صفحه نمای کلی پروژه خود ، روی نماد وب کلیک کنید b286f3d215e1f578.png برای ایجاد یک برنامه وب جدید Firebase. c167e9526fad2825.png
  3. برنامه را با نام مستعار Web App ثبت کنید .
  4. برای این codelab، از کادر کنار همچنین راه اندازی فایربیس میزبانی برای این برنامه را بررسی کنید. در حال حاضر از صفحه پیش نمایش StackBlitz استفاده خواهید کرد.
  5. ثبت برنامه را کلیک کنید. c85ac8aa351e2560.png
  6. شی conf پیکربندی Firebase را در کلیپ بورد کپی کنید. ed1e598c6132f734.png
  7. ادامه برای کنسول را کلیک کنید.

شی conf پیکربندی Firebase را به برنامه خود اضافه کنید:

  1. به StackBlitz برگردید ، به پرونده index.js .
  2. Add Firebase project configuration object here خط نظر قرار دهید و قطعه پیکربندی خود را دقیقاً در زیر نظر جای گذاری کنید.
  3. اضافه کردن initializeApp فراخوانی تابع به راه اندازی فایربیس با استفاده از منحصر به فرد پیکربندی پروژه فایربیس خود را.
// ...

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

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

با ورود به سیستم ایمیل و FirebaseUI ، کاربران خود را تأیید کنید

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

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

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

ابتدا کد را برای شروع FirebaseUI اضافه کنید:

  1. در StackBlitz ، به پرونده index.js . توجه داشته باشید که پیکربندی FirebaseUI از قبل ارائه شده است.
  2. در پایین index.js, دستور اولیه FirebaseUI را اضافه کنید ، مانند این موارد:
// ...
// Initialize the FirebaseUI widget using Firebase
const ui = new firebaseui.auth.AuthUI(firebase.auth());

بعد ، یک دکمه RSVP به HTML اضافه کنید:

  1. در StackBlitz ، به پرونده index.html .
  2. همانطور که در مثال زیر نشان داده شده ، HTML را برای یک دکمه RSVP درون event-details-container کنید.

مراقب باشید از همان مقادیر id استفاده کنید همانطور که در زیر نشان داده شده است زیرا برای این codelab قبلاً قلاب هایی برای این ID های خاص در پرونده index.js وجود دارد.

توجه داشته باشید که در پرونده index.html ، ظرفی با شناسه firebaseui-auth-container . این شناسه ای است که برای نگهداری ورود به سیستم به FirebaseUI منتقل می کنید.

<!-- ... -->

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

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

ab9ad7d61bb7b28c.png

  1. روی دکمه RSVP یک شنونده تنظیم کنید و با عملکرد شروع FirebaseUI تماس بگیرید. این به FirebaseUI می گوید که می خواهید پنجره ورود به سیستم را ببینید. کد زیر را به پایین index.js :
// ... 
// At the bottom

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

ورود به سیستم برنامه را امتحان کنید

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

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

3024f90b52ad55fe.png

682fc0eca86a99fc.png

حالت احراز هویت را به UI اضافه کنید

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

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

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

اکنون دکمه باید LOGOUT را نشان دهد و وقتی روی آن کلیک شد دوباره به RSVP بروید .

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

4c540450924f1607.png

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

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

مدل داده

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

b447950f9f993789.png

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

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

برای افزودن عناصر 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>

<!-- ... -->

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

4a892284443cf73d.png

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

  1. در StackBlitz ، به پرونده index.js .
  2. در پایین فایل ، کد زیر را اضافه کنید.

توجه داشته باشید که firebase.auth().currentUser.uid اشاره ای به شناسه منحصر به فرد تولید شده توسط خودکار است که تأیید اعتبار Firebase برای همه کاربران وارد شده ارائه می دهد.

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

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

شما نمی خواهید فقط کسی گپ مهمانان را ببیند. کاری که می توانید برای ایمن سازی گپ انجام دهید این است که فقط به کاربران وارد شده اجازه مشاهده کتاب مهمان را بدهید. گفته شد ، برای برنامه های خود ، می خواهید پایگاه داده خود را با قوانین امنیتی Firebase نیز ایمن کنید. (اطلاعات بیشتر در مورد قوانین امنیتی بعداً در كد كتاب وجود دارد.)

  1. در StackBlitz ، به پرونده index.js .
  2. شنونده onAuthStateChanged را ویرایش کنید تا کتاب مهمان مخفی شود و نشان داده شود.
// ...
// Listen to the current Auth state
firebase.auth().onAuthStateChanged((user) => {
 if (user){
   startRsvpButton.textContent = "LOGOUT";
   // Show guestbook to logged-in users
   guestbookContainer.style.display = "block";
 }
 else{
   startRsvpButton.textContent = "RSVP";
   // Hide guestbook for non-logged-in users
   guestbookContainer.style.display = "none";
 }
});

ارسال پیام را امتحان کنید

  1. مطمئن شوید که به برنامه وارد شده اید.
  2. پیامی مانند "Hey there!" را وارد کنید و سپس روی SEND کلیک کنید.

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

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

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

کنسول Firebase

713870af0b3b63c.png

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

اینکه مهمان ها می توانند برای پایگاه داده پیام بنویسند بسیار جالب است ، اما هنوز نمی توانند آنها را در برنامه مشاهده کنند.

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

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

  1. در StackBlitz ، به پرونده index.html .
  2. در guestbook-container ، بخش جدیدی با شناسه کتاب guestbook .
<!-- ... -->

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

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

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

 </section>

<!-- ... -->

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

  1. در StackBlitz ، به پرونده index.js .
  2. در پایین فایل ، کد زیر را اضافه کنید تا تمام اسناد (پیام های کتاب مهمان) را در پایگاه داده جستجو کنید:
// ...
// Create query for messages
firebase.firestore().collection("guestbook")
.orderBy("timestamp","desc")
.onSnapshot((snaps) => {
 // Reset page
 guestbook.innerHTML = "";
 // Loop through documents in database
 snaps.forEach((doc) => {
   // Create an HTML entry for each document and add it to the chat
   const entry = document.createElement("p");
   entry.textContent = doc.data().name + ": " + doc.data().text;
   guestbook.appendChild(entry);
 });
});

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

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

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

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

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

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

بررسی برنامه p

e30df0a9614bae7d.png

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

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

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

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

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

از آنجا که شما از Authentication UID به عنوان یک قسمت در هر سند کتاب مهمان استفاده کرده اید ، می توانید Authentication 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 را در onSnapshot تا عملکرد جدیدی به نام subscribeGuestbook باشد. همچنین ، نتایج تابع onSnapshot را به متغیر guestbookListener .

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

// ...
// Listen to guestbook updates
function subscribeGuestbook(){
   // Create query for messages
 guestbookListener = firebase.firestore().collection("guestbook")
 .orderBy("timestamp","desc")
 .onSnapshot((snaps) => {
   // Reset page
   guestbook.innerHTML = "";
   // Loop through documents in database
   snaps.forEach((doc) => {
     // Create an HTML entry for each document and add it to the chat
     const entry = document.createElement("p");
     entry.textContent = doc.data().name + ": " + doc.data().text;
     guestbook.appendChild(entry);
   });
 });
};
  1. در زیر یک عملکرد جدید به نام unsubscribeGuestbook . بررسی کنید که آیا متغیر guestbookListener است یا خیر ، و سپس برای لغو شنونده با عملکرد تماس بگیرید.
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook(){
 if (guestbookListener != null)
 {
   guestbookListener();
   guestbookListener = null;
 }
};
  1. در آخر ، توابع جدید را به فراخوانی onAuthStateChanged کنید (از دو مرحله زیر استفاده کنید).
  2. subscribeGuestbook() در پایین if (user) .
  3. unsubscribeGuestbook() در پایین عبارت else .
// ...
firebase.auth().onAuthStateChanged((user) => {
if (user){
  startRsvpButton.textContent = "LOGOUT";
  // Show guestbook to logged-in users
  guestbookContainer.style.display = "block";

  // Subscribe to the guestbook collection
  subscribeGuestbook();
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
}
});

Firebase یک سرویس میزبانی برای ارائه دارایی های برنامه وب شما ارائه می دهد. با استفاده از رابط خط فرمان Firebase (CLI) می توانید پرونده ها و پیکربندی میزبانی خود را در Firebase Hosting مستقر کنید. اما برای این Codelab شما از StackBlitz استفاده می کنید که Firebase CLI را در فضای کاری خود ادغام کرده است!

می توانید برای ادغام StackBlitz با Firebase StackBlitz به StackBlitz بگویید که می خواهید دارایی ها را در کدام پروژه Firebase مستقر کنید:

  1. اگر قبلاً با GitHub در StackBlitz وارد سیستم نشده اید ، روی « ورود به سیستم» در بالا سمت راست کلیک کنید و سپس اعتبار حساب GitHub خود را وارد کنید.

99a41778bb3c194c.png

  • اگر قبلاً حساب GitHub دارید ، با استفاده از حساب GitHub وارد سیستم شوید.
  • اگر قبلاً حساب GitHub ندارید ، با استفاده از همان آدرس ایمیلی که برای ورود به Firebase استفاده کرده اید ، یک حساب GitHub ایجاد کنید.
  1. اکنون باید یک نماد Firebase در پانل سمت چپ وجود داشته باشد.

2981c2e3ad13c2c1.png 3. ورود به سیستم Google را کلیک کنید. با استفاده از همان آدرس ایمیلی که برای ورود به Firebase استفاده کرده اید وارد سیستم شوید. 4- از لیست پروژه های Firebase ، پروژه Firebase-Web-Codelab خود را انتخاب کنید.

استقرار در Firebase Hosting با StackBlitz به معنای واقعی کلمه یک عمل با یک کلیک است:

  1. در فضای کاری StackBlitz ، روی استقرار در سمت چپ صفحه کلیک کنید. بله ، همین یک گام! 8fe6c0bfc04c8935.png

برای کسب اطلاعات بیشتر در مورد نحوه کار با Firebase Hosting به اسناد مراجعه کنید.

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

وضعیت 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>
<!-- ... -->

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

73ca99ca35c13ee7.png

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

  1. در StackBlitz ، به پرونده index.js .
  2. در پایین پرونده ، کد زیر را برای گوش دادن به وضعیت RSVP اضافه کنید:
// ...

// Listen to RSVP responses
rsvpYes.onclick = () => {
}
rsvpNo.onclick = () => {
}
  1. مجموعه جدیدی به نام attendees ، سپس در صورت کلیک بر روی هر دکمه RSVP ، مرجع سندی را ثبت کنید.
  2. بسته به اینکه روی کدام دکمه کلیک می شود ، آن مرجع را روی true یا false تنظیم کنید.

اول ، برای rsvpYes :

// ...

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

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

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

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

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

قوانین اضافه کنید

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

برای مجموعه attendees ، از آنجا که از 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 را بخوانید

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

  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. در پایین فایل ، برای گوش دادن به وضعیت RSVP و شمارش کلیک های YES ، کد زیر را اضافه کنید.
// ...
// Listen for attendee list
firebase.firestore()
.collection('attendees')
.where("attending", "==", true)
.onSnapshot(snap => {
 const newAttendeeCount = snap.docs.length;

 numberAttending.innerHTML = newAttendeeCount+' people going'; 
})
  1. در آخر ، بیایید دکمه مربوط به وضعیت فعلی را برجسته کنیم. بررسی کنید آیا UID تأیید اعتبار فعلی ورودی در مجموعه attendees یا خیر و سپس کلاس را clicked تنظیم clicked .
// ...
// Listen for attendee list
function subscribeCurrentRSVP(user){
 rsvpListener = firebase.firestore()
 .collection('attendees')
 .doc(user.uid)
 .onSnapshot((doc) => {
   if (doc && doc.data()){
     const attendingResponse = doc.data().attending;

     // Update css classes for buttons
     if (attendingResponse){
       rsvpYes.className="clicked";
       rsvpNo.className="";
     }
     else{
       rsvpYes.className="";
       rsvpNo.className="clicked";
     }
   }
 });
}
  1. همچنین ، بیایید تابعی را برای لغو اشتراک ایجاد کنیم. هنگام خروج کاربر از این مورد استفاده خواهد شد.
// ...

function unsubscribeCurrentRSVP(){
 if (rsvpListener != null)
 {
   rsvpListener();
   rsvpListener = null;
 }
 rsvpYes.className="";
 rsvpNo.className="";
}
  1. توابع را از شنونده احراز هویت فراخوانی کنید.
// ...

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

  // Subscribe to the guestbook collection
  subscribeGuestbook();
  // Subscribe to the guestbook collection
  subscribeCurrentRSVP(user);
}
else{
  startRsvpButton.textContent = "RSVP";
  // Hide guestbook for non-logged-in users
  guestbookContainer.style.display = "none";

  // Unsubscribe from the guestbook collection
  unsubscribeGuestbook();
  // Unsubscribe from the guestbook collection
  unsubscribeCurrentRSVP();

}
});
  1. به عنوان چندین کاربر وارد سیستم شوید و با هر کلیک اضافی بر روی دکمه YES ، تعداد را مشاهده کنید.

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

3df607d3e0b3c35.png

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

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

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

مراحل بعدی

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

بیشتر بدانید

چطور شد؟

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