1. Overview

Thông tin chung

Sau khi bạn viết và deploy một smart contract thì việc tiếp theo là xây dựng một bộ giao diện để người dùng có thể tương tác trực quan, đơn giản thay vì phải lần mò tương tác với smart contract function.

Hiện tại, React (và các framework xây dựng trên React) là phổ biến nhất trong ngành Web3. Nhờ vào số lượng thư viện và hệ sinh thái mở của React mà gần như các framework khác như Vue hoặc Angular ít được sử dụng.

Giao diện tương tác với smart contract như thế nào

Frontend UI có thể tương tác được với smart contract nhờ việc kết nối vào 1 blockchain node RPC. RPC là viết tắt của Remote Procedure Call, nôm na là giao thức giúp client (ở đây có nghĩa là giao diện) có thể kết nối với mạng blockchain để yêu cầu dữ liệu hoặc thực thi các hành động như gửi giao dịch, tương tác với smart contract.

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

2. Structure of a frontend project

We will use the technical stack to build the following frontend:

Below is the layout of a sample project to build UI for FundMe smart contract in the Solidity section.