Xây dựng Website bán giày dép sử dụng Mern Stack

PHẠM VI NGHIÊN CỨU Ứng dụng sẽ có các chức năng dựa trên yêu cầu, nghiệp vụ chính của một shop giày dép trong thực tế bao gồm: phân quyền, đặt mua giày dép, quản lý giỏ hàng và giao hàng

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

GVHD: TS LÊ VĂN VINH SVTH : NGUYỄN XUÂN KHOA

VÕ THẬP NGHĨA

XÂY DỰNG WEBSITE BÁN GIÀY DÉP

SỬ DỤNG MERN STACK

S K L 0 1 1 4 0 3

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TPHCM

KHOA CÔNG NGHỆ THÔNG TIN

*******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Xuân Khoa MSSV 1: 19110380

Họ và tên Sinh viên 2: Võ Thập Nghĩa MSSV 2: 19110404

Tên đề tài: Xây dựng website bán giày dép sử dụng MERN stack

Họ và tên Giáo viên hướng dẫn: TS Lê Văn Vinh

*******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Xuân Khoa MSSV 1: 19110380

Họ và tên Sinh viên 2: Võ Thập Nghĩa MSSV 2: 19110404

Tên đề tài: Xây dựng website bán giày dép sử dụng MERN stack

Họ và tên Giáo viên phản biện: ThS Trương Thị Ngọc Phượng

Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã xây dựng chương trình học tập bổ ích, đầy đủ các tố chất và yếu tố để chúng em có thể trở thành một lập trình viên trong tương lai Và đặc biệt hơn, với việc thực hiện đề tài này đã giúp chúng em có thể tổng quát hóa, trau dồi và bổ sung các kiến thức đã được học trong suốt quãng thời gian đại học Đây có thể nói là những kiến thức thật sự quan trọng trong cuộc đời của chúng em Là nền tảng vững chắc để chúng em có thể vững bước trong các bước đường tương lai

Tiếp đến chúng em xin được gửi lời cảm ơn đến thầy Lê Văn Vinh, giảng viên hướng dẫn chúng em thực hiện đề tài này Nhờ sự tận tụy của thầy, những đóng góp, sửa dạy, những ý kiến hướng dẫn thật sự chi tiết của thầy mà chúng em đã có thể thực hiện được đề tài này một cách tốt hơn rất nhiều Cảm ơn thầy đã dành thời gian hỗ trợ chúng em thực hiện được đề tài này một cách tốt nhất

Và cuối cùng chúng em xin gửi lời cảm ơn đến tất cả những người đã tạo điều kiện cho chúng em có cơ hội tiếp cận đến với ngành Công Nghệ Thông Tin này như toàn thể các thầy cô trong Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh Các thầy cô là những người đã thật sự định hướng cho tương lai của chúng em một hướng đi tốt và sau này dù có làm việc ở đâu thì chúng em cũng sẽ nhớ đến công ơn giảng dạy của thầy cô

Nhóm thực hiện báo cáo xin chân thành cảm ơn!

Nhóm thực hiện

Nguyễn Xuân Khoa – 19110380

Võ Thập Nghĩa – 10110404

Khoa: CNTT

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Nguyễn Xuân Khoa Mã Số SV: 19110380

Họ và Tên SV thực hiện 2: Võ Thập Nghĩa Mã Số SV: 19110404 Thời gian làm luận văn: Từ 09/09/2022 đến 11/07/2023

Chuyên ngành: Công nghệ phần mền

Tên luận văn: Xây dựng website bán giày dép sử dụng MERN stack

GV hướng dẫn: TS Lê Văn Vinh

Nhiệm Vụ Của Luận Văn:

1 Lý thuyết:

Tìm hiểu về MERN stack và các thư viện được sử dụng trong đề tài

2 Thực hành

Sử dụng Nodejs và Expressjs để xây dựng backend, viết APIs

Sử dụng MongoDB làm hệ quản trị cơ sở dữ liệu để lưu trữ dữ liệu

Sử dụng Reactjs để xây dựng giao diện

MỤC LỤC Phần MỞ ĐẦU

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

1.2 Đối tượng nghiên cứu

1.3 Phạm vi nghiên cứu

1.4 Mục tiêu của đề tài

1.5 Ý nghĩa khoa học và thực tiễn

1.6 Phân công

Chương 1: CƠ SỞ LÝ THUYẾT

1.1 Giới thiệu MERN stack

1.2 Cách MERN stack hoạt động

2.2.1 Yêu cầu chức năng

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

2.3 Mô hình hóa yêu cầu

3.3 Thiết kế cơ sở dữ liệu

3.4 Thiết kế giao diện

Chương 4: CÀI ĐẶT VÀ KIỂM THỬ

LỜI CẢM ƠN 4

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP 5

DANH MỤC HÌNH ẢNH 11

DANH MỤC BẢNG BIỂU 14

PHẦN MỞ ĐẦU 17

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

2 ĐỐI TƯỢNG NGHIÊN CỨU 17

3 PHẠM VI NGHIÊN CỨU 18

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

4.1 Phía khách hàng 18

4.2 Phía quản trị viên 18

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 19

6 PHÂN CÔNG 19

PHẦN NỘI DUNG 20

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 20

1.1 GIỚI THIỆU MERN STACK 20

1.2 CÁCH MERN STACK HOẠT ĐỘNG 20

1.2.1 React.JS 21

1.2.2 Express.js và Node.js 23

1.2.3 MongoDB 24

1.3 LỢI ÍCH CỦA MERN STACK 25

1.4 MỘT SỐ THƯ VIỆN HỖ TRỢ KHÁC 26

1.4.1 Socket.IO 26

1.4.2 Phía back-end 26

1.4.3 Phía front-end 26

1.5 Triển khai trang web trên môi trường product 27

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 29

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

2.1.1 Website Sneaker Zone 29

2.1.4 Website BE CLASSY 32

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

2.2.1 Yêu cầu chức năng 33

2.2.2 Yêu cầu phi chức năng 35

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

2.3.1 Bảng chức năng 36

2.3.2 Lược đồ Usecase 41

2.3.3 Đặc tả Usecase 45

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 68

3.1 LƯỢC ĐỒ TUẦN TỰ 68

3.2 LƯỢC ĐỒ LỚP 78

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

3.4 THIẾT KẾ GIAO DIỆN 80

3.4.1 Phía khách hàng 80

3.4.2 Phía quản trị viên 100

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 113

4.1 CÀI ĐẶT 113

4.1.1 Yêu cầu hệ thống 113

4.1.2 Các bước cài đặt 113

4.2 KIỂM THỬ 114

4.2.1 Kế hoạch kiểm thử 114

4.2.2 Quy trình kiểm thử 116

4.2.3 Kết quả kiểm thử 117

PHẦN KẾT LUẬN 124

1 KẾT QUẢ ĐẠT ĐƯỢC 124

1.1 Về lý thuyết 124

1.2 Về ứng dụng 124

1.3 Các thành viên trong nhóm 124

1.6 Hướng phát triển 125 TÀI LIỆU THAM KHẢO 126

Hình 2 Website Sneaker Zone 29

Hình 73 Quản lý đơn hàng 107

Bảng 2 Chức năng người quản lý 36

Bảng 11 Đặc tả Usecase "Xem chi tiết sản phẩm" 52 Bảng 12 Đặc tả Usecase "Xem tin tức khuyến mãi" 53 Bảng 13 Đặc tả Usecase "Lọc, tìm kiếm sản phẩm" 54

Bảng 19 Đặc tả Usecase "Liên hệ với cửa hàng" 60 Bảng 20 Đặc tả Usecase " Tìm kiếm người dùng theo email " 61 Bảng 21 Đặc tả Usecase "Khóa tài khoản người dùng" 62 Bảng 22 Đặc tả Usecase "Xem thống kê doanh thu" 63

Bảng 24 Đặc tả Usecase "Sửa thông tin sản phẩm" 65

Bảng 45 Mô tả Bộ lọc 86

Bảng 52 Mô tả giao Diện theo dõi đơn hàng người dùng 96

Bảng 54 Mô tả giao diện Đăng ký thông tin người dùng 98

Bảng 64 Mô tả giao diện Thêm phương thức vận chuyển 107

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

Với sự phát triển kinh tế những năm gần đây và quá trình hội nhập vào nền kinh tế thế giới của Việt Nam Thu nhập trung bình của người dân Việt Nam đang dần được cải thiện, chất lượng cuộc sống ngày càng được tăng lên Nhu cầu của xã hội cũng từ đó mà thay đổi Từ đó mà nảy sinh ra nhiều loại hình dịch vụ để phần nào đáp ứng được nhu cầu con người Các loại dịch vụ đó đa dạng về nhiều mặt, nhiều cách tiếp cận cũng như đáp ứng được các nhu cầu khác nhau Và một loại hình phổ biến trong thời đại 4.0 khi mà máy tính

và mạng internet phát triển một cách nhanh chóng đó là buôn bán qua mạng

Cùng với tình hình dịch bệnh covid vừa qua, thì loại hình dịch vụ buôn bán qua mạng càng chứng tỏ được sự tiện lợi của mình trong cuộc sống Không cần phải tới tận nơi, không tốn nhiều thời gian nhưng đáp ứng được nhu cầu một cách đầy đủ và nhanh chóng Tính hiệu quả của loại hình dịch vụ này ngày càng được chứng tỏ hơn khi các trang thương mại điện tử như shopee, tiki, … ngày càng phát triển Đặc biệt là đối với giới trẻ, người tiếp cận internet thường xuyên thì loại hình dịch vụ này không còn quá xa lạ

Nắm bắt được xu hướng phát triển loại hình dịch vụ buôn bán qua mạng này, đặc biệt đối với sản phẩm là giày dép có thương hiệu, phù hợp với giới trẻ, đáp ứng được nhu cầu “mặc đẹp” Thêm vào đó việc sử dụng trang web online để bán hàng đang là một cách tiếp cận cực kỳ tốt với đối tượng giới trẻ, nhóm khách hàng mà chúng em muốn nhắm đến

Từ đó nhóm chúng em đã quyết định chọn chủ để tiểu luận chuyên ngành “Xây dựng website bán giày dép sử dụng MERN stack” nhằm tạo ra website với đầy đủ các chức năng

để hỗ trợ cho việc buôn bán online mặt hàng giày dép Đem đến một trang web có thể phục

vụ tốt cho việc mua và bán được thuận lợi và dễ dàng nhất nhằm đáp ứng nhu cầu mua sắm giày, dép cho mọi người

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua bán giày dép, hỗ trợ khách hàng có thể tiếp cận tốt với các khuyến mãi mới, đồng thời giúp cửa hàng có thể quản lý thu nhập, khuyến mãi tránh tồn kho và các vấn đề liên quan Bên cạnh đó là các

diện người dùng thân thiện, tương tác tốt với người sử dụng

− Sử dụng NodeJS với Express Framework để xây dựng hệ thống APIs hỗ trợ truy xuất và thao tác dữ liệu nhanh chóng, chính xác

− Sử dụng socket.io để xây dựng chat giữa người dùng và quản trị viên

− Sử dụng hệ quản trị cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dữ liệu

3 PHẠM VI NGHIÊN CỨU

Ứng dụng sẽ có các chức năng dựa trên yêu cầu, nghiệp vụ chính của một shop giày dép trong thực tế bao gồm: phân quyền, đặt mua giày dép, quản lý giỏ hàng và giao hàng, quản lý sản phẩm và đánh giá sản phẩm, chat, quản lý người dùng, … Để xử lý những vấn

đề trên thì dựa vào APIs xây dựng, ta sẽ tương tác và hiển thị ra cho người dùng

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

4.1 Phía khách hàng

Người dùng có thể thực hiện được các chức năng:

- Đăng kí / Đăng nhập

- Quên mật khẩu

- Xem thông tin chi tiết của sản phẩm

- Xem tin tức về giày dép mới và các khuyến mãi

- Xem các sản phẩm theo danh mục

- Lọc sản phẩm theo hãng, màu sắc, kích thước, giới tính

- Tìm kiếm sản phẩm

- Sắp xếp sản phẩm theo giá

- Đánh giá sản phẩm sau khi đã mua hàng

- Chức năng giỏ hàng và đặt hàng

- Thanh toán online

- Cập nhật thông tin người dùng

- Chat với người bán hàng

4.2 Phía quản trị viên

Quản trị viên có thể thực hiện các chức năng:

- Quản lý sản phẩm (Thêm, xóa, sửa sản phẩm)

- Quản lý hãng sản phẩm (Thêm xóa sửa hãng sản phẩm)

- Quản lý tin tức (Thêm xóa sửa tin tức)

- Quản lý khuyến mãi (Thêm xóa sửa khuyến mãi)

- Quản lý đơn hàng

- Chat với khách hàng

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thành đề tài, nhóm chúng em đã học được lượng kiến thức về các công nghệ được sử dụng trong đề tài, cũng như những kinh nghiệm làm việc có được trong quá trình làm đề tài Bên cạnh đó sản phẩm đề tài của nhóm chúng em khi áp dụng vào thực tế

sẽ đáp ứng được nhu cầu mua sắm của mọi người đặc biệt là giới trẻ, đồng thời cũng đem lại tiện lợi, nhanh chóng khi mua hàng trực tuyến, tiết kiệm thời gian mua sắm hơn so với mua hàng truyền thống

6 PHÂN CÔNG

Bảng 1 Phân công công việc

Nguyễn Xuân Khoa - Thiết kế cơ sở dữ liệu

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1 GIỚI THIỆU MERN STACK

MERN viết tắt của MongoDB, Express, React, Node là bốn công nghệ chính tạo nên stack hỗ trợ lập trình web

Vài trò cơ bản của từng công nghệ trong stack:

- MongoDB: Là cơ sở dữ liệu để lưu trữ dữ liệu của web

- Express(.js): Là một framework của node.js

- React(.js): Là một Javascript framework hỗ trợ lập trình web ở client-side

- Node(.js): Là một trong những JavaScript web server hàng đầu

Express và Node tạo nên tầng ứng dụng giữa hỗ trợ giao tiếp giữa client với database Express.js là một server-side web framework và Node.js là nền tảng máy chủ JavaScript phổ biến và mạnh mẽ Bất kể bạn chọn biến thể nào của MERN stack bằng cách thay thế React bằng một client-side web framework nào thì ME(RVA)N là cách tiếp cận lý tưởng

để làm việc với JavaScript và JSON trong suốt quá trình

1.2 CÁCH MERN STACK HOẠT ĐỘNG

Kiến trúc MERN cho phép bạn dễ dàng xây dựng kiến trúc ba tầng (front-end, end, database) hoàn toàn bằng cách sử dụng JavaScript và JSON

back-Hình 1 Kiến trúc 3 tầng sử dụng MERN stack

1.2.1 React.JS

Tầng trên cùng của MERN stack là React.js, một JavaScript framework để tạo các ứng dụng động phía client trong HTML Nó cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML Một trong những đặc trưng duy nhất của Reactjs là việc render dữ liệu không những có thể thực hiện

ở tầng server mà còn ở tầng client

Ưu điểm của react:

- Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí

- Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt

là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript Ta

có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX

- Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường

- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối

ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt

sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về

- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện

vì virtual DOM được cài đặt hoàn toàn bằng JS

- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi

Nhược điểm của react:

- Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay là Ajax

- Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại

- React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular) Trong khi đó Angular là một framework hoàn chỉnh

- Khó tiếp cận cho người mới học Web

1.2.2 Express.js và Node.js

Tầng tiếp theo là framework phía máy chủ Express.js, chạy bên trong máy chủ Node.js Express.js tự nhận mình là “web framework tối giản, nhanh, đơn giản cho Node.js” và đó thực sự chính xác Express.js có các mô hình mạnh mẽ để định tuyến URL (khớp URL đến với chức năng máy chủ) và xử lý các yêu cầu và phản hồi HTTP

Bằng cách tạo các Yêu cầu HTTP XML (XHR) hoặc GET hoặc POST từ giao diện người dùng React.js của bạn, bạn có thể kết nối với các hàm Express.js cung cấp giá trị cho ứng dụng của bạn bằng cách sử dụng các promises, callbacks, … để truy cập và cập nhật

dữ liệu trong cơ sở dữ liệu MongoDB của bạn

Ưu điểm của node:

- Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking) Bạn có thể

dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất

- Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website

- Nhận và xử lý nhiều kết nối chỉ với một single-thread Nhờ đó, hệ thống xử lý sẽ

sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn rất nhiều

- Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất

- Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất

- Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng xã hội …

Nhược điểm của node:

- Nodejs gây hao tốn tài nguyên và thời gian Nodejs được viết bằng C++ và JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch Nếu bạn cần

xử lý những ứng dụng tốn tài nguyên CPU thì không nên sử dụng Nodejs

- Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ không có sự chênh lệch quá nhiều Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới Tuy nhiên khi xây dựng và triển khai dự án quan trọng thì Nodejs không phải là

sự lựa chọn hoàn hảo nhất

1.2.3 MongoDB

Nếu ứng dụng của bạn lưu trữ bất kỳ dữ liệu nào (hồ sơ người dùng, nội dung, nhận xét, tải lên, sự kiện, …), thì bạn sẽ muốn có một cơ sở dữ liệu để có thể làm việc cùng với React, Express và Node

Đó là lý do MongoDB xuất hiện: Các tài liệu JSON được tạo trong giao diện người dùng React.js của bạn có thể được gửi đến máy chủ Express.js, nơi chúng có thể được xử

lý và (giả sử chúng hợp lệ) được lưu trữ trực tiếp trong MongoDB để truy xuất sau này

Ưu điểm của MongoDB

- Document oriented

- Hiệu suất cao

- Tính sẵn sàng cao - Nhân rộng

- Khả năng mở rộng cao - Sharding

- Năng động - Không có lược đồ cứng nhắc

- Linh hoạt - thêm / xóa trường có ít hoặc không ảnh hưởng đến ứng dụng

- Dữ liệu không đồng nhất

- Không joins

- Phân phối được

- Biểu diễn dữ liệu trong JSON hoặc BSON

- Hỗ trợ không gian địa lý (Geospatial)

- Tích hợp dễ dàng với BigData Hadoop

- Ngôn ngữ truy vấn dựa trên tài liệu mạnh mẽ như SQL

- Các bản phân phối cloud như AWS, Microsoft, RedHat, dotCloud và SoftLayer, v.v … Trên thực tế, MongoDB được xây dựng cho cloud Kiến trúc mở rộng quy

mô tự nhiên của nó, được kích hoạt bởi sharding, liên kết tốt với quy mô và sự nhanh nhẹn có được nhờ điện toán đám mây

Nhược điểm của MongoDB

- Một nhược điểm của NoSQL là hầu hết các giải pháp đều không tuân thủ ACID mạnh mẽ (Atomic, Consistency, Isolation, Durability) như các hệ thống RDBMS được thiết lập tốt hơn

- Giao dịch phức tạp

- Không có chức năng hoặc thủ tục lưu trữ tồn tại nơi bạn có thể liên kết logic

1.3 LỢI ÍCH CỦA MERN STACK

Hãy bắt đầu với MongoDB, cơ sở dữ liệu tài liệu ở gốc của MERN stack MongoDB được thiết kế để lưu trữ dữ liệu JSON nguyên bản (về mặt kỹ thuật, nó sử dụng phiên bản nhị phân của JSON được gọi là BSON) và mọi thứ từ giao diện dòng lệnh đến ngôn ngữ truy vấn của nó (MQL), hoặc MongoDB Query Language) được xây dựng trên JSON và JavaScript

MongoDB hoạt động cực kỳ hiệu quả với Node.js và giúp việc lưu trữ, thao tác và biểu diễn dữ liệu JSON ở mọi tầng trong ứng dụng của bạn trở nên vô cùng dễ dàng trên nhà cung cấp dịch vụ đám mây mà bạn chọn, dễ dàng chỉ bằng một vài lần bấm nút

Express.js (chạy trên Node.js) và React.js làm cho ứng dụng JavaScript/JSON MERN trở nên đầy đủ Express.js là một server-side web framewwork bao bọc các request và response HTTP, đồng thời giúp dễ dàng thực hiện ánh xạ URL tới các chức năng phía máy chủ React.js là khung JavaScript giao diện người dùng để xây dựng giao diện người dùng tương tác trong HTML và giao tiếp với máy chủ từ xa

Sự kết hợp này có nghĩa là dữ liệu JSON chảy tự nhiên từ trước ra sau, giúp xây dựng dữ liệu nhanh chóng và debug khá đơn giản Ngoài ra, bạn chỉ cần biết một ngôn ngữ lập trình và cấu trúc tài liệu JSON để hiểu toàn bộ hệ thống!

MERN là sự lựa chọn cho các nhà phát triển web ngày nay muốn phát triển nhanh chóng, đặc biệt đối với những người có kinh nghiệm về React.js

1.4 MỘT SỐ THƯ VIỆN HỖ TRỢ KHÁC

1.4.1 Socket.IO

Socket.IO là một thư viện JavaScript cho phép giao tiếp realtime giữa máy khách và máy chủ Socket.IO được xây dựng trên WebSockets, một giao thức nổi tiếng cho việc giao tiếp realtime Trong MERN stack sử dụng Socket.IO để tạo kết nối realtime giữa máy khách

(React.js) và máy chủ (Express.js và Node.js) để truyền và nhận dữ liệu tức thì

1.4.2 Phía back-end

Jsonwebtoken: JSON Web Token (JWT) là một tiêu chuẩn mở xác định cách thức

để truyền thông tin giữa các bên một cách an toàn dưới dạng JSON Thông tin được xác minh và đáng tin cậy vì nó có chứa chữ ký số Chữ ký số này được mã hóa bằngbằng RSA hoặc ECDSA Một chuổi token phải bao gồm ba phần cách nhau bởi dấu chấm đó là header, payload và signature JWT thường được dùng trong authentication

Mongoose: Mongoose là một thư viện JavaScript tạo kết nối giữa MongoDB và

Node.js Mongoose cho phép định nghĩa các đối tượng với một schema được định nghĩa rõ ràng, được ánh xạ tới một MongoDB document

Cloudinary: Cloudinary là giải pháp Phần mềm dưới dạng dịch vụ (SaaS) giúp quản

lý các nội dung phương tiện của ứng dụng web hoặc thiết bị di động của trên đám mây Cloudinary cung cấp giải pháp tổng thể đáp ứng hầu hết các yêu cầu về hình ảnh và video, cho phép tải lên, lưu trữ, xử lý, chuyển đổi và phân phối được tối ưu hoá Tải lên, xử lý và phân phối phương tiện được xử lý trên các máy chủ của Cloudinary, tự động mở rộng quy

mô để xử lý lưu lượng truy cập lớn và tải cao

1.4.3 Phía front-end

Redux: Redux là một thư viện JavaScript mã nguồn mở Là một công cụ dùng để

quản lý và tập trung các trạng thái Nó được sử dụng phổ biến cùng với các thư viện như React.JS, Angular để xây dựng giao diện người dùng hiệu quả hơn Redux gồm có ba thành

phần: Actions, Store và Reducers

Redux-toolkit là một package được sinh ra nhầm giải quyết ba vấn đề phổ biến của redux:

- Cấu hình store của redux quá phức tạp

- Cần có thêm một số thư viện như midleware, selectors, …

- Redux lặp lại quá nhiều đoạn code

Axios: Axios là một thư viện HTTP Client dựa trên Promise được sử dụng để xây

dựng các ứng dụng API từ đơn giản đến phức tạp

react-router-dom: Là một thư viện giúp định tuyến trong React Nó cho phép điều

hướng giữa các chế độ xem của các thành phần khác nhau trong ứng dụng React, cho phép thay đổi URL của trình duyệt và giữ giao diện người dùng đồng bộ với URL

1.5 Triển khai trang web trên môi trường product

Đăng ký tài khoản và tạo server trên CloudPanel: Truy cập vào CloudPanel và đăng

ký tài khoản Sau đó, tạo một máy chủ (server) để chạy ứng dụng của bạn trên cloud

Cài đặt Node.js và NPM trên máy chủ: Khi máy chủ của bạn đã được tạo, cài đặt Node.js và NPM để chạy ứng dụng back-end Node.js Đảm bảo bạn cài đặt phiên bản Node.js tương thích với ứng dụng của bạn

Sao chép mã nguồn ứng dụng và cài đặt các phụ thuộc: Sao chép mã nguồn ứng dụng back-end Node.js của bạn lên máy chủ Sử dụng NPM để cài đặt các phụ thuộc (dependencies) cần thiết để ứng dụng hoạt động

Cấu hình PM2 để quản lý quy trình Node.js: Sử dụng PM2 (Process Manager 2) để quản lý quy trình Node.js trên máy chủ PM2 giúp chạy ứng dụng một cách liên tục và tự động khởi động lại nếu cần

Cấu hình proxy để xử lý các yêu cầu tới Node.js: Sử dụng một proxy như Nginx để chuyển tiếp các yêu cầu HTTP/HTTPS tới ứng dụng Node.js Điều này giúp tăng hiệu suất

và bảo mật của ứng dụng

Cài đặt và triển khai trang web tĩnh ReactJS: Sau khi đã cấu hình thành công ứng dụng back-end Node.js, tiến hành cài đặt và triển khai trang web tĩnh ReactJS Xây dựng

trang web ReactJS bằng cách sử dụng công cụ như Create React App và triển khai mã nguồn lên máy chủ

Cấu hình Nginx để phục vụ trang web tĩnh: Sử dụng Nginx để cấu hình và phục vụ các tệp tĩnh của trang web ReactJS Nginx sẽ xử lý các yêu cầu tới các tệp tĩnh và trả về cho trình duyệt của người dùng

Kiểm tra và xác nhận hoạt động: Cuối cùng, kiểm tra

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

- Thanh toán khi nhận hàng

- Tin tức, giới thiệu, liên hệ

Ưu điểm:

- Thông báo sản phẩm vừa được mua

- Theo dõi đơn hàng

- Thanh toán khi nhận hàng hoặc chuyển khoản ngân hàng

- Giới thiệu

Ưu điểm:

- Có thanh toán chuyển khoản

- Có theo dõi đơn hàng

Khuyết điểm:

- Chỉ lọc sản phẩm theo tên

- Không có đăng ký, đăng nhập

- Không có bình luận, đánh giá về sản phẩm

- Chi tiết sảm phẩm, sản phẩm liên qua

- Sản phẩm đã xem, sản phẩm liên quan

- Thanh toán online, offline

Ưu điểm:

- Giao diện đẹp, bắt mắt, dễ sử dụng

- Có chatbot

- Xem được sản phẩm đã xem

- Thanh toán nhiều hình thức

Sau khi đăng nhập lần đầu người dùng phải đăng ký thông tin cá nhân và các lần đăng nhập sau có thể quản lý thông tin cá nhân như xem, sửa thông tin và mật khẩu người dùng mong muốn

Chức năng quên mật khẩu: Khi người dùng không nhớ mật khẩu có thể chọn chức năng để nhận mail cấp lại mật khẩu

Chức năng giỏ hàng: Mỗi tài khoản người dùng sẽ có một giỏ hàng Người dùng có thể chọn sản phẩm giày dép bỏ vào giỏ hàng và mua sau đó hoặc có thể chọn ra các sản phẩm trong giỏ hàng để tiến hành đặt hàng

Chức năng theo dõi đơn hàng: Các sản phẩm đã đặt thành công, đang giao và đã giao thành công cũng được hiển thị trạng thái trong giỏ hàng

Chức năng đặt hàng: Sau khi chọn các sản phẩm để tiến hành đặt hàng, người dùng phải điền đầy đủ thông tin người nhận hàng số điện thoại, địa chỉ, … Và chọn loại giao hàng Sau đó hệ thống sẽ tính phí giao hàng và tổng giá trị hóa đơn hiển thị cho người dùng tiến hành thanh toán

Chức năng thanh toán: Người dùng sẽ chọn kiểu thanh toán sau khi kiểm tra các thông tin đơn hàng Có 2 kiểu thanh toán là thanh toán khi nhận hàng và thanh toán online

Chức năng đánh giá sản phẩm sau khi đơn hàng hoàn tất: Sau khi đơn hàng được giao thành công, người dùng sẽ được 1 quyền đánh giá về các sản phẩm đã mua trên hệ thống Các chỉ số đánh giá bao gồm số sao (từ 1 đến 5) và nội dung đánh giá

Chức năng đăng ký: Khi người dùng đăng ký sẽ được tạo ra một tài khoản mới cũng như giỏ hàng để phục vụ cho việc mua hàng

Chức năng đăng xuất: người dùng đăng xuất khỏi tài khoản đã đăng nhập

Chức năng tìm kiếm và lọc sản phẩm: Người dùng sẽ được lọc sản phẩm theo khoảng giá, theo hãng, màu sắc, kích thước, giới tính Tìm kiếm sản phẩm theo tên hoặc theo loại(giày/dép) hoặc theo hãng

Chức năng xem thông tin sản phẩm: Người dùng có thể chọn sản phẩm để xem chi tiết sản phẩm

Xem các trang tin tức khuyến mãi, nhập mã khuyến mãi vào sản phẩm nếu có Liên hệ với cửa hàng: Liên hệ với cửa hàng để được hỗ trợ, một cách nhanh chóng, chat online realtime với cửa hàng

Chức năng người quản lý:

Chức năng đăng nhập: Sau khi đăng nhập đúng tên và tài khoản của admin, admin

sẽ có quyền để quản lý hệ thống và xem thống kê, doanh thu

Chức năng quản lý người dùng: Admin sẽ được xem, khóa tài khoản người dùng, tìm kiếm người dùng theo email

Chức năng quản lý sản phẩm: Admin sẽ được xem, thêm, sửa, xóa thông tin sản phẩm

Chức năng quản lý khuyến mãi: Admin sẽ có thể tạo, chỉnh sửa, xóa mã khuyến mãi Chức năng đăng bài tin tức: Admin có thể đăng tin tức lên trang tin tức của web Chức năng xem thống kê: Admin có thể xem doanh thu theo ngày, tháng, năm Chức năng quản lý phí vận chuyển và loại vận chuyển: Admin có thể thay đổi phí vận chuyển, thêm, xóa, sửa loại vận chuyển

Kiểm tra, theo dõi đơn hàng: Admin có thể kiểm tra đơn hàng cho các người dùng trong hệ thống Và admin sẽ phải cập nhật trang thái đơn hàng tương ứng

Quản lý hãng sản phẩm: Admin có thể thêm xóa sửa các hãng sản phẩm

Chăm sóc khách hàng qua chat: Chăm sóc khách hàng bằng chức năng chat realtime trực tiếp với khách hàng

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

- Tốc độ tìm kiếm nhanh và chính xác

- Bảo mật được thông tin người dùng và thông tin sách, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu

- Tốc độ xử lý các thao tác nhanh chóng và chính xác, thời gian phản hồi nhanh

- Có thể mở rộng chức năng theo yêu cầu người dùng

- Trải nghiệm người dung

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

2.3.1 Bảng chức năng

2.3.1.1 Chức năng của người quản lý

Bảng 2 Chức năng người quản lý

1 Tìm kiếm người dùng theo

3 Khóa tài khoản người dùng Chọn người dùng để khóa tài khoản hoặc mở

lại tài khoản cho người bị khóa nhầm

4 Xem thống kê doanh thu Chọn một ngày cụ thể, khoảng ngày, tháng

hoặc năm để xem thống kê doanh thu

5 Tìm kiếm sản phẩm theo tên Các sản phẩm có tên giống với từ khóa tìm

kiếm sẽ được hiển thị

6 Thêm sản phẩm Thêm một sản phẩm mới với đầy đủ thông tin

của sản phẩm như loại, hãng, size,…

7 Sửa sản phẩm Thay đổi các thông tin của một sản phẩm đã

thêm

8 Xóa sản phẩm Xóa một sản phẩm đã thêm

9 Thêm khuyến mãi Thêm một mã khuyến mãi mới với thông tin

của khuyến mãi như giảm bao nhiêu tiền cho hóa đơn từ bao nhiêu, ngày áp dụng và số lượng mã

10 Sửa khuyến mãi Thay đổi các thông tin của một khuyến mãi đã

thêm

11 Xóa khuyến mãi Xóa một khuyến mãi đã thêm

12 Thêm tin tức Thêm một bài tin tức mới với thông tin như

thumbnail, tiêu đề, hình ảnh và nội dung

13 Sửa tin tức Thay đổi các thông tin của một tin tức đã thêm

14 Xóa tin tức Xóa một tin tức đã thêm

15 Thêm loại vận chuyển Thêm một loại vân chuyển mới với thông tin

như giá vẫn chuyển, mô tả

16 Sửa loại vận chuyển Thay đổi các thông tin của một loại vẫn chuyển

đã thêm

17 Xóa loại vận chuyển Xóa một loại vận chuyển đã thêm

18 Kiểm tra đơn hàng Kiểm tra thông tin đơn hàng của từng người

20 Cập nhật thông tin đơn hàng Khi đơn hàng được vận chuyển hoặc giao

thành công quản lý sẽ phải cập nhật trạng thái đơn hàng

21 Thêm hãng sản phẩm Thêm một hãng sản phẩm mới

22 Sửa hãng sản phẩm Thay đổi các thông tin của một hãng sản phẩm

24 Xóa hãng sản phẩm Xóa một hãng sản phẩm đã thêm

25 Đăng nhập Đăng nhập vào trang quản lý

26 Đăng xuất Thoát khỏi tài khoản và quay về trang chủ

2.3.1.2 Chức năng của khách hàng

Bảng 3 Chức năng của khách hàng

1 Đăng ký Đăng ký tài khoản để có thể có giỏ hàng và

thực hiện mua hàng cùng các chức năng khác

2 Đăng nhập Đăng nhập để có thể quản lý giỏ hàng cá nhân

và xem các đơn hàng, thông tin của tài khoản,…

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

4 Quên mật khẩu Một email có thông tin để thay đổi mật khẩu

sẽ được gửi về email người dùng và từ đó người dùng sẽ thực hiện cập nhật lại mật khẩu

5 Đăng ký thông tin cho tài

khoản

Khi đăng nhập lần đầu người dùng sẽ phải đăng ký thông tin tài khoản

6 Sửa thông tin tài khoản Sau khi đăng ký thông tin người dùng có thể

sửa thông tin tài khoản nếu muốn

7 Giỏ hàng Nguời dùng chọn sản phẩm để thêm vào giỏ

hàng hoặc xóa sản phẩm khỏi giỏ hàng Cũng như xem lịch sử đặt hàng

8 Đặt hàng Chọn các sản phẩm cần đặt hàng, điền đầy đủ

thông tin người nhận hàng số điện thoại, địa chỉ, … Và chọn loại giao hàng Hệ thống sẽ tính phí giao hàng và tổng giá trị hóa đơn hiển thị cho người dùng tiến hành thanh toán

9 Thanh toán Người dùng được chọn thanh toán online

thông qua cổng thanh toán hoặc thanh toán khi nhận hàng

10 Đánh giá sản phẩm Đánh giá các sản phẩm đã đặt với 2 tiêu chí là

số sao và bình luận về sản phẩm

11 Theo dõi đơn hàng Các sản phẩm đã đặt thành công, đang giao và

đã giao thành công cũng được hiển thị trạng thái trong giỏ hàng

12 Xem chi tiết sản phẩm Chọn một sản phẩm để xem thông tin chi tiết

của sản phẩm

13 Xem tin tức khuyến mãi Xem các tin tức khuyến mãi được quản lý

đăng tải

14 Tìm kiếm và lọc sản phẩm Lọc sản phẩm theo khoảng giá, theo hãng,

màu sắc, kích thước, giới tính Tìm kiếm sản phẩm theo tên hoặc theo loại(giày/dép) hoặc theo hãng

15 Liên hệ với cửa hàng Người dùng gửi tin nhắn hoặc hình ảnh đến

cho cửa hàng nhằm hỏi thêm về thông tin sản phẩm hoặc yêu cầu cửa hàng hỗ trợ