Firebase Performance Monitoring untuk web

1. Ringkasan

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase Performance Monitoring untuk mengukur performa aplikasi web chat. Buka https://fireperf-friendlychat.web.app/ untuk melihat demo langsung.

Codelab ini dimaksudkan sebagai lanjutan dari codelab web Firebase tempat Anda mempelajari cara membangun aplikasi chat menggunakan Firebase Web SDK. Jika Anda ingin mempelajari cara menggunakan platform Firebase di web dengan membangun aplikasi chat, ikuti codelab web Firebase terlebih dahulu. Jika Anda sudah mengetahui cara menggunakan platform Firebase dan CLI serta ingin mempelajari Firebase Performance Monitoring, Anda berada di tempat yang tepat.

Yang akan Anda pelajari

• Cara menambahkan Firebase Performance Monitoring ke aplikasi web Anda untuk mendapatkan metrik siap pakai (pemuatan halaman dan permintaan jaringan).
• Cara mengukur bagian kode tertentu dengan trace kustom.
• Cara mencatat metrik kustom tambahan yang terkait dengan trace kustom.
• Cara menyegmentasikan data performa lebih lanjut dengan atribut khusus.
• Cara menggunakan dasbor pemantauan performa untuk memahami performa aplikasi web Anda.

Yang Anda butuhkan

• IDE atau editor teks pilihan Anda, seperti WebStorm, Atom, Sublime, atau VS Code
• Terminal/konsol
• Browser pilihan Anda, seperti Chrome
• Kode contoh codelab (Lihat bagian berikutnya dari codelab ini untuk mengetahui cara mendapatkan kode.)

2. Mendapatkan kode contoh

Clone repositori GitHub codelab dari command line:

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

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

Repositori friendlychat-web berisi project contoh untuk beberapa platform.

Codelab ini hanya menggunakan dua repositori berikut:

• gcp performance-monitoring-start: Kode awal yang akan Anda bangun selama codelab ini.
• 🪄 pemantauan performa: Kode lengkap untuk aplikasi contoh yang telah selesai.

Catatan: Jika ingin menjalankan aplikasi yang sudah selesai, Anda masih harus membuat project Firebase di Firebase console.

Mengimpor aplikasi awal

Dengan IDE Anda, buka atau impor direktori 🪄 performance-monitoring-start dari repositori yang di-clone. Direktori 🪄 performance-monitoring-start ini berisi kode awal untuk codelab, yang merupakan aplikasi web chat.

3. Membuat dan menyiapkan project Firebase

Membuat project Firebase

1. Di Firebase console, klik Add Project.
2. Beri nama project Firebase Anda FriendlyChat.

Ingat project ID untuk project Firebase Anda.

3. Klik Buat Project.

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

Menambahkan aplikasi web Firebase ke project

1. Klik ikon web untuk membuat aplikasi web Firebase baru.
2. Daftarkan aplikasi dengan nama panggilan Friendly Chat, lalu centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini.
3. Klik Register app.
4. Klik langkah-langkah yang tersisa. Anda tidak perlu mengikuti petunjuk di layar sekarang; petunjuk ini akan dibahas pada langkah selanjutnya di codelab ini.

Mengaktifkan login dengan Google untuk autentikasi Firebase

Untuk mengizinkan pengguna login ke aplikasi chat dengan Akun Google mereka, kami akan menggunakan metode login Google.

Anda harus mengaktifkan login dengan Google:

1. Di Firebase console, cari bagian Develop di panel kiri.
2. Klik Authentication, lalu klik tab Sign-in method ( buka konsol).
3. Aktifkan penyedia login Google, lalu 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 bagian Develop Firebase console, klik Database.
2. Klik Create database di panel Cloud Firestore.
3. Pilih opsi Mulai dalam mode pengujian, lalu klik Aktifkan setelah membaca pernyataan penyangkalan tentang aturan keamanan.

Kode awal untuk codelab ini mencakup aturan yang lebih aman. Kita akan men-deploy-nya nanti di codelab.

Mengaktifkan Cloud Storage

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

Anda harus mengaktifkan Cloud Storage:

1. Di bagian Develop Firebase console, klik Storage.
2. Klik Mulai.
3. Baca pernyataan penyangkalan tentang aturan keamanan untuk project Firebase Anda, lalu klik Oke.

Kode awal mencakup aturan keamanan dasar, yang akan kita deploy nanti dalam codelab.

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.

1. Instal CLI dengan mengikuti petunjuk ini di dokumen Firebase.
2. Pastikan bahwa CLI telah diinstal dengan benar dengan menjalankan perintah berikut di terminal:

firebase --version

Pastikan versi Firebase CLI Anda adalah v8.0.0 atau yang lebih baru.

3. Otorisasi Firebase CLI dengan menjalankan perintah berikut:

firebase login

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

4. Pastikan command line mengakses direktori performance-monitoring-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.

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. Berintegrasi dengan Firebase Performance Monitoring

Ada berbagai cara untuk berintegrasi dengan Firebase Performance Monitoring SDK untuk web (lihat dokumentasi untuk mengetahui detailnya). Dalam codelab ini, kita akan mengaktifkan pemantauan performa dari URL Hosting.

Menambahkan pemantauan performa dan melakukan inisialisasi Firebase

1. Buka file src/index.js, lalu tambahkan baris berikut di bawah TODO untuk menyertakan Firebase Performance Monitoring SDK.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Kita juga perlu menginisialisasi Firebase SDK dengan objek konfigurasi yang berisi informasi tentang project Firebase dan aplikasi web yang ingin kita gunakan. Karena kita menggunakan Firebase Hosting, Anda dapat mengimpor skrip khusus yang akan melakukan konfigurasi ini untuk Anda. Untuk codelab ini, kita telah menambahkan baris berikut untuk Anda di bagian bawah file public/index.html, tetapi periksa kembali apakah baris tersebut ada di sana.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. Dalam file src/index.js, tambahkan baris berikut di bawah TODO untuk melakukan inisialisasi pemantauan performa.

index.js

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

Performance Monitoring kini akan otomatis mengumpulkan metrik permintaan jaringan dan pemuatan halaman untuk Anda saat pengguna menggunakan situs Anda. Lihat dokumentasi untuk mempelajari trace pemuatan halaman otomatis lebih lanjut.

Menambahkan library polyfill penundaan input pertama

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. Fungsi ini akan berhenti tepat setelah browser dapat merespons input, yang berarti bahwa browser tidak sibuk memuat atau mengurai konten Anda.

Library polyfill ini bersifat opsional untuk integrasi pemantauan performa.

Buka file public/index.html, lalu hapus tanda komentar di 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>

Pada tahap ini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring dalam kode.

Ada juga cara lain untuk berintegrasi dengan Firebase Performance Monitoring SDK untuk web. Untuk mengetahui detailnya, lihat Memulai Performance Monitoring untuk web.

Pada langkah berikut, Anda akan mempelajari cara menambahkan trace kustom menggunakan Firebase Performance Monitoring. Jika Anda hanya ingin mengumpulkan trace otomatis, buka bagian "Men-deploy dan mulai mengirim gambar".

6. Menambahkan rekaman aktivitas kustom ke aplikasi

Performance Monitoring memungkinkan Anda membuat rekaman aktivitas kustom. Pelacakan kustom adalah laporan selama durasi blok eksekusi di aplikasi Anda. Anda menentukan awal dan akhir pelacakan kustom menggunakan API yang disediakan oleh SDK.

1. Di file src/index.js, dapatkan objek performa, lalu buat rekaman aktivitas kustom untuk mengupload pesan gambar.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Untuk merekam aktivitas kustom, Anda harus menentukan titik awal dan titik perhentian untuk trace tersebut. Anda dapat menganggap rekaman aktivitas sebagai timer.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Anda berhasil menentukan trace kustom. Setelah men-deploy kode, durasi trace kustom akan dicatat jika pengguna mengirim pesan gambar. Anda akan mengetahui waktu yang dibutuhkan pengguna di dunia nyata untuk mengirim gambar di aplikasi chat.

7. Tambahkan metrik kustom ke aplikasi Anda.

Anda dapat mengonfigurasi rekaman aktivitas kustom lebih lanjut untuk mencatat metrik kustom untuk peristiwa terkait performa yang terjadi dalam cakupan. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu upload dipengaruhi oleh ukuran gambar untuk pelacakan kustom yang kita tentukan di langkah terakhir.

1. Temukan rekaman aktivitas kustom dari langkah sebelumnya (ditentukan dalam file src/index.js).
2. Tambahkan baris berikut di bawah TODO untuk merekam ukuran gambar yang diupload.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Metrik ini memungkinkan pemantauan performa untuk mencatat durasi trace kustom serta ukuran gambar yang diupload.

8. Menambahkan atribut khusus ke aplikasi

Berdasarkan langkah sebelumnya, Anda juga dapat mengumpulkan atribut khusus di trace kustom. Atribut khusus dapat membantu mengelompokkan data berdasarkan kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki pengaruh jenis MIME terhadap performa.

1. Gunakan rekaman aktivitas kustom yang ditentukan dalam file src/index.js Anda.
2. Tambahkan baris berikut di bawah TODO untuk mencatat jenis MIME gambar yang diupload.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Atribut ini memungkinkan pemantauan performa mengategorikan durasi rekaman aktivitas kustom berdasarkan jenis gambar yang diupload.

9. [Extend] Menambahkan trace kustom dengan User Timing API

Firebase Performance Monitoring SDK dirancang agar dapat dimuat secara asinkron, sehingga tidak akan berdampak negatif terhadap performa aplikasi web selama pemuatan halaman. Sebelum SDK dimuat, Firebase Performance Monitoring API tidak akan tersedia. Dalam skenario ini, Anda masih dapat menambahkan trace kustom menggunakan User Timing API. Firebase performance SDK akan mengambil durasi dari measure() dan mencatatnya sebagai rekaman aktivitas kustom.

Kita akan mengukur durasi pemuatan skrip gaya visual aplikasi menggunakan User Timing API.

1. Di file public/index.html, tambahkan baris berikut untuk menandai awal pemuatan skrip gaya visual aplikasi.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Tambahkan baris berikut untuk menandai akhir pemuatan skrip gaya visual aplikasi, dan untuk mengukur durasi antara awal dan akhir.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Entri yang Anda buat di sini akan otomatis dikumpulkan oleh Firebase Performance Monitoring. Anda dapat menemukan trace kustom yang disebut loadStyling di Firebase Performance Console nanti.

10. Men-deploy dan mulai mengirim image

Men-deploy ke Firebase Hosting

Setelah menambahkan Firebase Performance Monitoring ke kode Anda, ikuti langkah-langkah berikut untuk men-deploy kode ke Firebase Hosting:

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

firebase deploy

3. Konsol akan menampilkan tampilan berikut:

=== Deploying to 'friendlychat-1234'...

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

✔  Deploy complete!

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

4. Buka aplikasi web Anda yang kini dihosting sepenuhnya menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri: https://<projectId>.firebaseapp.com dan https://<projectId>.web.app.

Memastikan pemantauan performa telah diaktifkan

Buka Firebase console, lalu buka tab Performance. Jika Anda melihat pesan selamat datang yang menampilkan "SDK detected", berarti Anda telah berhasil berintegrasi dengan Firebase Performance Monitoring.

Kirim pesan gambar

Buat beberapa data performa dengan mengirim gambar di aplikasi chat Anda.

1. Setelah login ke aplikasi chat, klik tombol upload gambar .
2. Pilih file gambar menggunakan pemilih file.
3. Coba kirim beberapa gambar (beberapa contoh disimpan di public/images/) sehingga Anda dapat menguji distribusi metrik kustom dan atribut khusus.

Pesan baru akan ditampilkan di UI aplikasi bersama dengan gambar yang Anda pilih.

11. Memantau dasbor

Setelah men-deploy aplikasi web dan mengirim pesan gambar sebagai pengguna, Anda dapat meninjau data performa di dasbor pemantauan performa (di Firebase console).

Catatan: Data performa biasanya ditampilkan dalam waktu 12 jam. Pastikan untuk memeriksa kembali nanti jika Anda tidak melihat hasil apa pun di Firebase console.

Mengakses dasbor

1. Di Firebase console, pilih project yang memiliki aplikasi Friendly Chat.
2. Di panel kiri, cari bagian Kualitas, lalu klik Performa.

Tinjau data di perangkat

Setelah pemantauan performa memproses data aplikasi, Anda akan melihat tab di sepanjang bagian atas dasbor. Pastikan untuk memeriksa kembali nanti jika Anda belum melihat data atau tab apa pun.

1. Klik tab Di perangkat.

• Tabel Pemuatan halaman menampilkan berbagai metrik performa yang dikumpulkan secara otomatis oleh pemantauan performa saat halaman Anda dimuat.
• Tabel Durations menampilkan trace kustom yang telah Anda tetapkan dalam kode aplikasi.

2. Klik saveImageMessage di tabel Durations guna meninjau metrik tertentu untuk rekaman aktivitas.

3. Klik Agregat untuk meninjau distribusi ukuran gambar. Anda dapat melihat metrik yang ditambahkan untuk mengukur ukuran gambar pada trace kustom ini.

4. Klik Over time yang berada di samping Aggregate pada langkah sebelumnya. Anda juga dapat melihat Durasi pelacakan kustom. Klik Lihat lainnya untuk meninjau data yang dikumpulkan secara lebih mendetail.

5. Di halaman yang terbuka, Anda dapat mengelompokkan data durasi berdasarkan jenis MIME gambar dengan mengklik imageType. Data spesifik ini dicatat karena atribut imageType yang Anda tambahkan ke trace kustom.

Meninjau data jaringan

Permintaan jaringan HTTP/S adalah laporan yang mencatat waktu respons dan ukuran payload panggilan jaringan.

1. Kembali ke layar utama dasbor pemantauan performa.
2. Klik tab Network untuk melihat daftar entri permintaan jaringan untuk aplikasi web Anda.
3. Jelajahi masalah tersebut untuk mengidentifikasi permintaan yang lambat dan mulai lakukan perbaikan untuk meningkatkan performa aplikasi Anda.

12. Selamat!

Anda telah mengaktifkan Firebase SDK untuk pemantauan performa serta mengumpulkan trace otomatis dan trace kustom untuk mengukur performa aplikasi chat di dunia nyata.

Yang telah kita bahas:

• Menambahkan Firebase Performance Monitoring SDK ke aplikasi web Anda.
• Menambahkan trace kustom ke kode Anda.
• Merekam metrik kustom yang terkait dengan trace kustom.
• Menyegmentasikan data performa menggunakan atribut khusus.
• Memahami cara menggunakan dasbor pemantauan performa untuk mendapatkan insight tentang performa aplikasi Anda.

Pelajari lebih lanjut:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/