Hướng Dẫn Tạo Zalo Mini App

Thực hiện theo các bước chi tiết dưới đây để tạo Zalo Mini App của bạn từ đầu đến cuối

Cài Đặt & Thiết Lập Môi Trường

Cài đặt Visual Studio Code, Extension và tạo dự án Mini App

1. Cài đặt Node.js

Truy cập trang https://nodejs.org/en để tải và cài đặt Node.js. Khuyến nghị sử dụng phiên bản LTS (Long Term Support) để đảm bảo tính ổn định.

Sau khi cài đặt, kiểm tra cài đặt thành công bằng cách mở Terminal/Command Prompt và chạy lệnh:

node --version

Nếu hiển thị số phiên bản (ví dụ: v20.x.x), nghĩa là bạn đã cài đặt thành công.

2. Cài đặt Visual Studio Code

Cài đặt VS Code
Tải và cài đặt Visual Studio Code
Cài đặt Extension
Cài đặt Extension "Zalo Mini App"

3. Tạo dự án Zalo Mini App

Tạo dự án mới
Tạo mới Zalo Mini App, chọn "Vite 5 + TypeScript"
Chọn thư mục
Chọn thư mục lưu trữ MiniApp

4. Đặt tên thư mục và dự án

Đặt tên dự án
Đặt tên thư mục + tên MiniApp
Đặt tên dự án 2
Xác nhận tên dự án
Đặt tên dự án 3
Hoàn tất đặt tên

5. Cài đặt môi trường phát triển

Cài đặt môi trường
Bấm "Cài đặt ngay" để setup môi trường

Đăng Ký Zalo Mini App

Tạo tài khoản developer và đăng ký Mini App trên Zalo Platform

1. Truy cập Zalo Platform

Truy cập Zalo Platform
Truy cập https://miniapp.zaloplatforms.com/ và đăng nhập
Vào phần developers
Vào phần https://miniapp.zaloplatforms.com/developers

2. Tạo Zalo App

Tạo Zalo App
Tạo "Zalo App" (khác Zalo Mini App)
Cấu hình Zalo App
Cấu hình thông tin Zalo App

3. Tạo Mini App từ Zalo App

Chọn Zalo App
Quay lại trang developers, chọn "Zalo App" vừa tạo
Tạo Mini App
Chọn "Tạo Mini App"

4. Điền thông tin Mini App

Thông tin cơ bản
Điền thông tin cơ bản
Cấu hình chi tiết
Cấu hình chi tiết
Thông tin bổ sung
Thông tin bổ sung
Hoàn tất cấu hình
Hoàn tất cấu hình
Xác nhận tạo Mini App
Xác nhận tạo Mini App

5. Lấy App ID

Lấy App ID
Vào Mini App vừa tạo, copy "ID" để liên kết

6. Cấu hình trong Visual Studio Code

Cấu hình VS Code
Quay lại VS Code, bấm nút "Cấu hình"
Paste App ID
Paste "ID" vào "Mini App ID"

7. Test ứng dụng

Test Simulator
Chuyển sang tab "Phát triển" và khởi động "Simulator"
Test trên Zalo
Chọn tab "Deploy" và quét QR để cấp quyền xác thực
Deploy ứng dụng
Bấm "Deploy" để build và upload lên Zalo Platform

Cài Đặt Cursor AI

Cài đặt và cấu hình Cursor AI để hỗ trợ phát triển hiệu quả

1. Tải và cài đặt Cursor AI

Tải Cursor AI
Tải Cursor AI từ trang chủ chính thức

2. Mở dự án trong Cursor

Mở dự án trong Cursor
Mở Cursor và mở project của bạn

3. Setup Cursor AI với OverallStructure

Setup Cursor AI
Setup Cursor AI với system prompt để tạo thư mục OverallStructure

💡 Tại sao cần OverallStructure?

  • Context size giới hạn: Claude có giới hạn context, OverallStructure giúp AI không mất context
  • Hiệu quả hơn: AI có thể hoạt động hiệu quả hơn khi hiểu rõ cấu trúc project
  • Bổ sung thông tin: Chứa cấu trúc project, specs về tính năng, specs về technical
System Prompt mẫu:
"Tạo thư mục OverallStructure để lưu trữ:
- Cấu trúc project
- Specs về tính năng  
- Specs về technical
- Documentation quan trọng"

Prompt App Của Bạn

Sử dụng AI để tạo code và tính năng cho Mini App một cách hiệu quả

1. Bắt đầu Prompt

Bắt đầu prompt
Bắt đầu prompt! Prompt cái mà bạn muốn build

💡 Mẹo Prompt hiệu quả:

  • Prompt càng nhiều càng tốt: Càng prompt nhiều, bạn càng hiểu cách prompt hiệu quả
  • Mô tả chi tiết: Càng chi tiết, AI càng hiểu rõ yêu cầu
  • Thử nghiệm: Đừng ngại thử các cách prompt khác nhau

2. Cursor AI lên kế hoạch và thực hiện

Cursor lên kế hoạch
Cursor sẽ bắt đầu lên kế hoạch, sau đó thực hiện từng bước

🔄 Quy trình AI:

  1. Phân tích yêu cầu: AI hiểu prompt của bạn
  2. Lên kế hoạch: Tạo roadmap để hoàn thành task
  3. Thực hiện từng bước: Code và implement theo kế hoạch
  4. Kiểm tra và sửa lỗi: Test và fix các vấn đề

Deploy & Test Mini App

Triển khai và kiểm thử Mini App trên Zalo Platform

1. Kiểm tra code và test trên Simulator

Kiểm tra code trong VS Code
Quay lại Visual Studio Code, xem code đã được tạo ra hay chưa

🔍 Các cách test:

  • Test trên Simulator: Sử dụng Zalo Simulator để test
  • Deploy Development mode: Deploy ở mode Development để test ngay trên Zalo
  • Kiểm tra code: Review code được AI tạo ra

2. Deploy Testing mode để verify

Deploy Testing mode
Sau khi hoàn thành app, deploy ở mode "Testing" để verify

📋 Quy trình Testing:

  1. Hoàn thiện app: Đảm bảo tất cả tính năng hoạt động
  2. Deploy Testing: Deploy ở mode Testing để verify
  3. Kiểm tra kỹ lưỡng: Test tất cả tính năng trước khi publish
  4. Chuẩn bị publish: Khi đã ổn định, chuyển sang mode Production

3. Mời người dùng thử nghiệm

Quản lý Mini App
Vào mục "Quản lý" của Zalo Mini App
Phân quyền thành viên
Chọn "Phân quyền thành viên" -> "Thêm người dùng mới"
Tạo link thử nghiệm
Chọn "Tạo link mới thử nghiệm" để mời người khác test

👥 Mời người dùng thử nghiệm:

  1. Vào Quản lý: Truy cập mục "Quản lý" của Zalo Mini App
  2. Phân quyền: Chọn "Phân quyền thành viên" -> "Thêm người dùng mới"
  3. Tạo link: Chọn "Tạo link mới thử nghiệm"
  4. Chia sẻ: Gửi link cho người khác để họ có thể test app trước khi publish
💡 Lưu ý: Tính năng này giúp bạn có thể mời người khác test app của mình trước khi publish chính thức, đảm bảo chất lượng và trải nghiệm người dùng tốt nhất.