کد لبه وب Firebase

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

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

3b1284f5144b54f6.png

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

  • همگام سازی داده ها با استفاده از Cloud Firestore و Cloud Storage برای Firebase.
  • با استفاده از Firebase Authentication کاربران خود را احراز هویت کنید.
  • برنامه وب خود را در میزبانی Firebase مستقر کنید.
  • اعلان‌ها را با Firebase Cloud Messaging ارسال کنید.
  • داده های عملکرد برنامه وب خود را جمع آوری کنید.

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

  • ویرایشگر IDE/متن انتخابی شما، مانند WebStorm ، Atom ، Sublime یا VS Code
  • مدیر بسته npm ، که معمولاً با Node.js ارائه می شود
  • یک ترمینال/کنسول
  • مرورگر دلخواه شما، مانند کروم
  • کد نمونه کد لبه (برای نحوه دریافت کد، به مرحله بعدی کد لبه مراجعه کنید.)

2. کد نمونه را دریافت کنید

مخزن GitHub کد لبه را از خط فرمان کلون کنید:

git clone https://github.com/firebase/codelab-friendlychat-web

همچنین، اگر git را نصب نکرده‌اید، می‌توانید مخزن را به‌عنوان یک فایل ZIP دانلود کنید .

برنامه شروع را وارد کنید

با استفاده از IDE خود، دایرکتوری 📁 web-start از مخزن کلون شده باز کنید یا وارد کنید. این 📁 فهرست راه‌اندازی web-start حاوی کد شروع برای کد لبه است که یک برنامه وب چت کاملاً کاربردی خواهد بود.

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

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

  1. وارد Firebase شوید.
  2. در کنسول Firebase، روی Add Project کلیک کنید و سپس نام پروژه Firebase خود را FriendlyChat بگذارید. شناسه پروژه برای پروژه Firebase خود را به خاطر بسپارید.
  3. تیک Enable Google Analytics را برای این پروژه بردارید
  4. روی ایجاد پروژه کلیک کنید.

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

  • Firebase Authentication به کاربران شما اجازه می دهد به راحتی وارد برنامه شما شوند.
  • Cloud Firestore برای ذخیره داده های ساختاریافته در فضای ابری و دریافت اعلان فوری هنگام تغییر داده ها.
  • Cloud Storage برای Firebase برای ذخیره فایل‌ها در فضای ابری.
  • میزبانی Firebase برای میزبانی و خدمات رسانی به دارایی های شما.
  • Firebase Cloud Messaging برای ارسال اعلان‌های فشاری و نمایش اعلان‌های بازشوی مرورگر.
  • نظارت بر عملکرد Firebase برای جمع آوری داده های عملکرد کاربر برای برنامه شما.

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

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

  1. روی نماد وب کلیک کنید 58d6543a156e56f9.png برای ایجاد یک برنامه وب Firebase جدید.
  2. برنامه را با نام مستعار Friendly Chat ثبت کنید، سپس کادر کناری همچنین راه اندازی میزبانی Firebase برای این برنامه را علامت بزنید. روی ثبت برنامه کلیک کنید.
  3. در مرحله بعد، یک شی پیکربندی را مشاهده خواهید کرد. فقط شی JS (نه HTML اطراف) را در firebase-config.js کپی کنید

ثبت اسکرین شات برنامه وب

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

برای اینکه کاربران بتوانند با حساب‌های Google خود وارد برنامه وب شوند، از روش ورود به سیستم Google استفاده می‌کنیم.

شما باید ورود به سیستم Google را فعال کنید:

  1. در کنسول Firebase، قسمت Build را در پانل سمت چپ قرار دهید.
  2. روی تأیید هویت کلیک کنید، سپس روی برگه روش ورود به سیستم کلیک کنید (یا اینجا را کلیک کنید تا مستقیماً به آنجا بروید).
  3. ارائه دهنده ورود به سیستم Google را فعال کنید، سپس روی ذخیره کلیک کنید.
  4. نام عمومی برنامه خود را روی چت دوستانه تنظیم کنید و یک ایمیل پشتیبانی پروژه را از منوی کشویی انتخاب کنید.
  5. صفحه رضایت OAuth خود را در Google Cloud Console پیکربندی کنید و یک نشان‌واره اضافه کنید:

d89fb3873b5d36ae.png

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

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

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

  1. در بخش ساخت کنسول Firebase، روی Firestore Database کلیک کنید.
  2. روی ایجاد پایگاه داده در پنجره Cloud Firestore کلیک کنید.

729991a081e7cd5.png

  1. گزینه Start in test mode را انتخاب کنید و بعد از خواندن سلب مسئولیت در مورد قوانین امنیتی روی Next کلیک کنید.

حالت تست تضمین می کند که می توانیم آزادانه در طول توسعه در پایگاه داده بنویسیم. ما پایگاه داده خود را بعداً در این Codelab ایمن تر خواهیم کرد.

77e4986cbeaf9dee.png

  1. مکان ذخیره داده های Cloud Firestore خود را تنظیم کنید. می توانید این را به عنوان پیش فرض بگذارید یا منطقه ای نزدیک به خود انتخاب کنید. برای ارائه Firestore روی Done کلیک کنید.

9f2bb0d4e7ca49c7.png

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

برنامه وب از Cloud Storage برای Firebase برای ذخیره، آپلود و اشتراک‌گذاری تصاویر استفاده می‌کند.

باید Cloud Storage را فعال کنید:

  1. در بخش ساخت کنسول Firebase، روی Storage کلیک کنید.
  2. اگر دکمه Get Started وجود نداشته باشد، به این معنی است که فضای ذخیره سازی ابری از قبل فعال شده است و نیازی نیست مراحل زیر را دنبال کنید.
  3. روی Get Started کلیک کنید.
  4. سلب مسئولیت در مورد قوانین امنیتی پروژه Firebase خود را بخوانید، سپس روی Next کلیک کنید.

با قوانین امنیتی پیش‌فرض، هر کاربر احراز هویت شده می‌تواند هر چیزی را در Cloud Storage بنویسد. بعداً در این Codelab فضای ذخیره‌سازی خود را ایمن‌تر خواهیم کرد.

62f1afdcd1260127.png

  1. مکان Cloud Storage با همان منطقه ای که برای پایگاه داده Cloud Firestore خود انتخاب کرده اید از پیش انتخاب شده است. برای تکمیل تنظیمات روی Done کلیک کنید.

1d7f49ebaddb32fc.png

4. رابط خط فرمان Firebase را نصب کنید

رابط خط فرمان Firebase (CLI) به شما امکان می دهد از میزبانی Firebase برای ارائه برنامه وب خود به صورت محلی و همچنین برای استقرار برنامه وب خود در پروژه Firebase خود استفاده کنید.

  1. CLI را با اجرای دستور npm زیر نصب کنید:
npm -g install firebase-tools
  1. با اجرای دستور زیر اطمینان حاصل کنید که CLI به درستی نصب شده است:
firebase --version

مطمئن شوید که نسخه Firebase CLI نسخه 4.1.0 یا بالاتر باشد.

  1. با اجرای دستور زیر Firebase CLI را مجاز کنید:
firebase login

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

  1. مطمئن شوید که خط فرمان شما به دایرکتوری web-start محلی برنامه شما دسترسی دارد.
  2. برنامه خود را با اجرای دستور زیر با پروژه Firebase خود مرتبط کنید:
firebase use --add
  1. وقتی از شما خواسته شد، شناسه پروژه خود را انتخاب کنید، سپس به پروژه Firebase خود یک نام مستعار بدهید.

اگر چندین محیط (تولید، صحنه سازی و غیره) دارید، نام مستعار مفید است. با این حال، برای این کد لبه، اجازه دهید فقط از نام مستعار default استفاده کنیم.

  1. دستورالعمل های باقی مانده را در خط فرمان خود دنبال کنید.

5. برنامه استارتر را به صورت محلی اجرا کنید

اکنون که پروژه خود را وارد و پیکربندی کرده اید، برای اولین بار آماده اجرای برنامه وب هستید.

  1. در یک کنسول از پوشه web-start ، دستور Firebase CLI زیر را اجرا کنید:
firebase serve --only hosting
  1. خط فرمان شما باید پاسخ زیر را نمایش دهد:
✔  hosting: Local server: http://localhost:5000

ما از شبیه ساز میزبانی Firebase برای ارائه برنامه خود به صورت محلی استفاده می کنیم. اکنون برنامه وب باید از http://localhost:5000 در دسترس باشد. تمام فایل هایی که در زیر شاخه public قرار دارند سرویس می شوند.

  1. با استفاده از مرورگر خود، برنامه خود را در http://localhost:5000 باز کنید.

شما باید رابط کاربری برنامه FriendlyChat خود را ببینید که (هنوز!) کار نمی کند:

4c23f9475228cef4.png

برنامه در حال حاضر نمی تواند کاری انجام دهد، اما با کمک شما به زودی انجام خواهد شد! ما تا کنون فقط رابط کاربری را برای شما قرار داده ایم.

بیایید اکنون یک چت بیدرنگ بسازیم!

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

Firebase SDK را وارد کنید

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

می‌خواهیم Firebase SDK را از npm دریافت کنیم و از Webpack برای بسته‌بندی کدمان استفاده کنیم. ما این کار را انجام می دهیم تا Webpack بتواند هر کد غیر ضروری را حذف کند و اندازه بسته JS ما را کوچک نگه دارد تا مطمئن شویم برنامه ما در سریع ترین زمان ممکن بارگیری می شود. برای این کد لبه، ما قبلاً یک web-start/package.json ایجاد کرده‌ایم که شامل Firebase SDK به عنوان یک وابستگی است، و همچنین توابع مورد نیاز را در بالای web-start/src/index.js وارد کرده‌ایم.

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

در طول این کد، ما از Firebase Authentication، Cloud Firestore، Cloud Storage، Cloud Messaging و Performance Monitoring استفاده می کنیم، بنابراین همه کتابخانه های آنها را وارد می کنیم. در برنامه‌های آینده‌تان، مطمئن شوید که فقط بخش‌هایی از Firebase را وارد می‌کنید که نیاز دارید تا زمان بارگذاری برنامه خود را کوتاه کنید.

Firebase SDK را نصب کنید و ساخت Webpack خود را شروع کنید

ما باید چند دستور را اجرا کنیم تا بیلد برنامه مان پیش برود.

  1. یک پنجره ترمینال جدید باز کنید
  2. مطمئن شوید که در فهرست web-start هستید
  3. برای دانلود Firebase SDK، npm install را اجرا کنید
  4. npm run start را برای راه اندازی Webpack اجرا کنید. Webpack اکنون به طور مداوم کد آموزشی ما را برای بقیه بخش کدها بازسازی می کند.

Firebase را پیکربندی کنید

همچنین باید Firebase SDK را پیکربندی کنیم تا به آن بگوییم از کدام پروژه Firebase استفاده می‌کنیم.

  1. به تنظیمات پروژه خود در کنسول Firebase بروید
  2. در کارت «برنامه‌های شما»، نام مستعار برنامه‌ای را که برای آن به شی پیکربندی نیاز دارید، انتخاب کنید.
  3. "Config" را از پنجره قطعه SDK Firebase انتخاب کنید.
  4. قطعه شی پیکربندی را کپی کنید، سپس آن را به web-start/src/firebase-config.js کنید.

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

اکنون به انتهای web-start/src/index.js بروید و Firebase را مقداردهی اولیه کنید:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. ورود کاربر را تنظیم کنید

Firebase SDK اکنون باید آماده استفاده باشد زیرا در index.html وارد و مقداردهی اولیه شده است. اکنون می‌خواهیم ورود کاربر را با استفاده از Firebase Authentication پیاده‌سازی کنیم.

کاربران خود را با Google Sign-In احراز هویت کنید

در برنامه، وقتی کاربر روی دکمه Sign in with Google کلیک می کند، عملکرد signIn فعال می شود. (ما قبلاً آن را برای شما تنظیم کرده‌ایم!) برای این کد لبه، می‌خواهیم به Firebase اجازه دهیم تا از Google به عنوان ارائه‌دهنده هویت استفاده کند. ما از یک پنجره بازشو استفاده خواهیم کرد، اما چندین روش دیگر از Firebase در دسترس است.

  1. در دایرکتوری web-start ، در زیر شاخه src/ ، index.js را باز کنید.
  2. تابع signIn را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

عملکرد signOut زمانی فعال می شود که کاربر روی دکمه خروج کلیک می کند.

  1. به فایل src/index.js برگردید.
  2. تابع signOutUser را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

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

برای به‌روزرسانی رابط کاربری خود، به راهی برای بررسی اینکه آیا کاربر وارد شده است یا از سیستم خارج شده است، نیاز داریم. با Firebase Authentication، می‌توانید یک ناظر را در وضعیت احراز هویت ثبت کنید که هر بار که وضعیت احراز هویت تغییر می‌کند فعال می‌شود.

  1. به فایل src/index.js برگردید.
  2. تابع initFirebaseAuth را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

کد بالا تابع authStateObserver را به عنوان ناظر وضعیت احراز هویت ثبت می کند. هر بار که وضعیت احراز هویت تغییر می کند (زمانی که کاربر به سیستم وارد می شود یا از سیستم خارج می شود) فعال می شود. در این مرحله است که ما رابط کاربری را به‌روزرسانی می‌کنیم تا دکمه ورود به سیستم، دکمه ورود به سیستم، تصویر نمایه کاربر واردشده به سیستم و غیره نمایش داده یا پنهان شود. همه این بخش‌های رابط کاربری قبلاً پیاده‌سازی شده‌اند.

نمایش اطلاعات کاربر وارد شده

ما می‌خواهیم تصویر نمایه و نام کاربری کاربر وارد شده را در نوار بالای برنامه خود نمایش دهیم. در Firebase، داده های کاربر وارد شده همیشه در شیء currentUser کاربر موجود است. پیش از این، ما تابع authStateObserver را تنظیم کردیم تا هنگام ورود کاربر فعال شود تا رابط کاربری ما مطابق با آن به روز شود. هنگامی که فعال شود، getProfilePicUrl و getUserName را صدا می کند.

  1. به فایل src/index.js برگردید.
  2. توابع getProfilePicUrl و getUserName کنید.
  3. هر دو تابع را با کد زیر جایگزین کنید.

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

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

  1. به فایل src/index.js برگردید.
  2. تابع isUserSignedIn را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

تست ورود به برنامه

  1. اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase serve --only hosting را در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
  2. با استفاده از دکمه ورود به سیستم و حساب Google خود وارد برنامه شوید. اگر پیام خطایی مبنی بر تأیید auth/operation-not-allowed نمی‌بینید، بررسی کنید تا مطمئن شوید Google Sign-in را به‌عنوان ارائه‌دهنده احراز هویت در کنسول Firebase فعال کرده‌اید.
  3. پس از ورود به سیستم، تصویر پروفایل و نام کاربری شما باید نمایش داده شود: c7401b3d44d0d78b.png

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

در این بخش، داده‌هایی را در Cloud Firestore می‌نویسیم تا بتوانیم رابط کاربری برنامه را پر کنیم. این را می توان به صورت دستی با کنسول Firebase انجام داد، اما ما این کار را در خود برنامه انجام خواهیم داد تا یک نوشتن اولیه Cloud Firestore را نشان دهیم.

مدل داده

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

688d7bc5fb662b57.png

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

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

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

  1. به فایل src/index.js برگردید.
  2. تابع saveMessage را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

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

  1. اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase serve --only hosting را در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
  2. پس از ورود به سیستم، پیامی مانند "Hey There!" را وارد کنید و سپس روی SEND کلیک کنید. این پیام را در Cloud Firestore می نویسد. با این حال، شما هنوز داده‌ها را در برنامه وب واقعی خود نخواهید دید، زیرا ما هنوز باید بازیابی داده‌ها را پیاده‌سازی کنیم (بخش بعدی کد لبه).
  3. می توانید پیامی که به تازگی اضافه شده است را در کنسول Firebase خود مشاهده کنید. کنسول Firebase خود را باز کنید. در بخش Build روی Firestore Database کلیک کنید (یا اینجا را کلیک کنید و پروژه خود را انتخاب کنید) و باید مجموعه پیام ها را با پیام تازه اضافه شده خود مشاهده کنید:

6812efe7da395692.png

9. پیام ها را بخوانید

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

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

ما کدی اضافه خواهیم کرد که پیام‌های تازه اضافه شده را از برنامه گوش می‌دهد. در این کد، شنونده‌ای را که به تغییرات ایجاد شده در داده‌ها گوش می‌دهد، ثبت می‌کنیم. ما فقط 12 پیام آخر چت را نمایش می دهیم تا از نمایش تاریخچه بسیار طولانی در هنگام بارگیری جلوگیری کنیم.

  1. به فایل src/index.js برگردید.
  2. تابع loadMessages را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

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

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

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

  1. اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase serve --only hosting را در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
  2. پیام هایی که قبلاً در پایگاه داده ایجاد کرده اید باید در رابط کاربری FriendlyChat نمایش داده شوند (به زیر مراجعه کنید). با خیال راحت پیام های جدید بنویسید. آنها باید فورا ظاهر شوند.
  3. (اختیاری) می توانید مستقیماً در بخش پایگاه داده کنسول Firebase، پیام های جدید را حذف، اصلاح یا اضافه کنید. هر تغییری باید در UI منعکس شود.

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

2168dec79b573d07.png

10. ارسال تصاویر

اکنون یک ویژگی اضافه می کنیم که تصاویر را به اشتراک می گذارد.

در حالی که Cloud Firestore برای ذخیره داده های ساخت یافته خوب است، Cloud Storage برای ذخیره فایل ها مناسب تر است. Cloud Storage برای Firebase یک سرویس ذخیره‌سازی فایل/blob است و ما از آن برای ذخیره تصاویری که کاربر با استفاده از برنامه ما به اشتراک می‌گذارد استفاده می‌کنیم.

تصاویر را در فضای ذخیره سازی ابری ذخیره کنید

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

  1. یک پیام چت "placeholder" در فید چت ایجاد می کند، به طوری که کاربران در حین آپلود تصویر، انیمیشن "بارگیری" را ببینند.
  2. فایل تصویر را در Cloud Storage در این مسیر آپلود می کند: /<uid>/<messageId>/<file_name>
  3. یک URL قابل خواندن برای عموم برای فایل تصویر ایجاد می کند.
  4. پیام چت را با URL فایل تصویری تازه آپلود شده به جای تصویر بارگیری موقت به روز می کند.

اکنون قابلیت ارسال تصویر را اضافه می کنید:

  1. به فایل src/index.js برگردید.
  2. تابع saveImageMessage را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

تست ارسال تصاویر

  1. اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase serve --only hosting را در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
  2. پس از ورود به سیستم، روی دکمه آپلود تصویر کلیک کنید 13734cb66773e5a3.png و یک فایل تصویری را با استفاده از انتخابگر فایل انتخاب کنید. اگر به دنبال تصویری هستید، از این تصویر زیبا از فنجان قهوه استفاده کنید.
  3. یک پیام جدید باید در رابط کاربری برنامه با تصویر انتخابی شما ظاهر شود: 3b1284f5144b54f6.png

اگر سعی می‌کنید در حالی که وارد سیستم نشده‌اید تصویری اضافه کنید، باید یک اعلان Toast را ببینید که به شما می‌گوید برای افزودن تصاویر باید وارد سیستم شوید.

11. نمایش اعلان ها

اکنون پشتیبانی از اعلان‌های مرورگر را اضافه می‌کنیم. هنگامی که پیام های جدید در چت ارسال می شود، این برنامه به کاربران اطلاع می دهد. Firebase Cloud Messaging (FCM) یک راه حل پیام رسانی بین پلتفرمی است که به شما امکان می دهد پیام ها و اعلان ها را بدون هیچ هزینه ای به طور قابل اعتماد تحویل دهید.

کارگر سرویس FCM را اضافه کنید

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

  1. از پوشه web-start ، در فهرست src ، firebase-messaging-sw.js کنید.
  2. محتوای زیر را به آن فایل اضافه کنید.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

کارمند سرویس فقط باید Firebase Cloud Messaging SDK را بارگیری و مقداردهی اولیه کند، که از نمایش اعلان ها مراقبت می کند.

توکن های دستگاه FCM را دریافت کنید

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

هنگامی که کاربر وارد سیستم می شود، تابع saveMessagingDeviceToken را فراخوانی می کنیم. اینجاست که ما توکن دستگاه FCM را از مرورگر دریافت می کنیم و آن را در Cloud Firestore ذخیره می کنیم.

  1. به فایل src/index.js برگردید.
  2. تابع saveMessagingDeviceToken را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

با این حال، این کد در ابتدا کار نخواهد کرد. برای اینکه برنامه شما بتواند توکن دستگاه را بازیابی کند، کاربر باید به برنامه شما اجازه دهد تا اعلان‌ها را نشان دهد (مرحله بعدی از برنامه کد).

درخواست مجوز برای نمایش اعلان ها

وقتی کاربر هنوز به برنامه شما اجازه نمایش اعلان‌ها را نداده است، رمز دستگاهی به شما داده نمی‌شود. در این حالت، ما متد firebase.messaging().requestPermission() .

8b9d0c66dc36153d.png

  1. به فایل src/index.js برگردید.
  2. تابع requestNotificationsPermissions را پیدا کنید.
  3. کل تابع را با کد زیر جایگزین کنید.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

توکن دستگاه خود را دریافت کنید

  1. اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase serve --only hosting را در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
  2. پس از ورود به سیستم، کادر گفتگوی مجوز اعلان ها باید ظاهر شود: bd3454e6dbfb6723.png
  3. روی Allow کلیک کنید.
  4. کنسول جاوا اسکریپت مرورگر خود را باز کنید. باید پیام زیر را مشاهده کنید: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. توکن دستگاه خود را کپی کنید. شما آن را برای مرحله بعدی Codelab نیاز خواهید داشت.

یک اعلان به دستگاه خود ارسال کنید

اکنون که توکن دستگاه خود را دارید، می توانید اعلان ارسال کنید.

  1. برگه Cloud Messaging کنسول Firebase را باز کنید.
  2. روی "اعلان جدید" کلیک کنید
  3. عنوان اعلان و متن اعلان را وارد کنید.
  4. در سمت راست صفحه، روی «ارسال پیام آزمایشی» کلیک کنید.
  5. رمز دستگاهی را که از کنسول جاوا اسکریپت مرورگر خود کپی کرده اید وارد کنید، سپس روی علامت مثبت ("+") کلیک کنید.
  6. روی "تست" کلیک کنید

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

اگر برنامه شما در پس زمینه است، یک اعلان باید در مرورگر شما ظاهر شود، مانند این مثال:

de79e8638a45864c.png

12. قوانین امنیتی Cloud Firestore

مشاهده قوانین امنیتی پایگاه داده

Cloud Firestore از یک زبان قوانین خاص برای تعریف حقوق دسترسی، امنیت و اعتبارسنجی داده ها استفاده می کند.

هنگام راه‌اندازی پروژه Firebase در ابتدای این کد لبه، استفاده از قوانین امنیتی پیش‌فرض «Test mode» را انتخاب کردیم تا دسترسی به datastore را محدود نکنیم. در کنسول Firebase ، در برگه قوانین بخش پایگاه داده ، می توانید این قوانین را مشاهده و اصلاح کنید.

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

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

با استفاده از قوانین زیر، قوانین را برای محدود کردن موارد به‌روزرسانی می‌کنیم:

firestore.قوانین

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

قوانین امنیتی پایگاه داده را به روز کنید

دو راه برای ویرایش قوانین امنیتی پایگاه داده شما وجود دارد، یا در کنسول Firebase یا از طریق یک فایل قوانین محلی که با استفاده از Firebase CLI مستقر شده است.

برای به‌روزرسانی قوانین امنیتی در کنسول Firebase:

  1. از پنل سمت چپ به قسمت Database رفته و سپس روی تب Rules کلیک کنید.
  2. قوانین پیش فرضی را که از قبل در کنسول وجود دارد را با قوانین نشان داده شده در بالا جایگزین کنید.
  3. روی انتشار کلیک کنید.

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

  1. از دایرکتوری web-start ، firestore.rules را باز کنید.
  2. قوانین پیش فرض را که از قبل در فایل موجود است با قوانین نشان داده شده در بالا جایگزین کنید.
  3. از دایرکتوری web-start ، firebase.json را باز کنید.
  4. مطابق شکل زیر، ویژگی firestore.rules را که به firestore.rules اشاره می کند، اضافه کنید. (ویژگی hosting باید قبلاً در فایل باشد.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. با اجرای دستور زیر قوانین امنیتی را با استفاده از Firebase CLI اجرا کنید:
firebase deploy --only firestore
  1. خط فرمان شما باید پاسخ زیر را نمایش دهد:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. قوانین امنیتی Cloud Storage

قوانین امنیتی Cloud Storage را مشاهده کنید

Cloud Storage برای Firebase از زبان قوانین خاصی برای تعریف حقوق دسترسی، امنیت و اعتبارسنجی داده ها استفاده می کند.

هنگام راه‌اندازی پروژه Firebase در ابتدای این کد لبه، استفاده از قانون پیش‌فرض امنیتی Cloud Storage را انتخاب کردیم که فقط به کاربران تأیید شده اجازه می‌دهد از Cloud Storage استفاده کنند. در کنسول Firebase ، در برگه قوانین بخش ذخیره‌سازی ، می‌توانید قوانین را مشاهده و تغییر دهید. باید قانون پیش‌فرض را ببینید که به هر کاربری که وارد سیستم شده است اجازه می‌دهد هر فایلی را در سطل ذخیره‌سازی شما بخواند و بنویسد.

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

ما قوانین را برای انجام موارد زیر به روز می کنیم:

  • به هر کاربر اجازه دهید فقط در پوشه های خاص خود بنویسد
  • به همه اجازه دهید از فضای ذخیره‌سازی ابری بخوانند
  • مطمئن شوید که فایل های آپلود شده تصویر هستند
  • اندازه تصاویر قابل آپلود را به حداکثر 5 مگابایت محدود کنید

این را می توان با استفاده از قوانین زیر پیاده سازی کرد:

ذخیره سازی.قوانین

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

قوانین امنیتی Cloud Storage را به روز کنید

دو راه برای ویرایش قوانین امنیتی ذخیره سازی شما وجود دارد: یا در کنسول Firebase یا از طریق یک فایل قوانین محلی که با استفاده از Firebase CLI مستقر شده است.

برای به‌روزرسانی قوانین امنیتی در کنسول Firebase:

  1. از پنل سمت چپ به بخش Storage رفته و سپس روی تب Rules کلیک کنید.
  2. قانون پیش فرض را که از قبل در کنسول وجود دارد با قوانین نشان داده شده در بالا جایگزین کنید.
  3. روی انتشار کلیک کنید.

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

  1. از فهرست web-start ، storage.rules را باز کنید.
  2. قوانین پیش فرض را که از قبل در فایل موجود است با قوانین نشان داده شده در بالا جایگزین کنید.
  3. از دایرکتوری web-start ، firebase.json را باز کنید.
  4. همانطور که در زیر نشان داده شده است، ویژگی storage.rules را به فایل storage.rules اضافه کنید. (ویژگی hosting و database داده باید قبلاً در فایل باشد.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. با اجرای دستور زیر قوانین امنیتی را با استفاده از Firebase CLI اجرا کنید:
firebase deploy --only storage
  1. خط فرمان شما باید پاسخ زیر را نمایش دهد:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. داده های عملکرد را جمع آوری کنید

می‌توانید از Performance Monitoring SDK برای جمع‌آوری داده‌های عملکرد دنیای واقعی از برنامه خود استفاده کنید و سپس آن داده‌ها را در کنسول Firebase بررسی و تجزیه و تحلیل کنید. نظارت بر عملکرد به شما کمک می کند تا درک کنید که کجا و چه زمانی عملکرد برنامه شما می تواند بهبود یابد تا بتوانید از آن اطلاعات برای رفع مشکلات عملکرد استفاده کنید.

راه های مختلفی برای ادغام با Firebase Performance Monitoring JavaScript SDK وجود دارد. در این لبه کد، ما نظارت بر عملکرد از URL های میزبانی را فعال کردیم. برای مشاهده سایر روش های فعال کردن SDK به مستندات مراجعه کنید.

ردیابی خودکار

از آنجایی که ما قبلا getPerformance را در بالای web-start/src/index.js وارد کرده‌ایم، فقط باید یک خط اضافه کنیم تا به مانیتورینگ عملکرد بگوییم وقتی کاربران از سایت مستقر شما بازدید می‌کنند، به‌طور خودکار معیارهای بار صفحه و درخواست شبکه را برای شما جمع‌آوری کند!

  1. در web-start/src/index.js ، خط زیر را در زیر TODO موجود اضافه کنید تا مانیتورینگ عملکرد را مقداردهی کنید.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

اندازه گیری تاخیر ورودی اول (اختیاری)

تأخیر ورودی اول مفید است زیرا مرورگری که به تعامل کاربر پاسخ می‌دهد، اولین تصورات آنها را در مورد پاسخگویی برنامه شما به کاربران شما می‌دهد.

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

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

  1. public/index.html را باز کنید.
  2. برچسب script را در خط زیر لغو نظر دهید.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

برای مطالعه بیشتر در مورد اولین پلی پر تاخیر ورودی، به مستندات نگاهی بیندازید.

مشاهده داده های عملکرد

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

29389131150f33d7.png

هنگامی که SDK نظارت بر عملکرد را در برنامه خود ادغام می کنید، قبل از اینکه برنامه شما به طور خودکار چندین جنبه حیاتی عملکرد را نظارت کند، نیازی به نوشتن کد دیگری ندارید. برای برنامه‌های وب، SDK جنبه‌هایی مانند اولین نقاشی محتوا، توانایی کاربران برای تعامل با برنامه شما و موارد دیگر را ثبت می‌کند.

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

15. برنامه خود را با استفاده از میزبانی Firebase مستقر کنید

Firebase یک سرویس میزبانی برای خدمات به دارایی ها و برنامه های وب شما ارائه می دهد. با استفاده از Firebase CLI می توانید فایل های خود را در میزبانی Firebase مستقر کنید. قبل از استقرار، باید در فایل firebase.json خود مشخص کنید که کدام فایل های محلی باید مستقر شوند. برای این کد لبه، ما قبلاً این کار را برای شما انجام داده‌ایم زیرا این مرحله برای ارائه فایل‌های ما در طول این کد لبه مورد نیاز بود. تنظیمات میزبانی تحت ویژگی hosting مشخص شده است:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

این تنظیمات به CLI می‌گویند که ما می‌خواهیم همه فایل‌ها را در فهرست ./public ( "public": "./public" ).

  1. مطمئن شوید که خط فرمان شما به دایرکتوری web-start محلی برنامه شما دسترسی دارد.
  2. با اجرای دستور زیر فایل های خود را در پروژه Firebase خود مستقر کنید:
firebase deploy --except functions
  1. کنسول باید موارد زیر را نمایش دهد:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. از برنامه وب خود که اکنون به طور کامل در CDN جهانی با استفاده از میزبانی Firebase در دو زیردامنه Firebase خود میزبانی شده است، بازدید کنید:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

همچنین، می‌توانید firebase open hosting:site را در خط فرمان اجرا کنید.

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

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

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

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

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

  • احراز هویت Firebase
  • Cloud Firestore
  • Firebase SDK برای فضای ابری
  • Firebase Cloud Messaging
  • نظارت بر عملکرد Firebase
  • میزبانی Firebase

مراحل بعدی

Learn more