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 1BỘ 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 2BỘ 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 3NHIỆ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 4Trườ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 8LỜ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 10MỤ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 112.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 122 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 135.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 14DANH 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 15Bả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 16DANH 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 17Hì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 18Hì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 19CHƯƠ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 20CHƯƠ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 21CHƯƠ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 22CHƯƠ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 24CHƯƠ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 25CHƯƠ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