rần Quốc Khánh – K58 TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG TÌM KIẾM QUÁN CÀ PHÊ KẾT HỢP GOOGLE API Giảng vi[.]
TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MƠN CƠNG NGHỆ THƠNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG TÌM KIẾM QUÁN CÀ PHÊ KẾT HỢP GOOGLE API Giảng viên hướng dẫn: PHẠM THỊ MIÊN Sinh viên thực hiện: LÊ TRẦN XN SƠN Lớp: CƠNG NGHỆ THƠNG TIN Khố: 59 TP Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG TÌM KIẾM QUÁN CÀ PHÊ KẾT HỢP GOOGLE API Giảng viên hướng dẫn: PHẠM THỊ MIÊN Sinh viên thực hiện: LÊ TRẦN XUÂN SƠN Lớp: CƠNG NGHỆ THƠNG TIN Khố: 59 TP Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI CỘNG HÒA XÃ HỘI CHỦ NGHIÃ VIỆT NAM PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH Độc lập – Tự – Hạnh phúc NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP BỘ MÔN: CÔNG NGHỆ THÔNG TIN -*** - Mã sinh viên: 5951071092 Họ tên SV: LÊ TRẦN XN SƠN Khóa: 59 Lớp: Cơng nghệ thơng tin Tên đề tài XÂY DỰNG TÌM KIẾM QUÁN CÀ PHÊ KẾT HỢP GOOGLE API Mục đích, yêu cầu a Mục đích : b Yêu cầu : - Yêu cầu công nghệ : o Sử dụng ngôn ngữ Typescript o Sử dụng tảng NodeJS o Sử dụng thư viện ReactJS o Sử dụng thư viện ElectronJS o Sử dụng công cụ Visual Studio Code o Sử dụng HTML, CSS, Javascript - Yêu cầu chức : o Hiển thị thông tin quán cà phê Google Map o Tích hợp Google API đường o Đăng nhập, đăng kí o Lưu vị trí quán yêu thích - u cầu phi chức : • Giao diện thân thiện Nội dung phạm vi đề tài a Nội dung: - Tổng quan toàn u cầu - Khảo sát tốn - Phân tích thiết kế hệ thống theo yêu cầu - Thiết kế giao diện phù hợp - Xây dựng ứng dụng mobile chat mã hóa - Kiểm thử ứng dụng thực nghiệm b Phạm vi đề tài: - Nghiên cứu vận dụng kiến thức học kinh nghiệm tham gia phát triển ứng dụng di động - Phát triển ứng dụng phù hợp với khả bên cạnh sử dụng nhiều cơng nghệ bên ngồi trường lớp - Nghiên cứu ngôn ngữ Typescript, Framework React, Framework ElectronJS, PostgreSQL, … số thư viện hỗ trợ liên quan Công nghệ, công cụ ngôn ngữ lập trình a Cơng nghệ : - Framework ElectronJS - Thư viện React - Framework ElectronJS b Công cụ : - Visual Studio Code c Ngơn ngữ lập trình : - Typescript Các kết dự kiến đạt ứng dụng a Kết dự kiến đạt : - Hiểu tảng NodeJS ngôn ngữ Typescript - Hiểu sở liệu Postgresql - Hiểu cách sử dụng hoạt động Google Map API - Hiểu cách xây dựng ứng dụng đa tảng với ElectronJS - Xây dựng web với React Giáo viên cán hướng dẫn Họ tên: ThS Phạm Thị Miên Đơn vị công tác: Bộ Môn CNTT Điện thoại: 0961170638 Email: ptmien@utc2.edu.vn Ngày tháng 07 năm 2022 Đã giao nhiệm vụ TKTN Trưởng BM Công nghệ Thông tin Giáo viên hướng dẫn ThS Trần Phong Nhã ThS Phạm Thị Miên Đã nhận nhiệm vụ TKTN Sinh viên: Lê Trần Xuân Sơn Điện thoại: 0834270400 Ký tên: Email: 5951071092@st.utc2.edu.vn LỜI CẢM ƠN Lời em xin cảm ơn Cô PHẠM THỊ MIÊN giúp đỡ hướng dẫn nhiệt tình cho em suốt thời gian em làm Báo Cáo Tốt Nghiệp Tiếp theo em xin cảm ơn quý Thầy Cô trường Đại Học Giao Thông Vận Tải phân hiệu TP.HCM giảng dạy truyền cảm hứng đến tất sinh viên em, để chúng em có thêm nhiều kiến thức, mở mang thêm cách tư duy, sáng tạo sống Em mong nhận lời khuyên, lời góp ý chân thành từ q Thầy Cơ để em tự hoàn thành vốn kiến thức Với kiến thức cịn thiếu sót, kỹ hạn hẹp, em dành hết thời gian tâm huyết để hồn thành Báo Cáo Tốt Nghiệp, em tránh sai lầm, em mong Thầy Cơ thơng cảm bỏ qua cho em Lời cuối em xin chúc quý Thầy Cô phân hiệu Bộ Môn Công Nghệ Thông Tin đặc biệt Cô Phạm Thị Miên có thật nhiều niềm vui, sức khỏe thành công công việc Em xin chân thành cảm ơn! Lê Trần Xuân Sơn – K59 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Tp Hồ Chí Minh, ngày ….… tháng 07 năm 2021 Giáo viên hướng dẫn Phạm Thị Miên Lê Trần Xuân Sơn – K59 MỤC LỤC NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP LỜI CẢM ƠN MỤC LỤC DANH MỤC CHỮ VIẾT TẮT 12 HÌNH VẼ 13 CHƯƠNG MỞ ĐẦU 14 1.1 Thực trạng chung 14 1.2 Mục tiêu nghiên cứu 14 1.3 Phạm vi 14 1.4 Cấu trúc báo cáo tốt nghiệp 14 CHƯƠNG CƠ SỞ LÝ THUYẾT 18 2.1 Giới thiệu HTML 18 2.2 Giới thiệu CSS 18 2.3 Giới thiệu NodeJS? 20 2.3.1 Javascript 20 2.3.2 NodeJS gì? 20 2.3.3 Ưu điểm nhược điểm 21 2.4 Giới thiệu Typescript 22 2.4.1 Typescript gì? 22 2.4.2 Tại lại chọn Typescript? 22 2.4.3 Các chức Typescript 22 2.4.4 Ưu điểm Typescript 23 2.5 Giới thiệu ElectronJS 24 2.5.1 ElectronJS gì? 24 2.5.2 Ưu điểm nhược điểm ElectronJS 25 Lê Trần Xuân Sơn – K59 2.6 Giới thiệu React 25 2.6.1 React gì? 25 2.6.2 Ưu điểm nhược điểm React 26 2.7 Giới thiệu PostgreSQL 27 2.7.1 PostgreSQL gì? 27 2.7.2 Tính PostgreSQL 28 2.8 Giới thiệu Google API 28 2.8.1 Google Map API gì? 28 2.8.2 Một số ứng dụng Google Map API 29 2.8.3 Cách tính phí sử dụng Google Map API 29 2.8.4 Google Map API bị chặn Việt Nam 29 2.9 Giới thiệu MUI 30 2.9.1 Giới thiệu MUI 30 2.9.2 Cách cài đặt MUI 31 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32 3.1 Sơ đồ phân rã chức 32 3.2 Sơ đồ sở liệu 32 3.3 Sơ đồ ERD 33 3.4 Sơ đồ UseCase tổng quát 33 CHƯƠNG GIAO DIỆN ỨNG DỤNG 35 4.1 Giao diện đăng nhập 35 4.2 Giao diện đăng ký 35 4.3 Giao điện đặt lại mật 36 4.4 Giao diện đặt lại mật 37 4.5 Giao diện sau đăng nhập 38 4.6 Giao diện điều chỉnh thông tin cá nhân 39 4.6.1 Giao diện thay đổi mật tài khoản 40 4.7 Giao diện hiển thị thông tin quán cà phê 41 4.8 Giao diện tìm kiếm quán cà phê 42 4.9 Giao diện quản lý danh sách quán cà phê yêu thích 43 Lê Trần Xuân Sơn – K59 10 Hình 17 Giao diện đặt lại mật Đây giao diện để xác nhận đổi mật Tại người dùng cần kiểm tra email để lấy passcode nhập mật 4.5 Giao diện sau đăng nhập Lê Trần Xuân Sơn – K59 38 Hình 18 Giao diện sau đăng nhập Đây giao diện sau đăng nhập thành công Trên map hiển thị vị trí người dùng với Marker hình trịn màu xanh 4.6 Giao diện điều chỉnh thông tin cá nhân Lê Trần Xuân Sơn – K59 39 Hình 19 Giao diện điều chỉnh thơng tin cá nhân Đây giao diện điều chỉnh thông tin cá nhân người dùng Tại người dùng thay đổi tên, số điện thoại, avatar, mật Email khơng thể thay đổi chìa khố xác nhận tài khoản khách hàng 4.6.1 Giao diện thay đổi mật tài khoản Lê Trần Xuân Sơn – K59 40 Hình 20 Giao diện thay đổi mật tài khoản Đây giao diện thay đổi mật người dùng ấn vào Change Password giao diện thay đổi thông tin 4.7 Giao diện hiển thị thông tin quán cà phê Lê Trần Xuân Sơn – K59 41 Hình 21 Giao diện hiển thị thông tin quán cà phê Khi người dùng ấn vào quán cà phê bất kì, map bảng thông tin quán 4.8 Giao diện tìm kiếm quán cà phê Lê Trần Xuân Sơn – K59 42 Hình 22 Giao diện tìm kiếm quán cà phê Giao diện bên phải chức tìm kiếm quán cà phê Người dùng nhập tên địa vào Search để tìm kiếm Đồng thời tìm kiếm qn cà phê gần vị trí quán hiện mở Kết sau tìm kiếm hiển thị Search Result 4.9 Giao diện quản lý danh sách quán cà phê yêu thích Lê Trần Xuân Sơn – K59 43 Hình 23 Giao diện quan lý quán cà phê yêu thích Đây giao diện danh sách quán cà phê yêu thích người dùng Người dùng hiển thị số quán trang Với quán cà phê lưu bảng, người dùng hiển thị vị trí quán bảng đồ, hiển thị thông tin chi tiết chỉnh sửa thông tin chi tiết , xoá quán cà phê khỏi danh sách 4.9.1 Giao diện xem vị trí quán cà phê u thích Lê Trần Xn Sơn – K59 44 Hình 24 Giao diện xem vị trí quán cà phê yêu thích Đây giao diện người dùng ấn vào icon xem vị trí quán cà phê bảng đồ 4.9.2 Giao diện xem thông tin quán cà phê yêu thích Lê Trần Xuân Sơn – K59 45 Hình 25 Giao diện xem thơng tin qn cà phê yêu thích Đây giao diện xem chi tiết thông tin quán lưu danh sách u thích 4.9.3 Giao diện chỉnh thơng tin quán cà phê yêu thích Lê Trần Xuân Sơn – K59 46 Hình 26 Giao diện điều chỉnh thơng tin quán cà phê yêu thích Đây giao diện chỉnh thông tin chi tiết quán cà phê danh sách u thích Người dùng chỉnh tên, địa chỉ, toạ độ 4.10 Giao diện đường Lê Trần Xuân Sơn – K59 47 Hình 27 Giao diện đường Đây giao diện chức đường Người dùng nhập địa tên vào ô Origin (hoặc ô Destination) Đồng thơi thay đổi liệu nhập ô, lấy vị trí người dùng, thay đổi chế độ đường Lê Trần Xuân Sơn – K59 48 CHƯƠNG 5: KẾT LUẬN KIẾN NGHỊ 5.1 Kết quả: 5.1.1 Kết đạt được: Trong q trình nghiên cứu hồn thành đồ án tốt nghiệp với đề tài “Xây dựng ứng dụng tìm kiếm quán cà phê kết hợp Google APi”, em đạt kết sau: - Hiển thị thơng tin qn cà phê - Tìm kiếm quán cà phê - Lưu danh sách quán cà phê yêu thích - Hiển thị vị trí quán cà phê yêu thích đồ - Chỉ đường vị trí cụ thể 5.1.2 Kết chưa đạt được: Bên cạnh khía cạnh đạt được, thời gian thực có hạn với trình độ kiến thức nhiều hạn chế nên thiếu sót số chức như: - Cài đặt cho app - Đánh giá ứng dụng - Đánh giá quán cà phê - Tìm kiếm quán cà phê theo số lượt tìm kiếm - Tìm kiếm quán cà phê theo đánh giá Google Map 5.2 Hướng phát triển Trong tương lai, có điều kiện đồ án em phát triển theo hướng sau: - Có thể sử dụng app điện thoại Lê Trần Xuân Sơn – K59 49 - Cải thiện tốc độ tìm kiếm quán cà phê Lê Trần Xuân Sơn – K59 50 PHỤ LỤC Phụ lục 1: Hướng dẫn cài đặt - Bước 1: Tải nodejs để có chạy javascript môi trường backend Đường dẫn để tải: https://nodejs.org/en/ - Bước 2: Tải Visual Studio Code cài đặt đường dẫn https://code.visualstudio.com/ - Bước 3: Tải sourecode mở thư mục visual studio code - Bước 4: Chạy backend trước câu lệnh npm run start:prod git command - Bước 5: Chạy frontend người dùng câu lệnh npm run build git command thư mục Lê Trần Xuân Sơn – K59 51 TÀI LIỆU THAM KHẢO [1] Thông tin thư viện React - https://reactjs.org/ [2] Tìm hiểu ngơn ngữ Typescipt - https://www.typescriptlang.org/ [3] Tìm hiểu thư viện Electron - https://www.electronjs.org/ [4] Tìm hiểu NodeJS - https://nodejs.org [5] Tìm hiểu Google Map API - https://developers.google.com/maps Lê Trần Xuân Sơn – K59 52