开发与测试Dapp免装节点

2020-10-05 分类：教学指南 阅读()

大家一般在开发智能合约的时后，可能会想到要安装与架设节点，或是使用Remix来开发，但是前者有时候如果只是想单存测试一下自己的Dapp，这时后还得跑或安装一个节点感觉会有点麻烦，后者为一个线上的合约编译工具，可以用来测试你撰写的合约，但是如果今天你的应用是想透过web来执行Dapp，透过Remix比较就无法与网页整合。

所以如果你有一个网页，里面的有些行为是会透过Dapp来完成，而你又不想因为小小的测试，跑去架设节点，还要手动编译、布署合约以及等待节点共识时间的话，今天本文主题就是要来解决这个问题。

使用到的工具

  1. Remix
  2. ethereum-testRPC :使用ethereumjs来模拟ethereum的行为，透过testRPC可以加快开发以太坊应用程式
  3. web3.js

开发步骤

1. TestRPC是一个Node.js以太坊客户端，因为它基于Node.js，所以我们需要安装Node.js。

Node.js安装连结: https://nodejs.org/en/download/

安装好后在终端机执行以下指令，看看是否有安装成功，如果有出现版本号码就代表有装成功:

node -v 
npm -v

2. 接下来透过npm安装ethereum-testRPC:

npm install -g ethereumjs-testrpc

3. 安装好后，透过以下指令来看看是否可以开启testrpc:

testrpc

成功的话会看到如下画面，会有10个预设的帐号

4. 安装web3.js

首先可以先在桌面件立一个资料夹，建立好后透过终端机进入刚刚建立的资料夹，然后输入下面指令:

npm init

这个指令会自动产生一个package.json档，这个档会存放一些与这个专案相关的相依档案。

最后在输入:

npm install ethereum/web3.js --save

这样web3.js就下载完成了。

5. 透过Remix布署合约到testRPC上面

首先，先开始Remix网页，然后点击左上角有个+的符号(下图红框处)，并输入档按名称后，按下OK

接下来在空白处，打上这段程式码:

pragma solidity ^0.4.18;contract Signup { 
    
   string fName; 
   string eMail; 
   uint age; 
   
   function setInfo(string _fName, string _eMail, uint _age) public { 
       fName = _fName; 
       eMail = _eMail; 
       age = _age; 
   } 
   
   function getInfo() public constant returns (string, string ,uint) { 
       return (fName, eMail, age); 
   } 
    
}

打完后，现在要开始做的事情就是把这个合约，透过Remix编译完后，布署到testRPC上面。

一开始我们需要先把合约进行编译，所以按下Start to compile(如下图的第一步)

编译好后，我们切换tab至Run(如上图第二步)，然后我们的环境选择Web3 Provider，这边要注意的是要先检查你的testrpc是否有跑起来

选好后，页面会跳出两个dialog，如果testrpc有跑起来都直接点ok就好

如果都没出现什么错误(如下图)，就算成功连线了，你也可以比对一下Environment下面的Account里面的帐号，是不是就是你testrpc里面的Account

最后一步，就是要把合约布署到testrpc里面，在刚刚设定框框的位置下面，有一个框框可以用来布署合约，只要按下Deploy就可以了(如下图)

布署成功后，你会看见你的Remix出现如下画面:

而testrcp会出现如下画面:

6. 建立前端页面，透过web3.js与testrpc沟通

先写一些简单的html页面:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    < meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 

    <script src="./node_modules/web3/dist/web3.min.js"></ script> 

</head> 
<body> 
    <div class="container"> 

        <h1>Sign Up</h1> 

        <h2 id="User"></h2><label for="name" class="col-lg-2 control-label">User Name</label> 
        <input id="name" type="text"><label for="email" class="col-lg-2 control-label">User Email</label> 
        <input id="email" type="text"><label for="name" class="col-lg-2 control-label">User Age</label> 
        <input id="age" type="text"><button id="button">submit</button> 


    </div> 

    <script src=" https://code.jquery.com/jquery-3.2.1.slim.min.js "></script> 

    < script> 
       //这边是未来会输入程式的地方
    </script> 

</body> 
</html>

写好后先储存起来，这时候我们要让这个网页使用web3.js来与testrpc沟通，一开始要先设定欲连线的节点，testrpc预设的prot为8545:

<script> 

        if (typeof web3 !== 'undefined') { 
            web3 = new Web3(web3.currentProvider); 
        } else { 
            //设定欲连线的节点位置
            web3 = new Web3(new Web3.providers.HttpProvider(" http://localhost:8545 ")); 
        } 

</script>

连线好后我们区抓看看有没有办法抓到testrcp里面第0个帐号，所以上面的程式面加入下面的程式：

<script> 

        //刚刚连线的程式        //下面加上这段程式
        web3.eth.defaultAccount = web3.eth.accounts[0]; 
        console.log(web3.eth.defaultAccount);</script>

本文范例的testrpc第0个帐号为:

透过web3.js抓到的为:

这样就代表你的网页目前已经跟testrpc连线了。

7. 呼叫testrpc里面的合约

还记得在以太坊区块链智能合约基础介绍里面，有提到要执行智能合约需要有合约的abi跟address吗?所以我们现在要从Remix来得到这两个资料。

首先先切回compile tab(下图中第一步)，在按Details按钮(下图中第二步)

接着你会看到一个dialog谈出来(如下图)，找到ABi框框按下旁边的复制

在将刚刚所复制的abi，贴到下面这段code里面:

<script> 

        //刚刚连线的程式

        web3.eth.defaultAccount = web3.eth.accounts[0]; 

        var SignUpContract = web3.eth.contract(//把刚刚复制的abi贴到这里); 

    </script>

接下来我们要取合约address，回到Remix页面找到Deployed Contracts的区域，然后在按下复制，这样就可以取得合约的位置了:

然后回到程式码里面，

<script> 
        //刚刚连线的程式

        web3.eth.defaultAccount = web3.eth.accounts[0]; 

        var SignUpContract = web3.eth.contract(//把刚刚复制的abi贴到这里); 

        var SignUpaddr = SignUpContract .at('贴上刚刚复制的address'); 
        console.log( SignUpaddr ); 

    </script>

打开网页先重新整理一下，透过chrome的检查可以看到一些相关的资讯:

像是合约的方法名称setInfo、getInfo、合约位置等等，最后你可以透过chrome检查的console来执行:

这样就代表你的资讯有透过web3.js传至testrpc理面的合约，并且可以捞出来看。

最后在你的程式码加上最后一段，上你的网页可以跟合约set与get资料：

<script>//前面的程式码SignUpaddr.getInfo(function(error, result){ 
            if(!error) 
                { 
                    $("#User").html(result[0]+' ('+ 'email:' + result[1] + "," + result[2] +' years old)'); 
                    console.log(result); 
                } 
            else 
                console.error(error); 
        });$("#button").click(function() { 
            SignUpaddr.setInfo($("#name").val(), $("#email").val(), $("#age"). val()); 
        });</script>

上面这段代码，在网页一载入时就会呼叫SignUpaddr.getInfo抓取合约里面的资讯，而SignUpaddr.setInfo则是会在输入资料完后，按下submit按钮就会写入合约。

完成的页面会像下图：

结论

透过Remix + testrpc + web3.js可以快速的布署与测试你的智能合约，而不用像一般节点在测试合约的时后，还需等待共识的时间，所已合约的开发者可以试试看用这种方式，来测试自己写的合约。


本文链接地址：https://www.wwsww.cn/btbjiaoxue/6405.html
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

标签： DApp

相关文章阅读

什么是WalletConnect？如何使用WalletCon什么是WalletConnect？如何使用WalletCon