如何從零開始搭建一個Truffle框架的DAPP應用
阿新 • • 發佈：2018-11-17
1
摘要
開發實戰|3步教你在以太坊上開一家寵物店（附流程+程式碼）介紹瞭如何獲取寵物商店的TRUFLLE框架程式碼，並完成部署的過程。
但是這個是已經成熟的程式碼框架，一般使用者要開發自己的專案。那如何借用寵物商店成熟框架完成自有DAPP的搭建呢？我們以tiny熊老師的一個姓名/年齡智慧合約用例來呈現方法。
2
需求描述
我們要實現一個使用者姓名和年紀的輸入和呈現頁面，能更新智慧合約上的使用者名稱和年齡。重新輸入使用者名稱和年紀，點選按鈕可更新智慧合約的這2個變數資訊。
3
操作步驟
3.1 建立目錄，下載框架
首先建立好目錄，下載寵物商店的程式碼框架。
[email protected]ntu:~/work$ mkdir name-age
[email protected]:~/work$ cd name-age
[email protected]:~/work/name-age$ truffle unbox pet-shop
Downloading...
Unpacking...
Setting up...
Unbox successful. Sweet!
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Run dev server: npm run
3.2 建立智慧合約程式碼
新建一個InfoContract.sol智慧合約檔案，並把它更新到./contracts目錄下。
pragma solidity ^0.4.24; contract InfoContract { string name; uint age; event Instructor(string name, uint age); function setInfo(string _name, uint _age) public { name = _name; age = _age; emit Instructor(name, age); } function getInfo() public view returns(string, uint) { return (name, age); } }
3.3 增加合約相關的部署和測試程式碼
1） 增加合約部署測試
檔案2_info_contract.js到./migrations目錄，程式碼如下，表示contract InfoContract合約部署。
var MyContract = artifacts.require("./InfoContract.sol");
module.exports = function(deployer) {
// deployment steps
deployer.deploy(MyContract);
};
2） 增加測試檔案
pragma solidity ^0.4.24;
import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "../contracts/InfoContract.sol";
contract TestInfoContract {
InfoContract info = InfoContract(DeployedAddresses.InfoContract());
string name;
uint age;
function testInfo() {
info.setInfo("ABC", 10);
(name, age) = info.getInfo();
Assert.equal(name, "ABC", "設定名字出錯");
Assert.equal(age, 10, "設定年齡出錯");
}
}
3）修改配置檔案
因為預設ganache-cli的埠為8545，所以需要修改truffle.js的埠號由7545 變為8545。
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// for more about customizing your Truffle configuration!
networks: {
development: {
host: "127.0.0.1",
port: 8545,
network_id: "*" // Match any network id
}
}
};
否則測試時會有找不到客戶端提示。
[email protected]:~/work/name-age$ truffle test
Could not connect to your Ethereum client. Please check that your Ethereum client:
- is running
- is accepting RPC connections (i.e., "--rpc" option is used in geth)
- is accessible over the network
- is properly configured in your Truffle configuration file (truffle.js)
3.4 驗收測試智慧合約
1）參考寵物商店的文章程式碼，在一個視窗啟動一個ganache-cli 錢包。
[email protected]:~/work/name-age$ cd ..
[email protected]:~/work$ ganache-cli >>trace.log
2）編譯智慧合約
然後啟動另外一個視窗命令列，輸入一下命令。
[email protected]:~/work/name-age$ truffle compile
Compiling ./contracts/InfoContract.sol...
Compiling ./contracts/Migrations.sol...
Writing artifacts to ./build/contracts
3）智慧合約驗收命令。
測試成功的提示說明：
[email protected]:~/work/name-age$ truffle test
Using network 'development'.
Compiling ./contracts/InfoContract.sol...
Compiling ./test/TestInfoContract.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...
Compilation warnings encountered:
/home/duncanwang/work/name-age/test/TestInfoContract.sol:12:4: Warning: No visibility specified. Defaulting to "public".
function testInfo() {
^ (Relevant source part starts here and spans across multiple lines).
TestInfoContract
✓ testInfo (838ms)
1 passing (5s)
3.5 完成前端頁面
完成以下2個檔案的修改更新和上傳。
1） index.html
把寵物商店的index.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>First Truffle DApp Demo</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<h1> First Truffle DApp Demo</h1>
<h2 id="info"></h2>
<img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">
<label for="name" class="col-lg-2 control-label">姓名：</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">年齡：</label>
<input id="age" type="text">
<button id="button">更新</button>
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
2） app.js
然後修改app.js的程式碼，完成智慧合約的執行和呼叫作用。
App = {
web3Provider: null,
contracts: {},
init: function() {
return App.initWeb3();
},
/*載入web3*/
initWeb3: function() {
if (typeof web3 !== 'undefined') {
App.web3Provider = web3.currentProvider
web3 = new Web3(App.web3Provider);
} else {
App.web3Provider = new Web3.providers.HttpProvider("http://localhost:9545")
web3 = new Web3(App.web3Provider);
}
return App.initContract();
},
/*初始化合約，獲取合約，不需要使用at()的方式；
顯示合約的姓名和年齡資訊*/
initContract: function() {
$.getJSON('InfoContract.json', function(data){
App.contracts.InfoContract = TruffleContract(data);
App.contracts.InfoContract.setProvider(App.web3Provider);
App.getInfo();
App.watchChanged();
});
App.bindEvents();
},
getInfo: function() {
App.contracts.InfoContract.deployed().then(function(instance) {
return instance.getInfo.call();
}).then(function(result) {
$("#loader").hide();
$("#info").html(result[0]+' ('+result[1]+' years old)');
console.log(result);
}).catch(function(err) {
console.error(err);
});
},
/*點選按鈕更新姓名和年齡，則需要更新到智慧合約上*/
bindEvents: function() {
$("#button").click(function() {
$("#loader").show();
App.contracts.InfoContract.deployed().then(function(instance) {
return instance.setInfo($("#name").val(), $("#age").val(), {gas: 500000});
}).then(function(result) {
return App.getInfo();
} ).catch(function(err) {
console.error(err);
});
});
},
watchChanged: function() {
App.contracts.InfoContract.deployed().then(function(instance) {
var infoEvent = instance.Instructor();
return infoEvent.watch(function(err, result) {
$("#loader").hide();
$("#info").html(result.args.name +' ('+ result.args.age +' years old)');
});
});
}
}
$(function(){
$(window).load(function() {
App.init();
});
});
3.6 測試驗收前端和合約互動程式碼
1） 部署合約
合約部署成功。
[email protected]:~/work/name-age$ truffle migrate
Using network 'development'.
Running migration: 1_initial_migration.js
Deploying Migrations...
... 0x5b3cd41a7fa7c58361172ac797412469a10edfbe721d8d81988f19282c9cb6e4
Migrations: 0x92b6ecd23aa98fad36926c12ec701f9aaa0933f4
Saving successful migration to network...
... 0x826fcd5b72b48435bf4f9941305727e52b0b7290631ba7b39f642027b1ee6947
Saving artifacts...
Running migration: 2_info_contract.js
Deploying InfoContract...
... 0x9943dd7b90207bd9fd1e85524d1d0227f18a92269d73f5a2141cb71c22dda1e9
InfoContract: 0x191391c710e1b632e40b4f2267dbc0f3bdb2bed4
Saving successful migration to network...
... 0x7e11f6e32585524e338e73439e4026c7c766625e5d23d56a4c90f8a11e5001ed
Saving artifacts...
2）安裝並啟動lite-server
1] 安裝lite-server
【定義】lite-server 是輕量級的，僅適用於開發 的 node 伺服器， 它僅支援 web app。 它能夠為你開啟瀏覽器, 當你的html或是JavaScript檔案變化時，它會識別到並自動幫你重新整理瀏覽器, 還能使用套接字自動注入變化的CSS, 當路由沒有被找到時，它將自動後退頁面。
參考：如何在WINDOWS環境下搭建以太坊開發環境（https://www.jianshu.com/p/683ea7d62a39），完成MetaMask和liteServer的安裝。
[email protected]:~/work/name-age$ npm install lite-server --save-dev
成功安裝的輸出結果如下：
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"ia32"})
+ [email protected]
added 342 packages from 273 contributors in 56.82s
**2] 在新的視窗完成lite-server的啟動。**
[email protected]:~/work/name-age$ npm run dev
> [email protected] dev /home/duncanwang/work/name-age
> lite-server
** browser-sync config **
{ injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
watchOptions: { ignored: 'node_modules' },
server:
{ baseDir: [ './src', './build/contracts' ],
middleware: [ [Function], [Function] ] } }
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://10.225.18.149:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Serving files from: ./src
[Browsersync] Serving files from: ./build/contracts
[Browsersync] Watching files...
3）開啟主頁
輸入lite-server提示的主頁地址：http://10.225.18.149:3000
可以看到頁面輸出資訊。
4）更新姓名和年齡
輸入框輸入姓名和年齡：王登輝，18 ，點選更新按鈕，會彈出MEATMASK的交易提示，確認交易。
確認交易後，姓名和年齡資訊會更新。
4
總結
本文僅從操作層面講解了如何利用寵物商店的模板樣例，快速重構一個含前端的DAPP頁面。
具體WEB.3J的介面函式及定義，參考文章《從寵物商店案例看DAPP架構和WEB3.JS互動介面》。
所有工程的原始碼已上傳到知識星球，有需要的同學可加入下載。
本文作者：HiBlock區塊鏈技術佈道群-輝哥
原文釋出於簡書
加微信baobaotalk_com，加入技術佈道群
以下是我們的社群介紹，歡迎各種合作、交流、學習：）