Kỹ thuật phát triển Zalo Mini App
Kỹ thuật phát triển Zalo Mini App
  • 10 Mar 2025
  • admin

Kỹ thuật phát triển Zalo Mini App

Tóm tắt bài viết về kỹ thuật phát triển Zalo Mini App Bài viết cung cấp các mẹo kỹ thuật quan trọng để phát triển thành công Zalo Mini App, đặc biệt hữu ích cho người mới bắt đầu. #### **1️⃣ Kích hoạt Zalo App** - **Zalo Mini App ID**: Dùng để deploy, xét duyệt và chia sẻ Mini App. - **Zalo App ID (Developer ID)**: Dùng để tích hợp với API Zalo. - Tạo và kích hoạt tại [Zalo Developer](https://developers.zalo.me). #### **2️⃣ Thiết lập CORS cho API Mini App** - Để tránh lỗi CORS khi gọi API từ Mini App, server cần khai báo các domain: - `https://h5.zdn.vn` - `zbrowser://h5.zdn.vn` #### **3️⃣ Đăng nhập Mini App bằng tài khoản Zalo** - Người dùng không cần nhập username/mật khẩu, Zalo Mini App có thể tự động nhận diện tài khoản. - Có thể liên kết tài khoản Zalo với dữ liệu người dùng cũ bằng số điện thoại. #### **4️⃣ Sử dụng DevTools để phát triển Mini App** - **Zalo Mini App Studio**: IDE hỗ trợ code, test và deploy Mini App. - **Zalo Mini App CLI**: Công cụ dòng lệnh giúp chạy thử và deploy Mini App. - Nếu không có đội ngũ lập trình, có thể nhờ các Agency chuyên phát triển Mini App. #### **5️⃣ Xin cấp quyền sử dụng API** Một số API nhạy cảm yêu cầu đăng ký trước khi sử dụng, bao gồm: - `getPhoneNumber`, `getLocation`, `requestCameraPermission`, `saveImageToGallery`, v.v. - Nên gửi yêu cầu sau khi đã có phiên bản đầu tiên của Mini App để xét duyệt dễ dàng hơn. - Người dùng thử nghiệm (Admin/Developer) có thể sử dụng API mà không cần xin quyền. #### **6️⃣ Chuyển đổi Mini App từ dự án có sẵn** - Nếu dự án có kiến trúc **Single Page App** (Vue.js, Angular, Flutter, Next.js), có thể chuyển đổi thành Mini App. - **Các bước chuyển đổi**: 1. Build source code thành static assets (HTML, CSS, JS). 2. Khai báo trong `app-config.json`. 3. Dùng `Zalo Mini App CLI` để deploy lên Mini App ID. #### **7️⃣ Chính sách kiểm duyệt Mini App** - Để Mini App được duyệt, cần tuân thủ **Chính sách kiểm duyệt Mini App** và **Thỏa Thuận Chương Trình Zalo Mini App**. - Đảm bảo Mini App hoạt động mượt mà, không lỗi, có thể hoàn thành chức năng chính mà không gặp gián đoạn. **🔹 Mẹo quan trọng:** ✅ Kiểm tra quyền API trước khi gọi. ✅ Tận dụng sẵn tài khoản Zalo để tránh nhập mật khẩu. ✅ Gửi xét duyệt quyền API ngay sau phiên bản đầu tiên. ✅ Kiểm tra kỹ Mini App trước khi gửi xét duyệt để tránh lỗi hiển thị.

Bài viết này tổng hợp các mẹo kỹ thuật hữu ích trong quá trình phát triển ứng dụng. Nếu như bạn là người mới bắt đầu phát triển Zalo Mini App, bài viết này sẽ rất phù hợp để giúp bạn dễ dàng triển khai thành công ứng dụng đầu tiên của mình.
 

Tóm tắt bài viết về kỹ thuật phát triển Zalo Mini App

Bài viết cung cấp các mẹo kỹ thuật quan trọng để phát triển thành công Zalo Mini App, đặc biệt hữu ích cho người mới bắt đầu.

1️⃣ Kích hoạt Zalo App

  • Zalo Mini App ID: Dùng để deploy, xét duyệt và chia sẻ Mini App.
  • Zalo App ID (Developer ID): Dùng để tích hợp với API Zalo.
  • Tạo và kích hoạt tại Zalo Developer.

2️⃣ Thiết lập CORS cho API Mini App

  • Để tránh lỗi CORS khi gọi API từ Mini App, server cần khai báo các domain:
    • https://h5.zdn.vn
    • zbrowser://h5.zdn.vn

3️⃣ Đăng nhập Mini App bằng tài khoản Zalo

  • Người dùng không cần nhập username/mật khẩu, Zalo Mini App có thể tự động nhận diện tài khoản.
  • Có thể liên kết tài khoản Zalo với dữ liệu người dùng cũ bằng số điện thoại.

4️⃣ Sử dụng DevTools để phát triển Mini App

  • Zalo Mini App Studio: IDE hỗ trợ code, test và deploy Mini App.
  • Zalo Mini App CLI: Công cụ dòng lệnh giúp chạy thử và deploy Mini App.
  • Nếu không có đội ngũ lập trình, có thể nhờ các Agency chuyên phát triển Mini App.

5️⃣ Xin cấp quyền sử dụng API

Một số API nhạy cảm yêu cầu đăng ký trước khi sử dụng, bao gồm:

  • getPhoneNumber, getLocation, requestCameraPermission, saveImageToGallery, v.v.
  • Nên gửi yêu cầu sau khi đã có phiên bản đầu tiên của Mini App để xét duyệt dễ dàng hơn.
  • Người dùng thử nghiệm (Admin/Developer) có thể sử dụng API mà không cần xin quyền.

6️⃣ Chuyển đổi Mini App từ dự án có sẵn

  • Nếu dự án có kiến trúc Single Page App (Vue.js, Angular, Flutter, Next.js), có thể chuyển đổi thành Mini App.
  • Các bước chuyển đổi:
    1. Build source code thành static assets (HTML, CSS, JS).
    2. Khai báo trong app-config.json.
    3. Dùng Zalo Mini App CLI để deploy lên Mini App ID.

7️⃣ Chính sách kiểm duyệt Mini App

  • Để Mini App được duyệt, cần tuân thủ Chính sách kiểm duyệt Mini App và Thỏa Thuận Chương Trình Zalo Mini App.
  • Đảm bảo Mini App hoạt động mượt mà, không lỗi, có thể hoàn thành chức năng chính mà không gặp gián đoạn.

🔹 Mẹo quan trọng:
✅ Kiểm tra quyền API trước khi gọi.
✅ Tận dụng sẵn tài khoản Zalo để tránh nhập mật khẩu.
✅ Gửi xét duyệt quyền API ngay sau phiên bản đầu tiên.
✅ Kiểm tra kỹ Mini App trước khi gửi xét duyệt để tránh lỗi hiển thị.

Chi tiết xem bên dưới 

Kích hoạt Zalo App

Bước đầu tiên và tiên quyết trong việc phát triển Zalo Mini App là tạo app. Nhiều người thường hay nhầm lẫn hai khái niệm sau:

  • Zalo Mini App ID: mỗi mini app sẽ có riêng một ID dùng để định danh. ID này được dùng để deploy mini app từ source code, gửi xét duyệt cũng như chia sẻ mini app trong quá trình sử dụng.
  • Zalo App ID (hay còn gọi là Zalo Developer ID): các nhà phát triển làm việc với hệ sinh thái của Zalo sẽ cần có một Zalo App. Zalo App ID được sử dụng để xác định nhà phát triển và cấp quyền truy cập vào các API của Zalo, do đó việc tích hợp các dịch vụ như OA, ZNS và trường hợp này là Mini App đều cần phải có một Zalo App với trạng thái “Đang hoạt động”.

Để tạo Zalo App và kích hoạt, bạn truy cập https://developers.zalo.me và truy cập trang Quản lý ứng dụng như hình dưới:

Zalo App Name ở trạng thái Đang hoạt động.

Thiết lập CORS cho phép gọi API từ Mini App

Một trong những vấn đề thường gặp nhất khi giao tiếp tới Server của doanh nghiệp từ Mini App đó là vấn đề về cross origins. Đây là cơ chế mặc định của các trình duyệt web để đảm bảo chỉ có những domain mà Server cho phép mới có thể gửi dữ liệu đến Server.

CORS là cơ chế đặc biệt của các trình duyệt cũng như webviews, nên đừng thắc mắc tại sao bạn không bị lỗi CORS khi dùng Postman hoặc cURL

Các domain cần được khai báo trong response header Access-Control-Allow-Origin mà Server trả về là:

  • https://h5.zdn.vn
  • zbrowser://h5.zdn.vn

Code mẫu bạn có thể tham khảo ở đây: Call API.

Sử dụng tài khoản Zalo để đăng nhập trên Mini App

💡

Nếu như Mini App của bạn đang yêu cầu người dùng phải nhập username/số điện thoại kèm mật khẩu để có thể sử dụng, có thể bạn đang chưa tiếp cận đúng cách. Cân nhắc sử dụng tips này nhé.

Một trong những thế mạnh của Mini App so với Native App hoặc Web App đó là Mini App có thể tận dụng được tập người dùng có sẵn của Zalo. Người sử dụng Mini App không cần phải tạo tài khoản hoặc đăng nhập để có thể sử dụng dịch vụ, vì khi mở Mini App chúng ta đã biết họ là ai thông qua tài khoản Zalo mà họ đang sử dụng.

Hướng dẫn chi tiết, bạn có thể tham khảo tại đây: Hướng dẫn sử dụng tài khoản Zalo để đăng nhập trên Mini App.

Một nhu cầu thường gặp khác là liên kết người dùng Zalo Mini App (mới) với tập người dùng có sẵn từ các kênh khác (cũ) trong hệ thống của bạn. Khi đó người dùng Zalo Mini App có thể xem lại các hợp đồng cũng như đơn hàng trước mà họ đã thực hiện trước khi sử dụng Zalo Mini App và ngược lại. Có nhiều cách để thực hiện cơ chế này, liên kết số điện thoại là một trong những cách đó.

Hướng dẫn sử dụng DevTools để phát triển Mini App

Nếu như bạn chưa biết thì phát triển Zalo Mini App (hay Mini App nói chung) cần phải code, vì thế người phát triển Zalo Mini App yêu cầu phải có không ít thì nhiều kiến thức về lập trình.

💡

Bạn có thể tìm đến các Agency nếu như không có đội ngũ chuyên về lập trình ứng dụng. Việc tư vấn giải pháp và phát triển Zalo Mini App dựa trên nhu cầu riêng của doanh nghiệp là trách nhiệm của Agency chứ không phải chính Platform Zalo Mini App.

Zalo Mini App Platform cung cấp 2 bộ cung cụ phát triển ứng dụng chính:

  • Zalo Mini App Studio: bao gồm 1 trình soạn thảo code đầy đủ (IDE) và các giao diện giúp bạn có thể chạy thử ứng dụng của bạn trên máy tính và deploy lên Mini App ID để có thể xuất bản.
  • Zalo Mini App CLI: bộ công cụ dòng lệnh giúp bạn có thể chạy thử ứng dụng của mình trên trình duyệt và deploy lên Mini App ID để xuất bản ứng dụng. Bạn có thể sử dụng IDE/Text Editor tuỳ thích như Visual Studio Code và chạy các lệnh này từ Terminal.

Hướng dẫn sử dụng chi tiết cũng như cách cài đặt, vui lòng tham khảo tại đây: DevTools.

Xin cấp quyền sử dụng API

Để đảm bảo quyền riêng tư cho người sử dụng Zalo Mini App, một số API nhạy cảm yêu cầu Mini App cần phải đăng ký quyền sử dụng trước khi dùng, cụ thể:

💡

Một số API còn yêu cầu người dùng cấp quyền trực tiếp tuỳ theo ngữ cảnh, ví dụ như getPhoneNumber và getLocation. Đừng nhầm lẫn giữa quyền do người dùng cấp với quyền do platform cấp cho từng Zalo Mini App nhé.

Một vài lưu ý về việc xin quyền sử dụng API:

  • Thời điểm tốt nhất để gửi yêu cầu xét duyệt quyền sử dụng API là sau khi gửi xét duyệt version đầu tiên của Mini App. Chỉ khi đó thì đội ngũ xét duyệt mới có đủ ngữ cảnh để đưa ra quyết định. Càng không nên để đến khi Mini App của bạn đã xuất bản và có những người dùng đầu tiên thì mới tiến hành đi xin.
  • Để dễ dàng tiếp cận và phát triển ứng dụng, người dùng nằm trong tập Admin/Developer và Người dùng thử nghiệm của Mini App có thể sử dụng được toàn bộ tất cả API mà không cần xin quyền. Do đó kể cả khi bạn không nhìn thấy những thông báo lỗi về permission của API khi sử dụng Mini App, luôn phải double check danh sách các quyền đã được duyệt tương ứng.

Chuyển đổi Mini App từ dự án có sẵn

💡

Chúng tôi chỉ khuyến khích thực hiện việc chuyển đổi này khi việc viết lại là rất tốn kém. Đối với các Mini App được phát triển mới, khuyến khích sử dụng React và cách phát triển Mini App mặc định.

Vì bản chất của Zalo Mini App là web app và có cơ chế routing phía client, nên các dự án web app có kiến trúc Single Page tương tự (như Vue.js, Angular,…), hoặc có thể thiết lập để build ra dưới dạng web app (như Flutter, Next.js) có thể được sử dụng lại để chuyển đổi sang Zalo Mini App. Đối với các trang web có cơ chế routing phía server, việc chuyển đổi là không khả thi.

Nhìn chung các bước trong quá trình chuyển đổi bao gồm:

  • Build source code của dự án ra static assets (bao gồm các file html, css và js). Cơ chế routing phải được thực hiện bằng JavaScript.
  • Khai báo các assets cần phải load (JS/CSS) trong app-config.json.
  • Dùng Zalo Mini App CLI để đẩy những assets này lên Mini App ID của bạn.

Tài liệu hướng dẫn chuyển đổi chi tiết, bạn có thể tham khảo các bài viết sau:

Chính sách kiểm duyệt Mini App

Bước cuối cùng trong quy trình phát triển ứng dụng là xuất bản và mang nó đến với 70 triệu người dùng của Zalo. Các bước cần làm để gửi xét duyệt và xuất bản ứng dụng khá đơn giản và bạn có thể tham khảo tại đây, thử thách thật sự ở đây là: Làm sao để Mini App của bạn có thể được duyệt bởi đội ngũ vận hành Zalo Mini App?

Để một mini app được kiểm duyệt thật ra không quá khó. Bạn chỉ cần:

Mẹo: đội ngũ xét duyệt Zalo Mini App sẽ đóng vai trò như một người dùng bình thường khi kiểm duyệt mini app của bạn. Miễn là mini app của bạn có thể giúp cho một người dùng bình thường hoàn thành những công việc/chức năng mà họ đã bắt đầu trên ứng dụng, 90% mini app của bạn sẽ được duyệt. Người dùng bình thường sẽ không muốn thấy những màn hình trắng, những lỗi không có hướng giải quyết hoặc những chức năng tiên quyết nhưng lại “đang trong giai đoạn phát triển”!

Tags:

__PERMISSION__
Bài viết mới