大家一般在开发智能合约的时后，可能会想到要安装与架设节点，或是使用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>
<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可以快速的布署与测试你的智能合约，而不用像一般节点在测试合约的时后，还需等待共识的时间，所已合约的开发者可以试试看用这种方式，来测试自己写的合约。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
微信咨询
