Codelab web AngularFire

1. Ringkasan

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

Yang akan Anda pelajari

• Bangun aplikasi web menggunakan Angular dan Firebase.
• Menyinkronkan data menggunakan Cloud Firestore dan Cloud Storage for Firebase.
• Melakukan autentikasi pengguna menggunakan Firebase Authentication.
• Men-deploy aplikasi web Anda di Firebase Hosting.
• Mengirim notifikasi dengan Firebase Cloud Messaging.
• Kumpulkan data performa aplikasi web Anda.

Yang Anda butuhkan

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

2. Mendapatkan kode contoh

Clone repositori GitHub codelab dari command line:

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

Atau, jika belum menginstal git, Anda dapat mendownload repositori sebagai file ZIP.

Repositori friendlychat-web berisi project contoh untuk beberapa platform.

Codelab ini hanya menggunakan dua repositori berikut:

• ⇩ angularfire-start: Kode awal yang akan Anda bangun selama codelab ini.
• ⇩ angularfire: Kode lengkap untuk aplikasi contoh yang sudah selesai.

Catatan: Anda dapat menjalankan aplikasi yang sudah selesai secara lokal menggunakan Emulator suite. Namun, jika ingin men-deploy dan menayangkannya, Anda masih harus membuat project Firebase di Firebase console (lihat bagian Membuat dan menyiapkan project Firebase dalam codelab ini untuk mendapatkan petunjuk).

Mengimpor aplikasi awal

Dengan menggunakan IDE, buka atau impor direktori 🏏 angularfire-start dari repositori yang di-clone. Direktori OPPORTUNITYCOUNT angularfire-start ini berisi kode awal untuk codelab, yang akan menjadi aplikasi web chat yang berfungsi penuh.

Penting: Setelah meng-clone atau mendownload kode dari repositori, akses direktori peluang angularfire-start di konsol, dan jalankan npm install untuk menginstal dependensi.

3. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Login ke Firebase.
2. Di Firebase console, klik Tambahkan Project, lalu beri nama project Firebase Anda dengan FriendlyChat. Ingat project ID untuk project Firebase Anda.
3. Hapus centang Aktifkan Google Analytics untuk project ini
4. Klik Buat Project.

Penting: Project Firebase Anda akan diberi nama FriendlyChat, tetapi Firebase akan otomatis menetapkan Project ID unik untuknya dalam bentuk friendlychat-1234. ID unik ini adalah cara project Anda diidentifikasi (termasuk di CLI), sedangkan FriendlyChat hanyalah nama tampilan.

Aplikasi yang akan Anda bangun 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 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 pop-up browser.
• Firebase Performance Monitoring untuk mengumpulkan data performa pengguna untuk aplikasi Anda.

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

Menambahkan aplikasi web Firebase ke project

1. Klik ikon web untuk membuat aplikasi web Firebase baru.
2. Daftarkan aplikasi dengan nama panggilan Friendly Chat, lalu centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini. Klik Register app.
3. Pada langkah berikutnya, Anda akan melihat objek konfigurasi. Salin hanya objek JS (bukan HTML di sekitarnya) ke firebase-config.js

Mengaktifkan login dengan Google untuk Firebase Authentication

Untuk mengizinkan pengguna login ke aplikasi web dengan Akun Google mereka, Anda harus menggunakan metode login Google.

Anda harus mengaktifkan login dengan Google:

1. Di Firebase console, cari bagian Build di panel kiri.
2. Klik Authentication, lalu klik tab Sign-in method (atau klik di sini untuk langsung membukanya).
3. Aktifkan penyedia login dengan Google, lalu klik Save.
4. Setel nama aplikasi Anda yang dapat dilihat publik menjadi Friendly Chat dan pilih Email dukungan project dari menu dropdown.
5. Konfigurasikan layar izin OAuth Anda di Google Cloud Console, lalu tambahkan logo:

Mengaktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

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

Harap berhati-hati saat mengaktifkan Cloud Firestore dan BUKAN Realtime Database untuk codelab ini. Kedua opsi tersebut ada di halaman yang sama, tetapi Anda perlu mengaktifkan Cloud Firestore, yang ada di bagian atas halaman.

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

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

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

Mengaktifkan Cloud Storage

Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengupload, dan membagikan gambar.

Anda harus mengaktifkan Cloud Storage:

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

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

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

4. Menginstal antarmuka command line Firebase

Dengan antarmuka command line (CLI) Firebase, Anda dapat menggunakan Firebase Hosting untuk menyalurkan aplikasi web secara lokal, serta men-deploy aplikasi web ke project Firebase.

Catatan: Untuk menginstal CLI, Anda perlu menginstal npm yang biasanya dilengkapi dengan Node.js.

1. Instal CLI dengan menjalankan perintah npm berikut:

npm -g install firebase-tools

Tidak berhasil? Anda mungkin perlu mengubah izin npm.

2. Pastikan CLI telah diinstal dengan benar dengan menjalankan perintah berikut:

firebase --version

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

3. 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 (repositori yang Anda clone sebelumnya di codelab). Namun, untuk menarik konfigurasi, Anda harus mengaitkan aplikasi dengan project Firebase Anda.

4. Pastikan command line mengakses direktori angularfire-start lokal aplikasi Anda.
5. Kaitkan aplikasi Anda dengan project Firebase dengan menjalankan perintah berikut:

firebase use --add

6. Saat diminta, pilih Project ID, lalu beri alias untuk project Firebase Anda.

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

7. Ikuti petunjuk selanjutnya di command line Anda.

5. Instal AngularFire

Sebelum menjalankan project, 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

Tindakan ini akan menginstal semua dependensi yang diperlukan untuk project Anda.

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

6. Menjalankan aplikasi awal secara lokal

Setelah mengimpor dan mengonfigurasi project, Anda siap menjalankan aplikasi web untuk pertama kalinya.

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

firebase emulators:start

2. Command line Anda akan menampilkan respons berikut:

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

Anda menggunakan emulator Firebase Hosting untuk menyalurkan aplikasi secara lokal. Aplikasi web kini tersedia dari http://localhost:5000. Semua file yang berada di bawah subdirektori src akan ditayangkan.

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

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

Saat ini aplikasi belum dapat melakukan apa pun, tetapi dengan bantuan Anda, tindakan tersebut akan segera dilakukan. Sejauh ini, Anda baru menyusun UI untuk Anda.

Sekarang mari kita buat chat real-time!

7. Mengimpor dan mengonfigurasi Firebase

Mengonfigurasi Firebase

Anda harus mengonfigurasi Firebase SDK untuk memberi tahu project Firebase mana yang sedang digunakan.

1. Buka Project settings di Firebase console
2. Di kartu "Aplikasi Anda", pilih nama panggilan aplikasi yang memerlukan objek konfigurasi.
3. Pilih "Config" dari panel cuplikan Firebase SDK.

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

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

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

Kode di atas harus berisi objek konfigurasi Firebase khusus aplikasi Anda, bukan nilai placeholder.

Mengimpor AngularFire

Anda akan mendapati bahwa hasil yang telah Anda pilih di konsol otomatis dirutekan di file /angularfire-start/src/app/app.module.ts. Hal ini memungkinkan aplikasi Anda menggunakan fitur dan fungsi Firebase. Namun, untuk melakukan pengembangan di lingkungan lokal, Anda perlu menghubungkannya untuk menggunakan Emulator Suite.

1. Di /angularfire-start/src/app/app.module.ts, temukan bagian imports, dan ubah fungsi yang disediakan untuk terhubung ke Emulator suite 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, sehingga Anda mengimpor semua library mereka. Di aplikasi mendatang, pastikan Anda hanya mengimpor bagian-bagian Firebase yang diperlukan, untuk mempersingkat waktu pemuatan aplikasi.

8. Menyiapkan login pengguna

AngularFire sekarang harus siap digunakan karena telah diimpor dan diinisialisasi dalam app.module.ts. Sekarang Anda akan menerapkan login pengguna menggunakan Firebase Authentication.

Mengautentikasi pengguna dengan Login dengan Google

Di aplikasi, saat pengguna mengklik tombol Sign in with Google, fungsi login akan dipicu. (Anda sudah menyiapkannya untuk Anda!) Untuk codelab ini, Anda ingin mengizinkan Firebase untuk menggunakan Google sebagai penyedia identitas. Anda akan menggunakan pop-up, tetapi beberapa metode lainnya 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.

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

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

Melacak status autentikasi

Untuk mengupdate UI yang sesuai, Anda memerlukan cara untuk memeriksa apakah pengguna login atau logout. Dengan Firebase Authentication, Anda dapat mengambil observable pada status pengguna yang akan dipicu setiap kali status autentikasi berubah.

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

chat.service.ts

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

Kode di atas memanggil fungsi AngularFire user yang menampilkan pengguna yang dapat diamati. Kode ini akan dipicu setiap kali status autentikasi berubah (saat pengguna login atau logout). Pada tahap ini, Anda akan mengupdate UI untuk mengalihkan, menampilkan pengguna di navigasi header, dan sebagainya. Semua bagian UI ini telah diimplementasikan.

Menguji login ke aplikasi

1. Jika aplikasi masih ditayangkan, refresh aplikasi di browser. Jika tidak, jalankan firebase emulators:start di command line untuk mulai menayangkan 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 error yang menyatakan auth/operation-not-allowed, periksa untuk memastikan bahwa Anda telah mengaktifkan Login dengan Google sebagai penyedia autentikasi di Firebase console.
3. Setelah login, nama pengguna dan foto profil Anda akan ditampilkan:

9. Menulis pesan ke Cloud Firestore

Di bagian ini, Anda akan menulis beberapa data ke Cloud Firestore agar dapat mengisi UI aplikasi. Hal 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 chat sebagai dokumen dalam koleksi level teratas yang disebut messages.

Tips: Untuk mempelajari model data Cloud Firestore lebih lanjut, baca dokumen dan koleksi di dokumentasi.

Menambahkan pesan ke Cloud Firestore

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

Di bagian ini, Anda akan menambahkan fungsi bagi pengguna untuk menulis pesan baru ke database Anda. Pengguna yang mengklik tombol SEND akan memicu cuplikan kode di bawah. Metode ini menambahkan objek pesan dengan konten kolom pesan ke instance Cloud Firestore Anda di koleksi messages. Metode add() menambahkan dokumen baru dengan ID yang dibuat 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.

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

Menguji pengiriman pesan

1. Jika aplikasi masih ditayangkan, refresh aplikasi di browser. Jika tidak, jalankan firebase emulators:start di command line untuk mulai menayangkan aplikasi dari http://localhost:5000, lalu buka di browser Anda.
2. Setelah login, masukkan pesan seperti "Hey there!", lalu klik SEND. Tindakan ini akan menulis pesan ke Cloud Firestore. Namun, Anda tidak akan melihat data di aplikasi web yang sebenarnya karena masih perlu menerapkan pengambilan data (bagian berikutnya dari codelab).
3. Anda dapat melihat pesan yang baru ditambahkan di Firebase Console. Buka UI Emulator Suite. Di bagian Build, klik Firestore Database (atau klik di sini dan Anda akan melihat koleksi messages dengan pesan yang baru ditambahkan:

10. Membaca pesan

Menyinkronkan pesan

Untuk membaca pesan dalam aplikasi, Anda perlu 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 snapshot koleksi messages. Anda hanya akan menampilkan 12 pesan terakhir dari chat agar histori yang sangat panjang tidak ditampilkan setelah dimuat.

1. Kembali ke file src/app/services/chat.service.ts.
2. Temukan fungsi loadMessages.
3. 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 memproses pesan dalam database, Anda perlu membuat kueri pada koleksi menggunakan fungsi collection untuk menentukan kumpulan data yang ingin Anda proses. Pada kode di atas, Anda memproses perubahan dalam koleksi messages, tempat pesan chat disimpan. Anda juga menerapkan batas dengan hanya memproses 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 callback akan terpicu jika ada perubahan pada dokumen yang cocok dengan kueri. Hal ini dapat terjadi jika pesan dihapus, diubah, atau ditambahkan. Anda dapat membaca hal ini lebih lanjut di dokumentasi Cloud Firestore.

Menguji sinkronisasi pesan

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

Selamat! Anda sedang membaca dokumen Cloud Firestore di aplikasi!

11. Mengirim gambar

Sekarang Anda akan menambahkan fitur yang membagikan gambar.

Meskipun Cloud Firestore cocok 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.

Menyimpan gambar ke Cloud Storage

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

1. Membuat pesan chat "placeholder" di feed chat, sehingga pengguna melihat animasi "Memuat" saat Anda mengupload gambar.
2. Mengupload file gambar ke Cloud Storage ke jalur ini: /<uid>/<file_name>
3. Menghasilkan URL yang dapat dibaca oleh publik untuk file gambar.
4. Memperbarui pesan chat dengan URL file gambar yang baru diupload sebagai pengganti gambar pemuatan sementara.

Sekarang Anda akan menambahkan fungsi untuk mengirim gambar:

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

chat.service.ts

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

Menguji pengiriman gambar

1. Jika aplikasi masih ditayangkan, refresh aplikasi di browser. Jika tidak, jalankan firebase emulators:start di command line untuk mulai menayangkan aplikasi dari http://localhost:5000, lalu buka di browser Anda.
2. Setelah login, klik tombol upload gambar di kiri bawah lalu pilih file gambar menggunakan pemilih file. Jika Anda mencari gambar, jangan ragu menggunakan gambar cangkir kopi yang bagus ini.
3. Pesan baru akan muncul di UI aplikasi dengan gambar yang dipilih:

Jika mencoba menambahkan gambar saat tidak login, Anda akan melihat error yang memberi tahu bahwa Anda harus login untuk menambahkan gambar.

12. Tampilkan notifikasi

Sekarang Anda akan menambahkan dukungan untuk notifikasi browser. Aplikasi ini akan memberi tahu pengguna saat ada pesan baru yang diposting di dalam chat. Firebase Cloud Messaging (FCM) adalah solusi pengiriman pesan lintas platform andal yang dapat Anda gunakan untuk mengirim pesan dan notifikasi tanpa biaya.

Menambahkan pekerja layanan FCM

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

Penyedia pesan 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

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

Mendapatkan token perangkat FCM

Jika notifikasi diaktifkan di perangkat atau browser, Anda akan diberi token perangkat. Token perangkat ini yang Anda gunakan untuk mengirimkan notifikasi ke perangkat tertentu atau browser tertentu.

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

chat.service.ts

2. Temukan fungsi saveMessagingDeviceToken.
3. 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 awalnya tidak akan berfungsi. Agar aplikasi Anda dapat mengambil token perangkat, pengguna harus memberikan izin kepada aplikasi untuk menampilkan notifikasi (langkah berikutnya dari codelab).

Meminta izin untuk menampilkan notifikasi

Jika pengguna belum memberikan izin aplikasi 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 ( di browser yang didukung).

1. Kembali ke file src/app/services/chat.service.ts.
2. Temukan fungsi requestNotificationsPermissions.
3. 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.');
    }
}

Mendapatkan token perangkat

1. Jika aplikasi masih ditayangkan, refresh aplikasi di browser. Jika tidak, jalankan firebase emulators:start di command line untuk mulai menayangkan aplikasi dari http://localhost:5000, lalu buka di browser Anda.
2. Setelah login, dialog izin notifikasi 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.

Mengirim notifikasi ke perangkat Anda

Setelah memiliki token perangkat, Anda dapat mengirim notifikasi.

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

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

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

Dalam codelab lanjutan, Firebase SDK untuk Cloud Functions, Anda akan melihat cara mengotomatiskan pengiriman notifikasi dari backend untuk setiap pesan baru yang diposting di aplikasi chat.

13. Aturan keamanan Cloud Firestore

Lihat aturan keamanan database

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

Saat menyiapkan project 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. Ini berarti setiap pengguna dapat membaca dan menulis ke koleksi apa pun di datastore Anda.

rules_version = '2';

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

Anda akan memperbarui aturan untuk membatasi berbagai hal 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;
    }
  }
}

Variabel aturan request.auth adalah variabel khusus yang berisi informasi tentang pengguna yang diautentikasi. Variabel aturan request.resource mengarah ke data baru yang sedang ditulis. Informasi selengkapnya dapat ditemukan di dokumentasi.

Aturan keamanan akan otomatis diupdate ke Emulator suite.

Melihat 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 terautentikasi untuk menggunakan Cloud Storage. Di Firebase console, pada tab Rules di bagian Storage, Anda dapat melihat dan mengubah aturan. Anda akan melihat aturan default yang mengizinkan setiap pengguna yang login untuk membaca dan menulis file di bucket 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 hanya menulis ke folder spesifik mereka sendiri
• Izinkan siapa saja untuk membaca dari Cloud Storage
• Pastikan file yang diupload berupa gambar
• Batasi ukuran gambar yang dapat diupload hingga maksimum 5 MB

Hal ini dapat diterapkan menggunakan aturan berikut:

storage.rules

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

Variabel aturan request.auth adalah variabel khusus yang berisi informasi tentang pengguna yang diautentikasi. Variabel aturan request.resource berisi informasi tentang file yang diupload. Informasi selengkapnya dapat ditemukan di dokumentasi.

14. Men-deploy aplikasi Anda menggunakan Firebase Hosting

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

Setelan ini memberi tahu CLI bahwa Anda ingin men-deploy semua file di direktori ./public ( "public": "./public" ).

1. Pastikan command line mengakses direktori angularfire-start lokal aplikasi Anda.
2. Deploy file Anda ke project Firebase dengan menjalankan perintah berikut:

ng deploy

Kemudian, pilih opsi Firebase, dan ikuti petunjuk di command line.

3. Konsol akan menampilkan hal 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 yang kini sepenuhnya dihosting di CDN global menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri:

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

Atau, Anda dapat menjalankan firebase open hosting:site di command line.

Baca dokumentasinya untuk mempelajari cara kerja Firebase Hosting lebih lanjut.

Buka bagian Hosting Firebase console untuk melihat alat dan informasi hosting yang berguna, termasuk histori deployment Anda, fungsi untuk melakukan roll back ke versi aplikasi sebelumnya, dan alur kerja untuk menyiapkan domain kustom.

15. Selamat!

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

Yang telah Anda bahas

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

Langkah berikutnya

Lanjutkan ke codelab Cloud Functions for Firebase untuk mempelajari cara menggunakan Firebase SDK untuk Cloud Functions dan menambahkan beberapa tugas backend ke aplikasi chat. Anda dapat memulai langsung di Langkah 5 codelab tersebut karena Anda telah menyiapkan project Firebase.

Ingin mempelajari Cloud Firestore lebih lanjut? Mungkin Anda ingin mempelajari subkoleksi dan transaksi? Buka codelab web Cloud Firestore untuk codelab yang membahas Cloud Firestore secara lebih mendalam.

Ingin mempelajari lebih lanjut Firebase Performance Monitoring untuk Web? Buka codelab Firebase Performance Monitoring untuk web untuk mengetahui codelab yang lebih mendalam tentang Firebase Performance Monitoring.

Pelajari lebih lanjut

• firebase.google.com

16. [Opsional] Menerapkan 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 yang tidak sah dengan App Check dan reCAPTCHA Enterprise.

Langkah ini bergantung pada penyelesaian langkah sebelumnya. Pastikan FriendlyChat berjalan secara lokal dengan emulator atau di-deploy dengan layanan Firebase.

Pertama, Anda harus mengaktifkan App Check dan reCaptcha.

Mengaktifkan reCaptcha Enterprise

1. Di Konsol Cloud, temukan dan pilih reCaptcha Enterprise di bagian Keamanan.
2. Aktifkan layanan seperti yang diminta, lalu klik Create Key.
3. Masukkan nama tampilan saat diminta, lalu pilih Situs sebagai jenis platform Anda.
4. Tambahkan URL yang telah di-deploy ke Daftar domain, dan pastikan opsi "Gunakan verifikasi kotak centang" tidak dipilih.
5. Klik Buat Kunci, dan simpan kunci yang dihasilkan di tempat lain agar lebih aman. Anda akan membutuhkannya nanti dalam langkah ini.

Mengaktifkan App Check

1. Di Firebase console, cari bagian Build di panel kiri.
2. Klik App Check, lalu klik tab Sign-in method untuk membuka App Check.
3. Klik Register dan masukkan kunci reCaptcha Enterprise saat diminta, lalu klik Save.
4. Di Tampilan API, pilih Storage lalu klik Enforce. Lakukan hal yang sama untuk Cloud Firestore.

App Check sekarang seharusnya telah diterapkan. Muat ulang aplikasi Anda, lalu coba lihat atau kirim pesan chat. Anda akan mendapatkan pesan error:

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

Artinya, App Check memblokir permintaan yang tidak divalidasi secara default. Sekarang, mari kita tambahkan validasi ke aplikasi Anda.

Buka 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, buka 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 tetapkan isTokenAutoRefreshEnabled ke true untuk mengizinkan token dimuat ulang 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, tetapkan self.FIREBASE_APPCHECK_DEBUG_TOKEN ke true. Saat Anda me-refresh aplikasi di localhost, tindakan ini akan mencatat token debug di konsol yang serupa 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 Apps View dari App Check di Firebase console.

Klik menu tambahan, lalu pilih Manage debug tokens.

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

Buka file chat.service.ts, lalu tambahkan impor berikut:

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

Dalam file chat.service.ts yang sama, masukkan App Check bersama dengan layanan Firebase lainnya.

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

Selamat! Sekarang App Check seharusnya sudah berfungsi di aplikasi Anda.