2 Thành viên Là thành viên đã đăng ký tài khoản của hệ thống, kế thừa các chức năng của Khách, có quyền xem, tìm kiếm thông tin, liên hệ, đánh giá sản phẩm, mua hàng, phản hồi cho admin,
MỤC ĐÍCH VÀ Ý NGHĨA CỦA ĐỀ TÀI
Mục đích của đề tài
- Đáp ứng nhu cầu mua, tìm kiếm sản phẩm, xây dựng nên một môi trường mua sắm thuận tiện và trực quan, dễ dàng thao tác với nhiều đối tƣợng sử dụng
- Giúp khách hàng có cái nhìn chi tiết về sản phẩm, thông tin đặc tính của sản phẩm
- Rút ngắn khoảng cách giữa người mua và người bán
- Việc quản lý sản phẩm trở nên dễ dàng
- Sản phẩm được sắp xếp có hệ thống nên người mua dễ tìm kiếm sản phẩm
- Cải thiện tốc độ xử lý, tạo cảm nhận tốt cho người sử dụng
Ý nghĩa của đề tài
- Là một hệ thống cung cấp môi trường bán hàng, các thông tin sản phẩm đƣợc cập nhật theo định kỳ
Với sự bùng nổ của thương mại điện tử, người mua không cần phải trực tiếp đến cửa hàng để mua sắm Họ có thể thoải mái ngồi tại nhà, lướt web tìm kiếm sản phẩm ưng ý, đặt hàng trực tuyến và chỉ sau vài ngày sẽ nhận được hàng tùy theo vị trí địa lý.
- Người bán có thể dễ dàng quản lý được sản phẩm của mình, cũng như báo cáo thống kê doanh thu, tình hình kinh doanh
- Các sản phẩm đƣợc sắp xếp hợp lý, tìm kiếm dựa trên tên nhà cung cấp, tên sản phẩm, mô tả của sản phẩm Vì vậy người dùng sẽ có cái nhìn tổng quan về tất cả các sản phẩm hiện có
- Người dùng có thể xem chi tiết thông tin sản phẩm, nhà sản xuất
- Khi đã chọn được sản phẩm ưng ý, người dùng có thể nhấn nút đặt hàng để đặt mua sản phẩm đó
- Người dùng vẫn có thể quay trở lại trang sản phẩm để xem và chọn tiếp
- Tìm hiểu các công cụ hỗ trợ phân tích thiết thiết kế hệ thống hướng đối tƣợng,…
- Tìm hiểu về nền tảng Nodejs, Framework Hapijs, Reactjs, Reduxjs,…
- Quy trình nghiệp vụ bán hàng, khuyến mãi, giao hàng, phương thức thanh toán
- Về thời gian: từ 01/5/2021 đến 01/7/2021
+ Tìm hiểu về Framework Hapi.js cho Back end và Framework React-Redux cho Front end
+ Quy trình nghiệp vụ bán hàng hàng online
- Tìm hiểu các tài liệu liên quan (quy trình bán hàng online,….)
- Phân tích và lựa chọn giải pháp
- Tổng hợp các tài liệu liên quan đến xây dựng và phát triển phần mềm
- Góp ý của giảng viên hướng dẫn
6 KHẢO SÁT VÀ PHÂN TÍCH HỆ TH NG
- Đây là 1 website bán và giới thiệu sản phẩm của siêu thị điện tử đến người tiêu dùng với các chi tiết mặt hàng và giá cả chính xác Website có các chức năng sau:
Thứ nhất: Phần khách hàng:
Khách hàng là những người có nhu cầu mua sắm hàng hoá, họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này Vì thế, phải có các chức năng sau:
Hiển thị danh sách các mặt hàng của siêu thị để khách hàng có thể xem, lựa chọn và mua Có thể tìm kiếm, sắp xếp, lọc theo giá cả, nhà sản xuất của sản phẩm theo nhu cầu của khách hàng
Hiển thị danh sách các mặt hàng ƣa thích mà khách hàng đã lựa chọn để tiện cho việc mua sắm
Hiển thị đƣợc chi tiết về giá cả, nhà sản xuất, số lƣợng, các đánh giá của những người mua khác của 1 sản phẩm, các sản phẩm cùng loại trong trang chi tiết sản phẩm
Khách hàng xem các thông tin, tin tức mới, khuyến mãi ngay trên trang web
Sau khi khách hàng chọn và đặt hàng thì phải hiện lên đơn hàng và khách hàng có thể nhập thông tin mua hàng và xem hoá đơn mua hàng Khách hàng sẽ thực hiện thanh toán qua các phương thức như: Thanh toán trực tiếp khi nhận hàng, thanh toán qua cổng thanh toán PayPal,…
Thứ hai: Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiểm soát mọi hoạt động của hệ thống
Chức năng thêm, cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất,… đòi hỏi sự chính xác cao
Tiếp nhận, kiểm tra đơn đặt hàng của khách hàng Thông báo và thay đổi trạng thái của đơn hàng theo quá trình từ đặt hàng
xác nhận đơn hàng khách hàng thanh toán đang vận chuyển khách hàng đã nhận hàng
Thống kê, tính toán và báo cáo ( có thể xuất file excel ) theo ngày, khoảng thời gian
- Ngoài chức năng trên thì trang Web phải đƣợc thiết kế sao cho dễ hiểu, giao diện mang tính dễ dùng, đẹp mắt và làm sao cho khách hàng thấy đƣợc thông tin cần tìm, cung cấp các thông tin quảng cáo hấp dẫn, các tin tức khuyến mãi để thu hút khách hàng Điều quan trọng là phải đảm bảo an toàn tuyệt đối thông tin khách hàng trong quá trình đặt mua hàng qua mạng Đồng thời, trang Web phải luôn đổi mới, hấp dẫn
6.2 Thiết bị và phần mềm
- Máy tính có thể thiết kế đƣợc web
- Hệ quản trị CSDL NoSQL MongoDb
- Cài đặt frame work Hapi.js, các thƣ viện ReactJs, ReduxJs, Bootstrap,…
- Phần mềm code: Visual Studio Code
C ƢƠNG I: TỔNG QUAN VỀ MONGODB, REACTJS-
REDUXJS, FRAME WORK HAPI.JS VÀ RESTFULL API
MongoDB là một cơ sở dữ liệu NoSQL, sử dụng Collection (tập hợp) và Document (tài liệu) để lưu trữ dữ liệu, cung cấp hiệu suất cao, tính khả dụng mạnh mẽ và khả năng mở rộng đa dạng.
Khái niệm database là gì?
Database là một nơi chứa vật lý cho các Collection Mỗi Database lấy tập hợp các file riêng của nó trên hệ thống file Mỗi MongoDB Server có thể có nhiều cơ sở dữ liệu
Khái niệm Collection là gì?
Collection là một nhóm các Document trong MongoDB Nó tương đương như một bảng trong RDBMS Do đó, một Collection tồn tại bên trong một cơ sở dữ liệu duy nhất Các Collection không có ràng buộc Relationship nhƣ các hệ quản trị cơ sở dữ liệu khác nên việc truy xuất rất nhanh, chính vì thế mỗi collection có thể chứa nhiều thể loại khác nhau không giống nhƣ table trong hệ quản trị mysql là các field cố định Các Document bên trong một Collection có thể có nhiều trường khác nhau Đặc biệt, tất cả các Document trong một Collection là tương tự nhau hoặc với cùng mục đích liên quan
Khái niệm Document là gì?
Một Document trong MongoDB, có cấu trúc tương tự như kiểu dữ liệu JSON, là một tập hợp các cặp key-value Các Document có schema động, nghĩa là Document trong cùng một Collection không cần thiết phải có cùng một tập hợp các trường hoặc cấu trúc giống nhau, và các trường chung trong Document của một Collection có thể giữ các kiểu dữ liệu khác nhau
1.1.2 Ƣu điểm khi dùng MongoDb so với RDBMS
Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đó một Collection giữ các Document khác nhau Số trường, nội dung và kích cỡ của Document này có thể khác với Document khác
Cấu trúc của một đối tƣợng là rõ ràng
Không có các Join phức tạp
Khả năng truy vấn sâu hơn MongoDB hỗ trợ các truy vấn động trên các Document bởi sử dụng một ngôn ngữ truy vấn dựa trên Document mà mạnh mẽ nhƣ SQL
MongoDB dễ dàng để mở rộng
Việc chuyển đổi/ánh xạ của các đối tƣợng ứng dụng đến các đối tƣợng cơ sở dữ liệu là không cần thiết
Sử dụng bộ nhớ nội tại để lưu giữ phần công việc, giúp truy cập dữ liệu nhanh hơn
1.2.1 Framework Hapi.js là gì?
Hapi.js (còn đƣợc gọi là hapi) là một open-source framework dùng để xây dựng các ứng dụng web
Hapi.js đƣợc giới thiệu lần đầu bởi Eran Hammer vào năm 2011 tại Walmart trong nỗ lực xử lý lưu lượng truy cập vào mỗi khi “Ngày thứ Sáu đen tối” diễn ra
Việc sử dụng hapi phổ biến nhất là xây dựng các API service
Tƣ liệu tham khảo: Website https://hapi.dev/
1.2.1 Ƣu điểm khi dùng Framework Hapi.js
Được thừa hưởng những ưu điểm và thế mạnh của các framework khác
Có cộng đồng sử dụng nhiều
Tài liệu hướng dẫn rõ dàng, dễ học
Kết hợp sử dụng mô hình ORM rất đơn giản khi thao tác với CSDL
Các lệnh tương tác với cơ sở dữ liệu cực kỳ ngắn gọn và thân thiện
Giúp hỗ trợ việc xây dựng API rất tốt
Dễ dàng tích hợp các thƣ viện khác vào dự án, và đƣợc quản lý với npm
Phần định tuyến và phân quyền rất mạnh
1.2.2.1 Giới thiệu về mô hình MVC
KHẢO SÁT VÀ PHÂN TÍCH HỆ THỐNG
Các chức năng
- Đây là 1 website bán và giới thiệu sản phẩm của siêu thị điện tử đến người tiêu dùng với các chi tiết mặt hàng và giá cả chính xác Website có các chức năng sau:
Thứ nhất: Phần khách hàng:
Khách hàng là những người có nhu cầu mua sắm hàng hoá, họ sẽ tìm kiếm các mặt hàng cần thiết từ hệ thống và đặt mua các mặt hàng này Vì thế, phải có các chức năng sau:
Hiển thị danh sách các mặt hàng của siêu thị để khách hàng có thể xem, lựa chọn và mua Có thể tìm kiếm, sắp xếp, lọc theo giá cả, nhà sản xuất của sản phẩm theo nhu cầu của khách hàng
Hiển thị danh sách các mặt hàng ƣa thích mà khách hàng đã lựa chọn để tiện cho việc mua sắm
Trong trang chi tiết sản phẩm, khách hàng có thể dễ dàng nắm bắt thông tin quan trọng về giá cả, nhà sản xuất, số lượng sản phẩm còn lại Bên cạnh đó, trang còn cung cấp các đánh giá từ những người mua trước, giúp khách hàng tham khảo thêm thông tin về chất lượng sản phẩm Ngoài ra, trang còn hiển thị danh sách các sản phẩm cùng loại, giúp khách hàng dễ dàng so sánh và lựa chọn sản phẩm phù hợp nhất với nhu cầu của mình.
Khách hàng xem các thông tin, tin tức mới, khuyến mãi ngay trên trang web
Sau khi khách hàng chọn và đặt hàng thì phải hiện lên đơn hàng và khách hàng có thể nhập thông tin mua hàng và xem hoá đơn mua hàng Khách hàng sẽ thực hiện thanh toán qua các phương thức như: Thanh toán trực tiếp khi nhận hàng, thanh toán qua cổng thanh toán PayPal,…
Thứ hai: Dành cho người quản trị: Người làm chủ ứng dụng có quyền kiểm soát mọi hoạt động của hệ thống
Chức năng thêm, cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất,… đòi hỏi sự chính xác cao
Tiếp nhận, kiểm tra đơn đặt hàng của khách hàng Thông báo và thay đổi trạng thái của đơn hàng theo quá trình từ đặt hàng
xác nhận đơn hàng khách hàng thanh toán đang vận chuyển khách hàng đã nhận hàng
Thống kê, tính toán và báo cáo ( có thể xuất file excel ) theo ngày, khoảng thời gian
- Ngoài chức năng trên thì trang Web phải đƣợc thiết kế sao cho dễ hiểu, giao diện mang tính dễ dùng, đẹp mắt và làm sao cho khách hàng thấy đƣợc thông tin cần tìm, cung cấp các thông tin quảng cáo hấp dẫn, các tin tức khuyến mãi để thu hút khách hàng Điều quan trọng là phải đảm bảo an toàn tuyệt đối thông tin khách hàng trong quá trình đặt mua hàng qua mạng Đồng thời, trang Web phải luôn đổi mới, hấp dẫn.
Thiết bị và phần mềm
- Máy tính có thể thiết kế đƣợc web
- Hệ quản trị CSDL NoSQL MongoDb
- Cài đặt frame work Hapi.js, các thƣ viện ReactJs, ReduxJs, Bootstrap,…
- Phần mềm code: Visual Studio Code
TỔNG QUAN VỀ MONGODB, REACTJS-REDUXJS, FRAME
Tổng quan về MongoDb
MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng
Khái niệm database là gì?
A Database in MongoDB is a physical container for Collections Each Database possesses its own set of files on the file system Multiple databases can coexist within a single MongoDB Server.
Khái niệm Collection là gì?
Collection là một nhóm các Document trong MongoDB Nó tương đương như một bảng trong RDBMS Do đó, một Collection tồn tại bên trong một cơ sở dữ liệu duy nhất Các Collection không có ràng buộc Relationship nhƣ các hệ quản trị cơ sở dữ liệu khác nên việc truy xuất rất nhanh, chính vì thế mỗi collection có thể chứa nhiều thể loại khác nhau không giống nhƣ table trong hệ quản trị mysql là các field cố định Các Document bên trong một Collection có thể có nhiều trường khác nhau Đặc biệt, tất cả các Document trong một Collection là tương tự nhau hoặc với cùng mục đích liên quan
Khái niệm Document là gì?
Một Document trong MongoDB, có cấu trúc tương tự như kiểu dữ liệu JSON, là một tập hợp các cặp key-value Các Document có schema động, nghĩa là Document trong cùng một Collection không cần thiết phải có cùng một tập hợp các trường hoặc cấu trúc giống nhau, và các trường chung trong Document của một Collection có thể giữ các kiểu dữ liệu khác nhau
1.1.2 Ƣu điểm khi dùng MongoDb so với RDBMS
Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đó một Collection giữ các Document khác nhau Số trường, nội dung và kích cỡ của Document này có thể khác với Document khác
Cấu trúc của một đối tƣợng là rõ ràng
Không có các Join phức tạp
MongoDB hỗ trợ khả năng truy vấn sâu hơn bằng ngôn ngữ truy vấn dựa trên Document mạnh mẽ như SQL, cho phép bạn thực hiện các truy vấn động trên dữ liệu dạng Document một cách linh hoạt và hiệu quả.
MongoDB dễ dàng để mở rộng
Việc chuyển đổi/ánh xạ của các đối tƣợng ứng dụng đến các đối tƣợng cơ sở dữ liệu là không cần thiết
Sử dụng bộ nhớ nội tại để lưu giữ phần công việc, giúp truy cập dữ liệu nhanh hơn.
Framework Hapi.js
1.2.1 Framework Hapi.js là gì?
Hapi.js (còn đƣợc gọi là hapi) là một open-source framework dùng để xây dựng các ứng dụng web
Hapi.js đƣợc giới thiệu lần đầu bởi Eran Hammer vào năm 2011 tại Walmart trong nỗ lực xử lý lưu lượng truy cập vào mỗi khi “Ngày thứ Sáu đen tối” diễn ra
Việc sử dụng hapi phổ biến nhất là xây dựng các API service
Tƣ liệu tham khảo: Website https://hapi.dev/
1.2.1 Ƣu điểm khi dùng Framework Hapi.js
Được thừa hưởng những ưu điểm và thế mạnh của các framework khác
Có cộng đồng sử dụng nhiều
Tài liệu hướng dẫn rõ dàng, dễ học
Kết hợp sử dụng mô hình ORM rất đơn giản khi thao tác với CSDL
Các lệnh tương tác với cơ sở dữ liệu cực kỳ ngắn gọn và thân thiện
Giúp hỗ trợ việc xây dựng API rất tốt
Dễ dàng tích hợp các thƣ viện khác vào dự án, và đƣợc quản lý với npm
Phần định tuyến và phân quyền rất mạnh
1.2.2.1 Giới thiệu về mô hình MVC
Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm hay mô hình thiết kế đƣợc sử dụng trong kỹ thuật phần mềm Nó giúp cho các lập trình viên tách ứng dụng của họ ra 3 thành phần khác nhau Model, View và Controller Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác
1.2.2.2 Thành phần trong mô hình MVC
Model Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tƣợng mô tả dữ liệu nhƣ các lớp (class), hàm xử lý
View Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tƣợng GUI nhƣ textbox, image Hiểu một cách đơn giản, nó là tập hợp các form hoặc các file HTML
Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng Chẳng hạn thành phần này sẽ nhận yêu cầu từ URL và form để thao tác trực tiếp với Model
Hình 1.1 Mô hình MVC 1.2.2.3 Cơ chế hoạt động của MVC
Nhìn lại biểu đồ phía trên, ta thấy có mũi tên nét liền và những mũi tên nét đứt Những mũi tên nét đứt được hình thành trên quan điểm của người dùng mà không phải là của những nhà thiết kế phần mềm thực sự Do đó chúng ta chỉ quan tâm đến những mũi tên còn lại Đây là một cách đơn giản để mô tả lại luồng sự kiện đƣợc xử lý trong MVC:
User tương tác với View, bằng cách kích vào điều khiển, user gửi yêu cầu đi
Controller nhận và điều hướng chúng đến đúng phương thức xử lý ở Model
Model nhận thông tin và thực thi các yêu cầu
Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thị lại cho người dùng
1.2.2.4 Ưu điểm, nhược điểm của mô hình MVC
Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Do đƣợc chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì
Trong trường hợp dự án có quy mô nhỏ, việc áp dụng mô hình MVC có thể gây ra tình trạng cồng kềnh và tiêu tốn nhiều thời gian trong quá trình phát triển, do sự chậm trễ trong quá trình truyền tải dữ liệu giữa các thành phần.
Nền tảng thƣ viện trình bày trang Bootstrap
Bootstrap đƣợc phát triển bởi Twitter, một trang mạng xã hội nổi tiếng tương tự như Facebook Nó là nền tảng bao gồm các thư viện trình bày trang HTML 5, CSS và Javascript giúp cho việc phát triển giao diện web trong nhiều môi trường đa nền tảng một cách nhanh chóng và dễ dàng hơn
Tƣ liệu tham khảo: Website https://getbootstrap.com/
Website https://www.w3schools.com/jquery
Bootstrap tương thích với các trình duyệt hiện đại ngày nay như là: Google Chrome, Firefox, Internet Explorer Bootstrap có khả năng tùy biến giao diện người dùng cao và khả năng thích ứng với các kích thước màn hình thiết bị cao nhƣ: điện thoại thông minh, máy tính bảng, máy tính xách tay hay máy tính để bàn.
Thƣ viện React.js – Redux.js
1.4.1 Tổng quan về React.js – Redux.js
- React.js là một thƣ viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng, theo hướng Web single page application
- Tƣ liệu tham khảo: Website https://reactjs.org/docs/getting-started.html
- Redux.js là một thƣ viện Javascript giúp tạo ra giúp cho việc quản lý trạng thái của các thành phần trong React.js đƣợc tốt và dễ hơn
- Tƣ liệu tham khảo: Website https://redux.js.org/introduction/getting-started
1.4.2 Giới thiệu về React js và Redux js
- React.js đƣợc tạo ra bởi Jordan Walke, một kỹ sƣ phần mềm tại Facebook
Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML cho PHP) React lần đầu tiên đƣợc triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau
16 đó đƣợc triển khai cho Instagram.com năm 2012 Nó đƣợc mở mã nguồn (open- sourced) tại JSConf US tháng 5 năm 2013
- Redux.js được xây dựng dựa trên nền tảng tư tưởng của ngôn ngữ Elm và kiến trúc Flux do Facebook giới thiệu
Redux đƣợc xây dựng dựa trên 3 nguyên lý:
Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng đƣợc chứa trong một object tree nằm trong Store duy nhất
Trạng thái chỉ đƣợc phép đọc: Cách duy nhất để thay đổi State của ứng dụng là phát một Action (là 1 object mô tả những gì xảy ra)
Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State đƣợc biến đổi bởi Action chúng ta dùng các pure function gọi là Reducer
Hình 1.2 Cấu trúc của Redux
Tìm hiểu về Restful API
1.5.1 Tổng quan về Restful API
RESTful API là một tiêu chuẩn thiết kế API cho ứng dụng web, giúp quản lý tài nguyên dễ dàng.
Giao thức truyền siêu văn bản (HTTP) là giao thức gửi và nhận tài nguyên hệ thống, bao gồm văn bản, hình ảnh, âm thanh, video và dữ liệu động, trên web.
Hình 1.3 Cấu trúc Rest API
API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến nhƣ JSON hay XML
REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữ liệu
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các resource RESTful là một trong những kiểu thiết kế API đƣợc sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau
Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method (nhƣ GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản các resource RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API
1.5.2 Cách thức hoạt động của Restful API
Hình 1.4 Cấu trúc Restful API
REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng
GET (SELECT): Trả về một Resource hoặc một danh sách Resource
POST (CREATE): Tạo mới một Resource
PUT (UPDATE): Cập nhật thông tin cho Resource
DELETE (DELETE): Xoá một Resource
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa
Hiện tại đa số lập trình viên viết RESTful API giờ đây đều chọn JSON là format chính thức nhưng cũng có nhiều người chọn XML làm format, nói chung dùng thế nào cũng đƣợc miễn tiện và nhanh.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG WEBSITE
NHU CẦU DỰ ÁN
Chúng ta có thể thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt, hầu hết những nhà kinh doanh đều muốn làm thỏa mãn khách hàng một cách tốt nhất
So với kinh doanh truyền thống thì “Thương mại điện tử” sẽ tốn chi phí thấp hơn, hiệu quả đạt đƣợc cao hơn Hơn thế nữa, với lợi thế của công nghệ Internet hiện nay thì việc truyền tải thông tin về sản phẩm sẽ diễn ra một cách nhanh chóng, thuận tiện Kết hợp với bộ phận giao hàng tận nơi, thanh toán thông qua bưu điện hoặc ngân hàng, khách hàng có thể ở nhà mà vẫn nhận đƣợc sản phẩm mà mình ƣng ý
Nắm bắt được nhu cầu đó, em đã lên ý tưởng xây dựng một hệ thống cung cấp môi trường bán hàng đa nền tảng
Trong đồ án chuyên ngành này em chọn đề tài “Xây dựng website bán hàng trực tuyến dành cho siêu thị bằng ReactJs, NodeJs và MongoDb.”
MỤC TIÊU DỰ ÁN
Mục tiêu dự án là sử dụng công nghệ Restful API xây dựng hệ thống cung cấp môi trường bán hàng đa nền tảng, trở thành kênh giao dịch điện tử hiện đại, dễ truy cập với nhiều thông tin đa dạng, trung thực và kịp thời về những thông tin sản phẩm trên thị trường Hệ thống sẽ giúp cho người mua dễ dàng mua được sản phẩm ưng ý, thuận tiện, đồng thời giúp cho người bán dễ dàng quản lý được sản phẩm, báo cáo thống kê tình hình kinh doanh, nắm bắt được xu hướng của người tiêu dùng để lên kế hoạch kinh doanh phù hợp
Hệ thống được phát triển đa nền tảng giúp người dùng có thể dễ dàng truy cập ở bất cứ nơi đâu,
Sử dụng Restful API sẽ tách riêng biệt phần hệ thống và phần giao diện, giao tiếp với nhau qua api, từ đó giúp cho việc tái sử dụng, bảo trì và phát triển đƣợc tốt hơn…
PHÂN TÍCH YÊU CẦU HỆ THỐNG
Khách: o Mua hàng o Tìm kiếm o Đăng nhập o Đăng ký o Phục hồi mật khẩu o Quản lý giỏ hàng o Xem chi tiết sản phẩm
Thành viên: o Quản lý thông tin cá nhân o Xem lịch sử mua hàng o Phản hồi cho người bán o Đánh giá sản phẩm o Đăng xuất
Nhân viên: o Quản lý phản hồi o Quản lý đơn hàng
Admin: o Quản lý sản phẩm o Quản lý lọai hàng o Quản lý nhà cung cấp o Quản lý nhà sản xuất o Quản lý tài khoản o Quản lý hóa đơn nhập
21 o Quản lý khuyến mãi o Báo cáo o Quản lý đánh giá
2.3.2 Yêu cầu phi chức năng
Bảng 2.1: Đặc tả yêu cầu phi chức năng Đặc tính Yêu cầu
-Thời gian tải trang từ máy chủ là ít hơn 10 giây -Cho phép nhiều người cùng đăng nhập vào hệ thống
Cơ sở hạ tầng - Các dữ liệu được lưu trong các cơ sở dữ liệu và được sao lưu thường xuyên và được phục hồi khi cần
- Xác thực quyền: sử dụng tài khoản để đăng nhập vào hệ thống, gồm 3 loại: Quản trị viên, nhân viên, khách hàng Mỗi loại người dùng sẽ có một số quyền riêng
- Các dữ liệu về tài khoản được lưu trong cơ sở dữ liệu và được bảo mật
- Mật khẩu đƣợc mã hóa Bcrypt đảm bảo tính bảo mật thông tin Trình duyệt - Mọi trình duyệt
- Giao diện bắt mắt, dễ sử dụng, thân thiện với người dùng, định dạng đồng nhất
- Sử dụng đồng nhất màu sắc, font chữ
2.3.3 Yêu cầu nền tảng hệ thống
Phần cứng máy Server : Máy tính cá nhân với chip vi xử lý Intel core 2 duo, 2GB RAM
Hệ điều hành: Windows 2003 or Windows vista/7 trở lên
Môi trường: Internet và NET framework 2.0 trở lên
Hệ quản trị cơ sở dữ liệu MySQL
Phần cứng máy Client: Đa nền tảng, có thể máy tính cá nhân, thiết bị di động thông minh có hỗ trợ duyệt web, máy tính bảng
Trình duyệt: Đa trình duyệt nhƣ Microsoft Internet Explorer hoặc Mozilla
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
2.4.1.1 Tác nhân của hệ thống
Bảng 2.2: Bảng mô tả các tác nhân
STT Tên tác nhân Mô tả
1 Khách Người dùng chưa đăng ký có thể đăng kí, đăng nhập, tra cứu thông tin dịch vụ, mua hàng,
2 Thành viên Là thành viên đã đăng ký tài khoản của hệ thống, kế thừa các chức năng của Khách, có quyền xem, tìm kiếm thông tin, liên hệ, đánh giá sản phẩm, mua hàng, phản hồi cho admin,…
3 Nhân viên Là thành viên đƣợc admin cấp quyền nhân viên, kế thừa các chức năng của thành viên, quản lý đơn hàng, quản lý phản hồi,…
4 Admin Người quản trị của hệ thống, kế thừa các chức năng của
Nhân viên, đƣợc quyền quản lý các thông tin dịch vụ,tài khoản, thông tin liên quan đến sản phẩm, nhà cung cấp, nhà sản xuất, hóa đơn nhập, hóa đơn xuất,
2.4.1.2 Biểu đồ ca sử dụng (Use Case Diagram)
Hình 2.1: Biểu đồ Use case tổng quát - Khách
Hình 2.2: Biểu đồ Use case tổng quát - Thành viên
Hình 2.3: Biểu đồ Use case tổng quát - Nhân viên
Hình 2.4: Biểu đồ Use case tổng quát - Admin
Bảng 2.3: Biểu đồ Use Case tổng quát
Tác nhân Admin, Nhân viên, User, Khách
Mục đích Mô tả toàn bộ chức năng của từng đối tượng người dùng trong hệ thống
2.4.1.3 Biểu đồ đặc tả Use Case quản lý loại hàng
Hình 2.5: Biểu đồ Use Case quản lý loại hàng Bảng 2.4: Bảng đặc tả Use Case quản lý loại hàng
Tên Use Case Quản lý loại hàng
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách loại hàng Điều kiện trước Người dùng đã đăng nhập với quyền Admin
2.4.1.4 Biểu đồ đặc tả Use Case quản lý sản phẩm
Hình 2.6: Biểu đồ Use Case quản lý sản phẩm Bảng 2.5: Bảng đặc tả Use Case quản lý sản phẩm
Tên Use Case Quản lý sản phẩm
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách sản phẩm Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.5 Biểu đồ đặc tả Use Case quản lý nhà cung cấp
Hình 2.7: Biểu đồ Use Case quản lý nhà cung cấp
Bảng 2.6: Đặc tả Use Case nhà cung cấp
Tên Use Case Quản lý nhà cung cấp
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách thông tin nhà cung cấp Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.6 Biểu đồ đặc tả Use Case quản lý nhà sản xuất
Hình 2.8 Biểu đồ Use Case quản lý nhà sản xuất Bảng 2.7: Bảng đặc tả Use Case quản lý nhà sản xuất
Tên Use Case Quản lý nhà sản xuất
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách thông tin nhà sản xuất Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.7 Biểu đồ đặc tả Use Case Báo cáo
Bảng 2.8: Bảng đặc tả Use Case báo cáo
Tên Use Case Báo cáo thống kê
Mô tả Người dùng có thể :
-Báo cáo doanh thu theo tháng, quý, năm
-Báo cáo tình hình kinh doanh Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.8 Biểu đồ đặc tả Use Case quản lý tài khoản
Hình 2.9: Biểu đồ Use Case quản lý tài khoản Bảng 2.9: Bảng đặc tả Use Case quản lý tài khoản
Tên Use Case Quản lý tài khoản
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách thông tin tài khoản Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.9 Biểu đồ đặc tả Use Case quản lý hóa đơn nhập
Hình 2.10: Biểu đồ Use Case quản lý hóa đơn nhập Bảng 2.10: Bảng đặc tả Use quản lý hóa đơn nhập
Tên Use Case Quản lý hóa đơn nhập
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách thông tin hóa đơn nhập Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.10 Biểu đồ đặc tả Use Case quản lý khuyến mãi
Hình 2.11: Biểu đồ Use Case quản lý khuyến mãi
Bảng 2.11: Bảng đặc tả Use Case quản lý khuyến mãi
Tên Use Case Quản lý khuyến mãi
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách thông tin khuyến mãi Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.11 Biểu đồ đặc tả Use Case quản lý đơn hàng
Hình 2.12: Biểu đồ Use Case quản lý đơn hàng Bảng 2.12: Bảng đặc tả Use Case quản lý đơn hàng
Tên Use Case Quản lý đơn hàng
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách thông tin đơn hàng Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.12 Biểu đồ đặc tả Use Case quản lý phản hồi
Hình 2.13: Biểu đồ Use Case quản lý phản hồi Bảng 2.13: Bảng đặc tả Use Case quản lý phản hồi
Tên Use Case Quản lý phản hồi
Mô tả Người dùng có thể Trả lời phản hồi Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Admin
2.4.1.13 Biểu đồ đặc tả Use Case quản lý thông tin cá nhân
Hình 2.14: Biểu đồ Use Case quản lý thông tin cá nhân
Bảng 2.14: Bảng đặc tả Use Case thông tin cá nhân
Tên Use Case Quản lý thông tin cá nhân
Mô tả Người dùng có thể cập nhật thông tin cá nhân Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Thành viên
2.4.1.14 Biểu đồ đặc tả Use Case Xem lịch sử mua hàng
Bảng 2.15:Đặc tả Use Case xem lịch sử mua hàng
Tên Use Case Xem lịch sử mua hàng
Mô tả Người dùng có thể theo dõi các đơn hàng đã đặt Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Thành viên
2.4.1.15 Biểu đồ đặc tả Use Case phản hồi cho người bán
Hình 2.15: Biểu đồ Use Case phản hồi cho người bán Bảng 2.16: Đặc tả Use Case phản hồi cho người bán
Tên Use Case Phản hồi cho người bán
Mô tả Người dùng có thể gửi phản hồi cho hệ thống Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Thành viên
2.4.1.16 Biểu đồ đặc tả Use Case tìm kiếm
Hình 2.16: Biểu đồ Use Case tìm kiếm
Bảng 2.17: Bảng đặc tả Use Case tìm kiếm
Tên Use Case Tìm kiếm
Mô tả Người dùng có thể tìm kiếm theo tên sản phẩm / loại sản phẩm / nhà sản xuất Điều kiện trước Không có
2.4.1.17 Biểu đồ đặc tả Use Case đánh giá sản phẩm
Bảng 2.18: đặc tả Use Case đánh giá sản phẩm
Tên Use Case Đánh giá sản phẩm
Mô tả Người dùng có thể đánh giá sản phẩm sau khi mua hàng Điều kiện trước Người dùng đã đăng nhập hệ thống với quyền Thành viên
2.4.1.18 Biểu đồ đặc tả Use Case xem chi tiết sản phẩm
Bảng 2.19: Đặc tả Use Case xem chi tiết sản phẩm
Tên Use Case Xem chi tiết sản phẩm
Mô tả Người dùng có thể xem thông tin chi tiết sản phẩm Điều kiện trước Không có
2.4.1.19 Biểu đồ đặc tả Use Case quản lý giỏ hàng
Hình 2.17: Biểu đồ Use Case quản lý giỏ hàng Bảng 2.20: Bảng đặc tả Use Case giỏ hàng
Tên Use Case Quản lý giỏ hàng
Mô tả Người dùng có thể thêm, xóa, sửa, xem danh sách các mặt hàng trong giỏ hàng Điều kiện trước Không có
2.4.1.20 Biểu đồ đặc tả Use Case mua hàng
Hình 2.18: Biểu đồ Use Case mua hàng Bảng 2.21: Bảng đặc tả Use Case mua hàng
Tên Use Case Mua hàng
Mô tả Người dùng có thể mua hàng sau khi bổ sung thông tin giao hàng và chọn phương thức thanh toán Điều kiện trước Không có
2.4.1.21 Biểu đồ đặc tả Use Case đăng ký
Bảng 2.22: Đặc tả Use Case đăng ký
Tên Use Case Đăng ký
Mô tả Người dùng có thể đăng ký tài khoản Điều kiện trước Không có
1 Người dùng nhập thông tin đăng ký
2 Hệ thống kiểm tra thông tin vừa nhập, nếu sai sẽ thông báo thông tin không hợp lệ, quay lại bước 1
3 Hệ thông kiểm tra email có tồn tại trong CSDL
Nếu có quay về bước 1
4 Hệ thống lưu thông tin đăng ký và hiển thị thông báo đăng ký thành công
2.4.1.22 Biểu đồ đặc tả Use Case đăng nhập
Bảng 2.23: Đặc tả Use Case nhà sản xuất
Tên Use Case Đăng nhập
Mô tả Người dùng có thể đăng nhập vào hệ thống thông qua tài khoản đã đăng ký Điều kiện trước Người dùng đã đăng ký tài khoản
1 Người dùng nhập thông tin đăng nhập
2 Hệ thống kiểm tra thông tin vừa nhập, nếu sai sẽ thông báo thông tin không hợp lệ, quay lại bước 1 3.1 Hệ thống kiểm tra đăng nhập trong CSDL Nếu sai quay về bước 1
3.2 Hệ thống thông báo đăng nhập thành công
2.4.1.23 Biểu đồ đặc tả Use Case phục hồi mật khẩu
Bảng 2.24: Đặc tả Use Case phục hồi mật khẩu
Tên Use Case Phục hồi mật khẩu
Mô tả Người dùng có thể phục hồi mật khẩu Điều kiện trước Không có
1 Người dùng nhập email cần phục hồi mật khẩu
2 Hệ thống kiểm tra thông tin vừa nhập, nếu sai sẽ thông báo thông tin không hợp lệ, quay lại bước 1
3 Hệ thống kiểm tra email có tồn tại trong CSDL Nếu không có quay về bước 1
4 Hệ thống lưu thông tin phục hồi thông báo đã gửi đường dẫn phục hồi mật khẩu vào email
2.4.2.1 Biểu đồ tuần tự Đăng ký
Hình 2.19: Biểu đồ tuần tự đăng ký 2.4.2.2 Biểu đồ tuần tự Đăng nhập
Hình 2.20: Biểu đồ tuần tự đăng nhập 2.4.2.3 Biểu đồ tuần tự sửa thông tin cá nhân
Hình 2.21: Biểu đồ tuần tự sửa thông tin cá nhân
2.4.2.4 Biểu đồ tuần tự Tìm kiếm
Hình 2.22: Biểu đồ tuần tự tìm kiếm 2.4.2.5 Biểu đồ tuần tự Thêm vào giỏ hàng
Hình 2.23: Biểu đồ tuần tự thêm giỏ hàng
2.4.2.6 Biểu đồ tuần tự Thêm sản phẩm
Hình 2.24: Biểu đồ tuần thêm sản phẩm 2.4.2.7 Biểu đồ tuần tự Sửa sản phẩm
Hình 2.25: Biểu đồ tuần tự sửa sản phẩm
2.4.2.8 Biểu đồ tuần tự Phục hồi mật khẩu
Hình 2.26: Biểu đồ tuần tự phục hồi mật khẩu
Hình 2.27: Biểu đồ tuần tự đổi mật khẩu
2.4.3.1 Biểu đồ hoạt động Thêm sản phẩm
Hình 2.28: Biểu đồ hoạt động thêm sản phẩm 2.4.3.2 Biểu đồ hoạt động Sửa sản phẩm
Hình 2.29: Biểu đồ hoạt động sửa sản phẩm
2.4.3.3 Biểu đồ hoạt động Xóa sản phẩm
Hình 2.30: Biểu đồ hoạt động xóa sản phẩm 2.4.3.4 Biểu đồ hoạt động Sửa thông tin cá nhân
Hình 2.31: Biểu đồ hoạt động sửa thông tin cá nhân
2.4.3.5 Biểu đồ hoạt động Thêm vào giỏ hàng
Hình 2.32: Biểu đồ hoạt động thêm giỏ hàng 2.4.3.1 Biểu đồ hoạt động Mua hàng
Hình 2.33: Biểu đồ hoạt động mua hàng
2.4.3.2 Biểu đồ hoạt động Đăng ký
Hình 2.34: Biểu đồ hoạt động đăng ký 2.4.3.3 Biểu đồ hoạt động Đăng nhập
Hình 2.35: Biểu đồ hoạt động đăng nhập 2.4.3.4 Biểu đồ hoạt động Phục hồi mật khẩu
Hình 2.36: Biểu đồ hoạt động phục hồi mật khẩu 2.4.3.5 Biểu đồ hoạt động đổi mật khẩu
Hình 2.37: Biểu đồ hoạt động đổi mật khẩu
2.4.4 Thiết kế cơ sở dữ liệu
2.4.4.1 Mô hình quan hệ thực thể
2.4.4.2 Chi tiết bản ảng 2.25 Table Role
Field Type Null Key Default Extra id bigint(20) unsigned
NO Primary NULL auto_increment nameRole varchar(255) NO description varchar(255) YES NULL isActive boolean NO TRUE
Field Type Null Key Default Extra id bigint(20) unsigned
NO Primary auto_increment address varchar(255) YES NULL name varchar(255) NO email varchar(255) NO Unique password varchar(255) NO avatar varchar(255) YES NULL phone varchar(18) YES NULL isActive boolean NO TRUE isVerifyEmail boolean NO FALSE resetPassword
Expire varchar(255) YES NULL rememberPass wordToken varchar(255) YES NULL roleId integer NO Foreign createdAt timestamp NO updatedAt timestamp NO
Field Type Null Key Default Extra id bigint(20) unsigned NO Primary auto_increment nameCategory varchar(255) NO image varchar(255) YES NULL isActive boolean NO TRUE description varchar(255) YES NULL createdAt timestamp NO updatedAt timestamp NO ảng 2.28 Table Product
Field Type Null Key Default Extra id bigint(20) unsigned
NO Primary NULL auto_increment nameProduct varchar(255) NO image varchar(255) YES NULL price double NO 0 description text YES NULL numberAvailable integer YES 0 properties jsonb YES NULL isActive boolean NO TRUE categoryId integer NO Foreign producerId integer NO Foreign createdAt timestamp NO updatedAt timestamp NO
Field Type Null Key Default Extra id bigint(20) unsigned
NO Primary auto_increment nameDiscount varchar(255) NO trigger varchar(255) NO code varchar(255) NO totalToReach double YES 0 type varchar(255) YES NULL rate float YES 0 amount double YES 0 maxNumberOfUsages integer YES 0 numberOfUsages integer YES 0 shippingCost integer YES 0 startTime timestamp YES NULL endTime timestamp YES NULL isActive boolean NO TRUE productId integer NO Foreign createdAt timestamp NO updatedAt timestamp NO
Field Type Null Key Default Extra id bigint(20) unsigned NO Primary NULL auto_increment userId integer NO Foreign productId integer NO Foreign ảng 2.31 Table Rating
Field Type Null Key Default Extra id bigint(20) unsigned NO Primary NULL auto_increment content text YES NULL userId integer NO Foreign point integer NO 0 productId integer NO createdAt timestamp NO updatedAt timestamp NO
Field Type Null Key Default Extra id bigint(20) unsigned
The table structure of the Order model includes essential fields such as fullName, address, phone, and status It also tracks payment-related information, including isPaymentOnline, isPaid, paypalCode, and total amounts (shippingTotal, itemAmount, promoTotal, totalAmount) Additionally, it maintains meta information like userId, createdAt, and updatedAt.
- **id:** Big integer, primary key, auto-incremented.- **quantity:** String with a maximum length of 255 characters.- **price:** Double-precision floating-point number.- **orderId:** Integer, foreign key referencing the "Order" table.- **productId:** Integer, foreign key referencing the "Product" table.- **nameProduct:** String with a maximum length of 255 characters, allows null values.- **createdAt:** Timestamp, records the creation time.- **updatedAt:** Timestamp, records the last update time.
Field Type Null Key Default Extra id bigint(20) unsigned
NO Primary auto_increment title varchar(255) NO content text NO note varchar(255) YES NULL userId integer NO Foreign isActive boolean NO TRUE createdAt timestamp NO updatedAt timestamp NO
Field Type Null Key Default Extra id bigint(20) unsigned NO Primary auto_increment name varchar(255) NO address varchar(255) NO description text YES NULL categoryId integer NO Foreign isActive boolean NO TRUE ảng 2.12 Table Product Image
Field Type Null Key Default Extra id bigint(20) unsigned NO Primary NULL auto_increment url varchar(255) YES NULL description text YES NULL isActive boolean NO TRUE productId integer NO Foreign ảng 2.13 Table Contact
XÂY DỰNG CHƯƠNG TRÌNH THỬ NGHIỆM
Giao diện trang quản trị
3.1.1 Giao diện trang chủ trang quản trị
Hình 3.2: Giao diện bảng điều khiển
Mô tả: Giao diện gồm rất nhiều thông tin đã đƣợc thu thập và tổng hợp từ nhiều nguồn dữ liệu khác nhau của website, có chức năng phân tích về hoạt động kinh doanh, sản xuất của doanh nghiệp Cụ thể về năng xuất, lƣợng tiêu thụ các sản phẩm của công ty Thu thập và tổng hợp các chỉ số đánh giá công việc (KPI)
3.1.2 Giao diện trang phân quyền
Hình 3.1: Giao diện phân quyền
Mô tả: Giao diện có chức năng phân quyền cho người sử dụng Cấp quyền sử dụng các chức năng khác nhau cho các admin, staff, user…
3.1.3 Giao diện trang quản lí hóa đơn
Hình 3.3: Giao diện quản lí hóa đơn
Mô tả: Giao diện có chức năng quản lý các đơn hàng của người dung, admin có thể tuỳ chỉnh trạng thái của các đơn hàng và thông báo cho người mua, có thể xuất file excel giúp việc quản lý dễ dàng hơn
3.1.4 Giao diện trang quản lí thể loại sản phẩm
Hình 3.4: Giao diện thể loại sản phẩm
Mô tả: Giao diện có chức năng thêm sửa xoá các thể loại sản phẩm, mô tả và cho phép hiển thị ra giao diện của người dung và xuất file excel
3.1.5 Giao diện quản lí các nhà sản xuất
Hình 3.5: Giao diện quản lí nhà sản xuất
Mô tả: Giao diện có chức năng quản lý, thêm sửa xoá thông tin của các nhãn hàng, nhà sản xuất và các loại mặt hàng
3.1.6 Giao diện quản lí sản phẩm
Hình 3.6: Giao diện quản lí sản phẩm
Mô tả: Giao diện có chức năng quản lý, thêm sửa xoá các sản phẩm, thông tin về sản phẩm
3.1.7 Giao diện trang lưu đánh giá các sản phẩm
Hình 3.7: Giao diện quản lí đánh giá sản phẩm
Mô tả: Giao diện có chức năng quản lý các đánh giá của người dùng về các sản phẩm
3.1.8 Giao diện trang hỗ trợ khách hàng
Hình 3.8: Giao diện quản lí các phản ánh của người dùng
Mô tả: Giao diện có chức năng quản lý các phản ánh của người dùng về sản phẩm.
Giao diện trang chủ
Hình 3.9: Giao diện trang chủ
Mô tả: Hiển thị menu, các sản phẩm hot, khuyến mãi, voucher, giỏ hàng, danh sách ƣa thích, các sản phẩm mới…
3.2.2 Giao diện trang chi tiết sản phẩm
Hình 3.10: Giao diện chi tiết sản phẩm
Mô tả: Hiển thị các thông tin chi tiết về sản phẩm, đánh giá của người mua và các sản phẩm tương tự cùng loại
3.2.3 Giao diện trang phân loại sản phẩm
Hình 3.11: Giao diện loại sản phẩm
Mô tả: Phân loại các sản phẩm theo từng loại mặt hàng, theo từng hãng sản xuất, theo giá giúp người dùng dễ dàng lựa chọn và tìm kiếm mặt hàng mình cần
3.2.4 Giao diện trang tất cả sản phẩm
Hình 3.12: Giao diện trang sản phẩm
Mô tả: Hiển thị đầy đủ tất cả các sản phẩm hiện có
3.2.5 Giao diện trang thông tin
Hình 3.13: Giao diện trang thông tin
Mô tả: Hiển thị thông tin về siêu thị, các thông số về trang web, người phát triển trang web
3.2.6 Giao diện trang liên hệ - hỗ trợ
Hình 3.14: Giao diện trang liên hệ
Giao diện cung cấp khả năng ghi lại phản ánh, yêu cầu liên hệ của người dùng Ngoài ra, giao diện còn đưa ra thông tin liên quan đến siêu thị cùng số đường dây nóng để người dùng dễ dàng liên lạc.
Hình 3.10: Giao diện giỏ hàng
Mô tả: Hiển thị các đơn hàng đã đƣợc cho vào giỏ, tính tổng số tiền phải chi trả Người dùng có thể điều chỉnh số lượng mặt hàng, nhập mã giảm giá và yêu cầu đặt hàng, thanh toán
Hình 3.11: Giao diện thanh toán
Mô tả: Bước 1, người dùng điền địa chỉ, họ tên, số điện thoại và yêu cầu khi giao hàng
Hình 3.12: Giao diện thanh toán (tiếp theo)
Mô tả: Bước 2, giao diện hiển thị các sản phẩm người dùng đặt mua, tổng số tiền phải trả và người dùng có thể lựa chọn thanh toán kh giao hàng hoặc thanh toán qua PayPal
Hình 3.13: Giao diện thanh toán sử dụng cổng thanh toán Paypal
Mô tả: cổng thanh toán PayPal dành cho người dùng thanh toán trực tuyến.
THỰC NGHIỆM VÀ ĐÁNH GIÁ
Môi trường thử nghiệm
Thử nghiệm trang web trên localhost của server window phiên bản máy tính
Ngôn ngữ lập trình sử dụng NodeJs và ReactJs
Trước hết, ta cần cài đặt và chạy môi trường NodeJs Tham khảo cách cài đặt tại: Node.js Tutorial: Phần 1 - Giới thiệu và cài đặt ứng dụng đầu tiên (viblo.asia)
Sau đó, ta có thể vào Command Prompt để kiểm tra version của NodeJs sau khi cài đặt thành công bằng câu lệnh: node -v
Hình 4.1: Kiểm tra version của NodeJs
Tiếp theo là kiểm tra NPM - Công cụ quản lý package của NodeJS: npm -v
Sau khi chạy xong, ta vào Visual Studio Code chạy lệnh “npm start” ở phần Terminal để khởi động website
Môi trường ảo đã khởi động thành công và website có địa chỉ “ http://192.168.0.103:3001/ ”
Chức năng giỏ hàng
Dựa vào kết quả thực nghiệm, cho thấy tốc độ tải trang, chức năng xử lý mua bán sản phẩm, thêm bớt sản phẩm trong giỏ hàng đều hoạt động ổn định
Hình 4.1: Giao diện giỏ hàng
Chức năng hiển thị sản phẩm
Kết quả thực nghiệm cho thấy tốc độ hiển thị sản phẩm nhanh, không có dấu hiệu lỗi ảnh
Hình ảnh 4.2: Giao diện trang sản phẩm
Chức năng thêm và sửa thông tin sản phẩm
Qua kết quả thực nghiệm, không có dấu hiệu bị lỗi, chức năng hoạt động ổn định
Hình 4.3: Giao diện chức năng thêm sản phẩm
Sau khi thêm sản phẩm thành công, ta có thể dễ dàng nhìn thấy sản phẩm đã đƣợc hiển thị trên danh sách tất cả các sản phẩm
Hình 4.4: Thông báo thêm sản phẩm thành công
Hình 4.5: Giao diện danh sách sản phẩm
Chức năng sửa thông tin sản phẩm hoạt động ổn định, đã sửa đƣợc thông tin của sản phẩm và lưu lại trên CSDL
Hình 4.6: Giao diện sửa thông tin sản phẩm
Ta thay đổi giá, số lƣợng , ảnh và mô tả sản phẩm
Hình 4.7: Giao diện đã sửa thông tin sản phẩm
Thông báo sửa thông tin sản phẩm thành công và hiển thị danh sách sản phẩm
Hình 4.8: Giao diện danh sách sản phẩm sau khi sửa
Đánh giá chung
Tổng quan, website hoạt động ổn định, tốc độ tải trang tốt, các chức năng đều hoạt động tốt và không xảy ra lỗi
Do website chưa đủ điều kiện kiểm tra số lượng tài khoảng người dùng truy cập để đánh giá tốc độ đường truyền
1 NHỮNG VẤN ĐỀ ĐẠT ĐƢỢC
- Nắm đƣợc cách sử dụng các công cụ hỗ trợ thiết kế StarUML
- Nắm đƣợc quy trình làm đồ án
- Nắm đƣợc quy trình nghiệp vụ bán hàng online
- Tìm hiểu ngôn ngữ lập trình Javascript, nền tảng Nodejs
- Tìm hiểu MongoDb, React.js, Redux.js, Frameword Hapi.js
- Tích hợp đƣợc chức năng thanh toán online thông qua cổng thanh toán Paypal
- Áp dụng xây dựng ứng dụng thực nghiệm trang website “Siêu thị bán thiết bị điện tử”
- Tìm hiểu sâu hơn về nền tảng Javascript & MongoDb, React.js, Redux.js để có thể đáp ứng nhiều hơn nữa nhu cầu của người sử dụng, phát triển và tối ƣu hóa hệ thống,
- Tiếp tục nghiên cứu Framework React Native để xây dựng nền tảng Mobile bằng việc kế thừa hệ thống API đã hoàn thành
- Học thêm nhiều ngôn ngữ và phần mềm ứng dụng để nâng cao giao diện người dùng, tối ưu hóa hiệu suất hoạt động và bổ sung thêm các tính năng còn thiếu trong phiên bản hiện tại.
