Xây dựng website đặt phòng khách sạn

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE ĐẶT PHÒNG KHÁCH SẠN GVHD: ThS MAI ANH THƠ SVTH: TRẦN VÕ BỬU ĐIỀN NGUYỄN TUẤN TÀI SKL009626 Tp Hồ Chí Minh, tháng 06 năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO -   - KHÓA LUẬN TỐT NGHIỆP Đề tài: XÂY DỰNG WEBSITE ĐẶT PHÒNG KHÁCH SẠN SVTH : TRẦN VÕ BỬU ĐIỀN NGUYỄN TUẤN TÀI 18110096 18110193 Khóa : 2018 - 2022 Ngành : CÔNG NGHỆ THÔNG TIN GVHD : ThS MAI ANH THƠ TP Hồ Chí Minh, tháng 6, năm 2022 CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Tp Hồ Chí Minh, 18 tháng 6, 2022 NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Trần Võ Bửu Điền MSSV: 18110096 Lớp: 18110CLST1 Họ tên sinh viên: Nguyễn Tuấn Tài MSSV: 18110193 Lớp: 18110CLST2 Giảng viên hướng dẫn: ThS Mai Anh Thơ Ngày nhận đề tài: 07/03/2022 Ngày nộp đề tài: 18/06/2022 Tên đề tài: Xây dựng website đặt phòng khách sạn Nhiệm vụ của luận văn: • Nghiên cứu, tìm hiểu MERN Stack: MongoDB, Express, ReacJS, NodeJS • Thiết kế và xây dựng trang web quản lý khách sạn Nội dung thực hiện đề tài: • Nghiên cứu, thiết kế website đặt phòng và quản lý khách sạn với đầy đủ tính như: quản lý phòng, quản lý kho, quản lý thu chi, thống kê… • Phân tích chức của website lựa chọn phương án thiết kế website phù hợp Sản phẩm: Website đặt phòng và quản lý khách sạn có đầy đủ chức GIẢNG VIÊN HƯỚNG DẪN (Kí ghi rõ họ tên) CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Tp Hồ Chí Minh, 18 tháng 6, 2021 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Trần Võ Bửu Điền MSSV: 18110096 Lớp: 18110CLST1 Họ tên sinh viên: Nguyễn Tuấn Tài MSSV: 18110193 Lớp: 18110CLST2 Giảng viên hướng dẫn: ThS Mai Anh Thơ Tên đề tài: Xây dựng website đặt phòng khách sạn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đánh giá loại: Điểm: (bằng chữ ………………………………………………………… ) GIẢNG VIÊN HƯỚNG DẪN (Kí ghi rõ họ tên) CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Tp Hồ Chí Minh, 25 tháng 12, 2021 PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Trần Võ Bửu Điền MSSV: 18110096 Lớp: 18110CLST1 Họ tên sinh viên: Nguyễn Tuấn Tài MSSV: 18110193 Lớp: 18110CLST2 Giảng viên hướng dẫn: TS Lê Vĩnh Thịnh Tên đề tài: Xây dựng website đặt phòng khách sạn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đánh giá loại: Điểm: (bằng chữ ………………………………………………………… ) GIẢNG VIÊN PHẢN BIỆN (Kí ghi rõ họ tên) LỜI CẢM ƠN Lời đầu tiên, nhóm thực hiện xin phép gửi lời cảm ơn chân thành đến khoa Đào tạo Chất Lượng Cao – Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tạo điều kiện thuận lợi nhất cho nhóm thực hiện có hội tự tiếp cận, tham khảo, mở rộng thêm kiến thức lĩnh vực Cơng nghệ thơng tin nói chung mơn Khóa luận tớt nghiệp nói riêng Lời cảm ơn trân trọng nhất nhóm thực hiện xin chân thành gửi đến cô Mai Anh Thơ – người tận tình chỉ dẫn, hỗ trợ, đồng hành, trực tiếp hướng dẫn tạo điều kiện thuận lợi giúp đỡ cho nhóm phát huy hết khả nâng cao kiến thức śt q trình học tập, đặc biệt q trình chuẩn bị thực hiện Khóa luận tốt nghiệp Trong quá trình xây dựng ứng dụng, vì kiến thức còn hạn chế nên còn gặp nhiều khó khăn nên ứng dụng khó tránh những sai sót Do đó, nhóm mong sẽ nhận sự góp ý chân thành của thầy cô và các bạn đọc Những ý kiến đóng góp về đề tài sẽ nhóm tiếp nhận để có thêm nhiều kinh nghiệm phát triển những nghiên cứu khác tớt Ći nhóm thực hiện kính chúc q thầy dồi sức khỏe, niềm tin để tiếp tục sự nghiệp cao quý của truyền đạt kiến thức cho hệ mai sau Nhóm thực hiện xin chân thành cám ơn MỤC LỤC DANH MỤC HÌNH VẼ I DANH MỤC BẢNG BIỂU V CHƯƠNG : TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục tiêu CHƯƠNG : KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát hiện trạng 2.1.1 Website quản lý khách sạn TCSOFT HOTEL 2.1.2 Phần mềm quản lý khách sạn SHOTEL 2.1.3 Hệ thống quản lý khách sạn cung cấp asiky.com 2.1.4 Áp dụng cho trang web 10 2.2 Xác định yêu cầu 10 2.2.1 Đối tượng sử dụng 10 2.2.2 Chức 11 CHƯƠNG : PHÂN TÍCH THIẾT KẾ VÀ HỆ THỐNG 13 3.1 Mơ hình hóa yêu cầu 13 3.1.1 Lược đồ Usecase 13 3.1.2 Đặc tả sớ Usecase 16 3.1.3 Lược đồ sở dữ liệu quan hệ 30 3.1.4 Lược đồ tuần tự những chức 31 3.1.5 Lược đồ lớp 45 3.2 Thiết kế giao diện 46 3.2.1 Thiết kế UI Component 46 3.2.2 Thiết kế giao diện 51 CHƯƠNG : CÔNG NGHỆ SỬ DỤNG 72 4.1 Kiến trúc thành phần ứng dụng 72 4.2 Front-end (ReactJS) 73 4.2.1 Cấu trúc thư mục 73 4.2.2 Các thư viện sử dụng 76 4.2.3 Đặc tả sớ thư viện 78 4.3 Back-end (NodeJS, ExpressJS) 86 4.3.1 Cấu trúc thư mục 86 4.3.2 Các thư viện sử dụng 89 4.3.3 Đặc tả sớ thư viện 91 CHƯƠNG : CÀI ĐẶT VÀ KIỂM THỬ 95 5.1 Cài đặt 95 5.2 Các bước chạy hệ thống 95 5.3 Kiểm thử 96 CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 102 6.1 Kết đạt 102 6.2 Ưu điểm 102 6.3 Nhược điểm 102 6.4 Khó khăn 103 6.5 Bài học kinh nghiệm 103 6.6 Hướng phát triển 103 TÀI LIỆU THAM KHẢO 104 DANH MỤC HÌNH VẼ Hình 2.1: Giao diện website TSCSOFT Hotel Hình 2.2: Giao diện website SHOTEL Hình 2.3: Giao diện website asiky.com Hình 3.1: Sơ đồ Usecase 13 Hình 3.2: Lược đồ sở dữ liệu quan hệ 30 Hình 3.3: Lược đồ tuần tự đăng nhập 31 Hình 3.4: Lược đồ tuần tự quên mật 32 Hình 3.5: Lược đồ tuần tự xem sơ đồ phòng 33 Hình 3.6: Lược đồ tuần tự thay đổi trạng thái phòng 34 Hình 3.7: Lược đồ tuần tự đặt phòng website 35 Hình 3.8: Lược đồ tuần tự đặt phòng trực tiếp tại khách sạn 36 Hình 3.9: Lược đồ tuần tự nhận phòng 37 Hình 3.10: Lược đồ tuần tự trả phòng 38 Hình 3.11: Lược đồ tuần tự thêm khách hàng 39 Hình 3.12: Lược đồ tuần tự cập nhật thông tin khách hàng 40 Hình 3.13: Lược đồ tuần tự thêm nhân viên 41 Hình 3.14: Lược đồ tuần tự cập nhật thông tin nhân viên 42 Hình 3.15: Lược đồ tuần tự thêm phòng 43 Hình 3.16: Lược đồ tuần tự cập nhật thông tin phòng 44 Hình 3.17: Lược đồ lớp tổng quát hệ thống 45 Hình 3.18: Component hierarchy 46 Hình 3.19: Danh sách các UI Component 47 Hình 3.20: Sidebar Component 47 Hình 3.21: TopNav Component 48 I Hình 3.22: Table Component 48 Hình 3.23: Card Component 49 Hình 3.24: Pagination Component 49 Hình 3.25: Search Component 50 Hình 3.26: Loading Component 50 Hình 3.27: Trang chủ 51 Hình 3.28: Trang danh sách phòng phòng 52 Hình 3.29: Trang đặt phòng 53 Hình 3.30: Trang chi tiết phòng 54 Hình 3.31: Trang đăng nhập 55 Hình 3.32: Trang quên mật 56 Hình 3.33: Email xác nhận reset pasword 56 Hình 3.34: Trang reset password 57 Hình 3.35: Trang tổng quan 57 Hình 3.36: Trang thông tin cá nhân 58 Hình 3.37: Trang cập nhật thông tin cá nhân người dùng 59 Hình 3.38: Thay đổi mật cá nhân 59 Hình 3.39: Trang sơ đồ phòng 60 Hình 3.40: Thông tin phòng phòng trống 61 Hình 3.41: Cập nhật thông tin phòng 62 Hình 3.42: Xem lịch đặt phòng 62 Hình 3.43: Trang đặt phòng, nhận phòng 63 Hình 3.44: Trang trả phòng khách sạn 63 Hình 3.45: Trang xem danh sách đặt phòng/nhận phòng 64 Hình 3.46: Trang cập nhật thông tin đặt phòng 65 II 12 moment 2.29.1 ISC 13 mongoose 6.0.7 ISC 14 nodemailer 6.7.0 ISC Các file xử lý Xử lý, định dạng ngày ngày: tháng validation.js, roomTool.js Định nghĩa các schema Các file làm việc với mongoDB folder models Xử lý gửi email ứng dụng nodejs File mailer.js devDependencies 15 nodemon 2.0.14 ISC Tự động cập nhật và reload trang ứng dụng File package.json nodejs 4.3.3 Đặc tả số thư viện chính 4.3.3.1 Mongoose Là thư viện lập trình hướng đối tượng Object Document Mapper (ODM) Thư viện cho phép định nghĩa các đối tượng (object) với schema nhất định, ánh tới MongoDB document Bằng cách tạo model dựa schema, mongoose chứa nhiều hàm cho phép xác thực tính hợp lệ, truy vấn, lưu, dữ liệu Đầu tiên, thư viện cho phép người sử dụng kết nối với database MongoDB Trong đồ án, kết nối database sử dụng file database.js của thư mục config: Hình 4.20: Cấu hình kết nới database 91 Một những cơng dụng của mongoose là định nghĩa schema linh hoạt để ánh xạ đến MongoDB document Ở đây, ví dụ schema services của ứng dụng: Hình 4.21: Schema services Một document “services” mongoDB tạo với các thuộc tính định nghĩa từ schema Qua việc sử dụng phương thức save(), các object mới sẽ lưu vào database của MongoDB Hình 4.22: Dữ liệu được ánh xạ từ ứng dụng vào mongoDB 4.3.3.2 Jsonwebtoken Thư viện chuẩn định nghĩa thông tin dưới dạng Json, sử dụng để mã hóa thơng tin giúp xác thực người dùng Token có phần: header, payload, signature ngăn cách dấu chấm 92 Trong ứng dụng, thư viện sử dụng để trả về accessToken để xác thực người dùng truy cập vào ứng dụng: Hình 4.23: Tạo accessToken với JWT Thư viện cho phép mã hóa phần thơng tin là userId và secret (khóa bí mật) thuật toán HS256, cho phép người dùng cấp quyền truy cập vào các url, service, và resource của hệ thống 4.3.3.3 Nodemailer + Google-apis Để thực hiện chức gửi email ứng dụng NodeJS, đồ án xây dựng API gửi email NodeJS với nodemailer, gmail, OAuth2Client Để cấu hình thiết lập ID Client OAuth2 cho ứng dụng: • Truy cập https://console.developers.google.com/ để tạo ứng dụng mới • Tìm chọn APIs & Services → Credentials → Create credentials → OAuth client ID → Lưu ClientID và Client Secret • Truy cập https://developers.google.com/oauthplayground • Chọn vào Setting icon → Enable Use your own OAuth credentials → Sao chép ClientID và Client Secrets vào form • Tại Select & Authorize APIs, gõ https://mail.google.com/ → Authorize APIs → Đăng nhập với tài khoản email tạo ứng dụng • Click Exchange authorization code → Lưu Refresh token Sau cấu hình xong, file env sẽ có những dữ liệu sau: Hình 4.24: Thông tin cấu hình Google OAuth2 Client 93 Tiếp tục cấu hình nodemailer với Google OAuth2: Hình 4.25: Cấu hình Google OAuth2 Client Để gửi email, người dùng truyền vào các tham số gửi mail và kiểm tra kết quả: Hình 4.26: Gửi email với Google OAuth2 Client 94 CHƯƠNG : CÀI ĐẶT VÀ KIỂM THỬ 5.1 Cài đặt - Cài đặt môi trường: Cài đặt NodeJS phiên mới (LTS hoặc mới nhất tại https://nodejs.org/en/download/) - Cài đặt công cụ: Cài đặt Visual Studio Code tại https://code.visualstudio.com/download - Tải back-end project tại: https://github.com/TuanTai169/dthotel-be - Tải front-end project tại: https://github.com/TuanTai169/dthotel-fe - Cơ sở dữ liệu MongoDB - Kiểm tra môi trường NodeJs lệnh node –v tại Command Prompt/Windows Powershell windows hay tại Terminal Mac Linux - Kiểm tra phiên npm lệnh npm –v tại Command Prompt/Windows Powershell windows hay tại Terminal Mac Linux 5.2 Các bước chạy hệ thống - Truy cập hệ thống môi trường internet: https://dthotel-kltn.vercel.app/ - Chạy trang web tại mơi trường localhost: • Mở thư mục server Visual Studio Code → mở Terminal của Visual Studio Code → chạy lệnh npm install để hệ thống tự động cập nhật thư viện cần thiết → chạy lệnh npm i nodemon –dev save → chạy lệnh npm run dev để khởi chạy server • Mở thư mục client Visual Studio Code → mở Terminal của Visual Studio Code → chạy lệnh npm install để hệ thống tự động cập nhật thư viện cần thiết → Chạy lệnh npm start để khởi chạy trang web Bảng 5.1: Bảng tài khoản đăng nhập Role Email Password Employee employee@gmail.com TuanTai@412 Manager manager@gmail.com TuanTai@412 Admin admin@gmail.com TuanTai@412 95 5.3 Kiểm thử Nhóm tiến hành kiểm thử các chức của trang web và các testcase lưu tại https://bom.so/psXtUj Tất các testcase kiểm thử thành công và dưới là số testcase của sớ chức chính: ❖ Đăng nhập Bảng 5.2: Testcase Đăng nhập Testcase Test Step detail scenario TCD_001 Nhập sai thông tin đăng nhập - TCD_004 Nhập thông tin đăng nhập - - Expected Actual results results Nhập “admin1@gmail.com” Thông tin Như hiển thị mong vào textbox “email” Nhập “123456789” vào textbox “password” Ấn nút “Login” textbox và đợi hiển thị thông báo sai email hoặc mật Nhập “admin@gmail.com” vào textbox “email” Nhập “TuanTai@412” vào textbox “password” Ấn nút “Login” Thông tin Như hiển thị mong textbox, đợi thông báo đăng nhập thành công và chuyển đến trang dashboard 96 Status Pass Pass ❖ Thay đổi trạng thái phòng Bảng 5.3: Testcase thay đổi trạng thái phòng Testcase Test scenario TCD_012 Thay đổi Step detail Expected results Actual Status results Chọn Room diagram Thông báo cập Như phòng từ “cleaning” sang Chọn phòng trạng thái “cleaning” nhật phòng thành công và thay đổi màu mong đợi “fixing” - Chọn nút “fixing” phòng từ vàng sang xám - Chọn Room diagram Chọn phòng trạng thái “fixing” Chọn nút “ready” Thông báo cập nhật phòng thành công và thay đổi màu phòng từ xám sang trắng và có thể thực hiện các thao tác phòng TCD_013 Thay đổi phòng từ “fixing” sang “ready” - - Như mong đợi Pass Pass ❖ Thay đổi thông tin cá nhân Bảng 5.4: Testcase thay đổi thông tin cá nhân Testcase Test scenario TCD_015 Thay đổi avatar Step detail - Chọn Profile Chọn vào nút “Change avatar” Chọn ảnh từ máy tính 97 Expected results Thơng báo cập nhật avatar thành công và đồng thay Actual Status results Như mong đợi Pass đổi ảnh giao diện TCD_013 Thay đổi - Chọn Profile Thông tin Như thông tin cá nhân - Chọn vào nút “Edit profile” hiển thị textbox Sau - Nhập tên muốn thay đổi vào textbox “Name” nhấn “Save”, hiển thị thông báo - Nhập số điện thoại muốn thay đổi vào sai định dạng (nếu người textbox “Phone” Nhập địa chỉ muốn thay đổi vào textbox “Address” Ấn “Save” dùng nhập sai định dạng) hoặc thông báo cập nhật thông tin thành công - - Pass mong đợi ❖ Đặt phòng/nhận phòng Bảng 5.5: Testcase đặt phòng Testcase Test Expected Actual results results Chọn Room Diagram Chọn phòng bất kì Chọn nút “Booking” Thông tin hiển thị giao diện và thông báo đặt Như mong đợi Chọn khách hàng Chọn ngày check-in, ngày check-out Chọn dịch vụ Nhập tiền giảm giá Nhập tiền đặt trước Ấn “Save” phòng thành công Step detail scenario FNA_210 Đặt phòng với thông tin hợp lệ - 98 Status Pass FNA_212 Nhận phòng từ đơn đặt phòng trước - Chọn Room Diagram Chọn vào nút “List Thông tin đặt phòng Như mong - Booking/CheckIn” Chọn đơn đặt phòng Chọn nút “CheckIn” hiển thị, đợi chọn “CheckIn” xuất hiện thông - Chọn nút “Change” báo xác nhận chuyển từ đặt Pass phòng sang nhận phòng Sau nhấn nút “Change”, thông báo đơn đặt phòng cập nhật thành công và chuyển màu đặt sang màu đỏ (có người ở) ❖ Quản lý thơng tin khách hàng Bảng 5.6: Testcase quản lý thông tin khách hàng Testcase AH_002 Test scenario Thêm khách Step detail - hàng mới - Expected results Actual Status results Chọn Customers Chọn nút “Add Thông tin khách Như mong Customer” Nhập tên vào textbox “Name” Nhập email vào textbox “Email” hiển thị giao diện Sau ấn “Save”, thông báo khách hàng tồn tại (nếu đợi 99 Pass Nhập số điện thoại email tồn tại vào textbox “Phone” dữ liệu) - Nhập ngày sinh Nhập CCCD vào textbox “Id Number” hoặc thông báo sai định dạng (nếu dữ liệu sai - Nhập địa chỉ vào textbox “Address” định dạng) hoặc thơng báo - Chọn giởi tính thêm khách - Nhập ghi vào hàng thành - textbox “Note” Ấn “Save” công và hiển thị hàng đầu tiên của bảng danh sách - khách hàng AH_007 Cập nhật thông tin - Chọn Customers Chọn nút “Edit” Thông tin khách Như mong khách - Nhập tên thay đổi hiển thị đợi vào textbox “Name” Nhập số điện thoại muốn thay đổi vào textbox “Phone” Nhập ngày sinh muốn thay đổi Nhập CCCD muốn thay đổi vào textbox “Id Number” giao diện Sau ấn “Save”, thông báo sai định dạng (nếu dữ liệu sai định dạng) hoặc thông báo cập nhật khách hàng thành Nhập địa chỉ muốn thay đổi vào textbox “Address” Chọn giởi tính ḿn thay đởi cơng và hiển thị bảng danh sách khách hàng hàng - - - - 100 Pass - Nhập ghi muốn thay đổi vào textbox AH_012 - “Note” Ấn “Save” Xóa - Chọn Customers khách hàng - Chọn nút “Delete” tại chọn nút mong cột “Action” của “Delete” Sau đợi khách hàng ấn “Delete” - Chọn “Delete” dialog thông báo Mở dialog dialog, thơng báo xóa khách hàng thành cơng và cập nhật lại bảng danh sách hiển thị khách hàng 101 Như Pass CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết quả đạt được Dự án hoàn thành đầy đủ chức của trang web quản lý khách sạn Các chức hồn thiện kiểm thử bao gồm: Chức đặt phòng, chức nhận phòng, trả phịng, chức quản lý tình trạng phịng, chức thống kê, báo cáo, chức quản lý doanh thu, chức in và x́t thớng kê, báo cáo, hóa đơn, chức quản lý người dùng, nhân viên Các thành viên nhóm tìm hiểu biết cách mà dự án MERN tạo hoạt động Biết cách xây dựng API NodeJS ExpressJS Xây dựng giao diện người dùng và tương tác với API ReactJS Hiểu cách thao tác với sở dữ liệu MongoDB và cách để Public trang web lên Internet thơng qua trình cung cấp hosting miễn phí Heroku Ngồi ra, q trình xây dựng phát triển dự án, nhóm học cách quản lý dự án, quản lý tiến độ, cách để sử dụng Github quản lý Source Code cập nhật các thay đổi của dự án thông qua từng phiên cập nhật Thơng qua dự án, nhóm sinh viên thực hiện học cách làm việc nhóm dự án phần mềm, cách phân chia công việc dự mạnh của mỗi thành viên 6.2 Ưu điểm - Giao diện hiện đại và đẹp mắt, đơn giản, dễ nhìn, dễ thao tác Có thể tùy chỉnh giao diện (Multiple Themes) Đầy đủ tính của trang web quản lý khách sạn 6.3 Nhược điểm - Tớc độ tải trang cịn chậm các đoạn mã chưa tới ưu hóa và sử dụng hosting miễn phí Chưa thể thay đởi giao diện tùy theo kích thước của hình hiển thị Nội dung còn đơn giản 102 6.4 Khó khăn - MERN công nghệ mới hiện tại những công nghệ phát triển nhất hiện tài liệu về MERN khơng đồng nhất gây khó khăn cho những người mới tiếp cận - Thời gian còn hạn chế nên chưa phát triển tốt website Cấu trúc thư mục chưa thực sự hiệu quả, còn hạn chế quá trình nâng cấp sửa lỗi 6.5 Bài học kinh nghiệm Tìm hiểu và xây dựng website dựa cơng nghệ MERN Stack giúp nhóm phân chia thời gian hợp lý và rút số kinh nghiệm sau: - - - - Về React: React tạo xoay quanh khái niệm components tái sử dụng Tất các component đều có thể tái sử dụng Tên component nên đặt theo chuẩn PascalCase Tên component cần đề cập mục đích của nó, phải rõ ràng nhất ứng dụng, để dễ tìm thấy và tránh những nhầm lẫn có thể xảy nên chọn cách viết Stateless để định nghĩa component Về NodeJS: NodeJs có tất tính chất của javascript Nodejs xử lý bất đồng Nodejs chạy đơn luồng Triển khai Node.js host là điều dễ dàng Về Expressjs: framework xây dựng nền tảng của Nodejs Cho phép thiết lập lớp trung gian để trả về HTTP request, trả về trang HTML dựa vào tham sớ Về MongoDB: có thể insert document với key value kiểu tuỳ ý vào collection nào Các mode sort với Mongodb lần lượt là: 1(tăng dần) -1(giảm dần) thay esc desc mysql Trong SQL, count() group by() là tương đương với Aggregation MongoDB 6.6 Hướng phát triển - Hồn thiện bở sung thêm các tính khác cho trang web quản lý khách sạn: quản lý chi tiết nhân viên, quản lý tiền phòng theo ngày, giờ… Xây dựng trang booking cho người dùng Tích hợp chatbot với nền tảng mạng xã hội, tích hợp mã tracking Thiết kế responsive, tạo giao diện ấn tượng với người dùng 103 TÀI LIỆU THAM KHẢO [1] React – A JavaScript library for building user interfaces (2021) Retrieved 24 December 2021, from https://reactjs.org/ [2] React-Bootstrap (2021) Retrieved 24 December 2021, from https://reactbootstrap.github.io/ [3] Express.js and MongoDB REST API Tutorial (2021) Retrieved 24 December 2021, from https://www.mongodb.com/languages/express-mongodb-rest-api-tutorial [4] Hướng Dẫn Xây Dựng RESTful CRUD API Với NodeJS, Express MongoDB (2020) Retrieved 24 December 2021, from https://www.thanhlongdev.com/huong-danxay-dung-restful-crud-api-voi-nodejs-express-va-mongodb/ [5] JS, N, & OAuth2, N (2021) NodeJS: Xây dựng API gửi mail với Nodemailer OAuth2 Retrieved 24 December 2021, from https://hocweb.vn/xay-dng-api-gi-mail-vinodemailer-va-oauth2-nodejs/ [6] React Tutorials (2021) Retrieved 24 December 2021, from https://react-componentdepot.netlify.app/button-loader [7] React Datepicker crafted by HackerOne (2021) Retrieved 24 December 2021, from https://reactdatepicker.com/ 104