Đồ án HCMUTE: Phát triển ứng dụng quản lý mua bán gas trên iOS sử dụng Dart và Flutter

Đồ án nghiên cứu hcmute phát triển ứng dụng quản lý mua bán gas trên ios sử dụng ngôn ngữ dart trên nền tảng flutter, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho

• Tác giả: Võ Trường Duy
• Người hướng dẫn: ThS. Nguyễn Hữu Trung
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Sư Phạm Công Nghệ Thông Tin
• Đề tài: Phát Triển Ứng Dụng Quản Lý Mua Bán Gas Trên iOS - Sử Dụng Ngôn Ngữ Dart Trên Nền Tảng Flutter
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• 1. PHẦN 1: PHẦN MỞ ĐẦU
• 1.1. TÍNH CẤP THIẾT ĐỀ TÀI
• 1.2. MỤC ĐÍCH CỦA ĐỀ TÀI
• 1.3. ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU
• 1.4. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
• 2. PHẦN 2: PHẦN NỘI DUNG
• 2. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
• 1.1. TÌM HIỂU VỀ FLUTTER
• 1.1.1. Flutter là gì?
• 1.1.2. Flutter Framework Model Cấu thành như thế nào?
• 1.1.3. So Sánh với các Cross-platform framework khác
• 1.1.4. Các Widget trong flutter
• 1.1.5. Phương thức render của flutter
• 1.1.6. Ngôn Ngữ Dart
• 1.1.6.1. Các Ưu điểm của Ngôn ngữ Dart
• 1.1.6.2. Tại sao Flutter lại sử dụng Dart
• 1.1.7. Giới thiệu về firebase
• 1.1.7.1. Các chức năng chính của firebase
• 1.1.7.2. Những lợi ích của firebase
• 1.2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
• 1.2.1. Khảo sát hiện trạng
• 1.2.1.1. Ứng dụng Gas24h
• 1.2.1.2. Ứng dụng VipGas
• 1.2.1.3. Ứng dụng bán Lazada
• 1.2.2. XÁC ĐỊNH YÊU CẦU
• 1.2.2.1. Yêu cầu Chức năng
• 1.2.2.2. Yêu cầu phi chức năng
• 1.3. CHƯƠNG 3: THIẾT KẾ PHẦN MỀM
• 1.3.1. THIẾT KẾ CƠ SỞ DỮ LIỆU
• 1.3.1.1. Mô tả công việc
• 1.3.1.2. Thiết kế cơ sở dữ liệu
• 1.3.2. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
• 1.3.2.1. Khách hàng
• 1.3.2.1.1. Đăng ký, đăng nhập, Quên mật khẩu
• 1.3.2.1.2. Thông tin tài khoản
• 1.3.2.1.3. Thông tin sản phẩm và đánh giá
• 1.3.2.1.4. Menu tùy chọn
• 1.3.2.1.5. Quản lý đơn hàng
• 1.3.2.2. Admin
• 1.3.2.2.1. Trang chủ admin
• 1.3.2.2.2. Chi tiết đơn hàng của admin
• 1.3.2.2.3. Menu tùy chọn admin
• 1.4. CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ
• 1.4.1. Thiết lập môi trường
• 1.4.2. Cài đặt và kiểm thử các giao diện
• 3. PHẦN 3: PHẦN KẾT LUẬN
• 3.1. KẾT QUẢ ĐẠT ĐƯỢC
• 3.2. ƯU ĐIỂM, NHƯỢC ĐIỂM
• 3.3. HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu về ứng dụng quản lý mua bán gas

Ứng dụng quản lý mua bán gas trên iOS được phát triển nhằm đáp ứng nhu cầu ngày càng cao của người tiêu dùng trong việc đặt hàng gas một cách nhanh chóng và tiện lợi. Quản lý ứng dụng này không chỉ giúp người dùng dễ dàng tìm kiếm và đặt gas mà còn cung cấp thông tin chi tiết về sản phẩm, từ đó nâng cao trải nghiệm người dùng. Việc sử dụng ngôn ngữ Dart và Flutter framework cho phép phát triển ứng dụng với hiệu suất cao và giao diện thân thiện. Ứng dụng này không chỉ đơn thuần là một công cụ mua bán mà còn là một giải pháp giúp người tiêu dùng có cái nhìn rõ ràng hơn về các sản phẩm gas trên thị trường.

1.1. Tính cấp thiết của đề tài

Trong bối cảnh thị trường gas hiện nay, việc xuất hiện nhiều sản phẩm giả và kém chất lượng đã gây ra không ít khó khăn cho người tiêu dùng. Ứng dụng quản lý mua bán gas sẽ giúp người tiêu dùng có thể dễ dàng tiếp cận thông tin về sản phẩm, từ đó đưa ra quyết định mua hàng chính xác hơn. Quản lý gas thông qua ứng dụng di động không chỉ giúp tiết kiệm thời gian mà còn nâng cao tính minh bạch trong giao dịch.

1.2. Mục đích của ứng dụng

Mục đích chính của ứng dụng là cung cấp một nền tảng cho phép người dùng thực hiện các giao dịch mua bán gas một cách dễ dàng và nhanh chóng. Ứng dụng sẽ tích hợp các chức năng như đăng ký, đăng nhập, quản lý tài khoản, xem chi tiết sản phẩm và đánh giá sản phẩm. Điều này không chỉ giúp người dùng có trải nghiệm tốt hơn mà còn tạo ra một môi trường cạnh tranh lành mạnh giữa các nhà cung cấp gas.

II. Công nghệ sử dụng trong phát triển ứng dụng

Việc phát triển ứng dụng trên nền tảng iOS sử dụng Dart programming và Flutter framework mang lại nhiều lợi ích. Flutter cho phép xây dựng giao diện người dùng đẹp mắt và mượt mà, đồng thời hỗ trợ phát triển ứng dụng đa nền tảng. Lập trình Dart giúp tối ưu hóa hiệu suất của ứng dụng, cho phép biên dịch nhanh chóng và hiệu quả. Sự kết hợp này không chỉ giúp tiết kiệm thời gian phát triển mà còn đảm bảo chất lượng sản phẩm cuối cùng.

2.1. Lợi ích của Flutter

Flutter là một framework mạnh mẽ cho phép phát triển ứng dụng di động với giao diện người dùng đẹp và hiệu suất cao. Với khả năng tích hợp API, Flutter giúp lập trình viên dễ dàng kết nối với các dịch vụ bên ngoài, từ đó mở rộng chức năng của ứng dụng. Hơn nữa, Flutter hỗ trợ việc phát triển ứng dụng trên cả hai nền tảng iOS và Android, giúp tiết kiệm thời gian và chi phí cho doanh nghiệp.

2.2. Ngôn ngữ Dart

Dart là ngôn ngữ lập trình được thiết kế đặc biệt cho phát triển ứng dụng di động. Với cú pháp dễ hiểu và khả năng biên dịch nhanh, Dart giúp lập trình viên dễ dàng xây dựng và duy trì mã nguồn. Việc sử dụng Dart trong phát triển ứng dụng quản lý mua bán gas không chỉ giúp tối ưu hóa hiệu suất mà còn tạo ra một mã nguồn sạch và dễ bảo trì.

III. Tính năng chính của ứng dụng

Ứng dụng quản lý mua bán gas trên iOS được thiết kế với nhiều tính năng nổi bật nhằm đáp ứng nhu cầu của người dùng. Các tính năng này bao gồm đăng ký, đăng nhập, quản lý tài khoản, xem chi tiết sản phẩm, đánh giá sản phẩm và quản lý đơn hàng. Những tính năng này không chỉ giúp người dùng dễ dàng thao tác mà còn tạo ra một trải nghiệm mua sắm trực tuyến tiện lợi và hiệu quả.

3.1. Quản lý tài khoản

Người dùng có thể dễ dàng đăng ký và đăng nhập vào ứng dụng thông qua tài khoản Google hoặc Facebook. Tính năng này giúp tiết kiệm thời gian và tạo sự thuận tiện cho người dùng. Ngoài ra, ứng dụng cũng cho phép người dùng quản lý thông tin tài khoản, bao gồm việc cập nhật thông tin cá nhân và thay đổi mật khẩu.

3.2. Đặt hàng và quản lý đơn hàng

Ứng dụng cho phép người dùng xem chi tiết sản phẩm, từ đó đưa ra quyết định mua hàng chính xác. Sau khi đặt hàng, người dùng có thể theo dõi tình trạng đơn hàng của mình, từ lúc đặt cho đến khi giao hàng. Tính năng này không chỉ giúp người dùng yên tâm mà còn tạo ra sự minh bạch trong quá trình giao dịch.

IV. Kết luận và hướng phát triển

Ứng dụng quản lý mua bán gas trên iOS không chỉ đáp ứng nhu cầu của người tiêu dùng mà còn góp phần nâng cao chất lượng dịch vụ trong ngành gas. Việc sử dụng công nghệ di động hiện đại như Dart và Flutter giúp ứng dụng hoạt động hiệu quả và thân thiện với người dùng. Trong tương lai, ứng dụng có thể được mở rộng với nhiều tính năng mới như tích hợp thanh toán trực tuyến và hệ thống đánh giá sản phẩm từ người dùng.

4.1. Đánh giá hiệu quả ứng dụng

Ứng dụng đã cho thấy sự hiệu quả trong việc quản lý mua bán gas, giúp người tiêu dùng dễ dàng tiếp cận thông tin và thực hiện giao dịch. Sự tiện lợi và nhanh chóng của ứng dụng đã tạo ra một trải nghiệm mua sắm tốt hơn cho người dùng.

4.2. Hướng phát triển trong tương lai

Trong tương lai, ứng dụng có thể được phát triển thêm với các tính năng như tích hợp hệ thống thanh toán trực tuyến và mở rộng quy mô phục vụ cho nhiều khu vực khác nhau. Điều này không chỉ giúp nâng cao trải nghiệm người dùng mà còn mở rộng thị trường cho các nhà cung cấp gas.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh công nghệ 4.0 và chuyển đổi số, trải nghiệm người dùng, tính tiện lợi cùng tốc độ cung cấp dịch vụ bán hàng đã trở thành những yếu tố cạnh tranh hàng đầu của doanh nghiệp. Sự phát triển mạnh mẽ của các nền tảng đặt hàng và gọi dịch vụ trực tuyến (như Grab, Uber, Lazada, Foody, Now, Baemin) cho thấy tiềm năng to lớn của các ứng dụng di động trong đời sống hằng ngày. Tuy nhiên, đối với các mặt hàng thiết yếu như khí đốt (gas), thị trường vẫn tồn tại nhiều bất cập: người tiêu dùng còn thiếu thông tin khách quan về chủng loại, mẫu mã sản phẩm, đồng thời phải đối mặt với nguy cơ gas giả và gas kém chất lượng.

Trước thực trạng đó, đề tài "Phát triển ứng dụng quản lý mua bán gas trên iOS - Sử dụng ngôn ngữ Dart trên nền tảng Flutter" được thực hiện bởi nhóm sinh viên Võ Trường Duy và Vi Văn Sang, dưới sự hướng dẫn của ThS. Nguyễn Hữu Trung tại Trường Đại học Sư phạm Kỹ thuật TP.HCM, nhằm số hóa quy trình đặt gas và quản lý bán hàng trên thiết bị di động.

Mục tiêu nghiên cứu được xác định cụ thể gồm hai nhiệm vụ chính:

1. Nghiên cứu sâu về nền tảng Flutter và ngôn ngữ lập trình Dart, phân tích các cơ chế hoạt động giúp tối ưu hóa quá trình phát triển ứng dụng di động đa nền tảng.
2. Thiết kế và xây dựng hoàn chỉnh ứng dụng quản lý mua bán gas trên hệ điều hành iOS (với khả năng hỗ trợ Android), tích hợp đầy đủ các chức năng nghiệp vụ cơ bản:
   • Đăng ký, đăng nhập, đăng xuất tài khoản.
   • Đăng nhập liên kết thông qua tài khoản Google và Facebook.
   • Quản lý tài khoản cá nhân (xem, cập nhật thông tin, đổi mật khẩu, khôi phục mật khẩu).
   • Tra cứu danh mục, xem chi tiết và đánh giá sản phẩm.
   • Quản lý giỏ hàng và tiến hành đặt hàng, thanh toán.
   • Phân hệ quản trị (Admin) phục vụ thêm, xóa, sửa sản phẩm, quản lý khách hàng và theo dõi tình trạng đơn hàng.

Đối tượng nghiên cứu của đồ án là ngôn ngữ Dart, framework Flutter, dịch vụ cơ sở dữ liệu thời gian thực Firebase và các quy trình nghiệp vụ của phần mềm bán hàng di động. Phạm vi nghiên cứu tập trung vào việc thiết kế và kiểm thử ứng dụng trên nền tảng hệ điều hành iOS, thời gian triển khai từ ngày 15/02/2020 đến ngày 04/08/2020.

---

Cơ sở lý thuyết và phương pháp

Đồ án xây dựng trên nền tảng các công nghệ di động và dịch vụ đám mây hiện đại:

• Flutter Framework: Là bộ công cụ phát triển giao diện người dùng (UI framework) mã nguồn mở của Google. Kiến trúc của Flutter được phân chia thành hai tầng chính:
  • Tầng Application: Viết bằng ngôn ngữ Dart, chứa mã nguồn ứng dụng, các widget và logic xử lý, cho phép tùy biến linh hoạt tại thời điểm biên dịch (compile time).
  • Tầng Shell: Nằm sâu bên dưới, viết bằng C++, đảm nhận việc kết nối ứng dụng với hệ điều hành và phần cứng thiết bị. Tầng này tích hợp máy ảo Dart VM chịu trách nhiệm biên dịch và cung cấp môi trường thực thi (runtime system), trình thu gom rác (garbage collector) cùng các thư viện cốt lõi.
  • Cơ chế hiển thị và render: Khác với kiến trúc Native (giao tiếp trực tiếp với OEM Widgets) hay Hybrid (dùng WebView và cầu nối JavaScript Bridge), Flutter vẽ trực tiếp toàn bộ giao diện lên một Canvas duy nhất bằng thuật toán so sánh khác biệt (Diff Algorithm) và cây chẩn đoán (Diagnosticable Tree), giúp giảm thiểu chi phí hiệu năng và đảm bảo tốc độ khung hình cao. Toàn bộ thành phần UI được đóng gói dưới dạng StatelessWidget (thành phần tĩnh) và StatefulWidget (thành phần có trạng thái, quản lý qua setState() và didUpdateWidget()). Hệ thống hỗ trợ sẵn hai chuẩn giao diện Material Design (Android) và Cupertino (iOS).
• Ngôn ngữ lập trình Dart: Chuẩn hóa theo ECMA-408, là ngôn ngữ hướng đối tượng theo lớp (class-based), hỗ trợ kiểm tra kiểu tĩnh (static typing) và kiểu an toàn (sound type). Điểm nổi bật của Dart là hỗ trợ song song hai cơ chế biên dịch: Just-In-Time (JIT) phục vụ tính năng Hot Reload trong quá trình phát triển, và Ahead-Of-Time (AOT) biên dịch trực tiếp sang mã máy (ARM/x86) khi đóng gói sản phẩm để đạt hiệu năng tương đương mã nguồn gốc. Dart hỗ trợ mô hình lập trình phản ứng (Reactive) và xử lý bất đồng bộ thông qua đối tượng Future và Stream.
• Google Firebase: Đóng vai trò làm giải pháp phụ trợ (Backend-as-a-Service) hoàn chỉnh:
  • Firebase Realtime Database: Cơ sở dữ liệu NoSQL lưu trữ dưới dạng cây JSON, cho phép tự động đồng bộ dữ liệu thời gian thực tới tất cả các máy khách kết nối.
  • Firebase Authentication: Hệ thống xác thực bảo mật hỗ trợ xác thực bằng Email/Mật khẩu và tích hợp xác thực từ bên thứ ba như Google, Facebook.
  • Bảo mật và truyền tải: Toàn bộ giao tiếp giữa ứng dụng và máy chủ được mã hóa qua giao thức SSL.

Phương pháp nghiên cứu thực tế được triển khai trong đồ án bao gồm:

• Phương pháp khảo sát hiện trạng: Phân tích chức năng và ưu/nhược điểm của 3 ứng dụng thương mại tiêu biểu gồm Gas24h (Công ty Cổ phần Dầu khí Miền Nam), VipGas và sàn thương mại điện tử Lazada.
• Phương pháp phân tích và thiết kế phần mềm: Đặc tả yêu cầu chức năng, phi chức năng; xây dựng sơ đồ ca sử dụng (Use Case Diagram); thiết kế kiến trúc dữ liệu NoSQL trên Firebase.
• Phương pháp kiểm thử phần mềm: Thực hiện kiểm thử chức năng (Functional Testing) theo các kịch bản kiểm thử (Test Cases) chi tiết trên từng màn hình giao diện.

---

Thiết kế và triển khai

Ứng dụng được thiết kế theo mô hình Client - Server không máy chủ truyền thống (Serverless), trong đó Flutter đóng vai trò lớp giao diện người dùng và xử lý cục bộ trên thiết bị iOS, còn Firebase đảm nhận toàn bộ việc lưu trữ dữ liệu, xác thực và đồng bộ hóa.

Cấu trúc cơ sở dữ liệu trên Firebase Realtime Database

Cơ sở dữ liệu NoSQL của hệ thống được tổ chức thành các nút JSON chính như sau:

• Danh mục tài khoản: Lưu thông tin định danh, email, họ tên, địa chỉ giao hàng và phân quyền người dùng (Khách hàng/Admin).
• Thông tin đặt hàng: Quản lý danh sách các đơn đặt hàng mới từ khách hàng.
• Trạng thái xử lý đơn hàng: Theo dõi chi tiết các đơn hàng theo các trạng thái: đang chờ nhận hàng, đã nhận hàng thành công, hoặc đã bị hủy đơn.
• Đánh giá và bình luận: Lưu trữ nội dung phản hồi, thời gian bình luận và đánh giá của khách hàng đối với từng sản phẩm.

Quy định nghiệp vụ và ràng buộc hệ thống

Hệ thống thiết lập hệ thống quy định nghiệp vụ chặt chẽ cho cả hai nhóm người dùng thông qua bảng mã quy định:

Mã quy định	Tên quy định	Mô tả chi tiết và ràng buộc	Áp dụng cho
QĐ_ĐN	Quy định đăng nhập	Nhập chính xác Email và Mật khẩu đã đăng ký để truy cập hệ thống	Khách hàng & Admin
QĐ_BLSP	Quy định bình luận	Phải nhập nội dung bình luận vào ô nhập liệu trước khi bấm gửi, không được để trống	Khách hàng
QĐ_QMK	Quy định quên mật khẩu	Nhập đúng địa chỉ Email đã đăng ký để nhận liên kết/thông tin đặt lại mật khẩu	Khách hàng
QĐ_ĐMK	Quy định đổi mật khẩu	Phải nhập đúng mật khẩu cũ; mật khẩu mới bắt buộc phải có độ dài từ 6 ký tự trở lên	Khách hàng
QĐ_TKH	Quy định thêm khách hàng	Thêm khách hàng bằng Email; không được phép sử dụng Email đã tồn tại trong hệ thống	Admin
QĐ_XKH	Quy định xóa khách hàng	Chỉ được quyền xóa các tài khoản có vai trò là khách hàng	Admin
QĐ_SKH	Quy định sửa khách hàng	Được phép chỉnh sửa thông tin địa chỉ giao hàng của khách hàng	Admin
QĐ_TSP	Quy định thêm sản phẩm	Sản phẩm thêm mới không được trùng tên/mã với sản phẩm đã có trong danh mục	Admin
QĐ_SSP	Quy định sửa sản phẩm	Chỉ được phép chỉnh sửa các trường thông tin mô tả, giá của sản phẩm	Admin
QĐ_XSP	Quy định xóa sản phẩm	Chỉ được xóa những sản phẩm không còn kinh doanh tại cửa hàng	Admin

Bên cạnh đó, hệ thống tích hợp các thuật toán tính toán tự động: tính tổng số lượng sản phẩm trong giỏ hàng, tính tổng tiền thanh toán, tính thời gian gửi bình luận, và đặc biệt là tính toán thời gian dự kiến hết gas của khách hàng theo chu kỳ mặc định là 45 ngày.

---

Nội dung chính theo từng chương

Chương 1: Cơ sở lý thuyết

Chương này tập trung trình bày tổng quan và phân tích kỹ thuật các công nghệ nền tảng. Nội dung làm rõ cấu trúc 2 tầng của Flutter (Application và Shell), cơ chế điều khiển của máy ảo Dart VM với hai chế độ biên dịch JIT và AOT, phân tích ưu thế không phụ thuộc OEM Widgets của Flutter so với kiến trúc Native và Hybrid. Tác giả giới thiệu chi tiết hệ thống Widget, chu trình vòng đời giữa StatelessWidget và StatefulWidget, thuật toán Diff Algorithm. Tiếp đó, chương phân tích các đặc trưng của ngôn ngữ Dart (chuẩn ECMA-408, Type-safe, Garbage Collection, xử lý Future/Stream) và các dịch vụ cốt lõi của Google Firebase (Realtime Database NoSQL JSON, Firebase Authentication, SSL).

Chương 2: Khảo sát hiện trạng và xác định yêu cầu

Tác giả tiến hành khảo sát thực tế 3 ứng dụng: Gas24h (đặt hàng trực tuyến, tìm đại lý qua GPS, quét mã QR), VipGas (đặt gas nhanh qua một thao tác, xác nhận qua tổng đài), và Lazada (tìm kiếm sản phẩm, giỏ hàng, liên kết mạng xã hội). Dựa trên kết quả khảo sát, chương xác định các yêu cầu chức năng nghiệp vụ (Lưu trữ, Tra cứu, Tính toán, Kết xuất), yêu cầu chức năng hệ thống dành cho Khách hàng và Admin, yêu cầu phi chức năng (tính tiến hóa, tính tiện dụng, tính hiệu quả, tính tương thích trên thiết bị iOS, tính tái sử dụng của mã nguồn), đồng thời xây dựng sơ đồ Use Case cho từng phân hệ.

Chương 3: Thiết kế phần mềm

Chương 3 trình bày chi tiết toàn bộ thiết kế kiến trúc dữ liệu và giao diện người dùng. Về dữ liệu, chương mô tả mô hình NoSQL trên Firebase với các nút lưu trữ tài khoản, giỏ hàng, đơn hàng và bình luận. Về giao diện, chương cung cấp thiết kế màn hình kèm bảng mô tả thành phần UI và bảng mô tả logic xử lý sự kiện tương ứng cho:

• Màn hình khởi đầu, Đăng nhập, Đăng ký, Quên mật khẩu.
• Trang chủ khách hàng (phân loại theo danh mục: Bình gas, Bếp gas, Phụ kiện), Menu tùy chọn.
• Màn hình chi tiết sản phẩm và gửi đánh giá/bình luận.
• Màn hình Giỏ hàng và màn hình Thanh toán.
• Trang chủ Admin, màn hình chi tiết đơn hàng của Admin và Menu quản trị hệ thống.

Chương 4: Cài đặt và kiểm thử

Chương này mô tả quá trình thiết lập môi trường phát triển trên iOS và thực thi kiểm thử chức năng cho từng màn hình thông qua các bảng ca kiểm thử (Bảng 23 đến Bảng 29): kiểm thử màn hình Đăng nhập, Trang chủ và thông tin Khách hàng, Trang chủ và thông tin Admin, Giỏ hàng, Thanh toán, Đánh giá sản phẩm và Chi tiết đơn hàng. Kết quả kiểm thử được tổng hợp và biểu diễn qua biểu đồ đánh giá mức độ ổn định của các chức năng.

---

Kết quả và đóng góp

Kết quả chính

Đồ án đã xây dựng và cài đặt thành công ứng dụng di động quản lý mua bán gas hoàn chỉnh trên môi trường iOS bằng Flutter và Dart, kết nối backend Firebase:

• Hoàn thiện hệ thống xác thực người dùng đa dạng: đăng nhập bằng tài khoản nội bộ (Email/Mật khẩu) và đăng nhập nhanh bằng tài khoản Google, Facebook; hỗ trợ quy trình cấp lại mật khẩu qua email tự động.
• Xây dựng danh mục sản phẩm trực quan gồm 3 nhóm hàng hóa chính: Bình gas, Bếp gas và Phụ kiện.
• Vận hành trơn chu quy trình đặt hàng: từ xem chi tiết sản phẩm, thêm vào giỏ hàng, chọn phương thức thanh toán đến gửi đơn hàng.
• Xây dựng cơ chế theo dõi đơn hàng thời gian thực (đang đợi xử lý, đã nhận hàng, đã hủy đơn) và chức năng bình luận/đánh giá sản phẩm.
• Tích hợp logic tính toán chu kỳ sử dụng gas tự động (mặc định 45 ngày) hỗ trợ người dùng theo dõi thời điểm cần đổi bình mới.
• Xây dựng phân hệ quản trị dành cho Admin cho phép kiểm soát danh mục sản phẩm, quản lý thông tin khách hàng và cập nhật trạng thái đơn hàng.
• Kiểm thử thành công các ca kiểm thử chức năng, đảm bảo hệ thống vận hành ổn định trên thiết bị iOS.

Đóng góp của đề tài

• Ứng dụng thành công công nghệ Flutter và ngôn ngữ Dart vào bài toán thương mại điện tử thực tế dành cho mặt hàng đặc thù (gas), chứng minh tính khả thi của giải pháp phát triển ứng dụng di động hiệu năng cao với chi phí thời gian tối ưu.
• Đề xuất mô hình kết hợp giữa kiến trúc giao diện hướng thành phần (Widget Tree) của Flutter với hệ thống cơ sở dữ liệu thời gian thực không máy chủ (Firebase Realtime Database), giúp loại bỏ sự phức tạp trong việc xây dựng và duy trì hạ tầng máy chủ backend riêng biệt.

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế

• Ứng dụng mới chỉ tập trung thử nghiệm và kiểm thử chính trên nền tảng hệ điều hành iOS trong phạm vi đề tài, chưa hoàn thiện kiểm thử diện rộng trên các dòng thiết bị Android khác nhau.
• Hệ thống thanh toán dừng lại ở mức lựa chọn hình thức và xác nhận đơn hàng, chưa tích hợp trực tiếp các cổng thanh toán điện tử trực tuyến (như ví điện tử hay thẻ ngân hàng).
• Quy tắc phân quyền và an toàn dữ liệu chủ yếu dựa trên logic mã nguồn client và quy tắc bảo mật cơ bản của Firebase.

Hướng phát triển trong tương lai

• Triển khai và tối ưu hóa đồng bộ ứng dụng trên hệ điều hành Android để phục vụ đa dạng đối tượng người dùng.
• Tích hợp thêm các cổng thanh toán trực tuyến trong nước và quốc tế nhằm đa dạng hóa phương thức thanh toán.
• Bổ sung hệ thống thông báo đẩy (Push Notifications qua Firebase Cloud Messaging) để tự động nhắc nhở khách hàng khi sắp đến chu kỳ 45 ngày hết gas hoặc thông báo trạng thái đơn hàng tức thì.

---

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho:

• Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm: Tham khảo cấu trúc hoàn chỉnh của một đồ án tốt nghiệp ứng dụng di động, từ khâu khảo sát hiện trạng, đặc tả Use Case, thiết kế cơ sở dữ liệu NoSQL đến lập bảng kiểm thử chức năng.
• Lập trình viên phát triển ứng dụng di động: Nắm vững lý thuyết kiến trúc của Flutter (Widget Tree, Diff Algorithm, cơ chế quản lý trạng thái Stateless/Stateful, Dart VM, JIT/AOT) tại Chương 1 và cách tổ chức kết nối CSDL Firebase Realtime Database tại Chương 3.
• Nhà phát triển các ứng dụng thương mại điện tử, bán hàng dịch vụ: Tham khảo quy trình phân tích nghiệp vụ, bảng thiết kế thành phần giao diện và các bộ quy định ràng buộc dữ liệu (Bảng 1 - Bảng 4) để áp dụng cho các hệ thống quản lý bán hàng tương tự.

---

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

1. Đồ án giải quyết vấn đề thực tiễn nào trong thị trường kinh doanh gas?

Đề tài giải quyết tình trạng người tiêu dùng thiếu thông tin về các chủng loại, mẫu mã gas trên thị trường và đối mặt với nguy cơ gas giả, gas kém chất lượng. Ứng dụng cung cấp kênh đặt gas trực tuyến minh bạch, hiển thị thông tin rõ ràng về bình gas, bếp gas, phụ kiện, đồng thời cho phép khách hàng đọc và gửi đánh giá thực tế về sản phẩm.

2. Vì sao nhóm tác giả lựa chọn Flutter và Dart để phát triển ứng dụng thay vì các nền tảng khác?

Flutter và Dart được chọn vì khả năng kết hợp giữa tốc độ phát triển nhanh (Fast Development qua tính năng Hot Reload nhờ cơ chế biên dịch JIT) và hiệu năng gốc (Native Performance nhờ biên dịch AOT sang mã máy ARM/x86). Ngoài ra, Flutter tự vẽ giao diện trực tiếp lên Canvas mà không phụ thuộc vào OEM Widgets hay cầu nối JavaScript Bridge, giúp giao diện hiển thị mượt mà và nhất quán.

3. Cơ sở dữ liệu của ứng dụng được tổ chức như thế nào trên Firebase Realtime Database?

Cơ sở dữ liệu được tổ chức dưới dạng cấu trúc cây JSON phi quan hệ (NoSQL), chia thành các nhánh dữ liệu riêng biệt: danh sách tài khoản người dùng, thông tin đơn hàng mới của khách hàng, danh sách đơn hàng theo các trạng thái (đang chờ, đã nhận, đã hủy), danh mục sản phẩm và dữ liệu đánh giá/bình luận sản phẩm.

4. Ứng dụng có chức năng tính toán tự động nào đặc thù cho nghiệp vụ bán gas?

Bên cạnh việc tự động tính tổng số lượng sản phẩm trong giỏ hàng và tổng số tiền thanh toán, ứng dụng có chức năng tính toán thời gian hết gas dự kiến của khách hàng với chu kỳ mặc định được thiết lập là 45 ngày, giúp hỗ trợ theo dõi và quản lý nhu cầu sử dụng.

5. Quá trình kiểm thử phần mềm được tiến hành trên những phân hệ nào?

Kiểm thử chức năng được tiến hành chi tiết trên 7 phân hệ giao diện chính: màn hình Đăng nhập, màn hình Trang chủ và thông tin Khách hàng, màn hình Trang chủ và thông tin Admin, màn hình Giỏ hàng, màn hình Thanh toán, màn hình Đánh giá sản phẩm và màn hình Chi tiết đơn hàng của Admin.

---

Kết luận

Đồ án "Phát triển ứng dụng quản lý mua bán gas trên iOS - Sử dụng ngôn ngữ Dart trên nền tảng Flutter" đã giải quyết thành công bài toán xây dựng một giải pháp thương mại điện tử di động chuyên biệt cho lĩnh vực kinh doanh khí đốt. Nhóm tác giả đã làm chủ quy trình phát triển ứng dụng di động với công nghệ Flutter/Dart kết hợp dịch vụ đám mây Firebase Realtime Database, hoàn thành đầy đủ các phân hệ chức năng cho cả người mua và người quản trị. Kết quả kiểm thử trên môi trường iOS chứng minh tính ổn định, tiện dụng và khả năng mở rộng của phần mềm trong thực tế.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. TÌM HIỂU VỀ FLUTTER 1. Flutter làgì? Flutter làmobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS vàAndroid trong khoảng thời gian ngắn. Flutter hoạt động với những code sẵn có được sử dụng bởi các lập trì nh viên, các tổ chức.

Flutter được phát triển nhằm giải quyết bài toán thường gặp trong mobile làFast Development và Native Performance. Nếu như React Native chỉ đảm bảo Fast Development vàcode native thuần chỉ đảm bảo Native Performance thìFlutter làm được cả 2 điều trên. Flutter Framework Model Cấu thành như thế nào? Flutter được viết chia làm hai tầng. Tầng ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên một ứng dụng Flutter.

Các đoạn mã này cung cấp phương tiện để có thể thay đổi và chỉnh sửa chúng. Từ đó giúp ứng dụng của lập trình viên có thể được tùy chỉnh theo mong muốn. Tầng Application này giúp lập trình viên thay đổi mã nguồn ứng dụng ở thời điểm compile time. Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng C++.

Tầng Shell này chứa các công tụ trợ giúp ứng dụng Flutter trong quá trình chạy. Nổi bật cần lưu ý ở tầng này là máy ảo Dart VM. Khái niệm máy ảo là khái niệm về một ứng dụng chạy song song với mã nguồn chính như một phần của ứng dụng. Máy ảo Dart VM có ba nhiệm vụ chính bao gồm.

 Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết bị phần cứng (hoặc phần mềm nằm ngoài ứng dụng).  Thông dịch các đoạn mã Dart theo phương thức JIT (Just in time - mã nguồn chỉ được thông dịch khi được gọi đến) hoặc AOT (Ahead of Time – Mã) 12 do an  Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như cung cấp các runtime system bao gồm garbage collector, một vài các thư viện cần có của ngôn ngữ. So Sánh với các Cross-platform framework khác. Một ứng dụng để chạy được trên các thiết bị thông thường sẽ tạm quan tâm tới hai thành phần.

Thành phần gần với lập trình viên hơn là lớp Application. Lớp Application chứa các đoạn mã được viết bởi lập trình viên và các công cụ giúp ứng dụng hoạt động và quản lý hoạt động của ứng dụng. Thành phần được quan tâm thứ hai là lớp Platform ở đây dùng để chỉ các hệ điều hành hoặc các ứng dụng trung gian giữa ứng dụng của lập trình viên và thiết bị. Trong phạm vi lập trình ứng dụng mobile, Lớp Platform được chia làm ba thành phần bao gồm.

 Services: Bao gồm các ứng dụng được viết và cài đặt mặc định trong thiết bị có trách nhiệm quản lý giao tiếp giữa các ứng dụng trong thiết bị với nhau, cung cấp thông tin của thiết bị cho các ứng dụng hoặc thực thi các yêu cầu của ứng dụng để điều khiển thiết bị (Location, Camera, Sensors.  Canvas/Events: Là các ứng dụng giúp hiển thị giao diện lên màn hình hoặc các thiết bị trình chiếu đồng thời nhận lại các sự kiện xuất hiện trên các giao diện này (ví dụ như tương tác của người dùng hoặc các sự kiện từ các animation.  OEM Widgets: Thành phần phụ được cấu thành do sự thống nhất giữa các vendor (nhà cung cấp thiết bị (HTC), đơn vị phát hành thiết bị (NTT Docomo)) nhằm thống nhất một quy chuẩn chung cho các UI (thành phần giao diện) được sử dụng trong các Platform. Quy chuẩn được thống nhất này tạo ra một vài giới hạn cho việc viết lên UI sẽ được nói kĩ ở phần sau.

Thành phần sẽ được so sánh trong phạm vi bài viết này là kiến trúc của lớp Application cũng như cách mà lớp Application giao tiếp với lớp Platform. Giống như đã đề cập ở phần trước. Tầng Application của Flutter cung cấp kiến trúc cho một ứng 13 do an dụng viết bằng Flutter và tầng Shell cung cấp khả năng giao tiếp giữa ứng dụng viết bằng Flutter và lớp Platform. Lấy ví dụ về một ứng dụng được viết bằng đoạn mã Native.

Toàn bộ mã thực thi được viết ở dạng Native sẽ được biên dịch hoặc thông dịch qua dạng mà tầng Platform có thể hiểu được và thực thi trên đó. Đối với ứng dụng viết ở dạng Hybrid, các đoạn mã giao diện của ứng dụng được viết bằng HTML/CSS và được vẽ ra với DOM qua dạng hiển thị được trên WebView. WebView sẽ trực tiếp điều khiển Canvas vẽ lên UI và nhận các event ngược lại thông qua WebView đó. Mã thực thi của các ứng dụng viết dựa trên Hybrid được sử dụng dưới dạng Javascript.

JavaScript có thể dễ dàng điều khiển HTML/CSS thông qua giao tiếp với WebView tuy nhiên nhằm mục đích bảo mật, WebView không được cung cấp khả năng giao tiếp với các services hoặc điều khiển phần cứng của lớp Platform dẫn đến các ứng dụng viết dựa trên Hybrid cần một module trung gian thường gọi là Bridge để làm điều này. Module này phải đọc hiểu Javascript và tồn tại luôn trong mãnguồn của ứng dụng dẫn đến kích thước của ứng dụng bị tăng lên đáng kể3. Đối với các ứng dụng được viết ở dạng WebNative hoặc Cross compiled, sẽ không có phần WebView được sử dụng mà thay vào đó module Bridge sẽ thực hiện toàn bộ các hành vi trung gian giữa lớp Application và lớp Shell. Mã nguồn của ứng dụng cũng không bị giới hạn bởi Javascript nữa mà tùy thuộc vào nhà phát triển các nền tảng dạng này.

Có thể là Native Code có thể là Non-native code. Đối với Flutter, mã nguồn được cross compile thành native code. Dựa vào máy ảo Dart VM, những thành phần ít thay đổi sẽ được compile dạng AOT còn những thành phần thường xuyên thay đổi sẽ được compile thành dạng JIT. Flutter không cam kết với các OEM Widgets.

Flutter cho phép lập trình viên thay đổi và điều khiển từng pixel trên màn hình và không cần quan tâm đến những giới hạn của OEM Widgets. Tuy nhiên khác với các ứng dụng viết ở dạng Hybrid khi lập trình viên phải tự quan tâm đến các chuẩn của OEM Widgets, Flutter cũng cung cấp các Widget mặc định hỗ trợ hai nền tảng giao diện là Material Design (cho Android/Fuchsia) và 14 do an Cupertino (cho iOS). Bạn cũng có thể quay trờ về với Flat Design thông qua một số thư viện trôi nổi trên thị trường. Các Widget trong flutter Trong Flutter, mọi thứ đều làWidgets vậy Widget làgì ? Chúng ta xét qua thử một đoạn code mẫu bên dưới.

15 do an Đây là hai class quan trọng nhất trong Flutter. Theo đó, class Widget chịu trách nhiệm hình thành cấu trúc của Diagnosticable Tree4 (Cây chuẩn đoán là một cấu trúc dữ liệu dạng cây hỗ trợ việc định nghĩa cấu trúc giao diện được vẽ lên trong ứng dụng viết bằng Flutter) trong khi class Element chịu trách nhiệm quản lý trạng thái của từng Widget trên cái cây đó. Tư tưởng cơ bản của Flutter tương tự như một Web Application. Tất cả trong một.

Flutter căng ra một mảnh vải làcanvas vàvẽ tất cả mọi thứ lên đó. Khi trạng thái của dữ liệu thay đổi vídụ như người dùng chuyển màn hì nh hay thay đổi dữ liệu trên màn hình được phản ánh thông qua việc xóa đi các Widget cũ nh vìvậy thay vìphải biết đến các StoryBoard (trong vàvẽ lên các Widget mới. Chí iOS) hay các Activity (trong Android), Flutter đưa tất cả các khái niệm liên quan đến giao diện về một khái niệm duy nhất gọi làWidget. Việc quản lý trạng thái của các Widget cũng được đưa về cho lập trình viên thực hiện.

Điểm khác biệt này cũng đặc biệt hơn khi Dart là ngôn ngữ Component Based. Trong Flutter, khi muốn điều chỉnh trạng thái về kích thước hay vị trícủa một Widget nào đó, ta không thực hiện việc đó trong Widget hiện tại mà được khuyến khí ch bọc Widget đó trong một Widget nào đó chỉ chuyên làm việc này. Điều này khiến cho tí nh chất "Trong Flutter thìmọi thứ đều làWidget" lại càng chuẩn hơn bao giờ hết. Màn hì nh làWidget, thành phần giao diện cũng là Widget, thậm chícả thông tin về layout cũng làWidget.

Một điểm nữa cần lưu tâm cũng là đặc tí nh của Widget trong Flutter đó là thuộc nh Widget#key. Mọi Widget đều độc lập. Lído làvìWidget không thể tự vẽ lại bản tí thân. Để thực hiện điều này ta cần thông báo cho Element.

Cách dễ nhất để cóthể dễ dàng thông báo cho Element làlàm bẩn (dirty) instance tương ứng dẫn đến Widget Tree được vẽ lại. Widget Tree được vẽ lại thìinstance của Widget cũ sẽ không còn. 16 do an Trong một vài trường hợp cần phải tìm lại giátrị của Widget tại vị trí được vẽ lại, ta sử dụng key làm chìa khóa cho vấn đề này. StatefulWidget làgì? Đi qua một vídụ về StatefulWidget để dễ hì nh dung.

Khi tạo mới một StatefulWidget, ta quan tâm đến hai class làStatefulWidget vàState của Widget đó. StatefulWidget là phần không thay đổi trong Widget Tree, thay vào đó, State làphần được thay đổi. Mỗi khi Widget bị làm bẩn, state của Widget đó sẽ được khởi tạo lại thông qua việc gọi đến phương thức StatefulWidget#createState(). Generic type5 (kiểu giữ chỗ) của State định nghĩa ra kiểu dữ liệu của thuộc tí nh State#widget chứa trong nó.

Thuộc tính này chí nh là 17 do an instance của StatefulWidget đã tạo ra State đó. Chính nhờ vậy, từ trong State hoàn toàn cóthể lấy được những giátrị được truyền vào bên trong StatefulWidget thay vì phải truyền vào thông qua hàm khởi tạo. ExampleStatefulWidget class nằm trong Widget Tree và ít thay đổi. Thay vìtạo một class dễ thay đổi trong cây, Flutter cung cấp cho Widget này một thành phần gọi làState.

Trong State chứa một thể hiện của Element tương ứng trong cây thông qua State#_element. Khi cần vẽ lại, có hai sự kiện được sử dụng để làm bẩn Element làdidUpdateWidget() vàsetState(). Ở hàm thứ nhất, khi configuration bị thay đổi, Widget sẽ được thông báo về sự thay đổi này. Lập trình viên @override lại phương thức didUpdateWidget() để bắt sự kiện trước khi Flutter build lại.

Còn để thực hiện yêu cầu Widget thay đổi State, lập trì nh viên sử dụng phương thức setState(). Trong phương thức setState()cócho phép truyền vào một hàm. Mục đích của việc này là đôi khi công việc build lại Widget sẽ tốn một khoảng thời gian trước khi mọi thứ hoàn thành. Hàm callback được truyền vào sẽ đảm bảo Flutter thực thi được trọn vẹn công việc của mì nh.

Vídụ sau khi thay đổi kích thước của một list view màmuốn scroll xuống cuối list. Statelesswidget làgì? Bên cạnh khái niệm về StatefulWidget ta cũng có StatelessWidget. Cách thức để khai báo thì đơn giản hơn rất nhiều và cũng vô cùng nhạt nhẽo. Đại để là cái gì mà đưa nó thành StatelessWidget được thì nên để nólàStatelessWidget.

Phương thức render của flutter Flutter sử dụng Diff Algorithm để xác định sự thay đổi trong Widget Tree.