從零構建、部署去中心化Voting Dapp

mikasa 發布于2019-06-28 16:03 / 605人閱讀

摘要：查看文件內容這個文件主要是封裝了一個的供我們直接使用，可以從直接獲取到對象供文件中使用。

如何編寫智能合約（Smart Contract）- 從零構建和部署去中心化投票App，decentralization Voting Dapp

孔壹學院：國內區塊鏈職業教育領先品牌

作者：黎躍春，區塊鏈、高可用架構工程師
微信：liyc1215 QQ群：348924182 博客：http://liyuechun.org

課程目標

了解區塊鏈智能合約

學會搭建智能合約開發環境

學會如何編譯智能合約

學會如何將智能合約部署到區塊鏈

學會如何通過WebApp和智能合約盡心互動

掌握DApp（去中心化App）的整個開發部署流程

掌握去中心化在實戰產品中應用的重大意義

項目效果圖

編輯器選擇

理論上講任何編輯器都可以編寫Solidity合約代碼，比如：WebStorm，VSCode，Sublime，等等。我選擇的是Atom，沒有任何理由，因為Atom輕量并且界面漂亮。

移步https://atom.io/地址，下載安裝Atom。

autocomplete-solidity代碼自動補齊

linter-solium、linter-solidity代碼錯誤檢查

language-ethereum支持Solidity代碼高亮以及Solidity代碼片段

安裝所需工具

首先開發機上必須裝好Node.js，再使用以下命令安裝所需的工具：

$ npm install -g ethereumjs-testrpc truffle

liyuechun:~ yuechunli$ npm install -g ethereumjs-testrpc truffle
/usr/local/bin/testrpc -> /usr/local/lib/node_modules/ethereumjs-testrpc/build/cli.node.js
/usr/local/bin/truffle -> /usr/local/lib/node_modules/truffle/build/cli.bundled.js
+ truffle@3.4.9
+ ethereumjs-testrpc@4.1.3
added 1 package and updated 7 packages in 76.132s
liyuechun:~ yuechunli$

創建項目

/Users/liyuechun/Desktop/1012/Voting
liyuechun:Voting yuechunli$ ls
liyuechun:Voting yuechunli$ pwd
/Users/liyuechun/Desktop/1012/Voting
liyuechun:Voting yuechunli$ truffle unbox react-box
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!

Commands:

  Compile:              truffle compile
  Migrate:              truffle migrate
  Test contracts:       truffle test
  Test dapp:            npm test
  Run dev server:       npm run start
  Build for production: npm run build
liyuechun:Voting yuechunli$

項目結構

contracts：編寫智能合約的文件夾，所有的智能合約文件都放置在這里

migrations：部署合約配置的文件夾

src：基于React的Web端源碼

test：智能合約測試用例文件夾

編寫投票Dapp智能合約

在contracts文件夾下創建Voting.sol文件，將下面的代碼拷貝到文件中。

pragma solidity ^0.4.4;

contract Voting {

  // liyuechun -> 10
  // xietingfeng -> 5
  // liudehua -> 20
  mapping (bytes32 => uint8) public votesReceived;


  // 存儲候選人名字的數組
  bytes32[] public candidateList;


  // 構造函數 初始化候選人名單
  function Voting(bytes32[] candidateNames) {

    candidateList = candidateNames;
  }

  // 查詢某個候選人的總票數
  function totalVotesFor(bytes32 candidate)  constant returns (uint8) {
    require(validCandidate(candidate) == true);
    // 或者
    // assert(validCandidate(candidate) == true);
    return votesReceived[candidate];
  }

  // 為某個候選人投票
  function voteForCandidate(bytes32 candidate) {
    assert(validCandidate(candidate) == true);
    votesReceived[candidate] += 1;
  }

  // 檢索投票的姓名是不是候選人的名字
  function validCandidate(bytes32 candidate) constant returns (bool) {
    for(uint i = 0; i < candidateList.length; i++) {
      if (candidateList[i] == candidate) {
        return true;
      }
    }
    return false;
  }
}

通過remix + metamask部署合約到Kovan Test Net

在Google瀏覽器里面安裝MetaMask插件

打開https://remix.ethereum.org將合約代碼拷貝到里面

確保MetaMask賬號處于等于狀態，并且有一定的以太幣支付給礦工。

確保Environment是Injected Web3，如果切換不過來，關掉瀏覽器重新啟動

在create函數中輸入一個數組，數組里面的內容為候選人名單

點擊create按鈕，會彈出MetaMask界面讓你確認，確認提交，過一會兒，合約就部署成功

可以測試給某個候選人投票，查詢某個候選人的票數

拷貝合約地址

0xd3f33a2e553b363b432d7f81f721a2a6202ecc67

編譯合約

liyuechun:Voting yuechunli$ truffle compile
Compiling ./contracts/Migrations.sol...
Compiling ./contracts/SimpleStorage.sol...
Compiling ./contracts/Voting.sol...
Writing artifacts to ./build/contracts

liyuechun:Voting yuechunli$

編譯完合約以后在build/contracts文件夾下面會有一個Voting.json的abi文件。

查看Voting.json文件內容

{
  "contract_name": "Voting",
  "abi": [
    {
      "constant": true,
      "inputs": [
        {
          "name": "candidate",
          "type": "bytes32"
        }
      ],
      "name": "totalVotesFor",
      "outputs": [
        {
          "name": "",
          "type": "uint8"
        }
      ],
      "payable": false,
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [
        {
          "name": "candidate",
          "type": "bytes32"
        }
      ],
      "name": "validCandidate",
      "outputs": [
        {
          "name": "",
          "type": "bool"
        }
      ],
      "payable": false,
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [
        {
          "name": "",
          "type": "bytes32"
        }
      ],
      "name": "votesReceived",
      "outputs": [
        {
          "name": "",
          "type": "uint8"
        }
      ],
      "payable": false,
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [
        {
          "name": "",
          "type": "uint256"
        }
      ],
      "name": "candidateList",
      "outputs": [
        {
          "name": "",
          "type": "bytes32"
        }
      ],
      "payable": false,
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [
        {
          "name": "candidate",
          "type": "bytes32"
        }
      ],
      "name": "voteForCandidate",
      "outputs": [],
      "payable": false,
      "type": "function"
    },
    {
      "inputs": [
        {
          "name": "candidateNames",
          "type": "bytes32[]"
        }
      ],
      "payable": false,
      "type": "constructor"
    }
  ],
  "unlinked_binary": "0x6060604052341561000f57600080fd5b6040516103113803806103118339810160405280805190910190505b600181805161003e929160200190610046565b505b506100b5565b828054828255906000526020600020908101928215610083579160200282015b828111156100835782518255602090920191600190910190610066565b5b50610090929150610094565b5090565b6100b291905b80821115610090576000815560010161009a565b5090565b90565b61024d806100c46000396000f300606060405263ffffffff7c01000000000000000000000000000000000000000000000000000000006000350416632f265cf78114610069578063392e6678146100955780637021939f146100bf578063b13c744b146100eb578063cc9ab26714610113575b600080fd5b341561007457600080fd5b61007f60043561012b565b60405160ff909116815260200160405180910390f35b34156100a057600080fd5b6100ab60043561015d565b604051901515815260200160405180910390f35b34156100ca57600080fd5b61007f6004356101af565b60405160ff909116815260200160405180910390f35b34156100f657600080fd5b6101016004356101c4565b60405190815260200160405180910390f35b341561011e57600080fd5b6101296004356101e7565b005b60006101368261015d565b151560011461014457600080fd5b5060008181526020819052604090205460ff165b919050565b6000805b6001548110156101a457600180548491908390811061017c57fe5b906000526020600020900160005b5054141561019b57600191506101a9565b5b600101610161565b600091505b50919050565b60006020819052908152604090205460ff1681565b60018054829081106101d257fe5b906000526020600020900160005b5054905081565b6101f08161015d565b15156001146101fb57fe5b6000818152602081905260409020805460ff8082166001011660ff199091161790555b505600a165627a7a723058206783a7ff47eae16f18011a9db2a3cc983350b779bf3181b7623c18d4bce363180029",
  "networks": {},
  "schema_version": "0.0.5",
  "updated_at": 1507806214330
}

這個文件是編譯后的abi文件，待會兒需要將這個文件的json導入到App.json中。

查看src/utils/getWeb3.js文件內容

import Web3 from "web3"

let getWeb3 = new Promise(function(resolve, reject) {
  // Wait for loading completion to avoid race conditions with web3 injection timing.
  window.addEventListener("load", function() {
    var results
    var web3 = window.web3

    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof web3 !== "undefined") {
      // Use Mist/MetaMask"s provider.
      web3 = new Web3(web3.currentProvider)

      results = {
        web3: web3
      }

      console.log("Injected web3 detected.");

      resolve(results)
    } else {
      // Fallback to localhost if no web3 injection.
      var provider = new Web3.providers.HttpProvider("http://localhost:8545")

      web3 = new Web3(provider)

      results = {
        web3: web3
      }

      console.log("No web3 instance injected, using Local web3.");

      resolve(results)
    }
  })
})

export default getWeb3

這個文件主要是封裝了一個getWeb3的promiss供我們直接使用，可以從getWeb3直接獲取到web3對象供App.js文件中使用。

修改app.js前端代碼和合約進行互動

import React, { Component } from "react"
import VotingContract from "../build/contracts/Voting.json"
import getWeb3 from "./utils/getWeb3"

import "./css/oswald.css"
import "./css/open-sans.css"
import "./css/pure-min.css"
import "./App.css"


const contractAddress = "0xd3f33a2e553b363b432d7f81f721a2a6202ecc67";
var votingContractInstance;


var _modifyVotingCount = (candidates,i,votingCount) => {

    console.log("---------");
    console.log(candidates);
    console.log(i);
    console.log(votingCount);

    let obj = candidates[i];
    obj.votingCount = votingCount;
    return candidates;
}


class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      candidates: [
                    {
                      "name": "Rama",
                      "id": 100,
                      "votingCount": 0
                    },
                    {
                      "name": "Nick",
                      "id": 101,
                      "votingCount": 0
                    },
                    {
                      "name": "Jose",
                      "id": 102,
                      "votingCount": 0
                    },
                    {
                      "name": "liyuechun",
                      "id": 103,
                      "votingCount": 0
                    }
                  ],
      candidatesVoteCount: ["0","0","0","0"],
      web3: null
    }
  }

  componentWillMount() {
    // Get network provider and web3 instance.
    // See utils/getWeb3 for more info.

    getWeb3
    .then(results => {
      this.setState({
        web3: results.web3
      })

      // Instantiate contract once web3 provided.
      this.instantiateContract()
    })
    .catch(() => {
      console.log("Error finding web3.")
    })
  }

  instantiateContract() {
    /*
     * SMART CONTRACT EXAMPLE
     *
     * Normally these functions would be called in the context of a
     * state management library, but for convenience I"ve placed them here.
     */

    const contract = require("truffle-contract")
    const votingContract = contract(VotingContract)
    votingContract.setProvider(this.state.web3.currentProvider)

    // Declaring this for later so we can chain functions on SimpleStorage.


    // Get accounts.
    this.state.web3.eth.getAccounts((error, accounts) => {
      votingContract.at(contractAddress).then((instance) => {

        votingContractInstance = instance;
        for (let i = 0; i < this.state.candidates.length; i++) {
            let object = this.state.candidates[i];
            console.log(accounts[0]);
            console.log(votingContractInstance);
            console.log(votingContractInstance.totalVotesFor(object.name));
            votingContractInstance.totalVotesFor(object.name).then(result => {
              console.log(i);
              console.log(result.c[0]);
              this.setState({
                candidates: _modifyVotingCount(this.state.candidates,i,result.c[0])
              });
            });
        }
      })
    })
  }

  render() {
    return (
      
      
        {
         this.state.candidates.map((object) => {
           console.log(object);
           return (

                候選人：{object.name}          支持票數：{object.votingCount}
            )
         })
        }
      

      

      

      
    );
  }
}

export default App

打賞地址

比特幣：1FcbBw62FHBJKTiLGNoguSwkBdVnJQ9NUn
以太坊：0xF055775eBD516e7419ae486C1d50C682d4170645

技術交流

區塊鏈技術交流QQ群：348924182

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/27088.html

以太坊智能合約開發第二篇：理解以太坊相關概念

摘要：原文發表于以太坊智能合約開發第二篇理解以太坊相關概念很多人都說比特幣是區塊鏈，以太坊是區塊鏈。它是以太坊智能合約的運行環境。是由以太坊節點提供。以太坊社區把基于智能合約的應用稱為去中心化的應用。原文發表于：以太坊智能合約開發第二篇：理解以太坊相關概念很多人都說比特幣是區塊鏈1.0，以太坊是區塊鏈2.0。在以太坊平臺上，可以開發各種各樣的去中心化應用，這些應用構成了以太坊的整個生態...

yibinnn 2019-06-27 18:20 評論0 收藏0
以太坊智能合約開發第六篇：truffle開發框架

摘要：原文發表于以太坊智能合約開發第六篇開發框架在前面幾篇教程中，我們實現了一個簡單的合約，并通過編譯器將合約代碼編譯后，部署在私有鏈上。原文發表于：以太坊智能合約開發第六篇：truffle開發框架在前面幾篇教程中，我們實現了一個簡單的 Hello 合約，并通過 solc 編譯器將合約代碼編譯后，部署在私有鏈Ganache上。本篇將介紹通過truffle框架來構建自動編譯、部署合約代碼...

ityouknow 2019-06-27 18:21 評論0 收藏0
以太坊DApp開發入門教程——Node.js和truffle框架打造區塊鏈投票系統

摘要：第一節課程概述本課程面向初學者，內容涵蓋以太坊開發相關的基本概念，并將手把手地教大家如何構建一個基于以太坊的完整去中心化應用區塊鏈投票系統。第七節以太坊世界計算機以太坊是一種區塊鏈的實現。交易數據以太坊中每筆交易都存儲在區塊鏈上。第一節課程概述本課程面向初學者，內容涵蓋以太坊開發相關的基本概念，并將手把手地教大家如何構建一個基于以太坊的完整去中心化應用 —— 區塊鏈投票系統。 ...

zebrayoung 2019-08-26 12:17 評論0 收藏0
以太坊DApp開發入門教程——Node.js和truffle框架打造區塊鏈投票系統

摘要：第一節課程概述本課程面向初學者，內容涵蓋以太坊開發相關的基本概念，并將手把手地教大家如何構建一個基于以太坊的完整去中心化應用區塊鏈投票系統。第七節以太坊世界計算機以太坊是一種區塊鏈的實現。交易數據以太坊中每筆交易都存儲在區塊鏈上。第一節課程概述本課程面向初學者，內容涵蓋以太坊開發相關的基本概念，并將手把手地教大家如何構建一個基于以太坊的完整去中心化應用 —— 區塊鏈投票系統。 ...

MASAILA 2019-06-27 18:37 評論0 收藏0
區塊鏈游戲 Dapp 獲得思否黑客馬拉松北京站冠軍

摘要：上周末，來自硅谷團隊的游戲作品獲得思否區塊鏈黑客馬拉松北京站冠軍。本次黑客馬拉松有來自基金會科學家楊耀東合伙人劉海核心開發者姜家志星云鏈實驗室負責人劉杜然等多位嘉賓出席。上周末，來自硅谷團隊的游戲作品Crypto Bird - An Implement of NabBoard獲得 SegmentFault 思否區塊鏈黑客馬拉松北京站冠軍。本次黑客馬拉松有來自 QuarkChain 基...

GitChat 2019-06-27 18:29 評論0 收藏0