(Đồ án hcmute) xây dựng website bán đồ công nghệ sử dụng mern stack

Mục đích của đề tài: − Tìm hiểu về công nghệ MERN Stack − Phân tích và thiết kế website bán đồ công nghệ − Cài đặt website bán đồ công nghệ có sử dụng MERN Stack bao gồm các chức năng:

XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ

GVHD: Th.S LÊ THỊ MINH CHÂU

NGUYỄN VĂN TỪ

LÊ TẤN QUÍ

S K L 0 0 9 5 2 1

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

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP

GIÁO VIÊN HƯỚNG DẪN ThS LÊ THỊ MINH CHÂU

KHOÁ 2018 – 2022

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ THỐNG THÔNG TIN

GIÁO VIÊN HƯỚNG DẪN:

Thạc sĩ Lê Thị Minh Châu

XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ

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

Họ tên sinh viên 1: LÊ TẤN QUÍ MSSV1: 18110350

Họ tên sinh viên 2: NGUYỄN VĂN TỪ MSSV2: 18110389

Ngành: Công nghệ thông tin

Tên đề tài: WEBSITE BÁN ĐỒ CÔNG NGHỆ SỬ DỤNG MERN STACK

Họ và tên Giáo viên hướng dẫn: ThS.LÊ THỊ MINH CHÂU

NHẬN XÉT:

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đánh giá loại:

5 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

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

Họ tên sinh viên 1: LÊ TẤN QUÍ MSSV1: 18110350

Họ tên sinh viên 2: NGUYỄN VĂN TỪ MSSV2: 18110389

Ngành: Công nghệ thông tin

Tên đề tài: WEBSITE BÁN ĐỒ CÔNG NGHỆ SỬ DỤNG MERN STACK

Họ và tên Giáo viên phản biện:

NHẬN XÉT:

6 Về nội dung đề tài & khối lượng thực hiện:

7 Ưu điểm:

8 Khuyết điểm:

9 Đánh giá loại:

10 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên, chúng em xin chân thành cảm ơn Cô Lê Thị Minh Châu, người đã trực tiếp giảng dạy, truyền đạt những kiến thức quý báu và tận tình giúp cho nhóm chúng em trong suốt quá trình thực hiện đề tài

Chúng em cũng xin gửi lời cảm ơn sâu sắc đến tất cả giảng viên khoa Công Nghệ Thông Tin thuộc trường đại học Sư Phạm Kỹ Thuật thành phố Hồ Chí Minh đã dẫn dắt

và tạo điều kiện cho chúng em hoàn thành bài tiểu luận này

Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế của một học viên, đồ án này sẽ không thể tránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của thầy để bọn em có thể bổ sung và nâng cao kiến thức của mình nhằm phục vụ tốt hơn các đồ án sau này

MỤC LỤC

PHẦN MỞ ĐẦU 14

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

Vì vậy, nhóm chúng em sẽ thực hiện đề tài:”Website bán đồ công nghệ sử dụng MERN STACK” 14

2 Mục đích của đề tài: 14

3 Cách tiếp cận và phạm vi nghiên cứu: 15

PHẦN NỘI DUNG 16

CHƯƠNG 1 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG VÀ Ý TƯỞNG VỀ CÁCH LẬP TRÌNH ĐỂ XÂY DỰNG WEBSITE BÁN HÀNG 16

I NODE.JS: 16

1 Giới thiệu 16

2 Lịch sử hình thành và phát triển: 16

3 Ưu và nhược điểm của Node.js: 18

4 Công dụng của Node.js trong đề tài: 19

5 Cài đặt 20

II MONGODB: 20

1 Giới thiệu NoSQL: 20

2 MongoDB: 21

3 Ưu và nhược điểm của MongoDB: 22

4 Công dụng của MongoDB trong đề tài: 23

5 Cài đặt: 23

III REACTJS: 32

ReactJS: 32

IV REACTJS: 34

ExpressJS: 34

CHƯƠNG 2 TỔNG QUAN VỀ CÁC WEBSITE TƯƠNG TỰ 37

I CLICKBUY.COM 37

1 Giới thiệu: 37

2 Ưu điểm: 38

II WALMART.COM 39

1 Giới thiệu: 39

2 Ưu điểm: 39

3 Các tính năng nổi bật: 40

III THEGIOIDIDONG.COM: 41

1 Giới thiệu: 41

2 Ưu điểm: 42

3 Các tính năng nổi bật: 42

IV EBAY.COM: 43

1 Giới thiệu: 43

2 Ưu điểm: 43

3 Các tính năng nổi bật: 44

V SHOPEE.VN: 45

1 Giới thiệu: 45

2 Ưu điểm: 45

3 Các tính năng nổi bật: 45

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ WEBSITE BÁN ĐỒ CÔNG NGHỆ 47

I ĐẶC TẢ ĐỀ TÀI: 47

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

1 Thiết kế cơ sở dữ liệu mức quan niệm: 48

2 Thiết kế cơ sở dữ liệu mức logic: 48

3 Chuyển sang cơ sở dữ liệu MongoDB: 52

III THIẾT KẾ CHỨC NĂNG: 59

1 Xây dựng biểu đồ use case: 59

2 Xây dụng biểu đồ trình tự cho mỗi chức năng: 76

3 Trình bày chức năng bằng giải thuật: 86

IV THIẾT KẾ GIAO DIỆN: 105

PHẦN KẾT LUẬN 113

1 Kết quả đạt được: 113

2 Những điểm hạn chế: 113

3 Hướng phát triển của đề tài: 113

TÀI LIỆU THAM KHẢO 114

DANH MỤC HÌNH VẼ

Hình 1 Node.js 16

Hình 2 Cài đặt Node.js thành công 20

Hình 3 MongoDB 21

Hình 4 Cài đặt MongoDB 24

Hình 5 Cài đặt MongoDB 24

Hình 6 Cài đặt MongoDB 25

Hình 7 Cài đặt MongoDB 25

Hình 8 Cài đặt MongoDB 26

Hình 9 Cài đặt MongoDB 26

Hình 10 Cài đặt MongoDB 27

Hình 11 Cài đặt MongoDB 27

Hình 12 Cài đặt MongoDB 28

Hình 13 Cài đặt MongoDB 28

Hình 14 Cài đặt MongoDB Compass 29

Hình 15 Cài đặt MongoDB Compass 29

Hình 16 Cài đặt MongoDB Compass 30

Hình 17 Cài đặt MongoDB Compass 30

Hình 18 Cài đặt MongoDB Compass 31

Hình 19 ReactJS 32

Hình 20 ExpressJS 34

Hình 21 ClickBuy 37

Hình 22 Walmart 39

Hình 23 thegioididong 41

Hình 24 eBay 43

Hình 25 Shopee 45

Hình 26 Sơ đồ ERD 48

Hình 27 Collection products 55

Hình 29 Collection Users 58

Hình 30 Sơ đồ Use Case 60

Hình 31 Usercase đăng xuất 61

Hình 32 Usercase đăng kí 62

Hình 33 Usercase thêm vào giỏ hàng 63

Hình 34 Xóa mặt hàng khỏi giỏ hàng 64

Hình 35 Usercase Điều chỉnh số lượng mặt hàng 65

Hình 36 Usercase đặt hàng 66

Hình 37 Usercase Tìm sản phẩm 67

Hình 38 Usercase Lọc sản phẩm 67

Hình 39 Usercase Đánh giá 68

Hình 40 Usercase Thêm người dùng 69

Hình 41 Usercase Xóa người dùng 70

Hình 42 Usercase Chỉnh sửa người dùng 71

Hình 43 Usercase Thêm sản phẩm 72

Hình 44 Usercase Xóa sản phẩm 73

Hình 45 Usercase Chỉnh sửa sản phẩm 74

Hình 46 Usercase Xóa review 75

Hình 47 Sơ đồ tuần tự chức năng đăng nhập 77

Hình 48 Sơ đồ tuần tự chức năng đăng xuất 77

Hình 49 Sơ đồ tuần tự chức năng thêm hàng vào giỏ 78

Hình 50 Sơ đồ tuần tự chức năng xoá hàng ra khỏi giỏ 78

Hình 51 Sơ đồ tuần tự chức năng chỉnh sửa số lượng trong giỏ 79

Hình 52 Sơ đồ tuần tự chức năng đặt hàng 79

Hình 53 Sơ đồ tuần tự chức năng thêm người dùng 80

Hình 54 Sơ đồ tuần tự chức năng chỉnh sửa thông tin người dùng 81

Hình 55 Sơ đồ tuần tự chức năng xóa người dùng 82

Hình 56 Sơ đồ tuần tự chức năng thêm sản phẩm 83

Hình 57 Sơ đồ tuần tự chức năng xóa sản phẩm 84

Hình 58 Sơ đồ tuần tự chức năng sửa sản phẩm 85

Hình 59 Sơ đồ tuần tự chức năng xóa đánh giá 86

Hình 60 Đăng nhập 105

Hình 61 Đăng kí 105

Hình 62 Trang chủ 106

Hình 63 Danh mục từng sản phẩm 106

Hình 64 Chi tiết sản phẩm 107

Hình 65 Giỏ hàng 107

Hình 66 Thông tin giao hàng 108

Hình 67 Thông tin giao hàng 108

Hình 68 Thông tin giao hàng 109

Hình 69 Danh sách đơn hàng 109

Hình 70 Chi tiết đơn hàng 110

Hình 71 Danh sách sản phẩm 111

Hình 72 Danh sách đơn hàng 111

Hình 73 Chi tiết đơn hàng 112

DANH MỤC BẢNG BIỂU

Bảng 2 Table Orders 50

Bảng 3 Table Users 51

Bảng 4 Table Have 51

Bảng 5 Table Buy 52

Bảng 6 Collection Products 52

Bảng 7 Collection Orders 53

Bảng 8 Collection Users 54

Bảng 9 Mô tả Use Case đăng nhập 61

Bảng 10 Mô tả Use Case đăng xuất 62

Bảng 11 Mô tả Use Case thêm hàng vào giỏ 64

Bảng 12 Mô tả Use Case xoá hàng khỏi giỏ 65

Bảng 13 Mô tả Use Case điểu chỉnh số lượng hàng trong giỏ 66

Bảng 14 Mô tả Use Case đặt hàng 66

Bảng 15 Mô tả Use Case Tìm sản phẩm 67

Bảng 16 Mô tả Use Case Lọc sản phẩm 68

Bảng 17 Mô tả Use Case Đánh giá 69

Bảng 18 Mô tả Use Case Thêm người dùng 70

Bảng 19 Mô tả Use Case Xóa người dùng 71

Bảng 20 Mô tả Use Case Tìm sản phẩm 72

Bảng 21 Mô tả Use Case đặt hàng 73

Bảng 22 Mô tả Use Case Xóa sản phẩm 74

Bảng 23 Mô tả Use Case Điều chỉnh số lượng mặt hàng 75

Bảng 24 Mô tả Use Case Xóa review 76

Bảng 25 Thuật toán chức năng tạo tài khoản 87

Bảng 26 Thuật toán chức năng xác minh tài khoản 87

Bảng 27 Thuật toán chức năng hiển hiện thông tin tài khoản 88

Bảng 28 Thuật toán chức năng thay đổi thông tin tài khoản 89

Bảng 29 Thuật toán chức năng lấy sản phẩm 89

Bảng 30 Thuật toán chức năng thêm sản phẩm vào giỏ 90

Bảng 31 Thuật toán chức năng đặt hàng 91

Bảng 32 Thuật toán cập nhật thông tin người dùng 92

Bảng 33 Thuật toán lấy thông tin người dùng 93

Bảng 34 Thuật toán cập nhật quyền 94

Bảng 35 Thuật toán xóa người dùng 95

Bảng 36 Thuật toán Thêm sản phẩm 96

Bảng 37 Thuật toán Xóa sản phẩm 97

Bảng 38 Thuật toán Cập nhật sản phẩm 99

Bảng 39 Thuật toán Xóa đánh giá 101

Bảng 40 Thuật toán Tạo đơn hàng 102

Bảng 41 Thuật toán Xóa đơn hàng 103

Bảng 42 Thuật toán Cập nhật đơn hàng 104

DOM Document Object Model

HTML HyperText Markup Language

HTTP HyperText Transfer Protocol

RAM Random Access Memory

RDBMS Relational Database Management System

SEO Search Engine Optimization

SQL Structured Query Language

URL Uniform Resource Locator

VAT Value-Added Tax

PHẦN MỞ ĐẦU

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

Trước đây, khi Internet chưa ra đời và cả khi Internet còn chưa phát triển mạnh mẽ như bây giờ, nhiều người tiêu dùng vẫn thường có thói quen mua bán hàng hóa, giao dịch ở các môi trường truyền thống như siêu thị, trung tâm thương mại, cửa hàng hay ở những khu chợ đông đúc Với cách này nhiều khách hàng phải đến trực tiếp nơi có sản phẩm họ muốn mua và sản phẩm đôi khi chưa chắc đã đảm bảo chất lượng

Nhưng giờ đây, việc mua bán hàng hóa đã nhanh hơn lúc trước nhiều lần.Với sự phát triển mạnh mẽ của internet thì việc mua bán trực tuyến sẽ trở nên dễ dàng hơn bao giờ hết Ưu điểm của mua bán trực tuyến là không những không bị giới hạn bởi khoảng cách địa lí, thời gian, mà còn tiết kiệm được mặt bằng và nhân lực Và đặc biệt hơn hết là chất lượng được kiểm soát bởi nền tảng thương mại và chính người tiêu dùng Từ đó đem lại lợi nhuận cao hơn, hiệu quả bán hàng cao hơn và thúc đẩy sức mua của mọi người

Có nhiều hình thức bán hàng trực tiếp như các trang thương mại điện tử (Tiki, Shopee, Lazada,…) hoặc thậm chí cả các trang mạng xã hội (Facebook, Youtube và vài năm gần đây là mạng xã hội Tiktok)

Với những luận điểm đã nêu trên, nhóm chúng em quyết định xây dựng một trang web bán đồ công nghệ dưới dạng một trang thương mại điện tử, giúp cho việc mua sắm đồ công nghệ một cách dễ dàng hơn

Vì vậy, nhóm chúng em sẽ thực hiện đề tài:”Website bán đồ công nghệ

sử dụng MERN STACK”

2 Mục đích của đề tài:

− Tìm hiểu về công nghệ MERN Stack

− Phân tích và thiết kế website bán đồ công nghệ

− Cài đặt website bán đồ công nghệ có sử dụng MERN Stack bao gồm các chức năng: đăng nhập vào website, đăng kí website, thêm hàng vào giỏ hàng, chỉnh sửa giỏ hàng, quản lí đơn hàng, đặt hàng, thanh toán bằng

3 Cách tiếp cận và phạm vi nghiên cứu:

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

− Phạm vi nghiên cứu: Đề tài sẽ tập trung trình bày kết quả nghiên cứu

của nhóm về các nội dung: MERN Stack và các công nghệ có liên quan

Sau đó nhóm chúng em sẽ xây dựng một Website minh họa dựa các kiến

thức đã được tiếp thu

− Phương pháp nghiên cứu:

● Tìm kiếm, nghiên cứu và tham khảo các website, các bài báo

online, các khóa học về MERN Stack và các công nghệ có liên

quan đến việc xây dựng website bằng MERN Stack

● Chọn lọc, sắp xếp các kiến thức tham thảo được để hoàn thành đề

tài

− Các chức năng đã thực hiện: Đăng nhập vào website, Đăng kí website,

Thêm hàng vào giỏ hàng, Chỉnh sửa giỏ hàng, Quản lí đơn hàng, Đặt

hàng, Thanh toán bằng Stripe, Thay đổi thông tin cá nhân

PHẦN NỘI DUNG CHƯƠNG 1 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG VÀ Ý TƯỞNG

OS X, Windows, Linux, FreeBSD và IBM i [1]

Node.js cung cấp một kiến trúc hướng sự kiện (event-driven architecture) và non-blocking I/O API, tối ưu hoá băng thông của một ứng dụng và có khả năng mở rộng Node.js sử dụng Google V8 JavaScript engine

để thực thi code và có một tỷ lệ lớn module được viết bằng Javascript Các module của Node.js đã giúp việc viết code đơn giản hơn, giảm đi độ phức tạp cho viết ứng dụng trên server Node.js chứa một thư viện built-in cho phép các ứng dụng hoạt động như một Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS Mọi hàm trong Node.js là không đồng bộ (asynchronous) Do đó, các tác vụ đều được xử lý và thực thi ở chế độ nền (background processing) [2]

Đặc biệt Node.js được chọn làm nền tảng phát triển ở Microsoft, Yahoo, Walmart, Groupon, SAP, LinkedIn, Rakuten, Paypal, Voxer và GoDaddy [3]

2 Lịch sử hình thành và phát triển:

Node.js ban đầu được viết bởi Ryan Dahl vào năm 2009, khoảng mười

ba năm sau khi giới thiệu môi trường JavaScript phía máy chủ đầu tiên, Netscape's LiveWire Pro Web Bản phát hành ban đầu chỉ hỗ trợ Linux và Mac

OS X Việc phát triển và bảo trì của nó được dẫn dắt bởi Dahl và sau đó được Joyent tài trợ [4]

Dahl chỉ trích khả năng hạn chế của máy chủ web phổ biến nhất năm

2009, Apache HTTP Server , để xử lý nhiều kết nối đồng thời (lên đến 10.000

và hơn thế nữa) và cách phổ biến nhất để tạo mã (lập trình tuần tự), khi mã bị chặn toàn bộ quá trình hoặc ngụ ý nhiều ngăn xếp thực thi trong trường hợp kết nối đồng thời [4]

Dahl đã trình diễn dự án tại JSConf Châu Âu khai mạc vào ngày 8 tháng

11 năm 2009 Node.js kết hợp công cụ JavaScript V8 của Google , một vòng lặp sự kiện và một API I / O cấp thấp [4]

Vào tháng 1 năm 2010, một trình quản lý gói đã được giới thiệu cho môi trường Node.js được gọi là npm Trình quản lý gói giúp các lập trình viên dễ dàng xuất bản và chia sẻ mã nguồn của các gói Node.js và được thiết kế để đơn giản hóa việc cài đặt, cập nhật và gỡ cài đặt các gói [4]

Vào tháng 6 năm 2011, Microsoft và Joyent đã triển khai phiên bản Windows gốc của Node.js Bản dựng Node.js đầu tiên hỗ trợ Windows được phát hành vào tháng 7 năm 2011 [4]

Vào tháng 1 năm 2012, Dahl bỏ qua một bên, thúc đẩy đồng nghiệp và người sáng tạo npm Isaac Schlueter quản lý dự án Vào tháng 1 năm 2014, Schlueter thông báo rằng Timothy J Fontaine sẽ dẫn đầu dự án [4]

Vào tháng 12 năm 2014, Fedor Indutny bắt đầu io.js, một nhánh của Node.js Do mâu thuẫn nội bộ về quản trị của Joyent, io.js đã được tạo ra như một giải pháp thay thế quản trị mở với một ủy ban kỹ thuật riêng biệt Không giống như Node.js, các tác giả đã lên kế hoạch cập nhật io.js với các bản phát hành mới nhất của Google V8 JavaScript engine [4]

Vào tháng 2 năm 2015, ý định thành lập Quỹ Node.js trung lập đã được công bố Đến tháng 6 năm 2015, cộng đồng Node.js và io.js đã bỏ phiếu để làm việc cùng nhau dưới Node.js Foundation [4]

Vào tháng 9 năm 2015, Node.js v0.12 và io.js v3.3 đã được hợp nhất lại

với nhau thành Node v4.0 Sự hợp nhất này đã đưa các tính năng của V8 ES6 vào Node.js và chu kỳ phát hành hỗ trợ dài hạn Tính đến năm 2016, trang web io.js khuyến nghị các nhà phát triển chuyển trở lại Node.js và không có kế hoạch phát hành thêm io.js do hợp nhất [4]

3 Ưu và nhược điểm của Node.js:

Ưu điểm:

− Nhận và xử lý nhiều kết nối chỉ với một single-thread: Điều này giúp hệ

thống tốn ít RAM nhất và chạy nhanh nhất khi không phải tạo thread mới cho mỗi truy vấn giống PHP Ngoài ra, tận dụng ưu điểm non-blocking I/O của Javascript mà Node.js tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ như PHP [5]

− JSON APIs: Với cơ chế event-driven, non-blocking I/O và mô hình kết

hợp với Javascript là sự lựa chọn tuyệt vời cho các dịch vụ Webs làm bằng JSON [5]

− Ứng dụng trên 1 trang: Node.js có khả năng xử lý nhiều Request/s đồng

thời thời gian phản hồi nhanh [5]

− Shelling tools unix: Node.js sẽ tận dụng tối đa Unix để hoạt động Tức là

Node.js có thể xử lý hàng nghìn Process và trả ra 1 luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất [5]

− Streamming Data (Luồng dữ liệu): Các web thông thường gửi HTTP

request và nhận phản hồi lại (Luồng dữ liệu) Giả xử sẽ cần xử lý 1 luồng giữ liệu cực lớn, Node.js sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác [5]

− Ứng dụng web thời gian thực: Với sự ra đời của các ứng dụng di động

& HTML 5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,… [5]

Nhược điểm:

− Ở thời điểm hiện tại, Node.js còn đang ở trong giai đoạn phát triển đầu

tiên, chính vì lẽ đó, các đặc trưng ban đầu có thể bị thay đổi trong quá

trình phát triển tiếp theo [6]

− Node.js là môi trường xử lý đơn luồng và theo hướng sự kiện nên nó

không thích hợp với những ứng dụng cần dùng nhiều CPU Do đó

không nên sử dụng Node.js để xây dựng và quản lý ứng dụng như xử lý video, hình ảnh bởi khi xử lý các tệp quá lớn Node.js rất có thể bị treo máy hoặc không phản hồi [6]

− Node.js gây hao tốn tài nguyên và thời gian: Node.js đượ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 cần xử lý những ứng dụng tốn tài nguyên CPU thì không nên

sử dụng Node.js [6]

− Node.js 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 Node.js 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ì Node.js không phải là sự lựa chọn hoàn hảo nhất [6]

4 Công dụng của Node.js trong đề tài:

Lợi ích lớn với Node.js là có thể sử dụng cú pháp JavaScript để xây dựng toàn bộ hệ thống, cả giao diện người dùng và phía server, làm cho Node.js trở thành một công cụ tuyệt vời để phát triển và duy trì một trang web thương mại điện tử và phối hợp giữa các thành viên trong nhóm trên back-end cũng như front-end Có cùng cấu trúc JavaScript ở cả hai mảng sẽ đẩy nhanh quá trình phát triển ứng dụng Điều quan trọng cần đề cập là Node.js làm cho việc sửa lỗi trở nên dễ dàng hơn

Có rất nhiều công ty thành công khi sử dụng Node.js cho các ứng dụng của họ vì nó mang lại nhiều cơ hội hơn cho các nhà phát triển trong việc cập nhật các xu hướng đang thay đổi Vì lẽ đó, Node.js có thể tạo ra trải nghiệm tuyệt vời cho khách hàng truy cập trang web thương mại điện tử Vì Node.js là một nền tảng phức tạp hơn, nó cho phép các nhà phát triển xây dựng những thứ phức tạp hơn dễ dàng hơn so với PHP Nó cũng hỗ trợ đa nhiệm tạo ra kết quả tốt hơn với chi phí thấp hơn

Trên một trang web thương mại điện tử, hành trình của người mua bao gồm nhiều hành động và thao tác Ví dụ: thay đổi các tính năng của sản phẩm

và thêm những thứ vào giỏ hoặc chọn hình thức thanh toán Đó là lý do tại sao điều quan trọng là phải chọn một cơ sở mã có thể xử lý các tác vụ này cùng một lúc Từ quan điểm về khả năng mở rộng, các cửa hàng thương mại điện tử

có thể phát triển đáng kể trong một khoảng thời gian ngắn Vì Node.js có một

cơ chế tích hợp để xử lý khả năng mở rộng nên nó trở thành một lựa chọn tuyệt vời cho một trang web thương mại điện tử

5 Cài đặt

Tải Node.js tại địa chỉ: https://Node.js.org/en/download/

Thực hiện các bước cài đặt

Kiểm tra đã cài Node.js trên máy tính hay chưa bằng cách mở cmd, gõ lệnh node -v và npm -v

Hình 2 Cài đặt Node.js thành công

II MONGODB:

1 Giới thiệu NoSQL:

NoSQL được phát triển trên Javascript Framework với kiểu dữ liệu là JSON và dạng dữ liệu theo kiểu key và value NoSQL ra đời như là 1 mảnh vá cho những khuyết điểm và thiếu xót cũng như hạn chế của mô hình dữ liệu quan hệ RDBMS về tốc độ, tính năng, khả năng mở rộng, [7]

Với NoSQL người quản trị cơ sở dữ liệu có thể mở rộng dữ liệu mà không lo tới những việc như tạo khóa ngoại, khóa chính, kiểm tra ràng buộc

.v.v NoSQL bỏ qua tính toàn vẹn của dữ liệu và transaction để đổi lấy hiệu suất nhanh và khả năng mở rộng [8]

NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn, ví dụ như FaceBook sử dụng Cassandra do FaceBook phát triển, Google phát triển và sử dụng BigTable, [9]

2 MongoDB:

Hình 3 MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là cơ sở dữ liệu thuộc NoSql và được hàng triệu người sử dụng MongoDB là một database hướng tài liệu, các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như cơ sở dữ liệu quan hệ nên truy vấn sẽ rất nhanh [10]

Với cơ sở dữ liệu quan hệ thì có khái niệm bảng, các cơ sở dữ liệu quan

hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB thì sẽ dùng khái niệm là collection thay vì bảng So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS [10]

Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định [10]

Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB [10]

Các khái niệm chính của MongoDB:

− Database: Database là một container vật lý cho các collection Mỗi

database được thiết lập cho riêng nó một danh sách các files hệ thống

files Một máy chủ MongoDB đơn thường có nhiều database [10]

− Collection: Collection là một nhóm các documents của MongoDB Nó

tương đương với một table trong RDBMS Một Collection tồn tại trong

một cơ sở dữ liệu duy nhất Các collection ko tạo nên một schema Documents trong collection có thể có các fields khác nhau Thông thường, tất cả các documents trong collections có mục đích khá giống

nhau hoặc liên quan tới nhau [10]

− Document: Một document là một tập hợp các cặp key-value Documents

có schema động Schema động có nghĩa là documents trong cùng một collection không cần phải có cùng một nhóm các fields hay cấu trúc giống nhau, và các fields phổ biến trong các documents của collection

có thể chứa các loại dữ liệu khác nhau [10]

3 Ưu và nhược điểm của MongoDB:

Ưu điểm:

− Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng file JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu [10]

− Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi thêm, xóa hay sửa dữ liệu không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS [10]

− MongoDB rất dễ mở rộng theo chiều ngang Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster [10]

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

− Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng [10]

− Hiệu năng cao: Tốc độ truy vấn của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ Với một lượng dữ liệu đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp

100 lần so với MySQL [10]

Nhược điểm:

− MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với MongoDB thì phải hết sức cẩn thận [10]

− Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác

về value do đó key sẽ bị lặp lại Không hỗ trợ join nên dễ bị dữ thừa dữ liệu [10]

− Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện [10]

4 Công dụng của MongoDB trong đề tài:

MongoDB là một cơ sở dữ liệu NoSQL lưu trữ dữ liệu trong các tài liệu dưới dạng JSON với các lược đồ động Nó đơn giản hóa việc tích hợp dữ liệu

và cung cấp khả năng mở rộng tốt hơn so với cơ sở dữ liệu quan hệ truyền thống

MongoDB được thiết kế nhằm cấu trúc các lược đồ dữ liệu theo hướng mà ứng dụng có thể trả về tất cả dữ liệu cần thiết trong một lần truy xuất duy nhất Điều này làm tăng tốc độ phản hồi của website

Ở các website thương mại điện tử, các phương thức thanh toán sẽ thu thập thông tin chi tiết thanh toán từ khách hàng Vì vậy, bảo mật thông tin thanh toán cũng như tài khoản khách hàng là một điều vô cùng quan trọng MongoDB cho phép thực hiện mã hóa các tệp dữ liệu và có thể thực hiện mã hóa chỉ ở phía khách hàng một cách tự động

Địa chỉ, số điện thoại, email và số thẻ tín dụng phải được xác thực để đảm bảo trang web tránh những người dùng “chưa được xác minh” truy cập và tránh những sai lầm khiến khách hàng không nhận được sản phẩm MongoDB cung cấp các công cụ để xác thực lược đồ ở cấp collection Người dùng cũng sẽ muốn triển khai xác thực cấp ứng dụng

5 Cài đặt:

Cài đặt MongoDB Shell:

Truy cập trang https://www.MongoDB.com/download-center#community để tải file cài đặt MongoDB Shell

Hình 10 Cài đặt MongoDB

Bỏ chọn cài đặt MongoDB Compass và chọn next (Nếu chọn luôn cài Mongo Compass ở đây thì thường xảy ra lỗi, nên cài MongoDB Shell trước rồi cài MongoDB Compass sau)

Hình 11 Cài đặt MongoDB

Chọn “install” để chương trình cài đặt

Hình 12 Cài đặt MongoDB

Đợi quá trình cài đặt diễn ra

Hình 13 Cài đặt MongoDB

Chọn finish để kết thúc quá trình cài đặt mongo shell

Cài đặt MongoDB Compass (Giao diện để sử dụng MongoDB):

Truy cập trang https://www.MongoDB.com/try/download/compass để tải file cài đặt MongoDB Compass

Hình 14 Cài đặt MongoDB Compass

Chạy file cài đặt MongoDB compass vừa tải

Hình 15 Cài đặt MongoDB Compass

Chọn “next” ở bước đầu tiên

Hình 16 Cài đặt MongoDB Compass

Chọn nơi lưu Mongo compass, chọn “next” và nhấn “install” để bắt đầu cài đặt

Hình 17 Cài đặt MongoDB Compass

Hình 18 Cài đặt MongoDB Compass

Chọn “finish” để kết thúc quá trình cài MongoDB compass

React cũng sử dụng khái niệm là Virtual DOM (DOM ảo) Virtual DOM tạo ra bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ Sau đó, ở mỗi vòng lặp, nó liệt kê những thay đổi và sau đó là cập nhật lại sự thay đổi trên DOM của trình duyệt một cách hiệu quả Điều này cho phép ta viết các đoạn code như thể toàn bộ trang được render lại dù thực tế là Reactjs chỉ render những component hay subcomponent nào thực sự thay đổi [11]

Lịch sử [12]:

− React ra đời vào năm 2013

− Khởi nguyên các trang web chỉ là các trang html tĩnh Sau đó css và js ra đời giúp người dùng tương tác và làm ra những trang web đẹp hơn nhưng đơn giản chỉ là gửi và nhận file giữa browser và server

− Sau đó JQuery ra đời với một tính năng nổi bật là Ajax bây giờ người

dùng có thể chỉ cần load trang web 1 lần mọi sự cập nhật data sẽ dùng Ajax Kể từ đây trang web của chúng ta giống hơn với các chương trình trên Desktop Tất cả có thể xử lý trên 1 page duy nhất

− Năm 2010, AngularJS được tạo bởi Google ra đời thực sự đã tạo nên một chuẩn mực để xây dụng các trang web sau này (Single Page Application) Mọi thứ được google tổ chức theo mô hình MVVM và đóng gói nó thành những module việc này phù hợp để chúng ta phát triển những trang web lớn với nhiều developer

− Mặc dù AngularJS là một cuộc cách mạng giúp định hình nghề end sau này Nhưng nó có một vấn đề là trên một trang web như Facebook, sẽ có rất nhiều event được sinh ra tại nhiều khu vực khác nhau trên trang web như box tin nhắn, các quản cáo, bài post… Lúc này nếu ta dùng AngularJS số lượng dòng code sẽ rất nhiều rất khó để bảo trì và fix bug khi có sự cố xảy ra

Front-− Để giải quyết vấn đề đó năm 2013 các kỹ sư ở Facebook đã ra đời khái niệm React giải pháp này thực sự đã giải quyết được vấn đề trên

− Năm 2014, AngularJS đã tái cấu trúc và đưa ra một kiến trúc mới là Angular 2 viết lại toàn bộ thư viện Việc này đã dẫn đến một lượng lớn lập trình viên thay vì bỏ công sức học lại Angular 2, họ đã chuyển sang học React

Ưu điểm:

− Dễ sử dụng: React hoạt động dựa trên cơ chế kết hợp giữa HTML và

JavaScrip, bởi vậy mà nó khá đơn giản và dễ dùng với những ai đã nắm vững kiến thức về JavaScrip Bên cạnh đó, người dùng có thể thêm code vào hàm render một cách dễ dàng mà không cần nối chuỗi [13]

− Hiệu suất cao với DOM ảo: React có khả năng cập nhật quá trình DOM

và tự tạo cho bản thân các virtual DOM, sau đó host chúng vào bộ nhớ Hoạt động này thúc đẩy việc tự động cập nhật tự động của virtual ngay khi DOM thực thế có thay đổi, giúp tốc độ của các ứng dụng không bị gián đoạn [13]

− Hỗ trợ Reusable Component có trong Java: React mang lại khả năng tái

sử dụng các components đã phát triển thành những ứng dụng khác với chức năng không đổi [13]

− Viết component đơn giản, dễ dàng hơn với JSX Bên cạnh đó, phần mở

rộng còn giúp cho render có nhiều lựa chọn hơn [13]

− Thân thiện với SEO: Yếu tố này giúp React gặt hái rất nhiều thành công

bởi hầu hết các công cụ khác đều không hỗ trợ SEO tốt như nó React mang lại khả năng tạo giao diện UI có khả năng truy cập vào mọi công

cụ tìm kiếm Bên cạnh đó, tốc độ cũng là ưu thế rất lớn của React trong việc cải thiện SEO [13]

Nhược điểm:

− 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 [14]

− 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 [14]

− 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 [14]

IV REACTJS:

ExpressJS:

Hình 20 ExpressJS

Giới thiệu:

ExpressJS là một framework được xây dựng trên nền tảng của Node.js Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile ExpressJS hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng [15]

Tổng hợp một số chức năng chính của ExpressJS [15]:

− Thiết lập các lớp trung gian để trả về các HTTP request

− Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

− Cho phép trả về các trang HTML dựa vào các tham số

Ưu điểm:

− Phát triển máy chủ nhanh chóng: ExpressJS cung cấp nhiều tính năng

dưới dạng các hàm để dễ dàng sử dụng ở bất kỳ đâu trong chương trình Điều này đã loại bỏ nhu cầu viết mã từ đó tiết kiệm được thời gian [16]

− Phần mềm trung gian Middleware: Đây là phần mềm trung gian có

quyền truy cập vào cơ sở dữ liệu, yêu cầu của khách hàng và những phần mềm trung gian khác Phần mềm Middleware này chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của ExpressJS [16]

− Định tuyến - Routing: Express js cung cấp cơ chế định tuyến giúp duy

trì trạng thái của website với sự trợ giúp của URL [16]

− Tạo mẫu - Templating: Các công cụ tạo khuôn mẫu được Express.js

cung cấp cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ [16]

Gỡ lỗi - Debugging: Để phát triển thành công các ứng dụng web không thể

thiếu đi việc gỡ lỗi Giờ đây với ExpressJS việc gỡ lỗi đã trở nên dễ dàng hơn nhờ khả năng xác định chính xác các phần ứng dụng web có lỗi [16]

CHƯƠNG 2 TỔNG QUAN VỀ CÁC WEBSITE TƯƠNG TỰ

Trải qua gần 10 năm xây dựng và phát triển, từ một cửa hàng đầu tiên chuyên

về các dòng sản phẩm Smartphone với số vốn vỏn vẹn chỉ 50 triệu đồng tại 111 Trần Đăng Ninh – Cầu Giấy – Hà Nội, ClickBuy đã không ngừng phát triển lớn mạnh và đã liên tiếp mở rất nhiều chuỗi cửa hàng ClickBuy trên toàn quốc trong những năm tiếp theo

ClickBuy – Chọn là mua Với tiêu chuẩn ” Chất lượng – Giá rẻ – Dịch Vụ

Thương Mại bảo vệ – Hậu mãi tốt ” cùng với câu Slogan ” chọn là mua ” ClickBuy đã luôn là một trong những sự lựa chọn số 1 của người mua về những dòng loại sản phẩm công nghệ tiên tiến mưu trí, cũng như là nơi người mua hoàn toàn có thể trao trọn niềm tin vào đội ngũ sửa chưa của Cửa hàng

2 Ưu điểm:

Điểm nổi bật của tính năng

-Giao diện thu hút và đẹp mắt: Khách hàng của bạn sẽ nhanh chóng bị thu hút bởi những sản phẩm của bạn ngay trong lần ghé thăm website đầu tiên

-Đề mục được phân bố rõ ràng mạch lạc Điều này không chỉ khiến khách hàng

có cái nhìn toàn diện về các sản phẩm của doanh nghiệp mà còn giúp họ dễ dàng chọn được cho mình sản phẩm ưng ý

Tất cả các tính năng

- Giao diện ứng dụng công nghệ Responsive giúp website hiển thị đẹp mắt với mọi dòng máy Bạn có thể tùy chỉnh các module, font chữ, cỡ chữ, màu sắc dễ dàng

- Tốc độ tải trang vượt trội, điều hướng mượt mà

3 Các tính năng nổi bật:

Nhận hàng thanh toán tại nhà COD

Đặt hàng thông qua hotline, website, facebook, youtube… Clickbuy sẽ liên hệ quý khách để xác nhận đơn hàng

Sau khi quý khách xác nhận đặt hàng, Clickbuy sẽ chuẩn bị máy và quà tặng, đóng gói cẩn thận gửi đến địa chỉ khách hàng

Phí vận chuyển:

Chuyển khoản đặt cọc trước ( 200k cho sản phẩm dưới 5 triệu, 500k cho sp trên

5 triệu)

Chuyển khoản thanh toán trước, nhận hàng sau

Đặt hàng thông qua hotline, website, facebook, youtube… Clickbuy sẽ liên hệ khách để hướng dẫn mua hàng, chuyển tiền

Chuyển tiền vào tài khoản Clickbuy

Walmart là một trong những nhà dẫn đầu trong ngành công nghiệp bán

lẻ trên toàn thế giới Walmart được thành lập bởi Sam Walton vào năm 1962 Với lịch sử phát triển lâu đời, ngày nay Walmart đã xây dựng cho mình một đế chế hùng mạnh trong ngày bán lẻ ở nhiều quốc gia trên thế giới với hơn 12.000 cửa hàng Cùng với sự phát triển của giai đoạn cách mạng công nghệ 4.0, Walmart đã cho ra đời nền tảng thương mại điện tử để bắt kịp với xu hướng và tiếp cận ngày càng nhiều khách hàng tiềm năng hơn Điều này được thể hiện qua việc doanh số bán hàng của Walmart tại Hoa Kỳ đã có mức tăng 69% trong quý cuối cùng của năm 2020 so với cùng kì năm 2019 bất chấp đại dịch Covid

19 đang hoành hành

Ước tính nền tảng thương mại điện tử Walmart Marketplace đã bổ sung khoảng 70.000 nhân viên bán hàng trực tuyến vào cuối năm 2020 Với đà phát triển này, Walmart dự tính con số này sẽ tăng thêm 146% vào cuối năm 2022

Lưu lượng truy cập vào website trung bình mỗi tháng: 456,7 triệu

2 Ưu điểm:

− Nội dụng hiển thị trên website luôn được làm mới: Hệ thống của