如何利用Truffle React框架構建完整的智能合約

如何利用Truffle React框架構建完整的智能合約

使用solidity的truffle框架開發智能合約，前端使用react框架，最終完成智能合約從前端到後端，從開發到部署的完整流程。

1. 版本需求

• Truffle v5.0.28 (core: 5.0.28)
• Solidity v0.5.0 (solc-js)
• Node v8.11.2
• Web3.js v1.0.0-beta.37

2. 項目初始化

1. mkdir -p truffle
2. cd truffle
3. truffle unbox react

3. 合約編寫、編譯和部署

1. 將Github truffle-react 目錄下的文件拷貝出來。
2. copy ./source/App.js to "./client/src/App.js"
3. copy ./source/truffle-config.js to ./
4. copy ./source/Migration.sol ./source/SimpleStorage.sol to "./contracts"
5. copy ./source/1_initial_migration.js ./source/2_deploy_contracts.js to "./migrations"
6. truffle develop (port: 8545)
7. compile
8. migrate (--reset)

4. 啓動項目，查看效果

1. cd client && npm start
2. config metamask wallet to private chain on http://localhost:8545
3. visit http://localhost:3000
4. input number xxx in input box, then click "修改" button
5. in wallet , click comfirm button
6. in mainpage ,the The stored value is: xxx(you enter number above)

5. 總結

一個完整的覆蓋前後端的DAPP實際上就兩點，跟傳統互聯網項目的前後端類似。

合約編寫、部署前端調用基於以太坊開發DAPP實際上比較簡單，重點是在合約的邏輯性、安全性上。從這也可以看出來以太坊生態的強大和完整，便捷完備的開發語言、工具，確實是目前最牛的項目之一。