Đồ án tìm hiểu blockchain và xây dựng ứng dụng nft theo trào lưu move to earn

ĐẠ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 ĐỒ ÁN – SE122.N11 ĐỀ TÀI: TÌM HIỂU BLOCKCHAIN VÀ XÂY DỰNG ỨNG DỤNG NFT THEO TRÀO LƯU MOVE TO EARN Giảng viên hướng dẫn: Cô HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện: NGUYỄN CAO CƯỜNG – MSSV: 19521298 ĐINH VIỆT HÀO – MSSV: 19521475 Thành phố Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Token thay (NFT) tài sản ảo đại diện cho vật phẩm giới thực nghệ thuật, âm nhạc, vật phẩm game, video NFT mua bán trực tuyến hình thức tốn tiền mã hóa (cryptocurrency) NFT thường mã hóa phần mềm giống loại tiền mã hóa hay cịn gọi tiền điện tử Mặc dù xuất hồi năm 2014, NFTs nhiều người biết đến chúng ngày trở thành cách phổ biến để mua bán tác phẩm nghệ thuật số Một khoản tiền khổng lồ 174 triệu USD chi cho NFT từ tháng 11/2017 Nhờ phát triển NFT ngày này, hàng loạt trào lưu liên quan đến NFT đời Có thể kể đến Play To Earn, Move To Earn Nhằm mục đích tìm hiểu NFT trào lưu liên quan, nhóm em định xây dựng ứng dụng Move To earn tảng Ethereum Move To Earn (Di chuyển để kiếm tiền) hình thức giúp người dùng kiếm tiền qua chuyển động hàng ngày chạy công nghệ cảm biến, đo lường chuyển động người dùng kết hợp thiết bị điện tử như: Smart Phone, Smart Watch hay GPS… Các thiết bị thu thập liệu qua hoạt động của thể từ quy số liệu đánh giá quy đổi thành đồng coin ứng dụng Trong NFT ứng dụng thành đôi giày, người dùng dùng đôi giày để kiếm thêm thu nhập cải thiện sức khoẻ thân ~1~ LỜI CẢM ƠN Đầu tiên, nhóm xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Cơng nghệ phần mềm giúp cho nhóm em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới cô Huỳnh Hồ Thị Mộng Trinh Cô trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báu giúp nhóm em hồn thành tốt báo cáo mơn học Trong thời gian học đề tài, nhóm em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, nhóm em vận dụng tối đa thu thập để hoàn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, nhóm em khơng tránh khỏi thiếu sót Chính vậy, nhóm em mong nhận góp ý từ phía Cơ nhằm hồn thiện kiến thức mà nhóm em học tập hành trang kiến thức giúp nhóm em phát triển tương lai Sau cùng, nhóm xin kính chúc 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 Xin chân thành cảm ơn quý Thầy Cô! ~2~ MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN Chương 1: TỔNG QUAN 1.1 Tên đề tài 1.2 Giới thiệu đề tài 1.3 Khảo sát trạng 1.3.1 StepN 10 1.3.2 Calo 11 1.3.3 Genopets 13 1.4 Mục tiêu hướng đến 14 Chương 2: CƠ SỞ LÝ THUYẾT 16 2.1 Blockchain 16 2.1.1 Giới thiệu 16 2.1.2 Các đặc điểm bật 17 2.1.3 Cách thức hoạt động 17 2.1.4 Ứng dụng thực tiễn 20 2.2 Smart contract 21 2.2.1 Giới thiệu 21 2.2.2 Đặc điểm 22 2.2.3 Cách thức hoạt động 22 2.3 Ethereum 23 2.3.1 Giới thiệu 23 2.3.2 Các thành phần Ethereum 24 2.4 Token ERC-20 26 2.4.1 Giới thiệu ERC-20 26 2.4.1 Ưu điểm 26 2.4.3 Nhược điểm 27 2.5 NFT – Non-fungible Token 28 2.5.1 Giới thiệu NFT 28 2.5.2 Đặc điểm NFT 28 2.5.3 Ứng dụng NFT 29 2.6 Nextjs 30 ~3~ 2.7 React Native 30 2.8 Solidity 30 Chương 3: MƠ HÌNH USE-CASE 32 3.1 Sơ đồ Use-case 32 3.2 Danh sách actor 32 3.3 Danh sách Use-case 32 3.4 Đặc tả Use-case 33 3.4.1 Đặc tả Use-case “Đăng nhập” 33 3.4.2 Đặc tả Use-case “Đăng ký” 34 3.4.3 Đặc tả Use-case “Kết nối ví” 34 3.4.4 Đặc tả Use-case “Quản lý tài khoản” 35 3.4.5 Đặc tả Use-case “Tìm kiếm, lọc NFT” 36 3.4.6 Đặc tả Use-case “Mua bán, giao dịch NFT” 36 3.4.7 Đặc tả Use-case “Xem NFT” 37 3.4.8 Đặc tả Use-case “Xem sưu tập NFT” 37 3.4.9 Đặc tả Use-case “Hoạt động chạy kiếm tiền” 38 3.4.10 Đặc tả Use-case “Trả thưởng chạy” 38 Chương 4: THIẾT KẾ DỮ LIỆU 40 4.1 Hệ thống Smart Contract 40 4.1.1 Struct “Sales” thuộc RunnMarketplace 40 4.1.2 Struct “TokenInfo” thuộc RunnSneaker721 40 4.2 Bảng liệu MongoDB 41 4.2.1 Schema “Sales” 41 4.2.2 Schema “TokenInfo” 41 4.2.3 Schema “User” 42 Chương 5: THIẾT KẾ KIẾN TRÚC 43 5.1 Kiến trúc hệ thống 43 5.2 Kiến trúc Smart contract 44 5.3 Công nghệ sử dụng 46 Chương 6: THIẾT KẾ GIAO DIỆN 48 6.1 Sơ đồ liên kết hình 48 6.2 Danh sách hình 48 6.3 Mô tả chi tiết hình 50 ~4~ 6.3.1 Màn hình “Đăng nhập web” 50 6.3.2 Màn hình “Kho hàng” 51 6.3.3 Màn hình “Chi tiết NFT kho hàng” 52 6.3.4 Màn hình “Chấp thuận” 52 6.3.5 Màn hình “Nhập giá” 53 6.3.6 Màn hình “Chợ (tất cả)” 54 6.3.7 Màn hình “Chợ (của tơi)” 55 6.3.8 Màn hình “Chi tiết NFT chợ” 56 6.3.9 Màn hình “Đăng nhập phía mobile” 57 6.3.10 Màn hình “Đăng ký tài khoản” 58 6.3.11 Màn hình “Trang chủ” 59 6.3.12 Màn hình “Giày tôi” 61 6.3.13 Màn hình “Chi tiết giày” 62 6.3.14 Màn hình “Hồ sơ cá nhân” 63 6.3.15 Màn hình “Chỉnh sửa hồ sơ” 64 6.3.16 Màn hình “Thơng tin ứng dụng” 65 6.3.17 Màn hình “Ví tơi” 66 6.3.18 Màn hình “Running” 67 6.3.19 Màn hình “Running với đồ” 68 6.3.20 Màn hình “Trang chủ trống” 69 6.3.21 Màn hình “Giày trống” 70 Chương 7: KẾT LUẬN 72 7.1 Kết đạt 72 7.2 Đánh giá 72 7.2.1 Thuận lợi 72 7.2.2 Khó khăn 72 7.2.3 Hướng phát triển 73 TÀI LIỆU THAM KHẢO 74 ~5~ DANH MỤC HÌNH ẢNH Hình 1: Giao diện ứng dụng StepN 11 Hình 2: Giao diện ứng dụng CaloRun 12 Hình 3: Giao diện ứng dụng Genopets 14 Hình 4: Sơ đồ Use-case tổng quát 32 Hình 5: Kiến trúc hệ thống 43 Hình 6: Sơ đồ liên kết hình phía Web 48 Hình 7: Sơ đồ liên kết hính phía Mobile 48 Hình 8: Màn hình đăng nhập Web 50 Hình 9: Màn hình kho hàng 51 Hình 10: Màn hình chi tiết NFT kho hàng 52 Hình 11: Màn hình chấp thuận 53 Hình 12: Màn hình nhập giá 53 Hình 13: Màn hình chợ lớn 54 Hình 14: Màn hình chợ tơi 55 Hình 15: Màn hình chi tiết NFT chợ 56 Hình 16: Màn hình đăng nhập phía mobile 57 Hình 17: Màn hình đăng ký tài khoản 58 Hình 18: Màn hình trang chủ 59 Hình 19: Màn hình giày tơi 61 Hình 20: Màn hình chi tiết giày 62 Hình 21: Màn hình hồ sơ cá nhân 63 Hình 22: Màn hình chỉnh sửa hồ sơ 64 Hình 23: Màn hình thơng tin ứng dụng 65 Hình 24: Màn hình ví 66 Hình 25: Màn hình Running 67 Hình 26: Màn hình Running với đồ 68 Hình 27: Màn hình trang chủ trống 69 Hình 28: Màn hình giỏ giày trống 70 ~6~ DANH MỤC BẢNG BIỂU Bảng 1: Danh sách Actor 32 Bảng 2: Danh sách Use-case 33 Bảng 3: Đặc tả Use-case đăng nhập 34 Bảng 4: Đặc tả Use-case đăng ký 34 Bảng 5: Đặc tả Use-case kết nối ví 35 Bảng 6: Đặc tả Use-case quản lý tài khoản 36 Bảng 7: Đặc tả Use-case tìm kiếm, lọc NFT 36 Bảng 8: Đặc tả Use-case mua bán, giao dịch NFT 37 Bảng 9: Đặc tả Use-case xem NFT 37 Bảng 10: Đặc tả Use-case xem sưu tập NFT 38 Bảng 11: Đặc tả Use-case hoạt động chạy kiếm tiền 38 Bảng 12: Đặc tả Use-case trả thưởng chạy 39 Bảng 13: Hệ thống Smart Contract 40 Bảng 14: Struct Sale thuộc RunnMarketplace 40 Bảng 15: Bảng liệu Sales 41 Bảng 16: Bảng liệu TokenInfo 42 Bảng 17: Bảng liệu người dùng 42 Bảng 18: Kiến trúc hệ thống 44 Bảng 19: Bảng công nghệ sử dụng 47 Bảng 20: Danh sách hình 50 Bảng 21: Mô tả hình đăng nhập Web 51 Bảng 22: Mô tả hình kho hàng 51 Bảng 23: Mô tả chi tết NFT kho hàng 52 Bảng 24: Mơ tả hình chấp thuận 53 Bảng 25: Mơ tả hình nhập giá 54 Bảng 26: Mơ tả hình chợ lớn 54 Bảng 27: Mơ tả hình chợ tơi 55 Bảng 28: Mơ tả hình chi tiết NFT chợ 56 Bảng 29: Mơ tả hình đăng nhập phía Mobile 58 Bảng 30: Mô tả hình đăng ký tài khoản 59 ~7~ Bảng 31: Mô tả hình trang chủ 60 Bảng 32: Mô tả hình giày tơi 62 Bảng 33: Mô tả hình chi tiết giày 63 Bảng 34: Mô tả hình hồ sơ cá nhân 64 Bảng 35: Mô tả hình chỉnh sửa hồ sơ 65 Bảng 36: Mô tả hình thơng tin ứng dụng 66 Bảng 37: Mô tả hình ví tơi 67 Bảng 38: Mô tả hình Running 68 Bảng 39: Mơ tả hình chạy với đồ 69 Bảng 40: Mơ tả hình trang chủ trống 70 Bảng 41: Mơ tả hình giỏ giày trống 71 ~8~ Chương 1: TỔNG QUAN 1.1 Tên đề tài “ Tìm hiểu blockchain xây dựng ứng dụng NFT theo trào lưu Move to earn” 1.2 Giới thiệu đề tài Move To Earn (Di chuyển để kiếm tiền) hình thức giúp người dùng kiếm tiền qua chuyển động hàng ngày chạy công nghệ cảm biến, đo lường chuyển động người dùng kết hợp thiết bị điện tử như: Smart Phone, Smart Watch hay GPS… Các thiết bị thu thập liệu qua hoạt động của thể từ quy số liệu đánh giá quy đổi thành đồng coin ứng dụng Trong NFT ứng dụng thành đôi giày, người dùng dùng đôi giày để kiếm thêm thu nhập cải thiện sức khoẻ thân RunN tảng Web3 đa sản phẩm bao gồm: Move-to-Earn, NFT Marketplace Đây tảng giúp bạn vừa chạy mà vừa kiếm tiền Mục tiêu RunN hướng tới xây dựng tảng có nhiều người dùng thúc đẩy người hướng tới lối sống khoa học, lành mạnh hơn, cải thiện sức khoẻ kết nối cộng đồng Đây dự án Move-to-Earn nên để bắt đầu tham gia bạn cần sỡ hữu cho đơi giày NFT Sau sở hữu NFT bạn cần phải tải ứng dụng tảng kết nối ví mua NFT vào để bắt đầu tham gia Các sản phẩm RunN sử dụng mã thông báo trả thưởng RMT Điều giúp tăng tiện ích mã thơng báo, tăng giá trị chúng q trình Mã thơng báo RMT trả thưởng cho người dùng dựa vào hoạt động chạy hàng ngày khách hàng Việc mua bán sử dụng RMT cập nhật them tính sau Mặc dù xuất hồi năm 2014, NFTs nhiều người biết đến chúng ngày trở thành cách phổ biến để mua bán tác phẩm nghệ thuật số Một khoản tiền khổng lồ 174 triệu USD đượ11c chi cho NFT từ tháng 11/2017 Và lí nhóm tụi em tiến hành tìm hiểu Blockchain xây dựng ứng dung NFT – Move To Earn 1.3 - Khảo sát trạng Các ứng dụng NFT theo trào lưu Move to earn phổ biến nay: ~9~ STT Tên Kiểu Ý nghĩa profileAvatar Image Hiển thị ảnh người dùng rmtCoint Text, Image Hiển thị số lượng token RMT energyAmount Text, Image Hiển thị tổng lượng có Wallet Image Chuyển tới hình “Ví tơi” shoesCard Component custom Hiển thị danh sách thông tin giày để chọn rmtRewards Text Hiển thị RMT Token thưởng sau chạy energyCurrent Text Hiển thị lượng có timeRefill Text Hiện thị thời gian nạp đầy lại lượng startButton Button Tiến hành hoạt động chạy Bảng 31: Mô tả hình trang chủ ~ 60 ~ 6.3.12 Màn hình “Giày tơi” Hình 19: Màn hình giày tơi STT Tên Kiểu Ý nghĩa profileAvatar Image Hiển thị ảnh người dùng rmtCoint Text, Image Hiển thị số lượng token RMT energyAmount Text, Image Hiển thị tổng lượng có Wallet Image Chuyển tới hình “Ví tơi” priceCBX Combobox Tiến hành xếp giày theo giá Filter Button Chuyển tới trang lộc giày ~ 61 ~ shoesCard Component custom Hiển thị card giày NFT Bảng 32: Mô tả hình giày tơi 6.3.13 Màn hình “Chi tiết giày” Hình 20: Màn hình chi tiết giày STT Tên Kiểu Ý nghĩa profileAvatar Image Hiển thị ảnh người dùng rmtCoint Text, Image Hiển thị số lượng token RMT energyAmount Text, Image Hiển thị tổng lượng có Wallet Image Chuyển tới hình “Ví tôi” ~ 62 ~ shoesCard Component custom Hiển thị card giày NFT PerformanceText Text Thông số Performance giày JoyText Text Thông số Joy giày Durability Text Thông số Durability giày btnBack Button Quay trở hình trước Bảng 33: Mơ tả hình chi tiết giày 6.3.14 Màn hình “Hồ sơ cá nhân” Hình 21: Màn hình hồ sơ cá nhân STT Tên Kiểu Ý nghĩa ~ 63 ~ profileAvatar Image Hiển thị ảnh người dùng emailText Text Hiển thị email người dùng nameText Text Hiển thị tên người dùng passwordText Text Mật người dùng Bảng 34: Mơ tả hình hồ sơ cá nhân 6.3.15 Màn hình “Chỉnh sửa hồ sơ” Hình 22: Màn hình chỉnh sửa hồ sơ ~ 64 ~ STT Tên Kiểu Ý nghĩa titleText Text Hiện thị chủ đề cần sửa inputText Input Hiện thị cho người dùng nhập vào btnSave Button Tiến hành lưu lại cập nhật Bảng 35: Mơ tả hình chỉnh sửa hồ sơ 6.3.16 Màn hình “Thơng tin ứng dụng” Hình 23: Màn hình thơng tin ứng dụng STT Tên profileAvatar Kiểu Image Ý nghĩa Hiển thị ảnh người dùng ~ 65 ~ emailText Text Hiển thị email người dùng nameText Text Hiển thị tên người dùng activeCode Text Mã code Version Text Phiên ứng dụng btnLogout Button Đăng xuất khỏi ứng dụng Bảng 36: Mơ tả hình thơng tin ứng dụng 6.3.17 Màn hình “Ví tơi” Hình 24: Màn hình ví tơi STT Tên Kiểu Ý nghĩa ~ 66 ~ addressWallet Text Hiển thị địa ví người dùng RMToken Text Hiển thị số lượng RMT Token Sneakers Text Hiển thị số lượng sneakers Bảng 37: Mơ tả hình ví tơi 6.3.18 Màn hình “Running” Hình 25: Màn hình Running STT Tên Kiểu Ý nghĩa coinReward Text Hiển thị token trả thưởng Energy Text Năng lượng tiêu hao distanceKM Text Số km chạy ~ 67 ~ Speed Text Vận tốc chạy Timer Text Đếm thời gian từ lúc chạy btnMap Button Chuyển sang hình chạy qua map btnClose Button Chuyển hình “Trang chủ” btnQuestion Button Hướng dẫn luật, thông số chạy Bảng 38: Mơ tả hình Running 6.3.19 Màn hình “Running với đồ” Hình 26: Màn hình Running với đồ STT Tên Kiểu Ý nghĩa ~ 68 ~ distanceKM Text Hiển thị số km chạy Speed Text Hiển thị vận tốc chạy Timer Text Đếm thời gian lúc bắt đầu chạy btnClose Button Chuyển sang hình chạy bình thường Bảng 39: Mơ tả hình chạy với đồ 6.3.20 Màn hình “Trang chủ trống” Hình 27: Màn hình trang chủ trống ~ 69 ~ STT Tên warningText Kiểu Ý nghĩa Yêu cầu đăng nhập ví để sử dụng Text Bảng 40: Mơ tả hình trang chủ trống 6.3.21 Màn hình “Giày tơi trống” Hình 28: Màn hình giỏ giày trống STT Tên Kiểu Ý nghĩa profileAvatar Image Hiển thị ảnh người dùng rmtCoint Text, Image Hiển thị số lượng token RMT energyAmount Text, Image Hiển thị tổng lượng có ~ 70 ~ Wallet Image Chuyển tới hình “Ví tơi” priceCBX Combobox Tiến hành xếp giày theo giá Filter Button Chuyển tới trang lộc giày Bảng 41: Mơ tả hình giỏ giày trống ~ 71 ~ Chương 7: KẾT LUẬN 7.1 Kết đạt Nhóm nghiên cứu áp dụng thành cơng cơng nghệ Blockchain để xây dựng thành công ứng dụng NFT theo trào lưu Move to earn Nghiên cứu xây dựng Smart Conrtact Hardhat thư viện OpenZeppelin kết hợp sử dụng Next.js, React Native, Ether.js xây dựng giao diện người dùng Triển khai thành công API tương tác với sở liệu MongoDB đồng với liệu smart contract giúp việc truy xuất nhanh linh hoạt Kết hợp với thuật toán lưu trữ IPFS (thuật toán lưu trữ phân tán) giúp liệu lưu trữ vĩnh viễn cách công khai, minh bạch 7.2 Đánh giá 7.2.1 Thuận lợi Giảng viên hướng dẫn tận tình hỗ trợ, đưa định hướng giúp nhóm thực đề tài Có sẵn tảng kiến thức để xây dựng ứng dụng sở hạ tầng website Do blockchain nói chung NFT nói riêng xu hướng tồn cầu nên tài liệu công nghệ chia sẻ rộng rãi Vận dụng kiến thức, quy trình phát triển học giúp việc xây dựng phần mềm trở nên có hệ thống chặt chẽ 7.2.2 Khó khăn Khoảng thời gian đầu tiếp cận blockchain kiến thức cịn mơ hồ khó hiểu Tốn nhiều thời gian học ngôn ngữ Solidity để viết Smart Contract cách thức deploy Smart Contract lên mạng Goerli ~ 72 ~ Tìm hiểu cách thức hoạt động trào lưu NFT Move to earn, đặc biệt cơng nghệ blockchain NFT cịn giới nên nhiều thời gian để tìm hiểu xây dựng hệ thống 7.2.3 Hướng phát triển Hồn thiện đầy đủ tính tại, nâng cấp giao diện thân thiện đại hơn, giảm bớt thao tác không cần thiết để tăng trải nghiệm người dùng Bổ sung thêm tính để người dùng tương tác nhiều với giày NFT, giúp người vận động nhiều Tái cấu trúc nâng cao tính bảo mật Smart Contract ~ 73 ~ TÀI LIỆU THAM KHẢO [1] - https://reactnative.dev/ [2] - https://reactjs.org/ [3] - https://ethereum.org/vi/ [4] - https://metamask.io/ [5] - https://web3js.readthedocs.io/en/v1.8.1/ [6] - https://docs.ethers.org/v5/ [7] - https://walletconnect.com/ [8] - https://nextjs.org/ [9] - https://nativebase.io/ [10] - https://nodejs.org/en/ ~ 74 ~ ... loạt trào lưu liên quan đến NFT đời Có thể kể đến Play To Earn, Move To Earn Nhằm mục đích tìm hiểu NFT trào lưu liên quan, nhóm em định xây dựng ứng dụng Move To earn tảng Ethereum Move To Earn. .. đượ11c chi cho NFT từ tháng 11/2017 Và lí nhóm tụi em tiến hành tìm hiểu Blockchain xây dựng ứng dung NFT – Move To Earn 1.3 - Khảo sát trạng Các ứng dụng NFT theo trào lưu Move to earn phổ biến... 71 ~8~ Chương 1: TỔNG QUAN 1.1 Tên đề tài “ Tìm hiểu blockchain xây dựng ứng dụng NFT theo trào lưu Move to earn? ?? 1.2 Giới thiệu đề tài Move To Earn (Di chuyển để kiếm tiền) hình thức giúp người