کد وب وب Firebase

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

3b1284f5144b54f6.png

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

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

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

  • محیط برنامه نویسی / ویرایشگر متن انتخابی خود را، مانند WebStorm ، اتم ، بلندمرتبه ، و یا کد VS
  • مدیر بسته NPM ، که معمولا با می آید Node.js و
  • ترمینال/کنسول
  • مرورگری به انتخاب شما ، مانند Chrome
  • نمونه کد Codelab (برای دریافت کد به مرحله بعدی Codelab مراجعه کنید.)

کلون codelab است مخزن گیتهاب از خط فرمان:

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

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

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

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

ایجاد پروژه Firebase

  1. ورود به فایربیس .
  2. در فایربیس کنسول، کلیک کنید اضافه کردن پروژه، و سپس نام FriendlyChat پروژه فایربیس خود را. شناسه پروژه پروژه Firebase خود را به خاطر بسپارید.
  3. علامت فعال کردن Google Analytics برای این پروژه
  4. کلیک کنید ایجاد پروژه.

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

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

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

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

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

ثبت تصویر صفحه برنامه وب

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

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

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

  1. در فایربیس کنسول، به بخش ساخت در پنل سمت چپ.
  2. احراز هویت کلیک کنید، سپس با کلیک بر روی ثبت نام در تب روش (یا اینجا کلیک کنید به طور مستقیم وجود دارد).
  3. فعال کردن Google وارد شوید ارائه دهنده، و سپس روی Save کلیک کنید.
  4. تنظیم نام عمومی رو از برنامه خود را به دوستانه چت و را انتخاب کنید یک ایمیل پشتیبانی پروژه از منوی کشویی.
  5. پیکربندی صفحه نمایش رضایت OAuth حفظ خود را در ابر کنسول گوگل و اضافه کردن یک آرم:

d89fb3873b5d36ae.png

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

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

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

  1. در بخش Build از آن استفاده فایربیس کنسول، کلیک کنید پایگاه Firestore.
  2. کلیک کنید ایجاد پایگاه داده در سمت ابر Firestore.

729991a081e7cd5.png

  1. شروع انتخاب کنید در گزینه حالت آزمون، و سپس بعد پس از خواندن سلب مسئولیت در مورد قوانین امنیتی را کلیک کنید.

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

ذخیره سازی ابری را فعال کنید

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

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

  1. در بخش Build از آن استفاده فایربیس کنسول، ذخیره سازی را کلیک کنید.
  2. اگر وجود دارد هیچ مطلع دکمه آغاز شده، به این معنی که ابر ذخیره سازی قبل فعال شده است، و شما لازم نیست که به پیروی از مراحل زیر.
  3. شروع کلیک کنید.
  4. سلب مسئولیت در مورد قوانین امنیتی برای پروژه Firebase خود، و سپس روی Next کلیک کنید.

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

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

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

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

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

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

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

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

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

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

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

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

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

4c23f9475228cef4.png

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

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

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

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

ما قصد داریم برای دریافت فایربیس SDK از NPM و استفاده از Webpack به بسته نرم افزاری کد ما. ما این کار را انجام می دهیم تا Webpack بتواند هرگونه کد غیر ضروری را حذف کند و اندازه بسته نرم افزاری JS ما را کوچک نگه دارد تا مطمئن شویم برنامه ما در اسرع وقت بارگذاری می شود. برای این codelab، ما قبلا یک web-start/package.json فایل که شامل فایربیس 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 مورد نیاز خود را وارد می کنید تا زمان بارگذاری برنامه کوتاه شود.

SDK Firebase را نصب کرده و ساخت Webpack خود را آغاز کنید

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

  1. یک پنجره ترمینال جدید باز کنید
  2. اطمینان حاصل کنید که شما را در حال web-start دایرکتوری
  3. اجرا npm install برای دانلود فایربیس SDK
  4. اجرا npm run start برای شروع Webpack. اکنون Webpack به طور مداوم کد منبع ما را برای بقیه codelab بازسازی می کند.

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

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

  1. برو به خود تنظیمات پروژه در کنسول فایربیس
  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 و مقداردهی اولیه فایربیس:

index.js

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

فایربیس SDK در حال حاضر باید آماده برای استفاده از آن وارد شده و مقدار دهی اولیه در شود index.html . ما در حال حاضر رفتن به پیاده سازی کاربران ورود به سیستم با استفاده از فایربیس احراز هویت .

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

در این برنامه، هنگامی که کاربر کلیک ورود به سیستم را با دکمه گوگل، signIn عملکرد باعث شده است. (ما قبلاً آن را برای شما تنظیم کرده ایم!) برای این codelab ، ما می خواهیم به 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 ، می توانید یک ناظر را در وضعیت احراز هویت ثبت کنید که با هر بار تغییر وضعیت احراز هویت فعال می شود.

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

index.js

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

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

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

ما می خواهیم تصویر نمایه کاربر و نام کاربری واردشده را در نوار بالای برنامه خود نمایش دهیم. در فایربیس، امضا در داده ها کاربر است که همیشه در دسترس currentUser شی. پیش از این، ما راه اندازی authStateObserver تابع برای آغاز کند زمانی که کاربری با به طوری که به روز رسانی UI ما درآمده است. آن را پاسخ 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 وارد شوید به عنوان یک ارائه دهنده احراز هویت در کنسول فایربیس.
  3. پس از ورود به سیستم ، تصویر نمایه و نام کاربری شما باید نمایش داده شود: c7401b3d44d0d78b.png

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

مدل داده

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

688d7bc5fb662b57.png

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

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

در این بخش ، قابلیت نوشتن پیام های جدید به پایگاه داده را برای کاربران اضافه می کنید. کاربر با کلیک کردن دکمه ارسال خواهد شد کد زیر را آغاز کند. این می افزاید: یک شیء پیام با محتویات زمینه پیام به عنوان مثال ابر Firestore خود را در messages مجموعه است. add() روش می افزاید: یک سند جدید با یک ID به صورت خودکار تولید به مجموعه است.

  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. پس از ورود به سیستم، یک پیام وارد کنید مانند "هی وجود دارد!"، و سپس کلیک بر روی ارسال. این پیام را در Cloud Firestore می نویسد. با این حال، شما هنوز به داده ها را نمی بینم در برنامه وب شما واقعی چرا که ما هنوز نیاز به پیاده سازی بازیابی اطلاعات (بخش بعدی از codelab).
  3. می توانید پیام تازه اضافه شده را در Firebase Console خود مشاهده کنید. کنسول Firebase خود را باز کنید. در بخش ساخت کلیک کنید پایگاه Firestore (یا کلیک کنید در اینجا و پروژه خود را انتخاب کنید) و شما باید مجموعه پیام با پیام به تازگی اضافه شده خود را ببینید:

6812efe7da395692.png

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

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

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

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

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

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

2168dec79b573d07.png

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

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

ذخیره تصاویر در فضای ابری

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

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

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

  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. یک پیام جدید باید در UI برنامه با تصویر انتخابی شما ظاهر شود: 3b1284f5144b54f6.png

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

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

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

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

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

هنگامی که کاربر علائم در، ما پاسخ saveMessagingDeviceToken تابع. این که در آن ما دستگاه FCM نشانه را از مرورگر را دریافت و ذخیره آن را به ابر 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. کلیک کنید اجازه.
  4. کنسول جاوا اسکریپت مرورگر خود را باز کنید. : شما باید پیغام زیر ظاهر می Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. توکن دستگاه خود را کپی کنید. برای مرحله بعدی کد کد به آن نیاز دارید.

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

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

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

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

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

de79e8638a45864c.png

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

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

هنگام راه اندازی پروژه Firebase در ابتدای این کد ، ما از قوانین امنیتی پیش فرض "حالت آزمایش" استفاده کردیم تا دسترسی به پایگاه داده را محدود نکنیم. در فایربیس کنسول ، در بخش پایگاه را تب قوانین، شما می توانید مشاهده و تغییر این قوانین است.

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

rules_version = '2';

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

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

firestore.rules

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. برو به بخش پایگاه از پانل سمت چپ، و سپس کلیک بر روی زبانه قوانین.
  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

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

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

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

rules_version = '2';

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

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

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

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

storage.rules

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. برو به بخش ذخیره سازی از پانل سمت چپ، و سپس کلیک بر روی زبانه قوانین.
  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

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

روشهای مختلفی برای ادغام با SDK جاوا اسکریپت Firebase Performing Monitoring وجود دارد. در این codelab، ما فعال عملکرد نظارت از آدرس ها میزبانی وب. به مراجعه مستندات برای مشاهده روش های دیگر را قادر می سازد 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>

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

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

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

29389131150f33d7.png

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

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

پیشنهادات فایربیس سرویس میزبانی برای خدمت به دارایی های خود و برنامه های وب. با استفاده از Firebase CLI می توانید فایل های خود را در Firebase Hosting مستقر کنید. قبل از استقرار، شما نیاز به مشخص در خود firebase.json فایل که فایل های محلی باید مستقر شود. برای این codelab ، ما قبلاً این کار را برای شما انجام داده ایم زیرا این مرحله برای ارائه فایل های ما در طول این codelab لازم بود. تنظیمات میزبانی تحت مشخص 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 Hosting در دو زیر دامنه Firebase خود استفاده کرده اید ، بازدید کنید:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

مشاهده اسناد و مدارک برای کسب اطلاعات بیشتر در مورد چگونه فایربیس میزبانی آثار .

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

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

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

  • احراز هویت Firebase
  • Cloud Firestore
  • SDK Firebase برای ذخیره سازی ابری
  • پیام های ابری Firebase
  • نظارت بر عملکرد Firebase
  • میزبانی Firebase

مراحل بعدی

Learn more