1. Tổng quan
Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng tính năng Giám sát hiệu suất Firebase để đo lường hiệu suất của ứng dụng web nhắn tin. Hãy truy cập vào https://fireperf-friendlychat.web.app/ để xem bản minh hoạ trực tiếp.
Kiến thức bạn sẽ học được
- Cách thêm tính năng Giám sát hiệu suất Firebase vào ứng dụng web của bạn để nhận được các chỉ số ngay lập tức (tải trang và yêu cầu mạng).
- Cách đo lường một đoạn mã cụ thể bằng dấu vết tuỳ chỉnh.
- Cách ghi lại các chỉ số tuỳ chỉnh bổ sung gắn liền với một dấu vết tuỳ chỉnh.
- Cách phân đoạn thêm dữ liệu hiệu suất bằng các thuộc tính tuỳ chỉnh.
- Cách sử dụng trang tổng quan về giám sát hiệu suất để tìm hiểu hiệu suất của ứng dụng web.
Bạn cần có
2. Nhận mã mẫu
Sao chép kho lưu trữ GitHub của lớp học lập trình từ dòng lệnh:
git clone https://github.com/firebase/codelab-friendlychat-web
Ngoài ra, nếu chưa cài đặt git, bạn có thể tải kho lưu trữ này xuống dưới dạng tệp zip.
Nhập ứng dụng khởi đầu
Bằng cách sử dụng IDE, hãy mở hoặc nhập thư mục 📁 performance-monitoring-start từ kho lưu trữ đã sao chép. Thư mục 📁 performance-monitoring-start này chứa mã khởi đầu cho lớp học lập trình này, một ứng dụng web nhắn tin.
3. Tạo và thiết lập dự án Firebase
Tạo dự án Firebase
- Trong bảng điều khiển của Firebase, hãy nhấp vào Thêm dự án.
- Đặt tên cho dự án Firebase
FriendlyChat.
Ghi nhớ mã dự án cho dự án Firebase của bạn.
- Nhấp vào Create Project (Tạo dự án).
Thêm ứng dụng web Firebase vào dự án
- Nhấp vào biểu tượng web
để tạo ứng dụng web Firebase mới. - Đăng ký ứng dụng bằng biệt hiệu
Friendly Chat, sau đó chọn hộp bên cạnh Cũng thiết lập tính năng Lưu trữ Firebase cho ứng dụng này. - Nhấp vào Đăng ký ứng dụng.
- Nhấp qua các bước còn lại. Bây giờ, bạn không cần làm theo hướng dẫn trên màn hình; chúng sẽ được đề cập trong các bước sau của lớp học lập trình này.
Bật tính năng xác thực bằng tính năng đăng nhập bằng Google cho Firebase
Để cho phép người dùng đăng nhập vào ứng dụng nhắn tin bằng Tài khoản Google của họ, chúng tôi sẽ sử dụng phương thức đăng nhập là Google.
Bạn sẽ cần bật tính năng đăng nhập bằng Google:
- Trong bảng điều khiển của Firebase, hãy tìm phần Phát triển trên bảng điều khiển bên trái.
- Nhấp vào Xác thực, rồi nhấp vào thẻ Phương thức đăng nhập ( chuyển đến bảng điều khiển).
- Bật nhà cung cấp dịch vụ đăng nhập Google, sau đó nhấp vào Save (Lưu).
Bật Cloud Firestore
Ứng dụng web sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.
Bạn sẽ cần bật Cloud Firestore:
- Trong phần Phát triển của bảng điều khiển Firebase, hãy nhấp vào Cơ sở dữ liệu.
- Nhấp vào Create Database (Tạo cơ sở dữ liệu) trong ngăn Cloud Firestore.
- Chọn tuỳ chọn Bắt đầu ở chế độ thử nghiệm, rồi nhấp vào Bật sau khi đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.
Mã khởi đầu cho lớp học lập trình này có các quy tắc an toàn hơn. Chúng ta sẽ triển khai các công cụ này sau trong lớp học lập trình này.
Bật Cloud Storage
Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ hình ảnh.
Bạn sẽ cần bật Cloud Storage:
- Trong phần Phát triển của bảng điều khiển của Firebase, hãy nhấp vào Bộ nhớ.
- Nhấp vào Bắt đầu.
- Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật cho dự án Firebase của bạn, sau đó nhấp vào Tôi hiểu.
Đoạn mã khởi đầu bao gồm quy tắc bảo mật cơ bản mà chúng ta sẽ triển khai sau trong lớp học lập trình này.
4. Cài đặt giao diện dòng lệnh Firebase
Giao diện dòng lệnh (CLI) Firebase cho phép bạn sử dụng tính năng Lưu trữ Firebase để phân phát ứng dụng web cục bộ cũng như triển khai ứng dụng web cho dự án Firebase của bạn.
- Cài đặt CLI bằng cách làm theo các hướng dẫn này trong tài liệu về Firebase.
- Xác minh rằng CLI đã được cài đặt đúng cách bằng cách chạy lệnh sau trong cửa sổ dòng lệnh:
firebase --version
Đảm bảo rằng phiên bản Giao diện dòng lệnh (CLI) của Firebase là phiên bản 8.0.0 trở lên.
- Cho phép giao diện dòng lệnh (CLI) của Firebase bằng cách chạy lệnh sau:
firebase login
Chúng ta đã thiết lập mẫu ứng dụng web để kéo cấu hình của ứng dụng cho tính năng Lưu trữ Firebase từ thư mục cục bộ của ứng dụng (kho lưu trữ mà bạn đã sao chép trước đó trong lớp học lập trình). Tuy nhiên, để lấy cấu hình, chúng tôi cần liên kết ứng dụng với dự án Firebase của bạn.
- Đảm bảo dòng lệnh của bạn đang truy cập vào thư mục
performance-monitoring-startcục bộ của ứng dụng. - Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:
firebase use --add
- Khi được nhắc, hãy chọn mã dự án, sau đó đặt bí danh cho dự án Firebase của bạn.
Bí danh sẽ hữu ích nếu bạn có nhiều môi trường (sản xuất, thử nghiệm, v.v.). Tuy nhiên, đối với lớp học lập trình này, hãy sử dụng bí danh của default.
- Làm theo các hướng dẫn còn lại trong dòng lệnh.
5. Tích hợp với tính năng Giám sát hiệu suất Firebase
Có nhiều cách để tích hợp với SDK giám sát hiệu suất Firebase dành cho web (tham khảo tài liệu này để biết thông tin chi tiết). Trong lớp học lập trình này, chúng ta sẽ bật tính năng giám sát hiệu suất trong URL lưu trữ.
Thêm tính năng theo dõi hiệu suất và khởi chạy Firebase
- Mở tệp
src/index.js, sau đó thêm dòng sau bên dướiTODOđể thêm SDK giám sát hiệu suất Firebase.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- Chúng ta cũng cần khởi chạy SDK Firebase bằng một đối tượng cấu hình chứa thông tin về dự án Firebase và ứng dụng web mà chúng ta muốn sử dụng. Vì chúng tôi đang sử dụng tính năng Lưu trữ Firebase, nên bạn có thể nhập một tập lệnh đặc biệt để thực hiện việc định cấu hình này cho bạn. Đối với lớp học lập trình này, chúng tôi đã thêm dòng sau cho bạn ở cuối tệp
public/index.html, nhưng hãy kiểm tra kỹ để đảm bảo dòng này ở đó.
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- Trong tệp
src/index.js, hãy thêm dòng sau bên dướiTODOđể khởi tạo tính năng theo dõi hiệu suất.
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
Giờ đây, chức năng Giám sát hiệu suất sẽ tự động thu thập các chỉ số về tải trang và yêu cầu mạng cho bạn khi người dùng sử dụng trang web của bạn! Tham khảo tài liệu để tìm hiểu thêm về dấu vết tải trang tự động.
Thêm thư viện polyfill độ trễ đầu vào đầu tiên
Độ trễ đầu vào đầu tiên rất hữu ích vì trình duyệt phản hồi tương tác của người dùng sẽ cho người dùng ấn tượng đầu tiên về khả năng phản hồi của ứng dụng.
Độ trễ khi nhập lần đầu tiên bắt đầu khi người dùng tương tác lần đầu với một phần tử trên trang, chẳng hạn như nhấp vào một nút hoặc siêu liên kết. Nó dừng ngay sau khi trình duyệt có thể phản hồi nội dung nhập, nghĩa là trình duyệt không tải hoặc phân tích cú pháp nội dung của bạn.
Bạn không bắt buộc phải sử dụng thư viện polyfill này để tích hợp giám sát hiệu suất.
Mở tệp public/index.html, sau đó huỷ nhận xét dòng sau.
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>
Lúc này, bạn đã hoàn tất quy trình tích hợp với tính năng Giám sát hiệu suất Firebase trong mã của mình!
Trong các bước sau, bạn sẽ tìm hiểu về cách thêm dấu vết tùy chỉnh bằng tính năng Giám sát hiệu suất Firebase. Nếu bạn chỉ muốn thu thập các dấu vết tự động, hãy chuyển đến phần "Triển khai và bắt đầu gửi hình ảnh" .
6. Thêm dấu vết tuỳ chỉnh vào ứng dụng
Tính năng Giám sát hiệu suất cho phép bạn tạo dấu vết tuỳ chỉnh. Dấu vết tuỳ chỉnh là một báo cáo trong khoảng thời gian của một khối thực thi trong ứng dụng. Bạn xác định điểm bắt đầu và kết thúc của một dấu vết tuỳ chỉnh bằng cách sử dụng API do SDK cung cấp.
- Trong tệp
src/index.js, hãy lấy đối tượng hiệu suất, sau đó tạo dấu vết tuỳ chỉnh để tải tin nhắn hình ảnh lên.
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- Để ghi lại một dấu vết tuỳ chỉnh, bạn cần chỉ định điểm bắt đầu và điểm kết thúc cho dấu vết đó. Bạn có thể coi dấu vết là một đồng hồ hẹn giờ.
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
Bạn đã xác định thành công một dấu vết tuỳ chỉnh! Sau khi triển khai mã, thời lượng của dấu vết tuỳ chỉnh sẽ được ghi lại nếu người dùng gửi tin nhắn hình ảnh. Biểu đồ này sẽ cho bạn biết người dùng ngoài đời thực mất bao lâu để gửi hình ảnh trong ứng dụng trò chuyện của bạn.
7. Thêm chỉ số tuỳ chỉnh vào ứng dụng.
Bạn có thể thiết lập thêm một dấu vết tuỳ chỉnh để ghi lại chỉ số tuỳ chỉnh cho các sự kiện liên quan đến hiệu suất xảy ra trong phạm vi của chỉ số đó. Ví dụ: Bạn có thể sử dụng một chỉ số để điều tra xem kích thước của một hình ảnh có ảnh hưởng đến thời gian tải lên hay không đối với dấu vết tuỳ chỉnh mà chúng ta đã xác định ở bước cuối cùng.
- Tìm dấu vết tuỳ chỉnh ở bước trước (được xác định trong tệp
src/index.js). - Thêm dòng sau bên dưới
TODOđể ghi lại kích thước của hình ảnh đã tải lên.
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
Chỉ số này cho phép tính năng giám sát hiệu suất ghi lại thời lượng theo dõi tuỳ chỉnh cũng như kích thước hình ảnh đã tải lên.
8. Thêm thuộc tính tùy chỉnh vào ứng dụng của bạn
Dựa trên các bước trước, bạn cũng có thể thu thập thuộc tính tùy chỉnh trên dấu vết tùy chỉnh của mình. Thuộc tính tuỳ chỉnh có thể giúp phân đoạn dữ liệu theo các danh mục cụ thể cho ứng dụng của bạn. Ví dụ: bạn có thể thu thập loại MIME của tệp hình ảnh để điều tra xem loại MIME có thể ảnh hưởng như thế nào đến hiệu suất.
- Sử dụng dấu vết tuỳ chỉnh được xác định trong tệp
src/index.js. - Thêm dòng sau bên dưới
TODOđể ghi lại loại MIME của hình ảnh đã tải lên.
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
Thuộc tính này cho phép chức năng giám sát hiệu suất phân loại thời lượng theo dõi tuỳ chỉnh dựa trên loại hình ảnh đã tải lên.
9. [Mở rộng] Thêm dấu vết tuỳ chỉnh bằng API Thời gian người dùng
SDK giám sát hiệu suất Firebase được thiết kế để có thể tải không đồng bộ nên sẽ không ảnh hưởng tiêu cực đến hiệu suất của ứng dụng web trong quá trình tải trang. Trước khi SDK được tải, bạn sẽ không thấy API Giám sát hiệu suất Firebase. Trong trường hợp này, bạn vẫn có thể thêm dấu vết tuỳ chỉnh bằng cách sử dụng API Thời gian người dùng. SDK hiệu suất của Firebase sẽ nhận biết thời lượng từ measure() và ghi lại chúng dưới dạng dấu vết tuỳ chỉnh.
Chúng ta sẽ đo lường thời lượng tải tập lệnh định kiểu ứng dụng bằng API Thời gian người dùng.
- Trong tệp
public/index.html, hãy thêm dòng sau để đánh dấu thời điểm bắt đầu tải tập lệnh định kiểu ứng dụng.
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- Thêm các dòng sau để đánh dấu bước kết thúc lượt tải tập lệnh định kiểu ứng dụng, cũng như để đo lường thời lượng từ lúc bắt đầu đến khi kết thúc.
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>
Mục nhập bạn đã tạo tại đây sẽ được Giám sát hiệu suất Firebase thu thập tự động. Sau này, bạn có thể tìm thấy dấu vết tuỳ chỉnh có tên là loadStyling trong bảng điều khiển Hiệu suất của Firebase.
10. Triển khai và bắt đầu gửi hình ảnh
Triển khai cho tính năng Lưu trữ Firebase
Sau khi thêm tính năng Giám sát hiệu suất Firebase vào mã, hãy thực hiện theo các bước sau để triển khai mã vào dịch vụ Lưu trữ Firebase:
- Đảm bảo dòng lệnh của bạn đang truy cập vào thư mục
performance-monitoring-startcục bộ của ứng dụng. - Triển khai các tệp của bạn cho dự án Firebase bằng cách chạy lệnh sau:
firebase deploy
- Bảng điều khiển sẽ hiển thị các thông tin sau:
=== 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
- Truy cập vào ứng dụng web hiện được lưu trữ hoàn toàn bằng tính năng Lưu trữ Firebase tại hai trong số các miền con Firebase của riêng bạn:
https://<projectId>.firebaseapp.comvàhttps://<projectId>.web.app.
Xác minh rằng bạn đã bật tính năng giám sát hiệu suất
Mở bảng điều khiển của Firebase rồi chuyển đến thẻ Hiệu suất. Nếu bạn thấy thông báo chào mừng có nội dung "Đã phát hiện SDK", tức là bạn đã tích hợp thành công với tính năng Giám sát hiệu suất Firebase!
Gửi tin nhắn hình ảnh
Tạo một số dữ liệu về hiệu suất bằng cách gửi hình ảnh trong ứng dụng nhắn tin.
- Sau khi đăng nhập vào ứng dụng nhắn tin, hãy nhấp vào nút tải hình ảnh lên
. - Chọn một tệp hình ảnh bằng cách sử dụng bộ chọn tệp.
- Hãy thử gửi nhiều hình ảnh (một vài mẫu được lưu trữ trong
public/images/) để bạn có thể kiểm tra việc phân phối của các chỉ số tuỳ chỉnh và thuộc tính tuỳ chỉnh.
Các tin nhắn mới sẽ xuất hiện trong giao diện người dùng của ứng dụng cùng với những hình ảnh bạn đã chọn.
11. Giám sát trang tổng quan
Sau khi triển khai ứng dụng web và gửi tin nhắn hình ảnh với tư cách là người dùng, bạn có thể xem lại dữ liệu hiệu suất trong trang tổng quan theo dõi hiệu suất (trong bảng điều khiển của Firebase).
Truy cập vào trang tổng quan
- Trong bảng điều khiển của Firebase, hãy chọn dự án có ứng dụng
Friendly Chatcủa bạn. - Trong bảng điều khiển bên trái, hãy tìm mục Chất lượng rồi nhấp vào Hiệu suất.
Kiểm tra dữ liệu trên thiết bị
Sau khi tính năng theo dõi hiệu suất xử lý dữ liệu của ứng dụng, bạn sẽ thấy các thẻ ở đầu trang tổng quan. Hãy nhớ kiểm tra lại sau nếu bạn không thấy dữ liệu hoặc thẻ nào.
- Nhấp vào thẻ Trên thiết bị.
- Bảng Số lượt tải trang hiển thị nhiều chỉ số hiệu suất mà tính năng theo dõi hiệu suất tự động thu thập khi trang của bạn đang tải.
- Bảng Thời lượng hiển thị mọi dấu vết tùy chỉnh mà bạn đã xác định trong mã của ứng dụng.
- Nhấp vào saveImageMessage trong bảng Durations (Thời lượng) để xem lại các chỉ số cụ thể cho dấu vết.
- Nhấp vào Tổng hợp để xem lại việc phân phối kích thước hình ảnh. Bạn có thể xem chỉ số mà bạn đã thêm để đo kích thước hình ảnh cho dấu vết tuỳ chỉnh này.
- Nhấp vào Theo thời gian bên cạnh mục Tổng hợp trong bước trước. Bạn cũng có thể xem Thời lượng của dấu vết tuỳ chỉnh. Nhấp vào Xem thêm để xem xét chi tiết hơn về dữ liệu đã thu thập.
- Trong trang mở ra, bạn có thể phân đoạn dữ liệu thời lượng theo loại MIME của hình ảnh bằng cách nhấp vào imageType. Dữ liệu cụ thể này đã được ghi lại do thuộc tính imageType mà bạn đã thêm vào dấu vết tuỳ chỉnh của mình.
Kiểm tra dữ liệu mạng
Yêu cầu mạng HTTP/S là một báo cáo ghi lại thời gian phản hồi và kích thước tải trọng của lệnh gọi mạng.
- Quay lại màn hình chính của trang tổng quan giám sát hiệu suất.
- Nhấp vào thẻ Network (Mạng) để xem danh sách các mục nhập yêu cầu mạng cho ứng dụng web.
- Hãy duyệt qua các yêu cầu đó để xác định các yêu cầu bị chậm và bắt đầu tìm cách khắc phục để cải thiện hiệu suất của ứng dụng!
12. Xin chúc mừng!
Bạn đã bật Firebase SDK để theo dõi hiệu suất và thu thập dấu vết tự động cũng như dấu vết tuỳ chỉnh để đo lường hiệu suất thực tế của ứng dụng nhắn tin!
Nội dung đã đề cập:
- Thêm SDK giám sát hiệu suất Firebase vào ứng dụng web của bạn.
- Thêm dấu vết tuỳ chỉnh vào mã của bạn.
- Ghi lại các chỉ số tuỳ chỉnh gắn với dấu vết tuỳ chỉnh.
- Phân đoạn dữ liệu hiệu suất bằng thuộc tính tuỳ chỉnh.
- Nắm được cách sử dụng trang tổng quan về giám sát hiệu suất để thu thập thông tin chi tiết về hiệu suất của ứng dụng.