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
หากต้องการใช้พื้นที่เก็บข้อมูลระบบคลาวด์สำหรับ Firebase โปรเจ็กต์ Firebase ของคุณต้องใช้แพ็กเกจราคาแบบจ่ายเมื่อใช้ (Blaze) ซึ่งหมายความว่าโปรเจ็กต์จะลิงก์กับบัญชีการเรียกเก็บเงินระบบคลาวด์
- บัญชีการเรียกเก็บเงินระบบคลาวด์ต้องมีวิธีการชำระเงิน เช่น บัตรเครดิต
- หากคุณเพิ่งเริ่มใช้ 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 ให้ค้นหาส่วนพัฒนาในแผงด้านซ้าย
- คลิกการตรวจสอบสิทธิ์ แล้วคลิกแท็บวิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล)
- เปิดใช้ผู้ให้บริการลงชื่อเข้าใช้ Google แล้วคลิกบันทึก
ตั้งค่า Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
วิธีตั้งค่า Cloud Firestore ในโปรเจ็กต์ Firebase มีดังนี้
- ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกฐานข้อมูล Firestore
- คลิกสร้างฐานข้อมูล
- ตั้งค่ารหัสฐานข้อมูลเป็น
(default) - เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้ - คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎการรักษาความปลอดภัย
ในภายหลังในโค้ดแล็บนี้ คุณจะเพิ่มกฎการรักษาความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสําหรับฐานข้อมูล - คลิกสร้าง
ตั้งค่า Cloud Storage for Firebase
เว็บแอปใช้ Cloud Storage for Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ
วิธีตั้งค่า Cloud Storage for Firebase ในโปรเจ็กต์ Firebase มีดังนี้
- ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายบิลด์ แล้วเลือกพื้นที่เก็บข้อมูล
- คลิกเริ่มต้นใช้งาน
- เลือกตำแหน่งสำหรับที่เก็บข้อมูล Storage เริ่มต้น
ที่เก็บข้อมูลในUS-WEST1,US-CENTRAL1และUS-EAST1สามารถใช้แพ็กเกจ"ฟรีตลอด" สำหรับ Google Cloud Storage ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage - คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎการรักษาความปลอดภัย
ในภายหลังในโค้ดแล็บนี้ คุณจะต้องเพิ่มกฎการรักษาความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล - คลิกสร้าง
4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase
อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Firebase ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อแสดงเว็บแอปในเครื่องได้ รวมถึงทำให้เว็บแอปใช้งานได้ในโปรเจ็กต์ Firebase
- ติดตั้ง CLI โดยทําตามวิธีการเหล่านี้ในเอกสาร Firebase
- ยืนยันว่าติดตั้ง CLI อย่างถูกต้องแล้วโดยเรียกใช้คําสั่งต่อไปนี้ในเทอร์มินัล
firebase --version
ตรวจสอบว่า Firebase CLI เป็นเวอร์ชัน v8.0.0 ขึ้นไป
- ให้สิทธิ์ Firebase CLI โดยการเรียกใช้คำสั่งต่อไปนี้
firebase login
เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าของแอปสำหรับโฮสติ้ง Firebase จากไดเรกทอรีในเครื่องของแอป (ที่เก็บข้อมูลที่คุณโคลนไว้ก่อนหน้านี้ในโค้ดแล็บ) แต่เราต้องเชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase เพื่อดึงข้อมูลการกําหนดค่า
- ตรวจสอบว่าบรรทัดคำสั่งเข้าถึงไดเรกทอรี
performance-monitoring-startในพื้นที่ของแอป - เชื่อมโยงแอปกับโปรเจ็กต์ Firebase โดยเรียกใช้คําสั่งต่อไปนี้
firebase use --add
- เมื่อได้รับข้อความแจ้ง ให้เลือกรหัสโปรเจ็กต์ แล้วตั้งชื่อแทนให้โปรเจ็กต์ Firebase
การใช้อีเมลแทนจะมีประโยชน์หากคุณมีสภาพแวดล้อมหลายอย่าง (เวอร์ชันที่ใช้งานจริง การทดสอบ เป็นต้น) แต่สำหรับโค้ดแล็บนี้ เราจะใช้อีเมลแทน default
- ทําตามวิธีการที่เหลือในบรรทัดคําสั่ง
5. ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase
การผสานรวมกับ SDK ของ Firebase Performance Monitoring สําหรับเว็บทําได้หลายวิธี (ดูรายละเอียดในเอกสารประกอบ) ในโค้ดแล็บนี้ เราจะเปิดใช้การตรวจสอบประสิทธิภาพจาก 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 คุณจึงนําเข้าสคริปต์พิเศษที่จะทําการกําหนดค่านี้ให้คุณได้ สําหรับโค้ดแล็บนี้ เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์
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 Performance Monitoring หากต้องการรวบรวมการติดตามอัตโนมัติเท่านั้น ให้ไปที่ส่วน "ทำให้ใช้งานได้และเริ่มส่งรูปภาพ"
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
SDK การตรวจสอบประสิทธิภาพ Firebase ได้รับการออกแบบให้โหลดแบบไม่พร้อมกัน เพื่อไม่ให้ส่งผลเสียต่อประสิทธิภาพของเว็บแอปขณะโหลดหน้าเว็บ 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 Hosting อย่างเต็มรูปแบบแล้วที่โดเมนย่อย 2 รายการของ Firebase ของคุณเอง ได้แก่
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 ลงในเว็บแอป
- การเพิ่มการติดตามที่กําหนดเองลงในโค้ด
- การบันทึกเมตริกที่กําหนดเองซึ่งเชื่อมโยงกับการติดตามที่กําหนดเอง
- แบ่งกลุ่มข้อมูลประสิทธิภาพโดยใช้แอตทริบิวต์ที่กำหนดเอง
- ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของแอป