- Install Visual Studio Code and Zalo Mini App Extension.
- In the Home tab, process Config App ID and Install Dependencies.
- Navigate to the Run tab, select the suitable launcher, and click Start.
- Install Node JS.
- Install Zalo Mini App CLI.
- Install dependencies:
npm install
- Start the dev server:
zmp start
- Open
localhost:3000in your browser.
-
Create a mini program. For instructions on how to create a mini program, please refer to the Coffee Shop Tutorial
-
Deploy your mini program to Zalo using the mini app ID created.
- Using Zalo Mini App Extension: navigate to the Deploy panel > Login > Deploy.
- Using Zalo Mini App CLI:
zmp login zmp deploy
-
Open the mini app in Zalo by scanning the QR code.
- Zalo Mini App Official Website
- ZaUI Documentation
- ZMP SDK Documentation
- DevTools Documentation
- Ready-made Mini App Templates
- Community Support
import React, { Suspense, useState } from "react"; import { List, Page, Icon, useNavigate, BottomNavigation } from "zmp-ui"; import { CalendarDays, Users } from "lucide-react"; import UserCard from "../components/user-card"; import { handleAuthorization } from "../state";
const HomePage = () => { const [activeTab, setActiveTab] = useState("chat"); const notifications = [ { action: "Nguyễn Văn B đã thêm nhân sự mới Trần Thị C", timeAgo: "30 phút trước", }, { action: "Lê Thị D đã cập nhật lịch làm việc tuần 24/06 - 30/06", timeAgo: "2 giờ trước", }, { action: "Phạm Văn E đã tạo công việc mới Phát triển tính năng ABC", timeAgo: "2 giờ trước", }, { action: "Hệ thống đã gửi thông báo Cập nhật lịch làm việc", timeAgo: "6 giờ trước", }, ];
const navigate = useNavigate(); return (
Dashboard
Xin chào, chúc bạn một ngày làm việc hiệu quả
+2 tuần này
24
Tổng nhân sự
<div className="bg-white rounded-lg px-3 py-5 flex flex-col gap-5">
<div>
<div className="flex items-center justify-between">
<div className="bg-[#FFEDD5] p-2 text-[#EA580C] rounded-lg">
<CalendarDays className="size-6" />
</div>
<p className="bg-[#FEE2E2] text-xs px-3 py-1 rounded-full text-[#A73636] font-semibold">
-2 tuần này
</p>
</div>
</div>
<div className="flex flex-col gap-1">
<p className="font-bold text-2xl">15</p>
<p className="text-base text-gray-500 font-semibold">
Ca làm hôm nay
</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg p-5 mt-4">
<div>
<p className="font-bold text-xl">Hoạt động gần đây</p>
<span className="text-base text-gray-500 font-medium">
Các hoạt động mới nhất trong hệ thống
</span>
</div>
<div>
{notifications.map((notification, index) => (
<div key={index} className="flex gap-3 mt-3 items-center">
<Icon icon="zi-clock-1" size={18} />
<div className="text-xs">
<div className="flex gap-1">
<p className="font-bold">{notification.action}</p>
</div>
<div>
<p>{notification.timeAgo}</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<BottomNavigation
fixed
activeKey={activeTab}
onChange={(key) => setActiveTab(key)}
>
<BottomNavigation.Item
key="employees"
label="Nhân sự"
icon={<Icon icon="zi-members-solid" />}
onClick={() => navigate("/employees")}
/>
<BottomNavigation.Item
key="employees"
label="Nhân sự"
icon={<Icon icon="zi-members-solid" />}
onClick={() => navigate("/employees")}
/>
<BottomNavigation.Item
key="employees"
label="Đăng nhập"
icon={<Icon icon="zi-members-solid" />}
onClick={handleAuthorization}
/>
<BottomNavigation.Item
key="profile"
label="Cá nhân"
icon={<Icon icon="zi-members-solid" />}
onClick={() => navigate("/user")}
/>
</BottomNavigation>
</Page>
); };
export default HomePage;