1. Trang chủ
  2. » Luận Văn - Báo Cáo

Tiểu luận chuyên ngành đề tài tìm hiểu công nghệ mern stack và áp dụng xây dựng website thương mại điện tử

128 6 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Tìm Hiểu Công Nghệ MERN Stack Và Áp Dụng Xây Dựng Website Thương Mại Điện Tử
Tác giả Trần Lê Thanh Tuyền, Huỳnh Tấn Lộc
Người hướng dẫn ThS. Nguyễn Trần Thi Văn
Trường học Trường Đại Học Sư Phạm Kỹ Thuật
Chuyên ngành Công Nghệ Thông Tin
Thể loại tiểu luận chuyên ngành
Năm xuất bản 2022
Thành phố TP. Hồ Chí Minh
Định dạng
Số trang 128
Dung lượng 6,37 MB

Nội dung

HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAOTIỂU LUẬN CHUYÊN NGÀNHĐề tài: TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬGVHD: ThS... HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤ

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

TIỂU LUẬN CHUYÊN NGÀNH

Trang 2

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

TIỂU LUẬN CHUYÊN NGÀNH

Trang 3

NHIỆM VỤ THỰC HIỆN TIỂU LUẬN CHUYÊN NGÀNH

Họ và tên sinh viên 1: Huỳnh Tấn Lộc MSSV: 19110236

Họ và tên sinh viên 2: Trần Lê Thanh Tuyền MSSV: 19110012

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

Giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn

Ngày nhận đề tài: 30/08/2022 Ngày nộp đề tài: 19/12/2022

1 Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

2 Nội dung thực hiện đề tài: Tìm hiểu và triển khai công nghệ MERN Stack cho dự án:

o Front-end: ReactJS

o Back-end: Express

o Database: MongoDB Atlas

o Xây dựng website thương mại điện tử sử dụng công nghệ MERN Stack

o Triển khai website trên server

3 Sản phẩm: Website thương mại điện tử

GIẢNG VIÊN HƯỚNG DẪN(Ký & ghi rõ họ tên)

Trang 4

Trường Đại học Sư phạm Kỹ thuật

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

Họ và tên sinh viên 1: Huỳnh Tấn Lộc MSSV: 19110236

Họ và tên sinh viên 2: Trần Lê Thanh Tuyền MSSV: 19110012

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

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNGWEBSITE THƯƠNG MẠI ĐIỆN TỬ

Giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn

NHẬN XÉT

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

2 Ưu điểm:

3 Khuyết điểm:

Trang 6

Trường Đại học Sư phạm Kỹ thuật

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

Họ và tên sinh viên 1: Huỳnh Tấn Lộc MSSV: 19110236

Họ và tên sinh viên 2: Trần Lê Thanh Tuyền MSSV: 19110012

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

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERN STACK VÀ ÁP DỤNG XÂY DỰNGWEBSITE THƯƠNG MẠI ĐIỆN TỬ

Giảng viên hướng dẫn: TS Lê Văn Vinh

NHẬN XÉT

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

2 Ưu điểm:

3 Khuyết điểm:

Trang 7

Giảng viên phản biện(Ký & ghi rõ họ tên)

Trang 8

LỜI CẢM ƠN

Để hoàn thành tốt đề tài này, chúng em xin gửi lời cảm ơn chân thành đếncác quý thầy cô trong khoa Đào tạo Chất Lượng Cao nói chung và ngành CôngNghệ Thông Tin nói riêng đã luôn tận tình truyền đạt những kiến thức, kỹ năng bổích trong suốt quá trình học tập Bên cạnh đó, chúng em xin cảm ơn trường Đạihọc Sư phạm Kỹ thuật TP.HCM đã tạo điều kiện về cơ sở vật chất cũng như cácđiều kiện cần thiết khác giúp chúng em có môi trường học tập và thực hiện đề tàimột cách thuận lợi nhất

Đặc biệt, chúng em xin gửi lời cảm ơn chân thành đến giảng viên, thạc sĩNguyễn Trần Thi Văn, người đã trực tiếp hỗ trợ chúng em trong suốt quá trìnhthực hiện đề tài Chúng em cảm ơn thầy đã đưa ra những lời khuyên từ kinhnghiệm thực tiễn của mình để định hướng cho nhóm đi đúng với yêu cầu của đềtài Bên cạnh đó, chúng em cảm ơn thầy đã luôn giải đáp thắc mắc và đưa ranhững góp ý, chỉnh sửa kịp thời giúp chúng em khắc phục nhược điểm và hoànthành đúng thời hạn đã đề ra

Đề tài được chúng em thực hiện trong khoảng thời gian không quá dài, vớinhững kiến thức còn hạn chế về mặt kỹ thuật và kinh nghiệm trong việc triển khaimột dự án phần mềm Do đó, trong quá trình thực hiện đề tài có những thiếu sót làđiều không thể tránh khỏi nên chúng em rất mong nhận được những ý kiến đónggóp quý báu từ quý thầy cô để có thể cải thiện về sau

Cuối lời, chúng em kính chúc quý thầy cô luôn dồi dào sức khỏe và thànhcông hơn nữa trong sự nghiệp trồng người Một lần nữa chúng em xin chân thànhcảm ơn!

Tp Hồ Chí Minh, ngày 30 tháng 12 năm 2022 Nhóm sinh viên thực hiện

Trang 10

MỤC LỤC

LỜI CẢM ƠN 6

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

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

1.3 Nội dung nghiên cứu 17

1.4 Phương pháp nghiên cứu 17

2.1 Giới thiệu về Technical Stack 18

2.1.1 Technical Stack là gì? 18

2.1.2 Một số Stack thông dụng 18

2.2 Giới thiệu về MERN Stack 18

2.2.1 Định nghĩa MERN Stack 18

2.2.2 Cách thức hoạt động của MERN Stack 19

2.2.3 Vai trò của MERN Stack 19

2.3 Giới thiệu về MongoDB 20

2.3.1 Định nghĩa MongoDB 20

2.3.2 Định nghĩa MongoDB Atlas 20

2.3.3 Vai trò của MongoDB 21

2.4 Giới thiệu về ExpressJS 21

2.4.1 Định nghĩa ExpressJS 21

2.4.2 Một số tính năng của Express 22

2.4.3 Vai trò của Express 22

2.5 Giới thiệu về ReactJS 23

2.5.1 Định nghĩa ReactJS 23

2.5.2 Vai trò của ReactJS 23

2.5.3 Định nghĩa JSX 23

2.5.4 Định nghĩa Virtual Dom 24

2.5.4 Định nghĩa Hooks 24

2.5.5 Định nghĩa Component 24

2.6 Giới thiệu về NodeJS 25

2.6.1 Định nghĩa NodeJS 25

Trang 11

2.6.2 Một số tính năng của NodeJS 25

2.6.3 Vai trò của NodeJS 26

2.7 Giới thiệu về Redux 26

2.7.1 Định nghĩa Redux 26

2.7.2 Cách thức hoạt động của Redux 27

2.7.3 Vai trò của Redux 28

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

3.1.1 Website nước ngoài 29

3.1.1.1 https://fruitworld.co.nz/ 29

3.1.1.2 https://freshindiaorganics.com/ 32

3.1.2 Website trong nước 34

3.1.2.1 https://hoamau24h.com/ 34

3.1.2.2 https://bio-ngon.com/ 37

3.1.3 Kết luận sau khi khảo sát 39

3.1.3.1 Điểm giống nhau của các websites 39

3.1.3.2 Điểm khác nhau của các websites 40

3.2 Phân tích yêu cầu 41

3.2.1 Yêu cầu chức năng 41

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

3.2.3 Chức năng các actors 41

3.2.3.1 Chức năng của guest 42

3.2.3.2 Chức năng của user 43

3.2.3.3 Chức năng của admin 44

3.2.4 Lược đồ Use Case 45

3.2.4.1 Module End-User 45

3.2.4.1 Module Administrator 46

3.2.5 Đặc tả Use Case 47

3.2.5.1 Guest 47

3.2.5.2 User 56

3.2.5.3 Administrator 68

1 System architecture 82

Trang 12

2 Class Diagram 83

3 Sequence Diagram 84

3.1 <SD001> Administrator Login 84

3.2 <SD002> Administrator Create New Product 85

3.3 <SD003> Administrator Update Product 86

3.4 <SD004> Administrator Delete Product 87

3.5 <SD005> Administrator Change The Order Status 88

3.6 <SD006> Administrator View Statistical Page 89

3.7 <SD007> Guest Filter Product 90

3.8 <SD008> User Add to Cart 91

3.9 <SD009> User Checkout 92

3.10 <SD0010> User View Order Tracking 93

4 Entity Relation Diagram 94

4.1 ERD 94

4.2 Database Description 95

4.2.1 Product Table 95

4.2.2 User Table 95

4.2.3 Order Table 96

4.2.4 Category Table 96

4.2.5 DeliveryInfo Table 97

5 Thiết kế giao diện 97

5.1 Thiết kế giao diện màn hình Admin 97

5.1.1 Giao diện đăng nhập (Admin) 97

5.1.2 Giao diện trang chủ (Admin) 98

5.1.3 Giao diện trang quản lý người dùng 99

5.1.4 Giao diện quản lý user bị vô hiệu hoá 100

5.1.5 Giao diện quản lý sản phẩm 100

5.1.6 Giao diện quản lý các sản phẩm bị xoá 101

5.1.7 Giao diện tạo sản phẩm mới 102

5.1.8 Giao diện cập nhật sản phẩm 103

5.1.9 Giao diện danh mục sản phẩm 104

Trang 13

5.1.10 Giao diện thêm danh mục sản phẩm mới 105

5.1.11 Giao diện cập nhật danh mục sản phẩm 105

5.1.12 Giao diện quản lý danh mục sản phẩm bị xoá 106

5.1.13 Giao diện quản lý hoá đơn 107

5.1.14 Giao diện thống kê 108

5.2 Thiết kế giao diện User 109

5.2.1 Giao diện đăng nhập 109

5.2.2 Giao diện đăng nhập 110

5.2.3 Giao diện Header 110

5.2.4 Giao diện Footer 111

5.2.5 Giao diện trang chủ 111

5.2.6 Giao diện chi tiết sản phẩm 113

5.2.7 Giao diện danh mục sản phẩm 114

5.2.8 Giao diện giỏ hàng 115

5.2.9 Giao diện thêm địa chỉ giao hàng 116

5.2.10 Giao diện sổ địa chỉ 117

5.2.11 Giao diện thanh toán 117

1 Các công cụ 119

2 Các công nghệ 119

3 Cài đặt 119

4 Deploy 119

5 Kiểm thử 120

1 Kết quả 122

2 Ưu điểm: 122

3 Nhược điểm: 122

4 Hướng phát triển 122

TÀI LIỆU THAM KHẢO 124

Trang 14

DANH MỤC BẢNG

Bảng 1 Chức năng của guest 42

Bảng 2 Chức năng của user 44

Bảng 3 Chức năng của admin 44

Bảng 4 <Guest> Register 48

Bảng 5 <Guest> Login 49

Bảng 6 <Guest> View Product List 50

Bảng 7 <Guest> View Detailed Product 52

Bảng 8 <Guest> Filter Product By Keyword 53

Bảng 9 <Guest> Search Product 54

Bảng 10 <Guest> Send Message 55

Bảng 11 <Guest> View Product By Category 56

Bảng 12 <User> Logout 57

Bảng 13 <User> Edit Profile 58

Bảng 14 <User> Add To Cart 60

Bảng 15 <User> Remove From Cart 60

Bảng 16 <User> Using Voucher 62

Bảng 17 <User> Comment Product 63

Bảng 18 <User> Place Order 64

Bảng 19 <User> Checkout 66

Bảng 20 <User> Order Tracking 67

Bảng 21 <User> Cancel Order 68

Bảng 22 <Administrator> Login 69

Bảng 23 <Administrator> Logout 70

Bảng 24 <Administrator> Delete Account 72

Bảng 25 <Administrator> Create Category 73

Bảng 26 <Administrator> Update Category 74

Bảng 27 <Administrator> Delete Category 74

Bảng 28 <Administrator> Create Product 76

Bảng 29 <Administrator> Update Product 77

Bảng 30 <Administrator> Delete Product 77

Bảng 31 <Administrator> View List Order 78

Bảng 32 <Administrator> Change Status Order 79

Bảng 33 <Administrator> Access Admin Page 80

Bảng 34 <Administrator> View Statistic 81

Bảng 35 Đặc tả giao diện đăng nhập admin 98

Bảng 36 Đặc tả giao diện trang chủ admin 98

Bảng 37 Đặc tả giao diện quản lý người dùng 99

Bảng 38 Đặc tả giao diện quản lý user bị vô hiệu hoá 100

Trang 15

Bảng 39 Đặc tả giao diện quản lý sản phẩm 101

Bảng 40 Đặc tả giao diện quản lý các sản phẩm bị xoá 101

Bảng 41 Đặc tả giao diện tạo sản phẩm mới 102

Bảng 42 Đặc tả giao diện cập nhật sản phẩm 103

Bảng 43 Đặc tả giao diện danh mục sản phẩm 104

Bảng 44 Đặc tả giao diện thêm danh mục sản phẩm mới 105

Bảng 45 Đặc tả giao diện cập nhật danh mục sản phẩm 106

Bảng 46 Đặc tả giao diện quản lý danh mục sản phẩm bị xoá 106

Bảng 47 Đặc tả giao diện quản lý hoá đơn 107

Bảng 48 Đặc tả giao diện thống kê 108

Bảng 49 Đặc tả giao diện đăng ký 109

Bảng 50 Đặc tả giao diện đăng nhập 110

Bảng 51 Đặc tả giao diện Header 110

Bảng 52 Đặc tả giao diện Footer 111

Bảng 53 Đặc tả giao diện trang chủ 112

Bảng 54 Đặc tả giao diện chi tiết sản phẩm 113

Bảng 55 Đặc tả giao diện danh mục sản phẩm 114

Bảng 56 Đặc tả giao diện giỏ hàng 115

Bảng 57 Đặc tả giao diện thêm địa chỉ giao hàng 116

Bảng 58 Đặc tả giao diện sổ địa chỉ 117

Bảng 59 Đặc tả giao diện thanh toán 118

Bảng 60 Kiểm thử hệ thống 121

Trang 16

DANH MỤC HÌNH

Hình 1 Định nghĩa MERN Stack 18

Hình 2 Định nghĩa MongoDB 20

Hình 3 Định nghĩa ExpressJS 21

Hình 4 Định nghĩa React JS 23

Hình 5 Định nghĩa Virtual Dom 24

Hình 6 Định nghĩa NodeJS 25

Hình 7 Định nghĩa Redux 26

Hình 8 Cách thức hoạt động của Redux 27

Hình 9 Trang chủ website fruitworld.co.nz 29

Hình 10 Trang chi tiết sản phẩm website fruitworld.co.nz 30

Hình 11 Trang giỏ hàng website fruitworld.co.nz 30

Hình 12 Trang chủ website freshindiaorganics.com 32

Hình 13 Trang danh sách sản phẩm website freshindiaorganics.com 32

Hình 14 Trang liên hệ website freshindiaorganics.com 33

Hình 15 Trang chủ website hoamau24h.com 34

Hình 16 Trang danh mục sản phẩm website hoamau24h.com 35

Hình 17 Trang blog website hoamau24h.com 35

Hình 18 Trang chủ website bio-ngon.com 37

Hình 19 Trang danh sách các sản phẩm đã xem website bio-ngon.com 37

Hình 20 Trang thanh toán website bio-ngon.com 38

Hình 21 Trang chi tiết sản phẩm website bio-ngon.com 38

Hình 22 Use Case Diagram – User 45

Hình 23 Use Case Diagram – Admin 46

Hình 24 UC Guest – Register 47

Hình 25 UC Guest – Login 48

Hình 26 UC Guest - View Product List 50

Hình 27 UC Guest View Product Details 51

Hình 28 UC Guest Filter Product by Keyword 52

Hình 29 UC Guest Search Product 53

Hình 30 UC Guest Send Message 54

Hình 31 UC Guest View Product by Category 55

Hình 32 UC User Logout 56

Hình 33 UC User Edit Profile 57

Hình 34 UC User Manager Cart 59

Hình 35 UC User Using Voucher 61

Hình 36 UC User Comment Product 62

Hình 37 UC User Place Order 63

Hình 38 UC User Checkout 65

Trang 17

Hình 39 UC User View Order Tracking 66

Hình 40 UC User Cancel Order 67

Hình 41 UC Administrator Login 68

Hình 42 UC Administrator Logout 70

Hình 43 UC Administrator Manage User 71

Hình 44 UC Administrator Manage Product 75

Hình 45 UC Administrator View List Order 77

Hình 46 UC Administrator Access Admin Page 79

Hình 47 UC Administrator View Statistic 80

Hình 48 Website Architecture 82

Hình 49 System Architecture 82

Hình 50 Class Diagram 83

Hình 51 SD Administrator Login 84

Hình 52 SD Administrator Create New Product 85

Hình 53 SD Administrator Update Product 86

Hình 54 SD Administrator Delete Product 87

Hình 55 SD Administrator Change The Order Status 88

Hình 56 SD Administrator View Statistical Page 89

Hình 57 SD Guest Filter Product 90

Hình 58 SD User Add to Cart 91

Hình 59 SD User Checkout 92

Hình 60 SD User View Order Tracking 93

Hình 61 ERD 94

Hình 62 Product Table 95

Hình 63 User Table 95

Hình 64 Order Table 96

Hình 65 Category Table 96

Hình 66 DeliveryInfo Table 97

Hình 67 Login Page Admin 97

Hình 68 Home Page Admin 98

Hình 69 Manager User Page 99

Hình 70 Manger Disable User Page 100

Hình 71 Manager Product Page 100

Hình 72 Manager Disable Product Page 101

Hình 73 Add Product Page 102

Hình 74 Update Product Page 103

Hình 75 Manager Category Page 104

Hình 76 Add Category Page 105

Hình 77 Update Category Page 105

Hình 78 Manager Disable Category Page 106

Trang 18

Hình 79 Order Admin Page 107

Hình 80 Statistic Page 108

Hình 81 Sign Up Page 109

Hình 82 Login Page 110

Hình 83 Header 110

Hình 84 Footer 111

Hình 85 Home Page 1 111

Hình 86 Home Page 2 112

Hình 87 Detail Product Page 1 113

Hình 88 Detail Product Page 2 113

Hình 89 Category Page 114

Hình 90 Cart Page 115

Hình 91 Address Page 116

Hình 92 Manager Address Page 117

Trang 19

CHƯƠNG 1: TỔNG QUAN

Hình 93 Payment Page 117

CHƯƠNG 1: TỔNG QUAN

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

Trong một vài năm trở lại đây khi các tiêu chuẩn an toàn vệ sinh thực phẩm đượcchú trọng và đề cao đã có rất nhiều cửa hàng nông sản sạch ra đời nhằm đáp ứng nhu cầungười tiêu dùng Mô hình kinh doanh khá thành công nên các nhà cung cấp nhanh chóng

mở rộng mô hình này thành mạng lưới kinh doanh trực tuyến Việc quảng bá và giớithiệu đến khách hàng các sản phẩm trong từng thời điểm một cách hiệu quả và kịp thời làyếu tố quan trọng giúp đưa thương hiệu quảng bá tới đông đảo khách hàng

Với sự phát triển mạnh mẽ của công nghệ thông tin như ngày nay thì vấn đề trên

có thể được giải quyết dễ dàng Chỉ với một chiếc máy tính được kết nối internet và mộtvài thao tác đơn giản thì họ đã có thể lựa chọn được cho mình những món nông sản tươingon Bên cạnh đó việc kinh doanh trực tuyến còn giúp cửa hàng quản lý được việc muabán hiệu quả hơn so với việc quản lý thủ công trên giấy tờ Đồng thời khi sử dụng hìnhthức kinh doanh này sẽ vẫn đảm bảo các dữ liệu về sản phẩm, khách hàng được lưu trữmột cách an toàn

Hiểu được các vấn đề trên cũng như mong muốn đưa các sản phẩm nông sản sạchđến với nhiều người tiêu dùng, nhóm chúng em quyết định xây dựng website thương mạiđiện tử về kinh doanh nông sản Đề tài được chúng em thực hiện với mong muốn xâydựng một hệ thống bán hàng trực tuyến thân thiện vừa giúp khách hàng dễ dàng muasắm, tiết kiệm thời gian, vừa có thể giúp doanh nghiệp thuận lợi quảng bá, thu hút ngườitiêu dùng

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

Trong đề tài lần này, nhóm chúng em tập trung nghiên cứu công nghệ MERN Stack

và vai trò của nó đối với ngành lập trình hiện nay Từ đó chúng em có thể áp dụng công

19

Trang 20

CHƯƠNG 1: TỔNG QUAN

nghệ này để tiến hành xây dựng một website thương mại điện tử có đầy đủ các chức năngnhư sau:

- Giới thiệu danh sách sản phẩm và thông tin chi tiết cho từng sản phẩm

- Hỗ trợ khách hàng tương tác với người quản trị thông qua kết nối messenger

- Mua hàng và thanh toán trực tuyến

- Hỗ trợ chủ doanh nghiệp có thể quản lý các sản phẩm

- Hỗ trợ chủ doanh nghiệp quản lý các hoá đơn và thông tin người dùng

1.3 Nội dung nghiên cứu

- Tìm hiểu công nghệ MERN Stack

- Tìm hiểu cách quản lý cơ sở dữ liệu trên Mongo Atlas

- Tìm hiểu công nghệ Express JS với mô hình MVC

- Tìm hiểu về công nghệ React JS và Redux

- Tìm hiểu Node JS

- Tìm hiểu Vercel để triển khai một website và API

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

Để thực hiện đề tài nghiên cứu, nhóm đã sử dụng các phương pháp sau:

- Phương pháp nghiên cứu tài liệu, đọc ebook, các tài liệu tham khảo, các bài viết,các video liên quan đến MERN Stack

- Phương pháp chuyên gia: nhờ sự góp ý, giúp đỡ, tư vấn từ giáo viên hướng dẫn vàcác thầy cô trong khoa Đào tạo chất lượng cao trường Đại học Sư phạm Kỹ thuật

TP HCM

20

Trang 21

CHƯƠNG 1: TỔNG QUAN

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

2.1 Giới thiệu về Technical Stack

2.1.1 Technical Stack là gì?

Technical Stack là một tập hợp các công nghệ hoặc phần mềm phối hợp chung vớinhau tạo thành một nền tảng để ứng dụng có thể hoạt động được

2.1.2 Một số Stack thông dụng

Bảng 1 Một số Stack thông dụng

2.2 Giới thiệu về MERN Stack

2.2.1 Định nghĩa MERN Stack

Hình 1 Định nghĩa MERN Stack

21

Trang 22

CHƯƠNG 1: TỔNG QUAN

MERN Stack là nguyên bộ của bốn công nghệ mã nguồn mở M viết tắt củaMongoDB và nó là giải pháp cho cơ sở dữ liệu E viết tắt của Express JS, nó là côngnghệ của Node JS và được dùng để xây dựng ứng dụng Node JS R viết tắt của React

JS là thư viện dùng để xây dựng giao diện phía client và N viết tắt của Node JS là mộtJavascript runtime được xây dựng dựa trên engine Javascript V8 của Chrome Kết hợphợp bốn công nghệ trên tạo thành một MERN Stack

2.2.2 Cách thức hoạt động của MERN Stack

Kiến trúc của MERN cho phép các lập trình viên dễ dàng xây dựng nên kiến trúc

ba lớp của một trang web (frontend, backend, database) Tất cả đều được xây dựngbằng ngôn ngữ Javascript và JSON

Tại phía client, React sẽ chịu trách nhiệm xử lý các tương tác và tạo ra các giaodiện phía người dùng Tại phía server, Node và Express sẽ chịu trách nhiệm xử lý cácnghiệp vụ về logic, authentication do phía client gửi về khi người dùng thực hiện cáctương tác, sự kiện MongoDB bên phía server sẽ chịu trách nhiệm tổ chức và lưu trữ

dữ liệu

Client và Server sẽ giao tiếp với nhau bằng cách gửi các request và response Cácrequest và response này sẽ được gửi ngầm bằng công nghệ AJAX giúp người dùngkhông cần tải lại trang web khi thực hiện các tương tác

2.2.3 Vai trò của MERN Stack

- Ưu điểm tốt nhất của MERN Stack là tách biệt riêng hai phần frontend vàbackend Do đó khi làm việc trong một dự, các thành viên trong dự án có thể chiathành từng bộ phận và tập trung xây dựng frontend, backend

- Cho phép xây dựng các Single Page Application (SPA) mang đến cho người dùngmột trải nghiệm tối ưu nhất

22

Trang 23

- Node JS hoạt động trên cả hệ điều hành Linux và Window, vì vậy không bị ràngbuộc bởi hiệu hành khi sử dụng.

- MongoDB có khả năng quản lý một lượng lớn dữ liệu, khi cần thêm thuộc tínhmới cho bảng mà không cần cập nhật lại toàn bộ bảng vì MongoDB không bị ràngbuộc chặt chẽ bởi quan hệ

- Toàn bộ công nghệ MERN Stack đều là mã nguồn mở có sẵn và miễn phí

2.3 Giới thiệu về MongoDB

2.3.1 Định nghĩa MongoDB

Hình 2 Định nghĩa MongoDBMongoDB là một cơ sở dữ liệu hướng tài liệu, một dạng NoSQL database

2.3.2 Định nghĩa MongoDB Atlas

MongoDB Atlas là một dịch vụ trả phí cho phép người dùng lưu dữ liệu ứng dụngtrên đám mây

MongoDB Atlas cung cấp các tính năng của MongoDB mà không cần thiết phảivận hành quá nặng cho bất kỳ ứng dụng mới nào, có thể chạy trên nhiều các hạ tầng

23

Trang 24

CHƯƠNG 1: TỔNG QUAN

đám mây của AWS, Azure và Google Cloud Nó cũng cung cấp rất nhiều các công cụ

để quản lý khai thác và phân tích dữ liệu

2.3.3 Vai trò của MongoDB

- MongoDB sử dụng dữ liệu dưới dạng Document JSON nên rất dễ dàng truy cập

- Thêm, xoá, cập nhật sẽ không mất nhiều thời gian như RDBMS

- Dễ dàng mở rộng

- Dữ liệu được lưu trong MongoDB thường không bị ràng buộc với nhau

- Các trường hợp dữ liệu “_id” sẽ luôn được đánh tự động index, nên tốc độ truyxuất thông tin sẽ luôn đạt hiệu xuất cao

- Tốc độ truy vấn của MongoDB luôn nhanh hơn so với các hệ quản trị cơ sở dữliệu

- Nhờ có một lượng đủ dữ liệu nên việt thực nghiệm cho thấy tốc độ insert củaMongoDB sẽ nhanh gấp 100 lần so với MySQL

2.4 Giới thiệu về ExpressJS

2.4.1 Định nghĩa ExpressJS

Hình 3 Định nghĩa ExpressJSExpressJS là một công nghệ được xây dựng trên nền tảng của NodeJS Nó cungcấp các tính năng mạnh mẽ để phát triển web hoặc mobile ExpressJS hỗ trợ cácphương thức HTTP và middleware tạo ra các API vô cùng mạnh mẽ và dễ dàng sửdụng

24

Trang 25

CHƯƠNG 1: TỔNG QUAN

2.4.2 Một số tính năng của Express

- Phát triển máy chủ nhanh chóng: ExpressJS cung cấp nhiều tính năng dưới dạngcá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ỏ cácnhu cầu khi viết code và giúp tiết kiệm được thời gian

- Phần mềm trung gian Middleware: 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 người dùng và những phần mềm trung gian khác và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

- Định tuyến – Routing: ExpressJS cung cấp cơ chế định tuyến giúp duy trì trạngthái của website với sự trợ giúp của URL

- Tạo mẫu – Templating: Các công cụ tạo khuôn mẫu được ExpressJS cung cấp chophép các nhà xây dựng nội dung trên các website bằng cách tạo dựng các mẫuHTML phía máy chủ

- 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 Việc gỡ lỗi đã trở nên dễ dàng hơn với ExpressJS nhờ khả năng xácđịnh chính xác các phần trong ứng dụng web có lỗi

2.4.3 Vai trò của Express

- Rất dễ học bởi vì các lập trình viên front-end đã biết về Javascript nên không cầnphải học một ngôn ngữ mới

- Giúp cho việc phát triển back-end dễ dàng hơn khi sử dụng ExpressJS

- ExpressJS rất đơn giản để tuỳ chỉnh và sử dụng theo yêu cầu

- Hỗ trợ phát triển theo mô hình MVC, đây là mô hình phổ biến cho việc lập trìnhweb hiện nay

- Thiết lập các lớp trung gian để trả về các yêu cầu HTTP

- Định nghĩa bộ định tuyến cho phép sử dụng với các hành động khác nhau dựa trênphương thức HTTP và URL

25

Ngày đăng: 15/04/2024, 18:56

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w