Xây dựng website bán sách trên nền tảng mern stack

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 BÁN SÁCH TRÊN NỀN TẢNG MERN STACK GVHD: ThS NGUYỄN TRẦN THI VĂN SVTH: NGUYỄN HOÀNG KIM NGUYỄN SONG HOÀNG SKL009600 Tp Hồ Chí Minh, tháng 06 năm 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MERN STACK SVTH : NGUYỄN HOÀNG KIM 16110132 NGUYỄN SONG HOÀNG 17110141 NGÀNH: CÔNG NGHỆ THÔNG TIN GVHD: ThS NGUYỄN TRẦN THI VĂN Tp Hồ Chí Minh, tháng 06 năm 2022 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* Tp Hồ Chí Minh, ngày … tháng 03 năm 2022 NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên: Nguyễn Hoàng Kim MSSV: 16110132 Họ tên sinh viên: Nguyễn Song Hồng MSSV: 17110141 Ngành: Cơng Nghệ Thơng Tin Giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn ĐT: 0983 11 80 25 Thời gian thực hiện: 07/03/2022 – 27/06/2022 Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MERN STACK Nội dung thực hiện: Lý thuyết: - Tìm hiểu MERN Stack: MongoDB, ExpressJS, ReactJS, NodeJS Tìm hiểu cách hoạt động ghép thành phần Stack Thực hành: - - Áp dụng kiến thức từ lý thuyết xây dựng hệ thống web bán sách online Hệ thống gồm chức sau: o Phía quản trị: Quản lý sách, quản lý user, quản lý đơn hàng doanh thu o Phía người dùng khách: Tìm kiếm sách, lọc thuộc tính xếp sách, quản lý thông tin cá nhân, đặt hàng, hủy đơn hàng, xem lại đơn hàng đặt Triển khai ứng dụng lên máy chủ TRƯỞNG NGÀNH Nguyễn Đăng Quang GIẢNG VIÊN HƯỚNG DẪN Nguyễn Trần Thi Văn CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Nguyễn Hoàng Kim .MSSV 1: 16110249 Họ tên Sinh viên 2: Nguyễn Song Hoàng MSSV 2: 17110141 Ngành: Công Nghệ Thông Tin Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MERN STACK Họ tên giảng viên hướng dẫn: ThS NGUYỄN TRẦN THI VĂ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: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày … tháng 06 năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Nguyễn Hoàng Kim MSSV 1: 16110132 Họ tên Sinh viên 2: Nguyễn Song Hoàng MSSV 2: 17110141 Ngành: Công Nghệ Thông Tin Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MERN STACK Họ tên Giáo viên phản biện: ThS NGUYỄN THANH PHƯỚC 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: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày … tháng 06 năm 2022 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CAM ĐOAN Chúng em xin cam đoan đề tài khóa luận chuyên ngành “Xây dựng Web bán sách công nghệ MERN Stack” thành trình học tập, tìm hiểu với hướng dẫn giáo viên hướng dẫn thầy Nguyễn Trần Thi Văn Toàn tài liệu sử dụng để tham khảo trích dẫn từ nguồn tài liệu mục TÀI LIỆU THAM KHẢO TP Hồ Chí Minh, tháng năm 2022 Nhóm sinh viên thực Nguyễn Hoàng Kim 16110132 Nguyễn Song Hoàng 17110141 i LỜI CẢM ƠN Lời đầu tiên, cho phép nhóm em gửi lời cảm ơn chân thành đến thầy Nguyễn Trần Thi Văn, người phụ trách hướng dẫn nhóm chúng em việc thực hoàn thành báo cáo cách tốt hiệu Những dạy, nhật xét, đóng góp ý kiến từ thầy góp phần quan trọng việc giúp chúng em hoàn hành đề tài cách hoàn thiện Cảm ơn thầy cô khoa Công Nghệ Thơng Tin ln nhiệt tình, cống hiến, tận tình giải đáp thắc mắc chúng em Bên cạnh đó, chúng em xin cảm ơn bạn khóa, anh chị khóa khơng ngần ngại chia sẻ thơng tin, kinh nghiệm bổ ích giúp chúng em hồn thiện đề tài Báo cáo thực khoảng thời gian có hạn, với hạn chế mặt kiến thức nên việc sai sót điều khơng thể tránh khỏi q trình thực Chúng em kính mong nhận lời nhận xét, ý kiến đóng góp quý báo từ q Thầy Cơ để chúng em có thêm kinh nghiệm hoàn thành tốt đề tài sau Chúng em xin chân thành cảm ơn ! TP Hồ Chí Minh, tháng năm 2022 Nhóm sinh viên thực Nguyễn Hoàng Kim 16110132 Nguyễn Song Hoàng 17110141 ii TĨM TẮT Sách nguồn trí thức vơ giá nhân loại Cùng với phát triển thương mại điện tử ngày mở rộng Với tiêu chí mua sách nhanh chóng việc phổ cập sách đến với người, chúng em kết hợp việc bán sách với thương mại điện tử Dự án chúng em sử dụng công nghệ MERN Stack Ở tầng server chúng em sử dụng NodeJS tảng ExpressJS framework định tuyến router API Ở phần giao diện chúng em sử dụng React-redux để thiết kế giao diện trang web Và MongoDB sở liệu không ràng buộc để lưu trữ liệu Mục tiêu đề nhóm khai thác cơng nghệ MERN Stack xây dụng chức phục vụ cho việc mua bán sách online cho người dùng cá nhân doanh nghiệp nhỏ Các chức quản lý sách, quản lý người dùng, chức giỏ hàng, đặt hàng, quản lý đơn hàng, tìm kiếm sách, lọc thuộc tính sách xem doanh thu Hệ thống xây dựng dành cho ba đối tượng sử dụng người quản trị (admin), người dùng (user) khách (guest) Ở phần báo cáo gồm sáu chương: - Chương 1: Tổng quan đề tài Chương 2: Cơ sở lý thuyết Chương 3: Khảo sát trạng xác định yêu cầu Chương 4: Thiết kế hệ thống Chương 5: Cài đặt kiếm thử Chương 6: Kết luận TP Hồ Chí Minh, tháng năm 2022 Nhóm sinh viên thực Nguyễn Hồng Kim 16110132 Nguyễn Song Hoàng 17110141 iii MỤC LỤC LỜI CAM ĐOAN I LỜI CẢM ƠN II TÓM TẮT III DANH MỤC HÌNH ẢNH VIII DANH MỤC BẢNG X DANH MỤC TỪ VIẾT TẮT XII CHƯƠNG 1: TỔNG QUAN 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1.2 MỤC ĐÍCH CỦA ĐỀ TÀI 1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 1.4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan MERN Stack [1][2][3] 2.1.1 Khái niệm MERN Stack 2.1.2 Các thành phần MERN stack 2.1.3 Cách thức MERN stack hoạt động 2.1.4 Lợi MERN stack 2.2 NodeJS 2.2.1 Tổng quan [4] 2.2.2 Nguyên tắc hoạt động 2.3 ExpressJS 2.3.1 Tổng quan [6] 2.3.2 Công dụng 2.4 React 2.4.1 Tổng quan React [7] 2.4.2 Tại chọn React 2.5 MongoDB 11 2.5.1 Mơ hình 11 2.5.2 Đặc trưng 12 CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 14 3.1 KHẢO SÁT HIỆN TRẠNG 14 iv 3.2 XAC DỊNH YEU CẦU 18 3.3 ĐẶC TẢ CHỨC NĂNG 18 3.3.1 Bảng requirement dành cho use case 18 3.3.2 Liệt kê actor 20 3.3.3 Bảng use case 21 3.3.3.1 Use case tìm kiếm sách “Search book” 21 3.3.3.1 Usecase tìm sách theo tên sách 21 3.3.3.1.1 Use case tìm sách theo thể loại 22 3.3.3.1.2 Use case tìm sách theo tên tác giả 22 3.3.3.1.3 Use case tìm sách theo tên tác giả 23 3.3.3.2 Use case chọn lọc sách “Filter book” 24 3.3.3.2.1 Use case chọn lọc sách theo tên thể loại 24 3.3.3.2.2 Use case chọn lọc sách theo tên tác giả 25 3.3.3.2.3 Use case chọn lọc sách theo khoản giá 25 3.3.3.2.4 Use case xếp sách 26 3.3.3.3 Use case xem thông tin sách “View book detail” 27 3.3.3.3.1 Use case xem thông tin chi tiết sách 27 3.3.3.4 Use case quản lý giỏ hàng “Manager book cart” 28 3.3.3.4.1 Use case xem sách giỏ hàng 28 3.3.3.4.2 Use case thêm sách vào giỏ hàng 29 3.3.3.4.3 Use case cập nhật giỏ hàng 29 3.3.3.4.4 Use case xóa sách giỏ hàng 30 3.3.3.5 Use case đăng ký tài khoản “Register an account” 31 3.3.3.6 Use case đăng nhập vào tài khoản “Login an account” 33 3.3.3.6.1 Use case đăng nhập tài khoản đăng ký 33 3.3.3.7 Use case đăng xuất “Logout an account” 35 3.3.3.8 Use case quản lý thông tin tài khoản “View account” 36 3.3.3.8.1 Use case xem thông tin cá nhân 36 3.3.3.8.2 Use case sửa đổi thông tin cá nhân 37 3.3.3.8.3 Use case đổi mật 38 3.3.3.9 Use case quản lý lịch sử đơn hàng “View order” 39 3.3.3.9.1 Use case xem thông tin chi tiết đơn hàng 39 3.3.3.9.2 Use case yêu cầu huỷ đơn hàng 40 3.3.3.10 Use case quản lý sách “Manager book” 41 3.3.3.10.1 Use case thêm sách 41 3.3.3.10.2 Use case sửa đổi thông tin sách 42 3.3.3.10.3 Use case xóa sách 43 v 4.3.2.4 SAP005 Insert Book Screen Hình 39 SAP005 Insert Book Screen Chương 4: Thiết kế ứng dụng 84 No Name Required Type Reference Note Tên sách Img Tác giả True Input Giá True Input Ảnh sách True Input Thông tin sách True Input Nhà xuất True Input Năm xuất True Input Trạng thái True Input Nhà cung cấp 10 Thể loại 11 Lưu Thông Tin Button Khi click, thực tạo sách 12 Trở Về Button Trở trang trước Button True Input Bảng 21 Mô tả SAP005 Insert Book Screen 4.3.2.5 SAP006 Manage Order Screen Hình 40 SAP006 Manage Order Screen Chương 4: Thiết kế ứng dụng 85 No Name Required Type Reference Tên khách hàng Label Data từ API Số điện thoại Label Data từ API Địa giao hàng Label Data từ API Tổng tiền Label Data từ API Cập nhật thông tin đơn hàng Button Xoá đơn hàng Button Thêm đơn hàng Button Note Chuyển hướng đến trang cập nhật đơn hàng Chuyển hướng đên trang thêm đơn hàng Bảng 22 Mô tả SAP006 Manage Order Screen 4.3.2.6 SAP010 Manage User Screen Chương 4: Thiết kế ứng dụng 86 Hình 41 SAP010 Manage User Screen No Name Required Type Reference userName Label Data từ API emailUser Label Data từ API roleUser Label Data từ API genderUser Label Data từ API Địa Label Data từ API Icon Edit Button Icon Remove Button Thêm Người Dùng Button Note Khi click, chuyển đến hình cập nhật thơng tin user Bảng 23 Mô tả SAP010 Manage User Screen Chương 4: Thiết kế ứng dụng 87 4.3.2.7 SAP012 Update User Screen Hình 42 SAP012 Update User Screen No Name Type Reference Chỉnh sửa thông tin “email” Input Data từ API password Input Data từ API userName Input Data từ API roleUser Input Data từ API Chương 4: Thiết kế ứng dụng Required Note 88 Gender Input Địa Lưu Thơng Tin Button Khi click, chuyển đến hình quản lý user Trở Về Button Quay lại trang trước Input Data từ API Bảng 24 Mơ tả SAP012 Update User Screen Chương 4: Thiết kế ứng dụng 89 CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 5.1 Cài đặt ứng dụng ❖ Máy phải có cài đặt npm ❖ Máy có cài đặt NodeJS Các bước cài đặt: Ở hướng dẫn này, nhóm sử dụng IDE Visual Studio Code: Bước 1: Clone tải project từ github: https://github.com/kim12355/Book-Store.git Bước 2: Sau mở Visual Studio Code Open Folder tới thư mục Book-Store ta vừa clone từ github xuống Bước 3: Sau mở Terminal cách chọn Terminal điều hướng chọn New Terminal sử dụng phím tắt “Ctrl + Shift + `” Hình Câu lệnh chạy server Tiếp theo chạy lệnh “cd backend”, “npm install” (câu lệnh để node cài đặt module cần thiết) sau “npm start” để chạy server Chương 5: Cài đặt kiểm thử 90 Hình Server chạy thành công Bước 4: Tiếp tục sau mở thêm Terminal với phím tắt “Ctrl + Shift + `” Và chạy lệnh sau “cd admin”, “npm install yarn”, “yarn”, “npm start” để chạy giao diện bên phía Admin Tương tự mở terminal chạy bên phía client “cd client”, “yarn”, “npm start” Chương 5: Cài đặt kiểm thử 91 Hình Chạy giao diện thành công 5.2 Kiểm thử phần mềm Sau thực xong việc kiểm thử nhóm xin trình bày số test case tiêu biểu 5.2.1 Chức đăng ký Test Case ID Test steps Description SignUp_001 Đăng ký tài Nhập thông khoản user tin yêu cầu hình: địa Email, Tên đầy đủ, Mật xác nhận mật Nhấn nút Đăng ký SignUp_002 Kiểm tra bỏ Bỏ trống trống trường đánh dấu trường đánh dấu nhấn Đăng ký Chương 5: Cài đặt kiểm thử Expected Output Result Đăng ký thành cơng Pass chuyển sang hình login u cầu nhập lại Pass thông tin đầy đủ tương ứng với trường 92 SignUp_003 Kiểm tra nhập Nhập thông Hệ thống không cho Pass email tồn tin yêu cầu tạo tài khoản email hệ thống nhập email tồn tồn yêu cầu hệ thống phải nhập lại Nhấn nút Đăng ký Bảng Kiểm thử phần mềm chức đăng ký 5.2.2 Chức đăng nhập Test Case ID Description SignIn _001 Test steps Expected Output Result Nhập tên đăng Hiện thông báo “Tài Pass Kiểm tra việc nhập mật khoản email mật đăng nhập chưa đăng kí khơng xác!” chưa có tài hệ thống khoản Nhấn nút đăng nhập Đăng nhập Nhập email tài khoản user password tài khoản user Nhấn nút Đăng nhập Đăng nhập thành công Pass hệ thống chuyển sang trang HomePage Đăng nhập thất bại show lỗi hình trang yêu cầu nhập lại SignIn _003 Đăng nhập Nhập email Đăng nhập thành công Pass tài khoản admin password tài hệ thống chuyển sang khoản admin trang quản lý admin Nhấn nút Sign Đăng nhập thất bại In reload trang yêu cầu nhập lại Bảng Kiểm thử phần mềm chức đăng nhập SignIn _002 Chương 5: Cài đặt kiểm thử 93 5.2.3 Chức đổi mật Test Case ID Test steps Expected Output Result Description ChangePass Kiểm tra việc đổi Nhập mật Hiện thông báo “Mật Pass _001 bạn nhập không mật với sai việc nhập mật Nhấn nút đổi xác” sai mật ChangePass Kiểm tra việc đổi Nhập mật Hiện thông báo “Đổi Pass _002 mật với mật thành công” việc nhập mật Nhấn nút Đổi mật Bảng Kiểm thử phần mềm chức đổi mật 5.2.4 Chức tìm kiếm sách Test Case ID Description SearchBook _001 Test steps Expected Output Result Truy cập vào Xuất sách tương Pass trang HomePage ứng Nhập tên sách Tìm kiếm sách đã tồn vào có hệ thống input Nhấn nút tìm kiếm Truy cập vào Xuất sách có thuộc Pass trang HomePage tính tác giả cần tìm SearchBook _002 Tìm kiếm sách Nhập tên tác giả theo tên tác giả vào input Nhấn nút tìm kiếm Chương 5: Cài đặt kiểm thử 94 SearchBook _003 Truy cập vào Hiện thông báo Pass trang HomePage “Không chứa ký Kiểm tra việc tự đặc biệt” không cho phép Nhập tên vào ô nhập ký tự đặc input biệt vào ô input Nhấn nút tìm kiếm SearchBook Truy cập vào Hiện trang tất sách Pass Tìm kiếm sách _004 trang HomePage xếp theo bán chạy với keywords Nhấn vào nút trống tìm kiếm Bảng Kiểm thử chức tìm kiếm sách Chương 5: Cài đặt kiểm thử 95 CHƯƠNG 6: KẾT LUẬN 6.1 Kết đạt • Tích lũy kỹ làm việc nhóm, kỹ giao tiếp team, phân cơng cơng việc làm khóa luận • Kỹ search tài liệu, kỹ tìm kiếm giải pháp mạng cho khúc mắc trình xây dựng đồ án • Hiểu rõ cơng nghệ thực Xây dựng server cung cấp REST API phục vụ cho ứng dụng web ứng dụng di động Biết cách sử dụng sở liệu không quan hệ (No SQL) để xây dựng database • Xây dựng trang web với công nghệ MERN Stack Có thể phục vụ cho người bn bán cá nhân doanh nghiệp nhỏ • Đạt kinh nghiệm làm khóa luận: o Cách xếp thời gian để hồn thành cơng việc o Áp dụng branch github để backup tránh việc bất đồng hai thành viên nhóm 6.2 Ưu điểm nhược điểm 6.2.1 Ưu điểm - Website thiết kế với giao diện đại, dễ nhìn dễ tiếp cận - Thao tác sử dụng đơn giản - Chức tìm kiếm trả liệu theo số điểm trùng khớp từ thuộc tính tên sách tên tác giả Cũng lọc thuộc tính sau tìm kiếm Với cách tìm kiếm tiện lợi 6.2.2 Nhược điểm - Phần giao diện chưa hồn thiện, cịn thiếu sót lỗi - Vì cịn thiếu kinh nghiệm nghiệp vụ việc xử lý chức chưa tối ưu - Chưa hồn thành đủ chức nhóm đề lúc đầu 6.3 Hướng phát triển tương lai - Hoàn thiện chức phát triển ứng dụng di động - Setup deploy website - Tích hợp thêm nhiều cổng toán Zalo Pay, MoMo, Internet Banking Chương 6: Kết luận 96 TÀI LIỆU THAM KHẢO Tiếng Việt [4] https://topdev.vn/blog/node-js-co-ban/ [5] https://viblo.asia/p/tong-quan-ve-node-js-AeJ1vOdQRkby [8] https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 Tiếng Anh [1] https://www.mongodb.com/mern-stack [2] https://www.quora.com/What-is-the-stack [3] https://www.guru99.com/mean-stack-developer.html [6] https://expressjs.com/ [7] https://dev.to/nehasoni /introduction-to-reactjs-3553