Khởi động

Cập nhật lần cuối: 07/06/2023

Bạn có thể sử dụng Studio để khởi động project bằng 1 trong 2 chế độ:

• Chế độ mô phỏng (Simulator): Ở chế độ này, bạn có thể sử dụng mô phỏng để xem trước giao diện mini app. Bạn cũng có thể sử dụng trình chỉnh sửa mã nguồn và các công cụ phát triển trên cùng một cửa sổ. Tuy nhiên, các chức năng liên quan đến Zalo như getAccessToken, getPhoneNumber, openChat, openShareSheet,... có thể sẽ khác so với khi bạn deploy ứng dụng lên Zalo Mini App.

• Chế độ thiết bị (Device): Ở chế độ này, bạn sẽ cần sử dụng ứng dụng Zalo trên thiết bị thật để chạy ứng dụng của mình, khi đó bạn sẽ có thể sử dụng các chức năng liên quan đến Zalo giống như khi bạn đã triển khai ứng dụng lên hệ thống. Các chức năng như devtools và hot reload vẫn sẽ hoạt động. Tuy nhiên, nếu có lỗi xảy ra trong ứng dụng mà không được xử lý (uncaught exceptions), bạn sẽ không thể xem nội dung lỗi chi tiết.

Chế độ Simulator

Simulator bao gồm các thành phần như sau:

1. Devtools: cho phép sử dụng các công cụ phát triển quen thuộc như Elements inspector, Console logs, Network traffic,...

2. Address bar: dùng để chuyển đổi giữa các trang được định nghĩa sẵn trong Zalo Mini App (thông qua array pages của app-config.json)

3. Page params: cho phép thêm các tham số được truyền vào Zalo Mini App dưới dạng key & value. Ví dụ nếu trang chi tiết sản phẩm có deeplink là /products?id=12, thì page path sẽ là product và page params sẽ là id=12.

4. Device: cho phép thay đổi thiết bị giả lập.

5. Host: Khi gọi API và gặp lỗi CORS, bạn cần phải cho phép truy cập từ localhost bằng cách thêm header Access-Control-Allow-Origins. Tuy nhiên khi vì lý do nào đó bạn không thay đổi header của server, bạn có thể dùng thiết lập này để thay đổi localhost thành một địa chỉ bất kỳ, ví dụ như local.zalo.me. Ngoài ra bạn cần phải ánh xạ địa chỉ này tới localhost bằng cách sử dụng file hosts.

   Hướng dẫn ánh xạ tên miền tới địa chỉ IP sử dụng file hosts.

   File hosts là một tệp văn bản trên máy tính được sử dụng để ánh xạ tên miền với địa chỉ IP. Để thêm địa chỉ bất kỳ ví dụ như local.zalo.me vào tệp hosts trên Linux hoặc Mac, mở Terminal và nhập lệnh sudo nano /etc/hosts, sau đó thêm dòng 127.0.0.1 local.zalo.me vào cuối tệp và lưu lại. Trên Windows, mở Notepad dưới quyền Administrator, mở tệp hosts từ C:\Windows\System32\drivers\etc, thêm dòng 127.0.0.1 local.zalo.me vào cuối tệp và lưu lại.

6. Theme switcher: cho phép thay đổi chế độ sáng/tối của Simulator, giúp bạn phát triển chế độ tối cho Mini App của bạn dễ dàng hơn.

Chế độ Device

Bắt đầu hỗ trợ ở phiên bản:

• Studio: 1.13.0
• SDK: 2.27.0

Để đảm bảo chế độ Device hoạt động ổn định, bạn cần đáp ứng các yêu cầu sau cho dự án của mình ⁽¹⁾:

• Liên kết với một Zalo Mini App ID hợp lệ.
• Sử dụng phiên bản SDK mới nhất. Nếu phiên bản SDK hiện tại của bạn quá cũ, nút "Upgrade Now" sẽ hiện ra để bạn có thể tự động cập nhật.
• Sử dụng Vite 2.x cho dự án của bạn. Dự án sử dụng Webpack sẽ không tương thích với chế độ này.

Sau đó bạn chuyển chế độ khởi động từ Simulator sang Device và bấm nút Start. Một mã QR code sẽ hiển thị và bạn cần sử dụng ứng dụng Zalo trên thiết bị thật để quét mã này. Sau khi quét mã QR, Zalo Mini App của bạn sẽ được chạy trên thiết bị thực tế. Trong khi đó, bạn vẫn có thể sử dụng Studio để thay đổi mã nguồn và cơ chế hot reload sẽ giúp bạn ngay lập tức xem các thay đổi của mình trên thiết bị đó.

Studio	Device

Tắt project

Ấn vào nút Stop màu cam để tắt project.