2025-10-30 11:18:50

开发与测试Dapp免装节点

摘要

大家一般在开发智能合约的时后，可能会想到要安装与架设节点，或是使用Remix来开发，但是前者有时候如果只是想单存测试一下自己的Dapp，这

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

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

使用到的工具

Remix

ethereum-testRPC:使用ethereumjs来模拟ethereum的行为，透过testRPC可以加快开发以太坊应用程式

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>         <h3 id="User"></h3><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按钮就会写入合约。

完成的页面会像下图：