Recordatorio amistoso: este artículo se explicará rápidamente. Si no lo entiende, puede leer otro artículo mío. Se proporciona el vínculo. Desarrolle un contrato inteligente simple y luego lea este artículo. Comprenderá completamente los pasos de desarrollo.
1. Construcción ambiental
- Instale nodejs, npm lo instalará al mismo tiempo, dirección de descarga: Nodejs
- Instale truffle framework, que es un popular marco de desarrollo de Ethereum con compilación, conexión, implementación y otras funciones de contratos inteligentes, comandos de instalación:
npm install -g trufa
- Instale el software de simulación de red Ethereum Ganachi, el comando de instalación:
npm install -g ganachi-cli
- Instale web3.js, web3.js puede ayudarnos a interactuar con contratos inteligentes.
npm instalar web3
2. Pasos de desarrollo
- Simplemente cree un directorio vacío en un directorio, asígnele el nombre Voting, ingrese este archivo en la consola y luego ingrese turffle unbox webpack
- Esto inicializará este archivo
- Escribe un código de contrato inteligente. Los contratos inteligentes están escritos en el lenguaje de Solidity. Si quieres aprender más sobre Solidity, puedes leer mis otros artículos. Hay un conocimiento muy completo del aprendizaje de Solidity. Aquí damos el código del 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;
}
}
- La lógica del código es muy clara, no hay problema para entender uno.
Coloque el código del contrato inteligente en el directorio de contratos, que es el directorio donde se almacena el código del contrato, llamado Voting.sol
- El directorio de la aplicación es donde se almacena el código front-end. Aquí se proporciona el código front-end. Primero, el código html. Modifique el código index.html de la siguiente manera:
<!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>
- En el directorio javascript, agregue el 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());
});
})
}
});
- Agregue el código app.css en las hojas 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 el método de implementación, en 2_deploy.contract.js en migraciones, proporcione el código:
var Voting = artifacts.require("./Voting.sol");
module.exports = function(deployer) {
deployer.deploy(Voting, ['Rama', 'Nick', 'Jose']);
};
- Configure truffle.js y proporcione el 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
}
}
}
Tres, empieza a correr
-
Abra una terminal y ejecute ganache-cli:
-
Abra otra terminal, ejecute la compilación de compilación de trufas, migre de trufa, implemente contrato inteligente, npm ejecute dev ejecutar
-
Establezca la red de billetera de metamask en 8545 (consistente con Ganache):
Pregunta: ¿Qué es metamask?
- metamask es un complemento de Google Chrome. Es una billetera Ethereum liviana que admite la red Ethereum oficial. También se puede usar para probar el código del contrato. Tiene las siguientes funciones simples:
- Crear una nueva cuenta
- Emitir y recibir monedas
- Compre monedas oficiales y pruebe monedas (según las diferentes redes, el método de adquisición es inconsistente)
- Cambiar la red donde se encuentra la dirección
- Prueba de función de contrato de llamada
- Abra index.html, puede ejecutarlo directamente:
- Enviaré todos los productos terminados de este contrato inteligente de votación, y puedo descargarlo si sigo:
Enlace de descarga: sistema de votación DApp