Xây dựng ứng dụng phi tập trung (Dapp) với Reacjs

1275

Mở đầu

Đầu tiên chúng ta sẽ xây dựng một ứng dụng với phần smart contract đã được xây dựng ở bài trên

Phía frontend sẽ sử dụng create-react-app để init project:

Nếu chưa có gói create-react-app thì hãy install bằng lệnh sau:

Sau khi đã Happy Hacking! thì chúng ta sẽ config lại một chút các package, mặc dù quy mô của app demo này không cần thiết phải dùng đến redux vì không chứa quá nhiều components tuy nhiên để hướng dẫn cho các app phức tạp sau này, mình sẽ tạm ứng dụng thêm redux để quản lý các state.

=> Do đó yêu cầu người đọc cần đã có kiến thức cơ bản về redux

Thêm các dependencies :

Thêm 3 folder actionreducers và store vào project :

Tiếp đó là thêm cả phần contracts trong folder build của smart contract sau khi được migrate vào phần src để có thể dễ dàng tương tác hơn

Triển khai ứng dụng

Actions

Đầu tiên sẽ bắt đầu từ folder actions,

Đầu tiên sẽ là action để yêu cầu kết nối với metamask để lấy web3. Để gọi pop-up metamask thì trước hết các bạn add thêm function getWeb3() vào folder utils/getWeb3.js :

Viết function đầu tiên web3Connect():

Tiếp đó sẽ là action Init các contract:

Function này sẽ lạ hơn một chút vì sẽ cần đến file mà chúng ta đã deployed trong phần contract. Công việc của chúng ta là add them folder contract từ folder build phía trên. Như đã nói thì chỉ cần 2 thứ là ABI và Address là có thể tạo ra instance tương tác với blockchain

Cuối cùng thêm 2 action sendCoin và getBalance:

 

Đủ các action và giờ sẽ tiếp tục xây dựng reducer

Reducer

Như các action đã được xây dựng phía trên, chúng ta sẽ xây dựng được các initialState và action type tương ứng

Store

Xây dựng phần store, mình sẽ sử dụng thunk cho phần Middleware

Cuối cùng để cung cấp store trong mọi component của ứng dụng, ta cần wrap chúng trong Provider

Như vậy đã hoàn thiện phần quản lý các State, bây giờ sẽ đến phần xây dựng giao diện và ứng dụng của app

App

Với tính chất một bài cơ bản thì mình sẽ demo phần tương tác với Blockchain với 2 phương thức đơn giản:

  • Tạo transaction: Thông qua hàm sendCoin đã được xây dựng ở phần actions
  • Đọc thông tin: Đọc dữ liệu về balance của user thông qua hàm getBalance

Đầu tiên chúng ta sẽ bắt user đằng nhập metamask, do đó sẽ gọi function web3Connect ngay khi component được mount . Để tối ưu lượng code thì mình sẽ sử dụng 2 Hook :

  • useEffect : Tương tự như tác dụng componentDidMount nhưng dùng cho function component
  • useDispatch : Thay cho việc chúng ta sử dụng mapDispatchToProps

Thêm vào App.js :

Đến đây thì khi vào trang sẽ tự động bán ra popup metamask yêu cầu đăng nhập nếu user chưa đăng nhập và sẽ tự động lấy địa chỉ account

Tiếp theo hiển thị ra balance và account, thêm một chút Hook useSelector để lấy giá trị trực tiếp từ store:

Và để hoàn thiện phần cuối cùng chúng ta sẽ tạo thêm một form nho nhỏ để sendCoin, gồm 2 giá trị receiver và amount bằng cách sử dụng useState :

Kết quả

Cuối cùng thì kết quả sẽ có dạng như sau :

Giao diện khá basic nhưng về cơ bản các function đã chạy khá ổn. Qua bài trên mình đã hướng dẫn khởi tạo một Dapp cơ bản với Reactjs , bài tiếp theo mình sẽ hướng dẫn xây dựng trên Vuejs và quản lý các state với Vuex

TopDev via Viblo

SHARE
Hi, you can call me Phương. I'm a developer-to-be so hold on, maybe my articles may help.