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 NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE ĐẶT XE MIGO ỨNG DỤNG CÔNG NGHỆ BLOCKCHAIN VÀO[.]
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: NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE ĐẶT XE MIGO ỨNG DỤNG CÔNG NGHỆ BLOCKCHAIN VÀO THANH TOÁN Giảng viên hướng dẫn: TS Nguyễn Đình Hiển Sinh viên thực hiện: Phạm Thành Trung Lớp: Cơng nghệ thơng tin Khóa: 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: NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE ĐẶT XE MIGO ỨNG DỤNG CƠNG NGHỆ BLOCKCHAIN VÀO THANH TỐN Giảng viên hướng dẫn: TS Nguyễn Đình Hiển Sinh viên thực hiện: Phạm Thành Trung Lớp: Cơng nghệ thơng tin Khóa: 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Ủ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP BỘ MÔN: CÔNG NGHỆ THÔNG TIN -*** Mã sinh viên : 5951071111 Họ tên SV: Phạm Thành Trung Khóa : 59 Lớp: CQ.59.CNTT Tên đề tài NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE ĐẶT XE MIGO ỨNG DỤNG CÔNG NGHỆ BLOCKCHAIN VÀO THANH TỐN Mục đích, u cầu a Mục đích: ● Nghiên cứu hiểu web 3.0, ứng dụng blockchain Ethereum vào toán qua ví MetaMask ● Nghiên cứu và xây dựng website đặt xe toán tiền ảo (cụ thể ethereum coin), giúp người dùng tốn dễ dàng và nhanh chóng ● Giúp quản lý minh bạch khoản tiền biến động chúng b Yêu cầu: - Yêu cầu công nghệ ● Sử dụng ngôn ngữ Javascript ● Sử dụng framework và thư viện: NextJS, Sanity.io, Ethers.js, MetaMask, Mapbox GL ● Sử dụng Vercel để deploy web ● Sử dụng cơng cụ lập trình Visual Code - u cầu chức ● Xây dựng chọn vị trí sử dụng Mapbox GL ● Hiển thị vị trí tọa độ muốn và đến đồ ● Tính toán khoảng cách giá tiền cho chuyến ● Thanh toán Ethereum Coin ● Kết nối tới ví MetaMask ● Lưu liệu chuyến lên Sanity ● Hỗ trợ đa ngôn ngữ ● Trang web cung cấp chức : Phản hồi với trung tâm chăm sóc khách hàng qua Messenger - Yêu cầu phi chức ● Tốc độ: Tối ưu tốc độ, làm việc với liệu vừa phải, tốc độ hiển thị cập nhật thông tin nhanh chóng ● Giao diện: Thân thiện với người dùng dễ dàng thao tác ● An toàn: Thông tin khách hàng bảo mật Nội dung thực - Tổng quan web 3.0 - Tổng quan ngôn ngữ JavaScript framework NextJS - Tổng quan bài toán đặt - Phân tích tốn - Phân tích sơ đồ toán - Xây dựng chức và xây dựng giao diện - Kiểm thử chạy thực nghiệm server - Kết thu hạn chế Công nghệ, công cụ ngơn ngữ lập trình - Sử dụng ngơn ngữ JavaScript - Sử dụng framework và thư viện: NextJS, Sanity.io, Ethers.js, MetaMask, Mapbox GL - Sử dụng Vercel để deploy web - Sử dụng cơng cụ lập trình Visual Code Các kết dự kiến đạt ứng dụng - Quyển báo cáo thực tập - Xây dựng trang web đặt xe với chức nêu - Hiểu ngôn ngữ công nghệ sử dụng ứng dụng trình làm việc sau Kế hoạch thực - Tuần 1: Tìm hiểu cơng nghệ tính khả thi cơng nghệ tốn - Tuần 2: Tìm hiểu phân tích chức toán - Tuần 3: Xây dựng sơ đồ toán - Tuần 4: Phác thảo giao diện tổng quát,xây dựng giao diện - Tuần 5: Xây dựng chức kết nối MetaMask và thay đổi tài khoản - Tuần 6: Xây dựng chức đặt xe toán tiền ảo - Tuần 7: Kết nối sanity.io để quản lý liệu - Tuần 8: Xây dựng chức chat với tổng đài viên - Tuần 9: Kiểm tra lỗi hoàn thiện hệ thống - Tuần 10: Tổng kết đề tài viết báo cáo Giáo viên cán hướng dẫn Họ tên: TS Nguyễn Đình Hiển Đơn vị cơng tác: Trường Đại học Công Nghệ Thông Tin - ĐHQG TP.HCM Điện thoại: 0918735299 Email: loveyou238us@gmail.com Ngày……tháng……năm 2022 Đã giao nhiệm vụ TKTN Trưởng BM Công nghệ thông tin Giảng viên hướng dẫn Nguyễn Đình Hiển LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Giao Thông Vận Tải - Phân hiệu thành phố Hồ Chí Minh đưa ngành Công nghệ thông tin vào chương trình đào tạo Đặc biệt quý thầy, cô giáo Bộ môn Công nghệ thông tin – người dành tâm huyết để dạy truyền đạt kiến thức, kinh nghiệm cho chúng em Trong năm học tập trường, với thầy truyền đạt, thân em tiếp thu kiến thức môn học ngày hiểu rõ ngành mà em lựa chọn Không thế, mái trường này, em học kỹ mà có lẽ giúp em khơng nghiệp tương lai Để hoàn thành báo cáo này, em xin bày tỏ lòng biết ơn chân thành và sâu sắc đến thầy Nguyễn Đình Hiển, người trực tiếp hướng dẫn, dìu dắt, giúp đỡ em với dẫn khoa học quý giá suốt trình triển khai, nghiên cứu hoàn thành đồ án Như người ta thường nói, người thầy nhà làm vườn, đêm ngày ươm trồng chăm sóc cho hạt giống mong chúng lớn nhanh để có ích cho đời Hạt giống mà thầy gieo trồng hạt giống tâm hồn – nghiệp trồng người Cảm ơn thầy cho em thứ tài sản vô giá, hành trang vững để chúng em bước bước vào sống đầy chông gai thử thách sống Do kiến thức cịn hạn chế nên em khó tránh sai sót q trình nghiên cứu Mong q thầy/cơ thơng cảm góp ý thêm để phần thực đồ án này hoàn thiện Sau cùng, em xin kính chúc Q Thầy Cơ Bộ mơn Cơng nghệ thơng tin tồn thể Q Thầy Cơ giảng dạy Trường Đại học Giao Thông Vận Tải - Phân hiệu thành phố Hồ Chí Minh lời chúc sức khỏe, hạnh phúc và thành công công việc sống Em xin chân thành cảm ơn TP Hồ Chí Minh, ngày 18 tháng 06 năm 2022 Sinh viên thực Phạm Thành Trung NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp Hồ Chí Minh, ngày …… tháng …… năm 2022 Giảng viên hướng dẫn TS Nguyễn Đình Hiển DANH MỤC HÌNH ẢNH Hình 2.1 Cấu trúc thư mục sử dụng framework Nextjs 12 Hình 3.1 Ứng dụng Sanity quản lý liệu 23 Hình 3.2 Giao diện các người dùng có hệ thống 24 Hình 3.3 Thơng tin chi tiết người dùng (Theo JSON) 24 Hình 3.4 Giao diện các loại phương tiện có hệ thống 25 Hình 3.5 Thơng tin chi tiết loại phương tiện (theo giao diện) 25 Hình 3.6 Thơng tin chi tiết phương tiện ( theo JSON) 26 Hình 3.7 Giao diện các chuyến người dùng ghi lại 26 Hình 3.8 Thơng tin chi tiết chuyến (theo giao diện) 26 Hình 3.9 Thơng tin chi tiết chuyến (theo JSON) 27 Hình 3.10 Giao diện các câu hỏi thường gặp hệ thống 27 Hình 3.11 Thơng tin chi tiết câu hỏi thường gặp (theo giao diện) 28 Hình 3.12 Thơng tin chi tiết câu hỏi thường gặp (theo JSON) 28 Hình 3.13 Thông tin chi tiết giao dịch 29 Hình 3.14 Thông tin lịch sử các giao dịch 29 Hình 4.1 Giao diện chính trang web (Tiếng Anh) 31 Hình 4.2 Giao diện chính trang web (Tiếng Việt) 32 Hình 4.3 Giao diện tìm kiếm điểm đón và điểm cần đến 32 Hình 4.4 Giao diện chọn loại phương tiện Hộp tìm kiếm 33 Hình 4.5 Hệ thống thông báo lỗi người dùng đặt xe chưa đăng nhập vào ví 34 Hình 4.6 Giao diện hộp tìm kiếm người dùng tìm vị trí khơng hỗ trợ 34 Hình 4.7 Giao diện nhấn vào nút đăng nhập 35 Hình 4.8 Giao diện đăng nhập vào ví MetaMask 35 Hình 4.9 Giao diện trước và sau đăng nhập thành cơng vào ví 36 Hình 4.10 Giao diện chờ toán chuyến qua Metamask 36 Hình 4.11 Giao diện thơng báo Tài xế đường đến 37 Hình 4.12 Giao diện chi tiết giao dịch Ethereum coin 38 Hình 4.13 Giao diện chi tiết giao dịch Ethereum coin trình khám phá khối 39 Hình 4.14 Giao diện lịch sử chuyến chưa đăng nhập 39 Hình 4.15 Giao diện lịch sử chuyến người dùng đăng nhập 40 Hình 4.16 Giao diện Trợ giúp 40 Hình 4.17 Giao diện trang trợ giúp người dùng tìm câu hỏi 41 Hình 4.18 Giao diện trả lời câu hỏi 41 Hình 4.19 Giao diện chia sẻ 42 Hình 4.20 Giao diện chia sẻ trang web qua Facebook 42 Hình 4.21 Giao diện chia sẻ trang web qua Whatsapp 43 Hình 4.22 Giao diện chat Messenger Widget 43 Hình 4.23 Giao diện login Messenger Widget 44 Hình 4.24 Giao diện người dùng liên hệ với Admin 44 DANH MỤC SƠ ĐỒ Sơ đồ 2.1 Mô tả hoạt động ứng dụng web 3.0 Sơ đồ 2.2 Minh hoạ các bước tính toán máy tính phải cần phí gas 14 Sơ đồ 3.1 Sơ đồ Usecase tổng quát 20 Sơ đồ 3.2 Hoạt động mơ tả quá trình tìm kiếm địa 21 Sơ đồ 3.3 Hoạt động mơ tả quá trình đặt xe 22 Sơ đồ 3.4 Mô tả quá trình phản hồi với tổng đài 23 34 Hình 4.5 Hệ thống thông báo lỗi người dùng đặt xe chưa đăng nhập vào ví Hình 4.6 Giao diện hộp tìm kiếm người dùng tìm vị trí khơng hỡ trợ Mơ tả: người dùng tìm kiếm địa khơng phải tp.Hồ Chí Minh hộp thoại thông báo lỗi 35 4.3 Giao diện Đăng nhập ví Metamask tốn bằng Ethereum coin Hình 4.7 Giao diện nhấn vào nút đăng nhập Hình 4.8 Giao diện đăng nhập vào ví MetaMask 36 Hình 4.9 Giao diện trước sau đăng nhập thành công vào ví Hình 4.10 Giao diện chờ tốn chuyến qua Metamask 37 Mô tả: - Chuyến đặt thành công sau người dùng xác nhận toán hồn tất chuyến với cước phí hiển thị - Lúc này, bảng thông báo tài xế đến có lưu ý đến người dùng huỷ chuyến vịng phút, quá thời gian phút nút “Hủy” bị vơ hiệu Hình 4.11 Giao diện thơng báo Tài xế đường đến 38 Hình 4.12 Giao diện chi tiết của giao dịch Ethereum coin Mô tả: Trạng thái giao dịch thành công từ địa ví khách hàng là 0x43787842C9F57c3f61684a3E86b7eD9fb83bDcbc đến địa ví 0xbd11136f43267990719D14b8Fc5b109d07564A8B (địa ví công ty MiGO) Ngoài cước phí 0.01253 ETH phải trả cho chuyến đi, khách hàng phải trả thêm phí gas (là phí phải trả giao dịch thực hiện) 0.000031 ETH (đã làm tròn) Tổng cước phí phải trả cho chuyến là 0.0125615 ETH Để thấy rõ phiên giao dịch này, cùng xem chi tiết giao dịch trình khám phá khối 39 Hình 4.13 Giao diện chi tiết của giao dịch Ethereum coin trình khám phá khối Tại trình khám phá khối, ta thấy rõ ràng ngày tháng giao dịch, giá trị giao dịch, phí giao dịch… 4.4 Giao diện Lịch sử chuyến Hình 4.14 Giao diện lịch sử chuyến chưa đăng nhập 40 Hình 4.15 Giao diện lịch sử chuyến người dùng đăng nhập Mô tả: Người dùng bắt buộc phải đăng nhập để sử dụng tính xem lại lịch sử chuyến Tại giao diện này, người dùng xem lại lịch sử các chuyến đặt qua MiGO Màn hình hiển thị đầy đủ ngày đi, cước phí, điểm đón, điểm đến và trạng thái chuyến Qua đó, người dùng theo dõi và so sánh cước phí giai đoạn/từng chuyến 4.5 Giao diện Trợ giúp Hình 4.16 Giao diện Trợ giúp 41 Mơ tả: Tại giao diện Trợ giúp, người dùng đặt câu hỏi trực tiếp MiGO giải đáp các thắc mắc/trả lời câu hỏi người dùng đặt nhằm giúp họ hiểu rõ quá trình đặt xe, cách thức toán, hướng dẫn sử dụng trang web… - Ngoài việc tự điền câu hỏi người dùng, đặt câu hỏi MiGO gợi ý số câu hỏi/thắc mắc phổ biến mà khách hàng thường đặt để họ tra cứu cách nhanh chóng - Câu trả lời xuất phía bên đặt câu hỏi để người dùng dễ dàng theo dõi Hình 4.17 Giao diện trang trợ giúp người dùng tìm câu hỏi Hình 4.18 Giao diện trả lời câu hỏi 42 4.6 Giao diện Chia sẻ Hình 4.19 Giao diện chia sẻ Mô tả: Ở giao diện này, người dùng chia sẻ cho bạn bè và người thân biết MiGO thơng qua các tảng xã hội như: Facebook, Whatsapp, Linkedin… Điều góp phần làm trang web ngày phổ biến, nhiều khách hàng truy cập sử dụng ứng dụng Hình 4.20 Giao diện chia sẻ trang web qua Facebook 43 Hình 4.21 Giao diện chia sẻ trang web qua Whatsapp 4.7 Giao diện Messenger Widget Hình 4.22 Giao diện chat Messenger Widget Mơ tả: Người dùng tuỳ chọn đăng nhập vào Facebook chọn vào chế độ khách để nhắn tin trực tiếp với nhân viên Trung tâm chăm sóc khách hàng MiGO Sau gửi tin nhắn, người dùng nhận tin nhắn tự động MiGO 44 Và admin trang web phản hồi giải đáp các thắc mắc người dùng thời gian ngắn Hình 4.23 Giao diện login Messenger Widget Hình 4.24 Giao diện người dùng liên hệ với Admin 45 CHƯƠNG KẾT LUẬN 5.1 Kết đạt Trong trình nghiên cứu và hoàn thành đồ án tốt nghiệp với đề tài “Nghiên Cứu Và Xây Dựng Website Đặt Xe MiGO – Ứng Dụng Công Nghệ Blockchain vào Thanh Toán” em đạt kết sau: 5.1.1 Ưu điểm Trong thời gian làm đồ án, mặt dù thời gian có hạn và là lần em làm việc, va chạm với thư viên, framework điều cho em học nhiều kiến thức hay ho và củng cố, trau dồi cho em nhiều kĩ Qua quá trình làm đồ án giúp em rèn tính kiên trì, nhẫn nại, tăng khả tìm kiếm các kiến thức gặp vấn đề, là hành trang giúp em phát triển tương lai Hiểu và sử dụng Framework NextJs - Biết cách sử dụng các công nghệ Sanity để quản lý các nội dung - Biết cách sử dụng Mapbox GL để sử dụng làm đồ - Hiểu và làm quen phần nào blockchain và đặc biệt là áp dụng ví metamask vào dự án 5.1.2 Hạn chế Bên cạnh các ưu điểm đạt trên, em tự thấy đồ án cịn nhiều hạn chế nêu sau: - Các chức dừng lại mức bản, chưa thể đem áp dụng thực tế - Chưa thể xâm nhập sâu vào thư viện mã nguồn mở Mapbox GL để cải thiện tính tìm kiếm địa điểm - Dữ liệu chưa thực đầy đủ 46 5.2 Hướng phát triển Với nhiều thiếu sót nêu trên, thời gian tới có điều kiện em điều chỉnh phát triển các tính sau: - Xây dựng hệ sở liệu đầy đủ - Thiết kế trang web bắt mắt, thân mặt với người dùng - Xây dựng thêm tính riêng cho tài xế - Có thể toán đa dạng - Đưa triển khai vào thực tế Với lý thời gian thực có thời hạn, kiến thức thân cịn nhiều hạn chế q trình kết hồn thành đồ án cịn nhiều hạn chế thiếu sót, mong nhận góp ý q Thầy Cơ để đồ án em hoàn thiện phát triển tương lai TÀI LIỆU THAM KHẢO A Tài liệu nước [1] B.Degree, “Đánh giá ví MetaMask hoàn chỉnh: Ví MetaMask điều cần biết,” 2022 [Trực tuyến] Địa chỉ: https://vn.bitdegree.org/crypto/danh-gia-vi- metamask#heading-4 [Truy cập 24/06/2022] [2] Chiptl, “Web 3.0 gì? Tìm hiểu chi tiết Web 3.0 - Kỷ nguyên Internet,” 2022 [Trực tuyến] Địa chỉ: https://bizflycloud.vn/tin-tuc/web-30-la-gi-tim-hieu-chitiet-ve-web-30-ky-nguyen-moi-cua-internet-phan-1-20220316164228356.htm [Truy cập 24/06/2022] [3] Đơng Vũ, “Tìm hiểu framework Nextjs,” 2021 [Trực tuyến] Địa chỉ: https://blog.pirago.vn/tim-hieu-ve-nextjs/ [Truy cập 24/06/2022] [4] F.Cloud, “Javascript gì? Kiến thức tổng quan Javascript từ A – Z,” 2022 [Trực tuyến] Địa chỉ: https://fptcloud.com/javascript/ [Truy cập 24/06/2022] [5] F.Tuts, “Javascript gì? Tìm hiểu ngơn ngữ lập trình javascript,” 2019 [Trực tuyến] Địa chỉ: https://freetuts.net/javascript-la-gi-viet-ung-dung-javascript-dau-tien263.html [Truy cập 24/06/2022] [6] Phạm Tuấn Việt, “Ứng dụng React với MapBox GL,” 2019 [Trực tuyến] Địa chỉ: https://viblo.asia/p/ung-dung-react-voi-mapbox-gl-GrLZDWvVKk0 [Truy cập 24/06/2022] B Tài liệu nước [7] D.Flair, “Pros and Cons of JavaScript – Weigh them and Choose wisely!,” 2020 [Online] Available: https://data-flair.training/blogs/advantages-disadvantages-javascript/ [Accessed 06 24 2022] [8] Phillips, D., & Hussey, M., “What is MetaMask? How to Use the Top Ethereum Wallet,” 2022 [Online] Available: https://decrypt.co/resources/metamask [Accessed 06 24 2022] [9] Wallis, J., “What Is VERCEL? Is It The Right Platform For Front-End Developers? WEBO Digital,” 2022 [Online] Available: https://webo.digital/blog/whatis-vercel-is-it-the-right-platform-for-front-end-developers/ [Accessed 06 24 2022] PHỤ LỤC Link source code: https://github.com/truph77/car-booking-app Link website: https://car-booking-app.vercel.app/