ZaUI Market

ZaUI Market là bộ giao diện mẫu (Template) dành cho các ứng dụng Đi chợ trực tuyến hoặc Sàn thương mại điện tử quy mô nhỏ (Marketplace) trên nền tảng Zalo Mini App.

Template này hỗ trợ các nhà bán hàng (vendors) đăng bán sản phẩm, bao gồm đầy đủ các tính năng như xem sản phẩm, giỏ hàng, thanh toán, quản lý đơn hàng và hồ sơ cá nhân.

Demo

Figma

QR Code

Tính năng chính

• Duyệt sản phẩm: Xem danh sách sản phẩm theo danh mục.
• Giỏ hàng & Thanh toán: Quy trình mua sắm hoàn chỉnh.
• Quản lý đơn hàng: Theo dõi trạng thái đơn hàng đã đặt.
• Điểm nhận hàng (Stations): Chọn điểm nhận hàng gần nhất (nếu có).
• Hồ sơ cá nhân: Quản lý thông tin người dùng.

Tech stack

Dự án sử dụng các công nghệ:

• Core: React, ZMP SDK, ZMP UI.
• State Management: Jotai.
• Styling: TailwindCSS.
• Build Tool: Vite 5.x.

Hướng dẫn cài đặt và sử dụng

Sử dụng Zalo Mini App Extension

1. Cài đặt Visual Studio Code và Zalo Mini App Extension.
2. Nhấp vào Create Project > Chọn template ZaUI Market > Đợi khởi tạo dự án.
3. Cấu hình App ID và Install Dependencies, sau đó vào bảng Run > chọn Start để bắt đầu phát triển 🚀

Sử dụng Zalo Mini App CLI

1. Cài đặt Node JS.
2. Cài đặt Mini App DevTools CLI.
3. Tải xuống hoặc clone repository này.
4. Cài đặt thư viện:

   npm install
5. Chạy dev server:

   zmp start
6. Mở localhost:3000 trên trình duyệt 🔥

Triển khai (Deployment)

1. Tạo Mini App ID mới (Tham khảo Hướng dẫn tạo Mini App).
2. Triển khai code lên Zalo:
   • Extension: Chọn tab Deploy > Login > Deploy.
   • CLI:

     zmp login
     zmp deploy
3. Quét mã QR bằng Zalo để xem trước phiên bản đã deploy.

Cấu trúc & Tùy biến (Usage)

Template cung cấp sẵn giao diện UI hoàn chỉnh. Nhiệm vụ của bạn là tích hợp API để lấy dữ liệu thực tế.

Cấu trúc thư mục:

• src: Mã nguồn chính.

  • components: Các component React tái sử dụng.
  • css: Stylesheet (SCSS/Tailwind).
  • mock: Dữ liệu mẫu (JSON).
  • pages: Các màn hình chính (Page).
  • static: Tài nguyên tĩnh. Lưu ý: File lớn nên host trên CDN.
  • utils: Hàm tiện ích (API client, format tiền tệ...).
  • app.ts: Component gốc (Root).
  • hooks.ts: Các Custom Hooks.
  • router.ts: Cấu hình Router/Navigation.
  • state.ts: Quản lý State toàn cục bằng Jotai.
  • types.d.ts: Khai báo kiểu dữ liệu TypeScript.

• app-config.json: Cấu hình Zalo Mini App.

Hướng dẫn tích hợp (Recipes)

Kết nối với Server (Load data)

ZaUI Market quản lý cấu hình API endpoint thông qua file JSON.

1. Mở file app-config.json, cập nhật template.apiUrl thành đường dẫn API của bạn:

   "template": {
      "apiUrl": "[https://api.your-market.com/v1/](https://api.your-market.com/v1/)",
   }
2. Server cần triển khai các API sau:
   • GET /categories: Lấy danh sách danh mục sản phẩm.
   • GET /products: Lấy danh sách sản phẩm.
   • GET /banners: Lấy danh sách banner trang chủ.
   • GET /stations: Lấy danh sách điểm nhận hàng (nếu mô hình kinh doanh yêu cầu).
   • GET /orders: Lấy danh sách đơn hàng đã đặt của người dùng.

Mẹo: Tham khảo cấu trúc dữ liệu trong src/mock/*.json.

Tích hợp Zalo OA

Template hỗ trợ Widget Quan tâm OA để giữ liên lạc với khách hàng:

Tính năng	Hình ảnh Demo	Cấu hình
Widget Quan tâm OA		Cần thực hiện Xác thực Mini App với OA. Xem thêm tài liệu về showOAWidget.

Tùy chỉnh giao diện (Theme)

Bạn có thể thay đổi bộ màu thương hiệu bằng cách chỉnh sửa các biến CSS trong file src/css/tailwind.scss:

:root {
  --primary: #8420ff; /* Màu chủ đạo */
  /* Các biến màu phụ trợ khác */
  --zaui-light-button-secondary-background: #e3b2f1;
  --zaui-light-button-secondary-text: #590872;
}

Design Disclaimer

Lưu ý:

• Nội dung thiết kế, hình ảnh minh họa và ví dụ trong bài viết này chỉ mang tính chất tham khảo nhằm phục vụ mục đích nghiên cứu, minh họa và thử nghiệm.

• Zalo Group không chịu trách nhiệm cho bất kỳ việc sử dụng, triển khai hoặc diễn giải nào phát sinh từ nội dung này trong môi trường thực tế hoặc thương mại.

License

Copyright (c) Zalo Group and its affiliates. All rights reserved.

The examples provided by Zalo Group are for non-commercial testing and evaluation purposes only. Zalo Group reserves all rights not expressly granted.