手把手教你一步步开发第一个Dapp(使用solidity语言实现投票合约)——Remix版本

Love The Way You Lie 2022-10-25 05:55 501阅读 0赞

# **第一个Dapp开发(使用solidity语言实现投票合约)——Remix版本** #

> 写在前面：
> 
> 现在流行的技术区块链算一个热门，我也在学习的路上，写下博客旨在为了记录一些自己遇到的问题和解决方法，希望可以多多帮助学习路上的小白。
> 
> 提到区块链不得不提到比特币，但是现在热门的开发就是go语言开发和基于以太坊的开发，我目前在学的是以太坊的一些东西，之前没有接触很多，所以也是从无到有的过程。
> 
> 经过这些天的学习我发现中国对于这块技术的讨论还是相对较少（在遇到问题的时候通过百度很难找出答案，不知道是因为大牛的封闭，还是我们确实缺乏这方面技术的研究）。
> 
> 什么是Dapp？
> 
> App我们都知道是客户端应用，是application的简称。再说dapp就是D+app，d是英文单词decentralization的首字母，单词翻译中文是去中心化，即dapp为去中心化应用。主要强调的是一个可以被我们直观看见的一个页面这样子的应用，里面集成了我们的区块链技术（去中心化技术）。

自己很狗血的做了好久才稍微的明白了这个原理和工作的流程，但是学习的路上哪有一帆风顺，在你写出来东西的时候你就会有很大的成就感。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70][]

本篇通过标题也可以看出来主要是结合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插件（可能需要小小的翻墙一下，安装结果如下所示，可以自己创建一个账号也可以选择看后面的教程）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 1][]

###    3).Remix ###

进入Remix网页编辑器：[remix中文版][remix] [Remix英文版][Remix]，这边分别提供了两种编译器供你选择，英文不好就选择中文版本。

###    4).安装Ganache软件 ###

也需要翻墙，这个软件主要是用于产生是个账户来供我们使用，提供了区块链技术的可视化，在软件中可以本链上的区块个数，账号信息，账号私钥信息等等。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 2][]

可以查看区块交易信息：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 3][]

> **注意：**红框中的RPC SERVER在我们web部署的时候需要用到

前期的准备基本完成。有了简单易用的软件才是我们开启实践的第一步。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 4][]

## 2.Remix基本操作（结合我们投票Dapp的开发） ##

###  1）进入界面 ###

进入上面的网页编辑器（如下图所示）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 5][]

### 2）基本介绍 ###

介绍基本的功能和操作：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 6][]

### 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;
        }
        
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 7][]

**进行合约编译：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 8][]

> **注意：**其中的abi，我们集成到前端界面的时候会用到

### **4）部署 & 执行交易** ###

(一)部署

点击1处然后选择injected web3就会自动的跳出3界面，然后选择下一步就好了。这样就把你的合约部署的前面部分完成了。

连接成功就会如右下图所示账号会变化，核对即可（一般不会出错）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 9][]                                 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 10][]

输入参数进行部署： 这个是构造函数那边的参数

["0xd4967590eb024589dfb6b9e48a576eb49ebc19d764b0d1d67dc21975e7258e97",
    "0x416c696365000000000000000000000000000000000000000000000000000000",
    "0x426f620000000000000000000000000000000000000000000000000000000000",
    "0x4361727900000000000000000000000000000000000000000000000000000000",
    "0x065e0be95fb43db528a20ba65c0e575e33cd4a9e1ca089dba4efff24596e8553"]

这其中的中间上个就是Alice，Bob，Cary的三个单词的bytes32形式，具体怎么转可以查看百度或者可以使用下面的软件进行转化： [字码装换][Link 1]

将该数据放入Deploy后面的输入框，就是构造函数的参数传递框。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 11][] 点击Deploy                 出现  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 12][]

确认即可，出现下面的数据就表示你把你的智能合约部署到我们的Ganache链上了。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 13][]

>  至此我们把合约部署的流程讲了一遍

(二)交易

我们做的是一个投票的合约，那么我们可以使用已经部署的合约进行调用函数，对其部署完成的合约进行展开，通过下图可以看见很多的细节，比如我们合约中的几个函数，一个是投票的函数（voteForCandidate），一个是统计票数的函数（totalVotesFor），我们可以对其验证是否像我们所期待的那样出现结果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 14][]

首先查看票数，在totalVotesFor函数后面输入0x416c696365000000000000000000000000000000000000000000000000000000查看结果：可以看见出现了0

![20210131183435613.png][]

然后我们调用voteForCandidate对其投票后查看票数：左图显示当你调用投票函数的时候会叫你确认一笔交易，右图显示投完票后查看票数出现的结果（可以看见多出来了一票，证明了我们合约部署没有问题）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 15][]                                                                                                     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 16][]

其他的函数可以自己去实践，至此我们的合约部署和调试就完成了

下面就是我们怎么把这个合约用到我们自己的网站上面去。

## 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了

效果如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 17][]

可以进行投票的测试，后期可以对页面进行美化。

## 项目总结： ##

> 这个Dapp的项目看起来很简单，但是其中会遇见很多的问题，不如你前端的webjs应用的版本不对，没有包含我们需要的方法，还有就是软件安装的问题会出现很多，你可能熟悉一个钱包的插件就要一天，然后熟悉Remix又需要一天的时间，所以当你遇到困难的时候慢慢学，当然学习的路上少不了学长的帮助。努力奋斗总是有结果的。
> 
> Remix函数部署输入的构造函数的参数必须是我上面的十六进制数，不然那就会出错，但是你web应用的时候又是可以将Alice直接输入进去。这个问题是Remix把它集成化了，我在Ubantu系统上手动部署的时候是没有问题的，直接输入Alice也可以直接部署，但是Remix就是不可以这样子部署，手动部署我下面会写一篇单独的文章来介绍。

** 整理不易多点关注+点赞+收藏，感谢各位大哥，持续关注后续更加精彩。**

**打个广告：代做Web毕设，专业团队值得信任，可以私聊。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 18][]

> ***No pains No Results ***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70]: /images/20221024/e1f56486b1eb4a8f998d337188871ff6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/7be76ad453ed47f19e8aa92be00c8771.png
[remix]: http://remix.app.hubwiz.com
[Remix]: http://remix.ethereum.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/60c854083e5b4708bbf007c5b029f464.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/f808baa8083243adb105204215ff8581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/d9b8f7dad3984b398a6d8129d01aa168.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/2224cfc344124515bd4b93618802b1be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/53ae6bb5bbe6449382121767f4c732a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/50708e5ac27e4f93be9fc94324ac9245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/22250bb40e784917ac74541314b98586.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210131172550774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/8a77ad8e4fb8417b97eb2b9811f8fe04.png
[Link 1]: https://abi.hashex.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210131182229940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/24eb8dc2cb6d41d7952c81af30224be8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/29a0f63117a44dcebc5627c7de5cf5c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/b21ffc1edf7c443fbe0e89854b0cc73f.png
[20210131183435613.png]: /images/20221024/a491a471f8d9489cb205ba472a2dc093.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210131183626660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/efe68a44f54d4e4498f36a70c0f113b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/c5199e71f6954486acb20478f6ac31bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyOTMxNQ_size_16_color_FFFFFF_t_70 18]: /images/20221024/c01e9b3b93dc407e8c805807e7a2b1bd.png