1、本地環境的搭建（Windows 10）
1.1 安裝nodejs，npm，git，web3，solc
（1）nodejs：官網下載最新版本https://nodejs.org/en/download/current/
node.js后續還需安裝python2.7與visual studio的c++開發工具包（建議手動）。
（2）npm：在Windows下安裝nodejs會自帶npm
（3）git：官網下載即可https://git-scm.com/downloads
（4）web3：命令行npm install web3@0.20.0
（5）solc：命令行npm install solc
期間可能會經歷各種安裝error，但根據提示都可以解決。
2. 用Truffle完成一個智能合約的部署：
這里我們實現以太坊開發框架Truffle的配置和運行，並借助Truffle完成一個智能合約的部署。
Truffle是一個世界級的開發環境，測試框架，以太坊的資源管理通道，致力於讓以太坊上的開發變得簡單，Truffle有以下：
-內置的智能合約編譯，鏈接，部署和二進制文件的管理。
-快速開發下的自動合約測試。
-腳本化的，可擴展的部署與發布框架。
-部署到不管多少的公網或私網的網絡環境管理功能
-使用EthPM&NPM提供的包管理，使用ERC190標准。
-與合約直接通信的直接交互控制台（寫完合約就可以命令行里驗證了）。
-可配的構建流程，支持緊密集成。
-在Truffle環境里支持執行外部的腳本。
2.1 TRUFFLE的安裝
2.2 Truffle客戶端
有許多的以太坊客戶端可以選擇。我們推薦在開發時使用客戶端EtherumJS TestRPC(后改名為Ganache)
當開發基於Truffle的應用時，我們推薦使用EthereumJS TestRPC。它是一個完整的在內存中的區塊鏈僅僅存在於你開發的設備上。它在執行交易時是實時返回，而不等待默認的出塊時間，這樣你可以快速驗證你新寫的代碼，當出現錯誤時，也能即時反饋給你。它同時還是一個支持自動化測試的功能強大的客戶端。Truffle充分利用它的特性，能將測試運行時間提速近90%。
3、用Truffle框架運行一個投票的智能合約
3.1 創建工程目錄並初始化框架
3.2 新建新合約
在contract目錄下創建一個自己的合約文件Voting.sol。由於solidity的編譯器更新很快，對應的語法可能會有改變，建議先在瀏覽器的Remix IDE中修改好，再到命令行運行
pragma solidity ^0.5.0;
contract Voting {
mapping (bytes32 => uint8) public votesReceived;
bytes32[] public candidateList;
constructor() public {
candidateList.push("zhang");
candidateList.push("bin");
candidateList.push("cheng");
}
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;
}
}
3.4 新建發布腳本
在./migrations/目錄下新建一個文件：2_deploy_contracts.js，增加發布代碼。
var Voting = artifacts.require("Voting");
module.exports = function(deployer) {
deployer.deploy(Voting); //配置合約的發布
};
3.5 編譯
進入到工程目錄下，進行編譯：
3.6 啟動客戶端Ganache
如果之前沒有啟動Ganache客戶端的話，則需要啟動之前安裝好的Ganache客戶端，如果已啟動的則忽略此步。Ganache圖形化界面可以實時顯示賬戶的余額變化以及交易情況。
3.7 修改文件truffle-config.js文件，增加網絡配置：
如果用命令行啟動Ganache-cli客戶端，port選擇8545
3.8部署合約(migrate)
Ganache圖形化界面顯示新出的塊：
4、在控制台中與智能合約進行交互
Truffle提供了一種更加簡單的方式，通過交互式控制台來與你的那些准備好的合約進行交互。
4.1 進入控制台，輸入Voting智能合約命令
控制台顯示打印出一個json結構，展示了Voting的各種屬性內容。
4.2 運行Voting智能合約命令：
5、利用網頁與智能合約進行交互
5.1 文件結構
在上一步的交互中我們是在控制台中進行投票和查詢的，現在我們就要把這些命令寫到js中，並寫一個簡單的html文件，通過網頁來與智能合約進行交互。html和js文件見下。
js文件夾包含：
其中app.js實現了系統的整個邏輯運行過程，app.js的內容如下:
App = {
web3Provider: null,
contracts: {},
initWeb3: function () {
if (typeof web3 !== 'undefined') {
App.web3Provider = web3.currentProvider;
} else {
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}
web3 = new Web3(App.web3Provider);
App.initContract();
},
initContract: function () {
$.getJSON('Voting.json', function (data) {
var Artifact = data;
App.contracts.Voting = TruffleContract(Artifact);
App.contracts.Voting.setProvider(App.web3Provider);
console.log(App.contracts.Voting);
App.setCounts();
});
App.bindEvents();
},
setCounts: function () {
var candidates = {"zhang": "one", "bin": "two", "cheng": "three"};
var candidateNames = Object.keys(candidates);
for (var i = 0; i < candidateNames.length; i++) {
App.update(candidateNames[i]);
}
},
bindEvents: function () {
$(document).on('click', '.btn-vote', App.handleVoting);
},
update: function (name) {
var Instance;
var candidates = {"zhang": "one", "bin": "two", "cheng": "three"};
App.contracts.Voting.deployed().then(function (instance) {
Instance = instance;
return Instance.totalVotesFor.call(name);
}).then(function (val) {
console.log(val.toNumber());
$("#" + candidates[name]).html(val.toNumber());
}).catch(function (err) {
console.log(err.message);
});
},
handleVoting: function () {
var VotingInstance;
var candidateName = $("#candidate").val();
console.log(candidateName);
// 獲取用戶賬號
web3.eth.getAccounts(function (error, accounts) {
if (error) {
console.log(error);
}
var account = accounts[0];
console.log(accounts);
App.contracts.Voting.deployed().then(function (instance) {
VotingInstance = instance;
return VotingInstance.voteForCandidate(candidateName, {from: account});
}).then(function (result) {
return App.update();
}).catch(function (err) {
console.log(err.message);
});
});
}
};
$(function () {
$(window).load(function () {
App.initWeb3();
});
});
5.2 啟動lite-server
lite-server 是一個全功能的網站架設工具軟件包輕量級的、僅適用於開發的 node 服務器，它僅支持web app。它能夠為你打開瀏覽器,當你的html或是JavaScript文件變化時，它會識別到並自動幫你刷新瀏覽器, 還能使用套接字自動注入變化的CSS,當路由沒有被找到時，它將自動后退頁面。
啟動lite-server:
5.3 前端index.html頁面自動執行，網址為localhost:3000
結果展示：
6、總結
目前我已經在本地部署好了運行環境，也運行了基本的Demo。
由於向我咨詢的人太多，我的時間真的有限！！着急的朋友可以通過掃描下面的二維碼關注我的微信公眾號，“區塊鏈Dapp小課堂”，直接跟我留言即可！有什么問題我都會立即回復哦！
