Doanh nghiệp cần triển khai Mini App trên nền tảng Zalo nhưng chưa biết bắt đầu từ đâu? Bài viết này sẽ hướng dẫn bạn tạo Zalo Mini App một cách chi tiết.

Zalo trở thành kênh truyền thông hiệu quả khi có hơn 70 triệu người dùng tại Việt Nam. Vì thế, các doanh nghiệp Việt có xu hướng kết nối với khách hàng qua Zalo. Bên cạnh quảng cáo Zalo, liên lạc khách hàng, bạn còn có thể xây dựng app trên Zalo.

Có 2 cách để tạo Zalo Mini App. Đó là tạo ngay trên Zalo Mini App Studio hoặc tạo bằng dòng lệnh.

Tạo Zalo Mini App trên Zalo Mini App Studio

Tạo dự án

B1: Tại giao diện chính của Zalo Mini App Studio, bấm vào nút New project

B2: Nhập các thông tin của dự án mới cần tạo, trong đó:

• Mini App ID: Doanh nghiệp có thể tạo ID tại mini.zalo.me.
• Project name: tên của dự án, cũng là tên của thư mục chứa mã nguồn của dự án sau khi tạo (định dạng kebab-case). Ví dụ: Nếu tên dự án là “Coffee Shop”, thư mục dự án sẽ là coffee-shop.
• Location: vị trí để lưu trữ dự án trên máy tính của bạn. 

      Nhấn Next để tiếp tục bước tiếp theo.

B3: Tạo dự án bằng ZaUI hoặc template có sẵn

• Khi bạn chọn Blank template, Studio sẽ tự động tạo cấu trúc thư mục cùng với các dependencies cần thiết để phát triển Zalo Mini App.
• Ngoài ra, Zalo cũng cung cấp các template tiện lợi để doanh nghiệp tạo các Mini App. Các template này được thiết kế để mang lại trải nghiệm tối ưu cho khách hàng. 

B4: Liên kết với Mini APP ID

• Một mã QR code sẽ hiển thị để cho phép bạn đăng nhập bằng Zalo. Sau khi đăng nhập thành công, ID của ứng dụng sẽ được liên kết với dự án hiện tại, cho phép bạn deploy ứng dụng lên platform của Zalo Mini App từ Studio.
• Đăng nhập vào Zalo bằng mã QR code được hiển thị. Đăng nhập thành công cho phép bạn triển khai Mini App từ Studio.

Khởi động

B5: Bấm vào dấu mũi tên hướng xuống và chọn chế độ Simulator hoặc Device:

• Chế độ mô phỏng (Simulator): Chế độ này cho phép doanh nghiệp xem trước giao diện mini app qua mô phỏng. 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 phát hành thực tế ứng dụng lên Zalo Mini App.
• Chế độ thiết bị (Device): Chế độ này cho phép bạn chạy ứng dụng trên thiết bị thật. Các chức năng hiển thị trong chế độ cũng sẽ tương tự khi phát hành ứng dụng thực tế. 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.

B6: Ấn nút stop màu cam để tắt project.

Xuất bản

Sau khi phát triển mini app hoàn thiện, doanh nghiệp có thể triển khai ứng dụng trên nền tảng:

B7: Nhấn vào nút Deploy và chọn:

• Development: không hiển thị trên mục Quản lý phiên bản của mini app và sẽ bị ghi đè bởi phiên bản mới mỗi khi deploy. Chế độ này tiện lợi khi doanh nghiệp muốn kiểm tra nhanh trên Zalo khi ứng dụng vẫn đang được phát triển.
• Testing: tất cả các phiên bản Testing đều được đánh số và lưu trữ trên mục Quản lý phiên bản. 

B8: Khi quá trình deploy thành công, bạn sẽ nhận được màn hình kết quả có chứa mã QR. Ngoài ra, bạn có thể xem lại mã QR của phiên bản vừa deploy nếu đã đóng hộp thoại này bằng cách nhấn vào nút Deployment Result.

Cách tạo Zalo Mini App bằng dòng lệnh (Command line)

Để bắt đầu phát triển ứng dụng Zalo Mini App, bạn có thể chạy lệnh sau:

npx create-zalo-mini-app my-appcd my-appnpm start

Sau khi lệnh được thực thi, bộ Zalo Mini App Cli sẽ được tự động cài đặt hoặc cập nhật version mới nhất (nếu đã cài trước đó) và project my-app sẽ được khởi tạo.

Với những dự án có sẵn muốn tích hợp Zalo Mini App​

Để chuyển dự án có sẵn thành Zalo Mini App và phát hành trên Zalo, vui làm theo hướng dẫn:

• B1: Di chuyển terminal tới thư mục dự án của bạn và chạy lệnh:

zmp init

• B2: Nhập Zalo Mini App ID (ID của MiniApp ứng dụng bạn vừa tạo).
• B3: Chọn phương thức đăng nhập để xác thực tài khoản.
• B4: Sau khi đăng nhập thành công chọn Using ZMP to deploy only, sau đó nhập tên ứng dụng của bạn để hoàn thành.Hệ thống sẽ tự động tạo file app-config.json chứa thông tin cấu hình ứng dụng bạn.

Với dự án xây dựng Zalo Mini App từ đầu​

Để tạo mới dự án và tích hợp sẵn ZaUI Component, doanh nghiệp có thể áp dụng cách sau:

• B1: Tạo thư mục dự án và chạy lệnh. 

zmp init

• B2: Nhập Zalo Mini App ID (ID ứng dụng bạn vừa tạo).
• B3: Chọn phương thức đăng nhập để xác thực tài khoản.
• B4: Sau khi đăng nhập thành công chọn Create a new ZMP project, sau đó làm theo hướng dẫn để cấu hình dự án.

Kết luận

Có 2 cách để tạo lập mini app trên Zalo dễ dàng. Hy vọng bài viết trên giúp bạn biết cách tạo Zalo Mini App và áp dụng nó vào chiến dịch truyền thông của doanh nghiệp.

Doanh nghiệp bạn đang cần triển khai Zalo Mini App? Liên hệ ngay với EPocket Agency qua hotline 0963.299.494 hoặc đăng ký để được hỗ trợ tư vấn.