System Draft: Frontend App System
NOTE
Đây là trang nháp tài liệu kỹ thuật dành cho frontend app (Web & Mobile) để kiểm tra khả năng hiển thị của VitePress.
1. Subsystem Introduction
Phân hệ hanoi-app cung cấp trải nghiệm trực quan cho người dùng cuối. Hệ thống được phát triển đa nền tảng:
- Web App: Hỗ trợ hiển thị responsive trên PC và Mobile Browser, tối ưu SEO để tra cứu điểm du lịch.
- Mobile App: Ứng dụng chạy trên iOS và Android phục vụ điều hướng xe buýt và định vị GPS thời gian thực.
2. Technology Stack
Chúng tôi lựa chọn bộ công nghệ hiện đại và đồng bộ nhằm tối ưu thời gian phát triển trong hackathon:
- Framework: React 18 (cho Web) & React Native (cho Mobile).
- Quản lý state: Redux Toolkit & React Query (để cache API từ backend).
- Styling: TailwindCSS (tiện lợi cho việc xây dựng UI nhanh chóng, nhất quán).
- Bản đồ: Mapbox GL JS / React Native Mapbox (cho trải nghiệm vẽ đường đi và cập nhật marker GPS mượt mà).
3. Key Screens
3.1. Bản đồ Giao thông thời gian thực
- Tính năng: Cho phép người dùng theo dõi vị trí xe buýt chạy trên bản đồ, ước tính thời gian xe đến trạm (ETA).
- UI Interaction: Sử dụng web sockets để nhận sự kiện xe chạy từ backend, cập nhật vị trí xe mà không cần reload trang.
3.2. Cẩm nang du lịch & Di sản văn hóa
- Tính năng: Bản đồ hiển thị các di tích lịch sử nổi tiếng tại Hà Nội (Lăng Bác, Hồ Gươm, Văn Miếu Quốc Tử Giám).
- Trải nghiệm: Người dùng chạm vào điểm di tích để nghe audio guide tự động (text-to-speech) hoặc xem ảnh 360 độ.
3.3. Phản ánh kiến nghị đô thị
- Tính năng: Form gửi phản ánh các vấn đề đô thị kèm GPS location hiện tại và upload ảnh camera.
4. Local Development Guide
Tại thư mục hanoi-app/:
bash
# Cài đặt thư viện
npm install
# Chạy bản Web Client
npm run dev
# Khởi chạy Metro Bundler cho React Native (Mobile)
npm run start