Xây dựng dapp trên cardano từ con số không

About Lesson

Phân Tích Ý Tưởng Xây Dựng NFT Marketplace Trên Cardano

Bài viết này dựa trên nội dung video hướng dẫn phân tích ý tưởng cho một ứng dụng NFT Marketplace trên blockchain Cardano. Nội dung được thiết kế để giúp người mới bắt đầu (beginner) hiểu rõ về các chức năng chính, logic hợp đồng thông minh, và cách thiết kế giao diện người dùng (UI). Chúng ta sẽ phân tích các marketplace thực tế như JPG.Store, thiết kế UI cơ bản, và demo các chức năng cốt lõi. Bài viết này là phần đầu tiên trong chuỗi 6 video về xây dựng dApp NFT Marketplace, tập trung vào phân tích ý tưởng và thiết kế UI. Các phần sau sẽ bao gồm viết smart contract, test, tích hợp frontend, và triển khai production.

Giới Thiệu Về Dự Án NFT Marketplace

NFT Marketplace là một nền tảng phi tập trung (dApp) cho phép người dùng mua bán các NFT (Non-Fungible Tokens) trên Cardano. Chúng ta sẽ xây dựng một marketplace đơn giản với các chức năng cơ bản, sử dụng:

Frontend: Next.js với MeshJS để kết nối ví và xử lý giao dịch.
Smart Contract: Aiken hoặc Plutus để quản lý logic on-chain.
Backend: Blockfrost để truy vấn dữ liệu NFT và UTXO.

Mục tiêu khóa học:

Phân tích ý tưởng và thiết kế UI (video này).
Viết smart contract và test (2 video tiếp theo).
Tích hợp frontend và hoàn thiện (video 4).
Triển khai production (video 5-6).

Lợi ích: Người dùng có thể list NFT để bán, mua NFT, cập nhật giá, và delist NFT mà không cần trung gian, với tính minh bạch của blockchain.

Phân Tích Các Marketplace Thực Tế Trên Cardano

Cardano có một số marketplace NFT phổ biến:

JPG.Store: Chiếm hơn 90% giao dịch NFT trên Cardano, với giao diện thân thiện và hỗ trợ nhiều ví.
CNFT.io: Một trong những marketplace đầu tiên trên Cardano, tập trung vào cộng đồng nghệ sĩ.

Demo JPG.Store

Truy cập JPG.Store để xem demo:

Kết nối ví: Chọn ví như Eternl hoặc Nami, kết nối để hiển thị số dư và NFT sở hữu.
Trang chủ: Hiển thị các bộ sưu tập (collections) NFT đang bán, với bộ lọc theo giá, độ hiếm, và chủ đề.
Xem chi tiết NFT: Nhấp vào NFT để xem metadata (tên, mô tả, hình ảnh, thuộc tính), lịch sử giao dịch, và nút “Buy Now”.
Mua NFT: Tạo giao dịch mua, ký bằng ví, và NFT chuyển vào ví người mua.
Profile: Hiển thị NFT sở hữu. Chọn NFT để “Sale” (list bán với giá), “Update Price” (cập nhật giá), hoặc “Delist” (rút NFT về ví).

Chức năng nâng cao (không tập trung trong khóa học beginner):

Đấu giá (auction).
Đưa offer (đề nghị giá).
Tích hợp IPFS cho metadata.

Các Chức Năng Chính Của NFT Marketplace

Một marketplace cơ bản cần 5 chức năng chính:

Connect Wallet: Kết nối ví Cardano (Eternl, Nami) để xác thực và ký giao dịch.
Hiển thị danh sách NFT (List NFTs): Query on-chain để hiển thị NFT đang bán (sử dụng Blockfrost, không cần smart contract).
List NFT (Bán NFT): Gửi NFT vào smart contract với giá bán.
Update Price: Cập nhật giá NFT đang list.
Delist NFT: Rút NFT về ví nếu không muốn bán nữa.
Buy NFT: Mua NFT từ người bán khác, chuyển ADA và nhận NFT.

Logic Smart Contract: 4 chức năng chính (list, update, delist, buy) cần smart contract để xử lý on-chain. Chức năng hiển thị chỉ cần query dữ liệu.

Thiết Kế Giao Diện Người Dùng (UI)

Dựa trên demo, chúng ta thiết kế UI đơn giản với Next.js:

Layout chung: Header với nút Connect Wallet, sidebar cho bộ lọc (giá, bộ sưu tập), main content cho danh sách NFT.
Trang chủ: Grid hiển thị NFT (hình ảnh, tên, giá, nút Buy Now).
Trang chi tiết NFT: Hiển thị metadata, nút Buy Now.
Profile: Tab “Owned” (NFT sở hữu) và “Listing” (NFT đang bán). Nút Sale, Update Price, Delist.
Form Sale: Input giá ADA, nút “List for Sale”.

Công cụ thiết kế:

Sử dụng Tailwind CSS cho styling.
Tích hợp MeshJS cho ví và giao dịch.

Mẫu UI cơ bản (code sẵn trên GitHub hoặc preview link trong video):

Trang /marketplace: Danh sách NFT.
Trang /profile: Quản lý NFT sở hữu và listing.

Demo Giao Diện Và Chức Năng

Giả sử bạn đã clone code từ GitHub và chạy npm run dev. Truy cập http://localhost:3000 trên testnet.

1. Hiển Thị Danh Sách NFT Và Mua

Trang chủ hiển thị NFT đang bán (query từ Blockfrost).
Nhấp vào NFT (ví dụ: XMR08), nhập giá mua (3 ADA).
Nhấn “Buy Now”: Tạo giao dịch, ký bằng ví, chờ confirm.
Kết quả: NFT xuất hiện trong ví (kiểm tra Eternl hoặc CardanoScan).

2. List NFT Để Bán

Chuyển sang tab “Profile” > “Owned”.
Chọn NFT (ví dụ: BKI001), nhấn “Sale”, nhập giá (1000 ADA).
Nhấn “List”: Tạo giao dịch gửi NFT vào smart contract.
Kết quả: NFT di chuyển sang tab “Listing” với giá 1000 ADA + phí.

3. Update Giá

Trong tab “Listing”, chọn NFT, nhấn “Update Price”, nhập giá mới (500 ADA).
Nhấn “Update”: Tạo giao dịch cập nhật giá.
Kết quả: Giá cập nhật thành 500 ADA (chờ confirm).

4. Delist NFT

Trong tab “Listing”, chọn NFT, nhấn “Delist”.
Nhấn “Delete”: Tạo giao dịch rút NFT về ví.
Kết quả: NFT quay về tab “Owned” (chờ confirm).

Lưu Ý Demo:

Sử dụng testnet với tADA và test NFT.
Chờ 10-20 giây cho giao dịch confirm.
Kiểm tra giao dịch trên Cardano Testnet Explorer.

Logic Smart Contract Cho Các Chức Năng

Smart contract (viết bằng Aiken) cần xử lý 4 chức năng chính:

List NFT:
- Input: NFT, giá ADA, địa chỉ người bán.
- Logic: Khóa NFT trong contract với datum chứa giá và chủ sở hữu.
- Output: NFT locked, emit event cho frontend query.
Update Price:
- Input: NFT ID, giá mới (chỉ chủ sở hữu).
- Logic: Kiểm tra chữ ký người bán, cập nhật datum giá.
- Redeemer: “update_price”.
Delist NFT:
- Input: NFT ID (chỉ chủ sở hữu).
- Logic: Rút NFT về ví người bán, xóa datum.
- Redeemer: “delist”.
Buy NFT:
- Input: NFT ID, ADA từ người mua.
- Logic: Kiểm tra ADA >= giá, chuyển NFT cho người mua, ADA cho người bán.
- Redeemer: “buy”.

Datum Structure (ví dụ):

{
  nft_id: String,
  price: Int,
  seller: Address,
  metadata: Map<String, String>
}

Test Smart Contract: Sử dụng Aiken test framework để kiểm tra các trường hợp (valid/invalid signer, insufficient funds).

Kế Hoạch Triển Khai

Development: Test trên testnet.
Production: Deploy smart contract qua Cardano CLI, frontend lên Vercel/Netlify.
Tối Ưu: Sử dụng IPFS cho metadata NFT, caching query với Redis.

Tài Liệu Tham Khảo

JPG.Store Documentation: Hướng dẫn tích hợp.
Cardano Developer Portal: Hướng dẫn smart contract.
MeshJS: Tích hợp ví và giao dịch.
Aiken Lang: Viết contract.

Kết Luận

Phân tích này cung cấp nền tảng để xây dựng NFT Marketplace trên Cardano. Với UI đơn giản và logic contract cơ bản, bạn có thể bắt đầu code ngay. Các video tiếp theo sẽ hướng dẫn viết contract và tích hợp. Nếu bạn có ý tưởng khác (ví dụ: DeFi app), có thể áp dụng tương tự. Cảm ơn bạn đã theo dõi!

Bài Tập

📝 Bài tập 1: Phân tích chức năng cơ bản của NFT Marketplace

Đề bài

Dựa trên nội dung bài giảng, hãy phân tích và mô tả 4 chức năng chính của một NFT Marketplace trên Cardano.

Yêu cầu

Liệt kê đầy đủ các chức năng cơ bản.
Giải thích ngắn gọn vai trò của từng chức năng trong hệ thống.
Phân biệt chức năng nào cần sử dụng smart contract, chức năng nào chỉ cần query dữ liệu.

Cách giải

Đọc lại phần mô tả về các chức năng chính trong marketplace (connect, list, update, delete, buy).
Xác định chức năng nào liên quan đến giao dịch on-chain.
Viết mô tả ngắn gọn (1–2 câu) cho mỗi chức năng.

Đáp án

Chức năng	Mô tả	Cần Smart Contract
Connect Wallet	Kết nối ví người dùng như Eternl hoặc Nami để xác thực danh tính.	❌
List NFT for Sale	Tạo giao dịch list NFT lên sàn cùng giá bán mong muốn.	✅
Update / Delist NFT	Cập nhật giá bán hoặc hủy niêm yết NFT.	✅
Buy NFT	Mua NFT từ người bán khác, tạo giao dịch chuyển quyền sở hữu.	✅
Show Listed NFTs	Hiển thị danh sách NFT đang bán bằng cách query dữ liệu.	❌

📝 Bài tập 2: Phân tích luồng giao dịch Mua NFT

Đề bài

Mô tả chi tiết luồng hoạt động (workflow) khi người dùng mua một NFT trên marketplace.

Yêu cầu

Viết mô tả từng bước từ khi người dùng chọn NFT đến khi giao dịch hoàn tất.
Ghi rõ vai trò của ví, smart contract, và blockchain trong quy trình.
Biểu diễn lại quy trình bằng sơ đồ hoặc bullet list.

Cách giải

Xác định các tác nhân: người mua, smart contract, blockchain.
Mô tả từng bước theo trình tự thời gian.
Chỉ ra dữ liệu nào được ghi nhận on-chain.

Đáp án

Người dùng chọn NFT muốn mua.
Nhấn “Buy Now” → tạo giao dịch.
Ví ký và gửi giao dịch đến blockchain.
Smart contract xử lý thanh toán, chuyển NFT sang ví người mua.
Giao dịch được xác nhận → NFT hiển thị trong ví mới.

📝 Bài tập 3: Thiết kế giao diện người dùng cho Marketplace

Đề bài

Thiết kế giao diện cơ bản (UI) cho NFT Marketplace bao gồm các phần chính.

Yêu cầu

Phác thảo layout (có thể bằng tay hoặc mô tả).
Nêu rõ các thành phần: danh sách NFT, trang chi tiết, hồ sơ người dùng.
Xác định nút và hành động tương ứng.

Cách giải

Phân tích giao diện mẫu trong video (ví dụ jgp.store).
Xác định các khu vực chính của UI.
Mô tả cách người dùng tương tác qua từng phần.

Đáp án

Cấu trúc gợi ý:

Trang chủ: Hiển thị danh sách các bộ sưu tập NFT.
Trang chi tiết NFT: Hình ảnh, mô tả, giá, nút “Buy Now”.
Trang Profile: Hiển thị NFT đang sở hữu, có nút “Sell”, “Update”, “Delist”.
Thanh điều hướng: Connect Wallet, My Profile, Marketplace.

📝 Bài tập 4: Phân tích Smart Contract cho Marketplace

Đề bài

Xác định 4 hàm chính cần có trong Smart Contract của NFT Marketplace và mô tả chức năng của từng hàm.

Yêu cầu

Đặt tên các hàm hợp lý (ví dụ: listNFT, buyNFT, …).
Giải thích ngắn gọn input, output và hành động on-chain của mỗi hàm.
Nêu rõ ai có quyền gọi mỗi hàm.

Cách giải

Dựa vào 4 chức năng chính đã học.
Mô tả vai trò của mỗi hàm trong quy trình giao dịch.
Viết bảng tóm tắt tên, input, output, người gọi.

Đáp án

Hàm	Input	Output	Người gọi	Mục đích
`listNFT()`	NFT ID, giá	Tạo list on-chain	Người bán	Đưa NFT lên sàn
`updatePrice()`	NFT ID, giá mới	Cập nhật dữ liệu	Người bán	Thay đổi giá NFT
`delistNFT()`	NFT ID	NFT về ví	Người bán	Hủy niêm yết
`buyNFT()`	NFT ID	NFT → buyer	Người mua	Mua NFT từ marketplace

📝 Bài tập 5: So sánh NFT Marketplace thực tế

Đề bài

So sánh hai nền tảng JPG.store và cNFT.io về các đặc điểm vận hành và trải nghiệm người dùng.

Yêu cầu

So sánh về UI, tính năng, hiệu suất, và độ phổ biến.
Nêu ra điểm mạnh và điểm yếu của từng nền tảng.
Gợi ý cải tiến nếu bạn xây dựng marketplace của riêng mình.

Cách giải

Truy cập hai trang web và quan sát trực tiếp.
Ghi nhận điểm khác biệt trong giao diện và tốc độ phản hồi.
Đưa ra nhận xét và đề xuất của bản thân.

Đáp án

Tiêu chí	JPG.store	cNFT.io
Giao diện	Hiện đại, dễ dùng	Đơn giản, truyền thống
Tính năng	Có buy/sell, offer, auction	Chỉ có buy/sell cơ bản
Phổ biến	Rất cao (90% giao dịch Cardano NFT)	Thấp hơn
Hiệu suất	Nhanh, ổn định	Chậm hơn
Gợi ý cải tiến	Thêm phần community và analytics	Cải thiện UI và tốc độ

✅ Ghi chú cuối: Các bài tập này giúp học viên nắm vững nền tảng lý thuyết và thực hành tư duy thiết kế NFT Marketplace trước khi bước sang phần UI development và Smart Contract implementation trong các video sau.

Link Source Code: https://github.com/htlabs-xyz/Cardano-App-Development-Course/tree/main/Code/Video_09

Link Bài Tập: https://github.com/htlabs-xyz/Cardano-App-Development-Course/blob/main/Exercises/Video_09.md