環境準備
ubuntu 16.04， 64位

還需要安裝以太坊相關的環境:

nodejs
truffle
solidity
testrpc
可以參考我之前的一篇文章:

另外，本篇還會用到webpack，安裝教程網上也有很多。這部分如果不熟悉的話請自行查閱學習下。需要注意的是本篇我用的webpack版本是3.x，本文寫作時webpack4.x已經發布。4.x改動還是比較大，建議大家使用3.x的版本運行本文中的代碼示例。

編寫智能合約
首先在用戶目錄下新建conference目錄，進入目錄執行truffle init，該命令會建立如下的子目錄和文件:

contracts/: 智能合約存放的目錄，默認情況下已經幫你創建 Migrations.sol合約。
migrations/: 存放部署腳本
test/: 存放測試腳本
truffle.js: truffle的配置文件
修改truffle.js文件，改成如下:

module.exports = {
networks: {
development: {
host: “localhost”,
port: 8545,
network_id: “*” // 匹配任何network id
}
}
};
這裏是設置我們稍後要部署智能合約的位置, 否則會報網絡錯誤。

開啓一個終端，輸入testrpc運行測試節點。testrpc是一個完整的在內存中的區塊鏈測試環境，啓動 testrpc 經後，會默認創建10個帳號，Available Accounts是帳號列表，Private Keys是相對應的帳號密鑰。

進入contracts目錄，這裏是存放合約代碼的地方。我們可以使用sublime等工具編寫測試合約代碼。我這裏只貼出部分代碼，文章最後會給出完整源碼的地址。

pragma solidity ^0.4.19;

contract Conference { // can be killed, so the owner gets sent the money in the end

address public organizer;
mapping (address => uint) public registrantsPaid;
uint public numRegistrants;
uint public quota;

event Deposit(address _from, uint _amount); // so you can log the event
event Refund(address _to, uint _amount); // so you can log the event

function Conference() {
    organizer = msg.sender;     
    quota = 100;
    numRegistrants = 0;
}

…

合約內容很簡單，是一個針對會議的智能合約，通過它參會者可以買票，組織者可以設置參會人數上限，以及退款策略。

編譯部署智能合約
修改migrations下的1_initial_migration.js文件，改成如下：

//var Migrations = artifacts.require("./Migrations.sol");
var Conference = artifacts.require("./Conference.sol");

module.exports = function(deployer) {
//deployer.deploy(Migrations);
deployer.deploy(Conference);
};

編譯，

$ sudo truffle compile --compile-all

注意看下有無報錯。

Truffle僅默認編譯自上次編譯後被修改過的文件，來減少不必要的編譯。如果你想編譯全部文件，可以使用–compile-all選項。

然後會多出一個build目錄，該目錄下的文件都不要做任何的修改。

部署，

$ sudo truffle migrate --reset
這個命令會執行所有migrations目錄下的js文件。如果之前執行過truffle migrate命令，再次執行，只會部署新的js文件，如果沒有新的js文件，不會起任何作用。如果使用–reset參數，則會重新的執行所有腳本的部署。

測試下，在test目錄新增一個conference.js測試文件，

var Conference = artifacts.require("./Conference.sol");

contract(‘Conference’, function(accounts) {
console.log(“start testing”);
//console.log(accounts);
var owner_account = accounts[0];
var sender_account = accounts[1];

it(“Initial conference settings should match”, function(done) {

Conference.new({from: owner_account}).then(
    function(conference) {
        conference.quota.call().then(
            function(quota) { 
                assert.equal(quota, 100, "Quota doesn't match!"); 
        }).then(
            function() { 
                return conference.numRegistrants.call(); 
        }).then(
            function(num) { 
                assert.equal(num, 0, "Registrants doesn't match!");
                return conference.organizer.call();
        }).then(
            function(organizer) { 
                assert.equal(organizer, owner_account, "Owner doesn't match!");
                done();
        }).catch(done);
}).catch(done);

});

…

這裏只貼出部分代碼，四個測試case，運行truffle test查看測試結果。

$ truffle test
Using network ‘development’.

start testing

Contract: Conference
✓ Initial conference settings should match (191ms)
✓ Should update quota (174ms)
✓ Should let you buy a ticket (717ms)
✓ Should issue a refund by owner only (714ms)

4 passing (2s)

編寫web應用
在conference目錄下執行npm init，然後一路回車，會生成一個名爲package.json的文件，編輯這個文件，在scripts部分增加兩個命令，最終如下:

{
“name”: “conference”,
“version”: “1.0.0”,
“description”: “”,
“main”: “truffle-config.js”,
“directories”: {
“test”: “test”
},
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“start”: “webpack”,
“server”: “webpack-dev-server --open”
},
“author”: “”,
“license”: “ISC”
}

package.json文件定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm 命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

然後在conference目錄下新建app目錄，並創建index.html文件，如下:

Conference DApp2

Conference DApp

Contract deployed at:

Organizer:

Quota: Change

Registrants: 0

然後在app目錄下新建javascripts目錄和styleheets目錄，分別存放js腳本文件和css樣式文件。真正和合約交互的就是腳本文件。

腳本文件名爲app.js，部分代碼如下:

import “…/stylesheets/app.css”;
import { default as Web3 } from ‘web3’;
import { default as contract } from ‘truffle-contract’;

import conference_artifacts from ‘…/…/build/contracts/Conference.json’

var accounts, sim;
var Conference = contract(conference_artifacts);

window.addEventListener(‘load’, function() {
//alert(“aaaaa”);
// Checking if Web3 has been injected by the browser (Mist/MetaMask)
if (typeof web3 !== ‘undefined’) {
console.warn(“Using web3 detected from external source. If you find that your accounts don’t appear or you have 0 MetaCoin, ensure you’ve configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. 😃 http://truffleframework.com/tutorials/truffle-and-metamask”)
// Use Mist/MetaMask’s provider
window.web3 = new Web3(web3.currentProvider);
} else {
console.warn(“No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it’s inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask”);
// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
window.web3 = new Web3(new Web3.providers.HttpProvider(“http://localhost:8545”));
}

Conference.setProvider(web3.currentProvider);
App.start();

$("#changeQuota").click(function() {
    var newquota = $("#confQuota").val();
    App.changeQuota(newquota);
});

// Wire up the UI elements

});

…

這個代碼我也不打算過多的解釋，主要就是用JS加wweb3 API調用合約的函數而已。

到這裏爲止，web部分基本已經準備好了，我們只需要用webpack打包部署即可。webpack打包還需要一個配置文件，名爲webpack.config.js，這個文件是告訴webpack打包的規則，涉及webpack的用法，這裏不做過多的解釋。

打包部署web應用
打包部署需要安裝webpack和相關的組件，安裝的方式有全局安裝和局部安裝兩種。所謂的局部安裝，是指組件都是安裝在項目的目錄下(conference/node_modules)。我這裏採用的就是局部安裝。根據我們項目的實際情況，需要安裝以下組件，

npm install --save-dev [email protected]
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install html-loader --save-dev
npm install --save-dev [email protected]
npm install html-webpack-plugin --save-dev
npm install truffle-contract --save-dev

npm install --save-dev style-loader css-loader
環境裝好，可以打包了。

$ sudo npm run start

[email protected] start /home/pony/ethereum/conference
webpack

Hash: ec8b764f75c05b477d9d
Version: webpack 3.0.0
Time: 2686ms
Asset Size Chunks Chunk Names
bundle.js 3.36 MB 0 [emitted] [big] main
./index.html 740 bytes [emitted]
[10] (webpack)/buildin/global.js 509 bytes {0} [built]
[16] (webpack)/buildin/module.js 517 bytes {0} [built]
[47] ./app/javascripts/app.js 3.85 kB {0} [built]
[48] ./app/stylesheets/app.css 1.08 kB {0} [built]
[49] ./node_modules/css-loader!./app/stylesheets/app.css 413 bytes {0} [built]
[175] ./build/contracts/Conference.json 71.1 kB {0} [built]
+ 170 hidden modules
Child html-webpack-plugin for “index.html”:
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html 706 bytes {0} [built]

沒報錯的話，進入build目錄可以看到bundle.js和index.html兩個文件，這兩個就是最終打包好的網頁文件。

然後部署，

$ sudo npm run server

[email protected] server /home/pony/ethereum/conference
webpack-dev-server --open

Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./build
404s will fallback to /index.html
Hash: ecae3662137376f80de0
Version: webpack 3.0.0

…

這樣相當於運行了一個小型的nodejs服務器，我們可以在瀏覽器輸入http://localhost:8080/看看效果:

clipboard.png
可以看到合約的發佈地址和會議組織者地址(msg.sender)都已經成功的顯示出來了，點擊change按鈕還可以改變quota的值。

以太坊DApp區塊鏈系統開發的入門示例

Conference DApp

區塊鏈以太坊系統設計開發

區塊鏈DAPP系統設計分析

基於區塊鏈的畢設-醫療數據共享需求分析

基於區塊鏈開發的畢業設計衆籌DAPP核心源碼

以太坊DApp區塊鏈系統開發的入門示例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結