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

Thomas Steiner

Trải nghiệm của nhà phát triển

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.

• Công cụ cho nhà phát triển của WeChat
• Công cụ cho nhà phát triển của Alipay
• Công cụ của Baidu
• Công cụ của ByteDance
• Công cụ cho nhà phát triển ứng dụng nhanh

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.

• Bản minh hoạ trên WeChat
• Bản minh hoạ Alipay
• Bản minh hoạ Baidu
• Bản minh hoạ của ByteDance
• Bản minh hoạ Ứng dụng nhanh

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.

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).

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.

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.

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.

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> có <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.

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 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.

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.

Xác nhận

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