Tìm hiểu web3 và ứng dụng minh họa

ĐẠ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 BÁO CÁO ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU WEB3 VÀ ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn: Ths Nguyễn Tấn Tồn Nhóm thực hiện: 19521902 – Trần Hiếu Nghĩa 19521931 – Lê Anh Nhân MỤC LỤC MỤC LỤC LỜI CẢM ƠN Chương - TỔNG QUAN ĐỀ TÀI 1.1 Mơ tả tốn 1.2 Yêu cầu đặt Chương - TỔNG QUAN BLOCKCHAIN 2.1 Giới thiệu chung 2.2 Lịch sử đời 2.3 Phân loại Blockchain 2.3.1 Blockchain mở 10 2.3.2 Blockchain đóng 10 2.4 Kiến trúc Blockchain 11 2.4.1 Hàm băm mật mã 11 2.4.2 Giao dịch 11 2.4.3 Mật mã khóa bất đối xứng 12 2.4.4 Địa 13 2.4.5 Sổ 13 2.4.6 Khối 13 2.4.7 Chuỗi khối 14 2.5 NFT MarketPlace 14 2.5.1 Khái niệm 14 2.5.2 Phân loại NFT marketplace 14 2.6 Smart Contract 16 2.6.1 Khái niệm 16 2.6.2 yếu tố tạo thành 16 2.6.3 Hoạt đông 16 2.6.4 Ưu điểm nhược điểm 2.7 EVM(Ethereum Virtual Machine) 17 17 2.7.1 Khái niệm 17 2.7.2 EVM Blockchain 18 2.7.3 Lợi ích người dùng 18 2.7.4 Lợi ích Developers & Team dự án 18 Chương - PHÂN TÍCH ĐẶC TẢ YÊU CẦU 20 3.1 Sơ đồ usecase 20 3.2 Danh sách Use case 20 3.3 Đặc tả Usecase 21 3.3.1 Login 21 3.3.2 AddOrder 22 3.3.3 ExecuteOrder 23 3.3.4 CancelOrder 24 3.3.5 ViewNFT 24 3.3.6 ViewCollection 25 3.4 Sequence Diagram 26 3.4.1 Login 26 3.4.2 Register 27 3.4.3 ExecuteOrder 27 3.4.4 CancelOrder 28 3.4.5 AddOrder 28 3.4.6 ViewNFT 29 3.4.7 ViewCollection 30 3.5 Activity Diagram 31 3.5.1 Login 31 3.5.2 Register 32 3.5.3 ExecuteOrder 32 3.5.4 CancelOrder 33 3.5.5 AddOrder 34 3.5.6 ViewCollection 35 3.5.7 ViewNFT 36 Chương 4: THIẾT KẾ KIẾN TRÚC DỮ LIỆU 37 4.1 Kiến trúc tổng thể hệ thống 37 4.2 Kiến trúc mơ hình 37 4.2.1 Cấu trúc mơ hình MVC 38 4.2.2 Mơ hình MVC ứng dụng Web 38 4.2.3 NodeJS 39 4.2.4 NextJS 41 4.2.5 MongoDB 43 Chương 5: THIẾT KẾ DỮ LIỆU 45 5.1 Sơ đồ Lớp 45 5.2 Mô tả chi tiết kiểu liệu 45 5.2.1 Bảng user 45 5.2.2 Bảng NFT 46 5.2.3 Bảng Order 47 Chương 6: - Thiết kế giao diện 48 6.1 Danh sách hình 48 6.2 Mơ tả hình 48 6.2.1 Màn hình Home 48 6.2.1.1 Giao diện 48 6.2.1.2 Xử lý hình 49 6.2.2 Màn hình Collection 50 6.2.2.1 Giao diện 50 6.2.2.2 Xử lý hình 51 CHƯƠNG 7: TỔNG KẾT 52 7.1 Công nghệ sử dụng 52 7.2 Mức độ hoàn thiện 52 7.3 Kết đạt hướng phát triển 53 7.3.1 Kết đạt 53 7.3.2 Hướng phát triển: 53 CHƯƠNG 8: BẢNG PHÂN CÔNG CÔNG VIỆC 54 CHƯƠNG 9: TÀI LIỆU THAM KHẢO 56 LỜI CẢM ƠN Trong trình học tập, nghiên cứu phát triển đề tài chúng em nhận giúp đỡ, bảo nhiệt tình thầy để hồn thành đồ án Nhóm em xin chân thành gửi lời cảm ơn đến thầy Nguyễn Tấn Toàn – Giảng viên Khoa Công Nghệ Phần Mềm, Trường Đại học Công Nghệ Thông Tin, Đại học Quốc gia Thành phố Hồ Chí Minh – giảng viên dạy hướng dẫn mơn Đồ án 2, tận tình hướng dẫn giúp đỡ kiến thức, phương pháp cho chúng em suốt q trình thực hồn thành đồ án Hi vọng với bảo góp ý từ thầy, nhóm đề tài tiếp tục phát triển để ứng dụng ngày mở rộng phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt trình thực đề tài, song tránh khỏi hạn chế, thiếu sót Chúng em mong nhận đóng góp nhận xét chân thành từ thầy, bạn sinh viên người dùng trình sử dụng phần mềm để phần mềm ngày hoàn thiện Mọi đóng góp xin vui lịng gửi email: 19521902@gm.uit.edu.vn 19521931@gm.uit.edu.vn Mỗi ý kiến đóng góp thầy bạn nguồn động lực to lớn chúng em để chúng em cải thiện phần mềm tốt xây dựng phần mềm hữu ích người dùng Chúng em xin trân trọng cảm ơn Thành phố Hồ Chí Minh, ngày 17 tháng 12 năm 2022 Chương - TỔNG QUAN ĐỀ TÀI 1.1 Mơ tả tốn Với khả chia sẻ thông tin liệu minh bạch theo thời gian thực, tiết kiệm không gian lưu trữ bảo mật cao, Blockchain xu hướng cơng nghệ đột phá, có khả ứng dụng rộng rãi nhiều ngành nghề, lĩnh vực Công nghệ đánh giá mảnh đất màu mỡ cho hệ sinh thái khởi nghiệp Việt Nam Ngày nay, với bùng nổ lĩnh vực Blockchain, bật hết lĩnh vực NFT GameFi đánh dấu bước phát triển so với lĩnh vực game truyền thống Ở lĩnh vực game truyền thống, để giao dịch vật phẩm game với nhau, người chơi bắt buộc phải gặp để giao dịch, phải nhờ đến bên trung gian thứ ba đủ uy tín để giao dịch Chính vậy, NFT đời để giải tốn Với cơng nghệ Blockchain, người chơi giao dịch trực tiếp thông qua NFT Marketplace - thị trường cho phép người giao dịch NFT với Và sau giao dịch, game có chế để biết Blockchain dịch chuyển NFT, tự động cập nhật vật phẩm từ người dùng sang người dùng Nhận thấy vấn đề đó, website NFT Marketplace đời nhằm đáp ứng nhu cầu trao đổi, mua bán NFT tiện lợi, minh bạch 1.2 Yêu cầu đặt Một số yêu cầu nhóm đặt phát triển ứng dụng: • Tính tiện dụng: ứng dụng phải thân thiện với người dùng, dễ dàng tiếp cận với lứa tuổi • Tính đắn: thơng tin đưa lên phải xác thực kĩ độ xác, ứng dụng chạy khơng lỗi • Tính thích nghi: ứng dụng chạy nhiều tảng trình duyệt web khác • Tính tiến hoá: ứng dụng phải dễ dàng phát triển thêm tính mà khơng ảnh hưởng đến tính phát triển trước • Tính bảo trì: ứng dụng thay đổi số chức cập nhật thêm thông tin cách tiện lợi • Tính tương tác: tạo mơi trường tương tác tốt hệ thống người dùng Chương - TỔNG QUAN BLOCKCHAIN 2.1 Giới thiệu chung - Blockchain sổ kỹ thuật số chống giả mạo triển khai theo mơ hình phân tán (tức khơng có kho lưu trữ trung tâm) thường không cần đơn vị đáng tin cậy chứng thực (như ngân hàng, cơng ty, phủ) Ở mức độ bản, cho phép cộng đồng người dùng ghi giao dịch vào sổ chia sẻ, mà đó, với điều hành bình thường mạng Blockchain khơng giao dịch bị thay đổi sau xuất Vào năm 2008, ý tưởng Blockchain kết hợp với vài công nghệ khái niệm điện toán khác để tạo đồng tiền mã hóa đại: tiền điện tử bảo vệ chế mật mã học thay nhờ vào bên chứng thực kho lưu trữ trung tâm Hình 2.1.Blockchain - Cơng nghệ biết đến rộng rãi vào năm 2009 với đời mạng Bitcoin – đồng tiền mã hóa đại Ở hệ thống Bitcoin hệ thống tương tự, việc chuyển thông tin kỹ thuật số với đại diện tiền điện tử diễn hệ thống phân tán Người dùng Bitcoin ký chữ ký số chuyển tài sản sang người khác Bitcoin ghi lại giao dịch công khai, cho phép người tham gia mạng xác minh độc lập tính hợp lệ giao dịch Cơng nghệ Blockchain xem giải pháp chung cho đồng tiền mã hóa sau - Blockchain định nghĩa thơng thường sau: “Blockchain sổ kỹ thuật số giao dịch ký mật mã Mỗi khối liên kết mã hóa với khối trước sau xác thực trải qua định đồng thuận Khi khối thêm vào, khối cũ trở nên khó bị chỉnh sửa Cuốn sổ sau chép đến tồn mạng xung đột giải tự động thông qua quy tắc thiết lập.” 2.2 Lịch sử đời Ý tưởng đứng sau công nghệ Blockchain lên vào cuối năm 1980, đầu năm 1990 Vào năm 1989, Leslie Lamport phát triển giao thức Paxos Năm 1990, ơng có báo The Part-Time Parliament1 gửi đến ACM Transaction on Computer Systems; báo phát hành cuối vào số năm 1998 Bài báo miêu tả mơ hình đồng thuận giúp đạt thỏa thuận kết mạng lưới máy tính – nơi mà máy tính thân mạng không ổn định Năm 1991, chuỗi thông tin ký dùng sổ điện tử cho tài liệu có chữ ký kỹ thuật số theo cách mà không dễ dàng để tài liệu ký bị thay đổi Các khái niệm kết hợp áp dụng vào tiền điện tử năm 2008 miêu tả báo – Bitcoin: A Peer to Peer Electronic Cash System – xuất giả Satoshi Nakamoto , sau năm 2009 với đời tiền điện tử Bitcoin Việc sử dụng Blockchain cho phép Bitcoin triển khai theo kiểu phân tán, khơng có người dùng đơn lẻ điều khiển tiền điện tử khơng có khuyết điểm tồn đơn lẻ Lợi ích cho phép giao dịch trực triếp người dùng mà không cần bên thứ ba đáng tin cậy Nó cho phép phát hành tiền theo cách định nghĩa đến người quản lý việc xuất khối trì sổ cái, gọi miner Bitcoin Bằng cách sử dụng chế đồng thuận để trì chế tự kiểm soát tạo để đảm bảo có giao dịch khối hợp lệ thêm vào Blockchain 2.3 Phân loại Blockchain Mạng Blockchain phân loại dựa mơ hình quyền hạn mà xác định trì chúng (chẳng hạn xuất khối) Nếu xuất khối mới, gọi Blockchain mở Nếu có người dùng cụ thể xuất khối, gọi Blockchain đóng Hiểu đơn giản, mạng Blockchain đóng giống mạng Intranet tổ chức, Blockchain mở lại giống mạng Internet công cộng 2.3.1 Blockchain mở Mạng Blockchain mở tảng sổ phi tập trung mở rộng đến muốn xuất khối mà không cần quyền chứng thực Nền tảng Blockchain mở thường phần mềm mã nguồn mở, có sẵn miễn phí cho người muốn tải xuống Bởi có quyền xuất khối, nên kết đọc Blockchain phát hành giao dịch Blockchain (các giao dịch nằm khối xuất bản) Người dùng có ý đồ xấu xuất khối nhằm đánh sập hệ thống Để ngăn chặn điều này, mạng Blockchain mở thường triển khai thỏa thuận đa bên hay gọi hệ thống “đồng thuận”, yêu cầu người dùng chi tiêu trì tài nguyên muốn xuất khối Đồng thời, hệ thống “đồng thuận” thường thúc đẩy hành vi đắn thông qua việc trao thưởng cho nhà xuất khối tuân thủ giao thức với loại tiền điện tử tương ứng 2.3.2 Blockchain đóng Mạng Blockchain đóng tảng sổ cái, nơi mà người dùng xuất khối phải chứng thực quan (làm cho tập trung phi tập trung) Bởi có người dùng chứng thực trì Blockchain nên có hạn chế quyền tiếp cận hạn chế phát hành giao dịch Do đó, Blockchain đóng quy định đọc phải chứng thực để đọc Ngược lại, phát hành giao dịch hạn chế cá nhân chứng thực từ trước Blockchain đóng khởi tạo trì phần mềm mã nguồn mở đóng Mạng Blockchain đóng Blockchain mở giống đặc điểm: khả truy xuất tài sản kỹ thuật số Blockchain; hệ thống phân tán; phục hồi lưu trữ liệu dự phịng; mơ hình đồng thuận; có khơng có chi tiêu trì tài ngun Trong mạng Blockchain đóng, có phân loại mức độ tin tưởng thu hồi chứng thực làm sai Mạng Blockchain đóng có lẽ sử dụng tổ chức muốn kiểm soát chặt chẽ bảo vệ Blockchain họ Tuy nhiên, thực thể kiểm sốt xuất khối, người dùng cần phải tin tưởng vào thực thể Một mạng Blockchain đóng tổ chức muốn làm việc với tổ chức khác khơng hồn tồn tin tưởng lẫn Họ thành lập mạng mời đối tác kinh doanh ghi lại giao dịch sổ phân tán chia sẻ Các tổ chức xác định mơ hình đồng thuận dùng dựa mức độ tin tưởng lẫn Bên cạnh đó, SSR cho phép máy chủ access tất required data xử lý javaScript để hiển thị lên trang web Theo chế hầu hết xử lý logic phía máy chủ Trong đó, máy chủ thực xử lý tiến hành thao tác với sở liệu để thông dịch (render) thành HTML, sau gửi phản hồi cho khách hàng Trình duyệt khách hàng hiển thị HTML Hình 4.2.4.b SSR Search Engine Optimization (SEO): Sử dụng SSR mang lại cho bạn lợi SEO, giúp trang web bạn hiển thị cao trang kết cơng cụ tìm kiếm SSR làm cho trang web xếp hạng tốt cho SEO chúng tải nhanh nhiều nội dung trang web qt trình theo dõi SEO.Redux Brings organic traffic Các trang web phát triển Next JS khơng nhanh mà cịn đơn giản để tìm kiếm cung cấp trải nghiệm người dùng tuyệt vời Ba yếu tố: tốc độ, cấu trúc trải nghiệm người dùng, yếu tố xếp hạng quan trọng tăng thứ hạng công cụ tìm kiếm Google trang web bạn 4.2.5 MongoDB Hình 4.2.5 MongoDB MongoDB gì? MongoDB database hướng tài liệu (document), dạng NoSQL database Vì thế, MongoDB tránh cấu trúc table-based relational database để thích ứng với tài liệu JSON có schema linh hoạt gọi BSON MongoDB sử dụng lưu trữ liệu dạng Document JSON nên collection các kích cỡ document khác Các liệu lưu trữ document kiểu JSON nên truy vấn nhanh Ưu điểm MongoDB  Dữ liệu lưu trữ phi cấu trúc, khơng có tính ràng buộc, tồn vẹn nên tính sẵn sàng cao, hiệu suất lớn dễ dàng mở rộng lưu trữ  Dữ liệu caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc ghi cao Chương 5: THIẾT KẾ DỮ LIỆU 5.1 Sơ đồ Lớp Hình 5.1 sơ đồ lớp 5.2 Mô tả chi tiết kiểu liệu 5.2.1 Bảng user Tên thuộc tính Kiểu liệu Ràng buộc ID ObjectId unique WalletAddress String Ý nghĩa Id user Địa ví Signature Mã chữ ký String 5.2.2 Bảng NFT Tên thuộc tính Kiểu liệu Ràng buộc ID ObjectId unique TokenId Number Id NFT blockchain OrderId Number Id order addressOwner String Địa ví sở hữu uri String Ảnh NFT price Number Giá NFT name String Tên NFT status String Trạng Thái NFT chain String Default: Goerli Ý nghĩa Id NFt mongoDB NetWorks giao dịch paymentToken String Địa token 0xFf24e9Ce8D1c32f toán Default: 01B24bE7b1C9BED 386D43c22F 5.2.3 Bảng Order Tên thuộc tính Kiểu liệu Ràng buộc Ý nghĩa ID ObjectId unique TransactionHash String OrderId Number Id order blockchain Seller String Địa người bán TokenId Number Name String Tên NFT Status String Trạng thái order Id order mongoDB Mã giao dịch Id NFT Chương 6: - Thiết kế giao diện 6.1 Danh sách hình STT Màn hình Chức Home Đăng ký tài khoản Collection Đăng nhập vào hệ thống 6.2 Mơ tả hình 6.2.1 Màn hình Home 6.2.1.1 Giao diện Hình 6.2.1.1.a hình home Hình 6.2.1.1.b hình home Hình 6.2.1.1.c hình home 6.2.1.2 Xử lý hình STT Biến cố Xử lý Chọn button Connect wallet Hiển thị thông báo trạng thái đăng ký: - Hiển thị giao diện metamask để connect metamask Chọn signOut Để signout 6.2.2 Màn hình Collection 6.2.2.1 Giao diện Hình 6.2.2.1.a hình collection Hình 6.2.2.1.b hình collection 6.2.2.2 Xử lý hình STT Biến cố Xử lý Chọn addOrder Khi chưa nhập giá nút addOrder khơng nhấn được, nhập giá nút addOrder nhấn Nhập price Hiển thị price NFT chuẩn bị bán CHƯƠNG 7: TỔNG KẾT 7.1 Công nghệ sử dụng      Frontend: NextJS Backend: NodeJS, ExpressJS SmartContract: Sodility Database: MongoDB IDE: o Visual Studio Code o Remix IDE  Test API: Postman 7.2 Mức độ hoàn thiện STT Tên Use case Độ hoàn thiện AddOrder 100% ExecuteOrder 100% CancelOrder 100% Login 100% ViewNFT 100% ViewCollection 100% 7.3 Kết đạt hướng phát triển 7.3.1 Kết đạt Ưu điểm: - Hiểu kiến thức chung blockchain - Hiểu cách thức giao dịch blockchain - Hiểu thể loại NFT marketplace áp dụng Nhược điểm: - WebApp đơn giản chưa có nhiều giao diện - Chưa có nhiều chức để làm tăng trải nghiệm người dùng - Chưa thể bán NFT khác NFT hệ thống 7.3.2 Hướng phát triển: - Tiếp tục phát triển ứng dụng theo hướng thương mại hóa - Khảo sát người dùng để hồn thiện chức có phát triển thêm chức - Phát triển công cụ hỗ trợ người quản trị sở liệu - Phát triển giao diện nâng cao trải nghiệm người dùng - Tối ưu hóa code CHƯƠNG 8: BẢNG PHÂN CƠNG CƠNG VIỆC STT Nội dung cơng việc Người đảm nhận Trạng thái Chọn đề tài Hiếu Nghĩa - Anh Nhân Hồn thành Phân tích u cầu Hiếu Nghĩa - Anh Nhân Hoàn thành Hiếu Nghĩa - Anh Nhân Hoàn thành Thiết lập actor, chức Vẽ sơ đồ Use case Hiếu Nghĩa Hoàn thành Vẽ sơ đồ thiết kế liệu Hiếu Nghĩa Hoàn thành Viết đặc tả Use case Hiếu Nghĩa Hoàn thành Quản lý git ,phân chia cơng việc Hiếu Nghĩa – Anh Nhân Hồn thành Thiết kế giao diện Anh nhân Hoàn thành Cài đặt môi trường Hiếu Nghĩa – Anh Nhân Hoàn thành 10 Thiết kế CSDL Hiếu Nghĩa Hoàn thành 11 Xây dựng backend Hiếu Nghĩa Hoàn thành Anh Nhân Hoàn thành 12 Xây dựng Front End 13 Xử lý kiện UI Anh Nhân Hoàn thành 14 Xử lý liệu Anh Nhân Hoàn thành 15 Kiểm thử ứng dụng Hiếu Nghĩa – Anh Nhân Hoàn thành 16 Viết báo cáo Hiếu Nghĩa – Anh Nhân Hoàn thành 17 Xậy dựng smart contract Anh Nhân Hoàn thành 18 Tương tác với blockchain Anh Nhân Hoàn thành 19 Tương tác với event smart contract Hiếu Nghĩa Hoàn thành CHƯƠNG 9: TÀI LIỆU THAM KHẢO [1] Series lập trình NextJs bản: https://viblo.asia/p/nextjs-series-part-1-gioi-thieu-ve-nextjs-Qbq5QAkL5D8 [2] Tìm hiểu NextJs: https://viblo.asia/p/tim-hieu-ve-nextjs-phan-1-V3m5WQkwZO7 [3] Học Backend với NodeJS & ExpressJS framework https://fullstack.edu.vn/courses/nodejs [4] Học cách sử dụng Nodejs MongoDB: https://www.youtube.com/watch?v=KQOPq0oO_R8&list=PLv6GftO355Aug0rw Kfb6v96mlYrwOw7XV&ab_channel=ZendVNH%E1%BB%8DcL%E1%BA%ADpTr%C3%ACnhOnline ... NodeJS giúp nhà phát triển xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng NodeJS dùng để xây dựng loại ứng dụng khác ứng dụng dòng lệnh, ứng dụng web, ứng dụng trò chuyện theo thời gian thực,... tiếp người dùng (user )và ứng dụng (application) 4.2.2 Mơ hình MVC ứng dụng Web Với phát triển công nghệ xây dựng web Frontend Backend, nhà phát triển xây dựng phát triển ứng dụng web cách độc lập... MVC (Model – View – Controller) mơ hình kiến trúc ứng dụng phổ biến Ban đầu mơ hình áp dụng chủ yếu ứng dụng desktop, sau ý tưởng mơ hình MVC ứng dụng cho tảng khác Web Hình 4.2 Mơ Hình MVC 4.2.1