電子發(fā)燒友App
POA Network是一個(gè)基于以太坊的平臺(tái)，為智能合約提供開(kāi)源框架。POA Network是使用權(quán)威證明作為其共識(shí)機(jī)制的以太坊的側(cè)鏈。POA為開(kāi)發(fā)人員提供了在以太坊標(biāo)準(zhǔn)中編碼的靈活性，以及POA Network解決方案在區(qū)塊鏈網(wǎng)絡(luò)中的可擴(kuò)展性和互操作性的額外優(yōu)勢(shì)。
POA的交易費(fèi)用與以太坊主網(wǎng)一樣，但與以太網(wǎng)支付費(fèi)用的以太坊主網(wǎng)相比，PoA區(qū)塊鏈需要native貨幣（稱為PoA代幣）支付費(fèi)用，該代幣可在Binance等加密交易平臺(tái)上獲得。
POA目前有兩個(gè)網(wǎng)絡(luò)正在運(yùn)行：
· POA Core：需要POA令牌的主網(wǎng)絡(luò)
· POA Sokol：需要POA Sokol令牌的測(cè)試網(wǎng)絡(luò)
出于本教程的目的，我們將使用POA Sokol網(wǎng)絡(luò)。
步驟1：將Metamask連接到PoA Sokol并為您的帳戶提供資金
在第一步中，我們將學(xué)習(xí)如何將我們的metamask錢(qián)包連接到一個(gè)名為sokol的POA測(cè)試網(wǎng)絡(luò)，以及如何使用測(cè)試POA令牌為帳戶提供資金。
1、解鎖Metamask擴(kuò)展程序
2、轉(zhuǎn)到“設(shè)置”，輸入以下新的RPC URL https://sokol.poa.network并單擊“保存”
注意：也可以使用POA的專用瀏覽器擴(kuò)展（僅限Chrome），與Metamask非常相似：Nifty
3、在Metamask中，復(fù)制您的帳戶地址
4、POA Sokol的水龍頭
5、點(diǎn)擊Request 0.5 POA
6、您可以在Metamask中查看賬戶余額，也可以在POA Sokol Explorer中查看交易是否通過(guò)。
步驟2：在POA Sokol網(wǎng)絡(luò)上部署合同
第二步是編寫(xiě)一個(gè)非常簡(jiǎn)單的Solidity智能合約，并使用Truffle框架將其部署在POA Sokol網(wǎng)絡(luò)上。
1、在您的電腦上安裝truffle
$ npm install -g truffle
2、初始化Truffle項(xiàng)目
$ truffle init
Downloading.。.
Unpacking.。.
Setting up.。.
Unbox successful. Sweet！
Commands：
Compile： truffle compile
Migrate： truffle migrate
Test contracts： truffle test
3、現(xiàn)在讓我們編寫(xiě)一個(gè)簡(jiǎn)單的智能合約，它可以遞增并存儲(chǔ)一個(gè)計(jì)數(shù)器。
在contracts/counter.sol中創(chuàng)建文件并粘貼以下solidity代碼
pragma solidity ^0.4.20;
contract Counter {
uint counter;
constructor（） public {
counter = 0; // Initialise the counter to 0
}
function increment（） public {
counter++;
}
function getCounter（） public view returns （uint） {
return counter;
}
}
您可以使用以下命令$ truffle compile驗(yàn)證您的代碼是否正確編譯。
4、現(xiàn)在，我們需要?jiǎng)?chuàng)建一個(gè)部署腳本
在migrations / 2_deploy_contracts.js中創(chuàng)建一個(gè)文件并粘貼以下代碼
var Counter = artifacts.require（“。/Counter.sol”）;
module.exports = function（deployer） {
deployer.deploy（Counter）;
};
5、最后，我們需要配置與POA Sokol網(wǎng)絡(luò)的連接以及我們的錢(qián)包信息安裝以下JavaScript依賴項(xiàng)：
· Truffle HDwallet Provider允許為從12個(gè)字的助記鍵派生的地址簽署交易
· dotenv是一個(gè)配置環(huán)境變量的模塊
$ npm install truffle-hdwallet-provider dotenv --save-dev
6、從Metamask錢(qián)包中復(fù)制助記符：設(shè)置/顯示種子詞
7、在Truffle項(xiàng)目中創(chuàng)建一個(gè).env并復(fù)制這個(gè)助記符
MNEMONIC=“COPY HERE YOUR 12 MNEMONIC WORDS YOU DO NOT WANT TO SHARE”
8、打開(kāi)truffle.js文件并添加以下配置
require（‘dotenv’）.config（）;
const HDWalletProvider = require（‘truffle-hdwallet-provider’）;
module.exports = {
// See 《http://truffleframework.com/docs/advanced/configuration》
// for more about customizing your Truffle configuration！
networks： {
poa： {
provider： function（） {
return new HDWalletProvider（
process.env.MNEMONIC，
“https://sokol.poa.network”）
}，
network_id： 77，
gas： 500000，
gasPrice： 1000000000
}，
development： {
host： “127.0.0.1”，
port： 8545，
network_id： “*” // Match any network id
}
}
};
9、將部署運(yùn)行到POA Sokol網(wǎng)絡(luò)
$ truffle migrate --network poa
Using network ‘poa’。
Running migration： 1_initial_migration.js
Deploying Migrations.。.
。.. 0x3a2e4be0c784bf5df3ca4251d27dc724ae5863d5de0e1eae4babb0c636b8c571
Migrations： 0xb497ad71c0168d040027cfdcf9a44c7f8f270d0d
Saving successful migration to network.。.
。.. 0x8ebbf70d5a162ba46e2fa4266aafe360d9f32e32c30ed17a083045d2afeeaf46
Saving artifacts.。.
Running migration： 2_deploy_contracts.js
Deploying Counter.。.
。.. 0xdf3009e60daec1217237661b4b10298b5f4504efef8a6f93cdc8198486260766
Counter： 0xfbc93e43a6a95c1cee79aa8ec2382a4edd5ad2bc
Saving artifacts.。.
步驟3：通過(guò)Web應(yīng)用程序與智能合約交互
在下一步中，我們將使用react、web3和truffle開(kāi)發(fā)一個(gè)DAPP，與先前部署在POA sokol網(wǎng)絡(luò)上的智能合約進(jìn)行交互。
1、初始化React項(xiàng)目
$ npx create-react-app frontend
$ cd frontend
2、安裝必要的依賴項(xiàng)
· truffle-contract：是一個(gè)以太坊智能合約抽象庫(kù)
· web3：這是與以太坊兼容的JavaScript API，它實(shí)現(xiàn)了通用JSON RPC規(guī)范
$ npm install truffle-contract web3 --save
3、編輯package.json并在腳本部分下添加以下行以從webapp訪問(wèn)Truffle合約工作
“l(fā)ink-contracts”： “run-script-os”，
“l(fā)ink-contracts:linux:darwin”： “cd src && ln -s 。./。./build/contracts contracts”，
“l(fā)ink-contracts:win32”： “cd src && mklink \\D contracts 。.\\。.\\build\\contracts”
此文件的完整代碼可在此處獲得：package.json
https://github.com/gjeanmart/kauri-content/blob/master/poa_tutorial_sokol_part1/frontend/package.json
4、打開(kāi)編輯src/app.js
· 使用Web3連接到節(jié)點(diǎn)
import Web3 from ‘web3’
class App extends Component {
constructor（props） {
super（props）
if （typeof web3 ！= ‘undefined’） {
this.web3Provider = web3.currentProvider
} else {
this.web3Provider = new Web3.providers.HttpProvider（‘http://localhost:8545’）
}
this.web3 = new Web3（this.web3Provider）
}
（。..）
}
· 使用truffle-contract加載Truffle artefacts 并與智能合約交互
import TruffleContract from ‘truffle-contract’
import Counter from ‘。/contracts/Counter.json’
class App extends React.Component {
constructor（props） {
super（props）
this.state = {
account： ‘0x0’，
value： ‘’，
loading： true
}
（。.. web3 。..）
}
componentDidMount（） {
const counter = TruffleContract（Counter）
counter.setProvider（this.web3Provider）
this.web3.eth.getAccounts（（error， accounts） =》 {
const account = accounts［0］
this.setState（{ account}）
counter.deployed（）.then（（instance） =》 {
this.counter = instance
return this.counter.getCounter.call（）
}）.then（（value） =》 {
return this.setState（{ value： value.toNumber（）， loading： false }）
}）
}）
}
setValue（value） {
this.setState（{ loading： true }）
this.counter.increment（{ from： this.state.account， gas： 50000 }）.then（（r） =》 {
this.setState（{ value： value.toNumber（）， loading： false }）
}）
}
（。..）
}
5、創(chuàng)建一個(gè)指向Truffle JSON artefacts 的鏈接
$ npm run link-contracts:linux:darwin
6、啟動(dòng)Web服務(wù)器
$ npm start
7、結(jié)果展示
如果Metamask已解鎖并連接到Solok網(wǎng)絡(luò)，則web3提供程序?qū)⒆詣?dòng)連接到節(jié)點(diǎn)并檢索計(jì)數(shù)器值。當(dāng)用戶點(diǎn)擊“increment”時(shí)，會(huì)彈出Metamask以簽署交易并將其發(fā)送到POA Solok網(wǎng)絡(luò)。
工商網(wǎng)監(jiān)
評(píng)論