Phần mở đầu 13 người dùng sử dụng trên website. - Về phần bảo mật hệ thống, tiến hành nghiên cứu công nghệ Json Web Token và hash password làm bảo mật cho hệ thống, tất cả các luồng dữ liệu vào ra đều được kiểm soát thông qua Token. PHẠM VI NGHIÊN CỨU Website chủ yếu tập trung đi vào việc xử lý các nghiệp vụ cơ bản của một website bán hàng online như: xem danh sách các sản phẩm , thêm sản phẩm vào giỏ hàng cá nhân, tương tác, bình luận và đánh giá trên từng sản phẩm có trên hệ thống, quản lý trạng thái các đơn hàng, quản lý thông tin cá nhân, so sánh số liệu giữa hai sản phẩm, thanh toán, tìm kiếm và lọc sản phẩm nâng cao, … Về phần lõi xử lý, xây dựng đầy đủ các APIs phục vụ phần hiển thị cho người dùng cuối. MỤC TIÊU CỦA ĐỀ TÀI Mục tiêu chính của đề tài là xây dựng một website bán laptop trực tuyến hiệu quả, đáp ứng nhu cầu mua sắm của người tiêu dùng và mang lại giá trị kinh doanh cho cửa hàng.
Tạo ra một trải nghiệm mua sắm trực tuyến tốt cho khách hàng, đảm bảo tính bảo mật và an toàn và cung cấp đầy đủ thông tin về sản phẩm giúp khách hàng dễ dàng lựa chọn sản phẩm phù hợp. - Các mục tiêu cụ thể bao gồm: + Khảo sát phân tích các website bán laptop hiện có, xác định những yếu tố cần có của một website kinh doanh laptop trực tuyến. + Tạo ra một hệ thống quản lý khách hàng, doanh thu, sản phẩm, đơn hàng,. cho người quản trị dễ dàng quản lý.
Đảm bảo tính chính xác của những đơn hàng cũng như các thông tin của sản phẩm, doanh thu, khách hàng,. + Xây dựng website với giao diện đơn giản, dễ sử dụng và thân thiện với khách hàng. + Cung cấp thông tin đầy đủ và chi tiết về các sản phẩm laptop bao gồm mô tả sản phẩm, hình ảnh, kích cỡ, giá cả với số lượng sẵn có để khách hàng có thể đặt mua trực tuyến hoặc tham khảo trước khi đến cửa hàng mua sắm. + Cung cấp thông tin chi tiết cho khách hàng về những đơn hàng họ đã đặt.
+ Đảm bảo tính bảo mật và an toàn cho khách hàng khi mua hàng trực tuyến và thanh toán online bằng cách sử dụng phương thức an toàn và Phần mở đầu 14 tiện lợi. - Để thực hiện những mục tiêu trên, nhóm đã sử dụng những công nghệ: ReactJS, NodeJS, ExpressJS, JSON Web Token (JWT) 5. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện, tiếp thu được nhiều kỹ năng và kiến thức bổ ích, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay. Đồng thời, nâng cao kỹ năng làm việc nhóm và áp dụng các kiến thức này vào thực tiễn.
Khi đề tài nhóm chúng em được áp dụng vào thực tế, việc mua bán online các sản phẩm laptop sẽ thuận tiện và dễ dàng hơn; đem lại các lợi ích to lớn cho các cửa hàng bán lẻ trên toàn thế giới. Thay vì phải sắp xếp thời gian đi đến các của hàng để lựa chọn sản phẩm thì người dùng chỉ cần truy cập vào website, giải quyết được các vấn đề về khoảng cách địa lý cũng như thời gian. PHÂN CÔNG THÀNH VIÊN CÔNG VIỆC HOÀN THÀNH Phạm Đức Huấn - Thiết kế giao diện bên Client. Hoàn thành - Xử lý Front – End.
tốt - Viết báo cáo phần Front-End và Giao diện. - Thiết kế cơ sở dữ liệu và kiểm thử. Nguyễn Văn - Thiết kế cơ sở dữ liệu. Hoàn thành Hoàng - Xử lý Back – End.
tốt - Viết giao diện bên Admin. - Viết báo cáo phần Back-End và các phần còn lại. Phân công công việc Phần mở đầu 15 PHẦN NỘI DUNG CHƯƠNG 1. KIẾN TRÚC CHUNG CỦA HỆ THỐNG.
Giới thiệu về MERN Stack. MERN Stack là một bộ công nghệ phát triển ứng dụng web bao gồm MongoDB (Cơ sở dữ liệu), Express.js (Framework backend), React (Thư viện frontend) và Node. Sự kết hợp của các công nghệ này tạo nên một kiến trúc phát triển toàn diện cho việc xây dựng ứng dụng web hiệu quả. Áp dụng vào hệ thống.
- Mô hình Client-Server: Chương 1: Cơ sở lý thuyết 16 Hệ thống xây dựng trên MERN Stack tuân theo mô hình Client-Server, trong đó các khách hàng truy cập vào giao diện người dùng (client) để tương tác với hệ thống. Client sử dụng React để xây dựng giao diện người dùng (UI) cho cửa hàng trực tuyến, hiển thị sản phẩm, giỏ hàng, thanh toán và các chức năng khác. Server sử dụng Express.js và Node.js để xử lý các yêu cầu từ client và tương tác với cơ sở dữ liệu MongoDB. Ngoài ra, server còn xử lý các yêu cầu liên quan đến quản lý đơn hàng, quản lý người dùng, xử lý thanh toán và các tính năng phục vụ cho phía quản trị.
- Cơ sở dữ liệu: MongoDB được sử dụng làm cơ sở dữ liệu cho hệ thống để lưu trữ thông tin về sản phẩm, danh mục, khách hàng, đơn hàng và các thông tin khác liên quan. MongoDB cho phép lưu trữ dữ liệu dưới dạng tài liệu JSON linh hoạt, giúp quản lý thông tin sản phẩm và dữ liệu liên quan một cách hiệu quả.js là môi trường chạy mã JavaScript trên máy chủ, cho phép viết mã backend bằng JavaScript và xử lý các yêu cầu từ client thông qua Express.js và Node.js cung cấp nền tảng backend cho hệ thống.js được sử dụng để xây dựng các API để xử lý yêu cầu từ client như đăng nhập, đăng ký, xem sản phẩm, thêm vào giỏ hàng, thanh toán và quản lý đơn hàng. - Frontend: React là thư viện JavaScript phát triển giao diện người dùng (UI) cho hệ thống. React cho phép xây dựng các thành phần UI tái sử dụng như danh sách sản phẩm, chi tiết sản phẩm, giỏ hàng, thanh toán, đăng nhập và các chức năng khác.
React giúp tạo ra giao diện người dùng tương tác mượt mà và quản lý trạng thái ứng dụng một cách hiệu quả thông qua bộ thư viện redux. - Giao tiếp giữa các thành phần: Giao tiếp giữa client và server được thực hiện thông qua các API RESTful. Chương 1: Cơ sở lý thuyết 17 Client gửi yêu cầu HTTP (GET, POST, PUT, DELETE) đến server thông qua các endpoint đã được định nghĩa trong Express. Server xử lý yêu cầu, truy xuất dữ liệu từ cơ sở dữ liệu MongoDB và trả về kết quả cho client dưới dạng JSON.
- Tích hợp thanh toán: Để xử lý thanh toán trong hệ thống, nhóm sẽ tích hợp các cổng thanh toán phổ biến như PayPal và VNPAY Khi khách hàng thực hiện thanh toán, client gửi yêu cầu thanh toán đến server. Server sẽ gọi API của cổng thanh toán để xử lý thanh toán và nhận kết quả trả về. Sau đó, server cập nhật trạng thái thanh toán và tạo đơn hàng trong cơ sở dữ liệu. - Web socket: Socket.io cho phép truyền dữ liệu và sự kiện giữa client và server trong thời gian thực giúp cập nhật dữ liệu trực tiếp mà không cần reload trang.
Khi người dùng truy cập vào hệ thống, server thiết lập một kết nối socket với client bằng cách sử dụng phương thức connect. Khi kết nối thành công, server và client có thể giao tiếp theo hai chiều. Chương 1: Cơ sở lý thuyết 18 CHƯƠNG 2. KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.
KHẢO SÁT HIỆN TRẠNG 2.VN" https://phongvu. Giao diện website phongvu.vn - Các chức năng chính: o Giao diện hiển thị danh sách các sản phẩm mà cửa hàng đang bán. o Tìm kiếm và lọc sản phẩm nâng cao. o Thêm, sửa, xóa sản phẩm trong giỏ hàng.
o Quản lý thông tin cá nhân. o Trang chi tiết sản phẩm laptop thể hiện đầy đủ các thông số kỹ thuật, một bài viết review sản phẩm,. o Hỗ trợ thanh toán qua 3 hình thức: thanh toán khi nhận hàng, thành toán qua VNPAY, thanh toán trả góp. - Ưu điểm: o Bố cục giao diện rõ ràng, dễ thao tác cho người mới sử dụng.
o Bộ lọc đầy đủ với các nhu cầu mà người dùng muốn tìm kiếm. o Có responsive thích hợp với mọi màn hình khác nhau. o Hỗ trợ việc đăng nhập vào hệ thống với nhiều phương thức khác nhau. Chương 2: Khảo sát hiện trạng và mô hình hóa yêu cầu 19 o Hỗ trợ việc thanh toán đa dạng các phương thức.
- Nhược điểm: o Chưa có phần đánh giá và nhận xét cho từng loại sản phẩm. o Chưa có phần hỏi đáp với quản trị viên cho từng loại sản phẩm. o Có một số lỗi khi khi thực hiện việc tìm kiếm và lọc sản phẩm. Chương 2: Khảo sát hiện trạng và mô hình hóa yêu cầu 20 2.
Website “FPT shop” https://fptshop. Giao diện website fptshop.vn - Chức năng chính: o Giao diện hiển thị danh sách các sản phẩm mà cửa hàng đang bán. o Trang chi tiết sản phẩm thông số kỹ thuật sản phẩm, đánh giá sản phẩm, hỏi đáp về sản phẩm. o Thêm, xóa, sửa giỏ hàng.
o So sánh thông số kỹ thuật giữa 2 sản phẩm với nhau. o Tìm kiếm và lọc sản phẩm nâng cao. o Hỗ trợ thanh toán với 3 hình thức khác nhau: tiền mặt, thanh toán qua thẻ ngân hàng, trả góp. - Ưu điểm: o Bố cục rõ ràng, dễ thao tác cho người mới sử dụng.
o Giao diện sáng – đẹp. o Dễ sử dụng. o Trên mỗi card sản phẩm đều thể hiện rõ các thông số chính của sản phẩm và các voucher khuyến mãi của cửa hàng. o Có responsive thích ứng với mọi thiết bị màn hình khác Chương 2: Khảo sát hiện trạng và mô hình hóa yêu cầu 21 nhau.
o Hỗ trợ nhiều hình thức thanh toán khác nhau. - Nhược điểm: o Hỗ trợ duy nhất một phương thức đăng nhập qua số điện thoại. Chương 2: Khảo sát hiện trạng và mô hình hóa yêu cầu 22 2. Website “BestBuy” https://www.
Giao diện website bestbuy.com - Chức năng chính: o Giao diện hiển thị các sản phẩm đang bán. o Trang chi tiết sản phẩm hiển thị bài review, các thông số kỹ thuật của sản phẩm. o So sánh thông số kỹ thuật giữa các sản phẩm với nhau. o Đánh giá và nhận xét.
o Bình luận về sản phẩm. o Tìm kiếm và lọc nâng cao. o Thêm, sửa, xóa giỏ hàng. o Hỗ trợ thanh toán bằng tiền mặt hoặc là qua paypal.
- Ưu điểm: o Giao diện đơn giản dễ sử dụng. o Hỗ trợ nhiều phương thức đăng nhập khác nhau. o Mỗi card sản phẩm đều thể hiện rõ những thông số kỹ thuật chính, số lượng review đánh giá về sản phẩm đó. - Nhược điểm: o Tốc độ load web chậm.
o Nên hỗ trợ thêm nhiều hình thức thanh toán khác nữa.