Giới thiệu dự án

Thương mại điện tử (E-Commerce) trên nền tảng di động (M-Commerce) đang chứng kiến tốc độ tăng trưởng vượt bậc. Theo các báo cáo thị trường công nghệ, hơn 72.9% tổng doanh số thương mại điện tử toàn cầu được thực hiện qua các thiết bị di động. Tuy nhiên, các doanh nghiệp vừa và nhỏ (SMEs) khi tiếp cận chuyển đổi số thường đối mặt với rào cản chi phí lớn và thời gian phát triển kéo dài khi phải xây dựng hai mã nguồn độc lập cho iOS và Android.

Dự án "Xây dựng ứng dụng thương mại điện tử Vezor bằng Flutter" do sinh viên Vũ Thế Vương thực hiện dưới sự hướng dẫn của ThS. Trần Quang Huy (Trường Đại học Hải Phòng) tập trung giải quyết bài toán tối ưu hóa chi phí phát triển ứng dụng mua sắm trực tuyến đa nền tảng, đảm bảo hiệu năng tương đương ứng dụng bản địa (Native) kết hợp cơ sở dữ liệu thời gian thực (Realtime Database).

                                  KIẾN TRÚC TỔNG QUAN VEZOR
+-----------------------------------------------------------------------------------+
|                              FLUTTER CLIENT ENGINE                                |
|  [Presentation Layer (Material/Cupertino)] <---> [Business Logic / State Stream]  |
|                                       |                                           |
|                           [Repository & Data Layer]                               |
+---------------------------------------+-------------------------------------------+
                                        | (HTTPS / WSS - SSL 2048-bit)
                                        v
+-----------------------------------------------------------------------------------+
|                            FIREBASE CLOUD PLATFORM                                |
|  +--------------------+  +----------------------+  +----------------------------+ |
|  | Firebase Auth      |  | Realtime Database    |  | Cloud Storage & Hosting    | |
|  | (Email, OAuth, JWT)|  | (JSON Tree, Rules)   |  | (CDN, Assets, Static Media)| |
|  +--------------------+  +----------------------+  +----------------------------+ |
+-----------------------------------------------------------------------------------+

Mục tiêu dự án

  1. Xây dựng ứng dụng di động đa nền tảng (Cross-Platform): Phát triển ứng dụng Vezor trên nền tảng Flutter và ngôn ngữ Dart, hỗ trợ biên dịch đồng thời cho Android và iOS từ một cơ sở mã nguồn (Single Codebase).
  2. Hiện thực hóa hệ sinh thái chức năng E-Commerce hoàn chỉnh: Cung cấp đầy đủ các module: Xác thực người dùng (Authentication), Danh mục sản phẩm (Product Catalog), Giỏ hàng & Thanh toán (Cart & Checkout), Theo dõi đơn hàng (Order Tracking) và Hệ thống quản trị (Admin/Seller Dashboard).
  3. Đồng bộ hóa dữ liệu thời gian thực (Real-time Synchronization): Ứng dụng Backend-as-a-Service (BaaS) với Firebase Realtime Database giúp cập nhật số lượng tồn kho, trạng thái đơn hàng và tin nhắn tư vấn tức thì với độ trễ dưới 200ms.
  4. Tối ưu hóa hiệu năng giao diện: Đạt tốc độ hiển thị khung hình ổn định 60 khung hình/giây (FPS) nhờ cơ chế kết xuất trực tiếp qua Skia/Impeller engine.

Phạm vi và giới hạn dự án

  • Phạm vi: Ứng dụng client dành cho khách hàng (Android/iOS) và dashboard quản trị dành cho Admin/Nhân viên quản lý; tích hợp xác thực Firebase Auth, lưu trữ dữ liệu Firebase Realtime Database.
  • Giới hạn: Phương thức thanh toán thử nghiệm ở giai đoạn mô phỏng quy trình COD và ghi nhận đơn hàng; chưa tích hợp cổng thanh toán trực tiếp qua Sandbox của bên thứ ba (VNPay/Momo); chưa triển khai hệ thống microservices độc lập phía Backend.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Tiêu chí so sánh Native App (Kotlin/Swift) Hybrid App (Cordova/Ionic) React Native (JavaScript) Giải pháp Vezor (Flutter/Dart)
Hiệu năng Render Tối đa (Native UI thread) Thấp (WebView bottleneck) Khá (JavaScript Bridge) Cao (Biên dịch AOT, Skia 60 FPS)
Tái sử dụng mã nguồn 0% (2 codebase riêng biệt) ~90% (Web stack) ~80-85% (Cross-platform) ~90-95% (Single Codebase)
Thời gian phát triển Kéo dài (+100% chi phí) Nhanh nhưng UI giật lag Trung bình (cần native bridge) Nhanh (Hỗ trợ Hot Reload <400ms)
Quản lý trạng thái & Data SQLite / CoreData / REST REST API thuần Redux / Context API Streams / Reactive NoSQL BaaS

Phân loại yêu cầu người dùng theo mô hình MoSCoW

  • Must-have: Đăng ký/đăng nhập qua Firebase Authentication; hiển thị danh mục sản phẩm; chi tiết đơn hàng; giỏ hàng; phân quyền Admin và Customer.
  • Should-have: Chức năng tìm kiếm sản phẩm theo từ khóa; cập nhật thông tin hồ sơ; bộ lọc danh mục ngành hàng; dashboard quản lý sản phẩm cho người bán.
  • Could-have: Nhắn tin hỗ trợ trực tiếp giữa khách hàng và người bán thời gian thực; lưu địa chỉ giao hàng mặc định.
  • Won't-have (giai đoạn này): Gợi ý sản phẩm thông minh bằng AI; tích hợp thanh toán thẻ quốc tế tự động.

Thiết kế hệ thống

Technology Stack và phiên bản sử dụng

  • Mobile Framework: Flutter SDK v3.7.x (kênh Stable).
  • Ngôn ngữ lập trình: Dart v2.19.x (Sound Null-Safety, hỗ trợ Isolates và async/await).
  • Môi trường phát triển (IDE): Visual Studio Code v1.78+, Android Studio Electric Eel (API Level 33).
  • Backend & Cloud Platform: Firebase Platform (Firebase Realtime Database, Firebase Authentication, Firebase Storage, Firebase Hosting CDN).
  • Build System: Gradle v7.5, Kotlin JVM v1.8.
                          SƠ ĐỒ PHÂN QUYỀN VÀ TRUY CẬP HỆ THỐNG
                           
                 +-----------------------------------------------+
                 |              HỆ THỐNG VEZOR E-COMMERCE         |
                 +-----------------------------------------------+
                                    |            |
                 +------------------+            +-------------------+
                 |                                                   |
                 v                                                   v
         [Khách Hàng (Customer)]                             [Quản Trị (Admin/Seller)]
                 |                                                   |
    +------------+------------+                         +------------+------------+
    | Đăng ký / Đăng nhập     |                         | Quản trị người dùng     |
    | Xem danh mục & chi tiết |                         | Thêm / Sửa / Xóa SP     |
    | Đặt hàng & thanh toán   |                         | Thống kê & Quản lý đơn  |
    | Nhắn tin người bán      |                         | Cấu hình hệ thống       |
    +-------------------------+                         +-------------------------+

Thiết kế cơ sở dữ liệu (Firebase Realtime Database Schema)

Hệ thống sử dụng cơ sở dữ liệu phi quan hệ (NoSQL) cấu trúc dạng cây JSON phân cấp:

{
  "users": {
    "uid_string_01": {
      "email": "user@example.com",
      "fullName": "Vu The Vuong",
      "phoneNumber": "0912345678",
      "role": "customer",
      "address": "Hai Phong, Vietnam",
      "createdAt": 1682000000000
    }
  },
  "products": {
    "prod_id_101": {
      "sellerId": "seller_uid_01",
      "title": "Áo Thun Nam Vezor Edition",
      "description": "Chất liệu cotton 100%, co giãn 4 chiều",
      "price": 250000,
      "quantity": 150,
      "category": "Fashion",
      "imageUrl": "https://firebasestorage.googleapis.com/.../img.png",
      "updatedAt": 1682005000000
    }
  },
  "orders": {
    "order_id_5001": {
      "customerId": "uid_string_01",
      "sellerId": "seller_uid_01",
      "items": [
        { "productId": "prod_id_101", "quantity": 2, "unitPrice": 250000 }
      ],
      "totalAmount": 500000,
      "shippingAddress": "Lê Chân, Hải Phòng",
      "paymentMethod": "COD",
      "orderStatus": "PENDING",
      "timestamp": 1682010000000
    }
  },
  "messages": {
    "chat_room_01": {
      "senderId": "uid_string_01",
      "receiverId": "seller_uid_01",
      "message": "Sản phẩm còn size L không shop?",
      "timestamp": 1682012000000
    }
  }
}

Kiến trúc bảo mật (Security Considerations)

  1. Xác thực và Phân quyền: Firebase Authentication cấp phát mã thông báo JWT (JSON Web Token) để xác thực các yêu cầu từ Client.
  2. Quy tắc an toàn dữ liệu (Firebase Security Rules): Ngăn chặn truy cập trái phép bằng cách kiểm tra quyền tác nhân theo auth.uid và role.
  3. Mã hóa truyền tải: Toàn bộ dữ liệu truyền tải giữa Flutter Client và Google Cloud Platform (GCP) được bảo vệ qua giao thức HTTPS/WSS với mã hóa chứng chỉ SSL 2048-bit.

Implementation và kết quả

Quy trình phát triển (Development Process)

Mô hình phát triển phần mềm Agile được áp dụng với 4 giai đoạn cụ thể:

  • Sprint 1 (Tuần 1 - 2): Khảo sát yêu cầu, thiết lập môi trường Flutter/Dart, kết nối Firebase SDK, thiết lập Firebase Authentication.
  • Sprint 2 (Tuần 3 - 5): Thiết kế giao diện UI/UX với Material Design, hiện thực hóa màn hình Đăng ký, Đăng nhập, Trang chủ và Danh mục sản phẩm.
  • Sprint 3 (Tuần 6 - 8): Xây dựng luồng Giỏ hàng, Đặt hàng, Lưu trữ trạng thái đơn hàng và Dashboard quản trị (Thêm/Sửa/Xóa sản phẩm).
  • Sprint 4 (Tuần 9 - 10): Kiểm thử luồng tích hợp, tối ưu hóa bộ nhớ, sửa lỗi giao diện và đóng gói tệp tin APK/App Bundle.

Trích xuất mã nguồn kỹ thuật tiêu biểu

1. Xử lý xác thực người dùng (Firebase Authentication Service)

import 'package:firebase_auth/firebase_auth.dart';

class AuthService {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  // Stream lắng nghe trạng thái thay đổi xác thực
  Stream<User?> get authStateChanges => _firebaseAuth.authStateChanges();

  // Đăng nhập hệ thống bằng Email và Mật khẩu
  Future<UserCredential?> signInWithEmail(String email, String password) async {
    try {
      UserCredential credential = await _firebaseAuth.signInWithEmailAndPassword(
        email: email.trim(),
        password: password,
      );
      return credential;
    } on FirebaseAuthException catch (e) {
      throw Exception('Lỗi đăng nhập: ${e.code} - ${e.message}');
    }
  }

  // Đăng xuất và dọn dẹp phiên làm việc
  Future<void> signOut() async {
    await _firebaseAuth.signOut();
  }
}

2. Đồng bộ hóa dữ liệu danh mục sản phẩm theo thời gian thực (Realtime Stream Query)

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';

class ProductStreamListView extends StatelessWidget {
  final DatabaseReference _productRef = FirebaseDatabase.instance.ref().child('products');

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DatabaseEvent>(
      stream: _productRef.onValue,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Center(child: Text('Lỗi kết nối cơ sở dữ liệu'));
        }
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }
        if (!snapshot.hasData || snapshot.data!.snapshot.value == null) {
          return Center(child: Text('Không có sản phẩm nào trong kho.'));
        }

        Map<dynamic, dynamic> values = snapshot.data!.snapshot.value as Map<dynamic, dynamic>;
        List<Map<String, dynamic>> productList = [];
        values.forEach((key, val) {
          productList.add(Map<String, dynamic>.from(val)..['id'] = key);
        });

        return ListView.builder(
          itemCount: productList.length,
          itemBuilder: (context, index) {
            final item = productList[index];
            return Card(
              margin: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
              child: ListTile(
                leading: Image.network(item['imageUrl'], width: 50, height: 50, fit: BoxFit.cover),
                title: Text(item['title'] ?? '', style: TextStyle(fontWeight: FontWeight.bold)),
                subtitle: Text('Giá: ${item['price']} VNĐ | Tồn: ${item['quantity']}'),
                trailing: Icon(Icons.arrow_forward_ios, size: 16),
              ),
            );
          },
        );
      },
    );
  }
}

Kiểm thử và đánh giá hiệu năng (Testing & Validation)

Hệ thống được kiểm thử thông qua 3 cấp độ: Unit Test (Logic kiểm tra định dạng email, mật khẩu), Widget Test (Khả năng hiển thị component UI), và User Acceptance Testing (UAT).

Kịch bản kiểm thử (Test Scenario) Số lượng Test Cases Tỷ lệ thành công (Pass Rate) Thời gian phản hồi trung bình
Xác thực (Đăng ký / Đăng nhập / Quên MK) 12 100% 450 ms
Tải danh mục sản phẩm (Query Realtime) 8 100% 180 ms
Thêm / Cập nhật sản phẩm từ Dashboard 10 100% 320 ms
Đặt hàng & Cập nhật trạng thái đơn 15 93.3% (14/15) 260 ms
Khôi phục dữ liệu Offline Cache 5 100% Tức thì (< 50 ms)
  • Chỉ số hiệu năng (Benchmarks):
    • Tốc độ khung hình (Frame Rendering): 58 - 60 FPS trong các thao tác vuốt cuộn danh sách (Smooth Scrolling).
    • Tốc độ nạp giao diện khi cập nhật mã nguồn (Stateful Hot Reload): ~380 ms.
    • Dung lượng bản dựng (Release APK): ~16.8 MB (đã tối ưu hóa qua ProGuard và R8 Shrinking).

Đổi mới và đóng góp

Đổi mới kỹ thuật

  1. Cơ chế biên dịch kép (Dual-Compilation Model): Tận dụng tối đa chế độ JIT (Just-In-Time) để tăng tốc độ phát triển trong giai đoạn debug và AOT (Ahead-Of-Time) khi build production để mã Dart dịch thẳng ra mã máy ARMv8/ARM64, loại bỏ hoàn toàn độ trễ của JavaScript Bridge.
  2. Cơ chế kiến trúc không đồng bộ đa luồng (Isolates): Tách biệt luồng xử lý giao diện UI chính và luồng xử lý I/O dữ liệu lớn, đảm bảo giao diện không bị giật (Jank-free experience).
  3. Mô hình Serverless NoSQL tinh gọn: Cắt giảm chi phí duy trì máy chủ truyền thống nhờ Firebase Realtime Database với cơ chế tự động cân bằng tải và phân phối dữ liệu qua hệ thống CDN (Content Delivery Network) toàn cầu với mạng lưới Points of Presence (PoP).
                      SO SÁNH TỐC ĐỘ PHÁT TRIỂN VÀ HIỆU NĂNG
+-----------------------------------------------------------------------------------+
|  Thời gian phát triển (Time-to-market):                                           |
|  Native (Kotlin + Swift) : [====================================] 100% (Chuẩn)    |
|  Flutter Vezor           : [===================] Giảm 45% thời gian               |
|                                                                                   |
|  Độ trễ đồng bộ dữ liệu (Latency):                                                |
|  REST API Polling        : [==============================] ~2000ms                |
|  Firebase Realtime Stream: [====] <200ms                                          |
+-----------------------------------------------------------------------------------+

Ứng dụng thực tế và triển khai

Hướng dẫn triển khai ứng dụng (Deployment Guide)

1. Yêu cầu hệ thống môi trường

  • Hệ điều hành: Windows 10/11, macOS hoặc Linux.
  • Bộ nhớ RAM: Tối thiểu 8GB (Khuyến nghị 16GB để chạy mượt mà Android Emulator).
  • Flutter SDK: Phiên bản 3.7.0 trở lên.
  • Android Studio / VS Code đã cấu hình Android SDK Platform-Tools.

2. Các bước triển khai và đóng gói

# Bước 1: Clone mã nguồn dự án
git clone https://github.com/vuthevuong/vezor-ecommerce-flutter.git
cd vezor-ecommerce-flutter

# Bước 2: Cài đặt các gói phụ thuộc (Dependencies)
flutter pub get

# Bước 3: Cấu hình kết nối Firebase
# Tải google-services.json đặt vào thư mục android/app/
# Tải GoogleService-Info.plist đặt vào thư mục ios/Runner/

# Bước 4: Kiểm tra cấu hình môi trường
flutter doctor -v

# Bước 5: Biên dịch tệp tin phân phối APK / Android App Bundle
flutter build apk --release --split-per-abi

Hướng dẫn xử lý sự cố thường gặp (Troubleshooting Guide)

  • Lỗi Gradle Build Fail: Kiểm tra phiên bản JDK (java -version), đảm bảo sử dụng JDK 11 hoặc JDK 17 tương thích với Gradle 7.5.
  • Lỗi Firebase Permission Denied: Kiểm tra lại quy tắc bảo mật trong tab Rules của Firebase Realtime Database Console, đảm bảo trường auth != null đã được cấp quyền cho người dùng đã đăng nhập.
  • Lỗi hiển thị hình ảnh từ Network: Kiểm tra quyền kết nối Internet trong tệp tin AndroidManifest.xml (<uses-permission android:name="android.permission.INTERNET"/>).

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Dung lượng gói cài đặt: Do phải đóng gói kèm Flutter Engine nên tệp tin APK cơ bản có dung lượng lớn hơn khoảng 6-8MB so với ứng dụng Native thuần túy.
  • Khả năng mở rộng Backend: Phụ thuộc vào hạ tầng BaaS của Firebase; khi dữ liệu và lượng truy cập đồng thời tăng đột biến (trên 200.000 kết nối), chi phí sử dụng dịch vụ đám mây sẽ tăng nhanh nếu không có cơ chế phân tầng dữ liệu hợp lý.
  • Trải nghiệm thanh toán: Chưa tích hợp trực tiếp SDK cổng thanh toán nội địa và quốc tế.

Hướng phát triển tiếp theo

  • Xây dựng Backend microservices chuyên biệt sử dụng Golang hoặc Node.js để quản lý các tác vụ xử lý giao dịch thanh toán phức tạp.
  • Tích hợp cổng thanh toán trực tuyến qua VNPay, ZaloPay, Momo Sandbox.
  • Ứng dụng các thuật toán học máy (Machine Learning) để phân tích hành vi người dùng và xây dựng hệ thống gợi ý sản phẩm (Recommendation System).

Đối tượng hưởng lợi

  • Sinh viên & Học viên CNTT: Nguồn tài liệu thực chứng về quy trình xây dựng đồ án thương mại điện tử từ phân tích ca sử dụng (Use Case), thiết kế NoSQL đến lập trình di động bằng Flutter.
  • Lập trình viên (Developers): Tham khảo kiến trúc kết hợp Flutter và Firebase, các mẫu triển khai Reactive Programming với StreamBuilder và xử lý bất đồng bộ trong Dart.
  • Doanh nghiệp vừa và nhỏ (SMEs): Bản mẫu kỹ thuật hoàn chỉnh để triển khai ứng dụng bán hàng trên di động với chi phí tiết kiệm hơn 40% so với phương pháp phát triển Native truyền thống.
  • Nhà nghiên cứu ứng dụng: Cơ sở thực nghiệm đánh giá hiệu năng giữa kiến trúc Serverless BaaS và các mô hình cơ sở dữ liệu truyền thống.

Câu hỏi thường gặp

1. Yêu cầu phần cứng và phần mềm tối thiểu để chạy ứng dụng Vezor là gì?

Thiết bị di động chạy Android 5.0 (Lollipop - API Level 21) trở lên hoặc iOS 11.0 trở lên. Môi trường phát triển yêu cầu máy tính có RAM tối thiểu 8GB, cài đặt Flutter SDK v3.7+ và Android Studio.

2. Hệ thống Firebase Realtime Database có bị giới hạn khi số lượng người dùng tăng cao không?

Firebase Realtime Database hỗ trợ tối đa 200.000 kết nối đồng thời trên một cơ sở dữ liệu. Khi hệ thống vượt quy mô này, giải pháp mở rộng là phân mảnh dữ liệu (Sharding) trên nhiều instance Firebase hoặc chuyển đổi sang Cloud Firestore / Microservices chuyên biệt.

3. Làm thế nào để tích hợp thêm các API RESTful tùy chỉnh vào ứng dụng?

Ứng dụng có thể mở rộng dễ dàng bằng cách sử dụng thư viện http hoặc dio trong Dart để kết nối tới các RESTful API hoặc GraphQL endpoints tùy chỉnh song song với các dịch vụ Firebase.

4. Chi phí duy trì hệ thống trên Firebase là bao nhiêu?

Ở giai đoạn thử nghiệm và quy mô nhỏ, gói dịch vụ miễn phí (Spark Plan) của Firebase đáp ứng đủ nhu cầu lưu trữ (1GB) và băng thông (10GB/tháng). Khi mở rộng thương mại hóa, doanh nghiệp có thể chuyển sang gói trả theo mức sử dụng (Blaze Plan) với chi phí ước tính từ 15 - 50 USD/tháng tùy lưu lượng.

5. Ứng dụng có hỗ trợ hoạt động khi mất kết nối mạng (Offline Mode) không?

Có. Firebase Realtime Database trên Flutter hỗ trợ tính năng Offline Persistence. Dữ liệu thao tác sẽ được lưu tại bộ nhớ đệm (Local Cache) và tự động đồng bộ hóa lên máy chủ đám mây ngay khi thiết bị có kết nối Internet trở lại.

Kết luận

Đồ án tốt nghiệp "Xây dựng ứng dụng thương mại điện tử Vezor bằng Flutter" của tác giả Vũ Thế Vương đã giải quyết thành công bài toán phát triển phần mềm thương mại điện tử hiện đại, kết hợp hài hòa giữa tốc độ phát triển nhanh của Flutter và năng lực đồng bộ hóa mạnh mẽ của Firebase. Hệ thống không chỉ đáp ứng đầy đủ các yêu cầu nghiệp vụ quản lý bán hàng mà còn cung cấp trải nghiệm mượt mà, ổn định trên các thiết bị di động. Đây là nền tảng vững chắc để tiếp tục mở rộng, nâng cấp thành một giải pháp M-Commerce toàn diện cho doanh nghiệp trong tương lai.