Firebase وب کد برنامه

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

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

  • احراز هویت Firebase تا به راحتی به کاربران اجازه ورود به برنامه شما را بدهید.
  • Cloud Firestore برای ذخیره داده های ساختاری در ابر و دریافت اعلان فوری هنگام تغییر داده ها.
  • Cloud Storage for Firebase برای ذخیره فایل ها در cloud.
  • Firebase Hosting برای میزبانی و خدمت به دارایی های شما.
  • Firebase Cloud Messaging برای ارسال اعلان های فشاری و نمایش اعلان های پنجره مرورگر.
  • Firebase Performance Monitoring برای جمع آوری داده های عملکرد کاربر برای برنامه شما.

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

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

  1. روی نماد وب کلیک کنید 58d6543a156e56f9.png برای ایجاد یک برنامه وب جدید Firebase.
  2. برنامه را با نام مستعار Chat Friendly ثبت کنید ، سپس کادر کنار همچنین راه اندازی Firebase Hosting برای این برنامه را علامت بزنید. ثبت برنامه را کلیک کنید.
  3. مراحل باقی مانده را کلیک کنید. نیازی نیست که اکنون دستورالعمل ها را دنبال کنید. این موارد در مراحل بعدی این كد كتاب پوشش داده خواهد شد.

ea9ab0db531a104c.png

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

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

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

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

d89fb3873b5d36ae.png

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

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

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

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

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

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

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

  1. با اجرای دستور npm زیر CLI را نصب کنید:
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 برنامه web-start شما دسترسی دارد.
  2. با اجرای دستور زیر برنامه خود را با پروژه Firebase خود مرتبط کنید:
firebase use --add
  1. وقتی از شما خواسته شد ، شناسه Project خود را انتخاب کنید ، سپس نام مستعار به پروژه Firebase بدهید.

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

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

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

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

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

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

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

4c23f9475228cef4.png

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

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

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

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

از آنجا که ما از Firebase Hosting برای سرویس دهی به برنامه خود استفاده می کنیم ، می خواهیم URL های محلی را که در پرونده index.html (در فهرست web-start/public/ فهرست شما قرار دارد) وارد کنیم. برای این codelab ، ما خطوط زیر را برای شما در پایین پرونده index.html کرده ایم ، اما می توانید وجود آنها را دوباره بررسی کنید.

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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

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

همچنین باید Firebase SDK را پیکربندی کنیم تا به آن بگوییم از کدام پروژه Firebase استفاده می کنیم. از آنجا که ما از Firebase Hosting استفاده می کنیم ، می توانید یک اسکریپت ویژه وارد کنید که این پیکربندی را برای شما انجام دهد. باز هم ، برای این codelab ، ما در زیر فایل public/index.html خط زیر را برای شما اضافه کرده ایم ، اما دوباره وجود آن را بررسی کنید.

index.html

<script src="/__/firebase/init.js"></script>

این اسکریپت شامل پیکربندی پروژه Firebase شما بر اساس پروژه Firebase است که قبلاً هنگام اجرای firebase use --add کردید.

با init.js فایل init.js را init.js تا ببینید پیکربندی پروژه شما چگونه است. برای این کار ، http: // localhost: 5000 / __ / firebase / init.js را در مرورگر خود باز کنید. باید چیزی را ببینید که به صورت زیر باشد:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

Firebase SDK اکنون باید آماده استفاده باشد زیرا از ابتدا وارد شده و در index.html . اکنون قصد داریم ورود به سیستم کاربر را با استفاده از تأیید اعتبار Firebase پیاده سازی کنیم.

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

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

  1. در فهرست web-start ، در زیر شاخه public/scripts/ ، main.js باز کنید.
  2. تابع signIn .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

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

  1. به پرونده public/scripts/main.js .
  2. تابع signOut .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

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

حالت احراز هویت را پیگیری کنید

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

  1. به پرونده public/scripts/main.js .
  2. تابع initFirebaseAuth .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

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

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

ما می خواهیم تصویر نمایه و نام کاربری کاربر به سیستم وارد شده را در نوار بالای برنامه خود نمایش دهیم. در Firebase ، داده های کاربر به سیستم وارد شده همیشه در شی firebase.auth().currentUser است. پیش از این ، ما عملکرد authStateObserver تنظیم کرده authStateObserver تا هنگام ورود به سیستم کاربر فعال شود تا UI ما مطابق با آن به روز شود. آن را پاسخ getProfilePicUrl و getUserName که باعث شده است.

  1. به پرونده public/scripts/main.js .
  2. توابع getProfilePicUrl و getUserName .
  3. هر دو عملکرد را با کد زیر جایگزین کنید.

main.js

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

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

اگر کاربر وقتی کاربر به سیستم وارد نشده است سعی در ارسال پیام دارد ، ما یک پیام خطا نمایش می دهیم. (البته می توانید آن را امتحان کنید!) بنابراین ، باید تشخیص دهیم که کاربر واقعاً به سیستم وارد شده است یا خیر.

  1. به پرونده public/scripts/main.js .
  2. عملکرد isUserSignedIn .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

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

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

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

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

مدل داده

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

688d7bc5fb662b57.png

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

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

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

  1. به پرونده public/scripts/main.js .
  2. عملکرد saveMessage .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

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

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

6812efe7da395692.png

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

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

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

  1. به پرونده public/scripts/main.js .
  2. تابع loadMessages .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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 یک پارامتر را می گیرد: یک عملکرد .onSnapshot . وقتی تغییراتی در اسناد مطابق با سeryال ایجاد شود ، عملکرد برگشت تماس فعال می شود. این می تواند در صورت پاک شدن ، اصلاح یا اضافه شدن پیامی باشد. می توانید اطلاعات بیشتر در این مورد را در اسناد Cloud Firestore مطالعه کنید .

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

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

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

2168dec79b573d07.png

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

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

تصاویر را در Cloud Storage ذخیره کنید

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

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

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

  1. به پرونده public/scripts/main.js .
  2. عملکرد saveImageMessage .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(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

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

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

شناسه فرستنده GCM را در لیست سفید قرار دهید

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

  1. از فهرست web-start ، در فهرست public ، manifest.json باز کنید.
  2. مقدار شناسه فرستنده مرورگر را دقیقاً مطابق شکل زیر در ویژگی gcm_sender_id کنید. مقدار را از آنچه در زیر نشان داده شده تغییر ندهید.

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

کارگر خدمات FCM را اضافه کنید

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

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

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

کارگر سرویس به سادگی باید SDK پیام ابری Firebase را بارگیری و مقداردهی اولیه کند ، که این امر برای نمایش اعلان ها انجام می شود.

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

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

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

  1. به پرونده public/scripts/main.js .
  2. عملکرد saveMessagingDeviceToken .
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

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

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

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

8b9d0c66dc36153d.png

  1. به پرونده public/scripts/main.js .
  2. درخواست عملکرد را پیدا کنید requestNotificationsPermissions
  3. کل عملکرد را با کد زیر جایگزین کنید.

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

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

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

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

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

  1. علاوه بر رمز دستگاه ، به کلید کلید برنامه Firebase خود نیز نیاز خواهید داشت. برای به دست آوردن این کلید ، به Firebase Console> Project Settings> Cloud Messaging بروید ، سپس کلید Server را کپی کنید.

برای ارسال یک اعلان ، باید درخواست HTTP زیر را ارسال کنید:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. در خط فرمان ، دستور cURL زیر را اجرا کنید.
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

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

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

de79e8638a45864c.png

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

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

هنگام تنظیم پروژه Firebase در ابتدای این كد Codelab ، ما ترجیح دادیم از قوانین امنیتی پیش فرض "حالت آزمایشی" استفاده كنیم تا دسترسی به پایگاه داده را محدود نكنیم. در کنسول Firebase ، در زبانه Rules قسمت Database ، می توانید این قوانین را مشاهده و اصلاح کنید.

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

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. از پانل سمت چپ به قسمت 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

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

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

هنگام تنظیم پروژه Firebase در ابتدای این كد Codelab ، ما تصمیم گرفتیم از قانون امنیتی پیش فرض Cloud Storage استفاده كنیم كه فقط به کاربران معتبر اجازه استفاده از Cloud Storage را می دهد. در کنسول Firebase ، در زبانه Rules بخش ذخیره سازی ، می توانید قوانین را مشاهده و اصلاح کنید. شما باید قاعده پیش فرض را مشاهده کنید که به هر کاربر وارد شده اجازه می دهد تا هر پرونده ای را در سطل ذخیره شما بخواند و بنویسد.

rules_version = '2';

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

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

  • به هر کاربر اجازه دهید فقط در پوشه های خاص خود بنویسد
  • به هر کسی اجازه دهید از Cloud Storage بخواند
  • اطمینان حاصل کنید که فایل های بارگذاری شده تصاویر هستند
  • اندازه تصاویر قابل بارگذاری را حداکثر به 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. از پانل سمت چپ به قسمت ذخیره سازی بروید و سپس روی برگه 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

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

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

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

از آنجا که firebase-performance.js و init.js در مرحله قبلی codelab قرار داده بودیم ، فقط باید یک خط اضافه کنیم تا به Performance Monitoring بگوییم تا هنگام بازدید کاربران از سایت مستقر شده شما ، بارگیری صفحه و معیارهای درخواست شبکه را برای شما جمع آوری کند!

  1. برای شروع نظارت بر عملکرد ، در public/scripts/main.js ، خط زیر را در زیر TODO موجود اضافه کنید.

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

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

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

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

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

  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 جنبه هایی مانند اولین رنگ محتوایی ، توانایی تعامل کاربران با برنامه شما و موارد دیگر را ثبت می کند.

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

Firebase یک سرویس میزبانی برای ارائه دارایی ها و برنامه های وب شما ارائه می دهد. با استفاده از 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 برنامه web-start شما دسترسی دارد.
  2. Deploy your files to your Firebase project by running the following command:
firebase deploy --except functions
  1. The console should display the following:
=== 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. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring
  • Firebase Hosting

Next steps

Learn more