[區塊鏈] 利用Truffle框架建構一個簡單的以太坊應用程式 — Part 2. Truffle box — react

繼上一篇Part 1. 前置作業，將環境設定好之後，我們接下來將利用Truffle框架來建構我們的應用程式。

Part 2: Truffle box — react

▼先利用truffle box的框架「react」來配置我們的餐廳投票專案。

$ mkdir RestaurantsRating
$ cd RestaurantsRating
$ truffle unbox react

▼truffle unbox需要一段時間，專案配置完畢之後，檔案結構如下，node_modules裡的相依套件也都安裝好囉！

▼點選/src/App.js查看一下檔案內容。在App內設有一變數storageValue，預設值為0，程式一開始啟動成功的話，就會將storageValue設定為5，所以如果我們在頁面看到值為5的話，就表示合約執行成功囉！

// Get accounts.
    this.state.web3.eth.getAccounts((error, accounts) => {
      simpleStorage.deployed().then((instance) => {
        simpleStorageInstance = instance
// Stores a given value, 5 by default.
        return simpleStorageInstance.set(5, {from: accounts[0]})
      }).then((result) => {
        // Get the value from the contract to prove it worked.
        return simpleStorageInstance.get.call(accounts[0])
      }).then((result) => {
        // Update state with the result.
        return this.setState({ storageValue: result.c[0] })
      })
    })

▼接下來設定truffle.js，我們使用testrpc做測試，還記得在Part 1中testrpc的「Listening on localhost: 8545」，因此將port設定為8545。

module.exports = {
  networks:{
    development:{
      host:"localhost",
      port:8545,
      network_id:'*'
    }
  }
};

設定完畢，可以開始我們的測試旅程。

▼開啟終端機畫面，將目錄切換到我們的RestaurantsRating。將合約部署到我們的testrpc上。
- truffle compile
- truffle migrate

$ cd RestaurantsRating
$ truffle compile
Compiling ./contracts/Migrations.sol...
Compiling ./contracts/SimpleStorage.sol...
Writing artifacts to ./build/contracts
$ truffle migrate
Using network 'development'.
Running migration: 1_initial_migration.js
  Deploying Migrations...
  ... 0xd375750ae7bb2afda9646f6cd862cba8c9d4024adb7e8dcd5f0838377051a3c2
  Migrations: 0x6aaa366574c1ebc1633e318583d631a9d0dafd97
Saving successful migration to network...
  ... 0xeeceb4ee2d581de23c6a3c303993681703e69b80de8c91cea4e9638ac92f18a0
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying SimpleStorage...
  ... 0x581e0ef747650c1032a5b7460f3ce6e27ca11e0201938ef00a3a43fe27dc4ea3
  SimpleStorage: 0xd56ba4bbf85b81090fbba0d9b612217a0e41044c
Saving successful migration to network...
  ... 0x9489c6bc48e4a033ddc165d82a4502b10c7035afe80c77b73719e8d8185ae56f
Saving artifacts...
$

▼再新增一個終端機頁面，啟動我們RestaurantsRating專案

$ cd RestaurantsRating
$ npm start

▼網頁會自動導到http://localhost:3000，一開始的時候顯示「The stored value is : 0」，MetaMask會自動跳出有交易待確認的對話框，因為網頁設定一開始就呼叫合約內的function：return simpleStorageInstance.set(5,{from: accounts[0]}) 。按下SUBMIT。

▼發現了嗎？The stored value is: 5. 修改成功！