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.
• Lakukan autentikasi pengguna menggunakan Firebase Authentication.
• Deploy aplikasi web Anda di Firebase App Hosting.
• Mengirim notifikasi dengan Firebase Cloud Messaging.
• Kumpulkan data performa aplikasi web Anda.

Yang Anda butuhkan

• Akun GitHub
• Kemampuan untuk mengupgrade project Firebase ke paket harga Blaze
• IDE/editor teks pilihan Anda, seperti WebStorm, Sublime, atau VS Code
• Pengelola paket npm, yang biasanya dilengkapi 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

Membuat repositori GitHub

Sumber codelab dapat ditemukan di https://github.com/firebase/codelab-friendlychat-web. Repositori berisi project contoh untuk berbagai platform. Namun, codelab ini hanya menggunakan direktori angularfire-start.

Salin folder angularfire-start ke repositori Anda sendiri:

1. Dengan menggunakan terminal, buat folder baru di komputer Anda dan pindah ke direktori baru:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. Gunakan paket npm giget untuk mengambil folder angularfire-start saja:

   npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
   

3. Lacak perubahan secara lokal dengan git:

   git init
   
   git add .
   
   git commit -m "codelab starting point"
   
   git branch -M main
   

4. Buat repositori GitHub baru: https://github.com/new. Beri nama sesuai keinginan Anda.
   1. GitHub akan memberi Anda URL repositori baru yang terlihat seperti https://github.com/[user-name]/[repository-name].git atau [e-mail]:[user-name]/[repository-name].git. Salin URL ini.
5. Kirim perubahan lokal ke repositori GitHub baru Anda. Jalankan perintah berikut, dengan mengganti URL repositori Anda dengan placeholder your-repository-url.

   git remote add origin your-repository-url
   
   git push -u origin main
   

6. Anda sekarang akan melihat kode awal di repositori GitHub.

3. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Login ke Firebase console.
2. Di Firebase console, klik Add 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 memberinya ID Project unik 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 App Hosting untuk mem-build, menghosting, dan menayangkan aplikasi.
• 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 harus diaktifkan menggunakan Firebase console.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan App Hosting, project Firebase Anda harus menggunakan paket harga Blaze, yang berarti project tersebut terkait dengan akun Penagihan Cloud.

• Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
• Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit sebesar $300 dan akun Penagihan Cloud Uji Coba Gratis.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

1. Di Firebase console, pilih upgrade your plan.
2. Pada dialog yang muncul, pilih paket Blaze, lalu ikuti petunjuk di layar untuk mengaitkan project Anda dengan akun Penagihan Cloud.
   Jika perlu membuat akun Penagihan Cloud, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Catatan: Anda dapat mendowngrade project ke Spark setelah menyelesaikan codelab ini.

Menambahkan aplikasi web Firebase ke project

1. Klik ikon web untuk membuat aplikasi web Firebase baru.
2. Daftarkan aplikasi dengan nama panggilan Friendly Chat. Jangan mencentang kotak di samping Juga siapkan Firebase Hosting untuk aplikasi ini. Klik Daftarkan aplikasi.
3. Pada langkah berikutnya, Anda akan melihat objek konfigurasi. Anda tidak memerlukannya sekarang. Klik Lanjutkan ke konsol.

Menyiapkan Authentication

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

1. Di Firebase console, buka Authentication.
2. Klik Get started.
3. Di kolom Additional providers, klik Google > Enable.
4. Di kotak teks Public-facing name for project, masukkan nama yang mudah diingat, seperti My Next.js app.
5. Dari drop-down Support email for project, pilih alamat email Anda.
6. Klik Save.

Mengaktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

1. Di Firebase console, buka Firestore.
2. Klik Create database > Next > Start in test mode > Next.
   Di bagian berikutnya dalam codelab ini, Anda akan menambahkan aturan keamanan untuk mengamankan data Anda. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
3. Gunakan lokasi default atau pilih lokasi pilihan Anda.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna. Perlu diperhatikan bahwa lokasi ini tidak dapat diubah nanti, dan juga akan secara otomatis menjadi lokasi bucket Cloud Storage default Anda (langkah berikutnya).
4. Klik Done.

Mengaktifkan Cloud Storage

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

Anda harus mengaktifkan Cloud Storage:

1. Di Firebase console, buka Storage.
2. Klik Get started > Start in test mode > Next.
   Di bagian selanjutnya dalam codelab ini, Anda akan menambahkan aturan keamanan untuk mengamankan data Anda. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
3. Lokasi bucket Anda seharusnya sudah dipilih (karena Anda menyiapkan Firestore di langkah sebelumnya).
4. Klik Done.

4. Menginstal antarmuka command line Firebase

Antarmuka command line (CLI) Firebase memungkinkan Anda menggunakan Firebase Hosting untuk menyalurkan aplikasi web secara lokal, serta untuk 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@latest

Tidak berhasil? Anda mungkin perlu mengubah izin npm.

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

firebase --version

Pastikan versi Firebase CLI v13.9.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 telah di-clone sebelumnya di codelab). Namun, untuk mengambil konfigurasi, Anda harus mengaitkan aplikasi dengan project Firebase.

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 Anda, lalu berikan alias untuk project Firebase Anda.

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

7. Ikuti petunjuk selanjutnya di command line.

5. Menginstal 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. Jika diminta, hapus centang ng deploy -- hosting dengan tombol spasi. Pilih fitur berikut dengan tombol panah dan tombol spasi:
   • Authentication
   • Firestore
   • Cloud Messaging
   • Cloud Storage
4. Tekan enter dan ikuti perintah lainnya.
5. Buat commit dengan pesan commit "Instal AngularFire" dan kirim ke repositori GitHub Anda.

6. Membuat backend App Hosting

Di bagian ini, Anda akan menyiapkan backend App Hosting untuk melihat cabang di repositori git Anda.

Catatan: Firebase App Hosting masih dalam versi pratinjau publik.

Di akhir bagian ini, Anda akan memiliki backend App Hosting yang terhubung ke repositori di GitHub yang akan otomatis membangun ulang dan meluncurkan versi baru aplikasi setiap kali Anda mengirim commit baru ke cabang main.

1. Buka halaman App Hosting di Firebase console:

2. Klik "Get started" untuk memulai alur pembuatan backend. Konfigurasi backend Anda sebagai berikut:
3. Ikuti perintah di langkah pertama untuk menghubungkan repositori GitHub yang Anda buat sebelumnya.
4. Tetapkan setelan penerapan:
   1. Biarkan direktori root sebagai /
   2. Tetapkan cabang live ke main
   3. Aktifkan peluncuran otomatis
5. Beri nama backend Anda friendlychat-codelab.
6. Di bagian "Create or associate a Firebase web app", pilih aplikasi web yang telah Anda konfigurasi sebelumnya dari drop-down "Select an existing Firebase web app".
7. Klik "Finish and deploy". Setelah beberapa saat, Anda akan diarahkan ke halaman baru tempat Anda dapat melihat status backend App Hosting yang baru.

   Catatan: Anda dapat memantau layanan Google Cloud pokok untuk backend App Hosting dengan mengikuti link dari konsol. Pelajari lebih lanjut di Melihat log dan metrik.

8. Setelah peluncuran selesai, klik domain gratis Anda di bagian "domains". Proses ini mungkin memerlukan waktu beberapa menit karena penyebaran DNS.

Anda telah men-deploy aplikasi web awal. Setiap kali mengirim commit baru ke cabang main dari repositori GitHub, Anda akan melihat build dan peluncuran baru dimulai di Firebase console, dan situs Anda akan otomatis diupdate setelah peluncuran selesai.

Anda akan melihat layar login aplikasi FriendlyChat Anda yang belum berfungsi.

Saat ini aplikasi tidak dapat melakukan apa pun, tetapi dengan bantuan Anda, aplikasi akan segera hadir!

Sekarang, mari kita membangun aplikasi 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 Anda perlukan objek konfigurasinya.
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",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

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

Melihat penyiapan AngularFire

Anda akan melihat bahwa fitur yang dipilih di konsol otomatis ditambahkan di file /angularfire-start/src/app/app.config.ts. Hal ini memungkinkan aplikasi Anda menggunakan fitur dan fungsi Firebase.

8. Menyiapkan login pengguna

AngularFire sekarang seharusnya siap digunakan karena telah diimpor dan diinisialisasi di app.config.ts. Sekarang Anda akan menerapkan login pengguna menggunakan Firebase Authentication.

Tambahkan domain resmi

Firebase Authentication hanya mengizinkan login dari daftar domain yang Anda kontrol. Tambahkan domain App Hosting gratis ke daftar domain:

1. Buka App Hosting.
2. Mengatasi domain backend Anda.
3. Buka Authentication settings.
4. Pilih tab Domain yang diotorisasi.
5. Klik Add domain, lalu tempel domain backend App Hosting Anda.

Mengautentikasi pengguna dengan Login dengan Google

Di aplikasi, saat pengguna mengklik tombol Login dengan Google, fungsi login akan dipicu. Untuk codelab ini, Anda perlu mengizinkan Firebase untuk menggunakan Google sebagai penyedia identitas. Anda akan menggunakan pop-up, tetapi beberapa metode lain tersedia dari Firebase.

1. 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 memperbarui UI kita, Anda memerlukan cara untuk memeriksa apakah pengguna sudah login atau logout. AngularFire menyediakan fungsi untuk mendapatkan objek yang dapat diamati yang diperbarui setiap kali status autentikasi berubah. Hal ini telah diimplementasikan, tetapi patut dipertimbangkan.

1. Kembali ke file src/app/services/chat.service.ts.
2. Temukan penetapan variabel user$.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

Kode di atas memanggil fungsi AngularFire user yang menampilkan pengguna yang dapat diamati. Notifikasi akan terpicu setiap kali status autentikasi berubah (saat pengguna login atau logout). Komponen template Angular di FriendlyChat menggunakan observasi ini untuk mengupdate UI agar dapat mengalihkan, menampilkan pengguna di navigasi header, dan sebagainya.

Uji login ke aplikasi

1. Buat commit dengan pesan commit "Menambahkan Autentikasi Google" dan kirim ke repositori GitHub Anda.
2. Buka halaman App Hosting di Firebase console dan tunggu hingga peluncuran baru selesai.
3. Di aplikasi web, muat ulang halaman dan login ke aplikasi menggunakan tombol login dan akun Google Anda. Jika Anda melihat pesan error yang menyatakan auth/operation-not-allowed, pastikan Anda telah mengaktifkan Login dengan Google sebagai penyedia autentikasi di Firebase console.
4. Setelah login, foto profil dan nama pengguna Anda akan ditampilkan:

9. Menulis 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 Cloud Firestore dasar.

Model data

Data Cloud Firestore dibagi menjadi beberapa koleksi, dokumen, kolom, dan subkoleksi. Anda akan menyimpan setiap pesan chat sebagai dokumen di koleksi level atas 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 dapat 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. Tindakan ini menambahkan objek pesan dengan konten kolom pesan ke instance Cloud Firestore Anda dalam 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>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

Menguji pengiriman pesan

1. Buat commit dengan pesan commit "Posting chat baru ke Firestore" dan kirim ke repositori GitHub Anda.
2. Buka halaman App Hosting di Firebase console dan tunggu hingga peluncuran baru selesai.
3. Muat ulang FriendlyChat. Setelah login, masukkan pesan seperti "Halo!", lalu klik KIRIM. Tindakan ini akan menulis pesan ke Cloud Firestore. Namun, Anda belum akan melihat data tersebut di aplikasi web yang sebenarnya karena Anda masih perlu menerapkan pengambilan data (bagian berikutnya dari codelab).
4. Anda dapat melihat pesan yang baru ditambahkan di Firebase Console. Buka UI Emulator Suite Anda. 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 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 snapshot koleksi messages. Anda hanya akan menampilkan 12 pesan terakhir dari chat agar tidak menampilkan histori yang sangat panjang saat pemuatan.

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 membuat kueri pada koleksi menggunakan fungsi collection untuk menentukan di koleksi mana data yang ingin Anda proses berada. 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 menurut tanggal menggunakan orderBy('timestamp', 'desc') untuk mendapatkan 12 pesan terbaru.

Fungsi collectionData menggunakan snapshot di balik layar. Fungsi callback akan dipicu 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. Buat commit dengan pesan commit "Show new chatbot in the UI" dan kirim ke repositori GitHub Anda.
2. Buka halaman App Hosting di Firebase console dan tunggu hingga peluncuran baru selesai.
3. Muat ulang FriendlyChat. Pesan yang Anda buat sebelumnya di database akan ditampilkan di UI FriendlyChat (lihat di bawah). Jangan ragu untuk menulis pesan baru. Pesan akan langsung muncul.
4. (Opsional) Anda dapat mencoba menghapus, mengubah, atau menambahkan pesan baru secara manual secara langsung di bagian Firestore pada Emulator suite; semua perubahan harus tercermin di UI.

Selamat! Anda sedang membaca dokumen Cloud Firestore di aplikasi.

11. Menambahkan fitur AI

Anda akan menggunakan AI Google untuk menambahkan fitur asistif yang berguna ke aplikasi chat.

Mendapatkan kunci Google AI API

1. Buka Google AI Studio dan klik Create API key
2. Pilih project Firebase yang Anda buat untuk codelab ini. Perintahnya ditujukan untuk project Google Cloud, tetapi setiap project Firebase adalah project Google Cloud.
3. Klik Create API key in existing project
4. Menyalin kunci API yang dihasilkan

Menginstal ekstensi

Ekstensi ini akan men-deploy fungsi cloud yang akan terpicu setiap kali dokumen baru ditambahkan ke koleksi messages di Firestore. Fungsi ini akan memanggil Gemini, dan menulis responsnya kembali ke kolom response dalam dokumen.

1. Klik Install in Firebase console di halaman ekstensi Build Chatbot with the Gemini API.
2. Ikuti petunjuknya. Setelah mencapai langkah Konfigurasi ekstensi, tetapkan nilai parameter berikut:
   • Penyedia Gemini API: Google AI
   • Kunci API Google AI: Tempelkan kunci yang Anda buat sebelumnya, lalu klik Create secret.
   • Jalur koleksi Firestore: messages
   • Kolom perintah: text
   • Kolom respons: response
   • Kolom pesanan: timestamp
   • Konteks: Keep your answers short, informal, and helpful. Use emojis when possible.
3. Klik instal ekstensi
4. Tunggu hingga ekstensi selesai diinstal

Uji fitur AI

FriendlyChat sudah memiliki kode untuk membaca respons dari ekstensi AI. Yang perlu Anda lakukan adalah mengirim pesan chat baru untuk mengujinya.

1. Buka FriendlyChat dan kirim pesan.
2. Setelah beberapa saat, Anda akan melihat respons yang muncul bersama pesan Anda. Terdapat catatan ✨ ai generated di bagian akhir untuk memperjelas bahwa aplikasi tersebut dibuat dengan AI generatif, bukan pengguna sungguhan.

12. Kirim 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 oleh 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 melakukan hal berikut:

1. Membuat pesan chat "placeholder" di feed chat, agar pengguna melihat animasi "Memuat" saat mengupload gambar.
2. Mengupload file gambar ke Cloud Storage ke jalur ini: /<uid>/<file_name>
3. Menghasilkan URL yang dapat dibaca 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 Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - 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. Buat commit dengan pesan commit "Tambahkan kemampuan untuk memposting gambar" dan kirim ke repositori GitHub Anda.
2. Buka halaman App Hosting di Firebase console dan tunggu hingga peluncuran baru selesai.
3. Muat ulang FriendlyChat. Setelah login, klik tombol upload gambar di kiri bawah dan pilih file gambar menggunakan pemilih file. Jika Anda mencari gambar, gunakan gambar cangkir kopi yang bagus ini.
4. Pesan baru akan muncul di UI aplikasi dengan gambar yang Anda pilih:

Jika Anda mencoba menambahkan gambar tanpa login, akan muncul pesan error yang memberi tahu bahwa Anda harus login untuk menambahkan gambar.

13. Tampilkan notifikasi

Sekarang Anda akan menambahkan dukungan untuk notifikasi browser. Aplikasi akan memberi tahu pengguna saat ada pesan baru yang diposting 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

Saat notifikasi telah diaktifkan pada perangkat atau browser, Anda akan diberikan token perangkat. Token perangkat ini adalah apa yang Anda gunakan untuk mengirimkan notifikasi ke perangkat tertentu atau browser tertentu.

Saat pengguna login, panggil fungsi saveMessagingDeviceToken. Di sana, 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, pada awalnya kode ini 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 kepada 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. Buat commit dengan pesan commit "Tambahkan kemampuan untuk memposting gambar" dan kirim ke repositori GitHub Anda.
2. Buka halaman App Hosting di Firebase console dan tunggu hingga peluncuran baru selesai.
3. Muat ulang FriendlyChat. Setelah login, dialog izin notifikasi akan muncul:
4. Klik Allow.
5. Buka konsol JavaScript browser Anda. Anda akan melihat pesan berikut: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
6. Salin token perangkat Anda. Anda akan memerlukannya untuk tahap codelab berikutnya.

Mengirimkan notifikasi ke perangkat Anda

Setelah memiliki token perangkat, Anda bisa mengirimkan 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 percobaan"
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 for Cloud Functions, Anda akan melihat cara mengotomatiskan pengiriman notifikasi dari backend untuk setiap pesan baru yang diposting di aplikasi chat.

14. 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, di tab Aturan pada 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 datastore Anda.

rules_version = '2';

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

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

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

Aturan keamanan akan otomatis diperbarui ke Emulator Suite Anda.

Melihat aturan keamanan Cloud Storage

Cloud Storage for Firebase 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 Cloud Storage default yang hanya mengizinkan pengguna terautentikasi untuk menggunakan Cloud Storage. Di Firebase console, di tab Aturan pada bagian Storage, Anda dapat melihat dan mengubah aturan. Anda akan melihat aturan default yang mengizinkan setiap pengguna yang login membaca dan menulis file apa pun di bucket penyimpanan Anda.

rules_version = '2';

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

Anda perlu memperbarui aturan untuk melakukan tindakan berikut:

• Izinkan setiap pengguna untuk menulis hanya pada folder tertentu mereka sendiri
• Izinkan siapa saja membaca dari Cloud Storage
• Pastikan file yang diupload adalah 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 terautentikasi. Variabel aturan request.resource berisi informasi tentang file yang diupload. Informasi selengkapnya dapat ditemukan di dokumentasi.

15. Selamat!

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

Yang telah Anda bahas

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

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 langsung memulai di Langkah 5 dari 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 mempelajari codelab secara lebih mendalam di Cloud Firestore.

Ingin mempelajari Firebase Performance Monitoring untuk Web lebih lanjut? Buka codelab tentang pemantauan performa Firebase untuk web untuk membaca codelab secara 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, cari dan pilih reCaptcha Enterprise di bagian Keamanan.
2. Aktifkan layanan saat diminta, lalu klik Create Key.
3. Masukkan nama tampilan saat diminta, lalu pilih Situs sebagai jenis platform.
4. Tambahkan URL yang di-deploy ke Daftar domain, dan pastikan opsi "Gunakan tantangan kotak centang" tidak dipilih.
5. Klik Create Key, dan simpan kunci yang dihasilkan di suatu tempat agar 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 Perusahaan reCaptcha saat diminta, lalu klik Simpan.
4. Di Tampilan API, pilih Storage lalu klik Enforce. Lakukan hal yang sama untuk Cloud Firestore.

App Check sekarang seharusnya diterapkan. Muat ulang aplikasi Anda dan 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.

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 agar token dapat diperbarui 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 memuat ulang aplikasi di localhost, tindakan 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 Manage debug tokens.

Kemudian, klik Add debug token dan tempel token debug dari konsol saat diminta.

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

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

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

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

1. Buat commit dengan pesan commit "Blokir klien yang tidak sah dengan App Check" dan kirim ke repositori GitHub Anda.
2. Buka halaman App Hosting di Firebase console dan tunggu hingga peluncuran baru selesai.

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