Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Codelab web Firebase

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase untuk membuat aplikasi web dengan mudah dengan menerapkan dan menerapkan klien obrolan menggunakan produk dan layanan Firebase.

3b1284f5144b54f6.png

Apa yang akan Anda pelajari?

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

Apa yang Anda butuhkan?

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

Kloning repositori GitHub codelab dari baris perintah:

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

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

Impor aplikasi pemula

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

Buat proyek Firebase

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

Aplikasi yang akan kita bangun menggunakan produk Firebase yang tersedia untuk aplikasi web:

  • Firebase Authentication untuk memudahkan pengguna masuk 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 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

  1. Klik ikon web 58d6543a156e56f9.png untuk membuat aplikasi web Firebase baru.
  2. Daftarkan aplikasi dengan nama panggilan Friendly Chat , lalu centang kotak di samping Juga siapkan Firebase Hosting untuk aplikasi ini . Klik Daftar aplikasi .
  3. Klik melalui langkah-langkah yang tersisa. Anda tidak perlu mengikuti petunjuk sekarang; ini akan dibahas dalam langkah selanjutnya dari codelab ini.

ea9ab0db531a104c.png

Aktifkan masuk dengan Google untuk Firebase Authentication

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

Anda harus mengaktifkan masuk dengan Google :

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

d89fb3873b5d36ae.png

Aktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

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

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

Aktifkan Penyimpanan Cloud

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

Anda harus mengaktifkan Cloud Storage:

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

  1. Instal CLI dengan menjalankan perintah npm berikut:
npm -g install firebase-tools
  1. Verifikasi bahwa CLI telah diinstal dengan benar dengan menjalankan perintah berikut:
firebase --version

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

  1. Otorisasi Firebase CLI dengan menjalankan perintah berikut:
firebase login

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

  1. Pastikan baris perintah Anda mengakses direktori web-start lokal aplikasi Anda.
  2. Kaitkan aplikasi Anda dengan proyek Firebase dengan menjalankan perintah berikut:
firebase use --add
  1. Saat diminta, pilih ID Proyek Anda , lalu berikan alias untuk proyek Firebase Anda.

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

  1. Ikuti petunjuk selanjutnya di baris perintah Anda.

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

  1. Di konsol dari direktori web-start , jalankan perintah Firebase CLI berikut:
firebase serve --only hosting
  1. Baris perintah Anda akan menampilkan respons berikut:
✔  hosting: Local server: http://localhost:5000

Kami menggunakan emulator Firebase Hosting untuk melayani aplikasi kami secara lokal. Aplikasi web sekarang harus tersedia dari http://localhost:5000 . Semua file yang terletak di bawah subdirektori public dilayani.

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

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

4c23f9475228cef4.png

Aplikasi tidak dapat melakukan apa pun sekarang, tetapi dengan bantuan Anda, itu akan segera! Kami hanya mengatur UI untuk Anda sejauh ini.

Sekarang mari kita buat obrolan waktu nyata!

Impor SDK Firebase

Kita perlu mengimpor SDK Firebase ke dalam aplikasi. Ada beberapa cara untuk melakukan ini seperti yang dijelaskan dalam dokumentasi kami . Misalnya, Anda dapat mengimpor perpustakaan dari CDN kami. Atau Anda dapat menginstalnya secara lokal menggunakan npm, lalu mengemasnya di aplikasi Anda jika Anda menggunakan Browserify.

Karena kami menggunakan Firebase Hosting untuk melayani aplikasi kami, kami akan mengimpor URL lokal yang ada di file index.html (terletak di direktori web-start/public/ ). Untuk codelab ini, kami telah menambahkan baris berikut untuk Anda di bagian bawah file index.html , tetapi Anda dapat memeriksa ulang apakah baris tersebut ada di sana.

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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

Konfigurasikan Firebase

Kita juga perlu mengonfigurasi SDK Firebase untuk memberi tahu proyek Firebase mana yang kita gunakan. Karena kami menggunakan Firebase Hosting, Anda dapat mengimpor skrip khusus yang akan melakukan konfigurasi ini untuk Anda. Sekali lagi, untuk codelab ini, kami telah menambahkan baris berikut untuk Anda di bagian bawah file public/index.html , tetapi periksa kembali apakah itu ada.

index.html

<script src="/__/firebase/init.js"></script>

Skrip ini berisi konfigurasi proyek Firebase Anda berdasarkan proyek Firebase yang Anda tentukan sebelumnya saat menjalankan firebase use --add .

Jangan ragu untuk memeriksa file init.js untuk melihat seperti apa konfigurasi proyek Anda. Untuk melakukannya, buka http://localhost:5000/__/firebase/init.js di browser Anda. Anda akan melihat sesuatu yang terlihat seperti berikut:

/__/firebase/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

Firebase SDK sekarang harus siap digunakan karena diimpor dan diinisialisasi di index.html . Sekarang kita akan menerapkan login pengguna menggunakan Firebase Authentication .

Otentikasi pengguna Anda dengan Google Sign-In

Dalam aplikasi, ketika pengguna mengklik Masuk dengan tombol Google, signIn fungsi dipicu. (Kami sudah menyiapkannya untuk Anda!) Untuk codelab ini, kami ingin mengotorisasi Firebase untuk menggunakan Google sebagai penyedia identitas. Kami akan menggunakan popup, tetapi beberapa metode lain tersedia dari Firebase.

  1. Di direktori web-start , di subdirektori public/scripts/ , buka main.js .
  2. Temukan fungsi signIn .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

The signOut Fungsi dipicu ketika pengguna mengklik tombol Sign keluar.

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi signOut .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Signs-out of Friendly Chat.
function signOut() {
  // Sign out of Firebase.
  firebase.auth().signOut();
}

Lacak status otentikasi

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

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi initFirebaseAuth .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

Kode di atas mendaftarkan fungsi authStateObserver sebagai pengamat status otentikasi. Ini akan memicu setiap kali status otentikasi berubah (ketika pengguna masuk atau keluar). Pada titik inilah kami akan memperbarui UI untuk menampilkan atau menyembunyikan tombol masuk, tombol keluar, gambar profil pengguna yang masuk, dan sebagainya. Semua bagian UI ini telah diimplementasikan.

Tampilkan informasi pengguna yang masuk

Kami ingin menampilkan gambar profil pengguna yang masuk dan nama pengguna di bilah atas aplikasi kami. Di Firebase, data pengguna yang masuk selalu tersedia di objek firebase.auth().currentUser . Sebelumnya, kami menyiapkan fungsi authStateObserver untuk dipicu saat pengguna masuk sehingga UI kami diperbarui sesuai dengan itu. Ini akan memanggil getProfilePicUrl dan getUserName saat dipicu.

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi getProfilePicUrl dan getUserName .
  3. Ganti kedua fungsi tersebut dengan kode berikut.

main.js

// Returns the signed-in user's profile pic URL.
function getProfilePicUrl() {
  return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return firebase.auth().currentUser.displayName;
}

Kami menampilkan pesan kesalahan jika pengguna mencoba mengirim pesan saat pengguna tidak masuk. (Namun, Anda dapat mencobanya!) Jadi, kami perlu mendeteksi apakah pengguna benar-benar masuk.

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsinya isUserSignedIn .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!firebase.auth().currentUser;
}

Uji masuk ke aplikasi

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, jalankan firebase serve --only hosting di baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
  2. Masuk ke aplikasi menggunakan tombol masuk dan akun Google Anda. Jika Anda melihat pesan kesalahan yang menyatakan auth/operation-not-allowed , periksa untuk memastikan bahwa Anda mengaktifkan Google Sign-in sebagai penyedia autentikasi di Firebase console.
  3. Setelah masuk, gambar profil dan nama pengguna Anda akan ditampilkan: c7401b3d44d0d78b.png

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

Model data

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

688d7bc5fb662b57.png

Tambahkan pesan ke Cloud Firestore

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

Di bagian ini, Anda akan menambahkan fungsionalitas bagi pengguna untuk menulis pesan baru ke database Anda. Pengguna yang mengeklik tombol KIRIM akan memicu cuplikan kode di bawah ini. 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 public/scripts/main.js .
  2. Temukan fungsi saveMessage .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

Uji pengiriman pesan

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, jalankan firebase serve --only hosting di baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
  2. 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 Anda yang sebenarnya karena kami masih perlu menerapkan pengambilan data (bagian berikutnya dari codelab).
  3. Anda dapat melihat pesan yang baru ditambahkan di Firebase Console. Buka Konsol Firebase Anda. Di bawah bagian Bangun klik Database (atau klik di sini dan pilih proyek Anda) dan Anda akan melihat kumpulan pesan dengan pesan yang baru ditambahkan:

6812efe7da395692.png

Sinkronkan pesan

Untuk membaca pesan di aplikasi, kita perlu menambahkan listener yang memicu saat data berubah, lalu membuat elemen UI yang menampilkan pesan baru.

Kami akan menambahkan kode yang mendengarkan pesan yang baru ditambahkan dari aplikasi. Dalam kode ini, kami akan mendaftarkan pendengar yang mendengarkan perubahan yang dilakukan pada data. Kami hanya akan menampilkan 12 pesan terakhir dari obrolan untuk menghindari menampilkan riwayat yang sangat panjang saat memuat.

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi loadMessages .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                       message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

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

Fungsi .onSnapshot mengambil satu parameter: fungsi panggilan balik. Fungsi panggilan balik akan dipicu ketika ada perubahan pada dokumen yang cocok dengan kueri. Ini bisa terjadi jika pesan dihapus, diubah, atau ditambahkan. Anda dapat membaca lebih lanjut tentang ini di dokumentasi Cloud Firestore .

Uji sinkronisasi pesan

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, jalankan firebase serve --only hosting di baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
  2. Pesan yang Anda buat sebelumnya ke dalam database harus ditampilkan di UI FriendlyChat (lihat di bawah). Jangan ragu untuk menulis pesan baru; mereka harus muncul secara instan.
  3. (Opsional) Anda dapat mencoba menghapus, memodifikasi, atau menambahkan pesan baru secara manual langsung di bagian Database di Firebase console; perubahan apa pun harus tercermin di UI.

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

2168dec79b573d07.png

Kami 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 kami akan menggunakannya untuk menyimpan gambar apa pun yang dibagikan pengguna menggunakan aplikasi kami.

Simpan gambar ke Penyimpanan Cloud

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

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

Sekarang Anda akan menambahkan fungsionalitas untuk mengirim gambar:

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi saveImageMessage .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });
}

Uji pengiriman gambar

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, jalankan firebase serve --only hosting di baris perintah untuk mulai menyajikan aplikasi dari http://localhost:5000 , lalu buka di browser Anda.
  2. Setelah masuk, klik tombol unggah gambar 13734cb66773e5a3.png dan pilih file gambar menggunakan file picker. Jika Anda sedang mencari gambar, jangan ragu untuk menggunakan gambar cangkir kopi yang bagus ini .
  3. Pesan baru akan muncul di UI aplikasi dengan gambar yang Anda pilih: 3b1284f5144b54f6.png

Jika Anda mencoba menambahkan gambar saat tidak masuk, Anda akan melihat pemberitahuan Toast yang memberi tahu Anda bahwa Anda harus masuk untuk menambahkan gambar.

Kami sekarang akan menambahkan dukungan untuk pemberitahuan browser. Aplikasi 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 secara andal tanpa biaya.

Daftar putih ID Pengirim GCM

Dalam manifes aplikasi web , Anda perlu menentukan gcm_sender_id , yang merupakan nilai hard-code yang menunjukkan bahwa FCM diizinkan untuk mengirim pesan ke aplikasi ini.

  1. Dari direktori web-start , di direktori public , buka manifest.json .
  2. Tambahkan nilai ID pengirim browser di atribut gcm_sender_id persis seperti yang ditunjukkan di bawah ini. Jangan mengubah nilai dari apa yang ditunjukkan di bawah ini.

manifest.json

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

Tambahkan pekerja layanan FCM

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

  1. Dari direktori web-start , di direktori public , buat file baru bernama firebase-messaging-sw.js .
  2. Tambahkan konten berikut ke file baru itu.

firebase-messaging-sw.js

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

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 kami gunakan untuk mengirim pemberitahuan ke perangkat tertentu atau browser tertentu.

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

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi saveMessagingDeviceToken .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

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

Minta izin untuk menampilkan notifikasi

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

8b9d0c66dc36153d.png

  1. Kembali ke file public/scripts/main.js .
  2. Temukan fungsi requestNotificationsPermissions .
  3. Ganti seluruh fungsi dengan kode berikut.

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

Dapatkan token perangkat Anda

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

Kirim pemberitahuan ke perangkat Anda

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

  1. Selain token perangkat, Anda juga memerlukan Server Key aplikasi Firebase Anda. Untuk mendapatkan kunci ini, buka Firebase Console > Project Settings > Cloud Messaging , lalu salin Server Key .

Untuk mengirim pemberitahuan, Anda harus mengirim permintaan HTTP berikut:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. Pada baris perintah, jalankan perintah cURL berikut.
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

Perhatikan bahwa notifikasi hanya akan muncul jika aplikasi FriendlyChat berada di latar belakang. Anda harus menavigasi atau menampilkan tab lain agar notifikasi ditampilkan. Saat aplikasi berada di latar depan, ada cara untuk menangkap pesan yang dikirim oleh FCM .

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

de79e8638a45864c.png

Lihat aturan keamanan basis data

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

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

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

rules_version = '2';

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

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

firestore.rules

024570540

Perbarui aturan keamanan basis data

Ada dua cara untuk mengedit aturan keamanan database Anda, baik di Firebase console atau dari file aturan lokal yang diterapkan menggunakan Firebase CLI.

Untuk memperbarui aturan keamanan di Firebase console:

  1. Buka bagian Database dari panel kiri, lalu klik tab Aturan .
  2. Ganti aturan default yang sudah ada di konsol dengan aturan yang ditunjukkan di atas.
  3. Klik Publikasikan .

Untuk memperbarui aturan keamanan dari file lokal:

  1. Dari direktori web-start , buka firestore.rules .
  2. Ganti aturan default yang sudah ada di file dengan aturan yang ditunjukkan di atas.
  3. Dari direktori web-start , buka firebase.json .
  4. Tambahkan atribut firestore.rules menunjuk ke firestore.rules , seperti yang ditunjukkan di bawah ini. (Atribut hosting seharusnya sudah ada di file.)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Terapkan aturan keamanan menggunakan Firebase CLI dengan menjalankan perintah berikut:
firebase deploy --only firestore
  1. Baris perintah Anda akan menampilkan respons berikut:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Lihat aturan keamanan Penyimpanan Cloud

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

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

rules_version = '2';

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

Kami akan memperbarui aturan untuk melakukan hal berikut:

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

Ini dapat diterapkan dengan menggunakan aturan berikut:

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

Perbarui aturan keamanan Penyimpanan Cloud

Ada dua cara untuk mengedit aturan keamanan penyimpanan Anda: baik di Firebase console atau dari file aturan lokal yang diterapkan menggunakan Firebase CLI.

Untuk memperbarui aturan keamanan di Firebase console:

  1. Buka bagian Penyimpanan dari panel kiri, lalu klik tab Aturan .
  2. Ganti aturan default yang sudah ada di konsol dengan aturan yang ditunjukkan di atas.
  3. Klik Publikasikan .

Untuk memperbarui aturan keamanan dari file lokal:

  1. Dari direktori web-start , buka storage.rules .
  2. Ganti aturan default yang sudah ada di file dengan aturan yang ditunjukkan di atas.
  3. Dari direktori web-start , buka firebase.json .
  4. Tambahkan atribut storage.rules menunjuk ke file storage.rules , seperti yang ditunjukkan di bawah ini. (Atribut hosting dan database harus sudah ada dalam file.)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}
  1. Terapkan aturan keamanan menggunakan Firebase CLI dengan menjalankan perintah berikut:
firebase deploy --only storage
  1. Baris perintah Anda akan menampilkan respons berikut:
=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Anda dapat menggunakan Performance Monitoring SDK untuk mengumpulkan data performa dunia nyata dari aplikasi Anda, lalu meninjau dan menganalisis data tersebut di Firebase console. Performance Monitoring membantu Anda memahami di mana dan kapan kinerja aplikasi Anda dapat ditingkatkan sehingga Anda dapat menggunakan informasi tersebut untuk memperbaiki masalah kinerja.

Ada berbagai cara untuk berintegrasi dengan Firebase Performance Monitoring JavaScript SDK. Di codelab ini, kami mengaktifkan Performance Monitoring from Hosting URLs . Lihat dokumentasi untuk melihat metode lain dalam mengaktifkan SDK.

Jejak otomatis

Karena kami menyertakan firebase-performance.js dan init.js pada langkah awal codelab, kami hanya perlu menambahkan satu baris untuk memberi tahu Performance Monitoring agar secara otomatis mengumpulkan metrik pemuatan halaman dan permintaan jaringan untuk Anda saat pengguna mengunjungi situs yang Anda terapkan!

  1. Di public/scripts/main.js , tambahkan baris berikut di bawah TODO ada untuk menginisialisasi Performance Monitoring.

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

Ukur penundaan input pertama (opsional)

Penundaan input pertama berguna karena browser yang merespons interaksi pengguna memberikan kesan pertama kepada pengguna tentang responsivitas aplikasi Anda.

Penundaan input pertama dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink. Ini berhenti segera setelah browser dapat merespons input, artinya browser tidak sibuk memuat atau menguraikan konten halaman Anda.

Jika Anda ingin mengukur penundaan input pertama, Anda harus memasukkan kode berikut secara langsung.

  1. Buka public/index.html .
  2. Batalkan komentar pada tag script pada baris berikut.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Untuk membaca lebih lanjut tentang polyfill penundaan input pertama, lihat dokumentasi .

Lihat data kinerja

Karena Anda belum menerapkan situs Anda (Anda akan menerapkannya di langkah berikutnya), berikut adalah tangkapan layar yang menunjukkan metrik tentang kinerja pemuatan halaman yang akan Anda lihat di Firebase console dalam waktu 30 menit setelah pengguna berinteraksi dengan situs yang Anda terapkan :

29389131150f33d7.png

Saat mengintegrasikan Performance Monitoring SDK ke dalam aplikasi, Anda tidak perlu menulis kode lain apa pun sebelum aplikasi mulai memantau beberapa aspek penting performa secara otomatis. Untuk aplikasi web, SDK mencatat aspek-aspek seperti first contentful paint, kemampuan pengguna untuk berinteraksi dengan aplikasi Anda, dan banyak lagi.

Anda juga dapat menyiapkan pelacakan, metrik, dan atribut khusus untuk mengukur aspek tertentu dari aplikasi Anda. Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang pelacakan dan metrik khusus serta atribut khusus .

Firebase menawarkan layanan hosting untuk melayani aset dan aplikasi web Anda. Anda dapat menerapkan file Anda ke Firebase Hosting menggunakan Firebase CLI. Sebelum firebase.json deploy, Anda perlu menentukan dalam file firebase.json Anda file lokal mana yang harus di-deploy. Untuk codelab ini, kami telah melakukannya untuk Anda karena langkah ini diperlukan untuk menyajikan file kami selama codelab ini. Pengaturan hosting ditentukan di bawah atribut hosting :

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

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

  1. Pastikan baris perintah Anda mengakses direktori web-start lokal aplikasi Anda.
  2. Deploy your files to your Firebase project by running the following command:
firebase deploy --except functions
  1. The console should display the following:
=== 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
  1. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

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

Langkah selanjutnya

Learn more