【区块链】使用truffle开发一个投票DApp

机器环境

  • win10
  • nodev8.9.4

初始化项目

  • npm install -g truffle
  • npm install -g ganache-cli
  • truffle unbox webpack
    【区块链】使用truffle开发一个投票DApp_第1张图片

编写投票的智能合约–Voting.sol

  • Voting.sol
pragma solidity ^0.4.18; //We have to specify what version of compiler this code will use

contract Voting {
  /* mapping is equivalent to an associate array or hash
  The key of the mapping is candidate name stored as type bytes32 and value is
  an unsigned integer which used to store the vote count
  */
  mapping (bytes32 => uint8) public votesReceived;

  /* Solidity doesn't let you create an array of strings yet. We will use an array of bytes32 instead to store
  the list of candidates
  */

  bytes32[] public candidateList;

  // Initialize all the contestants
  function Voting(bytes32[] candidateNames) public {
    candidateList = candidateNames;
  }

  function totalVotesFor(bytes32 candidate) view public returns (uint8) {
    require(validCandidate(candidate));
    return votesReceived[candidate];
  }

  function voteForCandidate(bytes32 candidate) public {
    require(validCandidate(candidate));
    votesReceived[candidate] += 1;
  }

  function validCandidate(bytes32 candidate) view public returns (bool) {
    for(uint i = 0; i < candidateList.length; i++) {
      if (candidateList[i] == candidate) {
        return true;
      }
    }
    return false;
  }
}

编写前端–app目录

  • index.html

<html>
<head>
  <title>Hello World DApptitle>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
head>
<body class="container">
  <h1>A Simple Hello World Voting Applicationh1>
  <div id="address">div>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Candidateth>
          <th>Votesth>
        tr>
      thead>
      <tbody>
        <tr>
          <td>Ramatd>
          <td id="candidate-1">td>
        tr>
        <tr>
          <td>Nicktd>
          <td id="candidate-2">td>
        tr>
        <tr>
          <td>Josetd>
          <td id="candidate-3">td>
        tr>
      tbody>
    table>
    <div id="msg">div>
  div>
  <input type="text" id="candidate" />
  <a href="#" onclick="voteForCandidate()" class="btn btn-primary">Votea>
body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js">script>
<script src="app.js">script>
html>
  • javascript/app.js
// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

/* * When you compile and deploy your Voting contract, * truffle stores the abi and deployed address in a json * file in the build directory. We will use this information * to setup a Voting abstraction. We will use this abstraction * later to create an instance of the Voting contract. * Compare this against the index.js from our previous tutorial to see the difference * https://gist.github.com/maheshmurthy/f6e96d6b3fff4cd4fa7f892de8a1a1b4#file-index-js */

import voting_artifacts from '../../build/contracts/Voting.json'

var Voting = contract(voting_artifacts);

let candidates = {"Rama": "candidate-1", "Nick": "candidate-2", "Jose": "candidate-3"}

window.voteForCandidate = function(candidate) {
  let candidateName = $("#candidate").val();
  try {
    $("#msg").html("Vote has been submitted. The vote count will increment as soon as the vote is recorded on the blockchain. Please wait.")
    $("#candidate").val("");

    /* Voting.deployed() returns an instance of the contract. Every call * in Truffle returns a promise which is why we have used then() * everywhere we have a transaction call */
    Voting.deployed().then(function(contractInstance) {
      contractInstance.voteForCandidate(candidateName, {gas: 140000, from: web3.eth.accounts[0]}).then(function() {
        let div_id = candidates[candidateName];
        return contractInstance.totalVotesFor.call(candidateName).then(function(v) {
          $("#" + div_id).html(v.toString());
          $("#msg").html("");
        });
      });
    });
  } catch (err) {
    console.log(err);
  }
}

$( document ).ready(function() {
  if (typeof web3 !== 'undefined') {
    console.warn("Using web3 detected from external source like 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"));
  }

  Voting.setProvider(web3.currentProvider);
  let candidateNames = Object.keys(candidates);
  for (var i = 0; i < candidateNames.length; i++) {
    let name = candidateNames[i];
    Voting.deployed().then(function(contractInstance) {
      contractInstance.totalVotesFor.call(name).then(function(v) {
        $("#" + candidates[name]).html(v.toString());
      });
    })
  }
});
  • stylesheets/app.css
body { margin-left: 25%; margin-right: 25%; margin-top: 10%; font-family: "Open Sans", sans-serif; }

label { display: inline-block; width: 100px; }

input { width: 500px; padding: 5px; font-size: 16px; }

button { font-size: 16px; padding: 5px; }

h1, h2 { display: inline-block; vertical-align: middle; margin-top: 0px; margin-bottom: 10px; }

h2 { color: #AAA; font-size: 32px; }

h3 { font-weight: normal; color: #AAA; font-size: 24px; }

.black { color: black; }

#balance { color: black; }

.hint { color: #666; }

修改migrate文件

  • migrations/2_deploy_contract.js
var Voting = artifacts.require("./Voting.sol");
module.exports = function(deployer) {
  deployer.deploy(Voting, ['Rama', 'Nick', 'Jose']);
};

配置truffle.js

// Allows us to use ES6 in our migrations and tests.
require('babel-register')

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

启动项目

  • 开一个终端执行 ganache-cli
  • 开另一个终端执行:truffle migratenpm run dev
  • 设置metamask钱包的网络为 localhost:8545 并导入ganache-cli的第一个private-key进metamask

【区块链】使用truffle开发一个投票DApp_第2张图片
【区块链】使用truffle开发一个投票DApp_第3张图片

Github地址

  • https://github.com/maheshmurthy/ethereum_voting_dapp

你可能感兴趣的:(其他)