SimpleChain 開發Dapp實例分析

本篇文章給大家分享的是有關SimpleChain 開發Dapp實例分析，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

SimpleChian技術社區最近準備舉辦開發挑戰賽，很多社區老鐵都躍躍欲試想基于SimpleChain開發Dapp應用。鑒于此種情況，本期我們就來聊一下如何基于SimpleChain開發Dapp。 下面是開發Dapp開發的詳細過程，流程梳理如下：

環境準備

除了Mac電腦，還需要安裝SimpleChain開發的相關環境。環境如下:

nodejs truffle solidity testrpc

另外，教程中還會用到webpack，安裝教程網上也有很多。這部分如果不熟悉的話請自行查閱學習下。

編寫智能合約

前面我們已經安裝了truffle ,我們只需要在 電腦的項目目錄下新建conference目錄，進入目錄執行truffle init，就可以使用truffle這個Dapp前端框架來初始化自己的項目。執行完后建立如下的子目錄和文件:

contracts/: 智能合約存放的目錄，默認情況下已經幫你創建 Migrations.sol合約。 migrations/: 存放部署腳本 test/: 存放測試腳本 truffle.js: truffle的配置文件

修改truffle.js文件，改成如下:

module.exports = {
  networks: {
        development: {
            host: "localhost",
            port: 8545,
            network_id: "*" // 匹配任何network id
         }
    }
};

上面的是設置我們稍后要部署智能合約的位置, 否則會報網絡錯誤。

打開電腦的一個終端，輸入testrpc運行測試節點。testrpc是一個完整的在內存中的區塊鏈測試環境，啟動 testrpc 經后，會默認創建10個帳號，Available Accounts是帳號列表，Private Keys是相對應的帳號密鑰。如下圖：

進入contracts目錄，此目錄是存放合約代碼的地方。我們可以使用編程工具（Viscode）編寫測試合約代碼。我這里貼出的是投票的智能合約

pragma solidity ^0.4.2;

contract Migrations {
  address public owner;
  uint public last_completed_migration;

  modifier restricted() {
    if (msg.sender == owner) _;
  }

  function Migrations() {
    owner = msg.sender;
  }

  function setCompleted(uint completed) restricted {
    last_completed_migration = completed;
  }

  function upgrade(address new_address) restricted {
    Migrations upgraded = Migrations(new_address);
    upgraded.setCompleted(last_completed_migration);
  }
}

合約內容很簡單,是一個針對鏈上投票的策略。用戶可以鏈上投票，保證投票的真實性和客觀性。

編譯部署智能合約

修改migrations下的1_initial_migration.js文件，改成如下：

//var Migrations = artifacts.require("./Migrations.sol");
var Conference = artifacts.require("./Voting.sol");

module.exports = function(deployer) {
  //deployer.deploy(Migrations);
  deployer.deploy(Conference);
};

編譯：

$ sudo truffle compile --compile-all

注意看下有無報錯：

Truffle 僅默認編譯自上次編譯后被修改過的文件，來減少不必要的編譯。如果你想編譯全部文件，可以使用--compile-all選項。

然后會多出一個build目錄，該目錄下的文件都不要做任何的修改。

部署:

$ sudo truffle migrate --reset

這個命令會執行所有migrations目錄下的js文件。如果之前執行過truffle migrate命令，再次執行，只會部署新的js文件，如果沒有新的js文件，不會起任何作用。如果使用--reset參數，則會重新的執行所有腳本的部署。

測試下，在test目錄新增一個conference.js測試文件，

var Conference = artifacts.require("./Voting.sol");

contract('Conference', function(accounts) {
  console.log("start testing");
    //console.log(accounts);
    var owner_account = accounts[0];
  var sender_account = accounts[1];


  it("Initial conference settings should match", function(done) {
    
    Conference.new({from: owner_account}).then(
        function(conference) {
            conference.quota.call().then(
                function(quota) { 
                    assert.equal(quota, 100, "Quota doesn't match!"); 
            }).then(
                function() { 
                    return conference.numRegistrants.call(); 
            }).then(
                function(num) { 
                    assert.equal(num, 0, "Registrants doesn't match!");
                    return conference.organizer.call();
            }).then(
                function(organizer) { 
                    assert.equal(organizer, owner_account, "Owner doesn't match!");
                    done();
            }).catch(done);
    }).catch(done);
  });

這是一個測試用例，運行truffle test查看測試結果。

$ truffle test

Using network 'development'.

start testing

  Contract: Conference
    ? Initial conference settings should match (191ms)
    ? Should update quota (174ms)
    ? Should let you buy a ticket (717ms)
    ? Should issue a refund by owner only (714ms)


  4 passing (2s)

編寫web應用

在conference目錄下執行npm init，然后一路回車，會生成一個名為package.json的文件，編輯這個文件，在scripts部分增加兩個命令，最終如下:

{ "name": "conference", "version": "1.0.0", "description": "", "main": "truffle-config.js", "directories": { "test": "test" }, "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" }, "author": "", "license": "ISC" }

package.json文件定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

然后在conference目錄下新建app目錄，并創建index.html文件，如下:

<!DOCTYPE html>
<html>
<head>
  <title>SimpleChain 投票工具</title>
  <link href='https://fonts.loli.net/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="./app.js"></script>
</head>
<body>
  <h2>SimpleChain 投票工具</h2>
  <div class="section">
    Contract deployed at: <div id="confAddress"></div>
  </div>
  <div class="section">
    Organizer: <input type="text" id="confOrganizer" />
  </div>
  <div class="section">
    Quota: <input type="text" id="confQuota" />
      <button id="changeQuota">Change</button>
      <span id="changeQuotaResult"></span>
  </div>
  <div class="section">
    Registrants: <span id="numRegistrants">0</span>
  </div>

  <hr/>

</body>
</html>

然后在app目錄下新建javascripts目錄和styleheets目錄，分別存放js腳本文件和css樣式文件。真正和合約交互的就是腳本文件。

腳本文件名為app.js，部分代碼如下:

import "../stylesheets/app.css";
import {  default as Web3 } from 'web3';
import {  default as contract } from 'truffle-contract';

import conference_artifacts from '../../build/contracts/Conference.json'

var accounts, sim;
var Conference = contract(conference_artifacts);



window.addEventListener('load', function() {
    //alert("aaaaa");
    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof web3 !== 'undefined') {
        console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 MetaCoin, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")
        // Use Mist/MetaMask's provider
        window.web3 = new Web3(web3.currentProvider);
    } else {
        console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");
        // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
        window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    }

    Conference.setProvider(web3.currentProvider);
    App.start();

    $("#changeQuota").click(function() {
        var newquota = $("#confQuota").val();
        App.changeQuota(newquota);
    });

    // Wire up the UI elements
});

這里主要就是用JS加wweb3 API調用合約的函數。到這里為止，web部分基本已經準備好了，我們只需要用webpack打包部署即可。webpack打包還需要一個配置文件，名為webpack.config.js，這個文件是告訴webpack打包的規則，涉及webpack的用法，可以自己查找。

打包部署web應用

打包部署需要安裝webpack和相關的組件，安裝的方式有全局安裝和局部安裝兩種。所謂的局部安裝，是指組件都是安裝在項目的目錄下(conference/node_modules)。我這里采用的就是局部安裝。根據我們項目的實際情況，需要安裝以下組件，

npm install --save-dev webpack@3.0.0
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install html-loader --save-dev
npm install --save-dev webpack-dev-server@2.11.0
npm install html-webpack-plugin --save-dev
npm install truffle-contract --save-dev

npm install --save-dev style-loader css-loader
環境裝好，可以打包了。

$ sudo npm run start

> conference@1.0.0 start /home/pony/ethereum/conference
> webpack

Hash: ec8b764f75c05b477d9d
Version: webpack 3.0.0
Time: 2686ms
       Asset       Size  Chunks                    Chunk Names
   bundle.js    3.36 MB       0  [emitted]  [big]  main
./index.html  740 bytes          [emitted]         
  [10] (webpack)/buildin/global.js 509 bytes {0} [built]
  [16] (webpack)/buildin/module.js 517 bytes {0} [built]
  [47] ./app/javascripts/app.js 3.85 kB {0} [built]
  [48] ./app/stylesheets/app.css 1.08 kB {0} [built]
  [49] ./node_modules/css-loader!./app/stylesheets/app.css 413 bytes {0} [built]
 [175] ./build/contracts/Conference.json 71.1 kB {0} [built]
    + 170 hidden modules
Child html-webpack-plugin for "index.html":
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html 706 bytes {0} [built]

沒報錯的話，進入build目錄可以看到bundle.js和index.html兩個文件，這兩個就是最終打包好的網頁文件。然后部署:

$ sudo npm run server

> conference@1.0.0 server /home/pony/ethereum/conference
> webpack-dev-server --open

Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./build
404s will fallback to /index.html
Hash: ecae3662137376f80de0
Version: webpack 3.0.0

這樣相當于運行了一個小型的nodejs服務器，我們可以在瀏覽器輸入 http://localhost:8080/ 在頁面上看到效果。clipboard.png 可以看到合約的發布地址和會議組織者地址(msg.sender)都已經成功的顯示出來了，點擊change按鈕還可以改變quota的值。

以上就是SimpleChain 開發Dapp實例分析，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。