Codelab web AngularFire

1. Tinjauan

Dalam codelab ini, Anda akan mempelajari cara menggunakan AngularFire untuk membuat aplikasi web dengan mengimplementasikan dan men-deploy klien chat menggunakan produk dan layanan Firebase.

Apa yang akan Anda pelajari

• Bangun aplikasi web menggunakan Angular dan Firebase.
• Sinkronkan data menggunakan Cloud Firestore dan Cloud Storage for Firebase.
• Autentikasi pengguna Anda menggunakan Firebase Authentication.
• Terapkan aplikasi web Anda di Firebase Hosting.
• Kirim notifikasi dengan Firebase Cloud Messaging.
• Kumpulkan data kinerja aplikasi web Anda.

Apa yang Anda butuhkan

• Editor IDE/teks pilihan Anda, seperti WebStorm , Atom , Sublime , atau VS Code
• Manajer paket npm , yang biasanya disertakan dengan Node.js
• Sebuah terminal/konsol
• Browser pilihan Anda, seperti Chrome
• Contoh kode codelab (Lihat langkah codelab berikutnya untuk mengetahui cara mendapatkan kodenya.)

2. Dapatkan kode contoh

Clone repositori GitHub codelab dari command line:

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

Alternatifnya, jika Anda belum menginstal git, Anda dapat mengunduh repositori sebagai file ZIP .

Impor aplikasi awal

Menggunakan IDE Anda, buka atau impor direktori 📁 angularfire-start dari repositori kloning. Direktori 📁 angularfire-start ini berisi kode awal untuk codelab, yang akan menjadi aplikasi web obrolan yang berfungsi penuh.

3. Buat dan siapkan proyek Firebase

Buat proyek Firebase

1. Masuk ke Firebase .
2. Di konsol Firebase, klik Add Project , lalu beri nama proyek Firebase Anda FriendlyChat . Ingat ID proyek untuk proyek Firebase Anda.
3. Hapus centang Aktifkan Google Analytics untuk proyek ini
4. Klik Buat Proyek .

Aplikasi yang akan Anda buat menggunakan produk Firebase yang tersedia untuk aplikasi web:

• Firebase Authentication untuk memungkinkan pengguna masuk ke aplikasi Anda dengan mudah.
• Cloud Firestore untuk menyimpan data terstruktur di cloud dan mendapatkan notifikasi instan saat data berubah.
• Cloud Storage for Firebase untuk menyimpan file di cloud.
• Firebase Hosting untuk menghosting dan menayangkan aset Anda.
• Firebase Cloud Messaging untuk mengirim notifikasi push dan menampilkan notifikasi popup browser.
• Firebase Performance Monitoring untuk mengumpulkan data kinerja pengguna untuk aplikasi Anda.

Beberapa dari produk ini memerlukan konfigurasi khusus atau perlu diaktifkan menggunakan konsol Firebase.

Tambahkan aplikasi web Firebase ke proyek

1. Klik ikon web untuk membuat aplikasi web Firebase baru.
2. Daftarkan aplikasi dengan julukan Obrolan Ramah , lalu centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini . Klik Daftarkan aplikasi .
3. Pada langkah selanjutnya, Anda akan melihat objek konfigurasi. Salin objek JS saja (bukan HTML di sekitarnya) ke firebase-config.js

Aktifkan login Google untuk Firebase Authentication

Untuk mengizinkan pengguna masuk ke aplikasi web dengan akun Google mereka, Anda akan menggunakan metode masuk Google .

Anda harus mengaktifkan masuk dengan Google :

1. Di konsol Firebase, temukan bagian Bangun di panel kiri.
2. Klik Otentikasi , lalu klik tab Metode masuk (atau klik di sini untuk langsung ke sana).
3. Aktifkan penyedia masuk Google , lalu klik Simpan .
4. Setel nama aplikasi Anda yang menghadap ke publik ke Obrolan Ramah dan pilih email Dukungan proyek dari menu tarik-turun.
5. Konfigurasikan layar persetujuan OAuth Anda di Google Cloud Console dan tambahkan logo:

Aktifkan Cloud Firestore

Aplikasi web menggunakan Cloud Firestore untuk menyimpan pesan obrolan dan menerima pesan obrolan baru.

Anda harus mengaktifkan Cloud Firestore:

1. Di bagian Build Firebase console, klik Firestore Database .
2. Klik Buat database di panel Cloud Firestore.

3. Pilih opsi Start in test mode , lalu klik Next setelah membaca disclaimer tentang aturan keamanan.

Mode uji memastikan bahwa Anda dapat dengan bebas menulis ke database selama pengembangan. Anda akan membuat database kami lebih aman nanti di codelab ini.

4. Tetapkan lokasi penyimpanan data Cloud Firestore Anda. Anda dapat membiarkan ini sebagai default atau memilih wilayah yang dekat dengan Anda. Klik Selesai untuk menyediakan Firestore.

Aktifkan Penyimpanan Awan

Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengunggah, dan berbagi gambar.

Anda harus mengaktifkan Cloud Storage:

1. Di bagian Build Firebase console, klik Storage .
2. Jika tidak ada tombol Mulai , artinya penyimpanan Cloud sudah diaktifkan, dan Anda tidak perlu mengikuti langkah-langkah di bawah ini.
3. Klik Mulai .
4. Baca penafian tentang aturan keamanan untuk proyek Firebase Anda, lalu klik Berikutnya .

Dengan aturan keamanan default, setiap pengguna yang diautentikasi dapat menulis apa saja ke Cloud Storage. Anda akan membuat penyimpanan kami lebih aman nanti di codelab ini.

4. Lokasi Cloud Storage dipilih sebelumnya dengan region yang sama dengan yang Anda pilih untuk database Cloud Firestore Anda. Klik Selesai untuk menyelesaikan penyiapan.

4. Pasang antarmuka baris perintah Firebase

Antarmuka baris perintah (CLI) Firebase memungkinkan Anda menggunakan Firebase Hosting untuk melayani aplikasi web Anda secara lokal, serta untuk menerapkan aplikasi web Anda ke proyek Firebase Anda.

1. Instal CLI dengan menjalankan perintah npm berikut:

npm -g install firebase-tools

2. Verifikasi bahwa CLI telah diinstal dengan benar dengan menjalankan perintah berikut:

firebase --version

Pastikan versi Firebase CLI adalah v4.1.0 atau lebih baru.

3. Otorisasi Firebase CLI dengan menjalankan perintah berikut:

firebase login

Anda telah menyiapkan template aplikasi web untuk menarik konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori lokal aplikasi Anda (repositori yang Anda kloning sebelumnya di codelab). Namun untuk menarik konfigurasi, Anda perlu mengaitkan aplikasi Anda dengan proyek Firebase Anda.

4. Pastikan baris perintah Anda mengakses direktori angularfire-start lokal aplikasi Anda.
5. Kaitkan aplikasi Anda dengan proyek Firebase dengan menjalankan perintah berikut:

firebase use --add

6. Saat diminta, pilih ID Proyek Anda , lalu berikan alias untuk proyek Firebase Anda.

Alias ​​​​berguna jika Anda memiliki banyak lingkungan (produksi, pementasan, dll). Namun, untuk codelab ini, mari gunakan saja alias default .

7. Ikuti instruksi yang tersisa di baris perintah Anda.

5. Instal AngularFire

Sebelum menjalankan proyek, pastikan Anda telah menyiapkan Angular CLI dan AngularFire.

1. Di konsol, jalankan perintah berikut:

npm install -g @angular/cli

2. Kemudian, di konsol dari direktori angularfire-start , jalankan perintah Angular CLI berikut:

ng add @angular/fire

Ini akan menginstal semua dependensi yang diperlukan untuk proyek Anda.

3. Saat diminta, pilih fitur yang disiapkan di Firebase Console ( ng deploy -- hosting , Authentication , Firestore , Cloud Functions (callable) , Cloud Messaging , Cloud Storage ), dan ikuti petunjuk di konsol.

6. Jalankan aplikasi starter secara lokal

Sekarang setelah Anda mengimpor dan mengonfigurasi proyek, Anda siap menjalankan aplikasi web untuk pertama kalinya.

1. Di konsol dari direktori angularfire-start , jalankan perintah Firebase CLI berikut:

firebase emulators:start

2. Baris perintah Anda akan menampilkan respons berikut:

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

Anda menggunakan emulator Firebase Hosting untuk melayani aplikasi kami secara lokal. Aplikasi web sekarang harus tersedia dari http://localhost:5000 . Semua file yang berada di bawah subdirektori src disajikan.

3. Menggunakan browser Anda, buka aplikasi Anda di http://localhost:5000 .

Anda akan melihat UI aplikasi FriendlyChat Anda, yang belum (belum!) berfungsi:

Aplikasi tidak dapat melakukan apa pun saat ini, tetapi dengan bantuan Anda, itu akan segera terjadi! Sejauh ini Anda baru menyusun UI untuk Anda.

Sekarang mari kita buat obrolan waktu nyata!

7. Impor dan konfigurasikan Firebase

Konfigurasikan Firebase

Anda harus mengonfigurasi Firebase SDK untuk mengetahui proyek Firebase mana yang Anda gunakan.

1. Buka pengaturan Proyek Anda di konsol Firebase
2. Di kartu "Aplikasi Anda", pilih nama panggilan aplikasi yang Anda perlukan objek konfigurasinya.
3. Pilih "Config" dari panel cuplikan Firebase SDK.

Anda akan menemukan bahwa file lingkungan /angularfire-start/src/environments/environment.ts dibuat untuk Anda.

4. Salin cuplikan objek konfigurasi, lalu tambahkan ke angularfire-start/src/firebase-config.js .

lingkungan.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",
  },
};

Impor AngularFire

Anda akan menemukan bahwa fitur yang Anda pilih di konsol secara otomatis dirutekan di file /angularfire-start/src/app/app.module.ts . Ini memungkinkan aplikasi Anda menggunakan fitur dan fungsi Firebase. Namun, untuk mengembangkan di lingkungan lokal, Anda perlu menghubungkannya untuk menggunakan paket Emulator.

1. Di /angularfire-start/src/app/app.module.ts , temukan bagian imports , dan ubah fungsi yang disediakan untuk terhubung ke paket Emulator di lingkungan non-produksi.

// ...

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

Selama codelab ini, Anda akan menggunakan Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging, dan Performance Monitoring, jadi Anda mengimpor semua library mereka. Di aplikasi mendatang, pastikan Anda hanya mengimpor bagian Firebase yang diperlukan, untuk mempersingkat waktu muat aplikasi.

8. Siapkan login pengguna

AngularFire sekarang siap digunakan karena diimpor dan diinisialisasi di app.module.ts . Anda sekarang akan mengimplementasikan login pengguna menggunakan Firebase Authentication .

Autentikasi pengguna Anda dengan Masuk dengan Google

Di aplikasi, saat pengguna mengeklik tombol Masuk dengan Google , fungsi login akan dipicu. (Anda sudah menyiapkannya!) Untuk codelab ini, Anda ingin mengizinkan Firebase untuk menggunakan Google sebagai penyedia identitas. Anda akan menggunakan munculan, tetapi beberapa metode lain tersedia dari Firebase.

1. Di direktori angularfire-start , di subdirektori /src/app/services/ , buka chat.service.ts .
2. Temukan fungsi login .
3. Ganti seluruh fungsi dengan kode berikut.

obrolan.layanan.ts

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

Fungsi logout dipicu saat pengguna mengklik tombol Logout .

1. Kembali ke file src/app/services/chat.service.ts .
2. Temukan fungsi logout .
3. Ganti seluruh fungsi dengan kode berikut.

obrolan.layanan.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);
    })
}

Lacak status autentikasi

Untuk memperbarui UI kami, Anda memerlukan cara untuk memeriksa apakah pengguna masuk atau keluar. Dengan Firebase Authentication, Anda dapat mengambil status pengguna yang dapat diamati yang akan dipicu setiap kali status autentikasi berubah.

1. Kembali ke file src/app/services/chat.service.ts .
2. Temukan penugasan variabel user$ .
3. Ganti seluruh tugas dengan kode berikut.

obrolan.layanan.ts

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

Kode di atas memanggil user fungsi AngularFire yang mengembalikan pengguna yang dapat diamati. Ini akan dipicu setiap kali status autentikasi berubah (ketika pengguna masuk atau keluar). Pada titik inilah Anda akan memperbarui UI untuk mengarahkan ulang, menampilkan pengguna di nav header, dan seterusnya. Semua bagian UI ini telah diimplementasikan.

Uji masuk ke aplikasi

1. Jika aplikasi Anda masih ditayangkan, muat ulang aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start pada baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
2. Masuk ke aplikasi menggunakan tombol masuk dan akun Google Anda. Jika Anda melihat pesan kesalahan yang menyatakan auth/operation-not-allowed , periksa untuk memastikan bahwa Anda mengaktifkan Masuk dengan Google sebagai penyedia autentikasi di konsol Firebase.
3. Setelah masuk, gambar profil dan nama pengguna Anda akan ditampilkan:

9. Tulis pesan ke Cloud Firestore

Di bagian ini, Anda akan menulis beberapa data ke Cloud Firestore sehingga Anda dapat mengisi UI aplikasi. Ini dapat dilakukan secara manual dengan Firebase console , tetapi Anda akan melakukannya di aplikasi itu sendiri untuk mendemonstrasikan penulisan Cloud Firestore dasar.

Model data

Data Cloud Firestore dibagi menjadi koleksi, dokumen, kolom, dan subkoleksi. Anda akan menyimpan setiap pesan obrolan sebagai dokumen dalam koleksi tingkat atas yang disebut messages .

Tambahkan pesan ke Cloud Firestore

Untuk menyimpan pesan chat yang ditulis oleh pengguna, Anda akan menggunakan Cloud Firestore .

Di bagian ini, Anda akan menambahkan fungsionalitas bagi pengguna untuk menulis pesan baru ke database Anda. Pengguna yang mengeklik tombol KIRIM akan memicu cuplikan kode di bawah ini. Menambahkan objek pesan dengan konten kolom pesan ke instance Cloud Firestore Anda di koleksi messages . Metode add() menambahkan dokumen baru dengan ID yang dihasilkan secara otomatis ke koleksi.

1. Kembali ke file src/app/services/chat.service.ts .
2. Temukan fungsi addMessage .
3. Ganti seluruh fungsi dengan kode berikut.

obrolan.layanan.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;
    }
}

Uji pengiriman pesan

1. Jika aplikasi Anda masih ditayangkan, muat ulang aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start pada baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
2. Setelah masuk, masukkan pesan seperti "Halo!", lalu klik KIRIM . Ini akan menulis pesan ke Cloud Firestore. Namun, Anda belum akan melihat data di aplikasi web sebenarnya karena Anda masih perlu mengimplementasikan pengambilan data (bagian berikutnya dari codelab).
3. Anda dapat melihat pesan yang baru ditambahkan di Firebase Console Anda. Buka UI suite Emulator Anda. Di bawah bagian Build , klik Firestore Database (atau klik di sini dan Anda akan melihat kumpulan pesan dengan pesan yang baru ditambahkan:

10. Baca pesan

Sinkronkan pesan

Untuk membaca pesan di aplikasi, Anda harus menambahkan observable yang akan dipicu saat data berubah, lalu membuat elemen UI yang menampilkan pesan baru.

Anda akan menambahkan kode yang memproses pesan yang baru ditambahkan dari aplikasi. Dalam kode ini, Anda akan mengambil cuplikan kumpulan messages . Anda hanya akan menampilkan 12 pesan terakhir dari obrolan untuk menghindari menampilkan riwayat yang sangat panjang saat memuat.

1. Kembali ke file src/app/services/chat.service.ts .
2. Temukan fungsi loadMessages .
3. Ganti seluruh fungsi dengan kode berikut.

obrolan.layanan.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);
}

Untuk mendengarkan pesan dalam database, Anda membuat kueri pada kumpulan dengan menggunakan fungsi collection untuk menentukan kumpulan data yang ingin Anda dengarkan. Dalam kode di atas, Anda mendengarkan perubahan dalam messages koleksi, yang merupakan tempat pesan obrolan disimpan. Anda juga menerapkan batas dengan hanya mendengarkan 12 pesan terakhir menggunakan limit(12) dan mengurutkan pesan berdasarkan tanggal menggunakan orderBy('timestamp', 'desc') untuk mendapatkan 12 pesan terbaru.

Fungsi collectionData menggunakan snapshot di balik layar. Fungsi panggilan balik akan dipicu saat ada perubahan pada dokumen yang cocok dengan kueri. Ini bisa jadi jika pesan dihapus, dimodifikasi, atau ditambahkan. Anda dapat membaca selengkapnya tentang ini di dokumentasi Cloud Firestore .

Uji sinkronisasi pesan

1. Jika aplikasi Anda masih ditayangkan, muat ulang aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start pada baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
2. Pesan yang Anda buat sebelumnya di database harus ditampilkan di UI FriendlyChat (lihat di bawah). Jangan ragu untuk menulis pesan baru; mereka akan muncul seketika.
3. (Opsional) Anda dapat mencoba menghapus, mengubah, atau menambahkan pesan baru secara manual langsung di bagian Firestore pada rangkaian Emulator; setiap perubahan harus tercermin di UI.

Selamat! Anda sedang membaca dokumen Cloud Firestore di aplikasi Anda!

11. Kirim gambar

Sekarang Anda akan menambahkan fitur yang membagikan gambar.

Meskipun Cloud Firestore bagus untuk menyimpan data terstruktur, Cloud Storage lebih cocok untuk menyimpan file. Cloud Storage for Firebase adalah layanan penyimpanan file/blob, dan Anda akan menggunakannya untuk menyimpan gambar apa pun yang dibagikan pengguna menggunakan aplikasi kami.

Simpan gambar ke Cloud Storage

Untuk codelab ini, Anda telah menambahkan tombol yang memicu dialog pemilih file. Setelah memilih file, fungsi saveImageMessage dipanggil, dan Anda bisa mendapatkan referensi ke file yang dipilih. Fungsi saveImageMessage melakukan hal berikut:

1. Membuat pesan obrolan "placeholder" di umpan obrolan, sehingga pengguna melihat animasi "Memuat" saat Anda mengunggah gambar.
2. Upload file gambar ke Cloud Storage ke jalur ini: /<uid>/<file_name>
3. Menghasilkan URL yang dapat dibaca publik untuk file gambar.
4. Memperbarui pesan obrolan dengan URL file gambar yang baru diunggah sebagai pengganti gambar yang dimuat sementara.

Sekarang Anda akan menambahkan fungsionalitas untuk mengirim gambar:

1. Kembali ke file src/index.js .
2. Temukan fungsinya saveImageMessage .
3. Ganti seluruh fungsi dengan kode berikut.

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);
  }
}

Uji pengiriman gambar

1. Jika aplikasi Anda masih ditayangkan, muat ulang aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start pada baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
2. Setelah masuk, klik tombol unggah gambar di kiri bawah dan pilih file gambar menggunakan pemilih file. Jika Anda mencari gambar, silakan gunakan gambar cangkir kopi yang bagus ini.
3. Pesan baru akan muncul di UI aplikasi dengan gambar yang Anda pilih:

Jika Anda mencoba menambahkan gambar saat tidak masuk, Anda akan melihat kesalahan yang memberitahukan bahwa Anda harus masuk untuk menambahkan gambar.

12. Tampilkan notifikasi

Sekarang Anda akan menambahkan dukungan untuk pemberitahuan browser. Aplikasi ini akan memberi tahu pengguna saat ada pesan baru yang diposting di obrolan. Firebase Cloud Messaging (FCM) adalah solusi perpesanan lintas platform yang memungkinkan Anda mengirimkan pesan dan pemberitahuan dengan andal tanpa biaya.

Tambahkan pekerja layanan FCM

Aplikasi web memerlukan pekerja layanan yang akan menerima dan menampilkan pemberitahuan web.

Penyedia perpesanan seharusnya sudah disiapkan saat AngularFire ditambahkan, pastikan kode berikut ada di bagian impor /angularfire-start/src/app/app.module.ts

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

app/app.module.ts

Service worker hanya perlu memuat dan menginisialisasi Firebase Cloud Messaging SDK, yang akan menangani tampilan notifikasi.

Dapatkan token perangkat FCM

Saat notifikasi telah diaktifkan di perangkat atau browser, Anda akan diberikan token perangkat . Token perangkat inilah yang Anda gunakan untuk mengirim pemberitahuan ke perangkat tertentu atau browser tertentu.

Saat pengguna masuk, Anda memanggil fungsi saveMessagingDeviceToken . Di situlah Anda akan mendapatkan token perangkat FCM dari browser dan menyimpannya ke Cloud Firestore.

obrolan.layanan.ts

2. Temukan fungsinya saveMessagingDeviceToken .
3. Ganti seluruh fungsi dengan kode berikut.

obrolan.layanan.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);
    };
}

Namun, kode ini awalnya tidak berfungsi. Agar aplikasi Anda dapat mengambil token perangkat, pengguna harus memberikan izin kepada aplikasi Anda untuk menampilkan notifikasi (langkah selanjutnya dari codelab).

Minta izin untuk menampilkan notifikasi

Saat pengguna belum memberikan izin aplikasi Anda untuk menampilkan notifikasi, Anda tidak akan diberi token perangkat. Dalam hal ini, Anda memanggil metode requestPermission() , yang akan menampilkan dialog browser yang meminta izin ini ( pada browser yang didukung ).

1. Kembali ke file src/app/services/chat.service.ts .
2. Temukan fungsi requestNotificationsPermissions .
3. Ganti seluruh fungsi dengan kode berikut.

obrolan.layanan.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.');
    }
}

Dapatkan token perangkat Anda

1. Jika aplikasi Anda masih ditayangkan, muat ulang aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start pada baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
2. Setelah masuk, dialog izin pemberitahuan akan muncul:
3. Klik Izinkan .
4. Buka konsol JavaScript browser Anda. Anda akan melihat pesan berikut: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. Salin token perangkat Anda. Anda akan membutuhkannya untuk tahap codelab berikutnya.

Kirim pemberitahuan ke perangkat Anda

Sekarang setelah Anda memiliki token perangkat, Anda dapat mengirim pemberitahuan.

1. Buka tab Cloud Messaging di Firebase console .
2. Klik "Pemberitahuan Baru"
3. Masukkan judul notifikasi dan teks notifikasi.
4. Di sisi kanan layar, klik "kirim pesan percobaan"
5. Masukkan token perangkat yang Anda salin dari konsol JavaScript browser Anda, lalu klik tanda plus ("+")
6. Klik "tes"

Jika aplikasi Anda berada di latar depan, Anda akan melihat notifikasi di konsol JavaScript.

Jika aplikasi Anda berada di latar belakang, pemberitahuan akan muncul di browser Anda, seperti dalam contoh ini:

13. Aturan keamanan Cloud Firestore

Lihat aturan keamanan database

Cloud Firestore menggunakan bahasa aturan khusus untuk menentukan hak akses, keamanan, dan validasi data.

Saat menyiapkan project Firebase di awal codelab ini, Anda memilih untuk menggunakan aturan keamanan default "Test mode" sehingga Anda tidak membatasi akses ke datastore. Di konsol Firebase , di tab Aturan di bagian Basis Data , Anda dapat melihat dan mengubah aturan ini.

Saat ini, Anda akan melihat aturan default, yang tidak membatasi akses ke datastore. Ini berarti bahwa setiap pengguna dapat membaca dan menulis ke koleksi apa pun di penyimpanan data Anda.

rules_version = '2';

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

Anda akan memperbarui aturan untuk membatasi hal-hal dengan menggunakan aturan berikut:

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;
    }
  }
}

Aturan keamanan harus diperbarui secara otomatis ke paket Emulator Anda.

Lihat aturan keamanan Cloud Storage

Cloud Storage for Firebase menggunakan bahasa aturan khusus untuk menentukan hak akses, keamanan, dan validasi data.

Saat menyiapkan project Firebase di awal codelab ini, Anda memilih untuk menggunakan aturan keamanan Cloud Storage default yang hanya mengizinkan pengguna yang diautentikasi untuk menggunakan Cloud Storage. Di konsol Firebase , di tab Aturan di bagian Penyimpanan , Anda dapat melihat dan mengubah aturan. Anda akan melihat aturan default yang mengizinkan setiap pengguna yang masuk untuk membaca dan menulis file apa pun di keranjang penyimpanan Anda.

rules_version = '2';

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

Anda akan memperbarui aturan untuk melakukan hal berikut:

• Izinkan setiap pengguna untuk menulis hanya ke folder khusus mereka sendiri
• Izinkan siapa pun membaca dari Cloud Storage
• Pastikan bahwa file yang diunggah adalah gambar
• Batasi ukuran gambar yang dapat diunggah maksimal 5 MB

Ini dapat diimplementasikan dengan menggunakan aturan berikut:

penyimpanan.aturan

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. Terapkan aplikasi Anda menggunakan Firebase Hosting

Firebase menawarkan layanan hosting untuk melayani aset dan aplikasi web Anda. Anda dapat menerapkan file Anda ke Firebase Hosting menggunakan Firebase CLI. Sebelum men-deploy, Anda perlu menentukan di file firebase.json file lokal mana yang harus di-deploy. Untuk codelab ini, Anda telah melakukannya karena langkah ini diperlukan untuk menyajikan file kami selama codelab ini. Pengaturan hosting ditentukan di bawah atribut 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"
  }
}

Pengaturan ini memberi tahu CLI bahwa Anda ingin menggunakan semua file di direktori ./public ( "public": "./public" ).

1. Pastikan baris perintah Anda mengakses direktori angularfire-start lokal aplikasi Anda.
2. Terapkan file Anda ke proyek Firebase dengan menjalankan perintah berikut:

ng deploy

Kemudian pilih opsi Firebase, dan ikuti petunjuk di baris perintah.

3. Konsol harus menampilkan yang berikut:

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

4. Kunjungi aplikasi web Anda yang sekarang dihosting sepenuhnya di CDN global menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri:

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

Sebagai alternatif, Anda dapat menjalankan firebase open hosting:site di baris perintah.

Kunjungi dokumentasi untuk mempelajari lebih lanjut cara kerja Firebase Hosting .

Buka bagian Hosting Firebase console proyek Anda untuk melihat informasi dan alat hosting yang berguna, termasuk riwayat penerapan Anda, fungsi untuk kembali ke versi aplikasi sebelumnya, dan alur kerja untuk menyiapkan domain khusus.

15. Selamat!

Anda telah menggunakan Firebase untuk membuat aplikasi web obrolan waktu nyata!

Apa yang telah Anda bahas

• Otentikasi Firebase
• Toko Api Awan
• Firebase SDK untuk Cloud Storage
• Perpesanan Cloud Firebase
• Pemantauan Kinerja Firebase
• Hosting Firebase

Langkah selanjutnya

Belajarlah lagi

• firebase.google.com