1. ภาพรวม
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ Firebase Performance Monitoring เพื่อวัดประสิทธิภาพของเว็บแอปแชท โปรดไปที่ https://fireperf-friendlychat.web.app/ เพื่อดูการสาธิตแบบเรียลไทม์
สิ่งที่คุณจะได้เรียนรู้
- วิธีเพิ่มการตรวจสอบประสิทธิภาพ Firebase ลงในเว็บแอปเพื่อดูเมตริกที่พร้อมใช้งานทันที (การโหลดหน้าเว็บและคำขอเครือข่าย)
- วิธีวัดส่วนของโค้ดที่เฉพาะเจาะจงด้วยการติดตามที่กำหนดเอง
- วิธีบันทึกเมตริกที่กําหนดเองเพิ่มเติมซึ่งเชื่อมโยงกับการติดตามที่กําหนดเอง
- วิธีแบ่งกลุ่มข้อมูลประสิทธิภาพเพิ่มเติมด้วยแอตทริบิวต์ที่กำหนดเอง
- วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจประสิทธิภาพของเว็บแอป
สิ่งที่ต้องมี
2. รับโค้ดตัวอย่าง
โคลนที่เก็บ GitHub ของโค้ดแล็บจากบรรทัดคำสั่งโดยทำดังนี้
git clone https://github.com/firebase/codelab-friendlychat-web
หรือหากยังไม่ได้ติดตั้ง git คุณสามารถดาวน์โหลดที่เก็บเป็นไฟล์ ZIP ได้
นำเข้าแอปเริ่มต้น
ใช้ IDE เพื่อเปิดหรือนําเข้าไดเรกทอรี 📁 performance-monitoring-start จากที่เก็บข้อมูลที่โคลน ไดเรกทอรี 📁 performance-monitoring-start นี้มีโค้ดเริ่มต้นสําหรับ Codelab ซึ่งเป็นเว็บแอปแชท
3. สร้างและตั้งค่าโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase
- ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์
- ตั้งชื่อโปรเจ็กต์ Firebase เป็น
FriendlyChat
โปรดจำรหัสโปรเจ็กต์ Firebase ไว้
- คลิกสร้างโปรเจ็กต์
อัปเกรดแพ็กเกจราคาของ Firebase
หากต้องการใช้ Cloud Storage สำหรับ Firebase โปรเจ็กต์ Firebase ของคุณต้องใช้แพ็กเกจราคาแบบจ่ายเมื่อใช้ (Blaze) ซึ่งหมายความว่าโปรเจ็กต์จะลิงก์กับบัญชีสำหรับการเรียกเก็บเงินใน Cloud
- บัญชีการเรียกเก็บเงินระบบคลาวด์ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
- หากคุณเพิ่งเริ่มใช้ Firebase และ Google Cloud ให้ตรวจสอบว่าคุณมีสิทธิ์รับเครดิตมูลค่า $300 และบัญชีการเรียกเก็บเงินระบบคลาวด์แบบทดลองใช้ฟรีหรือไม่
- หากคุณทำ Codelab นี้เป็นส่วนหนึ่งของกิจกรรม โปรดสอบถามผู้จัดว่ามีเครดิต Cloud เหลืออยู่ไหม
หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้
- ในคอนโซล Firebase ให้เลือกอัปเกรดแพ็กเกจของคุณ
- เลือกแพ็กเกจ Blaze ทำตามวิธีการบนหน้าจอเพื่อลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud กับโปรเจ็กต์
หากต้องการสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud ในการอัปเกรดนี้ คุณอาจต้องกลับไปที่ขั้นตอนการอัปเกรดในคอนโซล Firebase เพื่อทำการอัปเกรดให้เสร็จสมบูรณ์
เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์
- คลิกไอคอนเว็บ
เพื่อสร้างเว็บแอป Firebase ใหม่ - ลงทะเบียนแอปโดยใช้ชื่อเล่น
Friendly Chatแล้วเลือกช่องข้างตั้งค่าโฮสติ้งของ Firebase สําหรับแอปนี้ด้วย - คลิกลงทะเบียนแอป
- คลิกขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามวิธีการบนหน้าจอตอนนี้ ซึ่งจะอธิบายไว้ในขั้นตอนต่อไปของ Codelab นี้
เปิดใช้ Google Sign-In สำหรับการตรวจสอบสิทธิ์ Firebase
เราจะใช้วิธีการลงชื่อเข้าใช้ของ Google เพื่ออนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปรับแชทด้วยบัญชี Google
คุณจะต้องเปิดใช้การลงชื่อเข้าใช้ Google โดยทำดังนี้
- ในคอนโซล Firebase ให้ค้นหาส่วน Develop ในแผงด้านซ้าย
- คลิกการตรวจสอบสิทธิ์ จากนั้นคลิกแท็บวิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล)
- เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ Google แล้วคลิกบันทึก
ตั้งค่า Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
วิธีตั้งค่า Cloud Firestore ในโปรเจ็กต์ Firebase มีดังนี้
- ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยาย Build แล้วเลือกฐานข้อมูล Firestore
- คลิกสร้างฐานข้อมูล
- ปล่อยการตั้งค่ารหัสฐานข้อมูลเป็น
(default) - เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้ - คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
จากนั้นคุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูลได้ใน Codelab นี้ อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสําหรับฐานข้อมูล - คลิกสร้าง
ตั้งค่า Cloud Storage สำหรับ Firebase
โดยเว็บแอปนี้ใช้ Cloud Storage for Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ
วิธีตั้งค่า Cloud Storage for Firebase ในโปรเจ็กต์ Firebase มีดังนี้
- ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยาย Build แล้วเลือก Storage
- คลิกเริ่มต้นใช้งาน
- เลือกตำแหน่งสำหรับที่เก็บข้อมูลเริ่มต้น
ที่เก็บข้อมูลในUS-WEST1,US-CENTRAL1และUS-EAST1สามารถใช้แพ็กเกจ "ฟรีตลอด" สำหรับ Google Cloud Storage ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage - คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
จากนั้นคุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูลได้ใน Codelab นี้ อย่าเผยแพร่หรือเปิดเผยแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล Storage - คลิกสร้าง
4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase
อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อแสดงเว็บแอปภายในเครื่อง รวมถึงทำให้เว็บแอปใช้งานได้ในโปรเจ็กต์ Firebase ได้
- ติดตั้ง CLI โดยทําตามวิธีการเหล่านี้ในเอกสาร Firebase
- ยืนยันว่าติดตั้ง CLI อย่างถูกต้องแล้วโดยเรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัล
firebase --version
ตรวจสอบว่า Firebase CLI เป็นเวอร์ชัน 8.0.0 ขึ้นไป
- ให้สิทธิ์ Firebase CLI โดยการเรียกใช้คำสั่งต่อไปนี้
firebase login
เราได้ตั้งค่าเทมเพลตเว็บแอปให้ดึงการกำหนดค่าของแอปสำหรับโฮสติ้งของ Firebase จากไดเรกทอรีในเครื่องของแอปแล้ว (ที่เก็บที่คุณโคลนก่อนหน้านี้ใน Codelab) แต่เราต้องเชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase เพื่อดึงข้อมูลการกําหนดค่า
- ตรวจสอบว่าบรรทัดคำสั่งเข้าถึงไดเรกทอรี
performance-monitoring-startในพื้นที่ของแอป - เชื่อมโยงแอปกับโปรเจ็กต์ Firebase โดยเรียกใช้คําสั่งต่อไปนี้
firebase use --add
- เมื่อได้รับข้อความแจ้ง ให้เลือกรหัสโปรเจ็กต์ แล้วตั้งชื่อแทนให้โปรเจ็กต์ Firebase
ชื่อแทนจะมีประโยชน์หากคุณมีสภาพแวดล้อมหลายอย่าง (การผลิต การทดลองใช้ ฯลฯ) แต่สำหรับโค้ดแล็บนี้ เราจะใช้อีเมลแทน default
- ทําตามวิธีการที่เหลือในบรรทัดคำสั่ง
5. ผสานรวมกับการตรวจสอบประสิทธิภาพของ Firebase
การผสานรวมกับ Firebase Performance Monitoring SDK สำหรับเว็บทำได้หลายวิธี (ดูรายละเอียดในเอกสารประกอบ) ในโค้ดแล็บนี้ เราจะเปิดใช้การตรวจสอบประสิทธิภาพจาก Hosting URL
เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้นใช้งาน Firebase
- เปิดไฟล์
src/index.jsจากนั้นเพิ่มบรรทัดต่อไปนี้ใต้TODOเพื่อรวม Firebase Performance Monitoring SDK
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- นอกจากนี้ เรายังต้องเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกําหนดค่าที่มีข้อมูลเกี่ยวกับโปรเจ็กต์ Firebase และเว็บแอปที่ต้องการใช้ เนื่องจากเราใช้โฮสติ้งของ Firebase คุณจึงนําเข้าสคริปต์พิเศษที่จะทําการกําหนดค่านี้ให้คุณได้ สำหรับ Codelab นี้ เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์
public/index.htmlแต่โปรดตรวจสอบอีกครั้งว่ามีบรรทัดดังกล่าวหรือไม่
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- ในไฟล์
src/index.jsให้เพิ่มบรรทัดต่อไปนี้ใต้TODOเพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
ตอนนี้การตรวจสอบประสิทธิภาพจะรวบรวมเมตริกการโหลดหน้าเว็บและคําขอเครือข่ายให้คุณโดยอัตโนมัติเมื่อผู้ใช้ใช้เว็บไซต์ ดูเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับร่องรอยการโหลดหน้าเว็บอัตโนมัติ
เพิ่มไลบรารี polyfill สำหรับความล่าช้าในการอินพุตครั้งแรก
ความล่าช้าในการป้อนข้อมูลครั้งแรกมีประโยชน์เนื่องจากเบราว์เซอร์ที่ตอบสนองต่อการโต้ตอบของผู้ใช้จะทำให้ผู้ใช้มีความประทับใจแรกเกี่ยวกับการตอบสนองของแอป
ความล่าช้าในการอินพุตครั้งแรกจะเริ่มขึ้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบใดๆ บนหน้าเว็บเป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์ โดยจะหยุดทันทีที่เบราว์เซอร์ตอบสนองต่ออินพุตได้ ซึ่งหมายความว่าเบราว์เซอร์จะไม่ยุ่งอยู่กับการโหลดหรือแยกวิเคราะห์เนื้อหาของคุณ
ไลบรารี Polyfill นี้ไม่บังคับสำหรับการผสานรวมการตรวจสอบประสิทธิภาพ
เปิดไฟล์ public/index.html แล้วยกเลิกการแสดงความคิดเห็นบรรทัดต่อไปนี้
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>
ตอนนี้คุณผสานรวมกับ Firebase Performance Monitoring ในโค้ดเรียบร้อยแล้ว
ในขั้นตอนต่อไปนี้ คุณจะได้ทราบเกี่ยวกับการเพิ่มการติดตามที่กำหนดเองโดยใช้การตรวจสอบประสิทธิภาพของ Firebase หากต้องการรวบรวมการติดตามอัตโนมัติเท่านั้น ให้ไปที่ส่วน "ทำให้ใช้งานได้และเริ่มส่งรูปภาพ"
6. เพิ่มการติดตามที่กําหนดเองลงในแอป
การตรวจสอบประสิทธิภาพช่วยให้คุณสร้างการติดตามที่กำหนดเองได้ การติดตามที่กำหนดเองคือรายงานสำหรับระยะเวลาของบล็อกการดําเนินการในแอป คุณสามารถกําหนดการเริ่มต้นและสิ้นสุดของการติดตามที่กําหนดเองได้โดยใช้ API ที่ SDK มีให้
- ในไฟล์
src/index.jsให้รับออบเจ็กต์ประสิทธิภาพ จากนั้นสร้างการติดตามที่กําหนดเองสําหรับการอัปโหลดข้อความรูปภาพ
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- หากต้องการบันทึกการติดตามที่กำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดสิ้นสุดสำหรับการติดตาม คุณสามารถคิดว่าการติดตามเป็นนาฬิกาจับเวลา
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
คุณกําหนดการติดตามที่กําหนดเองเรียบร้อยแล้ว หลังจากทำให้โค้ดใช้งานได้แล้ว ระบบจะบันทึกระยะเวลาของการติดตามที่กำหนดเองหากผู้ใช้ส่งข้อความรูปภาพ วิธีนี้จะช่วยให้คุณทราบว่าผู้ใช้จริงใช้เวลานานเท่าใดในการส่งรูปภาพในแอปแชทของคุณ
7. เพิ่มเมตริกที่กําหนดเองลงในแอป
คุณสามารถกําหนดค่าการติดตามที่กําหนดเองเพิ่มเติมเพื่อบันทึกเมตริกที่กําหนดเองสําหรับเหตุการณ์ที่เกี่ยวข้องกับประสิทธิภาพที่เกิดขึ้นภายในขอบเขต เช่น คุณสามารถใช้เมตริกเพื่อตรวจสอบว่าเวลาอัปโหลดได้รับผลกระทบจากขนาดของรูปภาพสําหรับการติดตามที่กําหนดเองที่เรากําหนดไว้ในขั้นตอนสุดท้ายหรือไม่
- ค้นหาการติดตามที่กำหนดเองจากขั้นตอนก่อนหน้า (ตามที่กำหนดไว้ในไฟล์
src/index.js) - เพิ่มบรรทัดต่อไปนี้ใต้
TODOเพื่อบันทึกขนาดของรูปภาพที่อัปโหลด
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
เมตริกนี้ทำให้การตรวจสอบประสิทธิภาพบันทึกระยะเวลาการติดตามที่กำหนดเองและขนาดรูปภาพที่อัปโหลดได้
8. เพิ่มแอตทริบิวต์ที่กำหนดเองลงในแอป
จากขั้นตอนก่อนหน้า คุณสามารถรวบรวมแอตทริบิวต์ที่กําหนดเองในการติดตามที่กําหนดเองได้ด้วย แอตทริบิวต์ที่กำหนดเองจะช่วยในการแบ่งกลุ่มข้อมูลตามหมวดหมู่สำหรับแอปโดยเฉพาะ ตัวอย่างเช่น คุณสามารถรวบรวมประเภท MIME ของไฟล์ภาพเพื่อตรวจสอบว่าประเภท MIME อาจส่งผลต่อประสิทธิภาพอย่างไรบ้าง
- ใช้การติดตามแบบกำหนดเองที่กำหนดไว้ในไฟล์
src/index.js - เพิ่มบรรทัดต่อไปนี้ใต้
TODOเพื่อบันทึกประเภท MIME ของรูปภาพที่อัปโหลด
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
แอตทริบิวต์นี้ช่วยให้การตรวจสอบประสิทธิภาพจัดหมวดหมู่ระยะเวลาการติดตามที่กำหนดเองตามประเภทรูปภาพที่อัปโหลดได้
9. [ขยาย] เพิ่มการติดตามที่กําหนดเองด้วย User Timing API
Firebase Performance Monitoring SDK ออกแบบมาเพื่อให้โหลดแบบไม่พร้อมกันได้ จึงไม่ส่งผลเสียต่อประสิทธิภาพของเว็บแอประหว่างการโหลดหน้าเว็บ Firebase Performance Monitoring API จะใช้งานไม่ได้ก่อนที่จะโหลด SDK ในกรณีนี้ คุณยังคงเพิ่มการติดตามที่กําหนดเองได้โดยใช้ User Timing API Firebase Performance SDK จะรับระยะเวลาจาก measure() และบันทึกเป็นร่องรอยที่กําหนดเอง
เราจะวัดระยะเวลาในการโหลดสคริปต์การจัดรูปแบบแอปโดยใช้ User Timing API
- ในไฟล์
public/index.htmlให้เพิ่มบรรทัดต่อไปนี้เพื่อทําเครื่องหมายการเริ่มต้นการโหลดสคริปต์การจัดสไตล์แอป
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- เพิ่มบรรทัดต่อไปนี้เพื่อระบุว่าการโหลดสคริปต์การจัดสไตล์แอปสิ้นสุดแล้ว และเพื่อวัดระยะเวลาระหว่างช่วงเริ่มต้นและช่วงสิ้นสุด
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>
การตรวจสอบประสิทธิภาพของ Firebase จะรวบรวมรายการที่คุณสร้างไว้ที่นี่โดยอัตโนมัติ คุณจะดูการติดตามที่กําหนดเองชื่อ loadStyling ได้ในคอนโซลประสิทธิภาพของ Firebase ในภายหลัง
10. ทำให้ใช้งานได้และเริ่มส่งรูปภาพ
ทำให้ใช้งานได้กับโฮสติ้งของ Firebase
หลังจากเพิ่มการตรวจสอบประสิทธิภาพ Firebase ลงในโค้ดแล้ว ให้ทําตามขั้นตอนต่อไปนี้เพื่อทําให้โค้ดใช้งานได้ใน Firebase Hosting
- ตรวจสอบว่าบรรทัดคำสั่งเข้าถึงไดเรกทอรี
performance-monitoring-startในพื้นที่ของแอป - ติดตั้งใช้งานไฟล์ในโปรเจ็กต์ Firebase โดยเรียกใช้คําสั่งต่อไปนี้
firebase deploy
- คอนโซลควรแสดงข้อมูลต่อไปนี้
=== 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.firebasestorage.app
✔ 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
- ไปที่เว็บแอปของคุณซึ่งตอนนี้โฮสต์โดยใช้โฮสติ้งของ Firebase โดยสมบูรณ์ที่โดเมนย่อยของ Firebase 2 โดเมนคือ
https://<projectId>.firebaseapp.comและhttps://<projectId>.web.app
ตรวจสอบว่าได้เปิดใช้การตรวจสอบประสิทธิภาพ
เปิดคอนโซล Firebase แล้วไปที่แท็บประสิทธิภาพ หากเห็นข้อความต้อนรับที่แสดง "ตรวจพบ SDK" แสดงว่าคุณผสานรวมกับ Firebase Performance Monitoring เรียบร้อยแล้ว
ส่งข้อความรูปภาพ
สร้างข้อมูลประสิทธิภาพโดยส่งรูปภาพในแอปแชท
- หลังจากลงชื่อเข้าใช้แอปแชทแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพ
- เลือกไฟล์ภาพโดยใช้เครื่องมือเลือกไฟล์
- ลองส่งรูปภาพหลายๆ รูป (ตัวอย่าง 2-3 รูปจัดเก็บไว้ใน
public/images/) เพื่อให้คุณทดสอบการกระจายเมตริกที่กำหนดเองและแอตทริบิวต์ที่กำหนดเองได้
ข้อความใหม่ควรแสดงใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก
11. ติดตามดูหน้าแดชบอร์ด
หลังจากทําให้การเผยแพร่เว็บแอปและส่งข้อความรูปภาพในฐานะผู้ใช้แล้ว คุณสามารถตรวจสอบข้อมูลประสิทธิภาพในหน้าแดชบอร์ดการตรวจสอบประสิทธิภาพ (ในคอนโซล Firebase)
เข้าถึงแดชบอร์ด
- ในคอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป
Friendly Chat - ในแผงด้านซ้าย ให้ค้นหาส่วนคุณภาพ แล้วคลิกประสิทธิภาพ
ตรวจสอบข้อมูลในอุปกรณ์
หลังจากการตรวจสอบประสิทธิภาพประมวลผลข้อมูลของแอปแล้ว คุณจะเห็นแท็บที่ด้านบนของแดชบอร์ด โปรดกลับมาตรวจสอบในภายหลังหากคุณยังไม่เห็นข้อมูลหรือแท็บใดๆ เลย
- คลิกแท็บในอุปกรณ์
- ตารางการโหลดหน้าเว็บแสดงเมตริกประสิทธิภาพต่างๆ ที่เครื่องมือตรวจสอบประสิทธิภาพรวบรวมโดยอัตโนมัติขณะที่หน้าเว็บโหลด
- ตารางระยะเวลาจะแสดงการติดตามที่กําหนดเองซึ่งคุณกําหนดไว้ในโค้ดของแอป
- คลิก saveImageMessage ในตารางระยะเวลาเพื่อตรวจสอบเมตริกที่เฉพาะเจาะจงสำหรับการติดตาม
- คลิกรวมเพื่อดูการแจกแจงขนาดรูปภาพ คุณดูเมตริกที่เพิ่มไว้เพื่อวัดขนาดรูปภาพสำหรับการติดตามที่กำหนดเองนี้ได้
- คลิกตลอดช่วงเวลาซึ่งอยู่ถัดจากรวบรวมในขั้นตอนก่อนหน้า คุณดูระยะเวลาของการติดตามที่กำหนดเองได้ คลิกดูเพิ่มเติมเพื่อดูข้อมูลที่รวบรวมโดยละเอียดยิ่งขึ้น
- ในหน้าเว็บที่เปิดขึ้น คุณสามารถแบ่งกลุ่มข้อมูลระยะเวลาตามประเภท MIME ของรูปภาพโดยคลิก imageType ระบบบันทึกข้อมูลเฉพาะนี้ไว้เนื่องจากแอตทริบิวต์ imageType ที่คุณเพิ่มลงในการติดตามที่กําหนดเอง
ตรวจสอบข้อมูลเครือข่าย
คําขอเครือข่าย HTTP/S คือรายงานที่บันทึกเวลาในการตอบสนองและขนาดของข้อมูลเพย์โหลดของการเรียกใช้เครือข่าย
- กลับไปที่หน้าจอหลักของแดชบอร์ดการตรวจสอบประสิทธิภาพ
- คลิกแท็บเครือข่ายเพื่อดูรายการคำขอเครือข่ายสำหรับเว็บแอป
- เรียกดูรายการเพื่อระบุคำขอที่ช้า และเริ่มหาวิธีแก้ไขเพื่อปรับปรุงประสิทธิภาพของแอป
12. ยินดีด้วย
คุณได้เปิดใช้ Firebase SDK สําหรับการตรวจสอบประสิทธิภาพ รวมถึงรวบรวมการติดตามอัตโนมัติและการติดตามที่กําหนดเองเพื่อวัดประสิทธิภาพจริงของแอปแชทแล้ว
สิ่งที่เราได้พูดถึง
- การเพิ่ม Firebase Performance Monitoring SDK ลงในเว็บแอป
- การเพิ่มการติดตามที่กำหนดเองลงในโค้ด
- การบันทึกเมตริกที่กําหนดเองซึ่งเชื่อมโยงกับการติดตามที่กําหนดเอง
- การแบ่งกลุ่มข้อมูลประสิทธิภาพโดยใช้แอตทริบิวต์ที่กำหนดเอง
- ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของแอป