以太坊誓言Dapp開發

基於React開發的誓言Dapp

技術: 前端React框架，geth搭建的本地鏈,web3js,智能合約

具體實現目標

1.編寫合約，部署在本地鏈上。（此操作可以在remix-ide上實現）
別忘了拷貝合約abi和合約地址

pragma solidity ^0.5.0;

contract Words {

    struct Item {
        string what;
        address who;
        uint when ;
    }

    Item[] private allWords;

    function save(string memory s, uint t) public {
        allWords.push(Item({
            what: s,
            who: msg.sender,
            when: t
        }));
    }

    function getSize() public view returns (uint){
        return allWords.length;
    }

    function getRandom(uint random) public view returns (string memory, address, uint) {
        if(allWords.length==0){
            return ("", msg.sender, 0);
        }else{
            Item storage result = allWords[random];
            return (result.what, result.who, result.when);
        }
    }
}

2.## 詳解react的js文件

 render() {
    return (
      <div className="App">
        <p>當前誓言總數：{this.state.size}</p>
        <p id='abc'></p>
        <header className="App-header"></header>
        <div>
          <input id="greeting" type="text"></input>
          <button type="submit" onClick={this.xxxxx.bind(this)}>查詢誓言</button>
        </div>
        <br></br>
        <br></br>
        <div>
          <textarea rows="3" cols="20" id="wordArea"></textarea>
          <button type="submit" onClick={this.xxx.bind(this)}>添加誓言</button>
        </div>
      </div>
    );
  }

顯示誓言總條數：
調用合約中的getsize函數，將返回值設置爲state：size

class AppShiYan extends Component {
  componentWillMount() {
    this.LoadBlockChainData();
  }
async LoadBlockChainData() {
    const Web3 = require('web3'); //記得npm install web3js
    const web3 = new Web3(new Web3.providers.WebsocketProvider("ws://localhost:8546")); //啓動本地鏈，連接
    var contractAbi =合約ABI
    var contractAddress = 合約地址
    var contract = new web3.eth.Contract(contractAbi, contractAddress);
    console.log(contract);
    const { getSize } = contract.methods; //結構函數
    const count = await getSize().call()
    this.setState({ size: count });
  }
  constructor(props) {
    super(props);
    this.state = { size: '' }
  }

添加誓言

xxx() {
    const Web3 = require('web3');
    if (window.ethereum)
      // use MetaMask's provider
      var web3 = new Web3(window.ethereum);
    window.ethereum.enable(); // get permission to access accounts
    var contractAbi =合約ABI
    var contractAddress = 合約地址
    var contract = new web3.eth.Contract(contractAbi, contractAddress);
    const msg = document.getElementById("wordArea").value; //獲取內容
    let timestamp = new Date().getTime(); //獲取時間
    web3.eth.getAccounts().then(function (accounts) {
      contract.methods.save(msg, parseInt(timestamp / 1000)).send({ from: accounts[0] });
      console.log("OK!---------")//調用合約save函數添加誓言
    });
  }

查詢誓言

 xxxxx() {
    function formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    function formatTime(timestamp) {
      let date = new Date(Number(timestamp * 1000))
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      let fDate = [year, month, day,].map(formatNumber)
      return fDate[0] + '年' + fDate[1] + '月' + fDate[2] + '日' + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    const Web3 = require('web3');
    const web3 = new Web3(new Web3.providers.WebsocketProvider("ws://localhost:8546"));
    var contractAbi =合約abi
    var contractAddress = 合約地址
    var contract = new web3.eth.Contract(contractAbi, contractAddress);
    contract.methods.getRandom($("#greeting").val()).call(function (err, result) {
      console.log(err, result);
      const msgEl = document.getElementById("abc")
      const msg = "內容:" + result[0]
        + " <br /> 來源:" + result[1]
        + " <br /> 時間:" + formatTime(result[2])
        + "<br /> id:" + $("#greeting").val()
      msgEl.innerHTML = msg
    });
  }