Halaman ini diterjemahkan oleh Cloud Translation API.

Lab kode web AngularFire

1. Ikhtisar

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 perlukan

IDE/editor teks pilihan Anda, seperti WebStorm , Atom , Sublime , atau VS Code
Manajer paket npm , yang biasanya disertakan dengan Node.js
Terminal/konsol
Browser pilihan Anda, seperti Chrome
Kode contoh codelab (Lihat langkah codelab berikutnya untuk mengetahui cara mendapatkan kode.)

2. Dapatkan kode contoh

Meng-clone repositori GitHub codelab dari baris perintah:

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 yang dikloning. Direktori 📁 angularfire-start ini berisi kode awal untuk codelab, yang akan menjadi aplikasi web chat yang berfungsi penuh.

3. Membuat dan menyiapkan proyek Firebase

Buat proyek Firebase

Masuk ke Firebase .
Di Firebase console, klik Tambahkan Proyek , lalu beri nama proyek Firebase Anda FriendlyChat . Ingat ID proyek untuk proyek Firebase Anda.
Hapus centang Aktifkan Google Analytics untuk proyek ini
Klik Buat Proyek .

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

Firebase Authentication untuk memudahkan pengguna login ke aplikasi Anda.
Cloud Firestore untuk menyimpan data terstruktur di cloud dan mendapatkan notifikasi instan ketika data berubah.
Cloud Storage untuk Firebase untuk menyimpan file di cloud.
Firebase Hosting untuk menghosting dan melayani 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 produk ini memerlukan konfigurasi khusus atau perlu diaktifkan menggunakan Firebase console.

Tambahkan aplikasi web Firebase ke proyek

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

Daftarkan tangkapan layar aplikasi web

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

Anda harus mengaktifkan login Google :

Di Firebase console, temukan bagian Build di panel kiri.
Klik Autentikasi , lalu klik tab Metode masuk (atau klik di sini untuk langsung menuju ke sana).
Aktifkan penyedia login Google , lalu klik Simpan .
Tetapkan nama aplikasi Anda yang dapat dilihat publik menjadi Obrolan Ramah dan pilih email dukungan Proyek dari menu tarik-turun.
Konfigurasikan layar persetujuan OAuth Anda di Google Cloud Console dan tambahkan logo:

Aktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

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

Pilih opsi Mulai dalam mode pengujian , lalu klik Berikutnya setelah membaca penafian tentang aturan keamanan.

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

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

Aktifkan Penyimpanan Cloud

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

Anda harus mengaktifkan Cloud Storage:

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

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

Lokasi Cloud Storage telah dipilih sebelumnya dengan wilayah yang sama dengan yang Anda pilih untuk database Cloud Firestore Anda. Klik Selesai untuk menyelesaikan pengaturan.

4. Instal antarmuka baris perintah Firebase

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

Instal CLI dengan menjalankan perintah npm berikut:

npm -g install firebase-tools

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

firebase --version

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

Otorisasi Firebase CLI dengan menjalankan perintah berikut:

firebase login

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

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

firebase use --add

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

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

Ikuti instruksi selanjutnya pada baris perintah Anda.

5. Instal AngularFire

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

Di konsol, jalankan perintah berikut:

npm install -g @angular/cli

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.

Saat diminta, pilih fitur yang telah 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.

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

firebase emulators:start

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 seharusnya tersedia dari http://localhost:5000 . Semua file yang terletak di bawah subdirektori src akan dilayani.

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

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

Aplikasi ini tidak dapat melakukan apa pun saat ini, tetapi dengan bantuan Anda, aplikasi akan segera melakukannya! Anda hanya menata UI untuk Anda sejauh ini.

Sekarang mari kita buat obrolan waktu nyata!

7. Impor dan konfigurasikan Firebase

Konfigurasikan Firebase

Anda harus mengonfigurasi Firebase SDK untuk memberi tahu proyek Firebase mana yang Anda gunakan.

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

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

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 . Hal ini memungkinkan aplikasi Anda menggunakan fitur dan fungsi Firebase. Namun, untuk mengembangkan di lingkungan lokal, Anda perlu menghubungkannya untuk menggunakan rangkaian Emulator.

Di /angularfire-start/src/app/app.module.ts , temukan bagian imports , dan ubah fungsi yang disediakan untuk terhubung ke rangkaian 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();
}),

// ...

aplikasi.modul.ts

Selama codelab ini, Anda akan menggunakan Firebase Authentication, Cloud Firestore, Cloud Storage, Cloud Messaging, dan Performance Monitoring, sehingga Anda mengimpor semua perpustakaan mereka. Di aplikasi Anda yang akan datang, pastikan Anda hanya mengimpor bagian Firebase yang Anda perlukan, untuk mempersingkat waktu muat aplikasi Anda.

8. Siapkan proses masuk pengguna

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

Di aplikasi, saat pengguna mengklik tombol Masuk dengan Google , fungsi login akan terpicu. (Anda sudah menyiapkannya!) Untuk codelab ini, Anda ingin memberi otorisasi pada Firebase untuk menggunakan Google sebagai penyedia identitas. Anda akan menggunakan popup, namun beberapa metode lain tersedia dari Firebase.

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

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

Fungsi logout dipicu ketika pengguna mengklik tombol Logout .

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

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

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.

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

chat.service.ts

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

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

Uji masuk ke aplikasi

Jika aplikasi Anda masih ditayangkan, segarkan aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start di baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
Masuk ke aplikasi menggunakan tombol masuk dan akun Google Anda. Jika Anda melihat pesan error yang menyatakan auth/operation-not-allowed , periksa untuk memastikan bahwa Anda mengaktifkan Google Sign-in sebagai penyedia autentikasi di Firebase console.
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. Hal ini dapat dilakukan secara manual dengan Firebase console , tetapi Anda akan melakukannya di aplikasi itu sendiri untuk mendemonstrasikan penulisan dasar Cloud Firestore.

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 mengklik tombol KIRIM akan memicu cuplikan kode di bawah ini. Ini menambahkan objek pesan dengan konten kolom pesan ke instance Cloud Firestore Anda di kumpulan messages . Metode add() menambahkan dokumen baru dengan ID yang dibuat secara otomatis ke koleksi.

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

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

Uji pengiriman pesan

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

10. Baca pesan

Sinkronkan pesan

Untuk membaca pesan di aplikasi, Anda perlu menambahkan observasi yang akan terpicu ketika data berubah, lalu membuat elemen UI yang menampilkan pesan baru.

Anda akan menambahkan kode yang mendengarkan 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.

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

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

Untuk mendengarkan pesan dalam database, Anda membuat kueri pada koleksi dengan menggunakan fungsi collection untuk menentukan di koleksi mana data yang ingin Anda dengarkan berada. Dalam kode di atas, Anda mendengarkan perubahan di dalam messages koleksi, yang merupakan tempat penyimpanan pesan obrolan. 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 terpal. Fungsi panggilan balik akan terpicu ketika ada perubahan apa pun pada dokumen yang cocok dengan kueri. Hal ini bisa terjadi jika pesan dihapus, diubah, atau ditambahkan. Anda dapat membaca selengkapnya tentang hal ini di dokumentasi Cloud Firestore .

Uji sinkronisasi pesan

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

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

11. Kirim gambar

Anda sekarang akan menambahkan fitur yang berbagi 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 menyelesaikan hal berikut:

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

Sekarang Anda akan menambahkan fungsionalitas untuk mengirim gambar:

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

indeks.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

Jika aplikasi Anda masih ditayangkan, segarkan aplikasi Anda di browser. Jika tidak, jalankan firebase emulators:start di baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
Setelah login, klik tombol upload gambar di kiri bawah dan pilih file gambar menggunakan pemilih file. Jika Anda sedang mencari gambar, silakan gunakan gambar cangkir kopi yang bagus ini.
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

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

Tambahkan pekerja layanan FCM

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

Penyedia pesan seharusnya sudah diatur ketika AngularFire ditambahkan, pastikan kode berikut ada di bagian impor /angularfire-start/src/app/app.module.ts

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

aplikasi/aplikasi.modul.ts

Pekerja layanan 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 mengirimkan notifikasi ke perangkat 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.

chat.service.ts

Temukan fungsinya saveMessagingDeviceToken .
Ganti seluruh fungsi dengan kode berikut.

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

Namun, kode ini pada awalnya tidak akan berfungsi. Agar aplikasi Anda dapat mengambil token perangkat, pengguna perlu memberikan izin kepada aplikasi Anda untuk menampilkan notifikasi (langkah codelab berikutnya).

Minta izin untuk menampilkan notifikasi

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

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

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

Dapatkan token perangkat Anda

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

Kirim pemberitahuan ke perangkat Anda

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

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

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 pada contoh ini:

13. Aturan keamanan Cloud Firestore

Lihat aturan keamanan basis data

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

Saat menyiapkan proyek Firebase di awal codelab ini, Anda memilih untuk menggunakan aturan keamanan default "Mode pengujian" sehingga Anda tidak membatasi akses ke datastore. Di Firebase console , pada tab Aturan di bagian Database , Anda dapat melihat dan mengubah aturan ini.

Saat ini, Anda akan melihat aturan default, yang tidak membatasi akses ke datastore. Artinya, setiap pengguna dapat membaca dan menulis ke koleksi mana 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 sesuatu 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 akan diperbarui secara otomatis ke rangkaian 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 proyek Firebase di awal codelab ini, Anda memilih untuk menggunakan aturan keamanan Cloud Storage default yang hanya mengizinkan pengguna terautentikasi untuk menggunakan Cloud Storage. Di Firebase console , di tab Aturan di bagian Penyimpanan , Anda dapat melihat dan mengubah aturan. Anda akan melihat aturan default yang mengizinkan 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 spesifik mereka sendiri
Izinkan siapa pun membaca dari Cloud Storage
Pastikan file yang diupload adalah gambar
Batasi ukuran gambar yang dapat diunggah maksimal 5 MB

Hal 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 men-deploy file Anda ke Firebase Hosting menggunakan Firebase CLI. Sebelum menerapkan, Anda perlu menentukan di file firebase.json file lokal mana yang harus diterapkan. Untuk codelab ini, Anda sudah melakukannya karena langkah ini diperlukan untuk menyajikan file kita 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 menyebarkan semua file di direktori ./public ( "public": "./public" ).

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

ng deploy

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

Konsol akan 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

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

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

Alternatifnya, 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 melakukan roll back ke versi aplikasi sebelumnya, dan alur kerja untuk menyiapkan domain khusus.

15. Selamat!

Anda telah menggunakan Firebase untuk membuat aplikasi web chat real-time!

Apa yang telah Anda liput

Otentikasi Firebase
Penyimpanan Awan Api
Firebase SDK untuk Penyimpanan Cloud
Pesan Cloud Firebase
Pemantauan Kinerja Firebase
Hosting Firebase

Langkah selanjutnya

Belajarlah lagi

firebase.google.com

16. [Opsional] Terapkan dengan App Check

Firebase App Check membantu mengamankan layanan Anda dari traffic yang tidak diinginkan dan membantu melindungi backend Anda dari penyalahgunaan. Pada langkah ini, Anda akan menambahkan validasi kredensial dan memblokir klien tidak sah dengan App Check dan reCAPTCHA Enterprise .

Pertama, Anda harus mengaktifkan App Check dan reCaptcha.

Mengaktifkan reCaptcha Enterprise

Di Cloud Console, temukan dan pilih reCaptcha Enterprise di bagian Keamanan.
Aktifkan layanan seperti yang diminta, dan klik Buat Kunci .
Masukkan nama tampilan seperti yang diminta, dan pilih Situs Web sebagai jenis platform Anda.
Tambahkan URL yang Anda terapkan ke daftar Domain , dan pastikan opsi "Gunakan tantangan kotak centang" tidak dipilih .
Klik Buat Kunci , dan simpan kunci yang dihasilkan di suatu tempat untuk diamankan. Anda akan membutuhkannya nanti di langkah ini.

Mengaktifkan Pemeriksaan Aplikasi

Di Firebase console, temukan bagian Build di panel kiri.
Klik App Check , lalu klik tab Metode masuk untuk menavigasi ke App Check .
Klik Daftar dan masukkan kunci reCaptcha Enterprise Anda saat diminta, lalu klik Simpan .
Di Tampilan API, pilih Penyimpanan dan klik Terapkan . Lakukan hal yang sama untuk Cloud Firestore .

Pemeriksaan Aplikasi sekarang harus diterapkan! Segarkan aplikasi Anda dan coba lihat atau kirim pesan obrolan. Anda harus mendapatkan pesan kesalahan:

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

Ini berarti App Check memblokir permintaan yang tidak divalidasi secara default. Sekarang mari tambahkan validasi ke aplikasi Anda.

Navigasikan ke file environment.ts Anda dan tambahkan reCAPTCHAEnterpriseKey ke objek 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"
  },
};

Ganti nilai key dengan token reCaptcha Enterprise Anda.

Kemudian, navigasikan ke file app.module.ts dan tambahkan impor berikut:

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

Dalam file app.module.ts yang sama, tambahkan deklarasi variabel global berikut:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

Dalam impor, tambahkan inisialisasi App Check dengan ReCaptchaEnterpriseProvider , dan setel isTokenAutoRefreshEnabled ke true untuk memungkinkan token disegarkan secara otomatis.

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

Untuk mengizinkan pengujian lokal, setel self.FIREBASE_APPCHECK_DEBUG_TOKEN ke true . Saat Anda menyegarkan aplikasi di localhost , ini akan mencatat token debug di konsol yang mirip dengan:

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.

Sekarang, buka Tampilan Aplikasi dari App Check di Firebase console.

Klik menu tambahan, lalu pilih Kelola token debug .

Lalu, klik Tambahkan token debug dan tempelkan token debug dari konsol Anda seperti yang diminta.

Navigasikan ke file chat.service.ts , dan tambahkan impor berikut:

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

Dalam file chat.service.ts](angularfire-start/src/app/services/chat.service.ts) yang sama, masukkan App Check bersama layanan Firebase lainnya.

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

Selamat! App Check sekarang seharusnya berfungsi di aplikasi Anda.

Lab kode web AngularFire

1. Ikhtisar

Apa yang akan Anda pelajari

Apa yang Anda perlukan

2. Dapatkan kode contoh

Impor aplikasi awal

3. Membuat dan menyiapkan proyek Firebase

Buat proyek Firebase

Tambahkan aplikasi web Firebase ke proyek

Aktifkan login Google untuk Firebase Authentication

Aktifkan Cloud Firestore

Aktifkan Penyimpanan Cloud

4. Instal antarmuka baris perintah Firebase

5. Instal AngularFire

6. Jalankan aplikasi starter secara lokal

7. Impor dan konfigurasikan Firebase

Konfigurasikan Firebase

Impor AngularFire

8. Siapkan proses masuk pengguna

Otentikasi pengguna Anda dengan Login dengan Google

Lacak status autentikasi

Uji masuk ke aplikasi

9. Tulis pesan ke Cloud Firestore

Model data

Tambahkan pesan ke Cloud Firestore

Uji pengiriman pesan

10. Baca pesan

Sinkronkan pesan

Uji sinkronisasi pesan

11. Kirim gambar

Simpan gambar ke Cloud Storage

Uji pengiriman gambar

12. Tampilkan notifikasi

Tambahkan pekerja layanan FCM

Dapatkan token perangkat FCM

Minta izin untuk menampilkan notifikasi

Dapatkan token perangkat Anda

Kirim pemberitahuan ke perangkat Anda

13. Aturan keamanan Cloud Firestore

Lihat aturan keamanan basis data

Lihat aturan keamanan Cloud Storage

14. Terapkan aplikasi Anda menggunakan Firebase Hosting

15. Selamat!

Apa yang telah Anda liput

Langkah selanjutnya

Belajarlah lagi

16. [Opsional] Terapkan dengan App Check