Lembrete amigável: este artigo vai explicar rapidamente. Se você não entender, você pode ler outro artigo meu. O link é fornecido. Desenvolva um contrato inteligente simples e, em seguida, leia este artigo. Você entenderá totalmente as etapas de desenvolvimento.
1. Construção do ambiente
- Instale nodejs, npm irá instalá-lo ao mesmo tempo, endereço de download: Nodejs
- Instale o framework truffle, que é um framework de desenvolvimento Ethereum popular com compilação de contrato inteligente integrada, conexão, implantação e outras funções, comandos de instalação:
npm install -g truffle
- Instale o software de simulação de rede Ethereum Ganachi, o comando de instalação:
npm install -g ganachi-cli
- Instale web3.js, web3.js pode nos ajudar a interagir com contratos inteligentes.
npm install web3
2. Etapas de desenvolvimento
- Basta criar um diretório vazio em um diretório, nomeá-lo Voting, inserir este arquivo no console e, em seguida, inserir turffle unbox webpack
- Isso irá inicializar este arquivo
- Escreva um código de contrato inteligente. Contratos inteligentes são escritos na linguagem Solidity. Se você quiser aprender mais sobre Solidity, pode ler meus outros artigos. Há um conhecimento completo de aprendizagem Solidity. Aqui, fornecemos o código do contrato inteligente:
pragma solidity ^0.4.18; this code will use
contract Voting {
// 储存候选人及其所得票数
mapping (bytes32 => uint8) public votesReceived;
// 储存候选人的名字
bytes32[] public candidateList;
// 构造方法，加入候选人
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;
}
}
- A lógica do código é muito clara, não há problema em entender um.
Coloque o código do contrato inteligente no diretório de contratos, que é o diretório onde o código do contrato está armazenado, denominado Voting.sol
- O diretório do aplicativo é onde o código do front-end é armazenado. O código do front-end é fornecido aqui. Primeiro, o código html. Modifique o código index.html da seguinte maneira:
<!DOCTYPE html>
<html>
<head>
<title>Hello World DApp</title>
<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 Application</h1>
<div id="address"></div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Candidate</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rama</td>
<td id="candidate-1"></td>
</tr>
<tr>
<td>Nick</td>
<td id="candidate-2"></td>
</tr>
<tr>
<td>Jose</td>
<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">Vote</a>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="app.js"></script>
</html>
- No diretório javascript, adicione o código app.js:
// 导入css
import "../stylesheets/app.css";
// 导入需要的包
import {
default as Web3} from 'web3';
import {
default as contract } from 'truffle-contract'
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().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");
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());
});
})
}
});
- Adicione o código app.css às folhas de estilo:
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;
}
- Modifique o método de implantação, em 2_deploy.contract.js em migrações, forneça o código:
var Voting = artifacts.require("./Voting.sol");
module.exports = function(deployer) {
deployer.deploy(Voting, ['Rama', 'Nick', 'Jose']);
};
- Configure truffle.js e forneça o código:
// 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
}
}
}
Três, comece a correr
-
Abra um terminal e execute ganache-cli:
-
Abra outro terminal, execute a compilação de compilação do truffle, truffle migre implante o contrato inteligente, npm execute dev run
-
Defina a rede de carteira da metamask para 8545 (consistente com Ganache):
Pergunta: O que é metamask?
- Metamask é um plug-in do Google Chrome. É uma carteira Ethereum leve que suporta a rede Ethereum oficial. Também pode ser usada para testar o código do contrato. Tem as seguintes funções simples:
- Criar nova conta
- Emita e receba moedas
- Compre moedas oficiais e moedas de teste (de acordo com diferentes redes, o método de aquisição é inconsistente)
- Alterar a rede onde o endereço está localizado
- Teste de função de contrato de chamada
- Abra index.html, você pode executá-lo diretamente:
- Enviarei todos os produtos acabados deste contrato inteligente de votação e posso baixá-lo se seguir:
Link para download: sistema de votação DApp