Full source code website bán điện thoại Luxphone
Luxphone là bộ source website thương mại điện tử bán điện thoại hoàn chỉnh, gồm website khách hàng và trang quản trị bán hàng được xây dựng bằng Flutter Web Firebase. Hai ứng dụng dùng chung Firebase Authentication, Cloud Firestore, Cloud Functions và hệ thống phân quyền.
Bộ source phù hợp để tham khảo đồ án tốt nghiệp, học Flutter/Firebase hoặc tiếp tục phát triển thành website bán hàng thực tế.
Chức năng website khách hàng
-
Đăng ký, đăng nhập bằng email/Google, quên mật khẩu và quản lý hồ sơ.
-
Duyệt danh mục, tìm kiếm, lọc sản phẩm, xem biến thể màu/dung lượng và thông số chi tiết.
-
Giỏ hàng, danh sách yêu thích, địa chỉ giao hàng và áp dụng mã giảm giá.
-
Đặt hàng bằng COD, chuyển khoản, Momo mô phỏng và VNPay qua Cloud Functions.
-
Theo dõi trạng thái đơn, gửi/rút yêu cầu huỷ và đánh giá sản phẩm sau khi mua.
-
Điểm thưởng, tra cứu bảo hành theo IMEI, tin tức, phản hồi và chat realtime với cửa hàng.
Chức năng trang quản trị
-
Dashboard KPI và biểu đồ doanh thu, trạng thái đơn hàng.
-
CRUD danh mục, sản phẩm, biến thể và ảnh ImgBB; hỗ trợ soft delete, thùng rác và khôi phục.
-
Quản lý đơn hàng theo trạng thái, xử lý yêu cầu huỷ và hoàn tiền thủ công.
-
Quản lý mã giảm giá, khách hàng, nhân viên, vai trò, banner, tin tức và phản hồi.
-
Chat hỗ trợ realtime, badge tin chưa đọc và lọc hội thoại.
-
Quản lý kho IMEI/serial, nhập CSV, gán tồn kho FIFO và tính bảo hành.
-
Có sẵn Firestore Security Rules, composite indexes và Cloud Functions nghiệp vụ.
Công nghệ sử dụng
-
Flutter Web 3.41.6, Dart 3.8.
-
Riverpod, Hooks, Freezed, json_serializable và Flutter L10n.
-
Firebase Authentication, Cloud Firestore, Cloud Functions TypeScript/Node 22 và Firebase Hosting.
-
VNPay, ImgBB và biểu đồ fl_chart.
Bảo mật và cấu hình
Gói source đã được làm sạch, không chứa Firebase config, ImgBB API key, file .env thật, VNPay secret, service-account hoặc mật khẩu của tác giả. Người mua tự tạo tài khoản dịch vụ và cấu hình theo tài liệu HUONG_DAN_CAI_DAT_VA_TRIEN_KHAI.md đi kèm.
Từ khóa liên quan
Source code website bán điện thoại, web bán điện thoại, Flutter Web Firebase, website thương mại điện tử, trang quản trị bán hàng, VNPay và quản lý kho IMEI.
Lưu ý
Các dịch vụ trả góp, trade-in, hoá đơn điện tử và đa chi nhánh chưa được triển khai.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Hướng dẫn cài đặt và triển khai Luxphone
1. Thành phần hệ thống
-
customer_app: website mua hàng và Cloud Functions.
-
admin_app: trang quản trị và bộ công cụ seed/import dữ liệu.
Hai ứng dụng dùng chung một Firebase project.
2. Yêu cầu môi trường
-
Flutter 3.41.6 qua FVM, Dart SDK ^3.8.0.
-
Node.js 22 cho Cloud Functions; Node.js 18 trở lên cho công cụ admin.
-
Firebase CLI, FlutterFire CLI và trình duyệt Chrome.
fvm flutter --version
node --version
firebase --version
flutterfire --version
3. Tạo Firebase project riêng
-
Tạo Firebase project mới tại Firebase Console.
-
Bật Authentication với Email/Password; bật Google nếu cần.
-
Tạo Cloud Firestore, nên chọn region asia-southeast1.
-
Bật Firebase Hosting và Cloud Functions. Functions hoặc VNPay có thể yêu cầu billing.
-
Liên kết project cho từng ứng dụng:
firebase login
cd customer_app
firebase use --add
cd ../admin_app
firebase use --add
Lệnh trên tạo file .firebaserc cục bộ. Không đưa file này lên kho công khai.
4. Sinh cấu hình FlutterFire
cd customer_app
flutterfire configure --project=YOUR_FIREBASE_PROJECT_ID
cd ../admin_app
flutterfire configure --project=YOUR_FIREBASE_PROJECT_ID
Chọn nền tảng Web cho cả hai ứng dụng. Source cố ý không kèm firebase_options.dart, google-services.json hoặc Firebase config của tác giả.
5. Cấu hình website khách hàng
Copy-Item customer_app/.env.example customer_app/.env
Điền thông tin dịch vụ ảnh nếu sử dụng:
API_KEY_IMAGE_CLOUD=your-image-cloud-api-key
FOLDER_IMAGE=luxphone
UPLOAD_PRESET=your-upload-preset
6. Cấu hình trang quản trị và ImgBB
Copy-Item admin_app/.env.example admin_app/.env
Điền các biến sau bằng thông tin Firebase project và ImgBB của người mua:
ADMIN_EMAIL=admin@example.com
API_KEY_IMAGE_BB=your-imgbb-api-key
FIREBASE_API_KEY=your-firebase-api-key
FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-project.firebasestorage.app
FIREBASE_MESSAGING_SENDER_ID=your-sender-id
FIREBASE_APP_ID=your-app-id
Không lưu mật khẩu admin trong .env. Khi script cần mật khẩu, chỉ đặt tạm trong terminal:
$env:ADMIN_PASSWORD='your-temporary-password'
7. Cấu hình VNPay
-
Sao chép customer_app/functions/.env.example thành .env.YOUR_FIREBASE_PROJECT_ID.
-
Điền VNP_TMN_CODE, VNP_PAY_URL, VNP_REFUND_URL và VNP_RETURN_URL.
-
Lưu khóa bí mật bằng Firebase Secret Manager:
cd customer_app
firebase functions:secrets:set VNP_HASH_SECRET
Không đặt VNP_HASH_SECRET trực tiếp trong source hoặc file .env.
8. Cài thư viện
Website khách hàng:
cd customer_app
fvm flutter pub get
cd functions
npm install
Trang quản trị:
cd admin_app
fvm flutter pub get
cd tools
npm install
9. Chạy thử
Website khách hàng:
cd customer_app
fvm flutter run -d chrome --dart-define-from-file=.env
Trang quản trị:
cd admin_app
fvm flutter run -d chrome --dart-define-from-file=.env
Tạo tài khoản admin trong Firebase Authentication, sau đó tạo hoặc cập nhật document tương ứng trong collection Users với trường role bằng admin.
10. Deploy Firestore Rules và Indexes
cd customer_app
firebase deploy --only firestore:rules,firestore:indexes
Hai ứng dụng dùng chung rules/indexes nên chỉ cần deploy từ một project.
11. Build và deploy website khách hàng
cd customer_app
fvm flutter build web --release --dart-define-from-file=.env
cd functions
npm run build
cd ..
firebase deploy --only hosting,functions,firestore:rules,firestore:indexes
12. Build và deploy trang quản trị
cd admin_app
fvm flutter build web --release --dart-define-from-file=.env
firebase hosting:sites:create YOUR_ADMIN_SITE_ID
Thêm site ID vào admin_app/firebase.json, sau đó chạy:
firebase deploy --only hosting
13. Kiểm tra sau triển khai
-
Đăng ký, đăng nhập, quên mật khẩu và phân quyền admin.
-
Rules phải chặn người dùng thường ghi dữ liệu quản trị.
-
Sản phẩm, biến thể, ảnh, giỏ hàng, mã giảm giá và đơn hàng hoạt động đúng.
-
VNPay sandbox và webhook IPN trả kết quả đúng.
-
Chat realtime, điểm thưởng, IMEI/serial và bảo hành hoạt động đúng.
-
Không công khai .env, firebase_options.dart, google-services.json, service-account hoặc secret.
Tài liệu đầy đủ: xem file HUONG_DAN_CAI_DAT_VA_TRIEN_KHAI.md trong thư mục gốc của gói source.
Nguồn: Topcode.vn
