KHÓA LUẬN tốt NGHIỆP xây DỰNG ỨNG DỤNG CHIA sẻ địa DANH LỊCH sử

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM LÊ NHỰT VINH - 15521016 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬ Building a historic places sharing application KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM LÊ NHỰT VINH - 15521016 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬ Building a historic places sharing application KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN TS Nguyễn Hà Giang ThS Nguyễn Thị Thanh Trúc TP HỒ CHÍ MINH, 2021 DANH SÁCH HỘI ĐỒNG BẢO VỆ KHĨA LUẬN Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ………………………………………… – Chủ tịch ………………………………………… – Thư ký ………………………………………… – Ủy viên ………………………………………… – Ủy viên ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬ Nhóm SV thực hiện: Lê Nhựt Vinh Cán hướng dẫn/phản biện: 15521016 TS Nguyễn Hà Giang ThS Nguyễn Thị Thanh Trúc Đánh giá Khóa luận Về báo cáo: Số trang Số chương Số bảng số liệu Số hình vẽ Số tài liệu tham khảo Sản phẩm Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Đánh giá chung: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Điểm sinh viên: Lê Nhựt Vinh: …… /10 Người nhận xét (Ký tên ghi rõ họ tên) ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬ Nhóm SV thực hiện: Lê Nhựt Vinh Cán hướng dẫn/phản biện: 15521016 TS Nguyễn Hà Giang ThS Nguyễn Thị Thanh Trúc Đánh giá Khóa luận Về báo cáo: Số trang Số chương Số bảng số liệu Số hình vẽ Số tài liệu tham khảo Sản phẩm Một số nhận xét hình thức báo cáo: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Đánh giá chung: …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… …………………………………………………………………………………………………… Điểm sinh viên: Lê Nhựt Vinh: …… /10 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn đến ban giám hiệu, quý thầy cô trường đại học Công Nghệ Thông Tin, đặc biệt thầy cô khoa Cơng Nghệ Phần Mềm tận tình giảng dạy, trang bị cho em kiến thức cần thiết năm học tập trường Em xin gửi lời cảm ơn đến thầy Nguyễn Hà Giang cô Nguyễn Thị Thanh Trúc, người tận tình hướng dẫn giúp đỡ suốt trình thực đồ án để em hồn thành tốt đồ án Mặc dù cố gắng hoàn thành đồ án với tất nỗ lực, khoá luận chắn khơng tránh khỏi thiếu sót, em kính mong q thầy tận tình bảo Sau cùng, em xin kính chúc q thầy khoa Cơng Nghệ Phần Mềm, thầy Nguyễn Hà Giang cô Nguyễn Thị Thanh Trúc thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Em xin chân thành cảm ơn! ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng ứng dụng chia sẻ địa danh lịch sử TÊN TIẾNG ANH: Building a historic places sharing application Cán hướng dẫn: TS Nguyễn Hà Giang, ThS Nguyễn Thị Thanh Trúc Thời gian thực hiện: Từ ngày 01/03/21 đến ngày 26/06/21 Sinh viên thực hiện: Lê Nhựt Vinh - 15521016 Nội dung đề tài: Lịch sử khúc ca hào hùng dân tộc, khứ quên lớp người trước Học lịch sử khơng tìm nguồn cội, mà thêm tự hào dân tộc, tiếp thêm sức mạnh để xây dựng phát triển đất nước Tuy vậy, việc học tìm hiểu lịch sử nhiều người khô khan không tạo hứng thú Mọi người chăm vào trận chiến chống quân xâm lược hay mở mang bờ cõi nước nhà mà quên lịch còn thể qua chi tiết nhỏ sống ngày như: tên đường phố, chùa chiền, nhà thờ, địa danh du lịch Khơng vậy, việc tìm hiểu lịch sử qua kênh truyền thống báo đài, hình ảnh, tài liệu gây khó khăn khơng nhỏ cho người thật có lịng muốn tìm hiểu Từ suy nghĩ đó, em muốn nghiên cứu xây dựng ứng dụng hỗ trợ người dùng tìm hiểu lịch sử dựa địa danh, thành phố Hồ Chí Minh Ứng dụng dựa đồ để người tìm kiếm địa danh lịch sử, ngồi người dùng đóng góp cập nhật địa danh để chia sẻ với người - Mục tiêu: + Xây dựng ứng dụng giúp người dùng tìm kiếm chia sẻ thông tin kiến thức địa danh lịch sử + Xây dựng ứng dụng có giao diện trực quan phù hợp với đối tượng người dùng + Nghiên cứu thuật toán, phương pháp để phát triển ứng dụng chia sẻ, kiểm duyệt nội dung đăng tải người dùng - Đối tượng nghiên cứu: + Nghiên cứu phương pháp cách thiết kế, xây dựng tảng chia sẻ thơng tin hồn chỉnh + Nghiên cứu Stateful Server với NodeJS + Nghiên cứu React Libary để xây dựng website + Nghiên cứu chế quản lý thông tin người dùng cung cấp tránh trường hợp người dùng tải lên thông tin sai trái pháp luật - Pham vi nghiên cứu: + Tập trung tìm hiểu phương pháp thiết kế, xây dựng, phát triển giữ cho hệ thống hoàn chỉnh hoạt động hiệu + Ứng dụng hỗ trợ người dùng tìm kiếm, đóng góp, chia sẻ địa danh lịch sử - Đối tượng triển khai: + Service API + Web Application - Phương pháp: + Tìm hiểu phương pháp thiết kế, xây dựng, phát triển giữ cho hệ thống hoàn chỉnh hoạt động hiệu + Thiết kế sở liệu phù hợp với tảng + Thiết kế UI/UX cho website 4.2.5 Màn hình quản trị 4.2.5.1 Giao diện trang chủ quản trị Hình 4.12 Giao diện trang chủ quản trị Mô tả : Giao diện hiển thị số liệu tổng quanvề người dùng, địa danh, đóng góp báo cáo chưa xử lí 70 4.2.5.2 Giao diện quản lí người dùng Hình 4.13 Giao diện chi tiết người dùng Mô tả: Giao diện hiển thị danh sách tài khoản người dùng cho phép tìm kiếm, xếp lọc danh sách này, nhấn vào tài khoản hệ thống hiển thị thông tin người dùng ID, email, phân quyền, tên hiển thị, ảnh đại diện Có thể vơ hiệu hố tài khoản người dùng xét quyền nhanh cho tài khoản người dùng 71 4.2.5.3 Giao diện quản lí địa danh Hình 4.14 Giao diện quản lí địa danh Hình 4.15 Giao diện khơi phục phiên trước địa danh Mô tả : Giao diện hiển thị danh sách địa danh, tìm kiếm, xếp lọc danh sách này, nhấn vào địa danh hệ thống hiển thị thông tin 72 người dùng ID, ngày tạo, ngày cập nhật lần cuối, log cập nhât kèm phiên bản, nội dung, ảnh, 4.2.5.4 Giao diện kiểm duyệt đóng góp Hình 4.16 Giao diện danh sách đóng góp Mơ tả: Giao diện hiển thị danh sách đóng góp địa danh người dùng, tìm kiếm, xếp danh sách Hệ thống hiển thị thông tin ID, tên địa đanh, địa chỉ, ngày tạo Quản trị viên, điều hành viên nhấn nút xem để bắt đầu kiểm duyệt đóng góp người dùng 73 4.2.5.5 Giao diện quản lí báo cáo Hình 4.17 Giao diện quản lí báo cáo địa danh Hình 4.18 Giao diện quản lí báo cáo bình luận Mơ tả: Giao diện hiển thị danh sách báo cáo theo hai loại : báo cáo bình luận báo cáo địa danh, danh sách tìm kiếm, xếp lọc Chi tiết báo cáo hiển thị ID báo cáo,nội dung báo cáo, người báo cáo , địa danh bị báo cáo, riêng với báo cáo bình luận hiển thị thêm người bị báo cáo bình luận bị báo cáo họ Tuỳ 74 vào trường hợp sau xử lí xong Quản trị viên, điều hành viên chọn xử lí để tiếp tục xử lí báo cáo 4.2.6 Màn hình kiểm duyệt đóng góp Hình 4.19 Giao diện kiểm duyệt đóng góp điạ danh 75 Hình 4.20 Giao diện kiểm duyệt đóng góp địa danh có 76 Mơ tả: - Đối với giao diện kiểm duyệt đóng góp địa danh : hệ thống hiển thị tất thông tin địa danh tên, tên khác, nội dung, ảnh,… - Đối với giao diện kiểm duyệt đóng góp địa danh có: hệ thống hiển thị rõ ảnh xoá, thêm, sửa ghi Phần nội dung cho biết người dùng thêm sửa dòng Sau người dùng chọn phê duyệt từ chối đóng góp địa danh thơng qua hành động nhắn nút “Phê duyệt” “Từ chối” 4.3 Triển khai hệ thống Hệ thống bao gồm Cloud Server: - Font-end Server: React.js – Giao diện ứng dụng - Back-end Server: o Node.js – Máy chủ lưu trữ thông tin, xử lí API với máy khách o Python – Thu thập, phân tích xử lí hình ảnh Tất deploy thông qua gcloud command-line tool 4.3.1 Font-end Server Thiết lập cấu hình Server thơng qua file app.yaml: Hình 4.21 Cấu hình Cloud Server React.js 77 Hình 4.22 Chạy lệnh "yarn build" tạo folder build Hình 4.23 Chạy lệnh "gcloud app deploy" deploy ứng dụng 78 4.3.2 Back-end Server 4.3.2.1 Node.js Thiết lập cấu hình Server thông qua file app.yaml không cần chạy lệnh “yarn build” mà deploy trực tiếp lệnh “gcloud app deploy” Hình 4.24 Cấu hình Cloud Server Node.js 4.3.2.2 Python Thiết lập cấu hình Server thơng qua file app.yaml deploy trực tiếp lệnh “gcloud app deploy” Hình 4.25 Cấu hình Cloud Server Python 79 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết đạt Sau gần tháng trao đổi phát triển, hệ thống đáp ứng đầy đủ chức đề Cùng với ứng dụng chạy phiên thức tên miền: https://memorii-sg.df.r.appspot.com/ Về mặt kỹ thuật: - Tìm hiểu chế hoạt động phát triển thành công hệ thống chia sẻ thông tin tương tự trang wiki - Xây dựng chế kiểm duyệt nội dung người dùng chia sẻ quản lí phiên thơng tin đóng góp - Xây dựng thành công ứng dụng để hiển thị kết với giao diện thân thiện hệ thống server để quản lý liệu - Nghiên cứu, hiểu thêm ứng dụng thành cơng thuật tốn SIFT KNN vào hệ thống - Nghiên cứu xây dựng thành công hệ thống xác thực quyền truy cập với JWT - Bảo mật hệ thống việc phòng tránh XSS (Cross Site Scripting), NoSQL Injection - Ứng dụng web tương thích hầu hết với máy tính thiết bị di động Về mặt thực tiễn: - Nâng cao khả tìm hiểu nghiên cứu cơng nghệ, chọn lựa công nghệ phù hợp với định hướng phát triển - Hiểu áp dụng quy trình phát triển phần mềm - Cải thiện kĩ lên kế hoạch, phân chia, điều phối công việc - Xây dựng triển khai ứng dụng vào thực tế sống 5.2 Thuận lợi khó khăn 5.2.1 - Thuận lợi Sinh viên có kiến thức tảng JS, ReactJS, NodeJS,… nên khơng gặp phải khó khăn việc sử dụng hay phát triển hệ thống 80 - Các cơng nghệ dễ dàng tích hợp phù hợp cho việc phát triển ứng dụng lâu dài 5.2.2 - Khó khăn Khó khăn việc tìm kiếm tư liệu ảnh, viết địa danh lịch sử Nhiều nguồn tin chưa xác minh - Ứng dụng có nhiều nghiệp vụ phức tạp để thực dẫn để số tính thời gian dự tính ban đầu - Các công nghệ phát sinh đề xử dụng, phải dành thời gian chuyển đổi công nghệ khác phù hợp - Nhóm người dùng nhỏ đa hội nhóm chuyên lịch sử 5.3 Hạn chế Những hạn chế suốt trình thực khố luận: - Một số tính chưa tối ưu hoá thuật toán SIFT thời gian chạy chưa tối ưu - Vì thời gian hạn hẹp nên chưa thể tìm hiểu sâu công nghệ áp dụng - Ứng dụng phát triển nên chưa có nhiều người dùng 5.4 Hướng phát triển Trong tương lai, phát triển thêm chức như: - Chatbot trả lời câu hỏi địa danh lịch sử - Ứng dụng Machine Learning công nghê tượng tự để tạo timeline ghi mốc lại thời điểm địa danh từ viết người dùng chia sẻ - Tạo lộ trình tham quan địa danh thành phố xe máy phương tiện công cộng - Cho phép người dùng đóng góp, chia sẻ thêm video, ảnh động, ảnh panorama, âm thanh, … - Xây dựng chế đóng góp hồn chỉnh giúp tối ưu hoá hệ thống - Thu thập đầy đủ 200 địa danh lịch sử Thành phố Hồ Chí Minh sau mở rộng khu vực khác Hà Nội, Đà Nẵng, Huế, … 81 - … Ngồi ra, sau nhận đóng góp người dùng, em tuỳ chỉnh, cập nhật để hoàn thiện ứng dụng đồng thời liên hệ cá nhận, cộng đồng chuyên lịch sử để hỗ trợ điều hành xây dựng hệ thống 82 TÀI LIỆU THAM KHẢO [1] OpenCV, "Introduction to SIFT," [Online] Available: https://docs.opencv.org/master/da/df5/tutorial_py_sift_intro.html [2] N Altman, "An Introduction to Kernel and Nearest-Neighbor Nonparametric Regression," [Online] Available: https://ecommons.cornell.edu/bitstream/handle/1813/31637/BU-1065MA.pdf;jsessionid=92FFD314CABFC09E7572A7E66CC9F605?sequence=1 [3] M B Jones, B Bradley and S Sakimura, "JSON Web Token (JWT)," [Online] Available: https://datatracker.ietf.org/doc/html/rfc7519 [4] M F E I Netscape Communications Corporation, "JavaScript," [Online] Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript [5] Python Software Foundation, "Python," [Online] Available: https://www.python.org/ [6] Facebook and community, "ReactJS," [Online] Available: https://reactjs.org/ [7] D Abramov and A Clark, "ReduxJS," [Online] Available: https://redux.js.org/ [8] Community, "Mongoose," [Online] Available: https://mongoosejs.com/ [9] Google, "Google App Engine," [Online] Available: https://cloud.google.com/appengine/docs [10] ImageKit.io, "ImageKit.io," [Online] Available: https://docs.imagekit.io/ [11] Mapbox, "Mapbox," [Online] Available: https://www.mapbox.com/ [12] Opencv, "OpenCV-Python Tutorials - Feature Matching," [Online] Available: https://docs.opencv.org/master/dc/dc3/tutorial_py_matcher.html [13] R Fielding, "Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content," [Online] Available: https://datatracker.ietf.org/doc/html/rfc7231#section-4 [14] MongoDB Inc., "MongoDB," [Online] Available: https://www.mongodb.com/ [15] R Herman , "5 Step Guide To Deploy Your React App On Google’s App Engine," June 2020 [Online] Available: https://javascript.plainenglish.io/quickly-deployyour-react-app-on-googles-app-engine-6bb97480cc9c 83 [16] Google, "Quickstart for Python in the App Engine Flexible Environment," [Online] Available: https://cloud.google.com/appengine/docs/flexible/python/quickstart [17] Google, "Quickstart for Node.js in the standard environment," [Online] Available: https://cloud.google.com/appengine/docs/standard/nodejs/quickstart 84 ... cứu xây dựng ứng dụng hỗ trợ người dùng tìm hiểu lịch sử dựa địa danh, thành phố Hồ Chí Minh Ứng dụng dựa đồ để người tìm kiếm địa danh lịch sử, người dùng đóng góp cập nhật địa danh để chia sẻ. .. tìm kiếm với ảnh hiển danh sách ảnh địa danh Cho phép người dùng chia sẻ địa danh chỉnh sửa địa Chia sẻ địa danh mới, đóng góp danh có Các thơng tin mà người chỉnh sửa địa danh có dùng đóng góp... THÔNG TIN TP HCM, ngày… tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬ Nhóm SV thực hiện: Lê Nhựt Vinh Cán hướng dẫn/phản