EatSmart - Food Discovery App

🍽️ Mô tả

EatSmart là ứng dụng mobile-first giúp bạn tìm kiếm nhà hàng và món ăn phù hợp với thời gian của bạn. Ứng dụng có tích hợp Google Maps với chức năng dẫn đường thật.

✨ Tính năng

🎯 Core Features

Tìm kiếm theo thời gian: Nhập thời gian bắt đầu và kết thúc để tìm nhà hàng phù hợp
Bộ lọc thông minh: Lọc theo gần nhất, phổ biến, đánh giá
Chi tiết món ăn: Xem thông tin chi tiết, đánh giá và món liên quan
Đánh giá: Xem và đọc reviews từ người dùng khác

🗺️ Google Maps Integration

Bản đồ thật: Hiển thị vị trí nhà hàng trên Google Maps
Dẫn đường: Chỉ đường từ vị trí hiện tại đến nhà hàng
Gọi điện: Gọi trực tiếp đến nhà hàng
Mở ứng dụng Maps: Tự động mở Google Maps hoặc Apple Maps trên mobile

📱 Mobile-Optimized

Responsive design: Tối ưu cho tất cả kích thước màn hình
Touch-friendly: Các nút và tương tác được thiết kế cho di động
PWA ready: Có thể cài đặt như app native
iPhone support: Hỗ trợ Safe Area và notch

🚀 Cài đặt và Chạy

1. Clone Repository

git clone <repository-url>
cd eatsmart-vanilla

2. Setup Google Maps API

Bước 1: Tạo Google Cloud Project

Truy cập Google Cloud Console
Tạo project mới hoặc chọn project hiện có
Enable các APIs sau:
- Maps JavaScript API
- Directions API
- Places API (optional)
- Geolocation API (optional)

Bước 2: Tạo API Key

Vào APIs & Services > Credentials
Click Create Credentials > API Key
Copy API key được tạo

Bước 3: Cấu hình API Key (Khuyến nghị)

Click vào API key vừa tạo
Thêm Application restrictions:
- HTTP referrers cho web app
- Thêm domain của bạn (ví dụ: localhost:*, yourdomain.com/*)
Thêm API restrictions:
- Chọn "Restrict key"
- Chọn các APIs: Maps JavaScript API, Directions API

Bước 4: Cập nhật API Key vào Code

Mở file index.html và thay YOUR_API_KEY bằng API key thật:

<!-- Thay đổi dòng này -->
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initGoogleMaps&libraries=geometry,places"
></script>

<!-- Thành -->
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_ACTUAL_API_KEY&callback=initGoogleMaps&libraries=geometry,places"
></script>

Bước 5: Enable Billing (Bắt buộc cho Maps API)

🚨 Quan trọng: Google Maps API yêu cầu enable billing, ngay cả khi sử dụng free tier.

Enable Billing:

Trong Google Cloud Console, vào "Billing"
Click "Link a billing account"
Tạo billing account mới hoặc chọn account hiện có
Thêm thẻ tín dụng (không bị charge nếu ở trong free tier)

Free Tier - $200 mỗi tháng:

28,000 map loads miễn phí/tháng
40,000 geolocation requests miễn phí/tháng
40,000 directions requests miễn phí/tháng
Đủ cho hầu hết small/medium websites

Set Usage Limits (Khuyến nghị):

Vào "APIs & Services" > "Quotas"
Tìm APIs đã enable
Set daily limits để tránh vượt quá free tier:
- Maps JavaScript API: 900 requests/day
- Directions API: 1,300 requests/day
- Places API: 1,300 requests/day

3. Chạy Ứng dụng

Sử dụng Python HTTP Server

# Python 3
python3 -m http.server 8080

# Python 2
python -m SimpleHTTPServer 8080

Sử dụng Node.js HTTP Server

# Cài đặt http-server globally
npm install -g http-server

# Chạy server
http-server -p 8080

Sử dụng Live Server (VS Code Extension)

Cài đặt Live Server extension trong VS Code
Right-click vào index.html > "Open with Live Server"

4. Truy cập Ứng dụng

Mở trình duyệt và truy cập: http://localhost:8080

📱 Test trên Mobile

Cách 1: Sử dụng ngrok (Khuyến nghị)

# Cài đặt ngrok
npm install -g ngrok

# Expose local server
ngrok http 8080

Sử dụng HTTPS URL từ ngrok để test trên mobile device thật.

Cách 2: Local Network

Tìm IP address của máy: ipconfig (Windows) hoặc ifconfig (Mac/Linux)
Truy cập từ mobile: http://YOUR_IP:8080

Cách 3: Chrome DevTools Mobile Simulation

Mở Chrome DevTools (F12)
Click biểu tượng mobile/tablet
Chọn device để simulate

🛠️ Cấu trúc File

eatsmart-vanilla/
├── index.html          # Main HTML file
├── styles.css          # Mobile-optimized styles
├── app.js              # Main JavaScript app with Maps integration
├── data.js             # Data management functions
├── data/
│   ├── restaurant.json # Restaurant data with coordinates
│   └── dishes.json     # Dishes data
└── README.md           # This file

🎯 Cách sử dụng

1. Trang Chủ

Nhập thời gian bắt đầu và kết thúc
Click "Find Restaurants" để tìm kiếm

2. Danh sách Nhà hàng

Sử dụng các bộ lọc: Nearby, Popular, Rating
Click vào nhà hàng để xem chi tiết món ăn

3. Chi tiết Món ăn

Xem thông tin món ăn, đánh giá
Click "Reviews" để xem đánh giá chi tiết
Click "Map & Directions" để xem bản đồ và dẫn đường

4. Maps & Directions

Dẫn đường: Click "Dẫn đường" để hiển thị route trên map
Gọi điện: Click "Gọi điện" để gọi cho nhà hàng
Mobile: Trên mobile sẽ tự động mở Google Maps app

🔧 Tùy chỉnh

Thêm nhà hàng mới

Chỉnh sửa file data/restaurant.json:

{
  "restaurant_id": 21,
  "name": "Tên nhà hàng",
  "address": "Địa chỉ",
  "contact": "0987654321",
  "rating": 4.5,
  "image_url": "https://example.com/image.jpg",
  "latitude": 21.0,
  "longitude": 105.0
}

Thêm món ăn mới

Chỉnh sửa file data/dishes.json:

{
  "dish_id": 101,
  "restaurant_id": 21,
  "name": "Tên món ăn",
  "description": "Mô tả món ăn",
  "price": 50000,
  "category": "Danh mục",
  "image_url": "https://example.com/dish.jpg"
}

🚨 Troubleshooting

Maps không hiển thị

Kiểm tra API key có chính xác không
Kiểm tra các APIs đã được enable
Kiểm tra Console để xem lỗi
Kiểm tra domain restrictions

Geolocation không hoạt động

Đảm bảo đang chạy trên HTTPS (hoặc localhost)
Allow location permission trong browser
Kiểm tra device có GPS không

Performance Issues

Tối ưu images - sử dụng WebP format
Enable browser caching
Minify CSS/JS cho production

🌟 Features Roadmap

📄 License

MIT License - feel free to use and modify.

🤝 Contributing

Fork the repository
Create feature branch
Commit changes
Push to branch
Create Pull Request

Happy coding! 🚀

Name		Name	Last commit message	Last commit date
data		data
README.md		README.md
app.js		app.js
data.js		data.js
demo-setup.js		demo-setup.js
index.html		index.html
styles.css		styles.css

Latest commit

History

Folders and files

Repository files navigation