(Đồ án tốt nghiệp) xây dựng website bán sách trên nền tảng mean stack (recommendation system)

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 MEAN STACK GVHD:LÊ VĨNH THỊNH SVTH:NGUYỄN ĐỨC HẬU MSSV :16110069 SVTH :TRƯƠNG THÁI TUẤN MSSV :16110249 SKL007070 Tp Hồ Chí Minh, tháng 07/2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀ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 MEAN STACK (RECOMMENDATION SYSTEM) SVTH : NGUYỄN ĐỨC HẬU MSSV : 16110069 SVTH : TRƯƠNG THÁI TUẤN MSSV : 16110249 Khoá: 16 Ngành: CÔNG NGHỆ THÔNG TIN GVHD: TS LÊ VĨNH THỊNH Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020 Báo cáo đồ án tốt nghiệp CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* Tp Hồ Chí Minh, ngày 01 tháng 07 năm 2020 NHIỆM VỤ KHÓA LUẬN TỐ T NGHIỆP Họ tên sinh viên: Nguyễn Đức Hậu MSSV: 16110069 Họ tên sinh viên: Trương Thái Tuấn MSSV: 16110249 Ngành: Công Nghệ Thông Tin Lớp: 16110ST4 Giảng viên hướng dẫn: TS Lê Vĩnh Thịnh ĐT: 0938 252 222 Ngày nhận đề tài: 24/02/2020 Ngày nộp đề tài: 01/07/2020 Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK Các số liệu, tài liệu ban đầu: Khơng có Nội dung thực đề tài: - Tìm hiểu MEAN STACK - Xây dựng website demo TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN Nguyễn Đăng Quang Lê Vĩnh Thịnh Báo cáo đồ án tốt nghiệp 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: Trương Thái Tuấn .MSSV 1: 16110249 Họ tên Sinh viên 2: Nguyễn Đức Hậu MSSV 2: 16110069 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 MEAN STACK Họ tên Giáo viên hướng dẫn: TS LÊ VĨNH THỊNH 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 01 tháng 07 năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) Báo cáo đồ án tốt nghiệp 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: Trương Thái Tuấn .MSSV 1: 16110249 Họ tên Sinh viên 2: Nguyễn Đức Hậu MSSV 2: 16110069 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 MEAN STACK Họ tên Giáo viên phản biệ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 01 tháng 07 năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) Báo cáo đồ án tốt nghiệp 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 Lê Vĩnh Thịnh, người phụ trách hướng dẫn nhóm chúng em việc thực hồn thành báo cáo cách tốt hiệu Những sự 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ổ í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 trình thực Chúng em kính mong nhận lời nhận xét, ý kiến đóng góp q 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 thành cảm ơn ! i Báo cáo đồ án tốt nghiệp MỤC LỤC LỜI CẢM ƠN I ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP X DANH MỤC HÌNH ẢNH XV DANH MỤC BẢNG XIX DANH MỤC TỪ VIẾT TẮT XXIII 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 .3 [1][2][3] 2.1 Tổng quan MEAN Stack 2.1.1 Khái niệm MEAN Stack .3 2.1.2 Các thành phần MEAN stack 2.1.3 Cách thức MEAN stack hoạt động 2.1.4 Lợi MEAN stack 2.2 NodeJS [4] 2.2.1 Tổng quan .5 2.2.2 Nguyên tắc hoạt động 2.2.3 Ưu điểm 2.2.4 Nhược điểm .9 2.3 ExpressJS [6] 2.3.1 Tổng quan .9 2.3.2 Công dụng 2.4 Angular 10 [7] 2.4.1 Tổng quan Angular 10 2.4.2 Mơ hình 10 2.5 MongoDB 12 2.5.1 Mơ hình 12 2.5.2 Đặc trưng 13 2.5.3 Ưu điểm 14 2.5.4 Nhược điểm 14 2.6 Giới thiệu Recommendation System [9][10] 14 ii Báo cáo đồ án tốt nghiệp 2.6.1 Khái niệm 14 2.6.1.1 Hệ thống gợi ý dựa theo lọc cộng tác 15 2.6.1.2 Hệ thống gợi ý dựa theo nội dung 15 2.6.1.3 Hệ thống gợi ý dựa sở tri thức 16 2.6.2 So sánh phương pháp gợi ý 17 2.6.3 Lợi ích hệ thống gợi ý recommendation systems vào cửa hàng 17 CHƯƠNG 3: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 19 3.1 KHẢO SÁT HIỆN TRẠNG 19 3.2 XAC DỊNH YEU CẦU 23 3.3 ĐẶC TẢ CHỨC NĂNG 24 3.3.1 Bảng requirement dành cho use case 24 3.3.2 Liệt kê actor 28 3.3.3 Bảng use case 28 3.3.3.1 Use case tìm kiếm sách “Search book” 28 3.3.3.1.1 Usecase tìm sách theo tên sách 29 3.3.3.1.2 Use case tìm sách theo thể loại 29 3.3.3.1.3 Use case tìm sách theo tên tác giả 30 3.3.3.1.4 Use case tìm sách theo tên seri sách 30 3.3.3.2 Use case chọn lọc sách “Filter book” 31 3.3.3.2.1 Use case chọn lọc sách theo tên thể loại 32 3.3.3.2.2 Use case chọn lọc sách theo tên tác giả 32 3.3.3.2.3 Use case chọn lọc sách theo giá tiền 33 3.3.3.2.4 Use case chọn lọc sách theo số đánh giá 34 3.3.3.2.5 Use case chọn lọc sách giảm giá 34 3.3.3.3 Use case xem thông tin sách “View book detail” 35 3.3.3.3.1 Use case xem thông tin chi tiết sách 35 3.3.3.3.2 Use case xem bình luận đánh giá 36 3.3.3.4 Use case bình luận đánh giá “Comment and rate book” 37 3.3.3.4.1 Use case thêm bình luận đánh giá 37 3.3.3.4.2 Use case sửa bình luận đánh giá 38 3.3.3.5 Use case quản lý giỏ hàng “Manager book cart” 39 3.3.3.5.1 Use case xem sách giỏ hàng 39 3.3.3.5.2 Use case thêm sách vào giỏ hàng 40 3.3.3.5.3 Use case cập nhật giỏ hàng 41 3.3.3.5.4 Use case xóa sách giỏ hàng 42 3.3.3.6 Use case đăng ký tài khoản “Register an account” .43 iii Báo cáo đồ án tốt nghiệp 3.3.3.7 Use case đăng nhập vào tài khoản “Login an account” 45 3.3.3.7.1 Use case đăng nhập tài khoản đăng ký 45 3.3.3.7.2 Use case đăng nhập tài khoản FaceBook .47 3.3.3.7.3 Use case đăng nhập tài khoản Google 48 3.3.3.8 Use case quản lý thông tin tài khoản “View account” 49 3.3.3.8.1 Use case xem thông tin cá nhân 49 3.3.3.8.2 Use case sửa đổi thông tin cá nhân 50 3.3.3.8.3 Use case đổi mật 51 3.3.3.9 Use case toán đơn đặt hàng “Pay the order” 52 3.3.3.9.1 Use case toán đơn hàng tiền mặt 52 3.3.3.9.2 Use case toán đơn hàng ví paypal 53 3.3.3.10 Use case quản lý lịch sử đơn hàng “View order” 54 3.3.3.10.1 Use case xem thông tin chi tiết đơn hàng .54 3.3.3.10.2 Use case xóa đơn hàng 55 3.3.3.11 Use case quản lý sách yêu thích “View favorite book” .56 3.3.3.11.1 Use case yêu thích sách 56 3.3.3.11.2 Use case xóa sách danh sách yêu thích 57 3.3.3.12 Use case quản lý sách “Manager book” 58 3.3.3.12.1 Use case thêm sách 58 3.3.3.12.2 Use case sửa đổi thông tin sách 59 3.3.3.12.3 Use case xóa sách 60 3.3.3.12.4 Use case xem sách 61 3.3.3.13 Use case quản lý thể loại “Manager category” 62 3.3.3.13.1 Use case thêm thể loại 62 3.3.3.13.2 Use case sửa thông tin thể loại 63 3.3.3.13.3 Use case xóa thể loại 64 3.3.3.13.4 Use case xem thể loại 65 3.3.3.14 Use case quản lý tác giả “Manager author” 66 3.3.3.14.1 Use case thêm tác giả 66 3.3.3.14.2 Use case sửa thông tin tác giả 67 3.3.3.14.3 Use case xóa tác giả 68 3.3.3.14.4 Use case xem tác giả 69 3.3.3.15 Use case quản lý thông tin user “Manager user” 70 3.3.3.15.1 Use case thêm user 70 3.3.3.15.2 Use case sửa thông tin user 71 3.3.3.15.3 Use case xóa user 72 3.3.3.15.4 Use case xem thông tin user 73 iv Báo cáo đồ án tốt nghiệp 3.3.3.16 Use case quản lý đơn hàng “Manager order” 74 3.3.3.16.1 Use case xem đơn hàng 74 3.3.3.16.2 Use case xem thông tin chi tiết đơn hàng .75 3.3.3.16.3 Use case sửa trạng thái đơn hàng 75 3.3.3.16.4 Use case xóa đơn hàng 76 3.3.3.17 Use case quản lý địa giao hàng “Address shipping” .77 3.3.3.17.1 Use case thêm địa giao hàng 78 3.3.3.17.2 Use case sửa đổi thông tin địa giao hàng 78 3.3.3.17.3 Use case xóa địa giao hàng 79 3.3.3.17.4 Use case xem thông tin địa giao hàng 80 3.3.3.18 Use case xem mã giảm giá “View discount code” 81 3.3.3.19 Use case đăng xuất “Logout an account” 82 CHƯƠNG 4: THIẾT KẾ ỨNG DỤNG 83 4.1 THIẾT KẾ DỮ LIỆU 83 4.1.1 Sơ đồ thiết kế liệu 83 4.1.2 Mô tả sơ đồ thiết kế liệu 84 4.1.2.1 Collection Book 84 4.1.2.2 Collection BookCategory 84 4.1.2.3 Collection Seri 85 4.1.3.4 Collection Author 85 4.1.2.5 Collection Rate 85 4.1.2.6 Collection Rating 85 4.1.2.7 Collection CartBook 86 3.1.2.8 Collection OrderDetail 86 4.1.2.9 Collection Favorite 86 4.1.2.10 Collection Order 87 4.1.2.11 Collection Customer 87 4.1.2.12 Collection User 88 4.1.2.13 Collection DiscountCode 88 4.1.2.14 Collection AccountSocial 88 4.1.2.15 Collection Point 89 4.2 SƠ ĐỒ TUẦN TỰ (SEQUENCE DIAGRAM) 90 4.2.1 Sequence tìm kiếm sách “Search book” 90 4.2.1.1 Sequence tìm sách theo tên sách 90 4.2.1.2 Sequence tìm sách theo thể loại 90 4.2.1.3 Sequence tìm sách theo tên tác giả 91 v Báo cáo đồ án tốt nghiệp Bước 4: Sau mở project Visual Studio Code, chọn “Terminal” taskbar, chọn tiếp “New Terminal” (Hoặc đơn giản bấm tổ hợp phím Ctrl +`) Hình Giao diện visual studio code Bước 5: Sau cửa sổ Command Line tích hợp ra, chạy lệnh “npm install” để cập nhật thư viện, package cịn thiếu máy mà Project cần Hình Màn hình Intergrate Command Line Bước 6: Sau lệnh npm install kết thúc, mở thêm cửa sổ Command Line cách nhấn vào nút “Split Terminal” taskbar cửa sổ Command Line Bước 7: Chương 5: Cài đặt kiểm thử Báo cáo đồ án tốt nghiệp Sau có cửa sổ terminal, gõ lệnh “npm start” vào hai terminal, terminal lại gõ lệnh “cd nodejs” “npm start” Nhấn enter terminal để chạy lệnh Hình Màn hình CLI chạy ứng dụng Angular Hình 5.Màn hình CLI chạy Express Bước 8: Cả Terminal hình trình duyệt web tự động chạy trang web lên Hoặc chạy tay cách mở trình duyệt web nhập url: http://localhost:4200 Hình Kết chạy thành công Angular Express Giao diện trang chủ khởi chạy đầu tiên: http://localhost:4200 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 Chương 5: Cài đặt kiểm thử Báo cáo đồ án tốt nghiệp 5.2.1 Chức đăng ký ID SignUp_001 SignUp_002 SignUp_003 SignUp_004 Bảng Kiểm thử phần mềm chức đăng ký Chương 5: Cài đặt kiểm thử Báo cáo đồ án tốt nghiệp 5.2.2 Chức đăng nhập ID SignIn _001 SignIn _002 SignIn _003 Bảng Kiểm thử phần mềm chức đăng nhập Chương 5: Cài đặt kiểm thử Báo cáo đồ án tốt nghiệp 5.2.3 Chức đổi mật ID ChangePass _001 ChangePass _002 Bảng Kiểm thử phần mềm chức đổ 5.2.4 Chức tìm kiếm sách ID SearchBook _001 SearchBook _002 Chương 5: Cài đặt kiểm thử Báo cáo đồ án tốt nghiệp SearchBook _003 5.2.5 Chức toán ID Payment_001 Payment_002 Bảng 5 Kiểm thử chức toán Chương 5: Cài đặt kiểm thử Báo cáo đồ án tốt nghiệp CHƯƠNG 6: KẾT LUẬN 6.1 Kết đạt • Kỹ làm việc nhóm tốt, kỹ giao tiếp team, phân công công việc làm dự án ngắn ngày • 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 • Biết cách áp dụng sở liệu không quan hệ (noSQL) để xây dựng database cho hệ thống, xây dựng web server REST API phục vụ cho ứng dụng web lẫn ứng dụng di động, xây dựng giao diện trang web dạng Single Page Application Angular 6.2 Ưu điểm và nhược điểm 6.2.1 Ưu điểm - Website thiết kế với giao diện dễ nhìn, thân thiện với người dùng - Thao tác đặt mua tốn đơn giản - Có chức tạo chương trình ưu đãi cho khách hàng với vịng quay may mắn, tạo cho khách hàng có cảm giác thích thú ý tới website - Bằng việc gợi ý hiệu sản phẩm (item) cho tuỳ người dùng, giúp người dùng cảm thấy thuận tiện, thích thú website Và điều giúp tăng lợi nhuận cho cửa hàng 6.2.2 Nhược điểm - Về giao diện, nhiều thiếu sót việc thiết kế nên website tương thích với máy tính nhiều trang chưa thực sự ổn việc thiết kế - Về chức năng, nghiệp vụ kinh nghiệm nên việc xử lý bất đồng toán lỗi số lỗi - Về vấn đề tương tác admin với khách hàng, không tích hợp chat box nên khách hàng có cách để phản hồi với admin thông qua email Chương 6: Kết luận Báo cáo đồ án tốt nghiệp 6.2.3 Khó khăn 6.2.3.1 Cơng nghệ STT Khó Việc nhúng Js v sự phức tạp MongoDB d sql nên việc xử phức tạp Chưa hiểu rõ v component tron muốn truyền liệu từ router ngồi vào router ln bị thất bại Bảng 1.Khó khăn cơng nghệ 6.2.3.2 Quy trình thực STT Hay bị lỗi c pull c Do nằm tro bệnh bùng việc l Bảng 6.3 Kinh nghiệm đạt Học cách quản lý source control bản, hỗ trợ tốt việc làm dự án nhiều người 6.4 Hướng phát triển tương lai Mở rộng phát triển từ thành chuỗi cửa hàng Setup deploy website lên Docker Tích hợp thêm nhiều cổng toán Zalo Pay, MoMo, Internet Banking, Chương 6: Kết luận Báo cáo đồ án tốt nghiệp TÀI LIỆU THAM KHẢO Tiếng Việt https://viblo.asia/p/gioi-thieu-ve-mean-stack-va-cach-cai-dat-meanio-4dbZNx3n5YM [4] [5] https://topdev.vn/blog/node-js-co-ban/ https://viblo.asia/p/tong-quan-ve-node-js-AeJ1vOdQRkby [8] Audrey, đăng TÌM HIỂU VỀ MONGODB, https://viblo.asia/p/tim-hieu-ve- mongodb-4P856ajGlY3 [10] https://viblo.asia/p/gioi-thieu-ve-he-thong-goi-y-recommender-systems-hoac- recommendation-systems-maGK78yOZj2 [9] https://techblog.vn/recommender-systems [12] https://viblo.asia/p/cac-thuat-toan-duoc-su-dung-trong-he-thong-goi- y-recommendation-system-oOVlYyPal8W Tiếng Anh [1] Team Coding DOJO, YOUR GUIDE TO MEAN, What is MEAN Stack? [2] https://www.quora.com/What-is-the-stack [3] https://www.guru99.com/mean-stack-developer.html [6] https://expressjs.com/ [7] Jeremy Wilken, Angular in action, Chương 1, trang [11] https://becominghuman.ai/introduction-to-recommendation-system-in-javascript- 74209c7ff2f7 ...KHOA ĐÀ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 MEAN STACK (RECOMMENDATION SYSTEM) SVTH : NGUYỄN ĐỨC HẬU MSSV : 16110069 SVTH : TRƯƠNG... 01/07/2020 Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK Các số liệu, tài liệu ban đầu: Khơng có Nội dung thực đề tài: - Tìm hiểu MEAN STACK - Xây dựng website demo TRƯỞNG NGÀNH... 24/02/2020 đến: 30/06/2020 Tên đề tài: XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MEAN STACK GV hướng dẫn: TS LÊ VĨNH THỊNH Nhiệm vụ luận văn: Nghiên cứu MEAN stack Nghiên cứu cách viết REST API cách