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

XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬBuilding a historic places sharing application... XÂY DỰNG ỨNG DỤNG CHIA SẺ ĐỊA DANH LỊCH SỬBuilding a historic places sharing application... XÂ

ĐẠ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 ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin 1.

……… – Chủ tịch

2 ……… – Thư ký

3 ……… – Ủy viên

4 ……… – Ủy viên.

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

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: Cán bộ hướng dẫn/phản biện: Lê Nhựt Vinh 15521016 TS.

Nguyễn Hà Giang ThS Nguyễn Thị Thanh Trúc

Đánh giá Khóa luận

1 Về cuốn 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 về hình thức cuốn báo cáo:

……… 2 Về nội dung nghiên cứu:

………

………

………

3 Về chương trình ứng dụng:

………

………

………

4 Về thái độ làm việc của sinh viên:

………

………

………

Đánh giá chung:

………

………

………

Điểm từng sinh viên:

Lê Nhựt Vinh: …… /10

Người nhận xét

(Ký tên và ghi rõ họ tên)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

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: Cán bộ hướng dẫn/phản biện: Lê Nhựt Vinh 15521016 TS.

Nguyễn Hà Giang ThS Nguyễn Thị Thanh Trúc

Đánh giá Khóa luận

1 Về cuốn 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 về hình thức cuốn báo cáo:

……… 2 Về nội dung nghiên cứu:

………

………

………

3 Về chương trình ứng dụng:

………

………

………

4 Về thái độ làm việc của sinh viên:

………

………

………

Đánh giá chung:

………

………

………

Điểm từng sinh viên:

Lê Nhựt Vinh: …… /10

Người nhận xét

(Ký tên và 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ô của trường đại họcCông Nghệ Thông Tin, đặc biệt là các thầy cô trong khoa Công Nghệ Phần Mềm đã tậntình giảng dạy, trang bị cho em những kiến thức cần thiết trong những năm học tập tạitrường

Em xin gửi lời cảm ơn đến thầy Nguyễn Hà Giang và cô Nguyễn Thị Thanh Trúc,người đã tận tình hướng dẫn và giúp đỡ trong suốt quá trình thực hiện đồ án để em cóthể hoàn thành tốt đồ án này

Mặc dù đã cố gắng hoàn thành đồ án với tất cả sự nỗ lực, nhưng khoá luận chắc chắn không tránh khỏi những thiếu sót, em kính mong quý thầy cô tận tình chỉ bảo

Sau cùng, em xin kính chúc quý thầy cô ở khoa Công Nghệ Phần Mềm, thầy Nguyễn

Hà Giang và cô Nguyễn Thị Thanh Trúc thật dồi dào sức khỏe, niềm tin để tiếp tục thựchiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau Em xin chânthành cảm ơn!

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc

ĐỀ 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 bộ 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ử là khúc ca hào hùng của dân tộc, là quá khứ không thể nào quên của lớp người

đi trước Học lịch sử không chỉ là tìm về nguồn cội, mà còn thêm tự hào về dân tộc,tiếp thêm sức mạnh để xây dựng và phát triển đất nước Tuy vậy, việc học và tìm hiểulịch sử đối với nhiều người khá khô khan và không tạo được hứng thú Mọi người chỉchăm chú vào những trận chiến chống quân xâm lược hay mở mang bờ cõi nước nhà

mà quên đi rằng lịch còn còn thể hiện qua những chi tiết nhỏ trong cuộc sống hằng ngàynhư: tên đường phố, chùa chiền, nhà thờ, các địa danh du lịch Không chỉ vậy, việctìm hiểu lịch sử qua các kênh truyền thống như báo đài, hình ảnh, tài liệu cũng gây khókhăn không nhỏ cho những người thật sự có lòng muốn tìm hiểu

Từ những suy nghĩ đó, em muốn nghiên cứu và xây dựng một ứng dụng hỗ trợ người dùng tìm hiểu lịch sử dựa trên các địa danh, ở đây là thành phố Hồ Chí Minh Ứng dụngdựa trên bản đồ để mọi người có thể tìm kiếm các địa danh lịch sử, ngoài ra người dùng

có thể đóng góp và cập nhật địa danh mới để chia sẻ với mọi người

- Mục tiêu:

+ Xây dựng ứng dụng giúp người dùng có thể tìm kiếm và chia sẻ thông tin kiến thức

về cá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 của 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 một nền tảng chia sẻ thông tin hoà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 cơ chế quản lý thông tin người dùng cung cấp tránh các trường hợp người dùng tải lên các thông tin sai hoặc 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 và giữ cho một hệ thống hoàn chỉnh hoạt động hiệu quả

+ Ứng dụng hỗ trợ người dùng tìm kiếm, đóng góp, chia sẻ những địa danh lịch sử

- Đối tượng triển khai:

+ Thiết kế cơ sở dữ liệu phù hợp với nền tảng

+ Thiết kế UI/UX cho website

+ Thu thập, xử lý, tạo bộ dữ liệu các địa danh lịch sử ở Thành phố Hồ Chí Minh

+ Sử dụng NodeJS để xây dựng stateful server quản lý thông tin các địa danh lịch sử (ảnh + văn bản), quản lý người dùng

+ Sử dụng thư viện React, Map API để xây dựng Website cho người dùng và CMS cho quản trị viên của nền tảng

- Kết quả mong đợi:

+ Hoàn thiện ứng dụng với các chức năng:

• Đối với người dùng: Có thể đăng nhập, đăng ký, bình luận, chia sẻ và cập nhật thông tin các địa danh lịch sử Người dùng có thể sử dụng ứng dụng qua Website

để đánh dấu và cập nhật các địa danh dễ dàng hơn

• Đối với quản trị viên: Quản lý toàn bộ người dùng, kiểm duyệt lại những cập nhậtcủa người dùng tránh trường hợp nội dung bị xuyên tạc gây hiểu nhầm + Về thẩm mỹ: Giao diện ứng dụng đơn giản, dễ dùng

+ Về bảo mật: Không để lộ thông tin người dùng tạo điều kiện cho kẻ xấu đánh cắp + Ứng dụng dễ dàng mở rộng để phát triển thêm trong tương lai

Kế hoạch thực hiện:

Thời gian Nội dung Phân

công

Chú thích

- Thiết kế cơ sở dữ liệu

- Tìm hiểu React Library

- Tìm hiểu NodeJS

Vinh

Thiết lập môi trường deploy lên ServerDev.

MỤC LỤC

Chương 1 TỔNG QUAN 2 1.1.

Lý do chọn đề tài 2 1.2.Mục tiêu và phạm vi đề tài 2

1.2.1 Mục tiêu 2 1.2.2.Phạm vi 3 Chương 2 CƠ

SỞ LÝ THUYẾT VÀ CÔNG NGHỆ 3 2.1 Khảo sát các

hệ thống liên quan 3 2.1.1 Các hệ thốngnước ngoài 4 2.1.1.1 World History

Project ( https://worldhistoryproject.org/ ) 4 2.1.1.2 Hictoric UK( https://www.historic-uk.com/ ) 5 2.1.1.3 Wikipedia( https://vi.wikipedia.org/ ) 5 2.1.1.4 Google Maps( https://www.google.com/maps - Historial Sites ) 7 2.1.2 Các hệ thống trongnước 8 2.1.2.1 Diễn đàn lịch sử Việt Nam

( https://lichsuvn.net/ ) 8 2.1.2.2 Nghiên cứu Lịch sử( https://nghiencuulichsu.com/ ) 9 2.1.2.3 Các trang blog về lịch

sử 10 2.1.3 Nhận xétchung 10 2.2 Tìm hiểu một sốphương pháp, thuật toán và công nghệ 11 2.2.1 Các phương pháp vàthuật toán sử dụng 11 2.2.1.1 Scale-invariant feature

transform (SIFT) 11 2.2.1.2 K-Nearest Neighbors(KNN) 12 2.2.1.3 REST (REpresentational State

Transfer) 14 2.2.1.4 JSON Web Token(JWT) 16 2.2.2 Các công nghệ sử

dụng 16 2.2.2.1.JavaScript 16 2.2.2.2.Python 17 2.2.2.3.ReactJS 18 2.2.2.4

NodeJS 19

2.2.2.5 MongoDB, Mongoose .192.2.2.6 Google App Engine .202.2.2.7 Imagekit.io .212.2.2.8 Mapbox 22

Chương 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 23 3.1.Danh sách yêu cầu 23 3.1.1.Người dùng 23 3.1.2 Quản trị

viên, Điều hành viên 23 3.2 Mô tả yêucầu 23 3.2.1 Ngườidùng 23 3.2.1.1 Tìm kiếm các

địa danh 23 3.2.1.2 Chia sẻ địa danhmới 24 3.2.1.3 Đóng góp chỉnh sửa các địa

danh đã có 24 3.2.1.4 Xem thông tin các địadanh 24 3.2.1.5 Thảo luận tại các địadanh 24 3.2.1.6 Báo cáo các địa danh, bình

luận 24 3.2.2 Quản trị viên, Điều hànhviên 25 3.2.2.1 Quản lí ngườidùng 25 3.2.2.2 Quản lí điều hành

viên 25 3.2.2.3 Quản lí địadanh 25 3.2.2.4 Kiểm duyệt đóng

góp 25 3.2.2.5 Xử lí các báocáo 25 3.3 Phân tích yêucầu 26 3.3.1 Sơ đồUsecase 26 3.3.2 Danh sách các

Usecase 26 3.3.3 Danh sách cácActor 28 3.3.4 Đặc tả yêu cầu phần

mềm 29 3.3.4.1 Đăngnhập 29 3.3.4.2 Đăng

kí 31

3.3.4.3 Đăng xuất 333.3.4.4 Cập nhật thông tin tài khoản 343.3.4.5 Tìm kiếm địa danh .363.3.4.6 Chia sẻ và đóng góp địa danh 373.3.4.7 Xem thông tin địa danh 393.3.4.8 Bình luận 403.3.4.9 Báo cáo địa danh, bình luận 423.3.4.10 Quản lí người dùng 433.3.4.11 Quản lí điều hành viên .463.3.4.12 Quản lí địa danh .483.3.4.13 Kiểm duyệt đóng góp .513.3.4.14 Xử lí báo cáo 53

Chương 4 THIẾT KẾ VÀ PHÁT TRIỂN HỆ THỐNG 55 4.1.Thiết kế cơ sở dữ liệu 55 4.1.1.Lược đồ cơ sở dữ liệu 55 4.1.2 Mô tảcác bảng dữ liệu 55 4.1.2.1 BảngUserRole 55 4.1.2.2 BảngUser 56 4.1.2.3 BảngLocation 56 4.1.2.4 BảngContibution 57 4.1.2.5 BảngPlace 57 4.1.2.6 BảngPhoto 58 4.1.2.7 BảngComment 59 4.1.2.8 BảngReport 59 4.2 Thiết kế kiến trúc hệ

thống 60 4.2.1 Màn hình trangchủ 61 4.2.1.1 Giao diện tìmkiếm 63 4.2.1.2 Giao diện quản lí tài

khoản người dùng 64 4.2.2 Màn hình chi tiết địa

danh 65

4.2.3 Màn hình đóng góp địa danh .674.2.4 Màn hình khám phá .684.2.5 Màn hình quản trị 70

4.2.5.1 Giao diện trang chủ quản trị .704.2.5.2 Giao diện quản lí người dùng .714.2.5.3 Giao diện quản lí địa danh .724.2.5.4 Giao diện kiểm duyệt đóng góp 734.2.5.5 Giao diện quản lí báo cáo 74

4.2.6 Màn hình kiểm duyệt đóng góp 75 4.3.Triển khai hệ thống 77 4.3.1.Font-end Server 77 4.3.2 Back-

end Server 79 4.3.2.1.Node.js 79 4.3.2.2.Python 79 Chương 5 KẾTLUẬN VÀ HƯỚNG PHÁT TRIỂN 80 5.1 Kết quả đạtđược 80 5.2 Thuận lợi và khó

khăn 80 5.2.1 Thuậnlợi 80 5.2.2 Khókhăn 81 5.3 Hạnchế 81 5.4 Hướng

phát triển 81

DANH MỤC HÌNH VẼ

Hình 2.1 Giao diện website WHP 4Hình 2.2 Bản đồ các lâu đài 5Hình 2.3 Thông tin về Dinh Độc Lập tại website Wikipedia 6Hình 2.4 Giao diện website Historical Sites được xây dựng bằng My Maps 7Hình 2.5 Giao diện website lichsuvn.net 8Hình 2.6 Chi tiết một bài viết tại website nghiencuulichsu.com 9Hình 2.7 Sơ đồ ý tưởng của SIFT 11Hình 2.8 Bảng đồ của 1 NN 13Hình 2.9 Thiết kế RESTful 14Hình 2.10 Cấu trúc JSON Web Token .16Hình 2.11 Logo JavaScript .17Hình 2.12 Logo ReactJS .18Hình 2.13 Logo NodeJS 19Hình 2.14 Logo MongoDB 20Hình 2.15 Kiến trúc Google App Engine 20Hình 2.16 Logo Imagekit.io 21Hình 2.17 Logo Mapbox 22Hình 3.1 Sơ đồ Usecase .26Hình 3.2 Lược đồ tuần tự cho thao tác Đăng nhập 30Hình 3.3 Lược đồ tuần tự cho thao tác Đăng kí 32Hình 3.4 Lược đồ tuần tự cho thao tác Đăng xuât 33Hình 3.5 Lược đồ tuần tự cho thao tác Cập nhật thông tin tài khoản 35Hình 3.6 Lược đồ tuần tự cho thao tác Tìm kiếm địa danh 36Hình 3.7 Lược đồ tuần tự cho thao tác Chia sẻ và đóng góp địa danh 38Hình 3.8 Lược đồ tuần tự cho thao tác Xem thông tin địa danh 39Hình 3.9 Lược đồ tuần tự cho thao tác Bình luận 41Hình 3.10 Lược đồ tuần tự cho thao tác Báo cáo địa danh, bình luận 43Hình 3.11 Lược đồ tuần tự cho thao tác Quản lí người dùng 45

Hình 3.12 Lược đồ tuần tự cho thao tác Quản lí điều hành viên 47Hình 3.13 Lược đồ tuần tự cho thao tác Quản lí địa danh 50Hình 3.14 Lược đồ tuần tự cho thao tác Kiểm duyệt đóng góp 52Hình 3.15 Lược đồ tuần tự cho thao tác Xử lí báo cáo 54Hình 4.1 Lược đồ cơ sở dữ liệu 55Hình 4.2 Minh hoạ kiến trúc hệ thống của ứng dụng 60Hình 4.3 Màn hình trang chủ 61Hình 4.4 Giao diện xem chi tiết ảnh 62Hình 4.5 Giao diện tìm kiếm bằng tên 63Hình 4.6 Giao diện tìm kiếm bằng hình ảnh 63Hình 4.7 Giao diện quản lí tài khoản người dùng 64Hình 4.8 Màn hình chi tiết địa danh 65Hình 4.9 Màn hình đóng góp 67Hình 4.10 Màn hình khám phá 68Hình 4.11 Màn hình khám phá trên thiết bị di động 69Hình 4.12 Giao diện trang chủ quản trị 70Hình 4.13 Giao diện chi tiết người dùng 71Hình 4.14 Giao diện quản lí địa danh 72Hình 4.15 Giao diện khôi phục phiên bản trước địa danh 72Hình 4.16 Giao diện danh sách đóng góp 73Hình 4.17 Giao diện quản lí báo cáo địa danh 74Hình 4.18 Giao diện quản lí báo cáo bình luận 74Hình 4.19 Giao diện kiểm duyệt đóng góp điạ danh mới 75Hình 4.20 Giao diện kiểm duyệt đóng góp địa danh đã có 76Hình 4.21 Cấu hình Cloud Server React.js 77Hình 4.22 Chạy lệnh "yarn build" tạo folder build 78Hình 4.23 Chạy lệnh "gcloud app deploy" deploy ứng dụng 78Hình 4.24 Cấu hình Cloud Server Node.js 79Hình 4.25 Cấu hình Cloud Server Python 79

DANH MỤC BẢNG

Bảng 3.1 Danh sách các Usecase 28Bảng 3.2 Danh sách các Actor 28Bảng 3.3 Đặc tả usecase "Đăng nhập" 29Bảng 3.4 Đặc tả usecase "Đăng kí" 32Bảng 3.5 Đặc tả usecase “Đăng xuất” 33Bảng 3.6 Đặc tả usecase "Cập nhật thông tin tài khoản" 34Bảng 3.7 Đặc tả usecase “Tìm kiếm địa danh” 36Bảng 3.8 Đặc tả usecase “Chia sẻ và đóng góp địa danh” 37Bảng 3.9 Đặc tả usecase "Xem thông tin địa danh" 39Bảng 3.10 Đặc tả usecase "Bình luận" 40Bảng 3.11 Đặc tả usecase "Báo cáo địa danh, bình luận" 42Bảng 3.12 Đặc tả usecase "Quản lí người dùng" 44Bảng 3.13 Đặc tả usecase "Quản lí điều hành viên" 46Bảng 3.14 Đặc tả usecase "Quản lí địa danh" 49Bảng 3.15 Đặc tả usecase "Kiểm duyệt đóng góp" 52Bảng 3.16 Đặc tả usecase "Xử lí báo cáo" 53Bảng 4.1 Danh sách thuộc tính của bảng UserRole 56Bảng 4.2 Danh sách thuộc tính của bảng User 56Bảng 4.3 Danh sách thuộc tính của bảng Location 57Bảng 4.4 Danh sách thuộc tính của bảng Contribution 57Bảng 4.5 Danh sách thuộc tính của bảng Place 58Bảng 4.6 Danh sách thuộc tính bảng Photo 58Bảng 4.7 Danh sách thuộc tính bảng Comment 59Bảng 4.8 Danh sách thuộc tính bảng Report 60