Trải nghiệm của nhà phát triển
Sau khi đề cập đến ứng dụng mini per se, tôi muốn tập trung vào trải nghiệm của nhà phát triển đối với các nền tảng siêu ứng dụng khác nhau. Quá trình phát triển ứng dụng mini trên tất cả các nền tảng diễn ra trong IDE do các nền tảng siêu ứng dụng cung cấp miễn phí. Mặc dù có nhiều nền tảng hơn, nhưng tôi muốn tập trung vào 4 nền tảng phổ biến nhất và nền tảng thứ 5 cho Ứng dụng nhanh để so sánh.
IDE ứng dụng mini
Giống như các siêu ứng dụng, phần lớn IDE chỉ có bằng tiếng Trung. Bạn thực sự muốn đảm bảo rằng mình cài đặt phiên bản tiếng Trung chứ không phải phiên bản tiếng Anh (hoặc phiên bản ở nước ngoài) đôi khi có sẵn, vì phiên bản đó có thể không phải là phiên bản mới nhất. Nếu bạn là nhà phát triển macOS, hãy lưu ý rằng không phải tất cả IDE đều được ký. Điều này có nghĩa là macOS từ chối chạy trình cài đặt. Bạn có thể, tự chịu rủi ro, bỏ qua bước này như hướng dẫn trợ giúp của Apple.
Dự án khởi đầu ứng dụng mini
Để nhanh chóng bắt đầu phát triển ứng dụng mini, tất cả nhà cung cấp siêu ứng dụng đều cung cấp các ứng dụng minh hoạ mà bạn có thể tải xuống và kiểm thử ngay lập tức. Các ứng dụng này đôi khi cũng được tích hợp trong trình hướng dẫn "Dự án mới" của nhiều IDE.
- Bản minh hoạ WeChat
- Bản minh hoạ Alipay
- Bản minh hoạ Baidu
- Bản minh hoạ ByteDance
- Bản minh hoạ Quick App
Quy trình phát triển
Sau khi khởi chạy IDE và tải hoặc tạo ứng dụng mini (minh hoạ), bước đầu tiên luôn là đăng nhập. Thông thường, bạn chỉ cần quét mã QR bằng siêu ứng dụng (nơi bạn đã đăng nhập) do IDE tạo. Rất hiếm khi bạn phải nhập mật khẩu. Sau khi bạn đăng nhập, IDE sẽ biết danh tính của bạn và cho phép bạn bắt đầu lập trình, gỡ lỗi, kiểm thử và gửi ứng dụng của bạn để xem xét. Sau đây, bạn có thể xem ảnh chụp màn hình của 5 IDE được đề cập trong đoạn trên.
Như bạn có thể thấy, các thành phần cơ bản của tất cả IDE đều rất giống nhau. Bạn luôn có một trình soạn thảo mã
dựa trên Trình soạn thảo Monaco, cùng một dự án
cũng hỗ trợ VS Code. Trong tất cả IDE, có một trình gỡ lỗi
dựa trên giao diện người dùng Chrome DevTools với
một số sửa đổi. Bạn sẽ tìm hiểu thêm về các trình gỡ lỗi này sau (xem Trình gỡ lỗi). Các IDE per se được
triển khai dưới dạng ứng dụng NW.js hoặc Electron.
Các trình mô phỏng trong IDE được hiện thực hoá dưới dạng
thẻ <webview> NW.js hoặc
thẻ <webview> Electron, lần lượt dựa trên
thẻ <webview> Chromium. Nếu bạn quan tâm đến
nội bộ IDE, bạn thường có thể kiểm tra các IDE đó bằng Chrome DevTools bằng phím tắt
Control+Alt+I (hoặc
Command+Option+I trên máy Mac).
<webview>.
Kiểm thử và gỡ lỗi trên trình mô phỏng và thiết bị thực
Trình mô phỏng có thể so sánh với những gì bạn có thể biết từ Chrome DevTools' chế độ thiết bị. Bạn có thể mô phỏng nhiều thiết bị Android và iOS, thay đổi tỷ lệ và hướng thiết bị, nhưng cũng có thể mô phỏng nhiều trạng thái mạng, áp lực bộ nhớ, sự kiện đọc mã vạch, việc chấm dứt không mong muốn và chế độ tối.
Mặc dù trình mô phỏng tích hợp đủ để bạn cảm nhận sơ bộ về cách ứng dụng hoạt động, nhưng việc kiểm thử trên thiết bị (như với các ứng dụng web thông thường) là không thể thay thế. Bạn chỉ cần quét mã QR để kiểm thử ứng dụng mini đang trong quá trình phát triển. Ví dụ: trong ByteDance DevTools, việc quét mã QR do IDE tạo động bằng thiết bị thực sẽ dẫn đến phiên bản được lưu trữ trên đám mây của ứng dụng mini. Sau đó, bạn có thể kiểm thử ngay trên thiết bị. Cách hoạt động của ByteDance là URL đằng sau mã QR
(ví dụ) chuyển hướng đến một trang được lưu trữ
(ví dụ),
chứa các đường liên kết có lược đồ URI đặc biệt, chẳng hạn như snssdk1128://, để xem trước ứng dụng mini
trên nhiều siêu ứng dụng ByteDance như Douyin hoặc Toutiao
(đây là một ví dụ).
Các nhà cung cấp siêu ứng dụng khác không chuyển qua trang trung gian mà mở trực tiếp bản xem trước.
Một tính năng hấp dẫn hơn nữa là gỡ lỗi từ xa bản xem trước dựa trên đám mây. Sau khi chỉ cần quét mã QR đặc biệt do IDE tạo, ứng dụng mini sẽ mở trên thiết bị thực, với cửa sổ Chrome DevTools chạy trên máy tính để gỡ lỗi từ xa.
Trình gỡ lỗi
Gỡ lỗi phần tử
Trải nghiệm gỡ lỗi ứng dụng mini rất quen thuộc với bất kỳ ai đã từng làm việc với Chrome DevTools. Tuy nhiên, có một số điểm khác biệt quan trọng giúp quy trình làm việc phù hợp với ứng dụng mini. Thay vì bảng điều khiển Phần tử của Chrome DevTools' , IDE ứng dụng mini có một bảng điều khiển tuỳ chỉnh phù hợp với phương ngữ HTML cụ thể của chúng. Ví dụ: trong trường hợp WeChat, bảng điều khiển này được gọi là Wxml, viết tắt của WeiXin Markup Language. Trong Baidu DevTools, bảng điều khiển này được gọi là Phần tử Swan. ByteDance DevTools gọi nó là Bxml. Alipay đặt tên là AXML và Quick App chỉ tham chiếu bảng điều khiển này là UX. Tôi sẽ tìm hiểu sâu về các ngôn ngữ đánh dấu này sau.
<image> bằng WeChat DevTools.
Các phần tử tuỳ chỉnh bên dưới
Việc kiểm tra WebView trên thiết bị thực thông qua about://inspect/#devices
cho thấy WeChat DevTools đã cố tình che giấu sự thật. Trong đó, WeChat DevTools hiển thị
<image>, thực tế là tôi đang xem một phần tử tuỳ chỉnh có tên là <wx-image> với <div>
là phần tử con duy nhất. Điều thú vị cần lưu ý là phần tử tuỳ chỉnh này không sử dụng
Shadow DOM. Bạn sẽ tìm hiểu thêm về
các thành phần này sau.
<image> bằng WeChat DevTools cho thấy đây thực sự là phần tử tuỳ chỉnh <wx-image>.
Gỡ lỗi CSS
Một điểm khác biệt nữa là đơn vị độ dài mới rpx cho pixel thích ứng trong nhiều phương ngữ CSS
(bạn sẽ tìm hiểu thêm về đơn vị này sau). WeChat DevTools sử dụng các đơn vị độ dài CSS không phụ thuộc vào thiết bị để giúp việc phát triển cho nhiều kích thước thiết bị trở nên trực quan hơn.
200rpx 0) của một khung hiển thị bằng WeChat DevTools.
Kiểm toán hiệu suất
Hiệu suất là yếu tố quan trọng hàng đầu đối với các ứng dụng mini. Vì vậy, không có gì ngạc nhiên khi WeChat Công cụ cho nhà phát triển và một số Công cụ cho nhà phát triển khác có một công cụ kiểm tra tích hợp lấy cảm hứng từ Lighthouse. Các lĩnh vực trọng tâm của quá trình kiểm tra là Tổng số, Hiệu suất, Trải nghiệm và Phương pháp hay nhất. Bạn có thể tuỳ chỉnh khung hiển thị của IDE. Trong ảnh chụp màn hình bên dưới, tôi đã tạm thời ẩn trình soạn thảo mã để có thêm không gian màn hình cho công cụ kiểm tra.
Mô phỏng API
Thay vì yêu cầu nhà phát triển thiết lập một dịch vụ riêng biệt, việc mô phỏng các phản hồi API là một phần trực tiếp của WeChat DevTools. Thông qua giao diện dễ sử dụng, nhà phát triển có thể thiết lập các điểm cuối API và các phản hồi mô phỏng mong muốn.
Lời cảm ơn
Bài viết này được Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu xem xét.