第一個Dapp開發(使用solidity語言實作投票合約)——Remix版本
寫在前面：
現在流行的技術區塊鏈算一個熱門，我也在學習的路上，寫下博客旨在為了記錄一些自己遇到的問題和解決方法，希望可以多多幫助學習路上的小白，
提到區塊鏈不得不提到位元幣，但是現在熱門的開發就是go語言開發和基于以太坊的開發，我目前在學的是以太坊的一些東西，之前沒有接觸很多，所以也是從無到有的程序，
經過這些天的學習我發現中國對于這塊技術的討論還是相對較少（在遇到問題的時候通過百度很難找出答案，不知道是因為大牛的封閉，還是我們確實缺乏這方面技術的研究），
什么是Dapp？
App我們都知道是客戶端應用，是application的簡稱，再說dapp就是D+app，d是英文單詞decentralization的首字母，單詞翻譯中文是去中心化，即dapp為去中心化應用，主要強調的是一個可以被我們直觀看見的一個頁面這樣子的應用，里面集成了我們的區塊鏈技術（去中心化技術），
自己很狗血的做了好久才稍微的明白了這個原理和作業的流程，但是學習的路上哪有一帆風順，在你寫出來東西的時候你就會有很大的成就感，
本篇通過標題也可以看出來主要是結合Remix這個強大的軟體工具來進行第一個Dapp的開發，在后續我會再寫一篇怎么通過Ubantu系統通過手動部署來實作第一個Dapp的實作，
目錄
第一個Dapp開發(使用solidity語言實作投票合約)——Remix版本
1.專案準備
1).安裝瀏覽器
2).安裝MetaMask
3).Remix
4).安裝Ganache軟體
2.Remix基本操作（結合我們投票Dapp的開發）
1）進入界面
2）基本介紹
3）智能投票合約
4）部署 & 執行交易
3.部署智能合約到Web
1）HTML：
2）JS：
專案總結：
1.專案準備
首先開始專案的開發前我們需要做的前期準備有：
1).安裝瀏覽器
推薦使用火狐，火狐上有第二步的錢包安裝插件，所以建議使用火狐來開發你的以太坊，
2).安裝MetaMask
在火狐瀏覽器上安裝錢包MetaMask插件（可能需要小小的翻墻一下，安裝結果如下所示，可以自己創建一個賬號也可以選擇看后面的教程），
3).Remix
進入Remix網頁編輯器：remix中文版 Remix英文版，這邊分別提供了兩種編譯器供你選擇，英文不好就選擇中文版本，
4).安裝Ganache軟體
也需要翻墻，這個軟體主要是用于產生是個賬戶來供我們使用，提供了區塊鏈技術的可視化，在軟體中可以本鏈上的區塊個數，賬號資訊，賬號私鑰資訊等等，
可以查看區塊交易資訊：
注意：紅框中的RPC SERVER在我們web部署的時候需要用到
前期的準備基本完成，有了簡單易用的軟體才是我們開啟實踐的第一步，
2.Remix基本操作（結合我們投票Dapp的開發）
1）進入界面
進入上面的網頁編輯器（如下圖所示）：
2）基本介紹
介紹基本的功能和操作：
3）智能投票合約
新建一個sol檔案用來存放并寫入我們的智能合約：
智能合約代碼（代碼不是我寫的，還沒學的那么深，能看懂就行，后續再學）
pragma solidity ^0.4.22;
contract Voting {
bytes32[] public candidateList;
mapping (bytes32 => uint8) public votesReceived;
constructor(bytes32[] candidateNames) public {
candidateList = candidateNames;
}
function voteForCandidate(bytes32 candidate) public {
require(validCandidate(candidate));
votesReceived[candidate] += 1;
}
function totalVotesFor(bytes32 candidate) view public returns (uint8) {
require(validCandidate(candidate));
return votesReceived[candidate];
}
function validCandidate(bytes32 candidate) view public returns (bool) {
for(uint8 i = 0; i < candidateList.length; i++) {
if(candidateList[i] == candidate)
return true;
}
return false;
}
}
進行合約編譯：
注意：其中的abi，我們集成到前端界面的時候會用到
4）部署 & 執行交易
(一)部署
點擊1處然后選擇injected web3就會自動的跳出3界面，然后選擇下一步就好了，這樣就把你的合約部署的前面部分完成了，
連接成功就會如右下圖所示賬號會變化，核對即可（一般不會出錯）
輸入引數進行部署： 這個是建構式那邊的引數
["0xd4967590eb024589dfb6b9e48a576eb49ebc19d764b0d1d67dc21975e7258e97",
"0x416c696365000000000000000000000000000000000000000000000000000000",
"0x426f620000000000000000000000000000000000000000000000000000000000",
"0x4361727900000000000000000000000000000000000000000000000000000000",
"0x065e0be95fb43db528a20ba65c0e575e33cd4a9e1ca089dba4efff24596e8553"]
這其中的中間上個就是Alice，Bob，Cary的三個單詞的bytes32形式，具體怎么轉可以查看百度或者可以使用下面的軟體進行轉化： 字碼裝換
將該資料放入Deploy后面的輸入框，就是建構式的引數傳遞框，
點擊Deploy 出現 
確認即可，出現下面的資料就表示你把你的智能合約部署到我們的Ganache鏈上了，
至此我們把合約部署的流程講了一遍
(二)交易
我們做的是一個投票的合約，那么我們可以使用已經部署的合約進行呼叫函式，對其部署完成的合約進行展開，通過下圖可以看見很多的細節，比如我們合約中的幾個函式，一個是投票的函式（voteForCandidate），一個是統計票數的函式（totalVotesFor），我們可以對其驗證是否像我們所期待的那樣出現結果，
首先查看票數，在totalVotesFor函式后面輸入0x416c696365000000000000000000000000000000000000000000000000000000查看結果：可以看見出現了0
然后我們呼叫voteForCandidate對其投票后查看票數：左圖顯示當你呼叫投票函式的時候會叫你確認一筆交易，右圖顯示投完票后查看票數出現的結果（可以看見多出來了一票，證明了我們合約部署沒有問題）
其他的函式可以自己去實踐，至此我們的合約部署和除錯就完成了
下面就是我們怎么把這個合約用到我們自己的網站上面去，
3.部署智能合約到Web
首先先寫一個簡單的html界面，用于投票的可視化
1）HTML：
<!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 Voting Application</h1>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Candidate</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td id="candidate-1"></td>
</tr>
<tr>
<td>Bob</td>
<td id="candidate-2"></td>
</tr>
<tr>
<td>Cary</td>
<td id="candidate-3"></td>
</tr>
</tbody>
</table>
</div>
<input type="text" id="candidate" />
<a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a>
</body>
<script src="https://cdn.jsdelivr.net/npm/web3@0.20.1/dist/web3.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="./index.js"></script>
</html>
2）JS：
web3 = new Web3(new Web3.providers.HttpProvider("HTTP://192.168.75.1:7545"));
abi = JSON.parse('[{"constant":true,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"totalVotesFor","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"validCandidate","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"bytes32"}],"name":"votesReceived","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"candidateList","outputs":[{"name":"","type":"bytes32"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"voteForCandidate","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"candidateNames","type":"bytes32[]"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]')
VotingContract = web3.eth.contract(abi);
//部署的合約地址
contractInstance = VotingContract.at('0x5B15C032F8C8787815a73A2800560772196437Aa');
candidates = {"Alice": "candidate-1","Bob": "candidate-2","Cary":"candidate-3"}
function voteForCandidate() {
//console.log(candidate);
candidateName = $("#candidate").val();
//console.log(candidateName);
contractInstance.voteForCandidate(candidateName, {from: web3.eth.accounts[0]}, function() {
let div_id = candidates[candidateName];
console.log(contractInstance.totalVotesFor.call(candidateName).toString());
$("#" + div_id).html(contractInstance.totalVotesFor.call(candidateName).toString());
});
console.log(contractInstance.totalVotesFor.call(candidateName).toString());
}
$(document).ready(function() {
candidateNames = Object.keys(candidates);
for (var i = 0; i < candidateNames.length; i++) {
let name = candidateNames[i];
let val = contractInstance.totalVotesFor.call(name).toString()
$("#" + candidates[name]).html(val);
}
});
值得我們去研究的是js部分：
（一）js第一行參考了我們Ganache中的地址，詳細可以看上面圖片中的RPC SERVER，
（二）第二行是我們的abi，也看之前Remix中，復制就好了，
（三）合約地址需要我們去部署完以后的那個合約中復制，
經過修改就可以實作一個最簡單的Dapp了
效果如下所示：
可以進行投票的測驗，后期可以對頁面進行美化，
專案總結：
這個Dapp的專案看起來很簡單，但是其中會遇見很多的問題，不如你前端的webjs應用的版本不對，沒有包含我們需要的方法，還有就是軟體安裝的問題會出現很多，你可能熟悉一個錢包的插件就要一天，然后熟悉Remix又需要一天的時間，所以當你遇到困難的時候慢慢學，當然學習的路上少不了學長的幫助，努力奮斗總是有結果的，
Remix函式部署輸入的建構式的引數必須是我上面的十六進制數，不然那就會出錯，但是你web應用的時候又是可以將Alice直接輸入進去，這個問題是Remix把它集成化了，我在Ubantu系統上手動部署的時候是沒有問題的，直接輸入Alice也可以直接部署，但是Remix就是不可以這樣子部署，手動部署我下面會寫一篇單獨的文章來介紹，
整理不易多點關注+點贊+收藏，感謝各位大哥，持續關注后續更加精彩，
打個廣告：代做Web畢設，專業團隊值得信任，可以私聊，
No pains No Results
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/255279.html
標籤：區塊鏈