Phát triển website tìm kiếm cửa hàng hóa sản phẩm sử dụng công nghệ mern stack và google maps api

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 PHÁT TRIỂN WEBSITE TÌM KIẾM CỬA HÀNG HĨA SẢN PHẨM SỬ DỤNG CƠNG NGHỆ MERN STACKVÀ GOOGLE MAPS API GVHD: LÊ VĂN VINH SVTH: PHẠM THẾ HỮU MSSV:15110225 SVTH: NGUYỄN CẢNH TOÀN MSSV: 15110335 SKL006751 Tp Hồ Chí Minh, 2019 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ~~~o0o~~~ PHẠM THẾ HỮU - 15110225 NGUYỄN CẢNH TOÀN – 15110335 Đề Tài: PHÁT TRIỂN WEBSITE TÌM KIẾM CỬA HÀNG HĨA SẢN PHẨM SỬ DỤNG CƠNG NGHỆ MERN STACK VÀ GOOGLE MAPS API KHĨA LUẬN TỐT NGHIỆP GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2015-2019 ***** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên 1: Họ tên sinh viên 2: Chuyên ngành: Tên đề tài: Họ tên GVHD: NHẬN XÉT: Về nội dung đề tài khối lượng công việc thực hiện: Ưu điểm Khuyết điểm Đề nghị cho bảo vệ hay không? …………………… Đánh giá xếp loại: Điểm: TP Hồ Chí Minh, ngày …… tháng …… năm 2019 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ***** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên 1: Họ tên sinh viên 2: Chuyên ngành: Tên đề tài: Họ tên GVPB: NHẬN XÉT: Về nội dung đề tài khối lượng công việc thực hiện: Ưu điểm Khuyết điểm Đề nghị cho bảo vệ hay không? …………………… Đánh giá xếp loại: Điểm: TP Hồ Chí Minh, ngày …… tháng …… năm 2019 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CẢM ƠN Nhóm em xin chân thành cảm ơn khoa CÔNG NGHỆ THÔNG TIN, BỘ MÔN CÔNG NGHỆ PHẦN MỀM, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM tạo điều kiện thuận lợi cho chúng em thực đề tài Chúng em xin gửi lời cảm ơn chân thành đến thầy TS LÊ VĂN VINH, người tận tình bảo hướng dẫn nhóm em thực đề tài Bên cạnh đó, chúng em xin gửi lời cảm ơn đến thầy cô giảng viên trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM nói chung thầy giảng viên khoa Cơng Nghệ Thơng Tin nói riêng, người giảng dạy, tạo điều kiện cho em tích lũy kiến thức quý báu năm học qua Chúng em nỗ lực nhiều để hoàn thành tốt nhiệm vụ đề tài, khả cịn hạn chế nên chắn khơng tránh khỏi thiếu sót Chúng em mong nhận tận tình bảo thầy để ngày tiến TP Hồ Chí Minh, ngày …… tháng …… năm 2019 Nhóm sinh viên thực hiện: PHẠM THẾ HỮU NGUYỄN CẢNH TOÀN - 15110225 ***** ĐỀ CƯƠNG CHI TIẾT KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên 1: Họ tên sinh viên 2: Chuyên ngành: Tên đề tài: Họ tên GVHD: Thởi gian thực hiện: từ 01/09/2019 – 31/12/2019 NHIỆM VỤ CỦA KHĨA LUẬN:  Tìm hiểu MERN STACK GOOGLE MAPS API phát triển website Tìm kiếm cửa hàng hóa sản phẩm  Khảo sát trạng, đánh giá website tìm kiếm cửa hàng xung quanh có  Phân tích nghiệp vụ website tìm kiếm cửa hàng có  Mơ hình hóa nghiệp vụ, xây dựng sở liệu  Cài đặt chức năng, kiểm thử toàn hệ thống ĐỀ CƯƠNG VIẾT KHÓA LUẬN: PHẦN 1: PHẦN MỞ ĐẦU 1.1 Tính cấp thiết đề tài 1.2 Mục tiêu đề tài 1.3 Cách tiếp cận phương pháp nghiên cứu 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu 1.4 Kết dự kiến đạt PHẦN 2: PHẦN NỘI DUNG 2.1 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 2.1.1 Tìm hiểu MERN STACK 2.1.1.1 Tìm hiểu Javascript 2.1.1.2 Tìm hiểu Nodejs 2.1.1.3 Tìm hiểu Express Framework nodejs 2.1.1.4 Tìm hiểu Mongodb 2.1.1.5 Tìm hiểu Reactjs 2.1.2 Ứng dụng MERN Stack phát triển website 2.1.2.1 Giới thiệu công nghệ Stack 2.1.2.2 Giới thiệu MERN Stack 2.1.2.3 Nhưng điểm bật MERN Stack 2.1.3 Tìm hiểu Google Maps Api 2.1.3.1 Giới thiệu Google Maps Api 2.1.3.2 Một số ứng dụng Google Maps Api 2.1.4 Tìm hiểu mơ hình MVC xây dựng website 2.1.4.1 Tìm hiểu mơ hình MVC 2.1.4.2 Chi tiết lớp mơ hình MVC 2.1.4.3 Ưu - nhược điểm mơ hình MVC 2.2 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.2.1 Khảo sát trạng 2.2.2 Xác định yêu cầu 2.2.2.1 Yêu cầu chức 2.2.2.2 Yêu cầu phi chức 2.2.3 Mơ hình hóa u cầu 2.2.3.1 Lược đồ use case 2.2.3.2 Đặc tả use case 2.3 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 2.3.1 Thiết kế hệ thống 2.3.1.1 Lược đồ lớp 2.3.1.2 Lược đồ 2.3.2 Thiết kế sở liệu 2.3.2.1 Cấu trúc liệu 2.3.2.2 Các ràng buộc toàn vẹn 2.3.2.3 Lược đồ thực thể liên kết 2.3.2.4 Mô tả chi tiết bảng liệu 2.3.3 Thiết kế giao diện 2.4 Chương 4: cài đặt kiểm thử 2.4.1 Cài đặt 2.4.1.1 Thiết lập môi trường 2.4.1.2 Xây dựng cấu trúc project 2.4.2 Kiểm thử PHẦN 3: PHẦN KẾT LUẬN 3.1 Kết đạt 3.2 Ưu điểm 3.3 Nhược điểm 3.4 Hướng phát triển tương lai TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN: STT KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN KIỂM THỬ STT Kiểm thử chức đăng nhập Kiểm thử chức đăng nhanhnhập Google, Facebook Kiểm thử chức đăng ký KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN Kiểm thử chức đăng xuất Kiểm thử chức cập nhật thông tin Kiểm thử chức cập nhật avatar Kiểm thử chức tìm kiếm cửa hàng thơng qua sản phẩm KHĨA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN Kiểm thử chức định vị tìm kiếm vị trí khu vực muốn tìm kiếm Kiểm thử chức lấy lại mật (quên mật khẩu) Kiểm thử chức 10 đổi mật KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN Kiểm thử 11 chức xem chi tiết sản phẩm Kiểm thử chức 12 xem thông tin cửa hàng Kiểm thử 13 chức đánh giá sản phẩm Kiểm thử 14 chức tạo cửa hàng KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THÔNG TIN Kiểm thử chức 15 thêm sản phẩm vào cửa hàng Kiểm thử 16 chức cập nhật sản phẩm Kiểm thử chức 17 cập nhật thông tin cửa hàng KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN Kiểm thử 18 chức thống kê KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THÔNG TIN PHẦN 3: PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Nghiên cứu thành phần công nghệ MERN Stack như: MongoDB, ExpressJS framework, ReactJS library NodeJS platform Tìm hiểu chức Google Maps API định vị, tìm kiếm vị trí, đường, hiển thị marker đánh dấu vị trí cửa hàng Sử dụng công nghệ MERN Stack kết hợp với Google Maps API để xây dựng ứng dụng web tìm kiếm cửa hàng hóa sản phẩm với chức năng:  Đăng ký/Đăng nhập/Đăng xuất  Đăng nhập nhanh Google/Facebook  Quản lý tài khoản (Xem/Cập nhật thông tin, đổi mật khẩu, lấy lại mật khẩu)  Tìm kiếm cửa hàng có sẵn sản phẩm  Định vị chọn vị trí khu vực muốn tìm kiếm sản phẩm  Xem chi tiết thông tin sản phẩm/ cửa hàng  Đánh giá sản phẩm  Quản lý cửa hàng/ sản phẩm  Thống kế ƯU ĐIỂM  Thực chức trang web tìm kiếm sản phẩm cho khách hàng, giúp khác hàng dễ dàng tìm cửa hàng có sẵn sản phẩm mà cần  Giúp cửa hàng nhỏ lẻ có tảng để lưu trữ thơng tin quảng bá sản phẩm Các thơng tin bao gồm: thơng tin sản phẩm, thông tin lượt quan tâm khách hàng dành cho sản phẩm, số điểm đánh giá sản phẩm KHĨA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN  Dữ liệu mật tài khoản đăng nhập vào hệ thống lưu trữ sở liệu cách an tồn nhờ thực thơng qua giải thuật mã hóa md5  Người dùng dễ dàng đăng nhập nhanh thông qua Google Facebook  Hỗ trợ hiển thị đồ giúp người dùng có trải nghiệm tốt vị trí cửa hàng  Giao diện quản lý, thống kê của người dùng admin dễ sử dụng cho tất người  Hỗ trợ hiển thị giao diện tảng mobile  Hỗ trợ lưu lại sản phẩm người dùng xem gần NHƯỢC ĐIỂM  Chưa hỗ trợ chức trò chuyện trực tuyến chủ cửa hàng khách hàng chủ cửa hàng người quản trị  Các thuật tốn tìm kiếm sản phẩm định vị theo vị trí người dùng chưa thật tối ưu, cần cải thiện để tăng tốc độ tìm kiếm HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI  Vì tính chất trang web tìm kiếm nên nhóm chúng em cố gắng tìm hiểu sử dụng cơng nghệ tìm kiếm nhanh có thể, đồng thời sử dụng Cơ sở liệu phân tán để giúp rút ngắn thời gian tìm kiếm  Khắc phục nhược điểm tồn động tại, lắng nghe ý kiến khách hàng đưa cải tiếng, giúp người dùng có trải nghiệm tuyệt vời tương lai 98 KHĨA LUẬN TỐT NGHIỆP – CƠNG NGHỆ THƠNG TIN TÀI LIỆU THAM KHẢO [1] - Tìm hiểu Javascript: https://developer.mozilla.org/vi/docs/Web/JavaScript/Guide/Gioi-thieu [2] – Tìm hiểu NodeJS: https://viblo.asia/p/tim-hieu-ve-node-js-co-ban-ojaqG0dGEKwZ [3] – Những kết luận sai lầm Các công ty lớn sử dụng NodeJS: https://techtalk.vn/mot-cai-nhin-tong-quan-nhat-venodejs.html [4] – Tìm hiểu ExpressJS: https://techblog.vn/phan-1-tim-hieu-express-js-framework [5] – Tìm hiểu MongoDB: https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 [6] – Tìm hiểu ReactJS: https://viblo.asia/p/buoc-dau-tim-hieu-ve-reactjs-1VgZvwWYlAw [7] – Giới thiệu MERN Stack: https://niviki.com/gioi-thieu-mern-stack [8] – Có MERN Stack: https://techblog.vn/gioi-thieu-mern-stack [9] – Tìm hiểu Google Maps API: https://viblo.asia/p/tim-hieu-ve-google-map-api-ZWApGxJ3R06y [10] – Tìm hiểu mơ hình MVC: https://itphutran.com/mo-hinh-mvc-trong-java-web-jspservlet-la-gi 99 ... MERN STACK GOOGLE MAPS API phát triển website Tìm kiếm cửa hàng hóa sản phẩm  Khảo sát trạng, đánh giá website tìm kiếm cửa hàng xung quanh có  Phân tích nghiệp vụ website tìm kiếm cửa hàng có... marker đánh dấu vị trí cửa hàng  Sử dụng cơng nghệ MERN Stack kết hợp với Google Maps API để xây dựng ứng dụng web tìm kiếm cửa hàng hóa sản phẩm (các cửa hàng có sẵn sản phẩm) có chức dành cho... KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ~~~o0o~~~ PHẠM THẾ HỮU - 15110225 NGUYỄN CẢNH TOÀN – 15110335 Đề Tài: PHÁT TRIỂN WEBSITE TÌM KIẾM CỬA HÀNG HĨA SẢN PHẨM SỬ DỤNG CÔNG NGHỆ MERN STACK