Codelab web Firebase

1. Ikhtisar

Dalam codelab ini, Anda akan belajar bagaimana menggunakan Firebase untuk dengan mudah membuat aplikasi web dengan menerapkan dan menggunakan klien chatting 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 Kode VS
  • Paket manager NPM , yang biasanya datang dengan Node.js
  • Terminal/konsol
  • Peramban pilihan Anda, seperti Chrome
  • Kode sampel codelab (Lihat langkah codelab berikutnya untuk cara mendapatkan kode.)

2. Dapatkan kode sampel

Mengkloning codelab ini GitHub repositori dari baris perintah:

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

Atau, jika Anda tidak memiliki git terinstal, Anda dapat men-download repositori sebagai file ZIP .

Impor aplikasi pemula

Menggunakan IDE Anda, terbuka atau mengimpor 📁 web-start direktori dari repositori kloning. 📁 ini web-start direktori berisi kode awal untuk codelab, yang akan menjadi aplikasi chatting web yang berfungsi penuh.

3. Buat dan siapkan proyek Firebase

Buat proyek Firebase

  1. Masuk ke Firebase .
  2. Dalam Firebase konsol, klik Add Project, dan kemudian nama FriendlyChat proyek Firebase Anda. Ingat ID proyek untuk proyek Firebase Anda.
  3. Hapus tanda 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 Otentikasi dengan mudah memungkinkan pengguna Anda untuk masuk ke aplikasi Anda.
  • Cloud Firestore untuk menyimpan data terstruktur di atas awan dan mendapatkan pemberitahuan instan ketika data perubahan.
  • Cloud Storage untuk Firebase untuk menyimpan file di awan.
  • Firebase Hosting untuk tuan rumah dan melayani aset Anda.
  • Firebase Cloud Messaging untuk mengirim pemberitahuan push dan pemberitahuan popup tampilan browser.
  • Firebase Kinerja Pemantauan data kinerja pengguna mengumpulkan 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. Mendaftarkan aplikasi dengan julukan ramah Chat, kemudian centang kotak di samping juga mengatur Firebase Hosting untuk aplikasi ini. Klik Register aplikasi.
  3. Pada langkah berikutnya, Anda akan melihat objek konfigurasi. Salin hanya objek JS (bukan sekitarnya HTML) ke firebase-config.js

Daftarkan tangkapan layar aplikasi web

Aktifkan Google masuk untuk Firebase Authentication

Untuk memungkinkan pengguna untuk masuk ke aplikasi web dengan akun Google mereka, kita akan menggunakan Google masuk metode.

Anda harus mengaktifkan Google masuk:

  1. Dalam Firebase konsol, temukan bagian Build di panel sebelah kiri.
  2. Klik Authentication, kemudian klik Sign-in tab metode (atau klik disini untuk langsung ke sana).
  3. Aktifkan Google masuk penyedia, kemudian klik Simpan.
  4. Menetapkan nama publik menghadap aplikasi Anda ke Friendly obrolan dan memilih dukungan email Project dari menu dropdown.
  5. Mengkonfigurasi layar persetujuan OAuth Anda di Cloud Console Google dan menambahkan logo:

d89fb3873b5d36ae.png

Aktifkan Cloud Firestore

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

Anda harus mengaktifkan Cloud Firestore:

  1. Pada bagian Build Firebase konsol, klik Firestore Database.
  2. Klik Membuat database di panel Cloud Firestore.

729991a081e7cd5.png

  1. Pilih Mulai di pilihan mode tes, lalu klik Berikutnya setelah membaca disclaimer 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 penyediaan 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. Pada bagian Build Firebase konsol, klik Storage.
  2. Jika ada yang tidak ada Get Started tombol, itu berarti bahwa penyimpanan Cloud sudah diaktifkan, dan Anda tidak perlu mengikuti langkah-langkah di bawah ini.
  3. Klik Get Started.
  4. Baca disclaimer 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 pengaturan.

1d7f49ebaddb32fc.png

4. Instal antarmuka baris perintah Firebase

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 bahwa baris perintah Anda mengakses lokal aplikasi Anda web-start direktori.
  2. Kaitkan aplikasi Anda dengan proyek Firebase dengan menjalankan perintah berikut:
firebase use --add
  1. Bila diminta, pilih ID Proyek Anda, kemudian memberikan proyek Firebase Anda alias.

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

  1. Ikuti petunjuk selanjutnya di baris perintah Anda.

5. Jalankan aplikasi starter secara lokal

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

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

Kami menggunakan Firebase Hosting emulator untuk melayani aplikasi kita secara lokal. Aplikasi web sekarang harus tersedia dari http: // localhost: 5000 . Semua file yang terletak di bawah public subdirektori 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!

6. Impor dan konfigurasikan Firebase

Impor SDK Firebase

Kita perlu mengimpor SDK Firebase ke dalam aplikasi. Ada beberapa cara untuk melakukan hal ini sebagai 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.

Kita akan mendapatkan Firebase SDK dari NPM dan menggunakan Webpack untuk bundel kode kita. Kami melakukan ini agar Webpack dapat menghapus kode yang tidak perlu, menjaga ukuran bundel JS kami tetap kecil untuk memastikan aplikasi kami dimuat secepat mungkin. Untuk codelab ini, kami telah membuat web-start/package.json file yang mencakup Firebase SDK sebagai dependensi, serta diimpor fungsi yang dibutuhkan di bagian atas web-start/src/index.js .

package.json

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

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.

Instal Firebase SDK dan mulai build Webpack Anda

Kita perlu menjalankan beberapa perintah untuk membuat aplikasi kita berjalan.

  1. Buka jendela terminal baru
  2. Pastikan Anda berada di web-start direktori
  3. Jalankan npm install untuk men-download Firebase SDK
  4. Jalankan npm run start untuk memulai Webpack. Webpack sekarang akan terus membangun kembali kode sumber kami untuk codelab lainnya.

Konfigurasikan Firebase

Kita juga perlu mengonfigurasi SDK Firebase untuk memberi tahu proyek Firebase mana yang kita gunakan.

  1. Pergi ke Anda pengaturan proyek di konsol Firebase
  2. Di kartu "Aplikasi Anda", pilih nama panggilan aplikasi yang Anda perlukan objek konfigurasinya.
  3. Pilih "Config" dari panel cuplikan SDK Firebase.
  4. Salin cuplikan config objek, kemudian menambahkannya ke web-start/src/firebase-config.js .

firebase-config.js

const config = {
  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",
};

Sekarang, pergi ke bagian bawah dari web-start/src/index.js dan initialize Firebase:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. Siapkan login pengguna

The Firebase SDK sekarang harus siap untuk digunakan karena itu diimpor dan diinisialisasi di index.html . Kami sekarang akan mengimplementasikan pengguna masuk 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, tapi beberapa metode lain yang tersedia dari Firebase.

  1. Dalam web-start direktori, dalam subdirektori src/ , terbuka index.js .
  2. Cari fungsi signIn .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

The signOut Fungsi dipicu ketika pengguna mengklik tombol Sign keluar.

  1. Kembali ke file src/index.js .
  2. Cari fungsi signOutUser .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

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

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 src/index.js .
  2. Cari fungsi initFirebaseAuth .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

Kode di atas register fungsi authStateObserver sebagai pengamat negara 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. Dalam Firebase, menandatangani-data pengguna selalu tersedia di currentUser objek. Sebelumnya, kami mendirikan authStateObserver fungsi untuk memicu ketika pengguna masuk sehingga update UI kami sesuai. Ini akan memanggil getProfilePicUrl dan getUserName bila dipicu.

  1. Kembali ke file src/index.js .
  2. Cari fungsi getProfilePicUrl dan getUserName .
  3. Ganti kedua fungsi tersebut dengan kode berikut.

index.js

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

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().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 src/index.js .
  2. Cari fungsi isUserSignedIn .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

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

Uji masuk ke aplikasi

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, menjalankan firebase serve --only hosting pada baris perintah untuk mulai melayani aplikasi dari http: // localhost: 5000 , dan kemudian 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 , cek untuk memastikan bahwa Anda mengaktifkan Google Sign-in sebagai penyedia otentikasi di konsol Firebase.
  3. Setelah masuk, gambar profil dan nama pengguna Anda akan ditampilkan: c7401b3d44d0d78b.png

8. Tulis pesan ke Cloud Firestore

Di bagian ini, kami akan menulis beberapa data ke Cloud Firestore sehingga kami dapat mengisi UI aplikasi. Hal ini dapat dilakukan secara manual dengan Firebase konsol , tapi kami akan melakukannya dalam aplikasi itu sendiri untuk menunjukkan Cloud Firestore tulis dasar.

Model data

Data Cloud Firestore dibagi menjadi koleksi, dokumen, kolom, dan subkoleksi. Kami akan menyimpan setiap pesan chat sebagai dokumen dalam koleksi tingkat atas 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. Seorang pengguna mengklik tombol SEND akan memicu potongan kode di bawah. Ia menambahkan objek pesan dengan isi kolom pesan untuk contoh Cloud Firestore Anda dalam messages koleksi. The add() metode menambahkan dokumen baru dengan ID otomatis dihasilkan untuk koleksi.

  1. Kembali ke file src/index.js .
  2. Cari fungsi saveMessage .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

Uji pengiriman pesan

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, menjalankan firebase serve --only hosting pada baris perintah untuk mulai melayani aplikasi dari http: // localhost: 5000 , dan kemudian buka di browser Anda.
  2. Setelah masuk, masukkan pesan seperti "Hei!", Lalu klik KIRIM. Ini akan menulis pesan ke Cloud Firestore. Namun, Anda tidak akan belum melihat data dalam aplikasi web Anda yang sebenarnya karena kita masih perlu untuk mengimplementasikan mengambil data (bagian berikutnya dari codelab yang).
  3. Anda dapat melihat pesan yang baru ditambahkan di Firebase Console. Buka Konsol Firebase Anda. Di bawah bagian Build klik Firestore Database (atau klik disini dan pilih proyek Anda) dan Anda harus melihat koleksi pesan dengan pesan Anda baru ditambahkan:

6812efe7da395692.png

9. Baca pesan

pesan sinkronisasi

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 src/index.js .
  2. Cari fungsi loadMessages .
  3. Ganti seluruh fungsi dengan kode berikut.

index.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.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, 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, kita membuat query pada koleksi dengan menggunakan collection fungsi untuk menentukan pengumpulan data yang kita ingin mendengarkan dalam. Dalam kode di atas, kita sedang mendengarkan perubahan dalam messages koleksi, di mana pesan obrolan disimpan. Kami juga menerapkan batas dengan hanya mendengarkan 12 pesan terakhir menggunakan .limit(12) dan memerintahkan pesan berdasarkan tanggal menggunakan orderBy('timestamp', 'desc') untuk mendapatkan 12 pesan terbaru.

The onSnapshot fungsi mengambil query sebagai parameter pertama, dan fungsi callback sebagai kedua. 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 dalam dokumentasi Cloud Firestore .

Uji sinkronisasi pesan

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, menjalankan firebase serve --only hosting pada baris perintah untuk mulai melayani aplikasi dari http: // localhost: 5000 , dan kemudian 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 secara manual menghapus, memodifikasi, atau menambahkan pesan baru secara langsung di bagian Database konsol Firebase; perubahan apa pun harus tercermin di UI.

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

2168dec79b573d07.png

10. Kirim gambar

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 untuk Firebase adalah layanan penyimpanan file / gumpalan, dan kami akan menggunakannya untuk menyimpan gambar apapun bahwa saham 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, saveImageMessage fungsi disebut, dan Anda bisa mendapatkan referensi ke file yang dipilih. The saveImageMessage fungsi menyelesaikan berikut:

  1. Membuat pesan obrolan "placeholder" di umpan obrolan, sehingga pengguna melihat animasi "Memuat" saat kami mengunggah gambar.
  2. Upload file gambar untuk Cloud Storage ke jalan 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 src/index.js .
  2. Cari fungsi saveImageMessage .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), 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.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (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, menjalankan firebase serve --only hosting pada baris perintah untuk mulai melayani aplikasi dari http: // localhost: 5000 , dan kemudian 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, merasa bebas untuk menggunakan ini gambar yang bagus dari secangkir kopi .
  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.

11. Tampilkan notifikasi

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 messaging cross-platform yang memungkinkan Anda terpercaya memberikan pesan dan pemberitahuan tanpa biaya.

Tambahkan pekerja layanan FCM

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

  1. Dari web-start direktori, di src direktori, terbuka firebase-messaging-sw.js .
  2. Tambahkan konten berikut ke file itu.

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

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

Dapatkan token perangkat FCM

Ketika pemberitahuan telah diaktifkan pada perangkat atau browser, Anda akan diberi perangkat tanda. Token perangkat inilah yang kami gunakan untuk mengirim pemberitahuan ke perangkat tertentu atau browser tertentu.

Ketika tanda-tanda-in pengguna, kita sebut saveMessagingDeviceToken fungsi. Itu di mana kita akan mendapatkan perangkat FCM tanda dari browser dan simpan ke Cloud Firestore.

  1. Kembali ke file src/index.js .
  2. Cari fungsi saveMessagingDeviceToken .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().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(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(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, kita sebut firebase.messaging().requestPermission() metode, yang akan menampilkan dialog browser meminta izin ini ( di browser yang didukung ).

8b9d0c66dc36153d.png

  1. Kembali ke file src/index.js .
  2. Cari fungsi requestNotificationsPermissions .
  3. Ganti seluruh fungsi dengan kode berikut.

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

Dapatkan token perangkat Anda

  1. Jika aplikasi Anda masih disajikan, segarkan aplikasi Anda di browser. Jika tidak, menjalankan firebase serve --only hosting pada baris perintah untuk mulai melayani aplikasi dari http: // localhost: 5000 , dan kemudian 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. Buka tab Cloud Messaging dari konsol Firebase .
  2. Klik "Pemberitahuan Baru"
  3. Masukkan judul notifikasi dan teks notifikasi.
  4. Di sisi kanan layar, klik "kirim pesan percobaan"
  5. Masukkan token perangkat yang Anda salin dari konsol JavaScript browser Anda, lalu klik tanda plus ("+")
  6. Klik "uji"

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

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

de79e8638a45864c.png

12. Aturan keamanan Cloud Firestore

Lihat aturan keamanan database

Cloud Firestore menggunakan spesifik bahasa aturan 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. Dalam Firebase konsol , di tab Aturan bagian database, Anda dapat melihat dan memodifikasi 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

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

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. Pergi ke bagian database dari panel kiri, dan kemudian 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 web-start direktori, terbuka firestore.rules .
  2. Ganti aturan default yang sudah ada di file dengan aturan yang ditunjukkan di atas.
  3. Dari web-start direktori, terbuka firebase.json .
  4. Tambahkan firestore.rules atribut yang menunjuk ke firestore.rules , seperti yang ditunjukkan di bawah ini. (The hosting atribut harus berada dalam 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

13. Aturan keamanan Penyimpanan Cloud

Lihat aturan keamanan Penyimpanan Cloud

Cloud Storage untuk Firebase menggunakan spesifik bahasa aturan 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. Dalam Firebase konsol , di tab Aturan bagian Storage, Anda dapat melihat dan memodifikasi 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. Pergi ke bagian Storage dari panel kiri, dan kemudian 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 web-start direktori, terbuka storage.rules .
  2. Ganti aturan default yang sudah ada di file dengan aturan yang ditunjukkan di atas.
  3. Dari web-start direktori, terbuka firebase.json .
  4. Tambahkan storage.rules atribut menunjuk ke storage.rules berkas, seperti yang ditunjukkan di bawah ini. (The hosting dan database atribut harus berada 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

14. Kumpulkan data kinerja

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. Dalam codelab ini, kita diaktifkan Kinerja Pemantauan dari URL Hosting. Mengacu pada dokumentasi untuk melihat metode lain yang memungkinkan SDK.

Jejak otomatis

Karena kita sudah mengimpor getPerformance di bagian atas web-start/src/index.js , kita hanya perlu menambahkan satu baris untuk memberitahu Kinerja Pemantauan beban halaman secara otomatis mengumpulkan dan metrik permintaan jaringan Anda ketika pengguna mengunjungi situs Anda dikerahkan!

  1. Dalam web-start/src/index.js , tambahkan baris berikut di bawah ada TODO untuk menginisialisasi Monitoring Kinerja.

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

Ukur penundaan input pertama (opsional)

Pertama delay masukan berguna karena browser menanggapi interaksi pengguna memberikan pengguna kesan pertama mereka tentang respon dari 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. Terbuka public/index.html .
  2. Tanda komentar pada script tag pada baris berikutnya.

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 pertama keterlambatan input polyfill, kita lihat di 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 jejak dan metrik dan atribut khusus .

15. Terapkan aplikasi Anda menggunakan Firebase Hosting

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

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 memberitahu CLI yang kita ingin menyebarkan semua file dalam ./public direktori ( "public": "./public" ).

  1. Pastikan bahwa baris perintah Anda mengakses lokal aplikasi Anda web-start direktori.
  2. Terapkan file Anda ke proyek Firebase dengan menjalankan perintah berikut:
firebase deploy --except functions
  1. Konsol harus menampilkan yang berikut:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Kunjungi aplikasi web Anda yang sekarang dihosting sepenuhnya di CDN global menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

Kunjungi dokumentasi untuk mempelajari lebih lanjut tentang bagaimana Firebase Hosting karya .

Pergi ke Firebase konsol Hosting bagian proyek Anda untuk melihat informasi hosting yang berguna dan alat-alat, termasuk sejarah menyebarkan Anda, fungsi roll kembali ke versi sebelumnya dari aplikasi Anda, dan alur kerja untuk mendirikan sebuah domain kustom.

16. Selamat!

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

Apa yang telah kita bahas

  • Otentikasi Firebase
  • Cloud Firestore
  • SDK Firebase untuk Penyimpanan Cloud
  • Perpesanan Cloud Firebase
  • Pemantauan Kinerja Firebase
  • Hosting Firebase

Langkah selanjutnya

Learn more