Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng hệ thống bán hàng điện tử sử dụng mern stack và flutter

Kiểm thử chức năng đăng nhập với trường hợp không nhập “Email” .... Kiểm thử chức năng đăng nhập với trường hợp nhập “Email” không tồn tại .... Kiểm thử chức năng đăng nhập với trường hợ

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Hiện nay, tốc độ phát triển Internet rất nhanh chóng và mạnh mẽ, các đối thủ cạnh tranh luôn tìm cách kiểm soát phần lớn thị trường trên mạng Internet Đặc biệt, trong ngành dịch vụ, Internet đóng một vai trò vô cùng quan trọng Chính mảng thông tin sẽ tạo ra nhiều lợi nhuận nhất cho các doanh nghiệp, nhất là vì nó cung cấp một cổng vào ngay lập tức cho khách hàng hay cho các đối tác tiềm năng Đối với nhiều doanh nghiệp, Internet chỉ là một kênh thông tin để quảng bá truyền thông Hệ thống Website và App của doanh nghiệp được đưa lên cũng chỉ là để diễn tả lại cho hấp dẫn nội dung tự giới thiệu về công ty Nhưng việc tạo ra một ‘Hệ thống’ như vậy không chỉ đơn giản là giới thiệu về công ty mà còn cung cấp một lượng thông tin đáng kể và phù hợp cho người truy cập Chẳng hạn như các doanh nghiệp bán các sản phẩm rất khác nhau và có mong muốn giới thiệu hàng hoá của mình cho một khách hàng tiềm năng chung Nếu một doanh nghiệp muốn khách hàng truy cập vào hệ thống Website lẫn App của mình nhằm xây dựng một mối quan hệ, thì doanh nghiệp phải đảm bảo tính cập nhật đều đặn cho hệ thống này

Internet cũng có thể đảm bảo việc phân phối cho công chúng những dịch vụ liên quan đến những sản phẩm như đồ điện tử, hàng tiêu dùng Internet không chỉ cho phép họ tra cứu mọi thứ mà còn cung cấp một mạng phân phối các sản phẩm giá rẻ để tìm khách hàng Ngay cả khi một doanh nghiệp đưa ra một sản phẩm mới trên thị trường thì Internet cũng giúp cho họ lôi kéo được khách hàng từ khắp nơi trên toàn thế giới Hơn nữa, với sự phát triển của Logistics thì việc phát triển các hệ thống bán hàng sẽ ngày càng thuận lợi và dễ dàng hơn

Xuất phát từ những lý do trên nên nhóm chúng em quyết định sẽ thực hiện đề tài

“Xây dựng Hệ thống bán hàng điện tử bằng MERN Stack và Flutter” Với đề tài này, nhóm hy vọng vừa góp phần thúc đẩy việc phát triển công nghệ thông tin vừa tạo ra một hệ thống giúp kết nối giữa người bán và người mua trên Website lẫn App Đây sẽ là nơi mà người mua được quyền xem xét, lựa chọn những sản phẩm phù hợp mà không cần phải tốn thời gian ra trực tiếp cửa hàng Còn người bán sẽ có cơ hội giới thiệu về những sản phẩm mới, về những ưu đãi, cũng như các chương trình khuyến mãi,… một cách nhanh chóng và rộng rãi hơn

MỤC TIÊU CỦA ĐỀ TÀI

Trong quá trình thực hiện đề tài, nhóm thực hiện đã đặt ra những mục tiêu xây dựng như sau:

- Giao diện đẹp mắt, thân thiện với người dùng

- Chức năng mua sắm tiện lợi

- Đảm bảo hệ thống trải nghiệm người dùng mượt mà, không gặp những vấn đề gây khó chịu

- Chức năng thanh toán dễ dàng, nhanh chóng

- Xây dựng hệ thống bảo mật thông tin an toàn

- Xây dựng App cho Shipper dễ dàng nhận thông tin, cũng như giao hàng chính xác và nhanh chóng

- Đảm bảo hệ thống quản lý trơn tru, dễ dàng sử dụng

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Đề tài hướng đến khả năng đáp ứng đủ nhu cầu mua sắm online của người dùng Mục đích giúp tạo ra một hệ thống có thể giúp cho việc mua sắm thông qua Internet trở nên ngày càng thuận lợi hơn, tiết kiệm được thời gian, dễ dàng chọn được sản phẩm ưng ý Đồng thời, tạo ra một môi trường để kết nối các tín đồ mua sắm, cùng chia sẻ về chất lượng cũng như là trải nghiệm của sản phẩm Đề tài này góp phần thúc đẩy sự phát triển của công nghệ thông tin, thương mại điện tử và kinh tế xã hội

CƠ SỞ LÝ THUYẾT

TÌM HIỂU VỀ JAVASCRIPT

Hình 1 1 Logo ngôn ngữ lập trình Javascript [1]

• Javascript là một ngôn ngữ lập trình kịch bản được sử dụng rộng rãi để tạo các ứng dụng web tương tác Nó được phát triển bởi Brendan Eich tại Netscape Communications vào năm 1995 và ban đầu được gọi là Mocha, sau đó là LiveScript trước khi được đổi tên thành JavaScript vào năm 1995 Javascript là một ngôn ngữ lập trình bậc cao

• Javascript được sử dụng để thêm tính tương tác vào các trang web Ngoài ra JavaScript cũng được sử dụng để tạo nhiều ứng dụng khác nhau Nó là một ngôn ngữ lập trình quan trọng cần cho bất kì lập trình viên nào muốn làm việc trong lĩnh vực phát triển web hoặc phát triển ứng dụng

• Dễ phát triển đối với các dự án lớn: với việc sử dụng các kỹ thuật mới nhất trong lập trình nên Javascript giúp chúng ta phát triển các dự án lớn một cách dễ dàng

• Cộng đồng lập trình viên Javascript lớn nên dễ dàng tìm hiểu các kiến thức nâng cao từ những người đi trước

• Nhiều Framework lựa chọn: Hiện nay có rất nhiều framework sử dụng Javascript để phát triển như React

• Là mã nguồn mở: Javascript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí

Dùng trình biên dịch: để có thể chạy một file có đuôi js trên nền tảng node.js thì bắt buộc bạn phải sử dụng trình biên dịch để có thể sử dụng.

TÌM HIỂU VỀ MERN STACK

Hình 1 2 Logo công nghệ MERN STACK [2]

MERN Stack là một tập hợp các công nghệ được sử dụng để phát triển một ứng dụng full – stack bằng Javascript MERN Stack bao gồm:

✓ MongoDB: Một cơ sở dữ liệu NoSQL

✓ Express: Một framework của Node.js để phát triển back – end

✓ React: Một thư viện của Javascript để phát triển giao diện người dùng

✓ Node.js: Một nền tảng chạy Javascript bên ngoài trình duyệt

• Tính đồng nhất: Tất cả các công nghệ trong MERN Stack đều sử dụng Javascript giúp cho việc phát triển ứng dụng một cách dễ dàng và nhanh chóng

• Hiệu suất: Một trong những ưu tiên khi phát triển ứng dụng là hiệu suất hoạt động Với Node.js là một nền tảng có hiệu suất cao

• Khó để học và ứng dụng để làm một ứng dụng bằng MERN Stack.

• Có thể không phải là lựa chọn hàng đầu khi phát triển một số loại ứng dụng nhất định.

TÌM HIỂU VỀ REACT

Hình 1 3 Logo thư viện React [3]

• React là một thư viện của Javascript được sử dụng để xây dựng giao diện người dùng (UI) Được phát triển bởi Facebook là một công ty công nghệ hàng đầu thế giới và được sử dụng bởi nhiều công ty lớn như Instagram, Netflix, Airbnb,…

• React sử dụng mô hình component - based để xây dựng giao diện người dùng Giúp cho việc phát triển và bảo trì ứng dụng dễ dàng hơn

• Tính hiệu quả: React là một thư viện hiệu quả có thể giúp các ứng dụng web chạy nhanh hơn

• Tính tái sử dụng: React components có thể tái sử dụng nhiều lần trong một ứng dụng giúp tiết kiệm thời gian phát triển ứng dụng

• Được nhiều người sử dụng

• React chỉ được sử dụng cho lớp view trong mô hình MVC

• Khó tiếp cận cho người mới

TÌM HIỂU VỀ NODEJS

Hình 1 4 Logo nền tẳng NodeJS [4]

• NodeJs là một mã nguồn mở được xây dựng trên nền tảng Javascript V8 Engine

• Nó được xây dựng để chạy trên server và là một nền tảng không đồng bộ

• Node đặc biệt thích hợp để xây dựng những app cần đến tương tác real – time như chat

• Một số ứng dụng được xây dựng bằng NodeJs như X, Netflix, Uber

• NodeJs nhận và xử lý nhiều kết nối chỉ với một single – thread Điều này làm cho hệ thống ít tốn RAM

• JSON APIs: với cơ chế event-driven, non-blocking I/O (Input/Output) và mô hình kết hợp với Javascript là lựa chọn hàng đầu để làm web bằng JSON

• Streaming Data (Luồng dữ liệu): NodeJs sẽ xây dựng các Proxy phân vùng luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác

• Ứng dụng Web với thời gian thực: NodeJs rất hiệu quả khi xây dựng các ứng dụng thời gian thực (real – time – application) như chat, mạng xã hội

Tốn nhiều tài nguyên: Nếu ứng dụng cần nhiều tài nguyên CPU thì chúng ta không nên chọn NodeJs.

TÌM HIỂU EXPRESS

Express là một framework của NodeJs Express cung cấp nhiều tính năng mạnh mẽ trên nền tảng web cũng như các ứng dụng di động Express hỗ trợ các phương thức HTTP và middleware tạo ra một API mạnh mẽ và dễ sử dụng

• Express giúp cho việc phát triển ứng dụng được rút ngắn đi nhiều thời gian

• Không phù hợp với đa số các ứng dụng

• Khó để cho người mới có thể tiếp cận và học hỏi

TÌM HIỂU MONGODB

Hình 1 6 Logo cơ sở dữ liệu MongoDB [6]

• MongoDB là một hệ thống quản lý nguồn mã hóa cơ sở quản trị là NoSQL phụ thuộc vào cơ sở dữ liệu

• MongoDB là một tài liệu hướng dẫn cơ sở dữ liệu, các dữ liệu được lưu trữ trong loại tài liệu dạng JSON thay vì dạng bảng như hệ thống cơ sở dữ liệu quan hệ nên việc truy cập sẽ được tối ưu

• Với cơ sở dữ liệu quan hệ (như MySQL hay SQL Server…) chúng ta có khái niệm bảng, chúng sử dụng các bảng để lưu trữ dữ liệu thì với MongoDB chúng ta sẽ sử dụng khái niệm là bộ collections thay vì bảng

• So với RDBMS thì trong bộ sưu tập MongoDB phù hợp với bảng, còn tài liệu sẽ phù hợp với hàng, MongoDB sẽ sử dụng các tài liệu thay thế cho hàng trong RDBMS

• Collections trong MongoDB được cấu hình rất linh hoạt, cho phép các kho lưu trữ dữ liệu không cần phải đi kèm theo một cấu trúc nhất định

• Thông tin liên quan được lưu trữ giống nhau để truy cập truy vấn nhanh qua ngôn ngữ truy cập MongoDB

• Linh hoạt trong việc lưu trữ dữ liệu

• Dữ liệu trong MongoDB không có sự ràng buộc nên việc xóa hay cập nhật đều không cần phải mất thời gian kiểm tra các ràng buộc

• MongoDB rất dễ mở rộng

• Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) nhanh hơn hẳn so với các cơ sở dữ liệu quan hệ

• Tốn bộ nhớ do lưu trữ dưới dạng key – value, các collections chỉ khác về value do đó key sẽ bị lặp lại

• Khi insert / update / remove bản ghi MongoDB sẽ không cập nhật ngay mà phải sau 60 giây, MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi Điều này sẽ gây ra nguy cơ mất dữ liệu.

TÌM HIỂU VỀ FLUTTER

Flutter là một bộ công cụ mã nguồn mở được phát triển bởi Google để xây dựng các ứng dụng di động đa nền tảng chất lượng cao Nó sử dụng ngôn ngữ lập trình Dart và cung cấp một Framework UI mạnh mẽ, linh hoạt, cho phép bạn tạo ra các giao diện người dùng đẹp mắt, mượt mà và nhất quán trên nhiều thiết bị, bao gồm cả điện thoại thông minh

• Phát triển đa nền tảng: Flutter cho phép bạn xây dựng ứng dụng duy nhất có thể hoạt động trên cả iOS và Android, tiết kiệm thời gian và chi phí phát triển

• Hiệu suất cao: Các ứng dụng Flutter được biên dịch thành mã gốc, mang lại hiệu suất và khả năng đáp ứng như ứng dụng gốc được viết riêng cho từng nền tảng

• Ngoài ra, còn có Giao diện đẹp mắt, Tải lại nhanh, Cộng đồng lớn, Các thư viện hữu ích…

Flutter chỉ được sử dụng bằng ngôn ngữ Dart, ngôn ngữ không quá phổ biến Thiếu sự hỗ trợ một số tính năng vì đang trong giai đoạn phát triển

PHÂN TÍCH, KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

PHÂN TÍCH HIỆN TRẠNG

Với tốc độ tăng trưởng đáng kinh ngạc về khoa học và kỹ thuật hiện nay, song song cùng với các cuộc cách mạng khoa học 4.0, chất lượng cuộc sống của từng cá nhân trong xã hội không ngừng được cải thiện và nâng cao Như một kết quả hiển nhiên, nhu cầu mua sắm cũng không phải là một ngoại lệ Có thể nói, các thiết bị điện tử ngày nay được xem là những thiết bị không chỉ hỗ trợ, giúp đỡ con người trong nhiều mục đích khác nhau mà bên cạnh đó, chúng còn là các công cụ giải trí, cải thiện và nâng cao chất lượng cuộc sống Đặc biệt là các thiết bị điện tử thông minh, chúng cung cấp cho người dùng vô số các ứng dụng giải trí Các tiện ích công nghệ đáp ứng được nhiều nhu cầu sử dụng khác nhau cũng như các trải nghiệm công nghệ mới Không chỉ dừng lại ở nhu cầu giải trí, việc mua bán trao đổi qua các ứng dụng di động ngày càng phát triển và phổ biến Cụ thể, các ứng dụng “Bán hàng trực tuyến” sẽ dần dần thay thế những phương thức kinh doanh cũ trong các doanh nghiệp bởi tính ưu việt mà những ứng dụng này mang lại được như: nhanh hơn, rẻ hơn, tiện dụng hơn, hiệu quả hơn và không bị giới hạn không gian, thời gian Chính vì lẽ đó, nhóm chúng em đã quyết định thực hiện đề tài “Xây dựng Hệ thống bán đồ điện tử sử dụng MERN Stack và Flutter” này.

KHẢO SÁT HIỆN TRẠNG

2.2.1 Các hệ thống khảo sát

2.2.1.1 Hệ thống Bách Hóa Xanh

- Link App: https://play.google.com/store/apps/details?id=com.bachhoax anh&pcampaignid=web_share

- Link Website: https://www.bachhoaxanh.com/

Hình 2 1 BHX – Trang giới thiệu sản phẩm [7]

Hình 2 2 BHX – Trang chi tiết sản phẩm [7]

Hình 2 3 BHX – Trang tìm kiếm sản phẩm [7]

Hình 2 4 BHX – Trang giỏ hàng [7]

Hình 2 5 BHX – Màn hình giới thiệu sản phẩm [7]

Hình 2 6 BHX – Màn hình chi tiết sản phẩm [7]

Hình 2 7 BHX – Màn hình tìm kiếm sản phẩm [7]

Hình 2 8 BHX – Màn hình giỏ hàng [7]

Bảng 2 1 Nhận xét “Hệ thống bachhoaxanh.com”

Các chức năng Hạn chế

• Có danh sách các sản phẩm, giới thiệu sản phẩm

• Có hiển thị số lượng đánh giá và xếp loại cho mỗi sản phẩm

• Có chức năng tìm kiếm sản phẩm bằng giọng nói

• Đa dạng mặt hàng, danh mục

• Không xem được đánh giá sản phẩm

• Hiển thị quảng cáo gây khó chịu

• Thời gian phản hồi còn chậm

• Trang / Màn hình giỏ hàng chung với Trang / Màn hình đặt hàng

2.2.1.2 Hệ thống Di Động Việt

- Link App: https://play.google.com/store/apps/details?id=com.didongvie t.loyalty&pcampaignid=web_share

- Link Website: https://didongviet.vn/

Hình 2 9 DĐV – Trang giới thiệu sản phẩm [8]

Hình 2 10 DĐV – Trang chi tiết sản phẩm [8]

Hình 2 11 DĐV – Trang đánh giá sản phẩm [8]

Hình 2 12 DĐV – Trang giỏ hàng [8]

Hình 2 13 DĐV – Màn hình giới thiệu sản phẩm [8]

Hình 2 14 DĐV – Màn hình chi tiết sản phẩm [8]

Hình 2 15 DĐV – Màn hình thông tin cửa hàng [8]

Hình 2 16 DĐV – Màn hình thông tin tin tức [8]

Bảng 2 2 Nhận xét "Hệ thống didongviet.com"

Các chức năng Hạn chế

• Có danh sách các sản phẩm, giới thiệu sản phẩm

• Đa dạng các sản phẩm

• Phân loại sản phẩm theo danh mục

• Có trang thông tin tin tức công nghệ, thông tin các cửa hàng phân bố rộng khắp cả nước

• Có quét mã QR để xem thông tin sản phẩm nhanh chóng

• Chưa có chức năng đặt hàng / thanh toán cho App

• Không có chức năng xem cũng như đánh giá sản phẩm trên App

• Không có chức năng tìm kiếm sản phẩm trên App

2.1.2 Yêu cầu bài toán của đề tài

- Không yêu cầu người dùng cung cấp quá nhiều thông tin riêng tư

- Xây dựng được hệ thống bán hàng tiện lợi, thanh toán nhanh chóng

- Tối ưu giao diện, nâng cao trải nghiệm người dùng

- Nhiều sản phẩm đa dạng

- Không spam Email hoặc tin nhắn quảng cáo để tránh gây phiền nhiễu cho người dùng

- Thanh toán nhanh chóng, tiện lợi

- Quy trình đặt hàng không quá phức tạp, rườm rà.

XÁC ĐỊNH TÁC NHÂN VÀ CHỨC NĂNG

Bảng 2 3 Bảng xác định tác nhân và chức năng

• Chỉnh sửa thông tin tài khoản cá nhân

• Tìm kiếm và lọc sản phẩm

• Xem chi tiết sản phẩm

• Đánh giá sản phẩm, dịch vụ

• Đặt hàng và thanh toán

• Xem thông tin các đơn hàng cần giao

• Quản lý doanh thu, tiền cần trả

• Thanh toán tiền thu hộ (COD)

• Tìm kiếm và lọc sản phẩm

• Xem chi tiết sản phẩm

XÁC ĐỊNH YÊU CẦU

2.4.1 Danh sách yêu cầu chức năng hệ thống

- Người dùng có phân quyền là “User” trong hệ thống có thể thao tác với các chức năng sau: o Đăng ký, đăng nhập, đăng xuất, quên mật khẩu o Chỉnh sửa thông tin cá nhân o Tìm kiếm, lọc, sắp xếp, xem chi tiết sản phẩm o Quản lý giỏ hàng o Quản lý đơn hàng o Đánh giá sản phẩm, dịch vụ o Đặt hàng và thanh toán

- Người dùng có phân quyền là “Admin” trong hệ thống có thể thao tác với các chức năng sau: o Đăng nhập, đăng xuất, quên mật khẩu o Chỉnh sửa thông tin cá nhân o Quản lý đánh giá

50 o Quản lý đơn hàng o Quản lý sản phẩm o Quản lý tài khoản o Quản lý vouchers o Thống kê

- Người dùng có phân quyền là “Shipper” trong hệ thống có thể thao tác với các chức năng sau: o Đăng ký, đăng nhập, đăng xuất, quên mật khẩu o Chỉnh sửa thông tin cá nhân o Xem thông tin các đơn hàng cần giao o Chỉ đường giao hàng o Xác nhận đơn hàng o Quản lý doanh thu, tiền cần trả

2.4.2 Danh sách các yêu cầu phi chức năng

- Giao diện thân thiện, dễ sử dụng

- Tốc độ xử lý các thao tác nhanh chóng, chính xác

- Hệ thống có độ bảo mật cao

- Dễ dàng trong việc bảo trì, nâng cấp, phát triển hệ thống

- Hệ thống có chức năng bảo mật và phân quyền

- Mật khẩu được mã hóa trước khi được đưa vào lưu trữ trong cơ sở dữ liệu

- Người dùng đặt hàng và thanh toán một cách dễ dàng

LƯỢC ĐỒ USE CASE

Hình 2 17 Lược đồ Use Case

MÔ HÌNH HÓA YÊU CẦU

Bảng 2 4 Đặc tả Use Case “Đăng ký”

Brief description Người dùng đăng ký tài khoản

Pre-conditions Người dùng chưa có tài khoản trong hệ thống

Post-conditions Nếu đăng ký thành công, người dùng được chuyển về trang chủ

Use Case bắt đầu khi người dùng thực hiện đăng ký tài khoản:

1 Người dùng nhập Email, Mật khẩu

2 Hệ thống kiểm tra thông tin Email

3 Hệ thống kiểm tra độ dài Mật khẩu

4 Hệ thống tạo tài khoản cho người dùng trên Database

1 Ứng dụng thông báo “Email đã tồn tại” hoặc “Email không hợp lệ”

2 Ứng dụng thông báo “Mật khẩu không hợp lệ”

3 Ứng dụng thông báo “Đăng ký không thành công, vui lòng thử lại”

4 Người dùng nhập lại thông tin

Hình 2 18 Sequence Diagram cho chức năng “Đăng ký”

Bảng 2 5 Đặc tả Use Case “Đăng nhập”

Brief description Người dùng đăng nhập tài khoản vào hệ thống

Actor(s) Khách hàng, Quản trị viên

Pre-conditions Người dùng đã có tài khoản trong hệ thống

Post-conditions Nếu đăng nhập thành công, người dùng được thực hiện các chức năng theo phân quyền

Use Case bắt đầu khi người dùng thực hiện đăng nhập tài khoản vào hệ thống:

1 Người dùng nhập Email, Mật khẩu

2 Hệ thống kiểm tra định dạng Email

3 Hệ thống xác thực Email và Mật khẩu

4 Hệ thống xác định vai trò của người dùng thông qua quyền được lưu ở Database

5 Người dùng đăng nhập thành công vào hệ thống

1 Ứng dụng thông báo sai định dạng

2 Người dùng nhập lại Email và Mật khẩu

3 Ứng dụng thông báo “Đăng nhập thất bại”

Hình 2 19 Sequence Diagram cho chức năng “Đăng nhập”

Bảng 2 6 Đặc tả Use Case “Đăng xuất”

Brief description Người dùng đăng xuất khỏi hệ thống

Pre-conditions Người dùng đã đăng nhập vào hệ thống

Use Case bắt đầu khi người dùng thực hiện đăng xuất tài khoản khỏi hệ thống:

1 Người dùng chọn nút “Đăng xuất”

2 Người dùng đăng xuất ra khỏi hệ thống và trở về trang chủ

Hình 2 20 Sequence Diagram cho chức năng “Đăng xuất”

2.6.4 Chỉnh sửa thông tin cá nhân

Bảng 2 7 Đặc tả Use Case “Chỉnh sửa thông tin cá nhân”

Name Chỉnh sửa thông tin cá nhân

Brief description Người dùng chỉnh sửa thông tin cá nhân của mình

Pre-conditions Người dùng đăng nhập thành công vào hệ thống

Post-conditions Nếu chỉnh sửa thông tin cá nhân thành công, người dùng chuyển về trang chủ

Use Case bắt đầu khi người dùng thực hiện đăng nhập tài khoản vào ứng dụng:

1 Người dùng chọn nút “Thông tin cá nhân”

2 Người dùng dược xem các thông tin cá nhân của mình

3 Người dùng thay đổi thông tin của mình bằng cách nhập vào textbox

4 Người dùng chọn nút “Lưu” để cập nhật thông tin cá nhân của mình

Hình 2 21 Sequence Diagram cho chức năng “Chỉnh sửa thông tin cá nhân”

2.6.5 Thay đổi ảnh đại diện

Bảng 2 8 Đặc tả Use Case “Thay đổi ảnh đại diện”

Name Thay đổi ảnh đại diện

Brief description Người dùng thay đổi ảnh đại diện của mình

Post-conditions Nếu thay đổi ảnh đại diện thành công, người dùng chuyển về trang chủ

Use Case bắt đầu khi người dùng thực hiện đăng nhập tài khoản vào hệ thống:

2 Người dùng được xem các thông tin cá nhân của mình

3 Người dùng chọn icon điều chỉnh hình đại diện

4 Người dùng chọn ảnh từ thiết bị

5 Hệ thống tải ảnh lên Cloudinary và lưu lại hình ảnh của người dùng

Bảng 2 9 Đặc tả Use Case “Đổi mật khẩu”

Brief description Người dùng thay đổi mật khẩu tài khoản của mình

Use Case bắt đầu khi người dùng thực hiện đăng nhập tài khoản vào ứng dụng:

2 Người dùng chọn nút “Đổi mật khẩu”

3 Người dùng nhập mật khẩu hiện tại, mật khẩu mới, xác nhận mật khẩu

4 Người dùng chọn nút “Update”

5 Hệ thống kiểm tra mật khẩu hiện tại, mật khẩu mới, xác nhận mật khẩu

6 Người dùng chuyển về trang chủ

1 Hệ thống thông báo “Mật khẩu hiện tại không đúng” hoặc “Vui lòng nhập mật khẩu”

2 Hệ thống thông báo “Mật khẩu mới không đủ mạnh” hoặc “Vui lòng nhập mật khẩu mới”

3 Hệ thống thông báo “Xác nhận mật khẩu không đúng” hoặc “Vui lòng xác nhận mật khẩu”

Hình 2 22 Sequence Diagram cho chức năng “Đổi mật khẩu”

Bảng 2 10 Đặc tả Use Case “Khôi phục mật khẩu”

Name Khôi phục mật khẩu

Brief description Người dùng tạo mật khẩu mới khi quên mật khẩu

Pre-conditions Người dùng đã có tài khoản trong hệ thống

Post-conditions - Nếu thành công, mật khẩu mới được tạo

- Nếu thất bại, mật khẩu mới không được tạo

5 Hệ thống xác thực Email và gửi 1 mã token yêu cầu tạo mật khẩu mới về Email người dùng

6 Người dùng kiểm tra Email

7 Chuyển đến model tạo mật khẩu mới

8 Hiển thị form đặt lại mật khẩu mới

9 Nhập mật khẩu mới và mã token được gửi về Email

12 Chọn Back to Login, quay lại trang chủ

Hình 2 23 Sequence Diagram cho chức năng “Khôi phục mật khẩu”

2.6.8 Tìm kiếm / Xem sản phẩm – danh mục sản phẩm

Bảng 2 11 Đặc tả Use Case “Tìm kiếm / Xem sản phẩm – danh mục sản phẩm”

Name Tìm kiếm / Xem sản phẩm – danh mục sản phẩm

Brief description Người dùng tìm kiếm, xem danh sách, chi tiết sản phẩm

Actor(s) Khách (Guest), Khách hàng

- Nếu thành công, hiển thị danh sách sản phẩm theo từ khóa tìm kiếm (keyword) hoặc theo loại sản phẩm (category)

- Nếu thất bại, thông báo lỗi

2 Chọn chức năng tìm kiếm theo sản phẩm trên thanh tìm kiếm

5 Hiển thị danh sách tìm kiếm sản phẩm, hiển thị danh sách sản phẩm theo từ khóa

6 Chọn Next (hoặc Previous, số trang bất kỳ) ở phần phân trang để xem trang tiếp theo (trang trước đó, hoặc trang tương ứng)

7 Chọn vào một sản phẩm, chuyển đến trang chi tiết sản phẩm tương ứng

3-5a Chuyển đến trang tìm kiếm sản phẩm theo category, và danh sách sản phẩm thuộc category đã chọn

Hình 2 24 Sequence Diagram cho chức năng “Tìm kiếm / Xem sản phẩm – danh mục sản phẩm”

2.6.9 Thêm sản phẩm vào giỏ hàng

Bảng 2 12 Đặc tả Use Case “Thêm sản phẩm vào giỏ hàng”

Name Thêm sản phẩm vào giỏ hàng

Brief description Cho phép người dùng thêm sản phẩm vào giỏ hàng

Pre-conditions Hiển thị danh sách sản phẩm, số lượng tồn kho lớn hơn số lượng thêm vào giỏ hàng

Use Case bắt đầu khi người dùng truy cập vào website:

1 Người dùng click vào sản phẩm ở trang chủ

2 Hệ thống chuyển đến trang chi tiết sản phẩm, hiển thị sản phẩm vừa chọn

3 Người dùng chọn số lượng sản phẩm và click vào “Add to cart”

4 Hệ thống thêm sản phẩm vào giỏ hàng

Hình 2 25 Sequence Diagram cho chức năng “Thêm sản phẩm vào giỏ hàng”

2.6.10 Đặt hàng và thanh toán

Bảng 2 13 Đặc tả Use Case “Đặt hàng và thanh toán”

Name Đặt hàng và thanh toán

Brief description Cho phép người dùng đặt hàng và thanh toán

Post-conditions Thanh toán thành công nếu chọn hình thức thanh toán online

Use Case bắt đầu khi người dùng truy cập vào hệ thống:

1 Người dùng click vào giỏ hàng

2 Người dùng click “Check out”

3 Hệ thống chuyển đến trang “Shipping info”

4 Người dùng nhập thông tin cá nhân và thông tin vận chuyển

6 Hệ thống chuyển đến trang “Confirm order”

7 Người dùng click “Proceed to Payment”

8 Hệ thống chuyển đến trang “Payment”

9 Người dùng chọn hình thức thanh toán và click

10 Hệ thống xóa sản phẩm vừa đặt hàng thành công ra khỏi giỏ hàng và chuyển đến trang lịch sử đặt hàng

Hình 2 26 Sequence Diagram cho chức năng “Đặt hàng và thanh toán”

2.6.11 Quản lý đơn hàng của người dùng

Bảng 2 14 Đặc tả Use Case “Quản lý đơn hàng của người dùng”

Name Quản lý đơn hàng của người dùng

Brief description Người dùng xem lịch sử mua hàng, theo dõi đơn hàng, hủy đơn hàng

Pre-conditions Người dùng đã đăng nhập vào hệ thống

1 Chọn biểu tượng Account, hiển thị dropdown

3 Chuyển đến trang quản lý tài khoản

4 Chọn Lịch sử đơn hàng

5 Chuyển đến trang lịch sử mua hàng, hiển thị danh sách tất cả đơn hàng

6 Chọn Next (hoặc Previous, số trang bất kỳ) ở phần phân trang để xem trang tiếp theo (trang trước đó, hoặc trang tương ứng)

7 Chọn nút có ký hiệu chữ i để xem chi tiết

8 Chuyển đến trang chi tiết đơn hàng

9 Chọn Back to Purchase History để quay lại trang lịch sử mua hàng

7a Chọn nút ký hiệu cấm để hủy đơn hàng

8a Hiển thị thông báo yêu cầu xác nhận

9a1 Hủy đơn hàng thành công

Hình 2 27 Sequence Diagram cho chức năng “Quản lý đơn hàng của người dùng”

2.6.12 Shipper thanh toán tiền thu hộ (COD)

Bảng 2 15 Đặc tả Use Case “Shipper thanh toán tiền thu hộ (COD)”

Name Shipper thanh toán tiền thu hộ (COD)

Brief description Cho phép người dùng thanh toán, hoàn trả lại tiền thu hộ khi giao hàng về cho cửa hàng

Post-conditions Thanh toán thành công chọn hình thức thanh toán online

Use Case bắt đầu khi người dùng truy cập vào hệ thống:

1 Người dùng chọn vào trang Home

2 Người dùng click “Pay COD”

3 Hệ thống chuyển đến trang “Shipping info”

4 Người dùng nhập thông tin cá nhân và thông tin vận chuyển

5 Hệ thống chuyển đang trang thanh toán online bằng CARD

6 Người dùng nhập vào thông tin thanh toán như số thẻ, CVC, họ tên,…

7 Người dùng click “Pay” để thanh toán

8 Hệ thống thông báo thanh toán thành công, và số tiền cần hoàn trả lại cho cửa hàng về 0

Hình 2 28 Sequence Diagram cho chức năng “Shipper thanh toán tiền thu hộ (COD)”

Bảng 2 16 Đặc tả Use Case “Shipper giao hàng”

Brief description Người dùng xác nhận đơn hàng đã được giao thành công

Use Case bắt đầu khi người dùng thực hiện đăng nhập vào hệ thống:

1 Người dùng chọn vào trang Home

2 Hệ thống hiển thị danh sách đơn hàng cần phải giao

3 Người dùng nhấn vào nút “Direction” của một trong những đơn hàng có trong danh sách

4 Hệ thống chuyển sang ứng dụng “Google Map” để hiển thị đường đi, vị trí địa chỉ đơn hàng

5 Sau khi đến địa chỉ và giao hàng thành công, người dùng trở về lại ứng dụng của Shipper và nhấn chọn nút “Completely” để xác nhận đơn hàng giao thành công

6 Hệ thống hiện thông báo, người dùng xác nhận giao hàng thành công Đơn hàng giao thành công biến mất trong danh sách, số tiền thu hộ của đơn hàng được cộng vào số tiền cần hoàn trả của Shipper

Hình 2 29 Sequence Diagram cho chức năng “Shipper giao hàng”

2.6.14 Thêm đơn vị vận chuyển

Bảng 2 17 Đặc tả Use Case “Thêm đơn vị vận chuyển”

Name Thêm đơn vị vận chuyển

Brief description Cho phép quản trị viên thêm đơn vị vận chuyển mới vào hệ thống

Pre-conditions Người dùng đăng nhập thành công vào hệ thống với tài khoản Admin

1 Người dùng click vào tên người dùng trên header

2 Hệ thống hiển thị list option

4 Hệ thống chuyển sang trang “Dashboard”

5 Người dùng click “New Shipping”

6 Hệ thống chuyển sang form “New Shipping”

7 Người dùng nhập thông tin đơn vị vận chuyển cần thiết, sau đó click “Create”

8 Hệ thống thông báo thành công và chuyển sang trang

Hình 2 30 Sequence Diagram cho chức năng “Thêm đơn vị vận chuyển”

Bảng 2 18 Đặc tả Use Case “Thêm mới Shipper”

Brief description Người dùng thêm mới một “Shipper” vào một “Đơn vị vận chuyển”

6 Hệ thống chuyển sang trang “Shipper” và hiển thị danh sách “Users”

7 Người dùng chọn “Chỉnh sửa” ở phần Actions đối với User cần được thêm mới thành Shipper

8 Điền đầy đủ các thông tin cần thiết, và lựa chọn đơn vị vận chuyển cho shipper này

9 Nhấn nút “Update” để thêm mới Shipper thành công

10 Hệ thống thông báo thêm mới Shipper thành công và chuyển hướng về lại trang “Shipper”

Hình 2 31 Sequence Diagram cho chức năng “Thêm mới Shipper”

Bảng 2 19 Đặc tả Use Case “Thống kê”

Brief description Người dùng xem biểu đồ thống kê

4 Hệ thống hiển thị biểu đồ thống kê

Hình 2 32 Sequence Diagram cho chức năng “Thống kê”

Bảng 2 20 Đặc tả Use Case “Thêm sản phẩm”

Brief description Cho phép quản trị viên thêm sản phẩm mới vào danh sách sản phẩm bán

5 Người dùng click “New product”

6 Hệ thống chuyển sang form “New product”

7 Người dùng nhập thông tin sản phẩm, số lượng tồn kho, giá… sau đó click “Create”

8 Hệ thống thông báo thành công và chuyển sang trang “Product”

Hình 2 33 Sequence Diagram cho chức năng “Thêm sản phẩm”

Bảng 2 21 Đặc tả Use Case “Quản lý sản phẩm”

Name Quản lý sản phẩm

Brief description Người dùng thêm hình ảnh, sửa, xóa sản phẩm

Usecase bắt đầu khi người dùng thực hiện đăng nhập vào hệ thống:

6 Hệ thống chuyển sang trang “Product” và hiển thị danh sách “Product”

7 Người dùng chọn 1 trong 3 option:

1 Người dùng chọn chỉnh sửa

2 Hệ thống hiển thị trang “Update product”

3 Người dùng nhập thông tin chỉnh sửa và click

4 Hệ thống thông báo thành công và chuyển về trang “Product”

1 Người dùng chọn “Hình ảnh”

2 Hệ thống chuyển sang trang “Update product image”

3 Người dùng thêm hoặc xóa hình ảnh sau đó click “Update”

4 Hệ thống thông báo thành công và chuyển về trang “Product”

1 Người dùng chọn “Thùng rác”

2 Hệ thống xóa sản phẩm và thông báo xóa thành công

Hình 2 34 Sequence Diagram cho chức năng “Quản lý sản phẩm”

Hình 2 35 Sequence Diagram cho chức năng “Xóa sản phẩm”

2.6.19 Quản lý tài khoản người dùng

Bảng 2 22 Đặc tả Use Case “Quản lý tài khoản người dùng”

Name Quản lý tài khoản người dùng

Brief description Quản trị viên chỉnh sửa, xóa tài khoản người dùng

6 Hệ thống chuyển sang trang “Users” và hiển thị danh sách Users

1 Người dùng chọn “Chỉnh sửa”

2 Hệ thống chuyển sang trang “Update user”

3 Người dùng chỉnh sửa thông tin user và click

4 Hệ thống chuyển về trang “Users”

2 Hệ thống thông báo “Xóa thành công” và xóa user

Hình 2 36 Sequence Diagram cho chức năng “Quản lý tài khoản người dùng”

2.6.20 Quản lý đơn đặt hàng

Bảng 2 23 Đặc tả Use Case “Quản lý đơn đặt hàng”

Name Quản lý đơn đặt hàng

Brief description Quản trị viên chỉnh sửa trạng thái, xóa đơn đặt hàng

6 Hệ thống chuyển sang trang “Orders” và hiển thị danh sách “Orders”

1 Người dùng chọn “Chỉnh sửa”

2 Hệ thống chuyển sang trang “Order detail”

3 Người dùng chỉnh sửa status và click “Update status”

4 Hệ thống thay đổi trạng thái đơn hàng

2 Hệ thống thông báo xóa thành công và xóa đơn hàng của người dùng

Hình 2 37 Sequence Diagram cho chức năng “Quản lý đơn đặt hàng”

2.6.21 Quản lý mã khuyến mãi trong hệ thống

Bảng 2 24 Đặc tả Use Case “Quản lý mã khuyến mãi trong hệ thống”

Name Quản lý mã khuyến mãi trong hệ thống

Brief description Người dùng quản lý các mã khuyến mãi trong hệ thống

Pre-conditions Đã đăng nhập vào hệ thống với tài khoản Admin

- Nếu thành công, hiển thị bảng danh sách các mã khuyến mãi trong hệ thống

- Nếu thất bại, thông báo lỗi

1 Vào trang Dashboard của Admin

2 Chọn New Voucher trên thanh sidebar

3 Chuyển đến trang quản lý mã khuyến mãi, hiển thị danh sách các mã khuyến mãi trong hệ thống

4 Hiển thị trang thêm mới

5 Nhập đầy đủ các thông tin

5a Chọn nút Edit để chỉnh sửa

6a Hiển thị trang chỉnh sửa

5-8b Chọn nút Delete để xóa

Extension point 11d Thông tin nhập vào không hợp lệ

Hình 2 38 Sequence Diagram cho chức năng “Quản lý mã khuyến mãi trong hệ thống”

THIẾT KẾ HỆ THỐNG

THIẾT KẾ CƠ SỞ DỮ LIỆU

3.1.1 Lược đồ cơ sở dữ liệu

Hình 3 1 Lược đồ cơ sở dữ liệu

3.1.2 Mô tả các collection trong CSDL

Bảng 3 1 Mô tả các collection trong CSDL

TT Tên Collection Mục đích

1 addresses Lưu trữ dữ liệu thông tin địa chỉ giao hàng của người dùng trong hệ thống

2 orders Lưu trữ dữ liệu thông tin về các đơn hàng có trong hệ thống

3 products Lưu trữ dữ liệu thông tin của các sản phẩm có trong hệ thống

4 shippers Lưu trữ dữ liệu thông tin của các shipper trong hệ thống

5 shippings Lưu trữ dữ liệu thông tin của các đơn vị vận chuyển trong hệ thống

6 users Lưu trữ dữ liệu thông tin cần thiết của người dùng

7 vouchers Lưu trữ dữ liệu thông tin của voucher, mã giảm giá, khuyến mãi trong hệ thống

3.1.3 Mô tả chi tiết từng collection trong CSDL

Bảng 3 2 Mô tả chi tiết collection “user”

STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú

1 _id ObjectId ID riêng biệt của Người dùng

2 name String Họ và tên của Người dùng

3 email String Email của Người dùng Email phải là duy nhất

4 password String Mật khẩu đăng nhập của

Mật khẩu phải được mã hóa

5 role String Vai trò của Người dùng

Tài khoản của Người dùng đã được xác nhận hay chưa

7 point Int32 Điểm thưởng của Người dùng

8 voucher Array Các mã khuyến mãi của

9 createdAt Date Thời điểm tài khoản được tạo Mặc định: now()

10 updatedAt Date Thời điểm tài khoản được chỉnh sửa

12 otp Int32 Lưu mã OTP dùng để xác nhận tài khoản

13 avatar Object Lưu đường dẫn đến hình ảnh avatar Người dùng

Bảng 3 3 Mô tả chi tiết collection trong “products”

1 _id ObjectId ID của sản phẩm Không được trùng lặp

2 name String Tên của sản phẩm

3 description String Mô tả chi tiết sản phẩm

4 price Double Giá bán của sản phầm

5 ratings Double Số sao đánh giá của sản phẩm

6 images Array Lưu đường dẫn các hình ảnh của sản phẩm

7 category String Lưu danh mục của sản phẩm

8 seller String Lưu hãng sản phẩm

9 stock Int32 Lưu số lượng của sản phẩm

10 sold Int32 Lưu số lượng sản phẩm đã bán

11 numOfReviews Int32 Lưu số lượng đánh giá của sản phẩm

12 reviews Array Lưu các đánh giá của sản phẩm

Bảng 3 4 Mô tả chi tiết collection “vouchers”

1 _id ObjectId ID của voucher Không được trùng lặp

2 name String Tiêu đề của voucher

3 description String Mô tả thông tin của voucher

4 deliveryFee Boolean Có được freeship hay không

5 discount Double Phần trăm giảm giá của voucher

6 quantity Int32 Số lượng của voucher

Bảng 3 5 Mô tả chi tiết collection “orders”

1 _id ObjectId Mã đơn hàng Không được trùng lặp

2 shippingInfo Object Thông tin giao hàng của đơn hàng

3 user ObjectId Id người dùng đặt hàng Tham chiếu đến collection users

4 orderItems Array Các sản phẩm được đặt trong đơn hàng

5 payment_method String Phương thức thanh toán COD hoặc CARD

6 paymentInfo Object Lưu thông tin thanh toán của đơn hàng

7 itemsPrice Double Tổng giá trị của các sản phẩm trong đơn hàng

9 totalAmount Double Tổng giá trị của đơn hàng

10 voucherInfo Object Voucher được áp dụng trong đơn hàng

11 orderStatus String Trạng thái đơn hàng

Bảng 3 6 Mô tả chi tiết collection “address”

1 _id ObjectId Id của địa chỉ Không được trùng lặp

2 shippingInfo Array Các địa chỉ giao hàng của Người dùng

3 user ObjectId Id của Người dùng Tham chiếu đến collection users

Bảng 3 7 Mô tả chi tiết collection “shippings”

1 _id ObjectId Id của Đơn vị vận chuyển

2 name String Tên của Đơn vị vận chuyển

3 code String Mã của Đơn vị vận chuyển

4 description String Mô tả chi tiết Đơn vị vận chuyển

5 price Double Giá tiền của Đơn vị vận chuyển

Bảng 3 8 Mô tả chi tiết collection “shippers”

1 _id ObjectId Id của Shipper Không được trùng lặp

2 user ObjectId Id của Người dùng Tham chiếu đến collection users

3 shippingUnit Object Đơn vị vận chuyển

Tham chiếu đến collection shippings

4 totalPriceCOD Double Số tiền Shipper thu hộ, cần hoàn trả về cửa hàng

THIẾT KẾ GIAO DIỆN

3.2.1 Giao diện cho User / Buyer

3.2.1.1 Giao diện trang đăng nhập

Hình 3 2 Giao diện trang “Đăng nhập”

Bảng 3 9 Mô tả trang “Đăng nhập”

Widget AppBar, Text Tiêu đề trang đăng nhập

Widget Form, TextFormField Ô nhập tên đăng nhập

Widget Form, TextFormField Ô nhập mật khẩu

Widget TextButton Nút quên mật khẩu

Widget ElevatedButton Nút đăng nhập

Widget OutlinedButton Nút đăng ký tài khoản mới

3.2.1.2 Giao diện trang đăng ký

Hình 3 3 Giao diện trang “Đăng ký”

Bảng 3 10 Mô tả trang “Đăng ký”

Widget AppBar, Text Tiêu đề trang đăng ký

Widget Form, TextFormField Ô nhập tên pháp lý

Widget Form, TextFormField Ô nhập Email

4 Thẻ Ô nhập mật khẩu đăng nhập

Widget ElevatedButton Nút đăng ký tài khoản mới

3.2.1.3 Giao diện trang quên mật khẩu

Hình 3 4 Giao diện trang “Quên mật khẩu”

Bảng 3 11 Mô tả trang “Quên mật khẩu”

Widget AppBar, Text Tiêu đề trang quên mật khẩu

Widget Form, TextFormField Ô nhập Email

Widget ElevatedButton Nút Send để gửi mã OTP về Email

3.2.1.4 Giao diện trang Home phía Website

Hình 3 5 Giao diện trang “Home” phía Website Bảng 3 12 Mô tả trang “Home” phía Website

1 Thẻ Thanh tìm kiếm

2 Thẻ , Biểu tượng của giỏ hàng

3 Thẻ , , Avatar, tên của người dùng, thanh công cụ

4 Thẻ Hình ảnh quảng cáo của cửa hàng

Các card sản phẩm hiện có trong cửa hàng

6 Thẻ Nút xem sản phẩm chi tiết

7 Thẻ

,

, , Các nút để hiện thị các sản phẩm ở các trang tiếp theo

Footer của trang web, hiển thị các thông tin cần thiết

3.2.1.5 Giao diện trang Home phía App

Hình 3 6 Giao diện trang “Home” phía App Bảng 3 13 Mô tả trang “Home” phía App

2 Widget Badge, Icon, Text Biểu tượng của giỏ hàng

3 Widget Container, Text, TextSpan Thông tin cửa hàng

Widget Stack, Text, ListView, Inkwell, FadeInImage, Stack ,SectionTitle,…

Thông tin các danh mục sản phẩm

5 Widget FadeInImage Hình ảnh khuyến mãi

Widget ListView, Inkwell, AspectRatio, Image, Text, IconButton

Các card sản phẩm hiện có, nút bấm để xem thêm nhiều sản phẩm hơn

7 Widget NavigationBar Thanh Navigation để điều hướng màn hình

3.2.1.6 Giao diện trang thông tin cá nhân người dùng

Hình 3 7 Giao diện trang “Thông tin cá nhân người dùng”

Bảng 3 14 Mô tả trang “Thông tin cá nhân người dùng”

Widget AppBar, Text Tiêu đề thông tin cá nhân người dùng

Thanh công cụ chỉnh sửa avatar người dùng

Widget CircleAvatar Avatar người dùng

Thanh công cụ chỉnh sửa thông tin người dùng

Thanh công cụ chỉnh sửa mật khẩu người dùng

Hiển thị thông tin cá nhân của người dùng

3.2.1.7 Giao diện trang chỉnh sửa thông tin cá nhân người dùng

Hình 3 8 Giao diện trang “Chỉnh sửa thông tin cá nhân người dùng”

Bảng 3 15 Mô tả trang “Chỉnh sửa thông tin cá nhân người dùng”

Tiêu đề chỉnh sửa thông tin cá nhân người dùng

Widget Form, TextFormField Ô nhập tên người dùng cần chỉnh sửa

Widget Form, TextFormField Ô nhập Email người dùng cần chỉnh sửa

Nút bấm để cập nhật thông tin cá nhân người dùng

3.2.1.8 Giao diện trang đổi mật khẩu tài khoản người dùng

Hình 3 9 Giao diện trang “Đổi mật khẩu tài khoản người dùng”

Bảng 3 16 Mô tả trang “Đổi mật khẩu tài khoản người dùng”

Tiêu đề đổi mật khẩu tài khoản người dùng

Widget Form, TextFormField Ô nhập mật khẩu cũ

Widget Form, TextFormField Ô nhập mật khẩu mới

Nút bấm để cập nhật mật khẩu tài khoản người dùng

3.2.1.9 Giao diện trang thông tin đặt hàng của người dùng

Hình 3 10 Giao diện trang “Thông tin đặt hàng của người dùng”

Bảng 3 17 Mô tả trang “Thông tin đặt hàng của người dùng”

Widget Container, Row, Column, BoxDecoration, Text,…

Bảng hiển thị thông tin, thanh tìm kiếm đơn hàng, thanh hiển thị đơn hàng theo trang

Nút bấm các actions hiển thị trang chi tiết đơn đặt hàng

3.2.1.10 Giao diện trang thông tin chi tiết sản phẩm

Hình 3 11 Giao diện trang “Thông tin chi tiết sản phẩm”

Bảng 3 18 Mô tả trang “Thông tin chi tiết sản phẩm”

Widget AppBar, Text Thông tin tên sản phẩm

Các hình ảnh của sản phẩm, các nút để xem thêm các hình ảnh khác

Widget Container, SvgPicture, Text, RatingBar, Divider

Thông tin đánh giá, giá tiền sản phẩm

Widget Text Thông tin chi tiết về sản phẩm

Thẻ , , , ,

Widget Card, Text, RatingBar, Icon,…

Thông tin chi tiết về các đánh giá của sản phẩm

Widget Container, Text Nút bấm thêm sản phẩm vào giỏ hàng

3.2.1.11 Giao diện trang đánh giá sản phẩm

Hình 3 12 Giao diện trang “Đánh giá sản phẩm”

Bảng 3 19 Mô tả trang “Đánh giá sản phẩm”

Tiêu đề xin mời người dùng để lại đánh giá

Widget RatingBar Ô nhập số lượng sao đánh giá sản phẩm

Widget Form, TextFormField Khung để viết bình luận, đánh giá

Widget ElevatedButton Nút để đăng bình luận, đánh giá

3.2.1.12 Giao diện trang Your Cart

Hình 3 13 Giao diện trang “Your Cart”

Bảng 3 20 Mô tả trang “Your Cart”

Widget AppBar, Text Tiêu đề trang Your Cart

Hiển thị tổng giá trị sản phẩm trong giỏ hàng

Nút Checkout để hiển thị trang Checkout

Widget Inkwell, Image, Text, SvgPicture, IconButton,…

Hiển thị các sản phẩm hiện có trong giỏ hàng, thông tin giá tiền, nút tăng giảm số lượng các sản phẩm đó, biểu tượng thùng rác để xóa bỏ sản phẩm đó ra khỏi giỏ hàng

3.2.1.13 Giao diện trang Checkout phía Website

Hình 3 14 Giao diện trang “Checkout phía Website”

Bảng 3 21 Mô tả trang “Checkout phía Website”

1 Thẻ , Thanh tiêu đề thể hiện các bước đặt hàng

, Thông tin đặt hàng

3 Thẻ Nút Continue để chuyển sang phần tiếp theo

5 Thẻ ,

Lựa chọn đơn vị vận chuyển

6 Thẻ Nút Next để chuyển sang phần tiếp theo

8 Thẻ ,

, Thông tin đặt hàng

Hiển thị thông tin giá tiền của đơn hàng và nút Proceed To Payment để chuyển sang phần tiếp theo

10 Thẻ , , ,

Thông tin sản phẩm đặt hàng

11 Thẻ , ,

Lựa chọn voucher, promotion, mã khuyến mãi

12 Thẻ , Thanh tiêu đề thể hiện các bước đặt hàng

, Lựa chọn phương thức thanh toán

14 Thẻ Nút Continue để tiến hành đặt hàng

3.2.1.14 Giao diện trang Checkout phía App

Hình 3 15 Giao diện trang “Checkout phía App”

Bảng 3 22 Mô tả trang “Checkout phía App”

1 Widget AppBar, Text Tiêu đề trang Checkout

Widget InkWell, Container, SvgPicture, TextButton, Icon, Text

CheckboxListTile Lựa chọn phương thức thanh toán

Lựa chọn voucher, promotion, mã khuyến mãi

Shimmer, Icon Lựa chọn sử dụng điểm khuyến mãi

Widget GridView, Container, GestureDetector, ClipRRect, Text, Center

Lựa chọn đơn vị vận chuyển

7 Widget Container, Text Hiện thị thông tin giá tiền của đơn hàng

8 Widget ElevatedButton Nút Submit Order để đặt hàng

3.2.1.15 Giao diện trang Detail Order

Hình 3 16 Giao diện trang “Detail Order”

Bảng 3 23 Mô tả trang “Detail Order”

Widget AppBar, Text Tiêu đề trang Detail Order

Thẻ , , , ,

Widget InkWell, Image, Text, SvgPicture

Thông tin các sản phẩm trong đơn hàng

Thẻ , , , ,

Widget Text Hiển thị tổng giá trị đơn hàng

Thẻ , , , ,

Thông tin phương thức, trạng thái thanh toán đơn hàng

3.2.1.16 Giao diện trang Tìm kiếm sản phẩm

Hình 3 17 Giao diện trang “Tìm kiếm sản phẩm”

Bảng 3 24 Mô tả trang “Tìm kiếm sản phẩm”

Widget Center, Text Thông tin tìm kiếm kèm từ khóa

Hiển thị lọc sản phẩm

Widget InkWell, Image, Text, IconButton, RatingBar, Icon

Thông tin các sản phẩm tìm kiếm được

3.2.1.17 Giao diện trang Thêm thông tin giao hàng

Hình 3 18 Giao diện trang “Thêm thông tin giao hàng”

Bảng 3 25 Mô tả trang “Thêm thông tin giao hàng”

Widget AppBar, Text Tiêu đề Thông tin giao hàng

Widget Form, TextFormField, Text, CountryListThemeData

Thông tin chi tiết về địa chỉ giao hàng

Nút để xác nhận Thêm địa chỉ giao hàng mới

3.2.1.18 Giao diện trang Lọc, sắp xếp sản phầm

Hình 3 19 Giao diện trang “Lọc, sắp xếp sản phẩm”

Bảng 3 26 Mô tả trang “Lọc, sắp xếp sản phẩm”

1 Widget AppBar, Text Tiêu đề Sắp xếp sản phẩm

2 Widget Text, Icon Thông tin loại sắp xếp sản phẩm

3 Widget ElevatedButton Nút hủy bỏ sắp xếp sản phẩm

4 Widget AppBar, Text Tiêu đề Lọc sản phẩm

RangeSlider, RangeLabel, Divider Khoảng giá tiền để lọc sản phẩm

Khoảng số sao đánh giá để lọc sản phẩm

7 Widget ElevatedButton Nút hủy bỏ lọc sản phẩm

8 Widget ElevatedButton Nút áp dụng bộ lọc

3.2.2.1 Giao diện Trang chủ phía Shipper

Hình 3 20 Giao diện “Trang chủ phía Shipper”

Bảng 3 27 Mô tả trang “Trang chủ phía Shipper”

Text Hiển thị thông tin của Shipper

2 Widget IconButtion, Icon Nút Refresh để tải lại trang Home

3 Widget Container, Center, Text Hiển thị tổng số tiền cần hoàn trả lại cho cửa hàng

4 Widget Container, Center, Text Hiển thị tổng số đơn hàng Shipper phải giao

5 Widget ElevatedButton Nút để thanh toán tiền cần hoàn trả lại cho cửa hàng

6 Widget NavigationBar Thanh Navigation để điều hướng màn hình

3.2.2.2 Giao diện trang Đơn hàng cần đi giao phía Shipper

Hình 3 21 Giao diện trang “Đơn hàng cần đi giao phía Shipper”

Bảng 3 28 Mô tả trang “Đơn hàng cần đi giao phía Shipper”

1 Widget AppBar, Text Tiêu đề Các đơn hàng cần đi giao

2 Widget IconButtion, Icon Nút Refresh để tải lại trang Orders

Hiển thị thông tin của đơn hàng cần được đi giao

4 Widget OutlinedButton Nút Xác nhận đơn hàng đã được giao thành công

5 Widget OutlinedButton Nút Hướng dẫn đường đi đến địa chỉ mà người dùng đã cung cấp

6 Widget Text Trạng thái của đơn hàng

7 Widget BarcodeWidget Mã vạch của đơn hàng

8 Widget NavigationBar Thanh Navigation để điều hướng màn hình

3.2.3.1 Giao diện trang Dashboard phía Admin

Hình 3 22 Giao diện trang “Dashboard phía Admin”

Bảng 3 29 Mô tả trang “Dashboard phía Admin”

2 Thẻ , , Ô nhập vào khoảng thời gian cần thống kê

3 Thẻ Nút Fetch truy xuất dữ liệu

Hiển thị thông tin doanh thu, số đơn hàng của cửa hàng trong khoảng thời gian trên

5 Thẻ Biểu đồ thể hiện doanh thu và đơn hàng

3.2.3.2 Giao diện trang Thêm sản phẩm mới

Hình 3 23 Giao diện trang “Thêm sản phẩm mới”

Bảng 3 30 Mô tả trang “Thêm sản phẩm mới”

Ô nhập vào tên sản phẩm

3 Thẻ , , Ô nhập vào mô tả chi tiết sản phẩm

4 Thẻ , , Ô nhập vào đơn giá của sản phẩm

5 Thẻ , , Ô nhập vào số lượng của sản phẩm

6 Thẻ , , Ô chọn danh mục của sản phẩm

7 Thẻ , , Ô nhập vào hãng của sản phẩm

8 Thẻ , Nút Create để tạo sản phẩm mới

3.2.3.3 Giao diện trang Quản lý sản phẩm

Hình 3 24 Giao diện trang “Quản lý sản phẩm”

Bảng 3 31 Mô tả trang “Quản lý sản phẩm”

2 Thẻ , , Ô chọn số lượng sản phẩm hiển thị trong một trang

3 Thẻ , Thanh tìm kiếm sản phẩm

4 Thẻ , , , ,

Hiển thị các sản phẩm hiện có trong cửa hàng

Các tác vụ quản lý sản phẩm

6 Thẻ

,
, , Các nút để hiển thị các sản phẩm ở các trang tiếp theo
3.2.3.4 Giao diện trang Quản lý đơn hàng
Hình 3 25 Giao diện trang “Quản lý đơn hàng”
Bảng 3 32 Mô tả trang “Quản lý đơn hàng”
2 Thẻ , , Ô chọn số lượng đơn hàng hiển thị trong một trang
3 Thẻ , Thanh tìm kiếm đơn hàng
4 Thẻ , , , ,
Hiển thị các đơn hàng hiện có trong hệ thống
Các tác vụ quản lý đơn hàng
6 Thẻ
,
, , Các nút để hiện thị các đơn hàng ở các trang tiếp theo
3.2.3.5 Giao diện trang Quản lý người dùng
Hình 3 26 Giao diện trang “Quản lý người dùng”
Bảng 3 33 Mô tả trang “Quản lý người dùng”
2 Thẻ , , Ô chọn số lượng người dùng hiển thị trong một trang
3 Thẻ , Thanh tìm kiếm người dùng
4 Thẻ , , , ,
, , Hiển thị các người dùng trong hệ thống
Các tác vụ quản lý người dùng
6 Thẻ
,
, , Các nút để hiện thị các người dùng ở các trang tiếp theo
3.2.3.6 Giao diện trang Quản lý đánh giá sản phẩm
Hình 3 27 Giao diện trang “Quản lý đánh giá sản phẩm”
Bảng 3 34 Mô tả trang “Quản lý đánh giá sản phẩm”
2 Thẻ , Thanh tìm kiếm sản phẩm
3 Thẻ Nút tìm kiếm đánh giá của sản phẩm trên
4 Thẻ , , Ô chọn số lượng đánh giá hiển thị trong một trang
5 Thẻ , , , ,
, , Hiển thị các đánh giá của sản phẩm trên
6 Thẻ , Thanh tìm kiếm đánh giá của sản phẩm
Các tác vụ quản lý đánh giá của sản phẩm
8 Thẻ
,
, , Các nút để hiện thị các đánh giá ở các trang tiếp theo
3.2.3.7 Giao diện trang Quản lý voucher, mã khuyến mãi
Hình 3 28 Giao diện trang “Quản lý voucher, mã khuyến mãi”
Bảng 3 35 Mô tả trang “Quản lý voucher, mã khuyến mãi”
2 Thẻ , , Ô chọn số lượng voucher hiển thị trong một trang
3 Thẻ , Thanh tìm kiếm voucher
4 Thẻ , , , ,
, , Hiển thị các voucher trong hệ thống
Các tác vụ quản lý voucher
6 Thẻ
,
, , Các nút để hiển thị các voucher ở các trang tiếp theo
3.2.3.8 Giao diện trang Thêm mới voucher, mã khuyến mãi
Hình 3 29 Giao diện trang “Thêm mới voucher, mã khuyến mãi”
Bảng 3 36 Mô tả trang “Thêm mới voucher, mã khuyến mãi”
Ô nhập vào tên voucher
3 Thẻ , , Ô nhập vào mô tả voucher
4 Thẻ , , Ô nhập vào có miễn phí giao hàng hay không
5 Thẻ , , Ô nhập vào phần trăm khuyến mãi
6 Thẻ , , Ô nhập vào số lượng voucher
7 Thẻ Nút Create tạo mới một voucher
3.2.3.9 Giao diện trang Quản lý đơn vị vận chuyển
Hình 3 30 Giao diện trang “Quản lý đơn vị vận chuyển”
Bảng 3 37 Mô tả trang “Quản lý đơn vị vận chuyển”
2 Thẻ , , Ô chọn số lượng đơn vị vận chuyển hiển thị trong một trang
3 Thẻ , Thanh tìm kiếm đơn vị vận chuyển
4 Thẻ , , , ,
Hiển thị các đơn vị vận chuyển trong hệ thống
Các tác vụ quản lý đơn vị vận chuyển
6 Thẻ
,
, , Các nút để hiển thị các đơn vị vận chuyển ở các trang tiếp theo
3.2.3.10 Giao diện trang Thêm mới đơn vị vận chuyển
Hình 3 31 Giao diện trang “Thêm mới đơn vị vận chuyển”
Bảng 3 38 Mô tả trang “Thêm mới đơn vị vận chuyển”
Ô nhập vào tên đơn vị vận chuyển
3 Thẻ , , Ô nhập vào mô tả đơn vị vận chuyển
4 Thẻ , , Ô nhập vào mã của đơn vị vận chuyển
5 Thẻ , , Ô nhập vào đơn giá của đơn vị vận chuyển
6 Thẻ Nút Create tạo mới một đơn vị vận chuyển
3.2.3.11 Giao diện trang Thêm mới Shipper
Hình 3 32 Giao diện trang “Thêm mới Shipper”
Bảng 3 39 Mô tả trang “Thêm mới Shipper”
2 Thẻ , , Ô nhập vào tên người dùng
3 Thẻ , , Ô nhập vào Email người dùng
4 Thẻ , , Ô chọn đơn vị vận chuyển
Nút Update để thêm người dùng thành shipper của đơn vị vận chuyển được chọn trên
3.2.3.12 Giao diện trang Thêm mới hình ảnh cho sản phẩm
Hình 3 33 Giao diện trang “Thêm mới hình ảnh cho sản phẩm”
Bảng 3 40 Mô tả trang “Thêm mới hình ảnh cho sản phẩm”
2 Thẻ , Ô upload file hình ảnh mới cho sản phẩm
3 Thẻ Hình ảnh hiện có của sản phẩm
4 Thẻ Nút để xóa hình ảnh của sản phẩm
5 Thẻ Nút Upload để tải lên các hình ảnh của sản phẩm
CÀI ĐẶT VÀ KIỂM THỬ
CÀI ĐẶT PHẦN MỀM
4.1.1 Cài đặt ứng dụng, thư viện cần thiết
Trước khi thực hiện việc khởi chạy ứng dụng, cần cài đặt các phần mền, công cụ sau để đảm bảo ứng dụng có thể hoạt động một cách hiệu quả
Bảng 4 1 Các phần mềm cài đặt
STT Tên phần mềm Thông tin chi tiết
Link tải về: Download Git
2 Visual Studio Code IDE Phiên bản: 1.90.2
Link tải về: Download VSCode
3 Android Studio Phiên bản: Koala | 2024.1.1
Link tải về: Download Android Studio
Link tải về: Download NodeJS
5 Flutter Phiên bản: flutter_windows_3.22.2
Link tải về: Download Flutter
Link tải về: Download MongoDB
Hình 4 1 Các collections của Database
- Bước 1: Clone source code của dự án tại Github
- Bước 2: Mở source code trong VSCode, bật Terminal trong folder backend, chạy câu lệnh npm i, để cài đặt các package cần thiết
- Bước 3: Thay đổi đường dẫn kết nối đến MongoDB (Local / Cloud)
- Bước 4: Sau đó, chạy câu lệnh npm run seeder để cài đặt dữ liệu ban đầu 4.1.3 Cài đặt phía Back – end
Hình 4 2 Cấu trúc thư mục phía Back – end
- Bước 2: Mở source code trong VSCode, bật Terminal trong folder backend, chạy câu lệnh npm i, để cài đặt các package cần thiết
- Bước 3: Mở file config.env để chỉnh sửa cái biến môi trường
Hình 4 3 File môi trường phía Back - end
- Bước 4: Chạy câu lệnh npm run dev, để khởi chạy project phía Back – end
Hình 4 4 Khởi chạy project Back – end thành công
4.1.4 Cài đặt phía Front – end
Hình 4 5 Cấu trúc thư mục Front – end
- Bước 2: Mở source code trong VSCode, bật Terminal trong folder frontend, chạy câu lệnh npm i, để cài đặt các package cần thiết
- Bước 3: Sau khi cài đặt xong, chạy câu lệnh npm start để khởi chạy project Front – end
Hình 4 6 Khởi chạy project Front – end thành công
4.1.5.1 Store_app phía User / Buyer
Hình 4 7 Cấu trúc thư mục Store_app phía User / Buyer
- Bước 2: Mở source code trong VSCode, bật Terminal trong folder store_app, chạy câu lệnh flutter pub get, để cài đặt các package cần thiết
- Bước 3: Vào Android Studio để tạo máy điện thoại ảo
- Bước 4: Kết nối thiết bị vào VSCode, sau đó mở file main.dart trong folder store_app sau đó bấm nút Run để chạy app trên thiết bị đã được chọn
Hình 4 8 Khởi chạy project Store_app User / Buyer
Hình 4 9 Cấu trúc thư mục Shipping_app
- Bước 2: Mở source code trong VSCode, bật Terminal trong folder shipping_app, chạy câu lệnh flutter pub get, để cài đặt các package cần thiết
- Bước 3: Vào Android Studio để tạo máy điện thoại ảo
- Bước 4: Kết nối thiết bị vào VSCode, sau đó mở file main.dart trong folder shipping_app sau đó bấm nút Run để chạy app trên thiết bị đã được chọn
Hình 4 10 Khởi chạy project Shipping_app thành công
KIỂM THỬ PHẦN MỀM
4.2.1.1 Các loại kiểm thử áp dụng
Các loại kiểm thử được sử dụng để kiểm thử dự án
- Intergration Test [8]: Integration Testing là công việc kiểm thử tích hợp một nhóm các module riêng lẻ với nhau cùng với các Unit Test riêng lẻ trong từng module
Một dự án phần mềm điển hình bao gồm nhiều module phần mềm, được code bởi nhiều người khác nhau Tích hợp thử nghiệm tập trung vào kiểm tra truyền dữ liệu giữa các module
Kiểm thử tích hợp xảy ra sau kiểm thử đơn vị (Unit Test) và trước kiểm thử xác nhận
- Unit Test [9]: là một loại kiểm thử phần mềm trong đó có các đơn vị hay thành phần riêng lẻ của phần mềm được kiểm thử Kiểm thử đơn vị được thực hiện trong quá trình phát triển ứng dụng Mục tiêu của ‘Kiểm thử đơn vị’ là cô lập một phần code và xác minh tính chính xác
Unit test là mức độ kiểm thử nhỏ nhất trong quy trình kiểm thử phần mềm Unit test kiểm thử các đơn vị nhỏ nhất trong mã nguồn như method, class, module
Phát hiện các lỗi chức năng trong ứng dụng Đảm bảo ứng dụng đáp ứng được đầy đủ nhu cầu của người dùng và hoạt động tốt trong các môi trường khác nhau
Bên cạnh đó, kiểm thử phần mềm còn phải đảm bảo tính an toàn của ứng dụng, kiểm tra khả năng tượng thích và độ tin cậy của ứng dụng
- Tiêu chí đình chỉ: Bắt buộc phải dừng việc kiểm thử khi phát hiện có ít nhất 40% số Test Case bị lỗi Tiếp tục việc kiểm thử khi tất cả các lỗi hiện tại được fix xong
- Tiêu chí kết thúc: Trang web đạt được mức độ bao phủ kiểm thử Chỉ định các tiêu chí biểu thị việc hoàn thành xong toàn bộ giai đoạn kiểm thử
• Đảm bảo 100% tỷ lệ các Test Case được thực thi
• Tỷ lệ bắt buộc vượt qua của các Test Case là 80%
4.2.2 Các trường hợp kiểm thử
Bảng 4 2 Kiểm thử chức năng đăng nhập với trường hợp không nhập “Email”
Mô tả Kiểm thử chức năng đăng nhập với trường hợp không nhập “Email”
Kết quả mong đợi Hệ thống hiển thị bảng thông báo “error”
Kết quả thực tế Như kết quả mong đợi
Bảng 4 3 Kiểm thử chức năng đăng nhập với trường hợp nhập “Email” không tồn tại
Mô tả Kiểm thử chức năng đăng nhập với trường hợp nhập “Email” không tồn tại
Bảng 4 4 Kiểm thử chức năng đăng nhập với trường hợp không nhập “Password”
Mô tả Kiểm thử chức năng đăng nhập với trường hợp không nhập “Password”
Bảng 4 5 Kiểm thử chức năng đăng nhập với trường hợp nhập sai “Password”
Mô tả Kiểm thử chức năng đăng nhập với trường hợp nhập sai “Password”
Bước 2: Nhập “Password” không đúng Bước 3: Bấm “Login”
Email: “hoxuanhieu.pch.2b1.92@gmail.com”
Bảng 4 6 Kiểm thử chức năng đăng nhập với trường hợp nhập đúng thông tin
Mô tả Kiểm thử chức năng đăng nhập với trường hợp nhập đúng “Email” và
Email: “20119339@student.hcmute.edu.vn”
Hiển thị thông báo “Đăng nhập thành công”
Sau đó, hệ thống sẽ đi thẳng đến trang chủ của Website / App
Bảng 4 7 Kiểm thử chức năng đăng ký với trường hợp không nhập “Name”
Mô tả Kiểm thử chức năng đăng ký với trường hợp không nhập “Name”
Full_name: “ ” Email: “hoxuanhieu15@gmail.com”
Bảng 4 8 Kiểm thử chức năng đăng ký với trường hợp không nhập “Email”
Mô tả Kiểm thử chức năng đăng ký với trường hợp không nhập “Email”
Bảng 4 9 Kiểm thử chức năng đăng ký với trường hợp nhập “Email” đã đăng ký
Mô tả Kiểm thử chức năng đăng ký với trường hợp nhập “Email” đã đăng ký
Email: “20119339@student.hcmute.edu.vn”
Bảng 4 10 Kiểm thử chức năng đăng ký với trường hợp nhập “Password” và “Confirm
Mô tả Kiểm thử chức năng đăng ký với trường hợp nhập “Password” và “Confirm
Bảng 4 11 Kiểm thử chức năng đăng ký với trường hợp nhập đầy đủ / đúng thông tin đăng ký
Mô tả Kiểm thử chức năng đăng ký với trường hợp nhập đầy đủ / đúng thông tin đăng ký
Email: “hieuhieu.contact@gmail.com”
Hệ thống hiển thị Trang / Màn hình xác nhận mã OTP gửi về Email vừa đăng ký
Bảng 4 12 Kiểm thử chức năng xác nhận Email vừa đăng ký với trường hợp nhập không đầy đủ / sai mã OTP được gửi về
Mô tả Kiểm thử chức năng xác nhận Email vừa đăng ký với trường hợp nhập không đầy đủ / sai mã OTP được gửi về
Dữ liệu kiểm thử OTP Code: “123456”
Bảng 4 13 Kiểm thử chức năng xác nhận Email vừa đăng ký với trường hợp nhập đầy đủ / đúng mã OTP được gửi về Test case 12
Mô tả Kiểm thử chức năng xác nhận Email vừa đăng ký vừa đăng ký với trường hợp nhập đầy đủ / đúng mã OTP được gửi về
Dữ liệu kiểm thử OTP Code: “569325”
Kết quả mong đợi Hệ thống hiển thị Trang / Màn hình xác nhận Email thành công
Bảng 4 14 Kiểm thử chức năng quên mật khẩu với trường hợp nhập “Password” và “Confirm
Mô tả Kiểm thử chức năng quên mật khẩu với trường hợp nhập “Password” và
“Confirm Password” không khớp nhau
Bảng 4 15 Kiểm thử chức năng quên mật khẩu với trường hợp nhập sai OTP
Mô tả Kiểm thử chức năng quên mật khẩu với trường hợp nhập sai “OTP”
Bảng 4 16 Kiểm thử chức năng quên mật khẩu với trường hợp nhập đúng thông tin
Mô tả Kiểm thử chức năng quên mật khẩu với trường hợp nhập đúng thông tin
Kết quả mong đợi Đổi mật khẩu thành công và đăng nhập thành công với mật khẩu mới
Bảng 4 17 Kiểm thử chức năng thay đổi Email với trường hợp nhập “Email” không hợp lệ
Mô tả Kiểm thử chức năng thay đổi Email với trường hợp nhập “Email” không hợp lệ
Bước 1: Đăng nhập Bước 2: Vào phần “Profile”
Bước 3: Chọn phần “My Account”
Bước 4: Chọn trường Email cần thay đổi Bước 5: Nhập vào “Email” mới, Email không hợp lệ Bước 6: Bấm “Send”
Dữ liệu kiểm thử Email: “abcc”
Kết quả mong đợi Hệ thống hiển thị bảng thông báo “Email không hợp lệ”
Bảng 4 18 Kiểm thử chức năng thay đổi Email với trường hợp nhập đúng các thông tin
Mô tả Kiểm thử chức năng thay đổi Email với trường hợp nhập đúng các thông tin
Bước 4: Chọn trường Email cần thay đổi Bước 5: Nhập vào “Email” mới
Bước 7: Nhập vào “OTP Code 1” được gửi về Email cũ Bước 8: Bấm “Submit”
Bước 9: Nhập vào “OTP Code 2” được gửi về Email mới Bước 10: Bấm “Submit”
Kết quả mong đợi Hệ thống thông báo “Đổi Email thành công”
Bảng 4 19 Kiểm thử chức năng thay đổi Name với trường hợp nhập đúng các thông tin
Mô tả Kiểm thử chức năng thay đổi Name với trường hợp nhập đúng các thông tin
Bước 4: Chọn trường Name cần thay đổi Bước 5: Nhập vào “Name” mới
Dữ liệu kiểm thử Name: “Hieu Ho Xuan”
Kết quả mong đợi Hệ thống thông báo “Đổi Name thành công”
Bảng 4 20 Kiểm thử chức năng thay đổi Password với trường hợp nhập sai Password cũ
Mô tả Kiểm thử chức năng thay đổi Password với trường hợp nhập sai Password cũ
Bước 4: Chọn trường Password cần thay đổi Bước 5: Nhập vào “Old Password”
Bước 6: Nhập vào “New Password”
Bảng 4 21 Kiểm thử chức năng thay đổi Password với trường hợp nhập đúng thông tin
Mô tả Kiểm thử chức năng thay đổi Password với trường hợp nhập đúng thông tin
Bước 4: Chọn trường Password cần thay đổi Bước 5: Nhập vào “Old Password”
Bước 6: Nhập vào “New Password”
Hệ thống thông báo đổi Password thành công Đăng nhập thành công với Password vừa mới đổi
Bảng 4 22 Kiểm thử chức năng thêm sản phẩm vào giỏ hàng
Mô tả Kiểm thử chức năng thêm sản phẩm vào giỏ hàng
Bước 1: Đăng nhập Bước 2: Chọn một sản phẩm Bước 3: Bấm “Add to Cart”
Bước 5: Xem thông tin sản phẩm, chỉnh sửa số lượng sản phẩm
Product: “Iphone 14 Pro Max 256GB”
Trong giỏ hàng có 1 sản phẩm “Iphone 14 Pro Max 256GB”, có thể chỉnh sửa số lượng sản phẩm cần mua
Bảng 4 23 Kiểm thử chức năng xóa sản phẩm khỏi giỏ hàng
Mô tả Kiểm thử chức năng xóa sản phẩm khỏi giỏ hàng
Bước 1: Đăng nhập Bước 2: Thêm sản phẩm vào giỏ hàng Bước 3: Chọn biểu tượng “Giỏ hàng”
Bước 4: Kiểm tra thông tin các sản phẩm đã thêm vào Bước 5: Chọn biểu tượng “Thùng rác” để xóa sản phẩm
Trong giỏ hàng có 1 sản phẩm “Iphone 14 Pro Max 256GB”
Sau khi xóa sản phẩm, giỏ hàng hoàn toàn rỗng, số tiền trong đơn hàng thay đổi đúng giá
Bảng 4 24 Kiểm thử chức năng thêm địa chỉ giao hàng với trường hợp nhập đầy đủ / đúng thông tin Test case 23
Mô tả Kiểm thử chức năng thêm địa chỉ giao hàng với trường hợp nhập đầy đủ / đúng thông tin
Bước 1: Đăng nhập Bước 2: Thêm sản phẩm vào giỏ hàng Bước 3: Chọn biểu tượng “Giỏ hàng / Màn hình giỏ hàng”
Bước 4: Kiểm tra thông tin các sản phẩm đã thêm vào Bước 5: Chọn nút “Checkout” để mở Trang / Màn hình “Order”
Bước 6: Chọn phần “Shipping Address” để mở Trang / Màn hình “Shipping
Bước 7: Chọn biểu tượng “+” để mở Trang / Màn hình “Add New Address” Bước 8: Nhập vào “Address”, “City”, “Phone Number”, “ZipCode”, chọn vị trí địa chỉ trên bản đồ
Bước 9: Bấm nút “Add” để thêm địa chỉ giao hàng mới
Thêm “Địa chỉ giao hàng” có thông tin như sau:
• Address: “123 Hai Bà Trưng, Bến Nghé, Quận 1”
• Chọn vị trí “123 Hai Bà Trưng, Bến Nghé, Quận 1” trên bản đồ
Chuyển đến Trang / Màn hình các địa chỉ giao hàng, địa chỉ giao hàng mới được thêm thành công
Bảng 4 25 Kiểm thử chức năng chỉnh sửa địa chỉ giao hàng với trường hợp nhập đầy đủ / đúng thông tin Test case 24
Mô tả Kiểm thử chức năng chỉnh sửa địa chỉ giao hàng với trường hợp nhập đầy đủ
Bước 4: Kiểm tra thông tin các sản phẩm đã thêm vào Bước 5: Chọn nút “Checkout” để mở trang / màn hình “Order”
Bước 7: Chọn nút “Edit” trên Địa chỉ giao hàng cần chỉnh sửa Bước 8: Chỉnh sửa các thông tin cần sửa như “Address”, “City”, “Phone
Number”, “ZipCode”, chọn vị trí địa chỉ trên bản đồ
Bước 9: Bấm nút “Add” để cập nhật địa chỉ giao hàng
Chỉnh sửa “Địa chỉ giao hàng” có thông tin như sau:
• Product: “123 Hai Bà Trưng, Bến Nghé, Quận 1”
Chuyển đến Trang / Màn hình các địa chỉ giao hàng, địa chỉ giao hàng được chỉnh sửa thành công
Bảng 4 26 Kiểm thử chức năng xóa địa chỉ giao hàng
Mô tả Kiểm thử chức năng xóa địa chỉ giao hàng
Bước 4: Kiểm tra thông tin các sản phẩm đã thêm vào Bước 5: Chọn nút “Checkout” để mở trang / màn hình “Order”
Bước 7: Chọn biểu tượng “Thùng rác” trên “Địa chỉ giao hàng” cần xóa bỏ
Xóa bỏ “Địa chỉ giao hàng” có thông tin như sau:
• Address: “123 Hai Bà Trưng, Bến Nghé, Quận 1”
Kết quả mong đợi Địa chỉ giao hàng được xóa thành công
Trang / Màn hình “Shipping Addresses” không còn địa chỉ giao hàng trên
Bảng 4 27 Kiểm thử chức năng user thêm voucher
Mô tả Kiểm thử chức năng user thêm voucher
Bước 1: Đăng nhập Bước 2: Vào Trang / Màn hình “Profile”
Bước 4: Chọn mục “My Promotion” để kiểm tra Voucher của mình Bước 5: Chọn mục “Promotions” để xem các Voucher đang có sẵn
Bước 6: Chọn nút “ADD” để thêm Voucher mong muốn
Dữ liệu kiểm thử Chọn nút “ADD” Voucher “KHUYENMAI1” để thêm Voucher
Trong mục “My Promotion”, có Voucher “KHUYENMAI1” vừa mới được thêm vào
Trong mục “Promotions” không còn “KHUYENMAI1” vì đã được thêm vào mục “My Promotion”
Bảng 4 28 Kiểm thử chức năng đặt hàng với trường hợp nhập đầy đủ / đúng thông tin được thanh toán bằng COD Test case 27
Mô tả Kiểm thử chức năng đặt hàng với trường hợp nhập đầy đủ / đúng thông tin được thanh toán bằng COD
Bước 6: Chọn các thông tin như “Shipping Address”, “Promotion”, “Point”,
Bước 7: Kiểm tra các thông tin như “Tiền order”, “Voucher”,…
Bước 8: Bấm nút “Order” để đặt hàng
- Address: “Lý Tự Trọng, Phường 7, Quận 1”
Point: No use Payment Method: “COD”
Trong giỏ hàng có 1 sản phẩm “AirPod 3” Đặt hàng thành công với thông tin giao hàng và thông tin sản phẩm như trên
Bảng 4 29 Kiểm thử chức năng đặt hàng với trường hợp nhập đầy đủ / đúng thông tin được thanh toán bằng CARD Test case 28
Mô tả Kiểm thử chức năng đặt hàng với trường hợp nhập đầy đủ / đúng thông tin được thanh toán bằng CARD
Bước 6: Chọn các thông tin như “Shipping Address”, “Promotion”, “Point”,
Bước 7: Kiểm tra các thông tin như “Tiền order”, “Voucher”,…
Bước 8: Bấm nút “Order” để mở url thanh toán
Bước 9: Nhập thông tin “Thẻ tín dụng / Thẻ ghi nợ,…” để thanh toán
- Address: “Lý Tự Trọng, Phường 7, Quận 1”
Promotion: No use Point: No use Payment Method: “CARD”
Trong giỏ hàng có 1 sản phẩm “Iphone 14 Pro Max 256GB” Đặt hàng thành công với thông tin giao hàng và thông tin sản phẩm như trên Trạng thái thanh toán của đơn hàng đặt thành “paid”
Bảng 4 30 Kiểm thử chức năng hủy đơn hàng COD chưa được xác nhận
Mô tả Kiểm thử chức năng hủy đơn hàng COD chưa được xác nhận
Bước 1: Đăng nhập Bước 2: Chọn Trang / Màn hình “My Orders”
Bước 4: Chọn nút “Details” của đơn hàng để xem chi tiết đơn hàng Bước 5: Chọn nút “Cancel Order” để hủy đơn hàng chưa được xác nhận
Dữ liệu kiểm thử Code Orders: “666e9b3a6d22b173740cb1a4”
Hủy được đơn hàng có mã “666e9b3a6d22b173740cb1a4” khi đơn hàng này chưa được xác nhận
Bảng 4 31 Kiểm thử chức năng xem chi tiết đơn hàng sau khi đặt hàng
Mô tả Kiểm thử chức năng xem chi tiết đơn hàng sau khi đặt hàng
Bước 3: Chọn mục “Trạng thái của đơn hàng”
Bước 4: Chọn nút “Details” của Đơn hàng để xem chi tiết đơn hàng
Dữ liệu kiểm thử Code Orders: “666e9b3a6d22b173740cb1a4”
Hiển thị các thông tin giao hàng cũng như thông tin sản phẩm đúng như lúc đặt hàng
Bảng 4 32 Kiểm thử chức năng đánh giá / bình luận sản phẩm sau khi nhận hàng
Mô tả Kiểm thử chức năng đánh giá / bình luận sản phẩm sau khi nhận hàng
Bước 4: Chọn nút “Details” của Đơn hàng để xem chi tiết đơn hàng Bước 5: Chọn các sản phẩm để đánh giá
Bước 6: Chọn số sao đánh giá Bước 7: Nhập vào “Comment”
Dữ liệu kiểm thử Code Orders: “666e9b3a6d22b173740cb1a4” với trạng thái Delivered
Kết quả mong đợi Đánh giá sản phẩm thành công, các bình luận hiển thị với tên người đánh giá trong trang chi tiết sản phẩm
Bảng 4 33 Kiểm thử chức năng giao hàng thành công của Shipper
Mô tả Kiểm thử chức năng giao hàng thành công của Shipper
Bước 1: Đăng nhập vào app Shipper Bước 2: Chọn Trang / Màn hình “My Orders”
Bước 3: Xem các đơn hàng cần phải giao / những đơn hàng thuộc “Shipping
Unit” của Shipper với trạng thái “Shipped”
Bước 4: Chọn nút “Directions” để xem đường đi giao hàng Bước 5: Khi giao hàng thành công, chọn nút “Done” để kết thúc giao đơn hàng
Dữ liệu kiểm thử Code Orders: “666e9b3a6d22b173740cb1a4” với trạng thái Shipped
Giao đơn hàng thành công, trạng thái đơn hàng đặt thành Shipped, trạng thái thanh toán đặt thành paid
Nếu đơn hàng là COD thì tiền cần hoàn trả lại Shop sẽ được tăng lên theo đúng số tiền cần thu
Bảng 4 34 Kiểm thử chức năng thanh toán tiền nợ của Shipper
Mô tả Kiểm thử chức năng thanh toán tiền nợ của Shipper
Bước 1: Đăng nhập vào app Shipper Bước 2: Chọn Trang / Màn hình “Home”
Bước 3: Xem các “Thông tin cá nhân,” “Số đơn hàng cần phải giao” và “Số tiền hiện đang nợ / cần thanh toán lại cho Shop”
Bước 4: Chọn nút “Check out” để mở url thanh toán Bước 5: Nhập vào thông tin số thẻ để dễ dàng thanh toán
Thanh toán tiền nợ / tiền cần phải hoàn trả lại cho Shop thành công
Thông tin hiển thị tiền nợ / tiền cần phải hoàn trả lại được đặt lại bằng 0
Bảng 4 35 Kiểm thử chức năng chỉnh sửa user thực hiện bởi Admin
Mô tả Kiểm thử chức năng chỉnh sửa user thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager User”
Bước 3: Chọn button “Edit” để chỉnh sửa thông tin User Bước 4: Thay đổi thông tin của User, cụ thể là ở cột “Role” (từ User Thành
Bước 5: Chọn button “Update” để chỉnh sửa thông tin
Kết quả mong đợi Hiển thị thông tin update của User đã được cập nhật
Bảng 4 36 Kiểm thử chức năng create Product thực hiện bởi Admin
Mô tả Kiểm thử chức năng create Product thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager Products”
Bước 3: Chọn “Create Products” để tạo mới sản phẩm Bước 4: Nhập các thông tin của sản phẩm
Bước 5: Chọn button “Create Product” để tạo các thông tin chính của sản phẩm
Name: Sản phẩm 1 Description: test 1 Price: 100
Stock: 100 Category: Laptops Seller Name: Duy Hung Thumb:https://console.cloudinary.com/pm/c-59dd99baaf0e0
Kết quả mong đợi Hiển thị thông báo “Create Products success”
Bảng 4 37 Kiểm thử chức năng add image of Product thực hiện bởi Admin
Mô tả Kiểm thử chức năng add image of Product thực hiện bởi Admin
Bước 3: Chọn “Create Products” để tạo mới sản phẩm Bước 4: Nhập các thông tin của sản phẩm
Bước 5: Chọn button “Create Product” để tạo các thông tin chính của sản phẩm
Bước 6: Nhập thông tin của image (url) Bước 7: Nhấn chọn nút “Upload” để tải lên hình ảnh của sản phẩm
Dữ liệu kiểm thử Image of product :
Kết quả mong đợi Hiển thị thông báo “Add Image of Products success”
Bảng 4 38 Kiểm thử chức năng edit status order thực hiện bởi Admin
Mô tả Kiểm thử chức năng edit status order thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager Orders”
Bước 3: Chọn button “Edit order”
Bước 4: Chọn status cần thay đổi cho đơn hàng Bước 5: Nhấn chọn nút “Update Status” để thay đổi trạng thái đơn hàng
Dữ liệu kiểm thử Status: NewOrder
Kết quả mong đợi Status chuyển sang “Delivered”
Bảng 4 39 Kiểm thử chức năng edit Product category thực hiện bởi Admin
Mô tả Kiểm thử chức năng edit Product category thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager category”
Bước 3: Chọn button “Edit” để cập nhật tên của category (từ Laptops sang
Bước 4: Nhấn chọn nút “Update” để cập nhật tên của category
Id: 66856a72852ee4762e7249af Category: Laptops
Kết quả mong đợi Hiển thị thông báo “Update Category success”
Bảng 4 40 Kiểm thử chức năng add Voucher thực hiện bởi Admin
Mô tả Kiểm thử chức năng add Voucher thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager New Voucher”
Bước 3: Nhập thông tin “Name”, “Description”, “DeliveryFee”, “Discount”,
Name: test1 Decription: test1 DeliveryFee: 5 Discount: 5 Quantity: 10
Kết quả mong đợi Hiển thị thông báo “Create Voucher success”
Bảng 4 41 Kiểm thử chức năng add Shipping thực hiện bởi Admin
Mô tả Kiểm thử chức năng add Shipping thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager New shipping”
Bước 3: Nhập các thông tin “Name”, “Description”, “Code”, “Price” của
Name: shopee Decription: Nhà vận chuyển SPX Code: SPK price: 100
Kết quả mong đợi Hiển thị thông báo “Create Shipping success”
Bảng 4 42 Kiểm thử chức năng add Shipper to Shipping thực hiện bởi Admin
Mô tả Kiểm thử chức năng add Shipper to Shipping thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager Shipper”
Bước 4: Nhập thông tin “Email”, “Name”, “ShippingUnit” và chọn “Role” cho Shipper
Email: admin@gmail.com Name: Đỗ Ngọc Duy Hưng ShippingUnit: SPK
Kết quả mong đợi Hiển thị thông báo “Shipper Updated”
Bảng 4 43 Kiểm thử chức năng edit Shipper to Shipping thực hiện bởi Admin
Mô tả Kiểm thử chức năng edit Shipper to Shipping thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager Shipper”
Bước 5: Nhập thông tin “Email”, “Name”, “ShippingUnit” và chọn “Role” cho Shipper
Email: admin@gmail.com Name: Đỗ Ngọc Duy Hưng ShippingUnit: SPK
Kết quả mong đợi Hiển thị thông báo “Shipper Updated”
Bảng 4 44 Kiểm thử chức năng edit Product thực hiện bởi Admin
Mô tả Kiểm thử chức năng edit Product thực hiện bởi Admin
Bước 3: Chọn button “Edit” để cập nhật tên của Product (từ Sản phẩm 1 sang Sản phẩm 2)
Id: 66856a72852ee4762e7249af Name: Sản phẩm 2
Kết quả mong đợi Hiển thị thông báo “Product Updated”
Bảng 4 45 Kiểm thử chức năng delete Product thực hiện bởi Admin
Mô tả Kiểm thử chức năng delete Product thực hiện bởi Admin
Bước 3: Chọn button “Delete” để xóa sản phẩm ra khỏi hệ thống
Dữ liệu kiểm thử Id: 66856a72852ee4762e7249af
Kết quả mong đợi Hiển thị thông báo “Product Deleted”
Bảng 4 46 Kiểm thử chức năng delete Voucher thực hiện bởi Admin
Mô tả Kiểm thử chức năng delete Voucher thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager Voucher”
Bước 3: Chọn button “Delete” để xóa Voucher ra khỏi hệ thống
Kết quả mong đợi Hiển thị thông báo “Voucher Deleted”
Bảng 4 47 Kiểm thử chức năng delete User thực hiện bởi Admin
Mô tả Kiểm thử chức năng delete User thực hiện bởi Admin
Bước 1: Đăng nhập Bước 2: Chọn phần “Manager user”
Bước 3: Chọn button “Delete” để xóa người dùng ra khỏi hệ thống
Kết quả mong đợi Hiển thị thông báo “User Deleted”
ƯU ĐIỂM
4 Đề nghị cho bảo vệ hay không?
TP Hồ Chí Minh, ngày tháng năm 2024
(Ký và ghi rõ họ tên)
4 ĐH SƯ PHẠM KỸ THUẬT TP.HCM
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và Tên Sinh viên 1: Hồ Xuân Hiếu MSSV: 20119339
Họ và Tên Sinh viên 2: Đỗ Ngọc Duy Hưng MSSV: 20145267
Ngành: Công nghệ thông tin
Tên đề tài: Xây dựng hệ thống bán hàng điện tử sử dụng MERN Stack và Flutter
Họ và Tên Giảng viên phản biện: ThS Nguyễn Trần Thi Văn
1 Về nội dung đề tài và khối lượng thực hiện:
4 Đề nghị cho bảo vệ hay không?
TP Hồ Chí Minh, ngày tháng năm 2024
(Ký và ghi rõ họ tên)
LỜI CẢM ƠN Để hoàn thành tốt đề tài và bài báo cáo này, chúng em xin gửi lời cảm ơn chân thành đến giảng viên, thầy Nguyễn Hữu Trung, người đã trực tiếp hỗ trợ chúng em trong suốt quá trình làm đề tài Chúng em cảm ơn thầy đã đưa ra những lời khuyên từ kinh nghiệm thực tiễn của mình để định hướng cho chúng em đi đúng với yêu cầu của đề tài đã chọn, luôn giải đáp thắc mắc và đưa ra những góp ý, chỉnh sửa kịp thời giúp chúng em khắc phục nhược điểm và hoàn thành tốt cũng như đúng thời hạn đã đề ra
Chúng em cũng xin gửi lời cảm ơn chân thành các quý thầy cô trong Khoa nói chung và ngành Công Nghệ Thông Tin nói riêng đã tận tình truyền đạt những kiến thức cần thiết giúp chúng em có nền tảng để làm nên đề tài này, đã tạo điều kiện để chúng em có thể tìm hiểu và thực hiện tốt đề tài Cùng với đó, chúng em xin được gửi cảm ơn đến các bạn cùng khóa đã cung cấp nhiều thông tin và kiến thức hữu ích giúp chúng em có thể hoàn thiện hơn đề tài của mình Đề tài và bài báo cáo được chúng em thực hiện trong khoảng thời gian ngắn, với những kiến thức còn hạn chế cùng nhiều hạn chế khác về mặt kỹ thuật và kinh nghiệm trong việc thực hiện một dự án phần mềm Do đó, trong quá trình làm nên đề tài có những thiếu sót là điều không thể tránh khỏi nên chúng em rất mong nhận được những ý kiến đóng góp quý báu của các quý thầy cô để kiến thức của chúng em được hoàn thiện hơn và chúng em có thể làm tốt hơn nữa trong những lần sau
Cuối lời, chúng em kính chúc thầy luôn dồi dào sức khỏe và thành công hơn trong sự nghiệp trồng người Một lần nữa chúng em xin chân thành cảm ơn
6 ĐH SƯ PHẠM KỸ THUẬT TP.HCM
CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc
******* ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP
Họ và tên Sinh viên 1: Hồ Xuân Hiếu MSSV 1: 20119339
Họ và tên Sinh viên 2: Đỗ Ngọc Duy Hưng MSSV 2: 20145267
Chuyên Ngành: Công nghệ phần mềm
Tên đề tài: Xây dựng Hệ thống bán hàng điện tử sử dụng MERN Stack và Flutter
Họ và tên Giáo viên hướng dẫn: Ths Nguyễn Hữu Trung
Nhiệm vụ của luận văn:
• Tìm hiểu về các công nghệ: MongoDB, Express, ReactJS, NodeJS, Flutter
• Sử dụng JWT để đảm bảo độ bảo mật và tính xác thực, phân quyền người dùng cho hệ thống
• Sử dụng Restful API, NodeJS, Express Framework làm nền tảng để xây dựng APIs cho modules của đề tài
• Sử dụng ReactJS, Flutter để lần lượt xây dựng giao diện người dùng cho Website và App
• Sử dụng MongoDB và Cloudinary để lưu trữ dữ liệu trong các collection, hình ảnh
• Sử dụng ngôn ngữ NodeJS, ExpressJS, ReactJS, Flutter để xây dựng các chức năng phần mềm
• Xây dựng các chức năng sau cho đề tài: o Website và App:
✓ Đăng nhập, đăng ký, khôi phục mật khẩu, đăng xuất tài khoản
✓ Tìm kiếm, lọc, sắp xếp thông tin các sản phẩm trong các danh mục sản phẩm
✓ Chỉnh sửa thông tin cá nhân.
✓ Thêm sản phẩm vào giỏ hàng, danh sách yêu thích
✓ Đặt hàng với thanh toán tiền mặt, trực tuyến
✓ Thu thập và sử dụng các voucher, mã giảm giá
✓ Quản lý, theo dõi trạng thái, lịch sử đơn hàng của mỗi người dùng
✓ Đánh giá chất lượng sản phẩm sau khi đặt hàng o Administrator Website:
✓ Quản lý cơ sở dữ liệu
✓ Quản lý thông tin sản phẩm, danh mục sản phẩm
✓ Thêm mới các voucher khuyến mãi
✓ Thống kê số liệu doanh thu, đơn hàng
8 ĐỀ CƯƠNG VIẾT KHÓA LUẬN
• Tính cấp thiết của đề tài
• Mục tiêu của đề tài
• Ý nghĩa khoa học và thực tiễn
• Chương 1: Cơ sở lý thuyết
• Chương 2: Phân tích, khảo sát hiện trạng và mô hình hóa yêu cầu
• Chương 3: Thiết kế hệ thống
• Chương 4: Cài đặt và kiểm thử
• Những kết quả đạt được
4 Danh sách tài liệu tham khảo
• Thiết kế usecase và mô hình hóa các module
• Thiết kế cơ sở dữ liệu cho hệ thống
• Xây dựng APIs cho các chức năng dành cho người dùng trong hệ thống
• Xây dựng giao diện người dùng cho hệ thống
• Xây dựng tổ chức cho project
• Xây dựng các collections trong cơ sở dữ liệu
• Xây dựng các component cơ bản
• Xây dựng các widget cơ bản
• Xây dựng APIs cho các chức năng dành cho người dùng trong hệ thống
• Xây dựng giao diện cho người dùng trong hệ thống
• Kết hợp các phần đã xây dựng thành công gồm giao diện, APIs, Database
• Xây dựng các tính năng và giao diện cho Admin
• Hoàn thành các chức năng quản lý và giao diện cho trang Admin
• Hoàn thành và cải thiện chức năng thanh toán trực tuyến
• Xây dựng App dành cho Shipper
• Bắt đầu deploy hệ thống cho Backend và Frontend
8 03/06/2024 – 15/06/2024 • Kiểm thử hệ thống sau khi deploy
TP Hồ Chí Minh, ngày tháng 06 năm 2024 Ý kiến của giáo viên hướng dẫn Người viết đề cương
(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 27
4 MỤC TIÊU CỦA ĐỀ TÀI 28
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 30
1.2 TÌM HIỂU VỀ MERN STACK 31
CHƯƠNG 2 PHÂN TÍCH, KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 38
2.2.1 Các hệ thống khảo sát 38
2.2.1.1 Hệ thống Bách Hóa Xanh 38
2.2.1.2 Hệ thống Di Động Việt 43
2.1.2 Yêu cầu bài toán của đề tài 48
2.3 XÁC ĐỊNH TÁC NHÂN VÀ CHỨC NĂNG 48
2.4.1 Danh sách yêu cầu chức năng hệ thống 49
2.4.2 Danh sách các yêu cầu phi chức năng 50
2.6 MÔ HÌNH HÓA YÊU CẦU 51
2.6.4 Chỉnh sửa thông tin cá nhân 56
2.6.5 Thay đổi ảnh đại diện 58
2.6.8 Tìm kiếm / Xem sản phẩm – danh mục sản phẩm 62
2.6.9 Thêm sản phẩm vào giỏ hàng 64
2.6.10 Đặt hàng và thanh toán 67
2.6.11 Quản lý đơn hàng của người dùng 69
2.6.12 Shipper thanh toán tiền thu hộ (COD) 70
2.6.14 Thêm đơn vị vận chuyển 74
2.6.19 Quản lý tài khoản người dùng 87
2.6.20 Quản lý đơn đặt hàng 88
2.6.21 Quản lý mã khuyến mãi trong hệ thống 91
CHƯƠNG 3 THIẾT KẾ HỆ THỐNG 93
3.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 93
3.1.1 Lược đồ cơ sở dữ liệu 93
3.1.2 Mô tả các collection trong CSDL 93
3.1.3 Mô tả chi tiết từng collection trong CSDL 94
3.2.1 Giao diện cho User / Buyer 98
3.2.1.1 Giao diện trang đăng nhập 98
3.2.1.2 Giao diện trang đăng ký 99
3.2.1.3 Giao diện trang quên mật khẩu 100
3.2.1.4 Giao diện trang Home phía Website 101
3.2.1.5 Giao diện trang Home phía App 103
3.2.1.6 Giao diện trang thông tin cá nhân người dùng 104
3.2.1.7 Giao diện trang chỉnh sửa thông tin cá nhân người dùng 105
3.2.1.8 Giao diện trang đổi mật khẩu tài khoản người dùng 106
3.2.1.9 Giao diện trang thông tin đặt hàng của người dùng 107
3.2.1.10 Giao diện trang thông tin chi tiết sản phẩm 108
3.2.1.11 Giao diện trang đánh giá sản phẩm 109
3.2.1.12 Giao diện trang Your Cart 110
3.2.1.13 Giao diện trang Checkout phía Website 111
3.2.1.14 Giao diện trang Checkout phía App 112
3.2.1.15 Giao diện trang Detail Order 114
3.2.1.16 Giao diện trang Tìm kiếm sản phẩm 115
3.2.1.17 Giao diện trang Thêm thông tin giao hàng 116
3.2.1.18 Giao diện trang Lọc, sắp xếp sản phầm 117
3.2.2.1 Giao diện Trang chủ phía Shipper 118
3.2.2.2 Giao diện trang Đơn hàng cần đi giao phía Shipper 119
3.2.3.1 Giao diện trang Dashboard phía Admin 120
3.2.3.2 Giao diện trang Thêm sản phẩm mới 121
3.2.3.3 Giao diện trang Quản lý sản phẩm 122
3.2.3.4 Giao diện trang Quản lý đơn hàng 123
3.2.3.5 Giao diện trang Quản lý người dùng 124
3.2.3.7 Giao diện trang Quản lý voucher, mã khuyến mãi 126
3.2.3.8 Giao diện trang Thêm mới voucher, mã khuyến mãi 127
3.2.3.9 Giao diện trang Quản lý đơn vị vận chuyển 128
3.2.3.10 Giao diện trang Thêm mới đơn vị vận chuyển 129
3.2.3.11 Giao diện trang Thêm mới Shipper 130
3.2.3.12 Giao diện trang Thêm mới hình ảnh cho sản phẩm 131
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 132
4.1.1 Cài đặt ứng dụng, thư viện cần thiết 132
4.1.3 Cài đặt phía Back – end 133
4.1.4 Cài đặt phía Front – end 135
4.1.5.1 Store_app phía User / Buyer 137
4.2.1.1 Các loại kiểm thử áp dụng 140
4.2.2 Các trường hợp kiểm thử 141
Hình 1 1 Logo ngôn ngữ lập trình Javascript [1] 30
Hình 1 2 Logo công nghệ MERN STACK [2] 31
Hình 1 3 Logo thư viện React [3] 32
Hình 1 4 Logo nền tẳng NodeJS [4] 33
Hình 1 6 Logo cơ sở dữ liệu MongoDB [6] 35
Hình 2 1 BHX – Trang giới thiệu sản phẩm [7] 39
Hình 2 2 BHX – Trang chi tiết sản phẩm [7] 39
Hình 2 3 BHX – Trang tìm kiếm sản phẩm [7] 40
Hình 2 4 BHX – Trang giỏ hàng [7] 40
Hình 2 5 BHX – Màn hình giới thiệu sản phẩm [7] 41
Hình 2 6 BHX – Màn hình chi tiết sản phẩm [7] 41
Hình 2 7 BHX – Màn hình tìm kiếm sản phẩm [7] 42
Hình 2 8 BHX – Màn hình giỏ hàng [7] 42
Hình 2 9 DĐV – Trang giới thiệu sản phẩm [8] 43
Hình 2 10 DĐV – Trang chi tiết sản phẩm [8] 44
Hình 2 11 DĐV – Trang đánh giá sản phẩm [8] 44
Hình 2 12 DĐV – Trang giỏ hàng [8] 45
Hình 2 13 DĐV – Màn hình giới thiệu sản phẩm [8] 45
Hình 2 14 DĐV – Màn hình chi tiết sản phẩm [8] 46
Hình 2 15 DĐV – Màn hình thông tin cửa hàng [8] 46
Hình 2 16 DĐV – Màn hình thông tin tin tức [8] 47
Hình 2 17 Lược đồ Use Case 51
Hình 2 18 Sequence Diagram cho chức năng “Đăng ký” 52
Hình 2 19 Sequence Diagram cho chức năng “Đăng nhập” 54
Hình 2 20 Sequence Diagram cho chức năng “Đăng xuất” 55
Hình 2 21 Sequence Diagram cho chức năng “Chỉnh sửa thông tin cá nhân” 57
Hình 2 22 Sequence Diagram cho chức năng “Đổi mật khẩu” 60
Hình 2 23 Sequence Diagram cho chức năng “Khôi phục mật khẩu” 62
Hình 2 24 Sequence Diagram cho chức năng “Tìm kiếm / Xem sản phẩm – danh mục sản phẩm” 64
Hình 2 25 Sequence Diagram cho chức năng “Thêm sản phẩm vào giỏ hàng” 66
Hình 2 26 Sequence Diagram cho chức năng “Đặt hàng và thanh toán” 68
Hình 2 27 Sequence Diagram cho chức năng “Quản lý đơn hàng của người dùng” 70
Hình 2 28 Sequence Diagram cho chức năng “Shipper thanh toán tiền thu hộ (COD)” 72
Hình 2 29 Sequence Diagram cho chức năng “Shipper giao hàng” 74
Hình 2 30 Sequence Diagram cho chức năng “Thêm đơn vị vận chuyển” 76
Hình 2 31 Sequence Diagram cho chức năng “Thêm mới Shipper” 78
Hình 2 32 Sequence Diagram cho chức năng “Thống kê” 80
Hình 2 33 Sequence Diagram cho chức năng “Thêm sản phẩm” 82
Hình 2 34 Sequence Diagram cho chức năng “Quản lý sản phẩm” 85
Hình 2 35 Sequence Diagram cho chức năng “Xóa sản phẩm” 86
Hình 2 36 Sequence Diagram cho chức năng “Quản lý tài khoản người dùng” 88
Hình 2 37 Sequence Diagram cho chức năng “Quản lý đơn đặt hàng” 90
Hình 2 38 Sequence Diagram cho chức năng “Quản lý mã khuyến mãi trong hệ thống” 92
Hình 3 1 Lược đồ cơ sở dữ liệu 93
Hình 3 2 Giao diện trang “Đăng nhập” 98
Hình 3 3 Giao diện trang “Đăng ký” 99
Hình 3 4 Giao diện trang “Quên mật khẩu” 100
Hình 3 5 Giao diện trang “Home” phía Website 101
Hình 3 6 Giao diện trang “Home” phía App 103
Hình 3 7 Giao diện trang “Thông tin cá nhân người dùng” 104
Hình 3 8 Giao diện trang “Chỉnh sửa thông tin cá nhân người dùng” 105
Hình 3 9 Giao diện trang “Đổi mật khẩu tài khoản người dùng” 106
Hình 3 10 Giao diện trang “Thông tin đặt hàng của người dùng” 107
Hình 3 11 Giao diện trang “Thông tin chi tiết sản phẩm” 108
Hình 3 12 Giao diện trang “Đánh giá sản phẩm” 109
Hình 3 13 Giao diện trang “Your Cart” 110
Hình 3 14 Giao diện trang “Checkout phía Website” 111
Hình 3 15 Giao diện trang “Checkout phía App” 112
Hình 3 16 Giao diện trang “Detail Order” 114
Hình 3 17 Giao diện trang “Tìm kiếm sản phẩm” 115
Hình 3 18 Giao diện trang “Thêm thông tin giao hàng” 116
Hình 3 19 Giao diện trang “Lọc, sắp xếp sản phẩm” 117
Hình 3 20 Giao diện “Trang chủ phía Shipper” 118
Hình 3 21 Giao diện trang “Đơn hàng cần đi giao phía Shipper” 119
Hình 3 22 Giao diện trang “Dashboard phía Admin” 120
Hình 3 23 Giao diện trang “Thêm sản phẩm mới” 121
Hình 3 24 Giao diện trang “Quản lý sản phẩm” 122
Hình 3 25 Giao diện trang “Quản lý đơn hàng” 123
Hình 3 26 Giao diện trang “Quản lý người dùng” 124
Hình 3 27 Giao diện trang “Quản lý đánh giá sản phẩm” 125
Hình 3 28 Giao diện trang “Quản lý voucher, mã khuyến mãi” 126
Hình 3 29 Giao diện trang “Thêm mới voucher, mã khuyến mãi” 127
Hình 3 30 Giao diện trang “Quản lý đơn vị vận chuyển” 128
Hình 3 31 Giao diện trang “Thêm mới đơn vị vận chuyển” 129
Hình 3 32 Giao diện trang “Thêm mới Shipper” 130
Hình 3 33 Giao diện trang “Thêm mới hình ảnh cho sản phẩm” 131
Hình 4 1 Các collections của Database 132
Hình 4 2 Cấu trúc thư mục phía Back – end 133
Hình 4 3 File môi trường phía Back - end 134
Hình 4 4 Khởi chạy project Back – end thành công 134
Hình 4 5 Cấu trúc thư mục Front – end 135
Hình 4 6 Khởi chạy project Front – end thành công 136
Hình 4 7 Cấu trúc thư mục Store_app phía User / Buyer 137
Hình 4 8 Khởi chạy project Store_app User / Buyer 138
Hình 4 9 Cấu trúc thư mục Shipping_app 139 Hình 4 10 Khởi chạy project Shipping_app thành công 140
Bảng 2 1 Nhận xét “Hệ thống bachhoaxanh.com” 43 Bảng 2 2 Nhận xét "Hệ thống didongviet.com" 47 Bảng 2 3 Bảng xác định tác nhân và chức năng 48 Bảng 2 4 Đặc tả Use Case “Đăng ký” 51 Bảng 2 5 Đặc tả Use Case “Đăng nhập” 53 Bảng 2 6 Đặc tả Use Case “Đăng xuất” 54 Bảng 2 7 Đặc tả Use Case “Chỉnh sửa thông tin cá nhân” 56 Bảng 2 8 Đặc tả Use Case “Thay đổi ảnh đại diện” 58 Bảng 2 9 Đặc tả Use Case “Đổi mật khẩu” 58 Bảng 2 10 Đặc tả Use Case “Khôi phục mật khẩu” 60 Bảng 2 11 Đặc tả Use Case “Tìm kiếm / Xem sản phẩm – danh mục sản phẩm” 62 Bảng 2 12 Đặc tả Use Case “Thêm sản phẩm vào giỏ hàng” 64 Bảng 2 13 Đặc tả Use Case “Đặt hàng và thanh toán” 67 Bảng 2 14 Đặc tả Use Case “Quản lý đơn hàng của người dùng” 69 Bảng 2 15 Đặc tả Use Case “Shipper thanh toán tiền thu hộ (COD)” 70 Bảng 2 16 Đặc tả Use Case “Shipper giao hàng” 72 Bảng 2 17 Đặc tả Use Case “Thêm đơn vị vận chuyển” 74 Bảng 2 18 Đặc tả Use Case “Thêm mới Shipper” 76 Bảng 2 19 Đặc tả Use Case “Thống kê” 79 Bảng 2 20 Đặc tả Use Case “Thêm sản phẩm” 80 Bảng 2 21 Đặc tả Use Case “Quản lý sản phẩm” 83 Bảng 2 22 Đặc tả Use Case “Quản lý tài khoản người dùng” 87 Bảng 2 23 Đặc tả Use Case “Quản lý đơn đặt hàng” 88 Bảng 2 24 Đặc tả Use Case “Quản lý mã khuyến mãi trong hệ thống” 91
Bảng 3 1 Mô tả các collection trong CSDL 93 Bảng 3 2 Mô tả chi tiết collection “user” 94 Bảng 3 3 Mô tả chi tiết collection trong “products” 95 Bảng 3 4 Mô tả chi tiết collection “vouchers” 96 Bảng 3 5 Mô tả chi tiết collection “orders” 96
Bảng 3 6 Mô tả chi tiết collection “address” 97 Bảng 3 7 Mô tả chi tiết collection “shippings” 97 Bảng 3 8 Mô tả chi tiết collection “shippers” 97 Bảng 3 9 Mô tả trang “Đăng nhập” 98 Bảng 3 10 Mô tả trang “Đăng ký” 99 Bảng 3 11 Mô tả trang “Quên mật khẩu” 100 Bảng 3 12 Mô tả trang “Home” phía Website 101 Bảng 3 13 Mô tả trang “Home” phía App 103 Bảng 3 14 Mô tả trang “Thông tin cá nhân người dùng” 104 Bảng 3 15 Mô tả trang “Chỉnh sửa thông tin cá nhân người dùng” 105 Bảng 3 16 Mô tả trang “Đổi mật khẩu tài khoản người dùng” 106 Bảng 3 17 Mô tả trang “Thông tin đặt hàng của người dùng” 107 Bảng 3 18 Mô tả trang “Thông tin chi tiết sản phẩm” 108 Bảng 3 19 Mô tả trang “Đánh giá sản phẩm” 109 Bảng 3 20 Mô tả trang “Your Cart” 110 Bảng 3 21 Mô tả trang “Checkout phía Website” 111 Bảng 3 22 Mô tả trang “Checkout phía App” 113 Bảng 3 23 Mô tả trang “Detail Order” 114 Bảng 3 24 Mô tả trang “Tìm kiếm sản phẩm” 115 Bảng 3 25 Mô tả trang “Thêm thông tin giao hàng” 116 Bảng 3 26 Mô tả trang “Lọc, sắp xếp sản phẩm” 117 Bảng 3 27 Mô tả trang “Trang chủ phía Shipper” 118 Bảng 3 28 Mô tả trang “Đơn hàng cần đi giao phía Shipper” 120 Bảng 3 29 Mô tả trang “Dashboard phía Admin” 121 Bảng 3 30 Mô tả trang “Thêm sản phẩm mới” 122 Bảng 3 31 Mô tả trang “Quản lý sản phẩm” 123 Bảng 3 32 Mô tả trang “Quản lý đơn hàng” 124 Bảng 3 33 Mô tả trang “Quản lý người dùng” 124 Bảng 3 34 Mô tả trang “Quản lý đánh giá sản phẩm” 125 Bảng 3 35 Mô tả trang “Quản lý voucher, mã khuyến mãi” 126 Bảng 3 36 Mô tả trang “Thêm mới voucher, mã khuyến mãi” 127 Bảng 3 37 Mô tả trang “Quản lý đơn vị vận chuyển” 128
Bảng 3 38 Mô tả trang “Thêm mới đơn vị vận chuyển” 129 Bảng 3 39 Mô tả trang “Thêm mới Shipper” 130 Bảng 3 40 Mô tả trang “Thêm mới hình ảnh cho sản phẩm” 131
Bảng 4 1 Các phần mềm cài đặt 132 Bảng 4 2 Kiểm thử chức năng đăng nhập với trường hợp không nhập “Email” 141 Bảng 4 3 Kiểm thử chức năng đăng nhập với trường hợp nhập “Email” không tồn tại 142 Bảng 4 4 Kiểm thử chức năng đăng nhập với trường hợp không nhập “Password” 143 Bảng 4 5 Kiểm thử chức năng đăng nhập với trường hợp nhập sai “Password” 144 Bảng 4 6 Kiểm thử chức năng đăng nhập với trường hợp nhập đúng thông tin 145 Bảng 4 7 Kiểm thử chức năng đăng ký với trường hợp không nhập “Name” 146 Bảng 4 8 Kiểm thử chức năng đăng ký với trường hợp không nhập “Email” 147 Bảng 4 9 Kiểm thử chức năng đăng ký với trường hợp nhập “Email” đã đăng ký 148 Bảng 4 10 Kiểm thử chức năng đăng ký với trường hợp nhập “Password” và “Confirm Password” không khớp nhau 149 Bảng 4 11 Kiểm thử chức năng đăng ký với trường hợp nhập đầy đủ / đúng thông tin đăng ký 150 Bảng 4 12 Kiểm thử chức năng xác nhận Email vừa đăng ký với trường hợp nhập không đầy đủ / sai mã OTP được gửi về 151 Bảng 4 13 Kiểm thử chức năng xác nhận Email vừa đăng ký với trường hợp nhập đầy đủ / đúng mã OTP được gửi về 152 Bảng 4 14 Kiểm thử chức năng quên mật khẩu với trường hợp nhập “Password” và
“Confirm Password” không khớp nhau 153 Bảng 4 15 Kiểm thử chức năng quên mật khẩu với trường hợp nhập sai OTP 154 Bảng 4 16 Kiểm thử chức năng quên mật khẩu với trường hợp nhập đúng thông tin 155 Bảng 4 17 Kiểm thử chức năng thay đổi Email với trường hợp nhập “Email” không hợp lệ 156 Bảng 4 18 Kiểm thử chức năng thay đổi Email với trường hợp nhập đúng các thông tin 157
Bảng 4 19 Kiểm thử chức năng thay đổi Name với trường hợp nhập đúng các thông tin 158 Bảng 4 20 Kiểm thử chức năng thay đổi Password với trường hợp nhập sai Password cũ 159 Bảng 4 21 Kiểm thử chức năng thay đổi Password với trường hợp nhập đúng thông tin 160 Bảng 4 22 Kiểm thử chức năng thêm sản phẩm vào giỏ hàng 161 Bảng 4 23 Kiểm thử chức năng xóa sản phẩm khỏi giỏ hàng 162 Bảng 4 24 Kiểm thử chức năng thêm địa chỉ giao hàng với trường hợp nhập đầy đủ / đúng thông tin 163 Bảng 4 25 Kiểm thử chức năng chỉnh sửa địa chỉ giao hàng với trường hợp nhập đầy đủ / đúng thông tin 164 Bảng 4 26 Kiểm thử chức năng xóa địa chỉ giao hàng 165 Bảng 4 27 Kiểm thử chức năng user thêm voucher 166 Bảng 4 28 Kiểm thử chức năng đặt hàng với trường hợp nhập đầy đủ / đúng thông tin được thanh toán bằng COD 167 Bảng 4 29 Kiểm thử chức năng đặt hàng với trường hợp nhập đầy đủ / đúng thông tin được thanh toán bằng CARD 168 Bảng 4 30 Kiểm thử chức năng hủy đơn hàng COD chưa được xác nhận 170 Bảng 4 31 Kiểm thử chức năng xem chi tiết đơn hàng sau khi đặt hàng 170 Bảng 4 32 Kiểm thử chức năng đánh giá / bình luận sản phẩm sau khi nhận hàng 171 Bảng 4 33 Kiểm thử chức năng giao hàng thành công của Shipper 172 Bảng 4 34 Kiểm thử chức năng thanh toán tiền nợ của Shipper 173 Bảng 4 35 Kiểm thử chức năng chỉnh sửa user thực hiện bởi Admin 174 Bảng 4 36 Kiểm thử chức năng create Product thực hiện bởi Admin 175 Bảng 4 37 Kiểm thử chức năng add image of Product thực hiện bởi Admin 176 Bảng 4 38 Kiểm thử chức năng edit status order thực hiện bởi Admin 177 Bảng 4 39 Kiểm thử chức năng edit Product category thực hiện bởi Admin 178 Bảng 4 40 Kiểm thử chức năng add Voucher thực hiện bởi Admin 179 Bảng 4 41 Kiểm thử chức năng add Shipping thực hiện bởi Admin 180 Bảng 4 42 Kiểm thử chức năng add Shipper to Shipping thực hiện bởi Admin 181 Bảng 4 43 Kiểm thử chức năng edit Shipper to Shipping thực hiện bởi Admin 181
Bảng 4 44 Kiểm thử chức năng edit Product thực hiện bởi Admin 182 Bảng 4 45 Kiểm thử chức năng delete Product thực hiện bởi Admin 183 Bảng 4 46 Kiểm thử chức năng delete Voucher thực hiện bởi Admin 184 Bảng 4 47 Kiểm thử chức năng delete User thực hiện bởi Admin 185
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Hiện nay, tốc độ phát triển Internet rất nhanh chóng và mạnh mẽ, các đối thủ cạnh tranh luôn tìm cách kiểm soát phần lớn thị trường trên mạng Internet Đặc biệt, trong ngành dịch vụ, Internet đóng một vai trò vô cùng quan trọng Chính mảng thông tin sẽ tạo ra nhiều lợi nhuận nhất cho các doanh nghiệp, nhất là vì nó cung cấp một cổng vào ngay lập tức cho khách hàng hay cho các đối tác tiềm năng Đối với nhiều doanh nghiệp, Internet chỉ là một kênh thông tin để quảng bá truyền thông Hệ thống Website và App của doanh nghiệp được đưa lên cũng chỉ là để diễn tả lại cho hấp dẫn nội dung tự giới thiệu về công ty Nhưng việc tạo ra một ‘Hệ thống’ như vậy không chỉ đơn giản là giới thiệu về công ty mà còn cung cấp một lượng thông tin đáng kể và phù hợp cho người truy cập Chẳng hạn như các doanh nghiệp bán các sản phẩm rất khác nhau và có mong muốn giới thiệu hàng hoá của mình cho một khách hàng tiềm năng chung Nếu một doanh nghiệp muốn khách hàng truy cập vào hệ thống Website lẫn App của mình nhằm xây dựng một mối quan hệ, thì doanh nghiệp phải đảm bảo tính cập nhật đều đặn cho hệ thống này
Internet cũng có thể đảm bảo việc phân phối cho công chúng những dịch vụ liên quan đến những sản phẩm như đồ điện tử, hàng tiêu dùng Internet không chỉ cho phép họ tra cứu mọi thứ mà còn cung cấp một mạng phân phối các sản phẩm giá rẻ để tìm khách hàng Ngay cả khi một doanh nghiệp đưa ra một sản phẩm mới trên thị trường thì Internet cũng giúp cho họ lôi kéo được khách hàng từ khắp nơi trên toàn thế giới Hơn nữa, với sự phát triển của Logistics thì việc phát triển các hệ thống bán hàng sẽ ngày càng thuận lợi và dễ dàng hơn
Xuất phát từ những lý do trên nên nhóm chúng em quyết định sẽ thực hiện đề tài
“Xây dựng Hệ thống bán hàng điện tử bằng MERN Stack và Flutter” Với đề tài này, nhóm hy vọng vừa góp phần thúc đẩy việc phát triển công nghệ thông tin vừa tạo ra một hệ thống giúp kết nối giữa người bán và người mua trên Website lẫn App Đây sẽ là nơi mà người mua được quyền xem xét, lựa chọn những sản phẩm phù hợp mà không cần phải tốn thời gian ra trực tiếp cửa hàng Còn người bán sẽ có cơ hội giới thiệu về những sản phẩm mới, về những ưu đãi, cũng như các chương trình khuyến mãi,… một cách nhanh chóng và rộng rãi hơn
2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua sắm mọi lúc, mọi nơi của người dùng, không bị giới hạn về thời gian và không gian Người dùng chỉ cần có cho mình một thiết bị thông minh có thể truy cập được Internet là có thể truy cập vào Website để trải nghiệm không gian mua sắm Đồng thời, đề tài cũng nghiên cứu các công nghệ, công cụ để hoàn thiện sản phẩm một cách hoàn chỉnh nhất, bao gồm:
- Sử dụng thư viện NodeJS, và ExpressJS Framework để xây dựng phần server cho Website
- Thư viện ReactJS và Flutter để thiết kế và xây dựng giao diện cho người dùng cho phía Website và App
- Cơ sở dữ liệu MongoDB để lưu trữ dữ liệu cho hệ thống
- JWT để làm lớp bảo mật cho hệ thống Khi request đến các API có yêu cầu xác thực, ứng dụng phải cung cấp JWT trong header của request để có thể truy cập đến tài nguyên của các API này
- Cloudinary để lưu trữ các hình ảnh của sản phẩm có trong hệ thống
NHƯỢC ĐIỂM
Bên cạnh những ưu điểm được nêu trên thì do thời gian cũng như kiến thức còn hạn chế nên hệ thống của nhóm vẫn còn một số nhược điểm cần cải tiến và nâng cấp như:
- Chưa tích hợp đăng nhập bằng Google, Facebook,…
- Chưa xây dựng được hệ thống mã giảm giá, khuyến mãi, voucher chi tiết, phức tạp hơn
- Hệ thống quản lý, thống kê còn thiếu sót nhiều thông số cần thiết cho quản lý, kinh doanh online
- Hệ thống còn hạn chế về các phương thức thanh toán online tiện lợi
- Các chức năng cho Shipper còn đơn giản, hạn hẹp, chỉ đủ mức cơ bản để giao hàng tiện lợi.
HƯỚNG PHÁT TRIỂN
Từ những nhược điểm nêu trên, nhằm kế thừa và tiếp tục phát huy những ưu điểm đạt được Cũng như nâng cấp hệ thống nhằm cung cấp nhiều chức năng mua sắm hơn, thì hướng phát triển tiếp theo của ứng dụng sẽ như sau:
- Tích hợp đăng nhập bằng Google, Facebook,… để đăng nhập nhanh chóng cũng như tăng cường tính bảo mật
- Xây dựng một hệ thống quản lý voucher, mã giảm giá áp dụng theo từng khung giờ, theo từng sản phẩm, theo các danh mục sản phẩm,…
- Cải thiện hệ thống quản lý, thống kê, thêm nhiều các thông số, doanh thu chi tiết, top những sản phẩm, xu hướng mua sắm của người dùng để giúp nắm bắt được thị trường để đưa ra được hướng phát triển tốt nhất
- Tích hợp thêm nhiều phương thức thanh toán online tiện lợi, tạo mã QR code để thanh toán nhanh gọn, không cần phải cung cấp thông tin thẻ hay chủ tài khoản
- Cải thiện lại các chức năng cho Shipper, thêm các bước để cải thiện tính bảo mật, cũng như xác nhận giao, nhận hàng

Tiêu đề	Xây dựng hệ thống bán hàng điện tử sử dụng MERN stack và Flutter
Tác giả	Hồ Xuân Hiếu, Đỗ Ngọc Duy Hưng
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	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	190
Dung lượng	13,94 MB