Xây dựng website và ứng dụng mobile kinh doanh phụ kiện máy tính

TỔNG QUAN

Lý do chọn đề tài

Khi nền kinh tế toàn cầu phát triển, ngành công nghệ thông tin trở thành một phần thiết yếu trong mọi lĩnh vực Sự gia tăng thời gian làm việc và tình hình dịch bệnh phức tạp đã khiến việc mua sắm trực tiếp trở nên bất tiện và nguy hiểm cho sức khỏe Trong bối cảnh đó, thị trường kinh doanh trực tuyến ngày càng phong phú, và mua sắm online trở thành giải pháp cần thiết để bảo vệ sức khỏe Vì lý do này, nhóm chúng tôi đã phát triển một website và ứng dụng di động chuyên về kinh doanh phụ kiện máy tính, giúp khách hàng dễ dàng lựa chọn và mua sắm sản phẩm một cách tiện lợi nhất.

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

Trong bối cảnh tình hình Việt Nam nói riêng và thế giới nói chung, từ cuối năm

Năm 2019, đại dịch Covid-19 đã bắt đầu ảnh hưởng đến các quốc gia trên thế giới, và đến năm 2021, Việt Nam chứng kiến tình hình Covid-19 trở nên nghiêm trọng, dẫn đến việc nhiều doanh nghiệp vừa và nhỏ, cũng như các hàng quán phải đóng cửa Học sinh và sinh viên từ cấp 1 đến sau phổ thông phải chuyển sang học trực tuyến, gây ra nhiều khó khăn cho các gia đình và bản thân học sinh - sinh viên do thiếu thiết bị công nghệ như máy tính xách tay, máy tính để bàn, điện thoại và máy tính bảng Để giải quyết những vấn đề này, các website và ứng dụng di động chuyên cung cấp phụ kiện máy tính đã ra đời nhằm hỗ trợ tối đa cho học sinh - sinh viên trong việc học tập trực tuyến trong bối cảnh dịch Covid-19.

Mục tiêu nghiên cứu

Để đáp ứng nhu cầu lựa chọn các sản phẩm hiện đại và mới nhất, việc mua sắm trở nên dễ dàng và nhanh chóng hơn bao giờ hết Khách hàng có thể nắm rõ chi tiết về sản phẩm cần mua, đồng thời nhiều nhãn hàng cung cấp đa dạng lựa chọn với thiết kế đơn giản, dễ thao tác.

Kết quả dự kiến đạt được

Chúng tôi đã phát triển hai nền tảng chính: một trang web kinh doanh phụ kiện máy tính và một ứng dụng di động, nhằm kết nối người tiêu dùng với các sản phẩm linh kiện máy tính như chuột, bàn phím, USB và màn hình Trang web được xây dựng trên công nghệ MERN stack, trong khi ứng dụng di động sử dụng công nghệ Flutter.

Môi trường hoạt động

Front-End: HTML, CSS, Javascript (ReactJS)

Ràng buộc

Môi trường hoạt động cần phải kết nối Internet.

CƠ SỞ LÝ THUYẾT

Cơ sở lý thuyết Front-end

Nhóm sẽ sử dụng ReactJS là công cụ để phát triển front-end

ReactJS là thư viện mã nguồn mở do Facebook phát triển, nhằm tạo ra các ứng dụng web hấp dẫn với tốc độ nhanh và hiệu quả cao Mục tiêu chính của ReactJS là đảm bảo rằng các website sử dụng thư viện này hoạt động mượt mà, nhanh chóng, dễ dàng mở rộng và đơn giản trong việc triển khai.

Hình 2.1.Giới thiệu về ReactJS [10]

Lợi ích khi sử dụng ReactJS: [9]

Lợi ích đầu tiên của ReactJS là khả năng tạo ra một DOM ảo, nơi các component được lưu trữ Việc sử dụng DOM ảo này giúp cải thiện hiệu suất làm việc đáng kể, vì ReactJS sẽ thực hiện các tính toán cần thiết trước khi cập nhật thực tế lên DOM, từ đó tối ưu hóa quá trình xử lý.

Lợi ích thứ hai của ReactJS là việc viết mã JavaScript trở nên dễ dàng hơn nhờ vào cú pháp JSX, cho phép kết hợp giữa mã HTML và JavaScript một cách linh hoạt.

Có nhiều công cụ phát triển là lợi ích tiếp theo của ReactJS

ReactJS nổi bật với tính thân thiện với SEO, điều mà nhiều framework JavaScript khác gặp khó khăn Mặc dù đã có những cải tiến, nhưng hầu hết các framework JS vẫn không tối ưu cho các công cụ tìm kiếm Sự khác biệt này khiến ReactJS trở thành lựa chọn ưu việt cho các dự án cần tối ưu hóa công cụ tìm kiếm.

ReactJS tự hào vì không nằm trong nhóm công nghệ không thân thiện với SEO Nhờ vào khả năng render và trả về nội dung dưới dạng webpage khi chạy trên server cùng với các virtual DOM, ReactJS đảm bảo tính SEO Friendly cho các trang web.

Cơ sở lý thuyết Back-end

Nhóm sẽ sử dụng NodeJS là môi trường để phát triển back-end

NodeJS là nền tảng phát triển độc lập, được xây dựng trên Javascript Runtime của Chrome, cho phép phát triển ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

Hình 2.2.Giới thiệu về NodeJS [11]

Lý do để tự tin khi sử dụng Node: [11]

NodeJS là một nền tảng ứng dụng được phát triển bằng JavaScript, một ngôn ngữ lập trình phổ biến Ryan Dahl, người sáng tạo ra JavaScript, nhấn mạnh rằng ngôn ngữ này có những đặc điểm độc đáo, nổi bật là không hỗ trợ đa luồng, mà chỉ hoạt động trên cơ chế đơn luồng và hướng sự kiện.

Nodejs chạy đa nền tảng phía server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả

Có thể chạy ứng dụng NodeJS ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng NodeJS rất lớn và hoàn toàn miễn phí

Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị

Nhóm sẽ sử dụng ExpressJS là framework để phát triển NodeJS

Express.js is a powerful framework built on Node.js that facilitates web and mobile development It supports various HTTP methods and middleware, enabling the creation of robust and user-friendly APIs.

Cơ sở lý thuyết Flutter

Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android, được phát triển bởi Google Nền tảng này ngày càng trở nên phổ biến trong việc tạo ra các ứng dụng gốc cho hệ sinh thái của Google.

Flutter was developed to address common challenges in mobile development, specifically focusing on Fast Development and Native Performance Unlike React Native, which primarily ensures Fast Development, and pure native code that guarantees Native Performance, Flutter successfully combines both features.

Flutter hoàn toàn miễn phí và cũng là mã nguồn mở.

Cơ sở lý thuyết Database

Nhóm sẽ sử dụng MongoDB là nơi để lưu trữ database

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc loại NoSQL, được hàng triệu người sử dụng Nó lưu trữ dữ liệu dưới dạng tài liệu JSON thay vì bảng như trong các cơ sở dữ liệu quan hệ, giúp tăng tốc độ truy vấn Những ưu điểm nổi bật của MongoDB bao gồm khả năng mở rộng linh hoạt và hiệu suất cao trong việc xử lý dữ liệu lớn.

MongoDB lưu trữ dữ liệu dưới dạng tài liệu JSON, cho phép mỗi collection có kích thước và cấu trúc tài liệu khác nhau Điều này mang lại sự linh hoạt trong việc lưu trữ dữ liệu, cho phép người dùng dễ dàng thêm dữ liệu theo nhu cầu mà không bị giới hạn.

Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau và không hỗ trợ join như trong RDBMS, điều này giúp quá trình insert, xóa, hoặc update diễn ra nhanh chóng mà không cần kiểm tra các ràng buộc dữ liệu.

MongoDB hỗ trợ khả năng mở rộng ngang (Horizontal Scalability) rất hiệu quả Trong MongoDB, khái niệm cluster đề cập đến một cụm các node chứa dữ liệu, cho phép chúng giao tiếp với nhau Để mở rộng hệ thống, người dùng chỉ cần thêm một node mới vào cluster.

Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Khi một truy vấn dữ liệu được thực hiện, bản ghi sẽ được lưu trữ trong bộ nhớ RAM, giúp tăng tốc độ truy vấn cho các lần sau mà không cần phải đọc từ ổ cứng.

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

Cơ sở lý thuyết Host

Nhóm sẽ sử dụng Heroku là dịch vụ để đưa website của nhóm lên Internet

Hosting, hay còn gọi là dịch vụ web hosting, là giải pháp trực tuyến cho phép bạn xuất bản website hoặc ứng dụng web lên Internet Khi đăng ký dịch vụ hosting, bạn thực chất đang thuê không gian trên server để lưu trữ tất cả các file và dữ liệu cần thiết cho hoạt động của website.

Heroku là nền tảng đám mây PaaS cho phép lập trình viên dễ dàng xây dựng, triển khai và quản lý ứng dụng Với tính linh hoạt và giao diện thân thiện, Heroku cung cấp một giải pháp đơn giản để đưa sản phẩm đến tay người dùng Nền tảng này giúp các nhà phát triển tập trung vào việc phát triển sản phẩm mà không phải lo lắng về việc vận hành máy chủ hoặc phần cứng.

Các công cụ liên quan

Postman là một công cụ mạnh mẽ để thao tác với API, đặc biệt là REST, và hiện đang trở thành một trong những công cụ phổ biến nhất cho việc thử nghiệm API Nhờ Postman, người dùng có thể dễ dàng gọi Rest API mà không cần phải viết bất kỳ dòng code nào.

Postman hỗ trợ đầy đủ các phương thức HTTP như GET, POST, PUT, PATCH và DELETE Ngoài ra, công cụ này còn cho phép người dùng lưu trữ lịch sử các yêu cầu, giúp dễ dàng tái sử dụng khi cần thiết.

Các sử dụng Postman cơ bản:

Cho phép gửi HTTP Request với các method GET, POST, PUT, DELETE

Cho phép post dữ liệu dưới dạng form (key-value), text, json

Hiện kết quả trả về dạng text, hình ảnh, XML, JSON

Cho phép thay đổi header của các request

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Khảo sát hiện trạng

Sự bùng nổ dịch vụ đặt hàng trực tuyến tại Việt Nam, đặc biệt trong giai đoạn dịch Covid-19, đã thúc đẩy các doanh nghiệp công nghệ, từ lớn đến nhỏ, nhanh chóng thích nghi với xu hướng này Nhiều cửa hàng đã áp dụng công nghệ vào hoạt động kinh doanh, giúp gia tăng lợi nhuận một cách đáng kể so với phương thức truyền thống.

Internet đã mang lại nhiều giải pháp hữu ích giúp tiết kiệm thời gian, công sức và tiền bạc Chúng ta không còn cần phải đến cửa hàng để mua sắm, nhờ vào sự phát triển của internet, những khó khăn trong việc mua sắm đã trở thành quá khứ Việc kết hợp tài nguyên internet với công nghệ thông tin đã làm cho quy trình mua bán và quản lý trở nên thuận tiện và dễ dàng hơn bao giờ hết.

Trong thời đại phát triển hiện nay, việc thích ứng với môi trường làm việc và học tập tại nhà đã trở thành một phần thiết yếu, đặc biệt trong mùa dịch Nhiều người đã trang trí không gian học tập và làm việc của mình để tạo cảm hứng, thay vì phải đến cửa hàng tìm kiếm phụ kiện decor có thể không có sẵn Do đó, việc xây dựng một website hoặc ứng dụng để giải quyết vấn đề này là rất cần thiết, giúp việc mua sắm trở nên thuận tiện và dễ dàng hơn.

Xác định yêu cầu

Quản trị viên: Chủ yếu quản lý cơ sở dữ liệu hệ thống (người dùng, nhân viên, sản phẩm, đơn hàng, thống kê, nhắn tin)

 Quản lý thông tin người dùng và nhân viên

 Quản lý các danh mục sản phẩm

 Có thể chat với người dùng

Nhân viên: Quản lý cơ sở dữ liệu hệ thống (người dùng, sản phẩm, đơn hàng)

 Có thể thêm các nhãn hiệu của sản phẩm

 Có thể thêm các mặt hàng sản phẩm khác

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

 Có thể tra cứu thông tin sản phẩm bằng tên sản phẩm hoặc giá tiền

 Quản lý thông tin giỏ hàng: có thể thêm sản phẩm, xóa hoặc cập nhập lại danh sách và các sản phẩm trong dở hàng của mình

 Có thể thanh toán bằng 2 cách: VnPay hoặc PayPal

 Có thể theo dõi đơn hàng đã đặt

 Cho phép đánh giá, bình luận thông tin sản phẩm sản phẩm

 Có thể chat với quản trị viên

 Cho phép đăng ký, đăng nhập, đăng xuất tài khoản người dùng

 Có thể thay đổi thông tin tài khoản người dùng, cập nhập mật khẩu mới

 Có chức năng quên mật khẩu, reset mật khẩu mới

 Cho phép xem tất cả các sản phẩm của website dạng phân trang

 Cho phép xem thông tin chi tiết của sản phẩm

3.2.2 Yêu cầu phi chức năng

Một số yêu cầu phi chức năng đối với hệ thống:

 Khả năng mở rộng thêm các chức năng khác, hoặc nâng cấp website, úng dụng lên phiên bản cao hơn

 Tuân thủ quyền riêng tư, bảo mật

 Tương thức với nhiều phần mềm, và các phiên bản của hệ điều hành Android

 Hạn chế về tài nguyên và tốc độ xử lý

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Mô hình hoá yêu cầu

4.1.2.1 Usecase Quản lý khách hàng

Hình 4.1 Hình Usecase Quản lý khách hàng

4.1.2.1.1 Usecase Xem thông tin khách hàng

Tên usecase Xem thông tin khách hàng

Mô tả Xem thông tin của khách hàng bất kì

Chủ thể Nhân viên uc Use Case View

Chỉnh sửa thông tin Đăng ký Đăng xuất

Quản lý danh mục sản phẩm

Theo dõi tình trạng đơn hàng

Xem chi tiết sản phẩm Rev iew sản phẩm

Tìm kiếm sản phẩm uc use Nhan Vien

Xem thong tin khach hang Quan lý khach hang ôextendằ

STT Chủ thể Phản hồi hệ thống

1 Click vào “Quản lý khách hàng”

Để truy cập trang quản lý khách hàng, người dùng cần có thiết bị kết nối internet và đăng nhập bằng tài khoản nhân viên Trang này sẽ hiển thị danh sách khách hàng cùng với thông tin chi tiết của từng khách hàng.

Kết quả Hiển thị danh sách khách hàng, thông tin chi tiết khách hàng

Bảng 4.1 Usecase Xem thông tin khách hàng

4.1.2.2 Usecase Quản lý sản phẩm

Hình 4.2 Hình Usecase Quản lý sản phẩm

Tên usecase Tạo sản phẩm

Mô tả Tạo sản phẩm

Màn hình tạo sản phẩm hiển thị các thông tin quan trọng như tên sản phẩm, nội dung sản phẩm, danh mục sản phẩm, nhãn hiệu sản phẩm và giá tiền Để truy cập, người dùng cần có thiết bị kết nối internet và đăng nhập bằng tài khoản nhân viên.

Kết quả Tạo sản phẩm thành công

Bảng 4.2 Usecase Tạo sản phẩm

Tên usecase Update sản phẩm uc usecase qu?n lý s?n ph?m

Update san pham ôextendằ ôextendằ

Mô tả Cập nhập thông tin sản phẩm

Hiển thị modal thông tin sản phẩm, nhân viên có thể chỉnh sửa và nhấn

“update” để cập nhập sản phẩm Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản nhân viên

Kết quả Hiển thị thông tin và cập nhập chi tiết sản phẩm

Bảng 4.3 Usecase Update sản phẩm

4.1.2.3 Usecase Quản lý nhãn hiệu

Hình 4.3.Hình Usecase Quản lý nhãn hiệu

Tên usecase Tạo nhãn hiệu sản phẩm

Mô tả Tạo nhãn hiệu cho sản phẩm

1 Click vào “Add to brand”

Hiển thị modal tạo nhãn hiệu cho sản phẩm, nhân viên nhập đầy đủ thông tin và nhấn nút “Add”

Sau khi hoàn tất việc điền thông tin và nhấn nút “Add”, hệ thống sẽ thông báo rằng việc tạo nhãn hiệu đã thành công Điều kiện cần thiết để thực hiện là thiết bị phải có kết nối internet và người dùng cần đăng nhập bằng tài khoản nhân viên.

Kết quả Tạo nhãn hiệu sản phẩm thành công

Bảng 4.4 Usecase Tạo nhãn hiệu uc quan lý nhan hieu

Quan ly nhan hieu Tao nhan hieu ôextendằ

4.1.2.4 Usecase Quản lý đơn hàng

Hình 4.4 Hình Usecase Quản lý đơn hàng

4.1.2.4.1 Usecase xác nhận đơn hàng

Tên usecase Xác nhận đơn hàng

Mô tả Quản lý đơn hàng của khách hàng

1 Click vào “Quản lý đơn hàng”

Màn hình sẽ hiển thị thông tin các đơn hàng của từng khách hàng

Nhân viên có thể nhấn nút “Accept” để xác nhận đơn hàng của khách hàng, thì hệ thống sẽ thông báo là

“xác nhận thành công” Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản nhân viên

Kết quả Xác nhận đơn hàng của khách thành công

Bảng 4.5 Usecase Xác nhận đơn hàng

4.1.2.5 Usecase Quản lý sản phẩm (admin)

Hình 4.5 Hình Usecase Quản lý sản phẩm (admin) uc quan lý don hang

Quan ly don hang Xac nhan don hang ôextendằ uc Quan ly san pham Admin

Xem thong tin san pham

Xoa san pham ôextendằ ôextendằ

Tên usecase Xóa sản phẩm

Mô tả Xóa sản phẩm có trong cửa hàng

Hiển thị modal thông báo “bạn có muốn xóa sản phẩm này không”, chọn

“Cancel” để hủy thao thác xóa, chọn

Để thực hiện thao tác xóa, bạn cần sử dụng lệnh “delete” Sau khi xóa thành công, hệ thống sẽ hiển thị thông báo “Delete Success” Lưu ý, bạn cần có thiết bị kết nối internet và đăng nhập bằng tài khoản Admin.

Kết quả Xóa sản phẩm thành công

Bảng 4.6 Usecase Xoá sản phẩm

4.1.2.6 Usecase Quản lý danh mục sản phẩm

Hình 4.6 Hình Usecase Quản lý danh mục sản phẩm

Tên usecase Tạo danh mục sản phẩm

Mô tả Tạo danh mục sản phẩm

Dòng xử lý STT Chủ thể Phản hồi hệ thống uc Quan ly danh muc

Quan ly danh muc san pham

Xoa danh muc san pham

Tao danh muc san pham ôextendằ ôextendằ

Hiển thị trang quản lý danh mục sản phẩm

Để tạo danh mục mới, bạn cần hiển thị màn hình quản lý danh mục, sau đó điền tên danh mục vào ô input và nhấn nút "Thêm danh mục" Lưu ý rằng thiết bị của bạn phải có kết nối internet và bạn cần đăng nhập bằng tài khoản Admin.

Kết quả Tạo danh mục thành công, và hiện thông báo “Success”

Bảng 4.7 Usecase Tạo danh mục

Tên usecase Xóa danh mục

Mô tả Xóa danh mục sản phẩm

Chọn vào từng danh mục và Click vào “Delete

Để xóa danh mục khỏi cơ sở dữ liệu, hệ thống sẽ hiển thị một modal thông báo xác nhận Bạn có thể chọn "Cancel" để hủy thao tác hoặc "Delete" để thực hiện việc xóa Lưu ý rằng bạn cần có thiết bị kết nối internet và đăng nhập với tài khoản Admin.

Kết quả Xóa danh mục sản phẩm thành công

Bảng 4.8 Usecase Xoá danh mục

4.1.2.7 Usecase Quản lý nhân viên

Hình 4.7 Hình Usecase Quản lý nhân viên

Tên usecase Xóa nhân viên uc Quan ly nhan v ien

Quan ly nhan v ien Xoa nhan v ien ôextendằ

Mô tả Xóa nhân viên khỏi hệ thống

1 Chọn vào từng nhân viên và Click vào “Delete ”

Sau khi nhấn nút “Delete”, hệ thống sẽ thông báo việc xóa nhân viên thành công Để thực hiện điều này, cần đảm bảo rằng thiết bị có kết nối internet và bạn đã đăng nhập bằng tài khoản Admin.

Kết quả Xóa thành công nhân viên

Bảng 4.9 Usecase Xoá nhân viên

4.1.2.8 Usecase Quản lý khách hàng

Hình 4.8 Hình Usecase Quản lý khách hàng

Tên usecase Xóa khách hàng

Mô tả Xóa khách hàng khỏi hệ thống

1 Chọn vào từng khách hàng và Click vào “Delete

Sau khi nhấn nút “Delete”, hệ thống sẽ thông báo rằng việc xóa khách hàng đã thành công Để thực hiện thao tác này, người dùng cần đảm bảo thiết bị có kết nối internet và đã đăng nhập bằng tài khoản Admin.

Kết quả Xóa thành công khách hàng

Bảng 4.10 Usecase Xoá khách hàng uc Quan ly khach hang

Quan ly khach hang Xoa khach hang ôextendằ

4.1.2.9 Usecase Quản lý thống kê

Hình 4.9 Hình Usecase Quản lý thống kê

Tên usecase Xem thống kê

Mô tả Xem thống kê doanh sản phẩm bán được trong một tuần

Để xem biểu đồ doanh thu sản phẩm trong vòng một tuần, người dùng cần có thiết bị kết nối internet và đăng nhập bằng tài khoản Admin.

Kết quả Hiển thị biểu đồ thể hiện doanh thu sản phẩm bán được trong vòng một tuần

Bảng 4.11 Usecase Xem thống kê uc Quan ly thong ke

Quan ly thong ke Xem thong ke ôextendằ

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

Hình 4.10 Hình Usecase Chỉnh sửa thông tin cá nhân

4.1.2.10.1 Usecase Update thông tin cá nhân

Tên usecase Chỉnh sửa thông tin cá nhân

Mô tả Xem và chỉnh sửa thông tin cá nhân của tài khoản

Chủ thể Admin, Khách hàng, Nhân viên

Màn hình hiển thị chi tiết thông tin cá nhân của tài khoản đó

Sau khi chỉnh sửa thông tin tài khoản, người dùng sẽ thấy một modal cập nhật Nhấn “update” để hoàn tất, hệ thống sẽ thông báo “bạn đã cập nhật thành công” Để thực hiện điều này, thiết bị cần có kết nối internet và người dùng phải đăng nhập vào tài khoản.

Kết quả Hiển thị thông tin chi tiết của tài khoản và update thành công tài khoản

Bảng 4.12 Usecase Update thông tin cá nhân uc Thong tin ca nhan

Chinh sua thong tin ca nhan Update thong tin ca nhan Admin

Hình 4.11 Hình Usecase Đăng xuất

Mô tả Đăng xuất khỏi tài khoản

Chủ thể Admin, Nhân viên, Khách hàng

Quay về màn hình trang chủ Điều kiện cần Thiết bị có kết nối internet, đăng nhập với account Nhân viên, Khách hàng hoặc Admin

Kết quả Người dùng thoát khỏi tài khoản đang đăng nhập

Bảng 4.13 Usecase Đăng xuất uc Dang xuat

4.1.2.12 Usecase Quên mật khẩu và Reset password

Hình 4.12 Hình Usecase Quên mật khẩu và Reset mật khẩu

Mô tả Khi người dùng quên mật khẩu, họ có thể reset lại mật khẩu mới

Khi người dùng quên mật khẩu, nhấn vào nút

Hiển thị màn hình quên mật khẩu, người dùng nhập email đã đăng ký tài khoản vào ô input, và nhấn

“Reset Password” được gửi trong email

Sau khi nhấn "Gửi", hệ thống sẽ gửi tin nhắn reset password đến email của người dùng Người dùng cần nhấn vào nút "Đặt lại mật khẩu" để được chuyển đến màn hình reset password.

Nhập password mới vào ô input và nhấn nút

Sau khi hiển thị màn hình “Reset Password”, người dùng sẽ nhập password mới vào ô input và nhấn vào nút “Send”, hệ thống sẽ thông uc Quen mat khau

Quen mat khau Reset passw ord ôextendằ

22 báo người dùng reset password thành công Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản Admin, Nhân viên, hoặc Khách hàng

Kết quả Reset password mới cho người dùng bằng email đăng ký

Bảng 4.14 Usecase Reset mật khẩu

Hình 4.13 Hình Usecase Đăng nhập

Mô tả Người dùng sử dụng tài khoản đã đăng ký để đăng nhập vào hệ thống

Hiển thị màn hình đăng nhập vào trang web

Nhập tài khoản đã đăng ký và click

Để đăng nhập vào hệ thống, người dùng cần nhập Email và Password, sau đó nhấn nút “Log In” Hệ thống sẽ thông báo khi việc đăng nhập thành công Lưu ý rằng điều kiện cần thiết là thiết bị phải có kết nối internet và người dùng phải đăng nhập bằng tài khoản Admin, Nhân viên hoặc Khách hàng.

Kết quả Đăng nhập thành công vào trang web

Bảng 4.15 Usecase Đăng nhập uc Dang nhap

Hình 4.14 Hình Usecase Xem giỏ hàng

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

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

Mô tả Thêm sản phẩm bất kì vào giỏ hàng

1 Chọn vào phần danh mục có nhãn hiệu mà người dùng muốn xem

Chuyển sang trang xem danh sách sản phẩm của nhãn hiệu dó

2 Chọn số lượng muốn thêm

Tăng hoặc giảm số lượng muốn thêm

Sản Phẩm được lưu vào giỏ hàng

“Cart” để xem những sản phẩm đã thêm cào

Hiển thị danh sách những sản phẩm được thêm vào giỏ hàng Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản Khách hàng

Kết quả Sản phẩm được thêm vào giỏ hàng

Bảng 4.16 Usecase Thêm vào giỏ hàng uc Gio hang

Them san pham v ao gio hang

Xoa san pham trong gio hang ôextendằ ôextendằ

4.1.2.14.2 Usecase Xóa sản phẩm khỏi giỏ hàng

Tên usecase Xóa khỏi giỏ hàng

Mô tả Xóa sản phẩm ra khỏi giỏ hàng

Chuyển sang trang xem giỏ hàng

Hiển thị modal thông báo “bạn có muốn xóa sản phẩm này không”, nhấn

“Delete” để xóa sản phẩm, hoặc nhấn

“Cancel” để hủy thao tác xóa Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản Khách hàng

Kết quả Xóa thành công sản phẩm khỏi giỏ hàng

Bảng 4.17 Usecase Xoá khỏi giỏ hàng

Hình 4.15 Hình Usecase Thanh toán

Mô tả Thanh toán sản phẩm đã mua bằng Paypal

Chọn phương thức thanh toán bằng Paypal

Chuyển đến trang web paypal để thanh toán sản phẩm Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản Khách hàng

Kết quả Thanh toán sản phẩm thành công

Bảng 4.18 Usecase Thanh toán uc Thanh toan

Hình 4.16 Hình Usecase Review sản phẩm

Mô tả Tạo review cho sản phẩm bất kì

Màn hình hiển thị modal tạo review sản phẩm, người dùng nhập nội dung review và đánh giá sao cho sản phẩm đó

2 Nhấn nút “Add” Sau khi điền nội dung review và đánh giá sao, người dùng sẽ nhấn nút

“Add” và hệ thống sẽ thông báo tạo review thành công Điều kiện cần Thiết bị có kết nối internet, đăng nhập với tài khoản Khách hàng

Kết quả Tạo review cho sản phẩm thành công

Bảng 4.19 Usecase Review sản phẩm

Mô tả Xóa review cá nhân

Chủ thể Khách hàng uc Rev iew

Cap nhap rev iew ôextendằ ôextendằ ôextendằ

Để xóa đánh giá của bản thân, bạn cần chọn phần review đã đánh giá và nhấn nút “Delete” Điều kiện cần thiết là bạn phải có thiết bị kết nối internet và đăng nhập vào tài khoản Khách hàng.

Kết quả Hệ thống sẽ thông báo khi xóa review thành công

Mô tả Chỉnh sửa lại review đã review trước đó

Màn hình hiển thị modal cho phép người dùng chỉnh sửa nội dung review và nhấn nút “update” để cập nhật lại review Để thực hiện điều này, thiết bị cần có kết nối internet và người dùng phải đăng nhập vào tài khoản Khách hàng.

Kết quả Cập nhập review thành công

4.1.2.17 Usecase Tìm kiếm sản phẩm

Hình 4.17 Hình Usecase Tìm kiếm sản phẩm

Tên usecase Tìm kiếm sản phẩm

Mô tả Tìm kiếm tên sản phẩm trong danh sách sản phẩm nào đó

Chủ thể Khách hàng uc Search

1 Nhập tên sản phẩm cần tìm

Màn hình sẽ hiển thị các sản phẩm có tên trùng khớp với từ khóa tìm kiếm Để thực hiện điều này, người dùng cần có thiết bị kết nối internet và đăng nhập vào tài khoản Khách hàng.

Kết quả Hiển thị danh sách sản phẩm mà người dùng cần tìm

Bảng 4.22 Usecase Tìm kiếm sản phẩm

Hình 4.18 Hình Usecase Đăng ký

Mô tả Người dùng đăng ký vào hệ thống

Hiển thị màn hình đăng ký vào trang web

2 Nhập thông tin tài khoản

Thiết kế chung

4.2.1 Mô tả các thành phần của ứng dụng

Hình 4.19 Hình mô tả các thành phần ứng dụng

4.2.2.1 Cách tổ chức thư mục/ package trong backend

Hình 4.20 Hình tổ chức thư mục/ package trong backend

Các controller chứa mã xử lý dữ liệu trên server, nhận dữ liệu từ client và tương ứng với từng API, sẽ gọi đến controller phù hợp Một controller có thể được tái sử dụng cho nhiều API khác nhau.

The /models directory contains essential files, including schemas and their functionalities, while the /views directory holds various HTML and CSS templates, such as email and payment templates.

/routes: thư mục chứa tất cả các định tuyến đã tạo bằng cách sử dụng Express

Router và kết hợp với controller

Thư mục /utils chứa các tiện ích thiết yếu được sử dụng nhiều trong các chức năng xử lý, chẳng hạn như hàm catchAsync để bắt lỗi của các hàm async/await.

/.gitignore: cấu hình những file không muốn đưa lên git

/config.env: file khai báo biến môi trường, ví dụ: đường dẫn đến database, tài khoản email,…

Thư mục /node_modules chứa tất cả các module cần thiết cho server, được khai báo trong file package.json Để chạy ứng dụng, cần sử dụng lệnh npm install để cài đặt và tạo thư mục node_modules Do thư mục này chiếm nhiều dung lượng bộ nhớ, nó thường được đưa vào file gitignore.

/package.json: File chứa tất cả các chi tiết npm của dự án, các lệnh chạy như scripts và các thành phần dependencies

/app.js: file này sẽ khai báo tất cả các package/module cần thiết cho chương trình /server.js: file khởi chạy server

4.2.2.2 Thư viện sử dụng trong backend

STT Tên thư viện Versio n License Mục đích

1 axios 0.24.0 MIT Dùng để gọi API

2 bcryptjs 2.4.3 MIT Dùng để mã hóa mật khẩu

3 compression 1.7.4 MIT Dùng như một middleware nén file để tối ưu hoá tốc độ request và response

4 cors 2.8.5 MIT Dùng để kích hoạt cors, cho phép chia sẻ tài nguyên giữa front-end và backend

5 dotenv 10.0.0 MIT Dùng để load các biến môi trường từ file env vào process.env

6 ejs 3.1.6 MIT Dùng để tạo file template

9 heroku 7.59.2 MIT Dùng để config các thông số liên quan đến Heroku trong terminal VSCode

10 html-to-text 8.1.0 MIT Dùng để chuyển HTML thành chuỗi

11 jsonwebtoken 8.5.1 MIT Dùng để sử dụng cho mục đích xác thực

12 paypal-rest-sdk 1.8.1 MIT Dùng để cấu hình và thiết lập thanh toán

13 mongoose 6.0.12 MIT Dùng để mô hình hóa đối tượng MongoDB, được thiết kế sử dụng cho môi trường bất đồng bộ

14 morgan 1.10.0 MIT Dùng để tạo ra các logger khi gọi request

15 ndb 1.1.5 MIT Dùng để debug trong quá trình lập trình

16 nodemailer 6.7.0 MIT Dùng để gửi mail trong Node

2.7.4 MIT Dùng để cấu hình SMTP cho mail trong NodeJS

18 nodemon 2.0.14 MIT Dùng để khởi động lại ứng dụng Node khi phát hiện có file thay đổi

19 pug 3.0.2 MIT Dùng để tạo file template

20 sharp 0.29.3 MIT Dùng để edit hình ảnh khi upload lên server

21 slugify 1.6.1 MIT Dùng để slugify một chuỗi

22 validator 13.7.0 MIT Dùng để validate chuỗi

Bảng 4.24 Bảng các library được sử dụng trong dự án backend

STT Tên thư viện Versio n License Mục đích

1 express 4.17.1 MIT Sử dụng framework để phát triển phía server

Bảng 4.25 Bảng các framework được sử dụng trong dự án backend

4.2.3.1 Cách tổ chức thư mục/package trong frontend

/build: Thư mục được tạo ra sau khi chạy lệnh npm run build

Thư mục /node_modules chứa các thư viện đã được cài đặt và sử dụng trong dự án, trong khi thư mục /public là nơi lưu trữ tệp index.html, favicon.ico và các tệp khác, đóng vai trò là thư mục gốc của ứng dụng.

Hình 4.21 Hình tổ chức thư mục/ package trong frontend

/src: Thư mục chứa tất cả source code của dự án

- /src/app: Thư mục chứa tệp store.js dùng để cấu hình store của redux cho dự án

- /src/routes: Thư mục chứa các tệp định tuyến cho dự án

- /src/App.js: Đây là component cha chứa tất cả các component con bên trong

- /src/services: Thư mục cấu hình Header Authorization và đọc dữ liệu từ token

- /src/images: Thư mục chứa hình ảnh và icon

- /src/App.css: Tệp này dùng để cấu hình css chung cho toàn trang web

- /src/components: Thư mục chứa các component chung cho dự án

gitignore: Cấu hình những thư mục, tệp để git bỏ qua khi commit

Tệp `/src/index.js` là điểm khởi đầu của ứng dụng, nơi webpack sẽ trỏ đến để tạo ra tệp bundle.js phục vụ cho việc chạy trên trình duyệt Trong khi đó, tệp `package-lock.json` mô tả chi tiết các thư viện trong tệp `package.json`, giúp ngăn ngừa xung đột phiên bản thư viện khi nhiều người cùng làm việc trên dự án.

README.MD: Tệp này dùng để mô tả về dự án trên Github

4.2.3.2 Thư viện sử dụng trong Frontend

STT Tên thư viện Versio n

Thư viện được sử dụng để xây dựng giao diện biểu đồ thống kê cho trang web

@testing- library/jest-dom 5.14.1 GNU GPL

Thư viện @testing-library/jest-dom cung cấp một bộ đối sánh tùy chỉnh cho Jest, giúp mở rộng khả năng kiểm thử Những đối sánh này giúp cải thiện trải nghiệm kiểm tra giao diện người dùng trong ứng dụng của bạn.

36 các bài kiểm tra của bạn dễ khai báo hơn, rõ ràng hơn để đọc và để duy trì

Là một giải pháp rất nhẹ để kiểm tra các thành phần React

Nó cung cấp các chức năng tiện ích nhẹ trên đầu trang react- domvà react-dom/test-utilstheo cách khuyến khích các phương pháp kiểm tra tốt hơn

4 testing-library/user- event 12.8.3 MIT

Dùng để mô phỏng các sự kiện thực sẽ xảy ra trong trình duyệt khi người dùng tương tác với nó

Dùng để sử dụng các UI component được thiết kế sẵn từ Ant design dành cho React

6 axios 0.24.0 MIT Dùng để gọi API từ server

7 cloudinary-react 1.7.0 MIT Dùng để hỗ trợ việc upload ảnh

Dùng để load các biến môi trường từ file env vào process.env

9 jwt-decode 3.1.2 MIT Dùng để đọc token

10 query-string 7.0.1 MIT Phân tích cú pháp và xâu chuỗi các chuỗi truy vấn URL

11 react 17.0.2 MIT Thư viện javascript để xây dựng giao diện người dùng

12 react-dom 17.0.2 MIT Dùng để kết nối phần tử React với DOM

13 react-modal 3.14.3 MIT Dùng để tạo ra UI component modal

14 react-moment 1.1.1 MIT Dùng để chuyển đổi, hiển thị thời gian theo chuỗi

15 react-router-dom 5.3.0 MIT Dùng để kết nối phần tử React với DOM

Dùng để khởi động các dự án mà không cần cấu hình

17 react-toastify 8.0.3 MIT Dùng để tạo thông báo cho trang web

18 web-vitals 11.2.7 MIT thư viện là một nhỏ (~ 1K), thư viện mô-đun để đo tất cả các Web Vitals số liệu về người sử dụng thật

Bảng 4.26 Bảng các library được sử dụng trong dự án frontend

4.2.4.1 Cách tổ chức thư mục/package trong flutter

Hình tổ chức thư mục/package trong mobile

- /assets: Chứa icon, image, audio và font sử dụng trong app

- /ios: Chứa code native IOS (swift)

- /android: Chứa code native android (java/kotlin)

- /lib: Chứa tất cả các thư mục code Flutter trong App

- /lib/bloc: Chứa cái folder quản lý Trạng thái, xử lý Bloc trong Flutter

- /lib/common: Chứa các widgets sử dụng chung trong toàn App

- /lib/config: Chứa các file.dart cố định, mặc định trong App

- /lib/constant: Chứa file.dart về màu sắc, thêm hình ảnh, icon,… vào App

- /lib/model: Chứa những file.dart về model

- /lib/data: Chứa những file.dart gọi API (responsitory)

- /lib/ui: Chứa những file.dart giao diện của App

- pubspec.yaml: Nơi quản lý thư viện, cấu hình App flutter

4.2.4.2 Thư viện sử dụng trong flutter

STT Tên thư viện Version License Mục đích

1.0.2 MIT Thư viện được sử dụng lấy icon cần thiết

2 flutter_phosphor_ic ons: 0.0.1+6 GNU

Thư viện được sử dụng lấy icon cần thiết

7.3.3 MIT Thư viện dùng sử dụng quản lý

4 hive 2.0.5 MIT Thư viện dùng lưu những tài khoản đã đăng nhập

5 intl 0.17.0 MIT Thư viện dùng để format lại ngày giờ,

MIT Thư viện dùng kiểm tra kết nối mạng thiết bị

MIT Thư viện dùng để kết nối với server

8 dio 14.0.1 MIT Thư viện get,post,patch,put,delete API

9 webview_flutter 2.0.12 MIT Thư viện dùng để xử dụng web trên App

10 sizer 2.0.15 MIT Thư viện dùng set Size cho toàn App

11 image_picker 0.8.4 MIT Thư viện dùng để lấy hình từ điện thoại

12 cached_network_im age 3.0.2 MIT Thư viện dùng để load hình ảnh từ url

13 pull_to_refresh 2.0.0 MIT Thư viện dùng refresh App

Bảng các library được sử dụng trong dự án Mobile

Thiết kế chi tiết

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

Hình 4.22 Hình lược đồ cơ sở dữ liệu

4.3.2 Thiết kế giao diện website

Hình 4.23 Màn hình chính của trang web khi người dùng truy cập hệ thống

STT Tên Kiểu Mô tả

1 Home Button Nút nhấn để điều hướng tới trang chủ

2 Category Button Nút nhấn để điều hướng tới trang các loại sản phẩm

3 Service Button Nút nhấn để điều hướng tới trang dịch vu website

4 Blog Button Nút nhấn để điều hướng tới blog của công ty

5 Contact Button Nút nhấn để điều hướng tới trang thông tin liên lạc

6 Register Button Nút nhấn để điều hướng tới trang đăng ký

7 Login Button Nút nhấn để điều hướng tới trang đăng nhập

Bảng 4.27 Bảng các thao tác ở màn hình trang chủ

Hình 4.24 Màn hình đăng nhập giúp khách hàng vào trang web để xem và mua các sản phẩm

1 Email InputText Nhập email của người dùng

2 Password InputText Nhập password của người dùng

Password Button Nút nhấn để điều hướng tới quên mật khẩu

4 Login Button Nút nhấn để đăng nhập

5 Create account Button Nút nhấn để điều hướng tới trang đăng ký

Bảng 4.28 Bảng các thao tác ở màn hình đăng nhập

Hình 4.25 Màn hình giúp khách hàng tạo tài khoản

1 UserName InputText Nhập tên của người dùng

3 Password InputText Nhập password của người dùng

Password InputText Nhập confirm password

5 Register Button Nút nhấn để đăng ký

6 Sign in ? Button Nút nhấn để điều hướng tới trang đăng nhập

Bảng 4.29 Bảng các thao tác ở màn hình đăng ký

4.3.2.4 Màn hình quên mật khẩu

Hình 4.26 Màn hình Quên mật khẩu

2 Send Email Button Nút nhấn để Send Email

Bảng 4.30 Bảng các thao tác ở màn hình quên mật khẩu

Hình 4.27 Màn hình tạo mật khẩu mới cho khách hàng

Password InputText Nhập new password

Password InputText Nhập confirm password

3 Login Button Nút nhấn để đăng nhập sau khi reset

Bảng 4.31 Bảng các thao tác ở màn hình Reset password

4.3.2.6 Màn hình quản lý của Admin

Hình 4.28 Màn hình có chức năng quản lý khách hàng, nhân viên, sản phẩm,… của admin

1 Tài khoản của tôi Label Truy cập các chức năng bên trong

2 Quản lý nhân viên Label Truy cập các chức năng bên trong

3 Quản lý khách hàng Label Truy cập các chức năng bên trong

4 Quản lý sản phẩm Label Truy cập các chức năng bên trong

5 Quản lý danh mục Label Truy cập các chức năng bên trong

6 Quản lý thống kê Label Truy cập các chức năng bên trong

7 Update Button Nút nhấn truy cập chức năng

Update thông tin tài khoản

Password Button Nút nhấn truy cập chức năng

9 Avatar Image Hình đại diện hiển thị cho user đó

Bảng 4.32 Bảng các thao tác ở màn hình quên mật khẩu

4.3.2.7 Màn hình chức năng quản lý nhân viên

Hình 4.29 Màn hình có các chức năng quản lý khách hàng, sản phẩm… của nhân viên

1 Quản lý nhân viên Label Truy cập các chức năng bên trong

3 Họ và tên Text Hiển thị tên của user

4 Email Text Hiển thị email của user

5 Phone Text Hiển thị số điện thoại của user

6 Delete Button Nút nhấn thực hiện thao tác xoá nhân viên khỏi hệ thống

4.3.2.8 Màn hình chức năng quản lý khách hàng

Hình 4.30 Màn hình quản lý tài khoản người dùng của admin

1 Quản lý khách hàng Label Truy cập các chức năng bên trong

3 Họ và tên Text Hiển thị tên của user

4 Email Text Hiển thị email của user

5 Phone Text Hiển thị số điện thoại của user

6 Block (chưa triển khai) Button

Nút nhấn thực hiện thao tác khoá tạm thời tài khoản khách hàng (chưa triển khai)

7 Delete Button Nút nhấn thực hiện thao tác xoá nhân viên khỏi hệ thống

Bảng 4.33 Bảng các thao tác ở màn hình quản lý người dùng của admin

4.3.2.9 Màn hình chức năng quản lý sản phẩm

Hình 4.31 Màn hình quản lý sản phẩm của admin

1 Quản lý sản phẩm Label Truy cập các chức năng bên trong

2 Loại Select Select 1 trong các loại sản phẩm

(Brand) Select Select 1 trong các loại danh mục

4 Hình sản phẩm Image Hình đại diện hiển thị cho sản phẩm đó

5 Tên sản phẩm Text Hiển thị tên của sản phẩm

6 Giá sản phẩm Text Hiển thị giá của sản phẩm

7 Delete Button Nút nhấn thực hiện thao tác xoá sản phẩm khỏi hệ thống

Bảng 4.34 Bảng các thao tác ở màn hình quản lý sản phẩm

4.3.2.10 Màn hình chức năng quản lý danh mục

Hình 4.32 Màn hình quản lý danh mục của admin

1 Quản lý danh mục Label Truy cập các chức năng bên trong

2 Tạo danh mục Button Nút nhấn hiện modal tạo danh mục

3 Danh mục Text Hiển thị tên danh mục

4 Số lượng Text Hiển thị số lượng sản phẩm có trong danh mục

5 Delete Button Nút nhấn thực hiện thao tác xoá danh mục khỏi hệ thống

Bảng 4.35 Bảng các thao tác ở màn hình quản lý danh mục

4.3.2.11 Màn hình chức năng quản lý thống kê

Hình 4.33 Màn hình thống kê doanh thu trong 1 năm

1 Quản lý thống kê Label Truy cập các chức năng bên trong

2 Users Label Hiển thị số lượng tất cả users là khách hàng bên trong hệ thống

3 Products Label Hiển thị số lượng tất cả products bên trong hệ thống

Chọn thời gian muốn thực hiện thao tác thống kê

Chọn năm muốn thực hiện thao tác thống kê

6 Chart Chart Hiển thị thống kê trên hệ thống bằng biểu đồ

Bảng 4.36 Bảng các thao tác ở màn hình thống kê

4.3.2.12 Màn hình chức năng quản lý nhãn hiệu

Hình 4.34 Màn hình có chức năng quản lý nhãn hiệu của nhân viên

1 Quản lý nhãn hiệu Label Truy cập các chức năng bên trong

2 Create brand Button Nút nhấn truy cập tính năng tạo danh mục

(Brand) Select Chọn danh mục mà muốn hiển thị sản phẩm bên trong danh mục đó

4 Tên brand Box Hiển thị tên brand và các sản phẩm bên trong brand

5 Delete Button Nút nhấn thực hiện thao tác xoá danh mục khỏi hệ thống

6 Phân trang Button Phân trang chức năng

Bảng 4.37 Bảng các thao tác ở màn hình quản lý nhãn hiệu

4.3.2.13 Màn hình chức năng quản lý đơn hàng

Hình 4.35 Màn hình theo dõi đơn hàng khách hàng của nhân viên

1 Quản lý đơn hàng Label Truy cập các chức năng bên trong

2 Trạng thái đơn hàng Tab Truy cập các thông tin theo tab đã chọn

3 Tên khách hàng Text Hiển thị tên khách hàng đã mua

4 Tổng tiền Text Hiển thị tổng tiền của đơn hàng

5 Ngày Text Hiển thị thông tin thời gian mua hàng

6 Tình trạng Text Hiển thị tình trạng giao hàng

7 Chi tiết Button Nút nhấn thực hiện thao tác xem chi tiết đơn hàng

8 Accept Button Nút nhấn thực hiện chức năng quản lý đơn hàng

Bảng 4.38 Bảng các thao tác ở màn hình quản lý đơn hàng

4.3.2.14 Màn hình chức năng xem danh sách sản phẩm

Hình 4.36 Màn hình xem danh sách sản phẩm (1)

1 Bàn phím Button Truy cập trang sản phẩm của bàn phím

2 Chuột Button Truy cập trang sản phẩm của chuột

3 Tai nghe Button Truy cập trang sản phẩm của tai nghe

4 Màn hình Button Truy cập trang sản phẩm của màn hình

Bảng 4.39 Bảng các thao tác ở màn hình xem danh sách sản phẩm (1)

Hình 4.37 Màn hình xem danh sách sản phẩm (2)

1 Màn hình Label Truy cập trang sản phẩm của màn hình

2 Danh mục Label Truy cập trang danh mục của màn hình

3 Tìm kiếm sản phẩm InputText Nhập tên sản phẩm muốn tìm

5 Xếp theo list Button Xếp sản phẩm theo list

6 Xếp theo grid Button Xếp sản phẩm theo lưới

7 Sắp xếp Button Sắp xếp sản phẩm theo cách user muốn

8 Phân trang Button Phân trang chức năng

Khách hàng có thể chọn danh mục sản phẩm và loại nhãn hiệu mong muốn trên màn hình xem danh sách sản phẩm Hệ thống sẽ tự động hiển thị danh sách các sản phẩm tương ứng với lựa chọn của khách hàng.

Ngoài ra, khách hàng có thể thực hiện tìm kiếm sản phẩm theo tên, hoặc lọc sản phẩm với mức giá từ lớn đến nhỏ

4.3.2.15 Màn hình chức năng xem chi tiết sản phẩm

Hình 4.38 Màn hình xem chi tiết sản phẩm

1 Giới thiệu Tab Xem giới thiệu sản phẩm

2 Thông số sản phẩm Tab Xem thông số sản phẩm

3 Tên sản phẩm Text Tên sản phẩm

4 Mô tả Text Mô tả của sản phẩm

5 Ratings Number Số ratings trung bình của sản phẩm

6 Số lượng Number Số lượng muốn cho vào giỏ hàng

7 Thêm vào giỏ hàng Button Nút nhấn thực hiện thao tác thêm vào giỏ hàng

8 Mua ngay Button Nút nhấn thực hiện thao tác mua ngay sản phẩm

Bảng 4.41 Bảng các thao tác ở màn hình xem chi tiết sản phẩm

Người dùng có thể chọn số lượng sản phẩm muốn mua và nhấn "Thêm vào giỏ hàng" để chuyển sản phẩm đó vào giỏ hàng Ngoài ra, nếu người dùng nhấn "Mua ngay", hệ thống sẽ tự động thêm sản phẩm vào giỏ hàng và chuyển khách hàng đến trang giỏ hàng.

4.3.2.16 Màn hình review sản phẩm

Hình 4.39 Màn hình review sản phẩm

1 Ratings Number Ratings trung bình của sản phẩm

2 Số nhận xét Number Số lượt nhận xét của sản phẩm

3 Tên khách hàng Text Tên khách nhận xét sản phẩm

4 Ngày nhận xét Text Ngày nhận xét của khách cho sản phẩm

5 Rating Number Số sao dành cho sản phẩm

6 Bình luận Text Bình luận dành cho sản phẩm

7 Add review Button Nút nhấn thực hiện thao tác nhận xét sản phẩm

Bảng 4.42 Bảng các thao tác ở màn hình xem review sản phẩm

Hình 4.40 Màn hình hiển thị giỏ hàng

2 Tên sản phẩm Text Tên sản phẩm

3 Giá Text Giá của sản phẩm

4 Số lượng Number Số lượng muốn cho vào giỏ hàng

5 Tổng tiền Text Tổng tiền của sản phẩm

(Delete) Button Xoá sản phẩm khỏi giỏ hàng

7 Họ và tên Text Họ tên người mua hàng

8 Thanh toán Button Thanh toán giỏ hàng bằng PayPal

Bảng 4.43 Bảng các thao tác ở màn hình xem giỏ hàng

Trong màn hình giỏ hàng, khách hàng có khả năng thêm hoặc giảm số lượng sản phẩm, cũng như xóa sản phẩm không mong muốn Họ có thể xem tổng giá tiền và nhấn nút “Thanh toán” để thực hiện giao dịch.

4.3.2.18 Màn hình theo dõi tình trạng đơn hàng (Khách hàng)

Hình 4.41 Màn hình hiển thị tình trạng đơn hàng bên khách hàng

1 Đơn mua Label Hiển thị các chức năng của Đơn mua

2 Tình trạng giao hàng Tab Chọn các tình trạng giao hàng muốn xem

3 Tên khách hàng Text Tên của khách hàng

4 Tổng tiền đơn hàng Text Tổng tiền của đơn hàng

5 Ngày Text Ngày mua hàng của khách hàng

6 Tình trạng Text Tình trạng giao hàng của đơn hàng hiện tại

(Xem) Button Nút nhấn thực hiện thao tác xem chi tiết đơn hàng

Bảng 4.44 Bảng các thao tác ở màn hình theo dõi đơn hàng

Màn hình hiển thị tình trạng đơn hàng đã thanh toán của người dùng, bao gồm các trạng thái như "chờ xác nhận", "Đang giao" và "Đã giao" Người dùng có thể nhấn vào nút xem chi tiết để kiểm tra các sản phẩm đã mua.

4.3.3 Thiết kế giao diện mobile

Người dùng khi nhấn vào sẽ đi vào trang chi tiết sản phẩm trên banner

2 Nút trang thông tin cá nhân button

Người dùng nhấn vào sẽ chuyển tới trang thông tin cá nhân

3 Nút lựa chọn danh mục button

Người dùng chọn danh mục để xem sản phẩm tương ứng

4 Card sản phẩm button Hiện ra thông tin các sản phẩm của danh mục đó

Hình 4.42.Màn hình trang chủ (mobile)

5 Tìm kiếm, lọc sản phẩm button

Người dùng có thể tìm kiếm sản phẩm bằng cách nhập tên hoặc lọc sản phẩm theo giá tiền

Bảng 4.45 Bảng các thao tác ở màn hình trang chủ (mobile)

1 Nút GetStarted button Người dùng ấn sẽ vào trang Login

2 Ô nhập email và password Text

Người dùng nhập đầy đủ email và password để đăng nhập

Người dùng nhấn vào để đăng nhập vào app

Bảng 4.46 Bảng các thao tác ở màn hình đăng nhập (mobile)

Hình 4.43 Màn hình đăng nhập (mobile)

Người dùng nhập thông tin Username, Email, Password, Confirm Password

2 Button Agree and continue Button

Người dùng nhấn sẽ tạo tài khoản thành công

Người dùng nhấn sẽ chuyển sang màn hình đăng nhập

Bảng 4.47 Bảng các thao tác ở màn hình đăng ký (mobile)

Hình 4.44 Màn hình đăng ký (mobile)

1 Ô nhập số điện thoại, địa chỉ giao hàng Edit Text

Người dùng nhập thông tin giao hàng gồm số điện thoại, địa chỉ nơi nhận

Người dùng có thể tăng,giảm số lượng và xóa sản phẩm mua

3 Mã khuyến mãi EditText, Button

Người dùng nhập mã và nhấn apply sẽ áp dụng voucher cho đơn hàng

4 Thanh toán giỏ hàng Button

Người dùng nhấn sẽ chuyển sang trang VNPAY để thanh toán giỏ hàng

Bảng 4.48 Bảng các thao tác ở màn hình giỏ hàng (mobile)

Hình 4.45 Màn hình giỏ hàng (mobile)

4.3.3.5 Màn hình danh mục sản phẩm

Hình 4.46 Màn hình danh mục category (mobile)

Người dùng nhấn sẽ chuyển sang trang giỏ hàng

Người dùng nhấn sẽ vào trang lọc sản phẩm theo danh mục đó

Bảng 4.49 Bảng các thao tác ở màn hình danh mục (mobile)

4.3.3.6 Màn hình lọc sản phẩm

Hình 4.47 Màn hình lọc sản phẩm (mobile)

1 EditText Tên Danh mục Button

Người dùng nhấn sẽ hiện Bottom Sheet list các danh mục người dùng chọn danh mục sẽ lọc sản phẩm của danh mục đó

Người dùng nhấn sẽ lọc sản phẩm theo tên nhãn hàng

Người dùng nhấn sẽ vào trang chi tiết sản phẩm

4 Button icon dấu cộng Button

Người dùng nhấn sẽ hiện dialog cân nhắc thêm vào giỏ hàng

Bảng 4.50 Bảng các thao tác ở màn hình lọc sản phẩm (mobile)

4.3.3.7 Màn hình thông tin cá nhân

Hình 4.48 Màn hình thông tin cá nhân (mobile)

1 Button Đăng xuất Button Người dùng nhấn sẽ đăng xuất tài khoản khỏi App

Người dùng nhấn sẽ vào trang chỉnh sửa thông tin cá nhân

3 Button chờ xác nhận, đang giao, đã giao Button

Người dùng nhấn sẽ vào trang quản lý đơn hàng của mình theo trạng thái người dùng bấm

4 Text Thông tin người dùng Button

Người dùng nhấn sẽ vào trang chỉnh sửa thông tin cá nhân

5 Text Thay đổi mật khẩu Button Người dùng nhấn sẽ vào trang thay đổi mật khẩu

6 Thông tin người dùng EditText

Người dùng nhập thông tin cá nhân cần chỉnh sửa vào mục mong muốn

Người dùng nhấn sẽ cập nhật lại thông tin người dùng

8 Button Cập nhật avatar Button

Người dùng nhấn sẽ truy cập vào kho ảnh để thay đổi avatar

Bảng 4.51 Bảng các thao tác ở màn hình thông tin cá nhân (mobile)

4.3.3.8 Màn hình chi tiết sản phẩm

Người dùng có thể coi số lượng review sản phẩm, số lượng rating cho sản phẩm

2 Nội dung sản phẩm Image, Text

Người dùng có thể xem thông tin sản phẩm

3 Button Thêm vào giỏ hàng Button

Người dùng nhấn sẽ hiện dialog hỏi người dùng có chắc muốn thêm sản phẩm vào giỏ hàng

Bảng 4.52 Bảng các thao tác ở màn hình chi tiết sản phẩm (mobile)

Hình 4.49 Màn hình chi tiết sản phẩm (mobile)

4.3.3.9 Màn hình đơn hàng của bạn

1 Trạng thái đơn hàng Text, Button

Người dùng nhấn sẽ lấy lên những đơn hàng theo trạng thái

2 Thẻ nội dung đơn hàng Widgets

Người dùng có thể xem thông tin đơn hàng

3 Button xem chi tiết Button

Người dùng nhấn sẽ vào trang chi tiết đơn hàng

4 Button tìm kiếm tên đơn hàng Button, EditText

Người dùng nhấn sẽ tìm kiếm đơn hàng theo tên đơn hàng

Bảng 4.53 Bảng các thao tác ở màn hình đơn hàng (mobile) Hình 4.50 Màn hình đơn hàng (mobile)

4.3.3.10 Màn hình đổi mật khẩu

1 Nhập mật khẩu hiện tại, mật khẩu mới EditText

Người dùng nhập mật khẩu mới muốn thay đổi

2 Button đổi mật khẩu Button

Người dùng nhấn sẽ thay đổi mật khẩu người dùng

Bảng 4.54 Bảng các thao tác ở màn hình đổi mật khẩu (mobile)

4.3.3.11 Màn hình đánh giá sản phẩm

Hình 4.51 Màn hình thay đổi mật khẩu (mobile)

Người dùng đánh giá sản phẩm qua số sao

Người dùng nhập đánh giá của mình về sản phẩm

3 Button Gửi Button Người dùng nhấn sẽ gửi đánh giá

Bảng 4.55 Bảng các thao tác ở màn hình đánh giá sản phẩm (mobile)

Hình 4.52 Màn hình đánh giá sản phẩm (mobile)

Thiết kế lược đồ tuần tự và lược đồ lớp

4.4.1.1 Lược đồ tuần tự chức năng đăng ký

Hình 4.53 Lược đồ tuần tự chức năng Đăng ký

4.4.1.2 Lược đồ tuần tự chức năng đăng nhập

Hình 4.54 Lược đồ tuần tự chức năng Đăng nhập

4.4.1.3 Lược đồ tuần tự chức năng xem sản phẩm

Hình 4.55 Lược đồ tuần tự chức năng Xem sản phẩm

4.4.1.4 Lược đồ tuần tự chức năng thêm sản phẩm

Hình 4.56 Lược đồ tuần tự chức năng Thêm sản phẩm

4.4.1.5 Lược đồ tuần tự chức năng sửa sản phẩm

Hình 4.57 Lược đồ tuần tự chức năng Sửa sản phẩm

4.4.1.6 Lược đồ tuần tự chức năng xóa sản phẩm

Hình 4.58 Lược đồ tuần tự chức năng Xoá sản phẩm

4.4.1.7 Lược đồ tuần tự chức năng thêm sản phẩm

Hình 4.59 Lược đồ tuần tự chức năng Thêm loại sản phẩm

4.4.1.8 Lược đồ tuần tự chức năng xóa loại sản phẩm

Hình 4.60 Lược đồ tuần tự chức năng Xoá loại sản phẩm

4.4.1.9 Lược đồ tuần tự chức năng mua hàng

Hình 4.61 Lược đồ tuần tự chức năng Mua hàng

4.4.1.10 Lược đồ tuần tự chức năng theo dõi đơn hàng

Hình 4.62 Lược đồ tuần tự chức năng Theo dõi đơn hàng

4.4.1.11 Lược đồ tuần tự chức năng quản lý đơn hàng

Hình 4.63 Lược đồ tuần tự chức năng Quản lý đơn hàng

4.4.2.1 Lược đồ lớp hệ thống Shop phụ kiện

Hình 4.64 Lược đồ lớp cho hệ thống Shop Phụ Kiện

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Cài đặt

 Mở Visual Studio Code Terminal để thực thi:

 Sử dụng các câu lệnh sau:

> git clone https://github.com/lehoan1810/Web_Ecommerce_MERN.git (tải source về máy)

> npm i (để cài đặt tất cả các thư viện)

 Mở source code, và tạo file môi trường env, và nhập đường dẫn api vào (nếu chưa có thì nhập http://localhost:5000)

 Sau khi hoàn thành xong, nhập câu lệnh để run:

> git clone https://github.com/lehoan1810/BE_Ecommerce.git (tải source về máy)

> npm i (để cài đặt tất cả các thư viện)

 Mở source code, và tạo file môi trường env, và nhập các thông tin vào file env

> git clone https://github.com/trungdang29122000/KLTN.git (tải source về máy)

Các testcases

Hình 5.1 Hình đăng ký thành công

Hình 5.2 Hình lỗi email đăng ký

5.2.1.3 Đăng ký thiếu thông tin

Hình 5.3 Hình đăng ký thiếu thông tin

5.2.1.4 Đăng ký mật khẩu dưới 8 ký tự

Hình 5.4 Hình đăng ký mật khẩu dưới 8 ký tự

5.2.1.5 Đăng ký với Xác nhận mật khẩu không trùng khớp

Hình 5.5 Hình đăng ký với xác nhận mật khẩu không khớp

Hình 5.6 Hình đăng nhập sai email

5.2.2.2 Mật khẩu đăng nhập sai

Hình 5.7 Hình đăng nhập sai mật khẩu

Hình 5.8 Hình đăng nhập thành công

5.2.3.1 Cập nhật thông tin cá nhân

Hình 5.9 Hình cập nhật thông tin cá nhân

Hình 5.10 Hình quên mật khẩu

5.2.4.1 Admin quản lý khách hàng

Hình 5.11 Hình admin quản lí khách hàng

Hình 5.12 Hình admin xoá khách hàng

5.2.4.3 Admin quản lý nhân viên

Hình 5.13 Hình admin quản lí nhân viên

5.2.4.4 Admin quản lý sản phẩm

Hình 5.14 Hình admin quản lí sản phẩm

Hình 5.15 Hình admin xoá sản phẩm

Hình 5.16 Hình admin lọc sản phẩm

5.2.4.7 Admin quản lý danh mục

Hình 5.17 Hình admin quản lí danh mục

Hình 5.18 Hình admin tạo danh mục

Hình 5.19 Hình admin xoá danh mục

Hình 5.20 Hình admin thống kê

5.2.5.1 Nhân viên quản lý khách hàng

Hình 5.21.Hình nhân viên quản lý khách hàng

5.2.5.2 Nhân viên tạo thương hiệu

Hình 5.22 Hình nhân viên tạo thương hiệu

5.2.5.3 Nhân viên liệt kê sản phẩm

Hình 5.23 Hình nhân viên liệt kê sản phẩm

5.2.5.4 Nhân viên cập nhật sản phẩm

Hình 5.24 Hình nhân viên cập nhật sản phẩm

5.2.5.5 Nhân viên tạo sản phẩm

Hình 5.25 Hình nhân viên tạo sản phẩm

5.2.5.6 Nhân viên tìm kiếm sản phẩm thành công

Hình 5.26 Hình nhân viên tìm kiếm sản phẩm thành công

5.2.5.7 Nhân viên quản lý đơn hàng

Hình 5.27 Hình nhân viên quản lý đơn hàng

5.2.5.8 Nhân viên chấp nhận đơn hàng đang xử lý

Hình 5.28 Hình nhân chấp nhận đơn đang xử lý

5.2.5.9 Nhân viên chấp nhận đơn hàng hoàn thành

Hình 5.29 Hình nhân viên chấp nhận đơn hoàn thành

5.2.5.10 Nhân viên xem chi tiết đơn hàng khách hàng

Hình 5.30 Hình nhân viên xem chi tiết đơn khách hàng

5.2.5.11 Nhân viên theo dõi đơn hàng khách hàng

Hình 5.31 Hình nhân viên theo dõi đơn khách hàng

5.2.5.12 Nhân viên xem chi tiết hoá đơn

Hình 5.32 Hình nhân viên xem chi tiết đơn khách hàng

5.2.6.1 Xem danh sách sản phẩm

Hình 5.33 Hình khách hàng xem danh sách sản phẩm

Hình 5.34 Hình khách hàng tìm kiếm sản phẩm

Hình 5.35 Hình khách hàng sắp xếp sản phẩm

Hình 5.36 Hình khách hàng thay đổi bố cục

Hình 5.37 Hình khách hàng phân trang sản phẩm

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

Hình 5.38 Hình khách hàng xem chi tiết sản phẩm

Hình 5.39 Hình khách hàng xem review sản phẩm

Hình 5.40 Hình khách hàng tạo review sản phẩm

Hình 5.41 Hình khách hàng xoá review sản phẩm

Hình 5.42 Hình khách hàng sửa review sản phẩm

Hình 5.43 Hình khách hàng thêm vào giỏ hàng

5.2.6.12 Xoá sản phẩm trong giỏ hàng

Hình 5.44 Hình khách hàng xoá sản phẩm trong giỏ hàng

Hình 5.45 Hình khách hàng thanh toán với PayPal

Hình 5.46 Hình khách hàng không thanh toán được

Tiêu đề	Xây Dựng Website Và Ứng Dụng Mobile Kinh Doanh Phụ Kiện Máy Tính
Tác giả	Lê Văn Hoàn, Đặng Quốc Trung
Người hướng dẫn	ThS. Nguyễn Trần Thi Văn
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	Khóa Luận Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp Hồ Chí Minh

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