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

کد لبه وب AngularFire

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

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

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

با استفاده از Angular و Firebase یک برنامه وب بسازید.
همگام سازی داده ها با استفاده از 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 دانلود کنید .

مخزن friendlychat-web شامل پروژه های نمونه برای چندین پلتفرم است.

این کد لبه فقط از این دو مخزن استفاده می کند:

📁 angularfire-start : کد شروعی که در طول این Codelab بر روی آن ایجاد خواهید کرد.
📁 angularfire : کد کامل برنامه نمونه تمام شده.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CLI را با اجرای دستور npm زیر نصب کنید:

npm -g install firebase-tools

با اجرای دستور زیر اطمینان حاصل کنید که CLI به درستی نصب شده است:

firebase --version

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

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

firebase login

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

مطمئن شوید که خط فرمان شما به دایرکتوری محلی angularfire-start برنامه شما دسترسی دارد.
با اجرای دستور زیر برنامه خود را با پروژه Firebase خود مرتبط کنید:

firebase use --add

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

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

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

5. AngularFire را نصب کنید

قبل از اجرای پروژه، مطمئن شوید که Angular CLI و AngularFire را راه اندازی کرده اید.

در یک کنسول، دستور زیر را اجرا کنید:

npm install -g @angular/cli

سپس، در یک کنسول از دایرکتوری angularfire-start ، دستور Angular CLI زیر را اجرا کنید:

ng add @angular/fire

با این کار تمام وابستگی های لازم برای پروژه شما نصب می شود.

هنگامی که از شما خواسته شد، ویژگی‌هایی را که در کنسول Firebase تنظیم شده‌اند انتخاب کنید ( ng deploy -- hosting ، Authentication ، Firestore ، Cloud Functions (callable) ، Cloud Messaging ، Cloud Storage )، و اعلان‌های کنسول را دنبال کنید.

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

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

در یک کنسول از دایرکتوری angularfire-start ، دستور Firebase CLI زیر را اجرا کنید:

firebase emulators:start

خط فرمان شما باید پاسخ زیر را نمایش دهد:

✔  hosting: Local server: http://localhost:5000

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

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

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

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

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

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

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

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

به تنظیمات پروژه خود در کنسول Firebase بروید
در کارت «برنامه‌های شما»، نام مستعار برنامه‌ای را که برای آن به شی پیکربندی نیاز دارید، انتخاب کنید.
"Config" را از پنجره قطعه SDK Firebase انتخاب کنید.

متوجه خواهید شد که یک فایل محیطی /angularfire-start/src/environments/environment.ts برای شما ایجاد شده است.

قطعه شی پیکربندی را کپی کنید، سپس آن را به angularfire-start/src/firebase-config.js اضافه کنید.

محیط.ts

export const environment = {
  firebase: {
    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",
  },
};

AngularFire را وارد کنید

متوجه خواهید شد که ویژگی هایی که در کنسول انتخاب کرده اید به طور خودکار در فایل /angularfire-start/src/app/app.module.ts هدایت می شوند. این به برنامه شما اجازه می دهد تا از ویژگی ها و قابلیت های Firebase استفاده کند. با این حال، برای توسعه در یک محیط محلی، باید آنها را برای استفاده از مجموعه Emulator متصل کنید.

در /angularfire-start/src/app/app.module.ts ، بخش imports را پیدا کنید و توابع ارائه شده را برای اتصال به مجموعه Emulator در محیط‌های غیر تولیدی تغییر دهید.

// ...

import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';

// ...

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
    const auth = getAuth();
    if (location.hostname === 'localhost') {
        connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
    }
    return auth;
}),
provideFirestore(() => {
    const firestore = getFirestore();
    if (location.hostname === 'localhost') {
        connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
    }
    return firestore;
}),
provideFunctions(() => {
    const functions = getFunctions();
    if (location.hostname === 'localhost') {
        connectFunctionsEmulator(functions, '127.0.0.1', 5001);
    }
    return functions;
}),
provideStorage(() => {
    const storage = getStorage();
    if (location.hostname === 'localhost') {
        connectStorageEmulator(storage, '127.0.0.1', 5001);
    }
    return storage;
}),
provideMessaging(() => {
    return getMessaging();
}),

// ...

app.module.ts

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

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

AngularFire اکنون باید آماده استفاده باشد زیرا در app.module.ts وارد و مقداردهی اولیه شده است. اکنون می‌خواهید ورود کاربر را با استفاده از احراز هویت Firebase پیاده‌سازی کنید.

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

در دایرکتوری angularfire-start ، در زیر شاخه /src/app/services/ ، chat.service.ts را باز کنید.
login تابع را پیدا کنید.
کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

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

به فایل src/app/services/chat.service.ts برگردید.
تابع logout پیدا کنید.
کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

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

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

به فایل src/app/services/chat.service.ts برگردید.
متغیر انتساب user$ پیدا کنید.
کل تکلیف را با کد زیر جایگزین کنید.

chat.service.ts

// Observable user
user$ = user(this.auth);

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

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

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

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

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

مدل داده

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

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

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

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

به فایل src/app/services/chat.service.ts برگردید.
تابع addMessage پیدا کنید.
کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
    let data: any;
    try {
      this.user$.subscribe(async (user) => 
      { 
        if(textMessage && textMessage.length > 0) {
          data =  await addDoc(collection(this.firestore, 'messages'), {
            name: user?.displayName,
            text: textMessage,
            profilePicUrl: user?.photoURL,
            timestamp: serverTimestamp(),
            uid: user?.uid
          })}
          else if (imageUrl && imageUrl.length > 0) {
            data =  await addDoc(collection(this.firestore, 'messages'), {
              name: user?.displayName,
              imageUrl: imageUrl,
              profilePicUrl: user?.photoURL,
              timestamp: serverTimestamp(),
              uid: user?.uid
            });
          }
          return data;
        }
      );
    }
    catch(error) {
      console.error('Error writing new message to Firebase Database', error);
      return;
    }
}

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

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

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

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

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

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

به فایل src/app/services/chat.service.ts برگردید.
تابع loadMessages پیدا کنید.
کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

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

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

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

اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase emulators:start در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
پیام هایی که قبلاً در پایگاه داده ایجاد کرده اید باید در رابط کاربری FriendlyChat نمایش داده شوند (به زیر مراجعه کنید). با خیال راحت پیام های جدید بنویسید. آنها باید فورا ظاهر شوند.
(اختیاری) می توانید مستقیماً در بخش Firestore مجموعه Emulator، پیام های جدید را حذف، اصلاح یا اضافه کنید. هر تغییری باید در UI منعکس شود.

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

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

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

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

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

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

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

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

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

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - You add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, 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.
    messageRef ?
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

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

اگر برنامه شما همچنان در حال ارائه است، برنامه خود را در مرورگر بازخوانی کنید. در غیر این صورت، firebase emulators:start در خط فرمان اجرا کنید تا برنامه را از http://localhost:5000 شروع کنید و سپس آن را در مرورگر خود باز کنید.
پس از ورود به سیستم، روی دکمه آپلود تصویر در پایین سمت چپ کلیک کنید و یک فایل تصویری را با استفاده از انتخابگر فایل انتخاب کنید. اگر به دنبال تصویری هستید، از این تصویر زیبا از فنجان قهوه استفاده کنید.
یک پیام جدید باید در رابط کاربری برنامه با تصویر انتخابی شما ظاهر شود:

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

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

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

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

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

هنگامی که AngularFire اضافه شد، ارائه دهنده پیام باید قبلاً تنظیم شده باشد، مطمئن شوید که کد زیر در بخش واردات /angularfire-start/src/app/app.module.ts وجود دارد.

provideMessaging(() => {
    return getMessaging();
}),

app/app.module.ts

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

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

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

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

chat.service.ts

تابع saveMessagingDeviceToken را پیدا کنید.
کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.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(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

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

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

به فایل src/app/services/chat.service.ts برگردید.
تابع requestNotificationsPermissions را پیدا کنید.
کل تابع را با کد زیر جایگزین کنید.

chat.service.ts

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

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

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

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

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

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

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

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

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

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

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

هنگام راه‌اندازی پروژه Firebase در ابتدای این کد لبه، استفاده از قوانین امنیتی پیش‌فرض «Test mode» را انتخاب کردید تا دسترسی به دیتا استور را محدود نکنید. در کنسول 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;
    }
  }
}

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

قوانین امنیتی 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;
    }
  }
}

14. برنامه خود را با استفاده از میزبانی 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" ).

مطمئن شوید که خط فرمان شما به دایرکتوری محلی angularfire-start برنامه شما دسترسی دارد.
با اجرای دستور زیر فایل های خود را در پروژه Firebase خود مستقر کنید:

ng deploy

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

کنسول باید موارد زیر را نمایش دهد:

=== 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

از برنامه وب خود که اکنون به طور کامل در CDN جهانی با استفاده از میزبانی Firebase در دو زیردامنه Firebase خود میزبانی شده است، بازدید کنید:

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

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

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

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

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

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

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

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

مراحل بعدی

بیشتر بدانید

firebase.google.com

16. [اختیاری] با بررسی برنامه اجرا کنید

Firebase App Check به ایمن کردن سرویس‌های شما در برابر ترافیک ناخواسته کمک می‌کند و به محافظت از باطن شما در برابر سوء استفاده کمک می‌کند. در این مرحله، اعتبارسنجی اعتبارنامه‌ها را اضافه کرده و مشتریان غیرمجاز را با App Check و reCAPTCHA Enterprise مسدود می‌کنید.

ابتدا باید App Check و reCaptcha را فعال کنید.

فعال کردن reCaptcha Enterprise

در کنسول Cloud، reCaptcha Enterprise را در قسمت Security پیدا کرده و انتخاب کنید.
همانطور که از شما خواسته شده است، سرویس را فعال کنید و روی ایجاد کلید کلیک کنید.
همانطور که از شما خواسته می شود یک نام نمایشی وارد کنید و وب سایت را به عنوان نوع پلتفرم خود انتخاب کنید.
URL های مستقر شده خود را به لیست دامنه اضافه کنید و مطمئن شوید که گزینه "استفاده از چالش چک باکس" انتخاب نشده باشد.
روی ایجاد کلید کلیک کنید و کلید تولید شده را در جایی برای نگهداری ذخیره کنید. بعداً در این مرحله به آن نیاز خواهید داشت.

فعال کردن بررسی برنامه

در کنسول Firebase، قسمت Build را در پانل سمت چپ قرار دهید.
روی بررسی برنامه کلیک کنید، سپس روی برگه روش ورود به سیستم کلیک کنید تا به بررسی برنامه بروید.
روی ثبت کلیک کنید و وقتی از شما خواسته شد کلید reCaptcha Enterprise خود را وارد کنید، سپس روی ذخیره کلیک کنید.
در نمای APIs، Storage را انتخاب کرده و روی Enforce کلیک کنید. همین کار را برای Cloud Firestore انجام دهید.

اکنون بررسی برنامه باید اجرا شود! برنامه خود را بازخوانی کنید و سعی کنید پیام های چت را مشاهده یا ارسال کنید. باید پیغام خطا را دریافت کنید:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

این بدان معناست که App Check به طور پیش‌فرض درخواست‌های تایید نشده را مسدود می‌کند. حالا بیایید اعتبارسنجی را به برنامه شما اضافه کنیم.

به فایل محیطی خود بروید و reCAPTCHAEnterpriseKey را به شی environment اضافه کنید.

export const environment = {
  firebase: {
    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',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

مقدار key را با توکن reCaptcha Enterprise خود جایگزین کنید.

سپس، به فایل app.module.ts بروید و واردات زیر را اضافه کنید:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

در همان فایل app.module.ts ، اعلان متغیر جهانی زیر را اضافه کنید:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

در واردات، مقداردهی اولیه App Check را با ReCaptchaEnterpriseProvider اضافه کنید و isTokenAutoRefreshEnabled را روی true تنظیم کنید تا به نشانه ها اجازه رفرش خودکار داده شود.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

برای مجاز کردن آزمایش محلی، self.FIREBASE_APPCHECK_DEBUG_TOKEN را روی true تنظیم کنید. هنگامی که برنامه خود را در localhost به‌روزرسانی می‌کنید، یک نشانه اشکال زدایی در کنسول ثبت می‌شود شبیه به:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

اکنون در کنسول Firebase به Apps View of App Check بروید.

روی منوی سرریز کلیک کنید و Manage debug tokens را انتخاب کنید.

سپس، روی Add debug token کلیک کنید و همانطور که از شما خواسته شد، رمز اشکال زدایی را از کنسول خود جایگذاری کنید.

به فایل chat.service.ts بروید و وارد کردن زیر را اضافه کنید:

import { AppCheck } from '@angular/fire/app-check';

در همان فایل chat.service.ts](angularfire-start/src/app/services/chat.service.ts)، App Check را در کنار سایر سرویس‌های Firebase تزریق کنید.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...

تبریک می گویم! App Check اکنون باید در برنامه شما کار کند.

کد لبه وب AngularFire

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

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

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

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

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

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

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

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

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

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

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

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

5. AngularFire را نصب کنید

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

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

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

AngularFire را وارد کنید

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

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

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

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

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

مدل داده

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مراحل بعدی

بیشتر بدانید

16. [اختیاری] با بررسی برنامه اجرا کنید