ZaUI E-Government

ZaUI E-Government là bộ giao diện mẫu (Template) dành cho các ứng dụng Hành chính công trên nền tảng Zalo Mini App.

Template này được thiết kế để hỗ trợ các cơ quan, tổ chức cung cấp dịch vụ công trực tuyến, bao gồm các tính năng như tra cứu hồ sơ, đặt lịch hẹn, gửi phản ánh kiến nghị và xem hướng dẫn thủ tục hành chính.

Demo

Figma

QR Code

Tính năng chính

• Tra cứu thông tin: Xem thông tin tổ chức, cơ quan.
• Dịch vụ công: Tra cứu tình trạng hồ sơ, xem danh sách thủ tục hành chính.
• Tin tức & Hướng dẫn: Cập nhật tin tức và hướng dẫn người dân thực hiện thủ tục.
• Phản ánh & Kiến nghị: Gửi feedback, đánh giá chất lượng dịch vụ.
• Đặt lịch hẹn (Booking): Đăng ký lịch làm việc trực tuyến.

Tech stack

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

• Core: React, ZMP SDK, ZMP UI.
• State Management: Zustand (Quản lý state theo từng feature slice).
• Styling: TailwindCSS.
• Build Tool: Vite.

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 E-Government > Đợ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
   # Hoặc dùng yarn
   yarn install
5. Chạy dev server:

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

Cấu trúc dự án (Project Structure)

Dự án được tổ chức theo cấu trúc module hóa để dễ dàng mở rộng và bảo trì:

.
├── src
│   ├── components      # Các UI component dùng chung (Button, Input...)
│   ├── pages           # Các màn hình chính (Page) và các section con
│   ├── services        # Xử lý gọi API và Mock data
│   │   ├── services.ts      # Implementation gọi API thực tế
│   │   ├── services.mock.ts # Mock data cho việc test UI
│   │   └── zalo.ts          # Các hàm gọi Zalo API (getAccessToken, getUserInfo...)
│   ├── store           # Quản lý State với Zustand
│   ├── constants       # Hằng số và cấu hình (API Endpoint...)
│   ├── utils           # Hàm tiện ích chung
│   ├── types           # Khai báo TypeScript
│   ├── css             # Global style & Tailwind config
│   └── mock            # Database giả lập (db.json)
├── .env                # Biến môi trường chung (APP_ID...)
├── .env.production     # Cấu hình môi trường Production (API URL...)
└── .env.development    # Cấu hình môi trường Development

Quản lý State (State Management)

Dự án sử dụng Zustand. State được chia nhỏ thành các "slice" dựa trên tính năng:

• authSlice: Quản lý thông tin xác thực người dùng.
• appSlice: Quản lý trạng thái chung của ứng dụng (theme, thông báo...).
• organizationSlice: Thông tin cơ quan/tổ chức.
• informationGuideSlice: Dữ liệu về hướng dẫn thủ tục hành chính.
• scheduleSlice: Quản lý việc đặt lịch hẹn.
• feedbackSlice: Quản lý form gửi phản ánh/kiến nghị.

Mã nguồn state nằm trong thư mục /src/store.

Cấu hình (Configuration)

1. Cấu hình API Base URL

Mở file .env.development (khi dev) hoặc .env.production (khi deploy) và cập nhật biến VITE_BASE_URL trỏ về Backend API của bạn.

2. Cấu hình API Endpoints

Danh sách các endpoint được định nghĩa trong src/constants/common.ts. Bạn cần cập nhật các giá trị này khớp với Backend của mình:

export const API = {
  GET_ORGANIZATION: "/get_organization_api", // Lấy thông tin tổ chức
  SEARCH_PROFILES: "/search_profiles_api", // Tra cứu hồ sơ
  GET_ARTICLES: "/get_articles_api", // Lấy tin tức
  FEEDBACK: "/feedback_api", // Gửi phản ánh
  INFORMATION_GUIDE: "/information_guide_api", // Lấy hướng dẫn thủ tục
  CREATE_SCHEDULE: "/create_schedule_api", // Tạo lịch hẹn
  GET_SCHEDULE: "/get_schedule_api", // Lấy danh sách lịch hẹn
  // ...
};

3. Cấu hình App ID

Cập nhật APP_ID của Mini App trong file .env.

Scripts

Các lệnh scripts có sẵn trong package.json:

• npm start: Khởi chạy dự án ở môi trường development.
• npm run deploy: Đóng gói và deploy dự án lên Zalo.

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.