Hướng dẫn triển khai Zalo Mini App từ A-Z

Ngày đăng 01/01/1970 07:01

Người đăng: admin
4 Lượt xem

Có thể nói, Zalo Mini App là cách thức mới giúp doanh nghiệp đến gần hơn với khách hàng. Để nắm vị thế chủ động và dẫn đầu trên thị trường, doanh nghiệp cần nhanh chóng có kế hoạch triển khai chi tiết một cách hiệu quả.

Bài viết này cung cấp những hướng dẫn chi tiết, các lưu ý về mặt kĩ thuật hữu ích cho người mới bắt đầu phát triển Zalo Mini App. Bắt đầu từ khâu đăng ký cấu hình cho đến bước cuối cùng là xuất bản Mini App tới hàng triệu người dùng.

Cấu hình tải và tạo Zalo Mini App 

Trước khi bắt đầu tiến hành triển khai tạo Mini App trên Zalo, bạn cần đăng ký về cấu hình tải của ứng dụng. Cụ thể:

  • Node.js phiên bản lớn hơn hoặc tương đương 12.13.0. Nvm cũng có thể được sử dụng để quản lý nhiều phiên bản Node (nếu có)
  • Với trường hợp máy tính Mac có bộ vi xử lý Apple M1, yêu cầu tối thiểu về cấu hình là Node.js 15.6.0.

Các bước triển khai Zalo Mini App và những lưu ý

Việc phát triển các Mini App nói chung đều cần phải code, vì thế đội ngũ phát triển Zalo Mini App đều cần phải trang bị một kiến thức nhất định về lập trình. Dưới đây là một số bước chi tiết để bạn và doanh nghiệp có hình dung sơ lược về việc triển khai Zalo Mini App.

Bước 1: Kích hoạt Zalo App

Tạo app là việc đầu tiên và tiên quyết trước khi bắt tay vào triển khai Zalo Mini App. Nhiều người thường hay nhầm lẫn giữa việc khởi tạo Zalo App (Zalo App ID) và Zalo Mini App (Zalo Mini App ID).

Zalo App ID (hay còn được gọi là Zalo Developer 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, tích hợp với các dịch vụ Zalo OA, ZNS. Chính vì thế trước khi tạo Mini App, các nhà phát triển đều cần phải có một Zalo App với trạng thái “Đang hoạt động”.

Zalo App ID luôn cần hiển thị trạng thái

Bước 2: Tạo và đặt tên Mini App 

Sau khi đã khởi tạo Zalo thành công (nếu ứng dụng chưa có sẵn trên máy), bạn có thể tiến hành khởi tạo Zalo Mini App bằng cách vào trang quản lý ứng dụng Zalo Mini App, chọn Zalo App vừa tạo ở bước trên, nhấn Tạo Zalo Mini App và nhập các thông tin cần thiết như:

  • Loại Mini App
  • Thông tin Mini App
  • Thiết lập Logo

Bước 3: Khởi tạo Project 

Khởi tạo mã nguồn bằng Zalo Mini App Studio 

Zalo Mini App Platform cung cấp 2 bộ công cụ phát triển ứng dụng gồm:

  • Khởi tạo bằng Zalo Mini App Studio: gồm một trình soạn thảo code đầy đủ (IDE) hỗ trợ đội ngũ lập trình có thể chạy thử ứng dụng trên máy tính và deploy lên Mini App để xuất bản.
  • Khởi tạo bằng Command Line:  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.

Bước 4: Xin cấp quyền API

Một số API nhạy cảm cần phải đăng ký quyền sử dụng trước khi dùng, cụ thể:

Tuy nhiên, một lưu ý quan trọng dễ bị nhầm lẫn quyền do người dùng cấp khác với quyền do Platform cấp. Một số API yêu cầu người dùng cấp quyền trực tiếp theo ngữ cảnh như getPhoneNumber hoặc getLocation.

Bước 5: Kiểm duyệt Mini App 

Trước khi xuất bản và xuất hiện trên danh sách Mini App của Zalo, bạn cần phải gửi xét duyệt để bắt đầu xuát bản ứng dụng. Quy trình không quá phức tạp, tuy nhiên cần lưu ý:

  • Đảm bảo đáp ứng đầy đủ các tiêu chí trong Chính sách kiểm duyệt Mini App của Zalo
  • Không vi phạm bất cứ điều khoản nào trong Thỏa thuận chương trình Zalo Mini App

Một số lưu ý khi triển khai Zalo Mini App

  1. Xin cấp quyền API 
Giao diện xin cấp quyền API trên Zalo Mini App

Bạn nên bắt đầu gửi xin cấp quyền API chỉ khi đã gửi xét duyệt version đầu tiên của Mini App nhằm cung cấp đầy đủ ngữ cảnh nhất cho đội ngũ xét duyệt. Tuy nhiên, cũng không nên để đến khi có người dùng đầu tiên truy cập mới tiến hành đi xin.

Thêm vào đó, người dùng nằm trong tệp Admin/Developer có thể sử dụng được hết tất cả các quyền API mà không cần phải xin cấp, vì thế phải luôn kiếm tra kĩ lưỡng danh sách các quyền đã được duyệt tương ứng.

  1. Kiểm duyệt Mini App 

Việc kiểm duyệt được tiến hành bởi đội ngũ đóng vai trò như một người dùng bình thường. Chính vì vậy, mini app của bạn cần đảm bảo hỗ trợ người dùng đáp ứng được công việc/chức năng mà họ đã bắt đầu trên ứng dụng. Bạn chắc chắn sẽ không muốn hiện quá nhiều lỗi màn hình trắng, lỗi không có hướng giải quyết hoặc những chức năng quan trọng nhưng lại đề là “đang phát triển”. Chỉ cần đáp ứng như vậy là khả năng 90% Mini App chắc chắn được phê duyệt.

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

Nếu việc viết lại một Mini App trở nên tốn kém, bạn có thể cân nhắc đến việc chuyển đổi từ các dự án có sẵn. Tuy nhiên, việc chuyển đổi chỉ khả thi khi các dự án này 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á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.

Lựa chọn Starfruit để bắt đầu triển khai Zalo Mini App 

Starfruit cung cấp dịch vụ xây dựng Mini App hỗ trợ doanh nghiệp nhanh chóng “chủ động” gia nhập cuộc chơi với đội ngũ lập trình viên giàu kinh nghiệm. Hãy liên hệ với Starfruit ngay hôm nay để biết thêm chi tiết và bắt đầu hành trình xây dựng Mini App của riêng bạn.

Starfruit – Đối tác tin cậy của bạn!

————————————————————–

STARFRUIT JSC – Đơn vị tư vấn chuyển đổi số “thực chiến” Top 1

Địa chỉ: Tòa Paragon,ngõ 86 Duy Tân, Cầu Giấy, Hà Nội

Website: https://starfruit.com.vn/
Hotline: (+84) 939 254 666

E-mail: contact@starfruit.com.vn

Chia sẽ:


















Quán ăn Tư Ếch - điểm chính
716 xvnt Bình Thạnh, HCM
Quán ăn Tư Ếch - HCM
716 xvnt Bình Thạnh, HCM
Quán ăn Tư Ếch - điểm chính
716 xvnt Bình Thạnh, HCM
Quán ăn Tư Ếch - HCM
716 xvnt Bình Thạnh, HCM
Quán ăn Tư Ếch - điểm chính
716 xvnt Bình Thạnh, HCM
Quán ăn Tư Ếch - HCM
716 xvnt Bình Thạnh, HCM

Leave a Reply

Your email address will not be published.Required fields are marked *

Open this in UX Builder to add and edit content

Open this in UX Builder to add and edit content