Đồ án 2 nft marketplace

ĐẠ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Ê NGUYÊN MINH KHOA DƯƠNG HOÀNG LONG ĐỒ ÁN NFT MARKETPLACE NFT MARKETPLACE KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM TP HỒ CHÍ MINH, 2022 ĐẠ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Ê NGUYỄN MINH KHOA – 19521693 DƯƠNG HOÀNG LONG - 19521779 ĐỒ ÁN NFT MARKETPLACE NFT MARKETPLACE KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN NGUYỄN TẤN TOÀN TP HỒ CHÍ MINH, 2022 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP.HCM, ngày……tháng… năm…… NHẬN XÉT ĐỒ ÁN (CỦA CÁN BỘ HƯỚNG DẪN) Tên đồ án 2: NFT MARKET PLACE Cán hướng dẫn: Nhóm SV thực hiện: Dương Hoàng Long 19521779 Lê Nguyễn Minh Khoa 19521693 ThS Nguyễn Tấn Toàn Đánh giá đồ án Về 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 hình thức báo cáo: ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………… Về nội dung nghiên cứu: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… …………………………………………………………………………… Về chương trình ứng dụng: ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… LỜI CẢM ƠN Để hồn thành đồ án cách hồn chỉnh, em nhận nhiều hướng dẫn nhiệt tình q Thầy Cơ Vì vậy, em xin phép gửi lời cảm ơn chân thành Đầu tiên, em xin chân thành cảm ơn bày tỏ lòng biết ơn sâu sắc đến Ths.Nguyễn Tấn Tồn, thầy tận tình bảo, hướng dẫn, truyền đạt kinh nghiệm, kiến thức chuyên môn tài liệu liên quan để nhóm hồn thành đồ án tốt Em xin gởi đến thầy lời tri ân điều mà thầy dành cho em Em xin chân thành cảm ơn tồn thể q thầy khoa Cơng Nghệ Phần Mềm tồn thể q thầy Trường Đại Học Công Nghệ Thông Tin TP.HCM Quý thầy ln tận tình truyền đạt kiến thức, kinh nghiệm quý báu tạo điều kiện thuận lợi cho nhóm suốt q trình học tập trường đặc biệt suốt trình thực đồ án Sau cùng, em xin kính chúc tồn thể q thầy khoa Cơng Nghệ Phần Mềm, Ths.Nguyễn Tấn Tồn ln dồi sức khỏe, nhiệt huyết thành công sống sứ mệnh truyền đạt kiến thức cho hệ trẻ mai sau TP Hồ Chí Minh, ngày tháng năm 2022 Sinh viên Lê Nguyễn Minh Khoa Sinh viên Dương Hoàng Long ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP.HCM, ngày……tháng… năm…… ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: NFT MARKET PLACE TÊN ĐỀ TÀI TIẾNG ANH: NFT MARKET PLACE Cán hướng dẫn: TS Nguyễn Tấn Toàn Thời gian thực hiện: Từ ngày 01/09/2022 đến ngày 23/12/2022 Sinh viên thực hiện: Dương Hoàng Long – 19521779 Lê Nguyễn Minh Khoa – 19521693 Nội dung đề tài: Giới thiệu đề tài: Với tốc độ phát triển công nghệ, ngày có nhiều ứng dụng dựa cơng nghệ xuất ngày Blockchain công nghệ thời đại sử dụng rộng rãi việc tạo tiền kỹ thuật số Ngoài ra, tiền kỹ thuật số chuỗi khối tiền điện tử sử dụng lĩnh vực khác Giao dịch tài sản phần chuỗi khối Ngày có nhiều người tham gia vào giao dịch kỹ thuật số; người tạo, bán mua tài sản kỹ thuật số Nghệ thuật kỹ thuật số trở nên phổ biến ngày Mã thông báo thay NFT trở thành xu hướng thời đại Thị trường NFT nơi dành cho người mua người bán tài sản kỹ thuật số Xuất phát từ nhu cầu thực tế, em lên ý tưởng thực đồ án với đề tài NFT Marketplace Mục tiêu đề tài: - Xây dựng trang web giúp quản lý NFT Marketplace gồm chức như: mua bán NFT, đấu thầu NFT, tạo NFT, đấu giá NFT, … - Quản lý kho lưu trữ NFT, giúp kiểm sốt, phân tích NFT sẵn có người dùng tiện dụng cho việc buôn bán - Cho phép thành viên chat với để giải vấn đề phát sinh - Ứng dụng có giao diện ưa nhìn, dễ sử dụng có tính thực tiễn, áp dụng vào thực tế Phạm vi đề tài: ● Phạm vi môi trường: o Website hoạt động trình duyệt web Cốc Cốc, Chrome, Firefox, ● Phạm vi chức năng: o Tạo sưu tập NFT o Tạo NFT đơn o Làm liệu o Phân tích liệu o Xóa NFT o Mua sưu tập NFT o Mua NFT đơn o Bán sưu tập NFT o Bán NFT đơn o Xem sưu tập NFT o Tạo phiên đấu giá o Cập nhật NFT o Cập nhật thông tin cá nhân o Xem thông tin cá nhân o Hỗ trợ chat hai người dùng Đối tượng sử dụng: - Các cá nhân, nhóm cơng ty muốn tiến hành giao dịch, xử lý NFT Phương pháp thực hiện: - Tìm hiểu React TypeScript, NestJs Blockchain - Tìm hiểu trang web liên quan để hiểu rõ nghiệp vụ - Nghiên cứu nhu cầu việc quản lý buôn bán NFT - Tiến hành phân tích thiết kế hệ thống - Tìm hiểu UX/UI tiến hành thiết kế giao diện cho trang web - Tiến hành triển khai kiểm thử Công nghệ sử dụng: - Frontend: ReactJs - Backend: NestJs - Database: Postgres - Source Control: Git Kết mong đợi: - Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài - Xây dựng ứng dụng đáp ứng tất chức đề - Giao diện ứng dụng đơn giản dễ sử dụng người dùng - Có thể mở rộng thêm chức cho ứng dụng tương lai Kế hoạch thực hiện: Giai đoạn Chuẩn bị kiến thức công nghệ Thời gian Từ 01/09/2022 đến 07/09/2022 Công việc - Khảo sát ứng dụng tương tự - Tìm hiểu công nghệ sử dụng cho đồ án - Phân tích, xác định, đặc tả chức Phân tích, thiết kế hệ thống Từ 08/09/2022 đến 08/10/2021 - Vẽ lưu đồ, luồng xử lý - Xây dựng CSDL - Xây dựng base source - Thiết kế UI - Phát triển giao diện Flutter Xây dựng ứng Từ 09/10/2022 dụng đến 16/11/2022 - Xây dựng RESTful API cho chức - Tích hợp API để hồn thiện ứng dụng - Thực kiểm thử luồng chức Kiểm thử Từ 17/11/2022 sửa lỗi đến 31/12/2022 - Tiến hành sửa lỗi phát sinh có - Cải thiện giao diện hoàn thành ứng dụng Hoàn thiện báo cáo slide thuyết trình Từ 01/01/2023 - Viết báo cáo đồ án đến 10/01/2023 - Làm slide thuyết trình Xác nhận CBHD TP HCM, ngày 20 tháng 08 năm 2022 (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Ts Nguyễn Tấn Toàn Lê Nguyễn Minh Khoa blockchain đâu Ví dụ, sàn giao dịch bị công khứ, nơi người giữ Bitcoin sàn giao dịch tất Mặc dù tin tặc hồn tồn ẩn danh, Bitcoin mà họ trích xuất dễ dàng theo dõi Nếu Bitcoin bị đánh cắp số vụ hack chuyển sử dụng nơi đó, điều biết Tất nhiên, ghi lưu trữ blockchain mã hóa Điều có nghĩa chủ sở hữu ghi giải mã để tiết lộ danh tính họ (sử dụng cặp khóa cơng khai-riêng tư) Do đó, người dùng blockchain ẩn danh giữ tính minh bạch 2.2.3.2 ReactJS Giới thiệu Reactjs Hình 2.16 React JS logo React.js thư viện Javascript lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác Nếu AngularJS Framework cho phép nhúng code javasscript code html thông qua attribute ng-model, ng-repeat với react library cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS.Tích hợp javascript HTML vào JSX làm cho component dễ hiểu Giới thiệu JSX 47 Hình 2.17 JSX logo JSX dạng ngôn ngữ cho phép viết mã HTML Javascript Đặc điểm: Faster: Nhanh JSX thực tối ưu hóa biên dịch sang mã Javacsript Các mã cho thời gian thực nhanh nhiều so với mã tương đương viết trực tiếp Javascript Safer: an toàn Ngược với Javascript, JSX kiểu statically-typed, nghĩa biên dịch trước chạy, giống Java, C++ Vì lỗi phát q trình biên dịch Ngồi ra, cung cấp tính gỡ lỗi biên dịch tốt Easier: Dễ dàng JSX kế thừa dựa Javascript, dễ dàng lập trình viên Javascripts sử dụng (tham khảo https://jsx.github.io/) Giới thiệu Components React xây dựng xung quanh component, không dùng template framework khác Trong React, xây dựng trang web sử dụng thành phần (component) nhỏ Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác Mỗi component React có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái Mọi thứ React component Chúng giúp bảo trì mã code làm việc với dự án lớn Một react component đơn giản cần method render Có nhiều methods khả dụng khác, render method chủ đạo 2.2.3.3 TypeScript 48 TypeScript gì? Hình 2.18 TypeScript logo TypeScript dự án mã nguồn mở phát triển Microsoft, coi phiên nâng cao Javascript việc bổ sung tùy chọn kiểu tĩnh lớp hướng đối tượng mà điều khơng có Javascript TypeScript sử dụng để phát triển ứng dụng chạy client-side (Angular2) server-side (NodeJS) TypeScript sử dụng tất tính của ECMAScript 2015 (ES6) classes, modules Khơng dừng lại ECMAScript 2017 đời tin TypeScript nâng cấp phiên lên để sử dụng kỹ thuật từ ECMAScript Thực TypeScript đời mà trước có số thư viện CoffeScript Dart phát triển Google, nhiên điểm yếu hai thư viện sư dụng cú pháp hoàn tồn, điều khác hồn tồn với TypeScript, đời sau TypeScript nhận đón nhận từ lập trình viên Tại nên sử dụng TypeScript? • Dễ phát triển dự án lớn: Với việc sử dụng kỹ thuật lập trình hướng đối tượng nên TypeScript giúp phát triển dự án lớn cách dễ dàng • Nhiều Framework lựa chọn: Hiện Javascript Framework dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ AngularJS 2.0 Ionic 2.0 • Hơ trợ tính Javascript phiên nhất: TypeScript đảm bảo việc sử dụng đầy đủ kỹ thuật Javascript, ví dụ version ECMAScript 2015 (ES6) • Là mã nguồn mở: TypeScript mã nguồn mở nên bạn hồn tồn sử dụng mà khơng phí, bên cạnh cịn cộng đồng hỗ trợ • TypeScript Javscript: Bản chất TypeScript biên dịch tạo đoạn mã javascript nên ban có thê chạy đâu miễn có hỗ trợ biên dịch 49 Javascript Ngồi bạn sử dụng trộn lẫn cú pháp Javascript vào bên TypeScript, điều giúp lập trình viên tiếp cận TypeScript dễ dàng 2.2.3.4 PostgreSQL PostgreSQL ? Hình 2.19 PostgreSQL logo PostgreSQL (phát âm post-gress-Q-L) hệ thống quản lý sở liệu quan hệ nguồn mở (DBMS) phát triển nhóm tình nguyện viên tồn giới PostgreSQL khơng bị kiểm sốt cơng ty tổ chức tư nhân khác mã nguồn cung cấp miễn phí Các tính PostgreSQL PostgreSQL chạy tất hệ điều hành chính, bao gồm Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, Mac OS X, Solaris, Tru64) Windows Nó hỗ trợ văn bản, hình ảnh, âm video, đồng thời bao gồm giao diện lập trình cho C/C++, Java, Perl, Python, Ruby, Tcl Kết nối Cơ sở liệu Mở (ODBC) PostgreSQL hỗ trợ phần lớn tiêu chuẩn SQL cung cấp nhiều tính đại bao gồm tính sau – • Complex SQL queries • SQL Sub-selects • Foreign keys 50 • • • • • • Trigger Views Transactions Multiversion concurrency control (MVCC) Streaming Replication (as of 9.0) Hot Standby (as of 9.0) 2.2.4 Thiết kế kiến trúc hệ thống Hình 2.19 : sơ đồ hệ thống Trong đó: Server API :là server hệ thống PostgresDB: database hệ thống IPFS:là hệ thống tập tin phân tán ngang hàng Website: ứng dụng web NFT Marketplace Metamask: ví tiền điện tử Blockchain Network:là hệ thống mạng blockchain 51 Blockchain:là blockchain database 2.2.5 Thiết kế giao diện 2.2.5.1 Danh sách hình website Bảng 2.20 Danh sách hình ứng dụng STT Tên hình Mơ tả chức Màn hình trang chủ Hiển thị NFT collection ; đăng nhập vào ví metamask,đăng xuất khỏi ví metamask Màn hình Hiển thị NFT có collection; chọn mua Collection NFT Màn hình tạo NFT Dùng để tạo NFT Màn hình Personal Chứa NFT tài khỏa sở hữu Modal đăng bán Dùng để đăng bán NFT sở hửu NFT Modal mua NFT Dùng để mua NFT đăng bán marketplace 2.2.5.2 Giao diện số hình website 52 Màn hình chính: Hình 2.20 : 53 Màn hình để người dùng đăng nhập search user theo adress Màn hình cịn chứa list collection NFT Màn hình Collection Hình 2.21 : 54 Màn hình Collection :chứa thơng tin người sở hữu Collection,chứa NFT.Người dùng filter NFT theo lựa chọn, mua NFT Màn hình Personal: 55 Hình 2.22 : Màn hình Personal chứa: thông tin người dùng, list NFT người dùng sở hữu Màn hình tạo NFT: Hình 2.23 : 56 Màn hình dùng để tạo NFT Modal bán NFT: Hình 2.24: Dùng để đăng bán NFT với giá đơn vị tiền tệ người dụng đặt Modal mua NFT: 57 Hình 2.25 : Dùng người dùng muốn mua NFT.Người dùng gửi NFT đến address khác chọn phương thức tốn 2.2.6 Triển khai hệ thống 2.2.6.1 Máy chủ Phần back-end deploy lên server Amazon EC2, giúp front-end dễ dàng tương tác Phần database sử dụng PostgreSQL host Amazon RDS 2.2.6.2 Ứng dụng web Ứng dụng web deploy lên sever Amazon EC2.Mọi người tham gia vào NFT Marketplace sau ứng dụng hoàn thành deploy.Sau deploy chức website test kiểm thử Đội tester nhận thơng báo đính kèm hướng dẫn sử dụng website email 58 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 3.1 Kết đạt Về mặt kỹ thuật, đồ án đạt kết sau: - Tìm hiểu cơng nghệ blockchain,smart contract,NFT,ERC, Biết cách ứng dụng lập trình blockchain với NestJS -Biết sử dụng công cụ làm việc với blockchain hardhat - Tìm hiểu ReactJS, framework giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng - Tìm hiểu PostgresDB, hệ quản trị sở liệu mã nguồn mở, với khả bảo vệ liệu toàn vẹn, khả mở rộng sở liệu Về mặt thực tiễn, đồ án đạt kết sau: - Nâng cao khả tìm hiểu kiến thức mới, cơng nghệ - Cải thiện khả xếp công việc giải vấn đề - Hiểu thêm quy trình phát triển ứng dụng hoàn chỉnh từ lúc lên ý tưởng đến lúc triển khai ứng dụng vào thực tế - Xây dựng ứng dụng đưa vào áp dụng thực tiễn 3.2 Thuận lợi khó khăn 3.2.1 Thuận lợi -Các cơng nghệ có cộng đồng lớn mạnh nên dễ dàng tìm hiểu học kiến thức - Giảng viên có nhiều kinh nghiệm, ln sẵn sàng giúp đỡ sinh viên trình thực đồ án 59 3.2.2 Khó khăn -Khối lượng công việc nhiều nên chịu áp lực mặc thời gian, dẫn đến số tính hồn thiện mức -Blockchain công nghệ nên cịn nhiều khó khăn tìm hiểu lập trình 3.3 Hướng phát triển Đề tài mở rộng phát triển thêm nhiều chức như: -Chức swap token -Cải thiện thêm phương án toán mua NFT 60 Chương TÀI LIỆU THAM KHẢO Tài liệu tiếng anh: [1] ReactJS : https://reactjs.org/ [2] TypeScript: https://www.typescriptlang.org/ [3] Styling CSS: https://developer.mozilla.org/en-US/docs/Web/CSS [4] Metamask: https://docs.metamask.io/guide/getting-started.html#basicconsiderations [5] Using redux with typescript: https://redux.js.org/usage/usage-with-typescript [6]Bootstrap 5.2: https://getbootstrap.com/docs/5.2/getting-started/introduction/ 61 ... .28 2. 2.1 Thiết kế xử lý 29 2. 2 .2 Thiết kế sở liệu 39 2. 2.3 Công nghệ sử dụng 43 2. 2.4 Thiết kế kiến trúc hệ thống 51 2. 2.5 Thiết kế giao diện 52 2 .2. 6... người dùng 29 2. 2.1 .2 Tạo NFT/ Bộ sưu tập NFT Hình 2. 5 Lược đồ Tạo NFT/ Bộ sưu tập NFT Mô tả: Người dùng sử dụng Usecase để tạo NFT/ Bộ sưu tập NFT Đầu tiên người dùng ấn tạo NFT/ NFT Collection... trả message not found cho người dùng 38 2. 2 .2 Thiết kế sở liệu 2. 2 .2. 1 Lược đồ sở liệu Hình 2. 14 Sơ đồ thiết kế lớp 2. 2 .2. 2 Mô tả bảng liệu Type: 39 Bảng 2. 14 Mô tả bảng liệu Type STT Tên lớp/quan