Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.
Halaman ini diterjemahkan oleh Cloud Translation API.
Switch to English

Firebase Performance Monitoring untuk web

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

3b1284f5144b54f6.png

Apa yang akan Anda pelajari

  • Cara menambahkan Firebase Performance Monitoring ke aplikasi web Anda untuk mendapatkan metrik out-of-the-box (pemuatan halaman dan permintaan jaringan).
  • Cara mengukur bagian kode tertentu dengan jejak kustom.
  • Cara merekam metrik kustom tambahan yang terkait dengan pelacakan kustom.
  • Cara menyegmentasikan lebih lanjut data kinerja Anda dengan atribut khusus.
  • Cara menggunakan dasbor pemantauan kinerja untuk memahami kinerja aplikasi web Anda.

Yang Anda butuhkan

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

Gandakan repositori GitHub codelab dari baris perintah:

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

Atau, jika Anda belum menginstal git, Anda dapat mengunduh repo sebagai file zip .

Impor aplikasi starter

Dengan menggunakan IDE Anda, buka atau impor direktori 📁 performance-monitoring-start dari repositori kloning. Direktori 📁 performance-monitoring-start berisi kode awal untuk codelab, yang merupakan aplikasi web chat.

Buat proyek Firebase

  1. Di konsol Firebase , klik Tambahkan Proyek .
  2. Beri nama proyek Firebase Anda, FriendlyChat .

Ingat ID proyek untuk proyek Firebase Anda.

  1. Klik Buat Proyek .

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 Siapkan juga Firebase Hosting untuk aplikasi ini .
  3. Klik Daftarkan aplikasi .
  4. Klik melalui langkah-langkah selanjutnya. Anda tidak perlu mengikuti petunjuk di layar sekarang; ini akan dibahas pada langkah selanjutnya dari codelab ini.

ea9ab0db531a104c.png

Aktifkan login Google untuk autentikasi Firebase

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

Anda harus mengaktifkan masuk dengan Google :

  1. Di konsol Firebase, cari bagian Kembangkan di panel kiri.
  2. Klik Autentikasi , lalu klik tab Metode masuk ( buka konsol ).
  3. Aktifkan penyedia masuk Google , lalu klik Simpan .

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 Develop Firebase console, klik Database .
  2. Klik Buat database di panel Cloud Firestore.
  3. Pilih opsi Mulai dalam mode pengujian , lalu klik Aktifkan setelah membaca pelepasan tanggung jawab hukum tentang aturan keamanan.

Kode awal untuk codelab ini mencakup aturan yang lebih aman. Kami akan menerapkannya nanti di codelab.

24bd1a097492eac6.png

Aktifkan Cloud Storage

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

Anda harus mengaktifkan Cloud Storage:

  1. Di bagian Kembangkan Firebase console, klik Penyimpanan .
  2. Klik Memulai .
  3. Baca penafian tentang aturan keamanan untuk proyek Firebase Anda, lalu klik Oke .

Kode awal menyertakan aturan keamanan dasar, yang akan kami terapkan nanti di codelab.

Antarmuka baris perintah (CLI) Firebase memungkinkan Anda menggunakan Firebase Hosting untuk menyajikan aplikasi web Anda secara lokal serta menerapkan aplikasi web Anda ke proyek Firebase.

  1. Instal CLI dengan mengikuti petunjuk ini di dokumen Firebase.
  2. Pastikan 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.

  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, kita perlu mengaitkan aplikasi Anda dengan proyek Firebase.

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

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

  1. Ikuti instruksi yang tersisa di baris perintah Anda.

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

Tambahkan pemantauan kinerja dan inisialisasi Firebase

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

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. Kita juga perlu menginisialisasi SDK Firebase dengan objek konfigurasi yang berisi informasi tentang proyek Firebase dan aplikasi web yang ingin kita gunakan. Karena kami menggunakan Firebase Hosting, Anda dapat mengimpor skrip khusus yang akan melakukan konfigurasi ini untuk Anda. Untuk codelab ini, kami telah menambahkan baris berikut untuk Anda di bagian bawah file public/index.html , tetapi periksa kembali apakah ada.

index.html

<script src="/__/firebase/init.js"></script>
  1. Di file public/scripts/main.js , tambahkan baris berikut di bawah TODO untuk menginisialisasi pemantauan kinerja.

main.js

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

Performance Monitoring sekarang akan secara otomatis mengumpulkan pemuatan halaman dan metrik permintaan jaringan untuk Anda saat pengguna menggunakan situs Anda! Lihat dokumentasi untuk mempelajari lebih lanjut tentang jejak pemuatan halaman otomatis.

Tambahkan pustaka polyfill penundaan masukan pertama

Penundaan masukan pertama berguna karena browser yang merespons interaksi pengguna memberikan kesan pertama kepada pengguna tentang daya tanggap aplikasi Anda.

Penundaan masukan pertama dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink. Itu berhenti segera setelah browser dapat merespons masukan, yang berarti bahwa browser tidak sibuk memuat atau mengurai konten Anda.

Pustaka polyfill ini opsional untuk integrasi pemantauan kinerja.

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

Pada tahap ini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring di kode Anda!

Dalam langkah-langkah berikut, Anda mempelajari tentang menambahkan pelacakan kustom menggunakan Firebase Performance Monitoring. Jika Anda hanya ingin mengumpulkan jejak otomatis, buka bagian "Terapkan dan mulai mengirim gambar".

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

  1. Di file public/scripts/main.js , dapatkan objek performance, lalu buat pelacakan kustom untuk mengupload pesan gambar.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. Untuk merekam jejak khusus, Anda perlu menentukan titik awal dan titik berhenti untuk jejak tersebut. Anda dapat menganggap jejak sebagai pengatur waktu.

main.js

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

 ...

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

Anda telah berhasil menentukan jejak kustom! Setelah menerapkan kode Anda, durasi pelacakan kustom akan direkam jika pengguna mengirim pesan gambar. Ini akan memberi Anda gambaran tentang berapa lama pengguna dunia nyata mengirim gambar di aplikasi obrolan Anda.

Anda selanjutnya dapat mengonfigurasi pelacakan kustom untuk merekam metrik kustom untuk peristiwa terkait kinerja yang terjadi dalam cakupannya. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu upload dipengaruhi oleh ukuran gambar untuk pelacakan kustom yang kami tentukan di langkah terakhir.

  1. Temukan pelacakan kustom dari langkah sebelumnya (ditentukan dalam file public/scripts/main.js ).
  2. Tambahkan baris berikut di bawah TODO untuk merekam ukuran gambar yang diupload.

main.js

 ...

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

 ...

Metrik ini memungkinkan pemantauan kinerja untuk merekam durasi pelacakan kustom serta ukuran gambar yang diupload.

Berdasarkan langkah sebelumnya, Anda juga dapat mengumpulkan atribut khusus pada jejak khusus Anda. Atribut khusus dapat membantu dalam mengelompokkan data menurut kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki bagaimana jenis MIME dapat memengaruhi performa.

  1. Gunakan pelacakan khusus yang ditentukan dalam file public/scripts/main.js
  2. Tambahkan baris berikut di bawah TODO untuk merekam jenis MIME dari gambar yang diupload.

main.js

 ...

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

 ...

Atribut ini memungkinkan pemantauan kinerja untuk mengkategorikan durasi pelacakan kustom berdasarkan jenis gambar yang diupload.

Firebase Performance Monitoring SDK dirancang agar dapat dimuat secara asinkron, sehingga tidak akan berdampak negatif pada performa aplikasi web selama pemuatan halaman. Sebelum SDK dimuat, Firebase Performance Monitoring API tidak tersedia. Dalam skenario ini, Anda masih dapat menambahkan jejak kustom dengan menggunakan API Waktu Pengguna . Firebase performance SDK akan mengambil durasi dari measure () dan mencatatnya sebagai pelacakan khusus.

Kami akan mengukur durasi memuat skrip gaya aplikasi menggunakan API Waktu Pengguna.

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

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Tambahkan baris berikut untuk menandai akhir pemuatan skrip gaya 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 dikumpulkan secara otomatis oleh Firebase Performance Monitoring. Anda akan dapat menemukan pelacakan khusus yang disebut loadStyling di konsol Firebase Performance nanti.

Terapkan ke Firebase Hosting

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

  1. Pastikan bahwa baris perintah Anda mengakses direktori performance-monitoring-start lokal aplikasi Anda.
  2. Terapkan file Anda ke proyek Firebase dengan menjalankan perintah berikut:
firebase deploy
  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 menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri: https://<projectId>.firebaseapp.com dan https://<projectId>.web.app .

Verifikasikan bahwa pemantauan kinerja diaktifkan

Buka Firebase console dan buka tab Performa . Jika Anda melihat pesan selamat datang yang menunjukkan "SDK terdeteksi", berarti Anda telah berhasil berintegrasi dengan Firebase Performance Monitoring!

ac917a089e9c89d1.png

Kirim pesan gambar

Hasilkan beberapa data kinerja dengan mengirimkan gambar di aplikasi obrolan Anda.

  1. Setelah masuk ke aplikasi obrolan Anda, klik tombol unggah gambar 13734cb66773e5a3.png .
  2. Pilih file gambar menggunakan pemilih file.
  3. Coba kirim beberapa gambar (beberapa contoh disimpan di public/images/ ) sehingga Anda dapat menguji distribusi metrik khusus dan atribut khusus.

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

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

Akses dasbor Anda

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

Tinjau data di perangkat

Setelah pemantauan kinerja memproses data aplikasi Anda, 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 menunjukkan berbagai metrik kinerja yang dikumpulkan secara otomatis oleh pemantauan kinerja saat halaman Anda dimuat.
  • Tabel Durations menunjukkan semua pelacakan kustom yang telah Anda tentukan di kode aplikasi Anda.
  1. Klik saveImageMessage di tabel Durasi untuk meninjau metrik tertentu untuk pelacakan.

e28758fd02d9ffac.png

  1. Klik Agregat untuk meninjau distribusi ukuran gambar. Anda dapat melihat metrik yang Anda tambahkan untuk mengukur ukuran gambar untuk pelacakan kustom ini.

c3cbcfc0c739a0a8.png

  1. Klik Seiring waktu yang ada di samping Agregat di langkah sebelumnya. Anda juga dapat melihat Durasi pelacakan kustom. Klik Lihat lebih lanjut untuk meninjau data yang dikumpulkan secara lebih detail.

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

Tinjau data jaringan

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

  1. Kembali ke layar utama dasbor pemantauan kinerja.
  2. Klik tab Jaringan untuk melihat daftar entri permintaan jaringan untuk aplikasi web Anda.
  3. Jelajahi semuanya untuk mengidentifikasi permintaan yang lambat dan mulai mengerjakan perbaikan untuk meningkatkan kinerja aplikasi Anda!

1ab598284eea6581.png

Anda telah mengaktifkan SDK Firebase untuk pemantauan kinerja dan mengumpulkan jejak otomatis dan jejak khusus untuk mengukur kinerja dunia nyata dari aplikasi obrolan Anda!

Apa yang telah kami bahas:

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

Belajarlah lagi: