Zalo Mini App Extension là tiện ích mở rộng dành cho Visual Studio Code, hỗ trợ nhà phát triển xây dựng và quản lý dự án Zalo Mini App ngay trong môi trường lập trình quen thuộc. Thông qua Extension, lập trình viên có thể thực hiện nhiều thao tác quan trọng như tạo dự án mới, khởi động môi trường phát triển, xem trước ứng dụng, đóng gói mã nguồn và xuất bản Mini App lên nền tảng Zalo. Bài viết dưới đây, Abenla sẽ hướng dẫn chi tiết cách sử dụng Extension Zalo Mini App.

Zalo Mini App Extension là gì?

Zalo Mini App Extension là extension được tích hợp trên Visual Studio Code, cung cấp các công cụ hỗ trợ trực tiếp cho quá trình phát triển Zalo Mini App. Thay vì phải sử dụng nhiều công cụ riêng lẻ, nhà phát triển có thể quản lý hầu hết quy trình làm Mini App ngay trên Visual Studio Code. Một số chức năng chính gồm:

Khởi tạo dự án Zalo Mini App mới.
Mở và quản lý dự án đã có sẵn.
Khởi động môi trường phát triển App.
Xem trước giao diện Mini App.
Theo dõi chẩn đoán và trạng thái dự án.
Đóng gói mã nguồn.
Xuất bản phiên bản Development hoặc Testing.

Extension Zalo Mini App phù hợp với nhà phát triển muốn tối ưu quy trình xây dựng, kiểm thử và triển khai Mini App trên nền tảng Zalo.

Cách cài đặt Zalo Mini App Extension

Bạn có thể cài đặt Extension theo hai cách phổ biến dưới đây.

Cài đặt từ Visual Studio Code

Để cài đặt trực tiếp trong Visual Studio Code, bạn thực hiện các bước sau:

Bước 1: Bạn mở Visual Studio Code.

Bước 2: Truy cập mục Extensions ở thanh công cụ bên trái.

Bước 3: Nhập từ khóa Zalo Mini App Extension vào ô tìm kiếm.

Bước 4: Chọn extension phù hợp và nhấn nút Install để tiến hành cài đặt.

Sau khi cài đặt hoàn tất, Extension sẽ xuất hiện trong thanh công cụ của Visual Studio Code.

Cài đặt Zalo Mini App Extension từ Visual Studio Code

Cài đặt từ Extensions Marketplace

Ngoài cách tìm trực tiếp trong Visual Studio Code, nhà phát triển cũng có thể truy cập trang Zalo Mini App Extension trên Visual Studio Code Marketplace.

Tại đây, chọn nút Install để tải và cài đặt extension vào Visual Studio Code.

Cài đặt Zalo Mini App Extension trên Visual Studio Code Marketplace

Thiết lập vị trí hiển thị Zalo Mini App Extension

Sau khi cài đặt, Zalo Mini App Extension thường được hiển thị tại thanh công cụ bên trái của Visual Studio Code, còn gọi là primary sidebar. Tuy nhiên, khu vực này thường được sử dụng cho các công cụ quen thuộc như Explorer, Search, Source Control hoặc Run and Debug. Vì vậy, nhà phát triển có thể chuyển Extension sang thanh bên phải, còn gọi là secondary sidebar, để dễ thao tác hơn.

Cách di chuyển Zalo Mini App Extension sang panel bên phải

Việc thay đổi vị trí hiển thị là không bắt buộc. Bạn có thể giữ nguyên vị trí mặc định nếu cảm thấy phù hợp với cách làm việc của mình. Trong trường hợp thanh bên phải bị ẩn, có thể bật lại bằng nút Toggle Secondary Side Bar hoặc sử dụng lệnh View: Focus into Secondary Side Bar trong Visual Studio Code.

Mẹo Khi panel bên phải (A) bị ẩn

Cách tạo dự án mới bằng Zalo Mini App Extension

Zalo Mini App Extension cho phép nhà phát triển tạo dự án mới hoặc mở lại những dự án đã được tạo trước đó bằng Zalo Mini App CLI hoặc Zalo Mini App Studio. Tại màn hình chính của Extension, chọn nút Tạo Mới để bắt đầu khởi tạo dự án.

Dùng Zalo Mini App Extension để tạo dự án mới/mở dự án có sẵn

Tiếp đó, bạn cần cung cấp các thông tin dưới đây:

Template

Template là khung dự án được dùng để khởi tạo Zalo Mini App.

Nếu muốn phát triển Mini App từ đầu, bạn có thể chọn các template trống với những tùy chọn như:

Vite 2 hoặc Vite 5.
JavaScript hoặc TypeScript.

Ngoài ra, Extension Zalo Mini App cũng cung cấp một số template mẫu được xây dựng sẵn trên nền tảng ZaUI. Các mẫu này thường được thiết kế theo tiêu chuẩn Design Guideline, hỗ trợ nhà phát triển tạo giao diện phù hợp với trải nghiệm người dùng trên Zalo.

Location

Location là vị trí lưu trữ dự án trên máy tính. Bạn nên chọn thư mục dễ quản lý để thuận tiện trong quá trình phát triển và sao lưu mã nguồn.

Project name

Project name là tên dự án, đồng thời cũng là tên thư mục chứa mã nguồn sau khi khởi tạo.

Khi đặt tên dự án, cần đảm bảo tên thư mục không bị trùng với thư mục khác trong vị trí lưu trữ đã chọn.

Sau khi điền đầy đủ thông tin, Zalo Mini App Extension sẽ tiến hành tạo mã nguồn dự án. Khi hoàn tất, dự án mới sẽ được tự động mở trong một cửa sổ Visual Studio Code.

Cách mở dự án Zalo Mini App có sẵn

Nếu đã từng tạo dự án bằng Zalo Mini App CLI hoặc Zalo Mini App Studio, bạn có thể mở lại dự án đó ngay trong Extension. Tại giao diện chính, nhấn nút Mở và chọn thư mục chứa mã nguồn dự án. Ngoài ra, bạn cũng có thể sử dụng mục Dự Án Gần Đây để mở nhanh các dự án đã thao tác trước đó mà không cần tìm lại thư mục trên máy tính.

Cấu hình Zalo Mini App ID trước khi phát triển

Sau khi khởi tạo mã nguồn, bạn có thể bắt đầu chỉnh sửa và phát triển ứng dụng. Tuy nhiên, để đóng gói và xuất bản Zalo Mini App lên nền tảng, dự án cần được liên kết với một Zalo Mini App ID hợp lệ.

Để thiết lập, bạn thực hiện với 3 bước như sau:

Bước 1: Trong Zalo Mini App Extension, chọn nút Cấu hình.

Bước 2: Nhập Zalo Mini App ID cần liên kết với dự án.

Bước 3: Kiểm tra danh sách chẩn đoán dự án.

Danh sách chẩn đoán hiển thị các thông tin quan trọng liên quan đến dự án, đồng thời đưa ra các hành động gợi ý cần thực hiện. Nhà phát triển nên xử lý đầy đủ các đề xuất để đảm bảo dự án hoạt động ổn định trước khi deploy.

Liên kết với Zalo Mini App ID

Cách khởi động Zalo Mini App Extension để xem trước ứng dụng

Zalo Mini App Extension hỗ trợ xem trước ứng dụng trong quá trình phát triển. Khi bạn chỉnh sửa mã nguồn, các thay đổi có thể được cập nhật gần như ngay lập tức thông qua cơ chế hot reload. Để khởi động ứng dụng, truy cập menu Phát triển trong extension và lựa chọn chế độ xem trước phù hợp.

Khởi động ứng dụng

Chế độ Device

Với chế độ Device, nhà phát triển sử dụng ứng dụng Zalo trên điện thoại thật để mở và kiểm tra Mini App. Chế độ này đặc biệt hữu ích khi cần thử nghiệm các tính năng liên quan trực tiếp đến Zalo, chẳng hạn như:

getUserInfo
getPhoneNumber
followOA
openShareSheet

Điện thoại không bắt buộc phải kết nối cùng mạng với máy tính để sử dụng chế độ này.

Chọn ứng dụng/thiết bị để xem trước Zalo Mini App

Chế độ Simulator

Simulator cho phép mô phỏng giao diện Zalo Mini App ngay bên trong Visual Studio Code. Nhà phát triển có thể:

Chỉnh sửa mã nguồn trong Editor.
Xem giao diện Mini App trong Simulator.
Sử dụng DevTools để kiểm tra lỗi và theo dõi hoạt động của ứng dụng.

Đây là lựa chọn phù hợp khi muốn làm việc tập trung trong một cửa sổ Visual Studio Code.

Mô phỏng giao diện Mini App trên Visual Studio Code

Chế độ Chrome hoặc Edge Debugger

Zalo Mini App Extension có thể sử dụng công cụ gỡ lỗi của Visual Studio Code để chạy Mini App trong phiên debug trên Google Chrome hoặc Microsoft Edge. Với chế độ này, nhà phát triển có thể sử dụng các chức năng nâng cao như:

Breakpoints.
Step Over.
Step Into.
Step Out.
Run and Debug.

Để sử dụng, máy tính cần được cài đặt Google Chrome hoặc Microsoft Edge.

Tính năng nâng cao để gỡ lỗi

Chế độ trình duyệt mặc định

Khi chọn trình duyệt mặc định, Zalo Mini App Extension sẽ mở giao diện Mini App trên trình duyệt web đang được thiết lập mặc định trên máy tính.

Không sử dụng launcher

Tùy chọn này chỉ khởi động hot reload server. Nhà phát triển có thể tự lựa chọn cách xem trước Mini App bằng công cụ hoặc thiết bị khác.

Các thiết lập khởi động trong Zalo Mini App Extension

Tùy vào chế độ khởi động được chọn, một số thiết lập bổ sung sẽ khả dụng.

Path

Path cho phép truy cập trực tiếp vào một đường dẫn cụ thể trong Mini App thay vì mở tại trang chủ mặc định. Thiết lập này phù hợp khi kiểm tra các luồng mở Mini App từ tin nhắn, liên kết sâu hoặc xử lý kết quả thanh toán.

Kết nối bảo mật

Tùy chọn này sử dụng giao thức HTTPS để xem trước Zalo Mini App. Khi bật HTTPS, nhà phát triển cần cấu hình plugin phù hợp, ví dụ @vitejs/plugin-basic-ssl cho Vite, để tránh lỗi chứng thực. Thiết lập này hữu ích khi cần sử dụng các API chỉ hoạt động trong secure context. Mini App chạy trên thiết bị thật thường sử dụng môi trường bảo mật.

Tùy chỉnh Hostname

Thiết lập này cho phép thay đổi hostname mặc định là localhost thành một hostname khác. Khi sử dụng hostname tùy chỉnh, bạn cần map hostname đó về địa chỉ loopback 127.0.0.1 trong file hosts của máy tính.

Tùy chỉnh Port

Nhà phát triển có thể chỉ định port cụ thể để chạy Zalo Mini App. Nếu không thiết lập, extension sẽ tự chọn một port còn trống gần port 3000. Tuy nhiên, nếu port được chọn đã bị ứng dụng khác sử dụng, Mini App sẽ không thể khởi động.

Tùy chỉnh User Agent

Tùy chọn này cho phép thay đổi User Agent trong chế độ Simulator. Bạn có thể tự nhập User Agent hoặc chọn User Agent phù hợp với thiết bị Android hoặc iOS đang mô phỏng.

Hướng dẫn đăng nhập để xuất bản Zalo Mini App

Trước khi đóng gói và xuất bản, nhà phát triển cần hoàn tất hai điều kiện:

Dự án đã được liên kết với Zalo Mini App ID hợp lệ.
Tài khoản Zalo sử dụng để đăng nhập phải có quyền Admin hoặc Developer của Mini App.

Để đăng nhập, nhấn nút Đăng nhập trên Zalo Mini App Extension. Sau đó, dùng ứng dụng Zalo trên điện thoại đã đăng nhập tài khoản có quyền phù hợp để quét mã QR hiển thị trên giao diện extension.

Đăng nhập ứng dụng

Cách xuất bản Zalo Mini App bằng Extension

Sau khi đăng nhập thành công, bạn có thể bắt đầu đóng gói và xuất bản ứng dụng trên nền tảng Zalo Mini App. Tại giao diện Deploy, nhà phát triển cần chọn loại phiên bản phù hợp.

Xuất bản ứng dụng lên nền tảng Zalo Mini App

Phiên bản Development

Phiên bản Development phục vụ cho quá trình kiểm tra nhanh trong giai đoạn phát triển. Đặc điểm của phiên bản này gồm:

Không hiển thị trong mục Quản lý phiên bản của Mini App.
Bị ghi đè khi nhà phát triển deploy phiên bản Development mới.
Phù hợp để kiểm tra nhanh tính năng trên ứng dụng Zalo.

Phiên bản Testing

Phiên bản Testing phù hợp khi cần lưu lại bản kiểm thử và gửi xét duyệt trước khi phát hành. Các phiên bản Testing sẽ được đánh số và lưu trữ trong mục Quản lý phiên bản. Nhà phát triển có thể gửi phiên bản để xét duyệt, sau đó phát hành phiên bản đã được duyệt đến người dùng Zalo.

Khi deploy phiên bản Testing, bạn cần nhập mô tả phiên bản. Mô tả nên phản ánh rõ những thay đổi quan trọng so với phiên bản trước. Điều này giúp đội ngũ phát triển dễ phân biệt, kiểm tra và quay lại phiên bản cũ khi cần thiết. Sau khi hoàn tất thông tin, nhấn nút Deploy và chờ quá trình build, đóng gói và xuất bản hoàn tất.

Kiểm tra lịch sử phiên bản Zalo Mini App

Khi deploy thành công, Zalo Mini App Extension sẽ hiển thị báo cáo xuất bản, bao gồm entry point để mở Mini App dưới dạng:

QR Code.
Deep Link.

Ngoài ra, nhà phát triển có thể xem lại toàn bộ các phiên bản đã đóng gói và xuất bản trước đó trong danh sách lịch sử phiên bản. Tính năng này giúp đội ngũ phát triển dễ dàng theo dõi tiến độ, quản lý các lần cập nhật và kiểm soát phiên bản Zalo Mini App hiệu quả hơn.

Zalo Mini App Extension là công cụ hỗ trợ hữu ích cho nhà phát triển muốn xây dựng, kiểm thử và xuất bản Zalo Mini App trực tiếp trên Visual Studio Code. Với khả năng tạo dự án, hot reload, mô phỏng giao diện, gỡ lỗi, deploy và theo dõi lịch sử phiên bản, extension giúp tối ưu đáng kể quy trình phát triển ứng dụng. Việc sử dụng đúng cách sẽ giúp nhà phát triển tiết kiệm thời gian, quản lý mã nguồn hiệu quả và nhanh chóng đưa Mini App đến người dùng trên Zalo.

Xem thêm:
Hướng dẫn quản lý đơn hàng trên Zalo Mini Shop cho Người bán

Hướng dẫn chuyển đổi Web App có sẵn thành Zalo Mini App

Tổng hợp các lỗi kỹ thuật thường gặp khi phát triển Zalo Mini App

Thông tin liên hệ:

Công ty TNHH ABENLA