Công cụ cho nhà phát triển ứng dụng nhỏ

Giờ đây, khi đã đề cập đến các ứng dụng nhỏ từng, tôi muốn tập trung vào trải nghiệm của nhà phát triển đối với nhiều nền tảng ứng dụng cao cấp khác nhau. Quá trình phát triển ứng dụng nhỏ trên tất cả nền tảng diễn ra trong các IDE được các nền tảng ứng dụng cao cấp miễn phí. Mặc dù có nhiều ví dụ khác, tôi muốn tập trung vào 4 giải pháp phổ biến nhất và 1/5 là ứng dụng nhanh để so sánh.

IDE cho ứng dụng nhỏ

Giống như các ứng dụng cao cấp, phần lớn IDE chỉ có sẵn bằng tiếng Trung. Bạn thực sự muốn đảm bảo 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 tiếng nước ngoài) đôi khi có sẵn, vì phiên bản này có thể chưa 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 IDE nào cũng được ký, nghĩa là macOS sẽ 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 theo quy trình trợ giúp của Apple.

Dự án khởi đầu cho ứng dụng nhỏ

Để bắt đầu nhanh chóng phát triển ứng dụng thu nhỏ, tất cả các nhà cung cấp ứng dụng cấp cao đều cung cấp các ứng dụng minh hoạ có thể tải xuống và kiểm thử ngay lập tức. Đôi khi, các ứng dụng này cũng được tích hợp vào trình hướng dẫn "Dự án mới" của nhiều IDE.

Luồng phát triển

Sau khi chạy IDE và tải hoặc tạo một ứng dụng nhỏ (bản 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 ứng dụng cấp cao (nơi bạn đã đăng nhập) do IDE tạo ra. Rất hiếm khi bạn phải nhập mật khẩu. Sau khi bạn đăng nhập, IDE 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 đi xem xét. Sau đây, bạn có thể thấy ảnh chụp màn hình của 5 IDE được đề cập ở đoạn trên.

Cửa sổ ứng dụng Công cụ của WeChat hiển thị trình mô phỏng, trình soạn thảo mã và trình gỡ lỗi.
Công cụ của Công cụ cho nhà phát triển WeChat có trình mô phỏng, trình soạn thảo mã và trình gỡ lỗi.
Cửa sổ ứng dụng Công cụ cho nhà phát triển của Alipay hiển thị trình soạn thảo mã, trình mô phỏng và trình gỡ lỗi.
Công cụ cho nhà phát triển của Alipay có trình soạn thảo mã, trình mô phỏng và trình gỡ lỗi.
Cửa sổ ứng dụng Công cụ của Baidu cho công cụ cho thấy trình mô phỏng, trình soạn thảo mã và trình gỡ lỗi.
Công cụ của Baidu cho nhà phát triển với trình mô phỏng, trình soạn thảo mã và trình gỡ lỗi.
Cửa sổ ứng dụng Công cụ của ByteDance cho thấy trình mô phỏng, trình soạn thảo mã và trình gỡ lỗi.
Công cụ của ByteDance cho nhà phát triển có trình mô phỏng, trình soạn thảo mã và trình gỡ lỗi.
Cửa sổ ứng dụng Công cụ của ứng dụng nhanh hiển thị trình soạn thảo mã, trình mô phỏng và trình gỡ lỗi.
Công cụ của ứng dụng nhanh dành cho nhà phát triển có trình soạn thảo mã, trình mô phỏng và trình gỡ lỗi.

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 Monaco Editor, chính dự án đó cũng hỗ trợ Mã VS. Trong tất cả các IDE, có một trình gỡ lỗi dựa trên giao diện người dùng của Công cụ của Chrome cho nhà phát triển với một số nội dung sửa đổi, thêm nội dung sửa đổi sau (xem phần Trình gỡ lỗi). Các IDE theo từng phiên bản được triển khai dưới dạng NW.js hoặc ứng dụng Electron, trình mô phỏng trong IDE được hiện thực hoá dưới dạng thẻ <webview> NW.js hoặc thẻ Electron <webview>, do đó dựa trên thẻ <webview> Chromium. Nếu quan tâm đến các thành phần bên trong IDE, thông thường, bạn chỉ cần kiểm tra các thành phần này bằng Công cụ của Chrome cho nhà phát triển bằng phím tắt Control+Alt+I (hoặc Command+Option+I trên máy Mac).

Công cụ của Chrome cho nhà phát triển được dùng để kiểm tra Công cụ cho nhà phát triển của Baidu và cho thấy thẻ webview của trình mô phỏng trong bảng điều khiển Phần tử của Công cụ của Chrome cho nhà phát triển.
Khi kiểm tra Công cụ cho nhà phát triển của Baidu bằng Công cụ của Chrome cho nhà phát triển, chúng tôi nhận thấy trình mô phỏng được nhận dạng là thẻ <webview> electron.

Trình mô phỏng cũng như hoạt động kiểm thử và gỡ lỗi trên thiết bị thực

Trình mô phỏng tương đương với những gì bạn có thể biết từ chế độ thiết bị của Công cụ của Chrome cho nhà phát triển. 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 mô phỏng nhiều trạng thái mạng, áp lực bộ nhớ, sự kiện đọc mã vạch, trường hợp 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 sẵn đủ để bạn nắm được cách hoạt động của ứng dụng, nhưng bạn không thể thay thế việc kiểm thử trên thiết bị (như với các ứng dụng web thông thường). Bạn chỉ cần quét mã QR để kiểm thử một ứng dụng nhỏ đang trong quá trình phát triển. Ví dụ: trong Công cụ cho nhà phát triển ByteDance, việc quét mã QR do IDE tự động tạo bằng thiết bị thực sẽ dẫn đến phiên bản ứng dụng nhỏ được lưu trữ trên đám mây và sau đó có thể kiểm thử ngay trên thiết bị. Cách hoạt động của ByteDance là URL phía 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 như snssdk1128://, để xem trước ứng dụng nhỏ trên nhiều ứng dụng ByteDance khác nhau như Douyin hoặc Toutao (đây là ví dụ). Các nhà cung cấp siêu ứng dụng khác không trải qua trang trung gian mà mở trực tiếp bản xem trước.

Công cụ ByteDance cho nhà phát triển hiển thị một mã QR mà người dùng có thể quét bằng ứng dụng Douyin để xem ứng dụng nhỏ hiện tại trên thiết bị của họ.
Công cụ của ByteDance cho nhà phát triển hiển thị một mã QR mà người dùng có thể quét bằng ứng dụng Douyin để kiểm tra ngay trên thiết bị.
Trang đích trung gian để xem trước một ứng dụng nhỏ của ByteDance trong nhiều ứng dụng cao cấp của công ty. Trang này mở trong một trình duyệt thông thường dành cho máy tính để phục vụ quá trình đảo ngược kỹ thuật.
Trang đích ByteDance trung gian để xem trước một ứng dụng nhỏ (mở trên trình duyệt dành cho máy tính để cho thấy flow).

Một tính năng hấp dẫn hơn nữa là gỡ lỗi từ xa xem trước dựa trên đám mây. Sau khi chỉ quét mã QR đặc biệt do IDE tạo, ứng dụng nhỏ sẽ mở ra trên thiết bị thực, với cửa sổ Chrome DevTools đang chạy trên máy tính để gỡ lỗi từ xa.

Một chiếc điện thoại di động chạy một ứng dụng thu nhỏ, trong đó các phần của giao diện người dùng được làm nổi bật bằng trình gỡ lỗi Công cụ cho nhà phát triển ByteDance chạy trên máy tính xách tay đang kiểm tra giao diện người dùng.
Gỡ lỗi từ xa không dây cho một ứng dụng nhỏ trên thiết bị thực bằng Công cụ cho nhà phát triển ByteDance.

Trình gỡ lỗi

Gỡ lỗi phần tử

Trải nghiệm gỡ lỗi ứng dụng nhỏ rất quen thuộc với bất kỳ ai đã từng làm việc với Công cụ cho nhà phát triển của Chrome. 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 này phù hợp với các ứng dụng thu nhỏ. Thay vì bảng điều khiển Phần tử của Công cụ của Chrome cho nhà phát triển, các IDE ứng dụng nhỏ có một bảng điều khiển tuỳ chỉnh được điều chỉnh theo phương ngữ HTML cụ thể của chúng. Ví dụ: trong trường hợp WeChat, bảng điều khiển có tên là Wxml, là chữ viết tắt của Ngôn ngữ đánh dấu WeiXin. Trong Công cụ của Baidu, công cụ này được gọi là Phần tử thiên nga. Công cụ cho nhà phát triển của ByteDance gọi Bxml. Alipay đặt tên cho giao diện này là AXML và Ứng dụng nhanh sẽ tham chiếu bảng điều khiển chỉ đơn giản là trải nghiệm người dùng. Tôi sẽ tìm hiểu sâu hơn về các ngôn ngữ đánh dấu này sau.

Kiểm tra hình ảnh bằng bảng điều khiển &quot;Wxml&quot; của Công cụ cho nhà phát triển WeChat. Cột này cho biết rằng thẻ đang được sử dụng là một thẻ &quot;hình ảnh&quot;.
Kiểm tra phần tử <image> bằng Công cụ cho nhà phát triển của WeChat.

Phần tử tuỳ chỉnh nâng cao

Kiểm tra WebView trên một thiết bị thực thông qua about://inspect/#devices cho thấy rằng Công cụ cho nhà phát triển của WeChat đang cố ý che giấu sự thật. Trong trường hợp Công cụ cho nhà phát triển của WeChat hiển thị <image>, tôi đang xem xét thực tế một phần tử tuỳ chỉnh có tên là <wx-image><div> là phần tử con duy nhất của nó. Bạn cần lưu ý rằng phần tử tuỳ chỉnh này không sử dụng Shadow DOM. Bạn có thể tìm hiểu thêm về các thành phần này sau.

Kiểm tra ứng dụng WeChat mini đang chạy trên thiết bị thực bằng Công cụ của Chrome cho nhà phát triển. Trong khi Công cụ của Công cụ cho nhà phát triển của WeChat báo cáo rằng tôi đang xem một thẻ &quot;hình ảnh&quot;, Công cụ của Chrome cho thấy tôi thực sự đang xử lý một phần tử tuỳ chỉnh &quot;hình ảnh wx&quot;.
Khi kiểm tra một phần tử <image> bằng Công cụ của WeChat cho thấy phần tử đó thực sự là một 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ữ của CSS (bạn sẽ tìm hiểu thêm về bài học này sau). Công cụ của WeChat sử dụng các đơn vị độ dài CSS độc lập với 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.

Kiểm tra một khung hiển thị có khoảng đệm trên cùng và dưới cùng được chỉ định là &quot;200rpx&quot; trong Công cụ cho nhà phát triển của WeChat.
Kiểm tra khoảng đệm được chỉ định trong pixel thích ứng (200rpx 0) của một chế độ xem bằng Công cụ cho nhà phát triển của WeChat.

Kiểm tra hiệu suất

Hiệu suất là ưu tiên hàng đầu đối với các ứng dụng nhỏ, vì vậy, không có gì ngạc nhiên khi Công cụ của WeChat và một số Công cụ cho nhà phát triển khác có công cụ kiểm tra lấy cảm hứng từ Lighthouse được tích hợp. Các khía cạnh trọng tâm của quy trình kiểm tra là Tổng số, Hiệu suất, Trải nghiệm và Các phương pháp hay nhất. Bạn có thể tuỳ chỉnh chế độ xem 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 trên màn hình cho công cụ kiểm tra.

Chạy kiểm tra hiệu suất bằng công cụ kiểm tra tích hợp. Các điểm số này cho biết Tổng số, Hiệu suất, Trải nghiệm và Phương pháp hay nhất (mỗi điểm 100/100).
Công cụ kiểm tra tích hợp sẵn trong Công cụ của WeChat cho thấy các chỉ số Tổng số, Hiệu suất, Trải nghiệm và Phương pháp hay nhất.

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, việc mô phỏng phản hồi của API trực tiếp thuộc Công cụ của WeChat cho nhà phát triển. Thông qua một 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à phản hồi mô phỏng mong muốn.

Thiết lập phản hồi mô phỏng cho một điểm cuối API trong Công cụ cho nhà phát triển của WeChat.
Tính năng mô phỏng phản hồi API tích hợp của Công cụ cho nhà phát triển của WeChat.

Xác nhận

Bài viết này đã được Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent và Keith Gu đánh giá.