BÁO CÁO ĐỒ ÁN CUỐI KỲ MÔN HỌC CÁC CÔNG NGHỆ NỀN Đề tài XÂY DỰNG MARKETPLACE NFT

IE102.M21- Các cơng nghệ | Nhóm ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN BÁO CÁO ĐỒ ÁN CUỐI KỲ MÔN HỌC: CÁC CÔNG NGHỆ NỀN Đề tài: XÂY DỰNG MARKETPLACE NFT Lớp: IE102.M21 - Nhóm: GVHD: ThS Võ Tấn Khoa Nhóm sinh viên thực hiện: STT MSSV 18520063 18521682 18521692 19521403 19521558 19521733 19521746 Tên Bùi Quang Huy Nguyễn Ngọc Thúy Vy Nguyễn Phước Duy Phan Đặng Tiến Dũng Nguyễn Thị Huệ Võ Thị Như Lài Nguyễn Trúc Lân □□Tp Hồ Chí Minh, 05/2022 □□ IE102.M21- Các cơng nghệ | Nhóm MỤC LỤC MỤC LỤC LỜI MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài 1.2 Yêu cầu đề tài 1.3 Đối tượng 1.4 Phạm vi ứng dụng 1.5 Đặc điểm 1.6 Các module 1.7 Công cụ triển khai CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngơn ngữ lập trình Solidity 2.2 Nền tảng Blockchain – Polygon (MATIC) 2.3 Tiêu chuẩn ERC-721 2.4 Frontend Frameworks 10 2.5 Ethereum Development Environment – Hardhat 11 2.6 Storage Platforms - IPFS 12 2.7 Ethereum Web Client Library - Ethers.js 12 CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 13 3.1 Các thành phần 13 3.2 Các bước thực 14 CHƯƠNG 4: CÀI ĐẶT MÔI TRƯỜNG 15 4.1 Tạo ứng dụng Next.js 15 4.2 Cài đặt dependencies cho ứng dụng 15 4.3 Cài đặt framework Tailwind 15 4.4 Cấu hình Hardhat 15 IE102.M21- Các cơng nghệ | Nhóm CHƯƠNG 5: PHÂN TÍCH TRANG WEB 17 5.1 Smart contract 17 5.2 Màn hình trang chủ 21 5.3 Màn hình Sell NFT 27 5.4 Màn hình My NFTs 30 5.5 Màn hình Detail NFT 34 5.6 Màn hình Resell NFT 40 5.7 Màn hình Dashboard 42 5.8 Thanh Navbar (_app.js) 46 5.9 Login 48 10 Thiết kế css 56 11 API 59 CHƯƠNG 6: CÀI ĐẶT VÀ THỬ NGHIỆM 61 CHƯƠNG 6: NHẬN XÉT VÀ KẾT LUẬN 62 6.1 Kết đạt 62 6.2 Ưu điểm 62 6.3 Nhược điểm 62 6.4 Hướng phát triển 62 TÀI LIỆU THAM KHẢO 63 PHÂN CHIA CÔNG VIỆC 64 IE102.M21- Các cơng nghệ | Nhóm LỜI MỞ ĐẦU NFT (Non-fungible token) tài sản số sử dụng cơng nghệ blockchain Làn sóng NFT phát triển mạnh mẽ thời gian gần trở thành tảng quan trọng kinh tế tiền mã hóa NFT sử dụng nhiều lĩnh vực Nghệ thuật, Gaming, Metaverse, Collectible,… Cùng với tiềm NFT nhu cầu tìm kiếm tảng để sở hữu, mua bán sản phẩm NFT với nhiều mục đích khác gọi NFT Marketplace Trước nhu cầu đó, với yêu cầu mơn học, nhóm chúng em định chọn đề tài Xây dựng NFT Marketplace Với đề tài môn học này, nhóm xin chân thành cảm ơn giúp đỡ tận tình Thầy Võ Tấn Khoa Song, cịn nhiều hạn chế đề tài nhóm xây dựng khơng tránh khỏi thiếu sót Rất mong thầy bạn đóng góp ý kiến để chương trình ngày hoàn thiện Trân trọng cảm ơn!   IE102.M21- Các cơng nghệ | Nhóm CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Lý chọn đề tài NFT tài sản mật mã tạo cơng nghệ blockchain có mã nhận dạng siêu liệu, giúp chúng phân biệt, khác biệt hoàn toàn NFT tài sản kỹ thuật số đại diện cho tài sản giới thực nghệ thuật, âm nhạc, vật phẩm trò chơi video liên kết với chứng quyền sở hữu.  Vì NFT Marketplace đời để người dùng tạo, mua bán NFT Thị trường sử dụng để lưu trữ, hiển thị hiển thị giao dịch tạo mã thông báo NFT tài sản kỹ thuật số Đối với người dùng, trải nghiệm thị trường NFT thuận tiện sàn giao dịch tiền điện tử 1.2 Yêu cầu đề tài  - Nắm kiến thức smart contract, cách deploy smart contract, -Tạo sàn giao dịch NFT có chức như:cửa sổ mua sắm, ví, đăng ký tài khoản, tìm kiếm, 1.3 Đối tượng 1.3.1 Guest:  - Khách viếng thăm - Xem thông tin sản phẩm tin tức khác - Đăng ký để kết nối với ví Metamask 1.3.2 User: - Đã có tài khoản kết nối với ví Metamask - Đặt mua sản phẩm - Bán sản phẩm 1.4 Phạm vi ứng dụng Người dùng có nhu cầu tạo, thu thập, sưu tầm, mua bán NFT để thu lợi nhuận 1.5 Đặc điểm  Website thiết kế với - Giao diện hài hoà, thân thiện, giúp người dùng dễ dàng sử dụng - Trang chủ hiển thị danh sách sản phẩm bán - Khách hàng dễ dàng tìm thấy thông tin chi tiết sản phẩm mà họ quan tâm - Khách hàng tìm kiếm sản phẩm - Có chức đăng ký liên kết với ví Metamask IE102.M21- Các cơng nghệ | Nhóm 1.6 Các module 1.6.1 Module sản phẩm Các NFT liệt kê thị trường phải hiển thị tất thông tin quan trọng theo cách tối ưu hóa nhất: tên, giá, mơ tả, chủ sở hữu, phương thức toán, v.v.  1.6.2 Module đăng nhập Đăng nhập cách liên kết với ví Metamask có khách hàng vào NFT Marketplace 1.6.3 Module tìm kiếm sản phẩm Các sản phẩm trang chủ tìm kiếm để hiển thị sản phẩm phù hợp với yêu cầu khách hàng 1.6.4 Module quản lý sản phẩm Người dùng cập nhật sản phẩm mua bán danh mục sản phẩm 1.7 Cơng cụ triển khai - IDE: Visual Studio Code - Quản lý code: Github - Quản lý công việc: Excel - Trao đổi, liên lạc: Microsoft Team, Facebook IE102.M21- Các công nghệ | Nhóm CHƯƠNG 2: CƠ SỞ LÝ THUYẾT  Tech stack: ● Programing Language - Solidity ● Blockchain Platform - Polygon (MATIC) ● NFT Standards EERC-721 ● Front-end Frameworks ● Web application framework - Next.js ● CSS framework - CSS Tailwind ● Storage Platforms  - IPFS ● Ethereum Web Client Library - Ethers.js 2.1 Ngơn ngữ lập trình Solidity  Solidity biết đến ngơn ngữ lập trình hướng contract, sử dụng hầu hết smart contract (nâng cấp tạo lập) thuộc hệ sinh thái Ethereum Solidity có cú pháp câu lệnh gần giống với ngơn ngữ lập trình phổ biến (Java, C++, C# ) Ngơn ngữ Solidity có ứng dụng vơ quan trọng cơng nghệ Blockchain Một ví dụ điển hình cơng nghệ Blockchain tiền điện tử Nhờ có đời ngơn ngữ lập trình Solidity, nhà lập trình dễ dàng ứng dụng công nghệ Blockchain vào lĩnh vực kinh tế đời sống.  2.2 Nền tảng Blockchain – Polygon (MATIC)  Polygon (MATIC) là platform hỗ trợ phát triển sở hạ tầng giúp Ethereum mở rộng quy mơ hay cịn gọi layer Polygon (MATIC) hỗ trợ tất công cụ Ethereum có với giao dịch nhanh rẻ Polygon (MATIC) cố gắng giải vấn đề khả mở rộng khả sử dụng không ảnh hưởng đến phân quyền, bảo mật tận dụng cộng đồng nhà phát triển, hệ sinh thái có Polygon giải pháp mở rộng off/side chain cho tảng có để cung cấp khả mở rộng trải nghiệm người dùng vượt trội cho DApps/ chức người dùng.  Tính điểm bật:  Khả mở rộng: giao dịch nhanh, chi phí thấp an tồn sidechain Polygon với độ xác đạt chuỗi Ethereum layer base chain tương thích đầu tiên.  Thơng lượng cao: đạt lên đến 10.000 TPS single sidechain testnet nội Nhiều chuỗi thêm vào để mở rộng quy mô theo chiều ngang.  IE102.M21- Các công nghệ | Nhóm Trải nghiệm người dùng: mượt mà dễ sử dụng từ chain đến Polygon, ứng dụng di động gốc SDK có hỗ trợ Wallet Connect.  Bảo mật: những người vận hành Polygon chain, họ người đóng vai trị quan trọng hệ thống PoS.  Public Sidechains: Polygon sidechain chất công khai (so với chuỗi DApp riêng lẻ), không phép có khả hỗ trợ nhiều giao thức.  Kiến trúc Polygon  Gồm layer kết hợp: Execution layer, Polygon networks layer, Security layer, Ethereum layer.      Hình 2.1 Kiến trúc lớp Polygon Execution layer  Layer diễn giải thực giao dịch thỏa thuận đưa vào blockchain mạng Polygon (MATIC) Nó bao gồm hai lớp con:  ● Mơi trường thực thi (triển khai máy ảo cắm được)  ● Logic thực thi (chức chuyển đổi trạng thái mạng Polygon, thường viết dạng hợp đồng thông minh Ethereum)  Polygon networks layer  Một tập hợp mạng blockchain có chủ quyền Mỗi mạng phục vụ cộng đồng tương ứng nó, trì chức như:  ● Đối chiếu giao dịch  ● Sự đồng thuận nội bộ  ● Sản xuất khối  IE102.M21- Các cơng nghệ | Nhóm Các mạng sử dụng giao thức Polygon (MATIC) để kết nối với trao đổi thông tin tùy ý.  Security layer  Một layer chuyên biệt, không bắt buộc phải quản lý tập hợp trình xác thực kiểm tra định kỳ tính hợp lệ chuỗi Polygon (MATIC) với khoản phí Lớp triển khai siêu blockchain chạy song song với Ethereum, phụ trách chức như:  ● Quản lý trình xác thực (đăng ký/ hủy đăng ký, phần thưởng…)  ● Xác thực Polygon Chain  Lớp bảo mật fully abstract có nhiều trường hợp, thực thực thể khác nhau, có đặc điểm khác Nó thực trực tiếp Ethereum, trường hợp đó, thợ đào Ethereum thực việc xác nhận.  Ethereum layer  Polygon chain sử dụng Ethereum, blockchain lập trình an tồn giới, để lưu trữ thực thành phần quan trọng logic chúng Layer triển khai dạng tập hợp hợp đồng thông minh Ethereum, phụ trách chức như:  ● Tính chất cuối cùng/điểm kiểm tra  ● Staking  ● Giải tranh chấp  ● Chuyển tiếp thông tin  2.3 Tiêu chuẩn ERC-721  Tiêu chuẩn non-fungible token ERC-721 viết ngơn ngữ Solidity chuỗi khối Ethereum cho phép nhà phát triển mã hóa quyền sở hữu liệu tùy ý nào. Đặc biệt, tiêu chuẩn nhằm mục đích tạo ra các mã thơng báo có thể hốn đổi cho nhau. Một ví dụ hợp đồng ER-721 của OpenZeppelin, cho phép nhà phát triển theo dõi vật phẩm trò chơi họ.  IE102.M21- Các cơng nghệ | Nhóm Hình 2.2 Mã thông báo ERC-721 2.4 Frontend Frameworks  2.4.1 Next.js  Next.js framework dùng để phát triển ứng dụng React React framework javascript để xây dựng frontend với nhiều ưu điểm chia nhỏ phần web, module hoá css, xử lý kiện…Tuy nhiên, react phù hợp để render liệu phía client, việc ảnh hưởng lớn đến SEO website mà hầu hết data mà google đánh index phải render server.  Phân biệt Serverside Rendering Clientside Rendering  Serverside Rendering Clientside Rendering Server trả cho browser file CSR trả file HTML gần trống với HTML trang link tới file JS  rendered  Nội dung file HTML hoàn Đối với CSR, ta cần chờ tới tất chỉnh hiển thị trình xây dựng Virtual DOM gắn kiện load máy  hoàn thành đến Virtual DOM chuyển vào browser DOM để website xem được.  Bảng 2.1 So sánh Serverside rendering Clientside rendering 10 IE102.M21- Các cơng nghệ | Nhóm // Kiểm tra xem tài khoản có kết nối hay khơng có hiển thị coin địa chỉ, khơng hiển thị dịng chữ “connect to a wallet”   return account ? (                      // Hiển thị lượng coin format lấy sau phần thập phân chữ số           {etherBalance && parseFloat(formatEther(etherBalance)).toFixed(3)} ETH                                 // Hiển thị địa tài khoản            {account &&             `${account.slice(0, 6)} ${account.slice(               account.length - 4,               account.length             )}`} 51 IE102.M21- Các cơng nghệ | Nhóm                                 ) : ( // Button chưa kết nối tài khoản            Connect to a wallet        ); } ● Identicon.tsx: Phần code giúp hiển thị avatar cạnh địa tài khoản ví import { useEffect, useRef } from "react"; import { useEthers } from "@usedapp/core"; //cần import thư viện Jazzicon để lấy đường kính tính pixel trả hình đại diện lập thể import Jazzicon from "@metamask/jazzicon"; import styled from "@emotion/styled";   const StyledIdenticon = styled.div`   height: 1rem;   width: 1rem; 52 IE102.M21- Các cơng nghệ | Nhóm   border-radius: 1.125rem;   background-color: black; `;   export default function Identicon() {   const ref = useRef();   const { account } = useEthers();     useEffect(() => {     if (account && ref.current) {       ref.current.innerHTML = "";       ref.current.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16)));     }   }, [account]);     return ; } ● AccountModal.tsx: giúp hiển thị phần pop-up cung cấp thêm thông tin tài khoản đăng xuất kết nối với ví.  // Phần chủ yếu lấy modal có sẵn thư viện @chakra-ui/react import {   Box,   Button,   Flex,   Link,   Modal,   ModalOverlay,   ModalContent,   ModalHeader,   ModalFooter,   ModalBody,   ModalCloseButton,   Text, } from "@chakra-ui/react"; import { ExternalLinkIcon, CopyIcon } from "@chakra-ui/icons"; import { useEthers } from "@usedapp/core"; import Identicon from "./Identicon";   53 IE102.M21- Các cơng nghệ | Nhóm type Props = {   isOpen: any;   onClose: any; };   export default function AccountModal({ isOpen, onClose }: Props) {   const { account, deactivate } = useEthers();     function handleDeactivateAccount() {     deactivate();     onClose();   }     return (                                       Account                                                                                   Connected with MetaMask                                               Change                                                                                        {account &&                   `${account.slice(0, 6)} ${account.slice(                     account.length - 4,                     account.length                   )}`}                                                                                          Copy Address                                                                View on Explorer                56 IE102.M21- Các cơng nghệ | Nhóm                                                                    Your transactions willl appear here                                   ); } 10 Thiết kế css ● Home.module.css container {   padding: 2rem; }   main {   min-height: 100vh;   padding: 4rem 0;   flex: 1;   display: flex;   flex-direction: column;   justify-content: center;   align-items: center; 57 IE102.M21- Các công nghệ | Nhóm }   footer {   display: flex;   flex: 1;   padding: 2rem 0;   border-top: 1px solid #eaeaea;   justify-content: center;   align-items: center; }   footer a {   display: flex;   justify-content: center;   align-items: center;   flex-grow: 1; }   title a {   color: #0070f3;   text-decoration: none; }   title a:hover, title a:focus, title a:active {   text-decoration: underline; }   title {   margin: 0;   line-height: 1.15;   font-size: 4rem; }   title, description {   text-align: center; 58 IE102.M21- Các công nghệ | Nhóm }   description {   margin: 4rem 0;   line-height: 1.5;   font-size: 1.5rem; }   code {   background: #fafafa;   border-radius: 5px;   padding: 0.75rem;   font-size: 1.1rem;   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,     Bitstream Vera Sans Mono, Courier New, monospace; }   grid {   display: flex;   align-items: center;   justify-content: center;   flex-wrap: wrap;   max-width: 800px; }   card {   margin: 1rem;   padding: 1.5rem;   text-align: left;   color: inherit;   text-decoration: none;   border: 1px solid #eaeaea;   border-radius: 10px;   transition: color 0.15s ease, border-color 0.15s ease;   max-width: 300px; }   59 IE102.M21- Các cơng nghệ | Nhóm card:hover, card:focus, card:active {   color: #0070f3;   border-color: #0070f3; }   card h2 {   margin: 0 1rem 0;   font-size: 1.5rem; }   card p {   margin: 0;   font-size: 1.25rem;   line-height: 1.5; }   logo {   height: 1em;   margin-left: 0.5rem; }   @media (max-width: 600px) {   .grid {     width: 100%;     flex-direction: column;   } } 11 API Kết nối API với infura tới Polygon network /* hardhat.config.js */ require("@nomiclabs/hardhat-waffle");   const fs = require("fs"); const privateKey = fs.readFileSync(".secret").toString(); const projectId = "88ae0db50107404793a217cdb3e29de4"; module.exports = { 60 IE102.M21- Các cơng nghệ | Nhóm   defaultNetwork: "hardhat",   networks: {     hardhat: {       chainId: 1337,     },     mumbai: {       url: `https://polygon-mumbai.infura.io/v3/${projectId}`,       accounts: [privateKey],     },   },   solidity: {     version: "0.8.4",     settings: {       optimizer: {         enabled: true,         runs: 200,       },     },   }, }; 61 IE102.M21- Các công nghệ | Nhóm  CHƯƠNG 6: CÀI ĐẶT VÀ THỬ NGHIỆM STT Chức Mức độ hoàn thành(%) Đăng ký 70% Tìm kiếm 85% Mua bán NFT 87% Ghi Bảng 6.1 Bảng đánh giá chức trang web 62 IE102.M21- Các cơng nghệ | Nhóm CHƯƠNG 6: NHẬN XÉT VÀ KẾT LUẬN 6.1 Kết đạt ● Nắm nội dung blockchain, Solidity, Smart contract, cách tạo token xây dựng frontend cho DAPP ● Áp dụng kiến thức học vào trình học thực đồ án ● Nắm đặc điểm cách thức để tạo NFT Marketplace.  6.2 Ưu điểm ● Ứng dụng tạo có chức NFT Marketplace đăng ký, tạo, mua, bán NFT tìm kiếm ● Ứng dụng có giao diện dễ nhìn, đơn giản, dễ sử dụng ● Có liên kết với metamask để người dùng dễ toán 6.3 Nhược điểm ● Các chức đáp ứng mức bản, chưa có chức mới, bật so với NFT Marketplace khác ● Giao diện đơn giản, chưa thu hút ● Chức hạn chế, chưa phục vụ đầy đủ nhu cầu đa dạng người dùng ● Chưa áp dụng cho thiết bị mobile 6.4 Hướng phát triển Nhóm tiếp tục phát triển hồn thiện ứng dụng đồng thời tìm hiểu bổ sung tính Bên cạnh đó, nhóm tập trung thiết kế giao diện để ứng dụng sinh động bắt mắt 63 IE102.M21- Các cơng nghệ | Nhóm TÀI LIỆU THAM KHẢO Dabit, N (2021, 12) DEV Retrieved from How to Build a Full Stack NFT Marketplace - V2 (2022): https://dev.to/edge-and-node/building-scalablefull-stack-apps-on-ethereum-with-polygon-2cfb? fbclid=IwAR2GrMBXHtiuSwSRthMegiJ61CZhIySVRQIzsLFKju76KDRR 64BWmCZnGsQ Dawson, J E (2021, 19) DEV Retrieved from Build a Web3 Dapp in React & Login with MetaMask: https://dev.to/jacobedawson/build-a-web3dapp-in-react-login-with-metamask-4chp Hun, P (2021, 10 4) GPS Blockchain Retrieved from Polygon (MATIC) gì? Tổng quan dự án MATIC: https://gfsblockchain.com/tong-quan-vedu-an-matic-polygon.html ITNavi (2022, 13) ITNavi Retrieved from Solidity gì? Tổng quan ngơn ngữ lập trình Solidity: https://itnavi.com.vn/blog/solidity-la-gi Niềm Vui Lập Trình (2021, 6) Retrieved from Tailwind CSS Dành Cho Bạn Mới Bắt Đầu 2021: https://www.niemvuilaptrinh.com/article/tailwindcss-danh-cho-ban-moi-bat-dau-2021 64 IE102.M21- Các công nghệ | Nhóm PHÂN CHIA CƠNG VIỆC STT MSSV Công việc giao Mức độ thành(%) 18520063 Làm tính đăng ký chi tiết NFT 92% 18521682 Làm mục Cơ sở lý thuyết Làm mục phân tích trang web 80% 18521692 Làm tính Chi tiết NFT, quay demo 91% 19521403 Làm mục Tổng quan Nhận xét kết luận Format word 80% 19521558 Phân chia cơng việc Làm tính tìm kiếm Làm mục Tổng Quan Thiết kế hệ thống Làm slide thuyết trình 90% 19521733 Làm tính tìm kiếm Làm mục Cài đặt mơi trường Phân tích trang web 91% 19521746 Làm chức đăng ký, thuyết trình 93% hồn 65