ZaUI Menu

ZaUI Menu là bộ giao diện mẫu (Template) dành cho các ứng dụng đặt món trực tuyến (Online Menu & Ordering) cho nhà hàng, quán ăn trên nền tảng Zalo Mini App.

Dự án này giúp các lập trình viên khởi tạo dự án nhanh chóng, tích hợp sẵn các luồng đặt món, quản lý giỏ hàng và tương tác với OA.

Demo

Figma

QR Code

Tính năng chính

Bộ template bao gồm các tính năng thiết yếu cho ngành F&B:

• Xem thực đơn: Hiển thị danh sách món ăn hấp dẫn.
• Đặt món (Ordering): Đặt món kèm theo các tùy chọn bổ sung (topping, size...).
• Lịch sử đơn hàng: Xem lại danh sách các đơn hàng đã đặt.
• Thông tin nhà hàng: Xem địa chỉ, thông tin giới thiệu.
• Quan tâm OA: Tích hợp tính năng theo dõi Official Account của nhà hàng.

Tech stack

Dự án được xây dựng dựa trên các công nghệ hiện đại:

• Core: React, Zalo Mini App SDK (zmp-sdk), Zalo Mini App UI Kit (zmp-ui).
• State Management: Zustand.
• Data Fetching: TanStack Query (React Query).
• Styling: TailwindCSS, SCSS.
• 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 Menu > Đợi cho đến khi dự án được khởi tạo xong.
3. Cấu hình App ID và Install Dependencies, sau đó chuyển đến bảng Run > chọn Start để bắt đầu phát triển Mini App của bạ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 các thư viện bổ trợ:

   npm install
5. Khởi chạy server phát triển bằng zmp-cli:

   zmp start
6. Mở localhost:3000 trên trình duyệt và bắt đầu lập trình 🔥

Triển khai (Deployment)

1. Tạo một mini app. Để xem hướng dẫn cách tạo mini app, vui lòng tham khảo Coffee Shop Tutorial.

2. Triển khai mini app của bạn lên Zalo bằng Mini App ID đã tạo.

   Nếu bạn sử dụng Zalo Mini App Extension: điều hướng đến bảng Deploy > Login > Deploy.

   Nếu đang dùng zmp-cli:

   zmp login
   zmp deploy

3. Quét mã QR bằng ứng dụng Zalo để xem trước (preview) mini app của bạn.

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

Repository này chứa các component UI mẫu để xây dựng ứng dụng. Bạn có thể tích hợp API để lấy danh sách thực đơn, lịch sử đơn hàng, thông tin OA và xử lý đơn hàng. Bạn cũng có thể sửa đổi mã nguồn để phù hợp với nhu cầu kinh doanh.

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

• src: Chứa toàn bộ mã nguồn logic của Mini App. Bên trong thư mục src gồm:

  • components: Các component có thể tái sử dụng, viết bằng React.js.
  • constants: Các cấu hình cho Mini App, ví dụ như API endpoints và routing.
  • css: Các tệp stylesheet; hỗ trợ cả pre-processor.
  • hooks: Các custom hook tiện ích.
  • mock: Dữ liệu mẫu dưới dạng file json.
  • modules: Mỗi module chứa một tập hợp các component, hook và state management cho một tính năng cụ thể:
    • merchants: Hiển thị thông tin nhà hàng và bố cục thực đơn.
    • oa: Theo dõi OA (Official Account).
    • orders: Quản lý giỏ hàng và lịch sử đơn hàng.
    • products: Các tính năng liên quan đến sản phẩm.
  • pages: Mỗi Page là một view hoàn chỉnh và phải được đăng ký trong app.tsx dưới dạng một Route.
  • utils: Các hàm tiện ích dùng chung như tích hợp API, quản lý storage, định dạng ngày giờ, v.v.
  • app.tsx: Component gốc (Root) của toàn bộ Mini App. React DOM sẽ mount component này vào phần tử #app.
  • main.ts: Điểm khởi đầu (entry point) của Mini App.
  • polyfills.ts: Polyfills hỗ trợ các trình duyệt cũ.
  • shared.d.ts: Chứa các khai báo TypeScript cho module bên thứ ba và đối tượng global.

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

Các tệp còn lại (như tailwind.config.js, vite.config.mts, tsconfig.json, postcss.config.js, .eslintrc.js, và .prettierrc) là cấu hình cho các thư viện sử dụng trong ứng dụng.

Tích hợp (Recipes)

Tải dữ liệu từ server của bạn

1. Trong file .env.development và .env.production, thiết lập biến VITE_API_URL thành đường dẫn server của bạn.
2. Server của bạn nên triển khai các API sau:
   • GET /: Lấy thông tin nhà hàng (merchant).
   • GET /menu-items: Lấy danh sách món ăn và các tùy chọn topping để hiển thị trên menu.
   • GET /oa: Lấy thông tin OA và trạng thái quan tâm, dựa trên định danh người dùng.
   • GET /orders: Lấy lịch sử đơn hàng, dựa trên định danh người dùng.
   • GET /sessions: Lấy phiên làm việc hiện tại, dựa trên định danh người dùng.
   • POST /orders: Xử lý đơn hàng được gửi lên.

Lưu ý: Định danh người dùng có thể được lấy từ header Authorization: Bearer ${ACCESS_TOKEN} gửi kèm trong mỗi request API. Tham khảo tài liệu Đăng nhập với Zalo để biết hướng dẫn chi tiết.

Tham khảo các file src/mock/*.json để biết cấu trúc và dữ liệu mẫu.

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.