ZaUI Menu

Public template for building an online menu and ordering app for restaurants.

• View dishes on the menu.
• Order dishes with their extra options.
• View order history.
• View restaurant information.
• Follow the restaurant's OA.

Demo	Entrypoint

Setup

Using Zalo Mini App Extension

1. Install Visual Studio Code and Zalo Mini App Extension.
2. Click on Create Project > Choose ZaUI Menu template > Wait until the generated project is ready.
3. Configure App ID and Install Dependencies, then navigate to the Run panel > Start to develop your Mini App 🚀

Using Zalo Mini App CLI

1. Install Node JS.
2. Install Zalo Mini App CLI.
3. Download or clone this repository.
4. Install dependencies:

   npm install

5. Start the dev server using zmp-cli:

   zmp start

6. Open localhost:3000 in your browser and start coding 🔥

Using Zalo Mini App Studio

This template is built using Vite 5.x, which is not compatible with Zalo Mini App Studio.

Deployment

1. Create a mini program. For instructions on how to create a mini program, please refer to the Coffee Shop Tutorial

2. Deploy your mini program to Zalo using the mini app ID created.

   If you’re using Zalo Mini App Extension: navigate to the Deploy panel > Login > Deploy.

   If you’re using zmp-cli:

   zmp login
   zmp deploy

3. Scan the QR code using Zalo to preview your mini program.

Usage:

The repository contains sample UI components for building your application. You may integrate your APIs to fetch menu items, order history, OA info, and process orders. You may also modify the code to suit your business needs.

Folder structure:

• src: Contains all the logic source code of your Mini App. Inside the src folder:

  • components: Reusable components written in React.js.
  • constants: Configurations for the Mini App, such as API endpoints and routing.
  • css: Stylesheets; pre-processors are also supported.
  • hooks: Custom utility hooks.
  • mock: Example data as json files.
  • modules: Each module contains a set of components, hooks, and state management for a specific feature:
    • merchants: Display merchant information and layout the menu.
    • oa: Follow OA.
    • orders: Cart management and order history.
    • products: Product-related features.
  • pages: A Page is also a component but will act as an entire view and must be registered inside app.tsx as a Route.
  • utils: Reusable utility functions, such as API integration, storage management, date and time formatting, etc.
  • app.tsx: Root component of your entire Mini App. React DOM will mount this component to the element #app.
  • main.ts: Entry point of your Mini App.
  • polyfills.ts: Polyfills for older browsers.
  • shared.d.ts: Contains TypeScript declarations for third-party modules and global objects.

• app-config.json: Zalo Mini App Configuration.

The other files (such as tailwind.config.js, vite.config.mts, tsconfig.json, postcss.config.js, .eslintrc.js, and .prettierrc) are configurations for libraries used in your application. Visit the library's documentation to learn how to use them.

Recipes

Load data from your server

1. In .env.development and .env.production, set VITE_API_URL to your server URL.
2. Your server should implement the following APIs:
   • GET /: Retrieve your merchant's information.
   • GET /menu-items: Retrieve items (dishes and their topping options) to be displayed on the menu.
   • GET /oa: Retrieve your OA information and the followed status, based on the user's identity.
   • GET /orders: Retrieve order history, based on the user's identity.
   • GET /sessions: Retrieve the current session, based on the user's identity.
   • POST /orders: Process submitted orders.

The user's identity can be retrieved from the Authorization: Bearer ${ACCESS_TOKEN} header sent along with each API request. Visit the Login with Zalo documentation for more detailed instructions.

Refer to the src/mock/*.json files for sample data and structure.

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.