Chuyển tới nội dung chính

ZaUI Doctor

ZaUI Doctor là bộ giao diện mẫu (Template) dành cho các Bệnh viện, Phòng khám và Cơ sở y tế mong muốn số hóa dịch vụ của mình trên nền tảng Zalo Mini App.

Template này cung cấp đầy đủ các tính năng cần thiết như đặt lịch khám, hỏi đáp bác sĩ, tra cứu thông tin và quản lý hồ sơ sức khỏe.

Demo

Demo

Figma

QR Code

Demo

Tính năng chính​

  • Hệ thống biểu mẫu (Forms): Bao gồm 3 loại form chính: Đặt lịch khám (Booking), Hỏi bác sĩ (Q&A), và Góp ý (Feedback) hỗ trợ tải lên nhiều ảnh.
  • Tra cứu thông minh: Tìm kiếm bác sĩ, chuyên khoa và tin tức y tế.
  • Danh mục thông tin: Hiển thị danh sách dịch vụ, chuyên khoa và tin tức sự kiện.
  • Quản lý cá nhân: Quản lý lịch hẹn sắp tới và hóa đơn dịch vụ.
  • Tương tác: Chat trực tiếp với Zalo OA của bệnh viện.
  • Hồ sơ: Trang cá nhân người dùng.

Tech stack​

vitereactzmp-uizmp-sdkjotaitailwindcss

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

  • Core: React, ZMP SDK, ZMP UI.
  • State Management: Jotai (Atom-based state management).
  • 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 Doctor > Đợ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.

Hướng dẫn phát triển (Usage & Recipes)​

Template cung cấp sẵn các UI component và luồng nghiệp vụ mẫu. Dưới đây là hướng dẫn tùy biến để phù hợp với nhu cầu thực tế.

1. Đăng ký trang mới (Register a new page)​

Để thêm một màn hình mới vào ứng dụng:

  1. Tạo thư mục mới trong src/pages/.

  2. Tạo file index.tsx chứa component chính của trang.

  3. Đăng ký trang đó trong file src/router.tsx:

    {
       path: "/payment-result",
       element: <PaymentResultPage />,
       handle: {
          back: true, // Hiển thị nút back trên header
          title: "Giao dịch hoàn tất", // Tiêu đề header
       },
    }

2. Kết nối dữ liệu từ Server (Data Fetching)​

Dữ liệu được quản lý bởi Jotai thông qua các atoms. Bạn có thể thay đổi nguồn dữ liệu từ mock sang API thật bằng cách sửa file src/state.ts mà không cần sửa giao diện:

- export const doctorsState = atom<Promise<Doctor[]>>(mockDoctors);
+ export const doctorsState = atom<Promise<Doctor[]>>(async () => {
+   const response = await fetch("[https://api.your-clinic.com/doctors](https://api.your-clinic.com/doctors)");
+   return response.json();
+ });

Miễn là dữ liệu trả về khớp với Interface TypeScript (ví dụ: Doctor), UI sẽ tự động hiển thị đúng.

3. Xử lý Submit Form​

Sửa logic hàm onSubmit tại các form bạn muốn xử lý (ví dụ: đặt lịch, gửi câu hỏi). Ví dụ tại src/pages/booking/step2.tsx:

onSubmit={async () => {
-   await wait(1500); // Giả lập chờ
-   promptJSON(formData); // Hiển thị popup data mẫu
+   // Gọi API thực tế
+   const response = await fetch("[https://api.your-clinic.com/booking](https://api.your-clinic.com/booking)", {
+      method: "POST",
+      headers: {
+      "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+   });

    // Điều hướng sau khi thành công
    navigate("/booking/3", {
      viewTransition: true,
    });
}}

4. Cấu hình chung (App Config)​

Mở file app-config.json để thay đổi các thông tin cơ bản:

  • Đổi tên ứng dụng: 
    {
      "app": {
        "title": "Bệnh viện Đa khoa ABC"
        // ...
      }
    }
  • Đổi Zalo OA ID (Để kích hoạt tính năng Chat): 
    {
      "template": {
        "name": "zaui-doctor",
        "oaID": "4318657068771012646" // Thay bằng OA ID của bạn
      }
    }

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

Thay đổi màu sắc chủ đạo của ứng dụng bằng cách chỉnh sửa các biến CSS trong src/css/app.scss:

:root {
  --primary: #00abbb; /* Màu chính */
  --primary-gradient: #00bead; /* Màu gradient */
  --highlight: #01bdaf1a; /* Màu nền highlight */
  --background: #f2f9f9; /* Màu nền chung */
  --disabled: #9a9a9a; /* Màu trạng thái vô hiệu */
}

Ví dụ minh họa:

Theme Gốc (#00abbb)Theme Đỏ (#992c2c)Theme Xanh lá (#31992c)

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.

ZaUI Doctor

zi-chevron-up
miniapp-logo

Khám phá