Trang chủ   Javascript   Website "Quản lý"   Hệ thống quản lý cho thuê xe điện trẻ em - KidDriver
Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe
Ảnh demo (6)
  Xem LIVE DEMO
[Mã code 97086]

Hệ thống quản lý cho thuê xe điện trẻ em - KidDriver

  (1 Đánh giá)
  0       6    

KidsDriver Manager là hệ thống quản lý dịch vụ cho thuê xe điện trẻ em bằng mã QR. Hệ thống kết nối trực tiếp giữa thiết bị của khách và dashboard của chủ cửa hàng, hỗ trợ toàn bộ quy trình

Danh mục
Thể loại
WebsiteQuản lý
Ngày đăng
10-6-2026
Loại file
Full code
File download
 .rar [ MB]

     Báo vi phạm bản quyền
CAM KẾT TỪ NGƯỜI BÁN
- Hệ thống Product 100% giống hệt Demo
- Cam kết hỗ trợ cài đặt
- Các chức năng hoạt động đầy đủ

Nguyên Nguyễn
(Hạng vàng)
Xem trang

Source code
1

Đánh giá (2)
5/5

Ngày tham gia
11/5/2026

Mô tả hệ thống
  • KidsDriver Manager là hệ thống quản lý dịch vụ cho thuê xe điện trẻ em bằng mã QR. Hệ thống kết nối trực tiếp giữa thiết bị của khách và dashboard của chủ cửa hàng, hỗ trợ toàn bộ quy trình thuê, đổi, trả xe, xác nhận giao dịch và tính tiền tự động.
  • Dữ liệu thử nghiệm và dữ liệu vận hành chính thức được tách riêng, giúp cửa hàng kiểm thử tính năng mà không ảnh hưởng đến hoạt động thực tế.
 
Chức năng chính
  1. Đăng ký, đăng nhập và quản lý tài khoản cửa hàng.
  2. Thêm, sửa, xoá và theo dõi trạng thái đội xe.
  3. Tạo mã QR thuê riêng cho từng xe.
  4. Khách quét QR để bắt đầu thuê xe.
  5. Tính thời gian và chi phí thuê tự động.
  6. Gửi và xác nhận yêu cầu đổi xe.
  7. Gửi và xác nhận yêu cầu trả xe.
  8. Đồng bộ trạng thái tức thời giữa máy khách và chủ cửa hàng.
  9. Hiển thị biên lai thanh toán sau khi trả xe.
  10. Lưu lịch sử thuê, đổi, trả xe và doanh thu.
  11. Hiển thị thông báo vận hành trên dashboard.
  12. Quản lý tài khoản, gói dịch vụ và cửa hàng bằng trang Admin.
  13. Cung cấp tài liệu hướng dẫn sử dụng trực tiếp trong ứng dụng.
  14. Hỗ trợ PWA, cài đặt ứng dụng trên điện thoại và cập nhật phiên bản.
  15. Tách biệt hoàn toàn dữ liệu hệ thống Test và Product.

 


XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO


Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe

Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe

Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe

Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe

Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe

Hệ thống quản lý,thuê xe,xe điện,trẻ em,quản lý xe


HƯỚNG DẪN CÀI ĐẶT
1. Yêu cầu hệ thống
  • Node.js phiên bản 20 trở lên.
  • npm phiên bản 10 trở lên.
  • Tài khoản Firebase.
  • Tài khoản Netlify hoặc Firebase Hosting để triển khai website.
  • Trình soạn thảo mã nguồn, khuyến nghị Visual Studio Code.
 
2. Cài đặt source code
  • Giải nén source code, mở terminal tại thư mục dự án và chạy: npm install
 
3. Tạo Firebase Project
  • Truy cập Firebase Console.
  • Chọn Add project và tạo project mới.
  • Thêm một ứng dụng Web.
  • Sao chép thông tin Firebase Config.
  • Bật Authentication → Sign-in method → Email/Password.
  • Tạo Firestore Database.
 
4. Cấu hình môi trường
    4.1 Tạo file .env.local tại thư mục gốc:
  • VITE_FIREBASE_API_KEY=YOUR_API_KEY
  • VITE_FIREBASE_AUTH_DOMAIN=YOUR_PROJECT.firebaseapp.com
  • VITE_FIREBASE_DATABASE_URL=https://YOUR_PROJECT-default-rtdb.firebaseio.com
  • VITE_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
  • VITE_FIREBASE_STORAGE_BUCKET=YOUR_PROJECT.appspot.com
  • VITE_FIREBASE_MESSAGING_SENDER_ID=YOUR_SENDER_ID
  • VITE_FIREBASE_APP_ID=YOUR_APP_ID
  • VITE_FIREBASE_MEASUREMENT_ID=YOUR_MEASUREMENT_ID
  •  
  • VITE_TEST_MODE=true
  • NEXT_PUBLIC_TEST_MODE=true
  •  
  • VITE_FIREBASE_DATABASE_PREFIX_TEST=test_
  • VITE_FIREBASE_DATABASE_PREFIX_PRODUCT=product_
  •  
  • VITE_FIREBASE_DEFAULT_FALLBACK_URL=https://YOUR_DOMAIN/
 
Không chia sẻ hoặc commit file .env.local lên kho mã nguồn công khai.
 
5. Cài Firebase CLI
  • npm install -g firebase-tools
  • firebase login
  • firebase use --add
Chọn Firebase Project vừa tạo.
 
6. Deploy Firestore Rules
  • firebase deploy --only firestore:rules
  • Bước này bắt buộc để ứng dụng có quyền đọc và ghi dữ liệu đúng môi trường.
 
7. Chạy thử ứng dụng
   7.1 Chạy với dữ liệu test:
  • npm run dev
  • Sau đó truy cập:
  • http://localhost:5173
  • Chạy local với dữ liệu product:
  • npm run dev:prod
  • Khuyến nghị chỉ dùng npm run dev trong quá trình cài đặt và kiểm thử.
 
8. Tạo tài khoản quản trị
  • Tạo user trong Firebase Authentication.
  • Nếu là hệ thống test, username cần có _test, ví dụ admin_test.
  • Lấy UID của tài khoản vừa tạo.
  • Tạo document có ID bằng UID tại:
  • test_admins/{uid}
  • Nội dung document:
  • {
  •   "uid": "FIREBASE_AUTH_UID",
  •   "name": "Admin",
  •   "role": "admin",
  •   "active": true
  • }
  • Đối với production, tạo document trong:
  • product_admins/{uid}
 
9. Kiểm tra ứng dụng
   9.1 Thực hiện kiểm tra:
  • Đăng ký và đăng nhập chủ cửa hàng.
  • Thêm một xe và cấu hình giá thuê.
  • Mở QR của xe trên thiết bị khách.
  • Bắt đầu thuê xe.
  • Thử yêu cầu đổi xe.
  • Thử yêu cầu trả xe.
  • Xác nhận trả xe trên dashboard chủ cửa hàng.
  • Kiểm tra máy khách chuyển sang trang cảm ơn và hiển thị biên lai.
 
10. Build production
  • npm run typecheck
  • npm run build
  • Source production sẽ được tạo trong thư mục: dist/
 
11. Deploy Netlify
  • Đưa source code lên GitHub.
  • Kết nối repository với Netlify.
  • Build command: npm run build.
  • Publish directory: dist.
  • Thêm toàn bộ biến môi trường Firebase.
  • Đặt môi trường production:
  • VITE_TEST_MODE=false
  • NEXT_PUBLIC_TEST_MODE=false
  • Nếu dùng chức năng Firebase Admin, thêm service account:
  • FIREBASE_SERVICE_ACCOUNT_JSON={"type":"service_account",...}
  • Không đặt service account trong biến bắt đầu bằng VITE_.
 
12. Lưu ý quan trọng
  • Development và preview deploy phải sử dụng dữ liệu test_*.
  • Production phải sử dụng dữ liệu product_*.
  • Không dùng tài khoản test trên hệ thống production.
  • Luôn deploy Firestore Rules sau khi đổi Firebase Project.
  • Cập nhật domain trong SEO, sitemap và Firebase fallback URL.
  • Không chia sẻ Firebase service account hoặc private key.
  • Nên sao lưu Firestore trước khi nâng cấp hoặc chạy script migration.

 

NOTE: Sau khi bạn tải file sẽ có folder document -> mình đã viết toàn bộ cách sử dụng và cách cấu hình cho từng role




Nguồn: Topcode.vn

BÌNH LUẬN (0)

   BÌNH LUẬN  


ĐÁNH GIÁ (1)

ĐIỂM TRUNG BÌNH

5
1 Đánh giá
Code rất tốt (1)
Code tốt (0)
Code rất hay (0)
Code hay (0)
Bình thường (0)
Thành viên
Nội dung đánh giá
14:16 - 10/6/2026
Code rất tốt
Code rất tốt và phù hợp để phát triển

HỖ TRỢ TRỰC TUYẾN