Giới thiệu

1. Tổng quan

Thông tin chung

Sau khi viết và triển khai hợp đồng thông minh, bước tiếp theo là xây dựng giao diện để người dùng có thể tương tác một cách trực quan và đơn giản thay vì phải loay hoay tìm cách tương tác với chức năng của hợp đồng thông minh.

Hiện nay, React (và các framework được xây dựng trên nền tảng React) là phổ biến nhất trong ngành công nghiệp Web3. Nhờ số lượng thư viện và hệ sinh thái mở của React, các framework khác như Vue hay Angular hiếm khi được sử dụng.

Giao diện tương tác với hợp đồng thông minh như thế nào?

Giao diện người dùng (UI) phía trước có thể tương tác với các hợp đồng thông minh bằng cách kết nối với một nút blockchain RPC. RPC là viết tắt của Remote Procedure Call, về cơ bản là một giao thức giúp các máy khách (ở đây có nghĩa là giao diện) kết nối với mạng blockchain để yêu cầu dữ liệu hoặc thực hiện các hành động như gửi giao dịch, tương tác với các hợp đồng thông minh.

Bạn có thể sử dụng một node blockchain do chính bạn cài đặt và vận hành trên máy chủ của mình hoặc sử dụng dịch vụ Node-as-a-service (các nhà cung cấp dịch vụ Node). Nếu nhu cầu kết nối của bạn nhỏ, dịch vụ Node-as-a-service sẽ giúp bạn tiết kiệm được rất nhiều chi phí.

2. Cấu trúc của một dự án giao diện người dùng (frontend).

Chúng tôi sẽ sử dụng bộ công nghệ này để xây dựng giao diện người dùng (frontend) như sau:

Next.JS - Khung phát triển ứng dụng React
TailwindCSS - Thư viện lớp tiện ích dành cho CSS
Shadcn UI - Thư viện thành phần React dựa trên Tailwind
Wagmi v2 - Thư viện hook React để tương tác với blockchain
WalletConnect - Giao thức truyền thông để kết nối DApp và Wallet
Rainbowkit - Thư viện thành phần để kết nối ví với DApp
React Query Tanstack - Thư viện để thực thi các truy vấn cho React

Dưới đây là bố cục của một dự án mẫu để xây dựng giao diện người dùng cho hợp đồng thông minh FundMe trong phần Solidity.

. ├── README.md ├── abi │ └── FundMe.json ├── app │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── providers.tsx ├── components │ ├── abi.ts │ ├── fund-me-balance.tsx │ ├── fund.tsx │ ├── my-fund.tsx │ └── ui ├── components.json ├── lib │ └── utils.ts ├── next-env.d.ts ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── next.svg │ └── vercel.svg ├── tailwind.config.ts └── tsconfig.json

Mục tiêu

Sau khi hoàn thành bài học này, bạn sẽ hiểu: