1. Genel Bakış
Bu codelab'de, sohbet web uygulamasının performansını ölçmek için Firebase Performance Monitoring'i nasıl kullanacağınızı öğreneceksiniz. Canlı demoyu izlemek için https://fireperf-Friendlychat.web.app/ adresini ziyaret edin.
Neler öğreneceksiniz?
- Kullanıma hazır metrikleri (sayfa yükü ve ağ istekleri) almak için web uygulamanıza Firebase Performance Monitoring'i ekleme.
- Özel izlerle belirli bir kod parçasının nasıl ölçüleceği.
- Özel bir izlemeye bağlı ek özel metrikler kaydetme.
- Özel özellikleri kullanarak performans verilerinizi daha ayrıntılı segmentlere ayırma.
- Web uygulamanızın performansını anlamak için performans izleme kontrol panelini kullanma
Gerekenler
2. Örnek kodu alın
Komut satırından codelab'in GitHub deposunu klonlayın:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatif olarak, bilgisayarınızda git yüklü değilse depoyu zip dosyası olarak indirebilirsiniz.
Başlangıç uygulamasını içe aktarma
IDE'nizi kullanarak, klonlanan depodan 📁 performance-monitoring-start
dizinini açın veya içe aktarın. Bu 📁 performance-monitoring-start
dizini, bir sohbet web uygulaması olan codelab'in başlangıç kodunu içerir.
3. Firebase projesi oluşturma ve ayarlama
Firebase projesi oluşturma
- Firebase konsolunda Proje Ekle'yi tıklayın.
- Firebase projenizi
FriendlyChat
olarak adlandırın.
Firebase projenizin proje kimliğini unutmayın.
- Proje Oluştur'u tıklayın.
Projeye bir Firebase web uygulaması ekleyin
- Yeni bir Firebase web uygulaması oluşturmak için web simgesini tıklayın.
- Uygulamayı
Friendly Chat
takma adıyla kaydedin ve ardından Bu uygulama için Firebase Hosting'i de kur seçeneğinin yanındaki kutuyu işaretleyin. - Uygulamayı kaydet'i tıklayın.
- Kalan adımları tıklayarak ilerleyin. Ekrandaki talimatları uygulamanız gerekmez. Bunlar, bu codelab'in sonraki adımlarında ele alınacaktır.
Firebase kimlik doğrulaması için Google ile Oturum Açma'yı etkinleştir
Kullanıcıların, sohbet uygulamasında Google hesaplarıyla oturum açmasına izin vermek için Google oturum açma yöntemini kullanacağız.
Google ile oturum açmayı etkinleştirmeniz gerekir:
- Firebase konsolunda sol paneldeki Geliştir bölümünü bulun.
- Kimlik doğrulama'yı ve ardından Oturum açma yöntemi sekmesini ( Konsola git) tıklayın.
- Google oturum açma sağlayıcısını etkinleştirin ve ardından Kaydet'i tıklayın.
Cloud Firestore'u etkinleştirme
Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.
Cloud Firestore'u etkinleştirmeniz gerekir:
- Firebase konsolunun Geliştirme bölümünde Veritabanı'nı tıklayın.
- Cloud Firestore bölmesinde Create database'i (Veritabanı oluştur) tıklayın.
- Test modunda başlat seçeneğini belirleyin, ardından güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuduktan sonra Etkinleştir'i tıklayın.
Bu codelab'in başlangıç kodu daha güvenli kurallar içeriyor. Bunları daha sonra codelab'de dağıtacağız.
Cloud Storage'ı etkinleştirme
Web uygulaması resimleri depolamak, yüklemek ve paylaşmak için Cloud Storage for Firebase'i kullanır.
Cloud Storage'ı etkinleştirmeniz gerekir:
- Firebase konsolunun Geliştirme bölümünde Depolama'yı tıklayın.
- Başlayın'ı tıklayın.
- Firebase projenizin güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyup Anladım'ı tıklayın.
Başlangıç kodu, daha sonra codelab'de dağıtacağımız temel bir güvenlik kuralını içerir.
4. Firebase komut satırı arayüzünü yükleme
Firebase komut satırı arayüzü (KSA), web uygulamanızı yerel olarak sunmak ve Firebase projenize dağıtmak için Firebase Hosting'i kullanmanıza olanak tanır.
- Firebase belgelerindeki bu talimatları uygulayarak CLI'yı yükleyin.
- Bir terminalde aşağıdaki komutu çalıştırarak CLI'ın düzgün şekilde yüklendiğini doğrulayın:
firebase --version
Firebase CLI sürümünüzün 8.0.0 veya üzeri olduğundan emin olun.
- Aşağıdaki komutu çalıştırarak Firebase CLI'ı yetkilendirin:
firebase login
Web uygulaması şablonunu, uygulamanızın Firebase Hosting yapılandırmasını uygulamanızın yerel dizininden (codelab'de daha önce klonladığınız depo) alacak şekilde ayarladık. Ancak yapılandırmayı almak için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekir.
- Komut satırınızın, uygulamanızın yerel
performance-monitoring-start
dizinine eriştiğinden emin olun. - Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
- İstendiğinde proje kimliğinizi seçin ve Firebase projenize bir takma ad verin.
Takma ad, birden fazla ortamınız varsa (üretim, hazırlık vb.) kullanışlıdır. Ancak bu codelab için default
takma adını kullanalım.
- Komut satırınızdaki kalan talimatları uygulayın.
5. Firebase Performance Monitoring ile entegrasyon
Web için Firebase Performance Monitoring SDK'sı ile entegrasyon gerçekleştirmenin çeşitli yolları vardır (ayrıntılar için belgeleri inceleyin). Bu codelab'de Barındırma URL'leri üzerinden performans izlemeyi etkinleştireceğiz.
Performans izleme ekleme ve Firebase'i başlatma
src/index.js
dosyasını açın, ardından Firebase Performance Monitoring SDK'sını dahil etmek içinTODO
öğesinin altına aşağıdaki satırı ekleyin.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- Ayrıca Firebase SDK'sını, Firebase projesi ve kullanmak istediğimiz web uygulamasıyla ilgili bilgileri içeren bir yapılandırma nesnesiyle başlatmamız gerekiyor. Firebase Hosting kullandığımızdan, bu yapılandırmayı sizin için yapacak özel bir komut dosyasını içe aktarabilirsiniz. Bu codelab'de
public/index.html
dosyasının alt kısmına aşağıdaki satırı sizin için önceden ekledik ancak bu satırın mevcut olup olmadığını tekrar kontrol edin.
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- Performans izlemeyi başlatmak için
src/index.js
dosyasındaTODO
öğesinin altına aşağıdaki satırı ekleyin.
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
Performance Monitoring, kullanıcılar sitenizi kullandığında artık sayfa yükleme ve ağ isteği metriklerini sizin için otomatik olarak toplayacak. Otomatik sayfa yükleme izlemeleri hakkında daha fazla bilgi edinmek için belgeleri inceleyin.
İlk giriş gecikmesi için çoklu dolgu kitaplığını ekleyin
İlk giriş gecikmesi, kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılara uygulamanızın yanıt verme hızıyla ilgili ilk izlenimlerini verdiği için yararlıdır.
İlk giriş gecikmesi, kullanıcı sayfadaki bir öğeyle ilk kez etkileşimde bulunduğunda (ör. bir düğmeyi veya köprüyü tıkladığında) başlar. Tarayıcı, girişe yanıt verebilir hale geldikten sonra hemen durur. Bu, tarayıcının içeriğinizi yüklemek veya ayrıştırmakla meşgul olmadığı anlamına gelir.
Bu çoklu dolgu kitaplığı, performans izleme entegrasyonu için isteğe bağlıdır.
public/index.html
dosyasını açın, ardından aşağıdaki satırın açıklamasını kaldırın.
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>
Bu noktada, kodunuzda Firebase Performance Monitoring ile entegrasyonu tamamlamış olursunuz.
Aşağıdaki adımlarda, Firebase Performance Monitoring'i kullanarak özel izler eklemeyi öğreneceksiniz. Yalnızca otomatik izleri toplamak istiyorsanız "Görüntüleri dağıt ve göndermeye başla" bölümüne gidin. bölümüne ekleyin.
6. Uygulamanıza özel iz ekleyin
Performance Monitoring, özel izler oluşturmanıza olanak tanır. Özel iz, uygulamanızdaki bir yürütme bloğunun süresine ilişkin bir rapordur. Özel bir izlemenin başlangıcını ve bitişini, SDK tarafından sağlanan API'leri kullanarak tanımlarsınız.
src/index.js
dosyasında bir performans nesnesi alın, ardından resim mesajı yüklemek için özel bir iz oluşturun.
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- Özel bir iz kaydetmek istiyorsanız iz için başlangıç ve bitiş noktasını belirtmeniz gerekir. İzi bir zamanlayıcı olarak düşünebilirsiniz.
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
Özel izi başarıyla tanımladınız. Kodunuzu dağıttıktan sonra, kullanıcı bir görüntü mesajı gönderirse özel iz süresi kaydedilir. Bu sayede, gerçek kullanıcıların sohbet uygulamanızda resim göndermelerinin ne kadar sürdüğü hakkında fikir edinebilirsiniz.
7. Uygulamanıza özel metrik ekleyin.
Bir özel iz'i daha ayrıntılı şekilde yapılandırarak, kendi kapsamında gerçekleşen performansla ilgili etkinliklere ait özel metrikleri kaydedebilirsiniz. Örneğin, son adımda tanımladığımız özel iz için yükleme süresinin bir resmin boyutundan etkilenip etkilenmediğini araştırmak için bir metrik kullanabilirsiniz.
- Önceki adımdaki özel izini (
src/index.js
dosyanızda tanımlanır) bulun. - Yüklenen resmin boyutunu kaydetmek için
TODO
öğesinin altına aşağıdaki satırı ekleyin.
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
Bu metrik, performans izlemenin özel iz süresini ve yüklenen görüntü boyutunu kaydetmesini sağlar.
8. Uygulamanıza özel özellik ekleyin
Önceki adımları temel alarak, özel izlerinizde özel özellikleri de toplayabilirsiniz. Özel özellikler, verileri uygulamanıza özel kategorilere göre segmentlere ayırmanıza yardımcı olabilir. Örneğin, MIME türünün performansı nasıl etkileyebileceğini araştırmak için resim dosyasının MIME türünü toplayabilirsiniz.
src/index.js
dosyanızda tanımlanan özel izlemeyi kullanın.- Yüklenen resmin MIME türünü kaydetmek için
TODO
öğesinin altına aşağıdaki satırı ekleyin.
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
Bu özellik, özel iz süresini yüklenen görüntü türüne göre kategorilere ayırmak için performans izleme özelliğinin kullanılmasını sağlar.
9. [Extend] User Timing API ile özel iz ekleme
Firebase Performance Monitoring SDK'sı, eşzamansız olarak yüklenebilecek ve sayfa yükleme sırasında web uygulamalarının performansını olumsuz şekilde etkilemeyecek şekilde tasarlanmıştır. SDK yüklenmeden önce Firebase Performance Monitoring API kullanılamaz. Bu senaryoda, User Timing API'yi kullanarak özel izler ekleyebilirsiniz. Firebase Performance SDK'sı, measure() yönteminden süreleri alır ve özel iz olarak günlüğe kaydeder.
User Timing API'yi kullanarak uygulama stil komut dosyaları yükleme süresini ölçeceğiz.
- Uygulama stil komut dosyalarının yüklenmesinin başlangıcını işaretlemek için
public/index.html
dosyasına aşağıdaki satırı ekleyin.
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- Uygulama stil komut dosyalarının yüklenmesinin sonunu işaretlemek ve başlangıç ile bitiş arasındaki süreyi ölçmek için aşağıdaki satırları ekleyin.
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>
Burada oluşturduğunuz giriş, Firebase Performance Monitoring tarafından otomatik olarak toplanır. Daha sonra Firebase Performance konsolunda loadStyling
adlı özel bir iz bulabilirsiniz.
10. Görüntüleri dağıtın ve göndermeye başlayın
Firebase Hosting'e dağıtma
Firebase Performance Monitoring'i kodunuza ekledikten sonra, kodunuzu Firebase Hosting'e dağıtmak için aşağıdaki adımları uygulayın:
- Komut satırınızın, uygulamanızın yerel
performance-monitoring-start
dizinine eriştiğinden emin olun. - Aşağıdaki komutu çalıştırarak dosyalarınızı Firebase projenize dağıtın:
firebase deploy
- Konsolda aşağıdakiler gösterilir:
=== 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
- Artık size ait iki Firebase alt alan adında Firebase Hosting kullanılarak tam olarak barındırılan web uygulamanızı ziyaret edin:
https://<projectId>.firebaseapp.com
vehttps://<projectId>.web.app
.
Performans izlemenin etkinleştirildiğini doğrulama
Firebase konsolunu açıp Performans sekmesine gidin. "SDK algılandı" ifadesini içeren bir karşılama mesajı görüyorsanız Firebase Performance Monitoring başarıyla entegre edilmiş demektir.
Resim mesajı gönder
Sohbet uygulamanızda resim göndererek performans verileri oluşturun.
- Sohbet uygulamanızda oturum açtıktan sonra resim yükleme düğmesini tıklayın.
- Dosya seçiciyi kullanarak bir resim dosyası seçin.
- Özel metriklerin ve özel özelliklerin dağılımını test etmek için birden çok resim göndermeyi deneyin (birkaç örnek
public/images/
aracında saklanır).
Yeni mesajlar, seçtiğiniz resimlerle birlikte uygulamanın kullanıcı arayüzünde görüntülenir.
11. Kontrol panelini izleme
Web uygulamanızı dağıttıktan ve kullanıcı olarak resim mesajları gönderdikten sonra, performans verilerini performans izleme kontrol panelinde (Firebase konsolunda) inceleyebilirsiniz.
Kontrol panelinize erişme
- Firebase konsolunda,
Friendly Chat
uygulamanızın bulunduğu projeyi seçin. - Sol panelde Kalite bölümünü bulun ve Performans'ı tıklayın.
Cihazdaki verileri inceleyin
Uygulamanızın verileri performans izleme tarafından işlendikten sonra, kontrol panelinin üst kısmında sekmeler görürsünüz. Henüz herhangi bir veri veya sekme görmüyorsanız daha sonra tekrar kontrol etmeyi unutmayın.
- Cihazda sekmesini tıklayın.
- Sayfa yüklemeleri tablosunda, sayfanız yüklenirken performans izleme özelliğinin otomatik olarak topladığı çeşitli performans metrikleri gösterilir.
- Süreler tablosu, uygulamanızın kodunda tanımladığınız özel izleri gösterir.
- İze ilişkin belirli metrikleri incelemek için Durations (Süreler) tablosunda saveImageMessage öğesini tıklayın.
- Resim boyutlarının dağılımını incelemek için Topla'yı tıklayın. Bu özel iz için resim boyutunu ölçmek amacıyla eklediğiniz metriği görebilirsiniz.
- Önceki adımda Topla'nın yanındaki Zaman içinde'yi tıklayın. Özel izin Süre'sini de görüntüleyebilirsiniz. Toplanan verileri daha ayrıntılı bir şekilde incelemek için Daha fazla görüntüle'yi tıklayın.
- Açılan sayfada imageType seçeneğini tıklayarak süre verilerini resim MIME türüne göre segmentlere ayırabilirsiniz. Bu veriler, özel izinize eklediğiniz imageType özelliği nedeniyle günlüğe kaydedildi.
Ağ verilerini inceleme
HTTP/S ağ isteği, ağ çağrılarının yanıt süresini ve yük boyutunu yakalayan bir rapordur.
- Performans izleme kontrol panelinin ana ekranına geri dönün.
- Web uygulamanıza ilişkin ağ isteği girişlerinin listesini görmek için Ağ sekmesini tıklayın.
- Yavaş istekleri belirlemek için bu isteklere göz atın ve uygulamanızın performansını iyileştirmek için düzeltme üzerinde çalışmaya başlayın.
12. Tebrikler!
Performans izleme için Firebase SDK'sını etkinleştirdiniz ve sohbet uygulamanızın gerçek dünya performansını ölçmek amacıyla otomatik izler ve özel izler topladınız.
İşlediğimiz konular:
- Firebase Performance Monitoring SDK'sını web uygulamanıza ekleme.
- Kodunuza özel izler ekleme.
- Özel ize bağlı özel metrikler kaydediliyor.
- Özel özellikleri kullanarak performans verilerini segmentlere ayırma.
- Uygulamanızın performansı hakkında bilgi edinmek için performans izleme kontrol panelini nasıl kullanacağınızı anlama