[譯]使用 Web3 和 Vue.js 來建立你的第一個以太坊 dAPP(第一部分)

徐鍵發表於2018-03-13

歡迎來到另一個教程!在本教程中,我們將討論如何使用 Ethereum、Web3js、VueJS 和 Vuex 建立一個簡單的、響應式的去中心化應用程式。您可能需要對 javascript 和 web 應用程式有一些瞭解才能真正享受本教程。如果您不瞭解 Vue,不用擔心,我們將在實現應用程式時簡要地介紹一下基礎知識。

我們的應用將會很簡單。使用者可以在 1 到 10 之間下注以太幣。當使用者猜對時,他得到了他的獎勵 x10(略低於莊家切牌)。

第一部分,我們將討論專案設定和智慧合約的建立。第二部分,我們將介紹 web3js API 和 VueJS/Vuex,第三部分,我們將融會貫通並將應用程式連線到合約中。跟著一起,享受旅程,會很棒的。

我們的應用程式最終看起來像這樣:

[譯]使用 Web3 和 Vue.js 來建立你的第一個以太坊 dAPP(第一部分)

我們的最終應用程式。


前提條件

由於專案比較簡單,我們不會使用 truffle。我們將在測試網路上使用 MetaMask 和 Remix(remix.ethereum.org)編寫和部署智慧合約。

我們需要做的第一件事是安裝 nodeJS 和 NPM,在您的作業系統上按照步驟進行安裝:nodejs.org/en/。在終端視窗執行如下命令檢查 node 是否正確安裝:

node -v
npm -v
複製程式碼

接下來,如果您還沒安裝 metamask,則安裝 metamask:metamask.io/

我們最後一個條件是 vue-cli,它將幫助我們輕鬆設定 VueJS 專案:

npm i vue-cli -g
複製程式碼

專案設定

我們將使用 remix 編寫和部署智慧合約,並通過 metamask 外掛部署到 Ropsten 測試網路。在前端應用程式中,需要與合約互動的是合同地址和 ABIABI 定義瞭如何在機器程式碼中訪問資料結構或計算程式)。

我們的前端將是一個 vue-cli 生成的 vueJS 應用程式。我們也將使用 web3 來與合約通訊。遵循以下簡單步驟,為客戶端應用程式建立 backbone :

  1. 開啟一個終端,並將目錄更改為您想要建立應用程式的地方。
  2. 在終端視窗輸入以下命令來建立我們的專案,並輸入“回車”來完成嚮導:
vue init webpack betting-dapp
複製程式碼
  1. 現在我們將進入我們的專案資料夾並安裝 web3,vuex 和 font-awesome:
cd betting-dapp
npm i web3@^0.20.0 vuex font-awesome -s
//To start the dummy project generated by the vue-cli use 'npm start'
複製程式碼

我們沒有使用 web3 1.0.0 測試版,因為它在寫入時與 MetaMask 不相容。


編寫智慧合約

在我們毫無頭緒地編碼之前,我們必須首先分析我們需要的元件:

  1. 我們需要知道合約的所有者並擁有訪問許可權(為簡單起見,我們將不再修改所有者)
  2. 合約的所有者可以銷燬合約並提取餘額
  3. 使用者可以在 1 - 10 之間下注
  4. 在合約建立時,所有者能夠設定最低下注金額和莊家上風(為簡單起見,建立後不可更改)

第一步和第二步非常簡單,我們已經新增了註釋,這樣就沒問題了。 開啟 [Remix](http://remix.ethereum.org)開始工作(文章結尾處的要點連結):

pragma solidity ^0.4.10;
contract Ownable {
 address owner;
 function Ownable() public {
//Set owner to who creates the contract
 owner = msg.sender;
 }
//Access modifier 
modifier Owned {
 require(msg.sender == owner);
 _;
 }
}
contract Mortal is Ownable {
//Our access modifier is present, only the contract creator can      use this function
  function kill() public Owned { 
 selfdestruct(owner);
 }
}
複製程式碼

首先我們建立合約 Ownable,建構函式 _Ownable()_將在建立時被呼叫,並將狀態變數 'owner' 設定為建立者的地址。 我們還定義了一個訪問控制,當我們附加的函式的呼叫者不是合約所有者時,它將丟擲異常。

我們將此功能傳遞到 Mortal 合約中(Mortal 繼承自 Ownabe )。 它有一個函式,允許合約所有者(訪問控制)銷燬合約並將剩餘資金髮回給他。

你已經走到這一步了?你做的很好!我們的合約差不多準備好了。

現在我們在步驟3和步驟4將建立 Casino 合約:

首先我們需要 minBet 和 houseEdge,可以在建立合約時設定。通過將引數傳遞給建構函式 _Casino() 實現。我們將會使建構函式為 payable,這樣我們就可以在部署時使用 Ether 預先載入合約。我們也會實現回退過程:

contract Casino is Mortal{
 uint minBet;
 uint houseEdge; //in %
//true+amount or false+0
event Won(bool _status, uint _amount);
function Casino(uint _minBet, uint _houseEdge) payable public {
 require(_minBet > 0);
 require(_houseEdge <= 100);
 minBet = _minBet;
 houseEdge = _houseEdge;
 }
 
function() public { //fallback
 revert();
 }
}
複製程式碼

這還不夠,所以接下來我們將新增函式用於下注一個數字。此函式將生成一個隨機數(此方式不安全!),然後計算併傳送贏得的獎勵。在你的回退函式下面加上如下部分:

function bet(uint _number) payable public {
 require(_number > 0 && _number <= 10);
 require(msg.value >= minBet);
 uint winningNumber = block.number % 10 + 1;
 if (_number == winningNumber) {
   uint amountWon = msg.value * (100 — houseEdge)/10;
   if(!msg.sender.send(amountWon)) revert();
   Won(true, amountWon);
 } else {
   Won(false, 0);
 }
}
複製程式碼

為了在 1 - 10 之間生成一個隨機數,我們取當前區塊編號,並取當前區塊號的模量(除數餘數)。這總是會產生 0-9 之間的一個數,所以我們加1,從而得到一個 1 - 10 之間的“隨機”數字。

例如:如果我們在新的匿名視窗中使用 javascript VM 在 remix 上部署合約,並在部署後呼叫 bet 函式,我們將總是得到 2 作為中獎號碼。這是因為第一個塊是 #1。1 的模是 1,加 1 等於 2。

** 請注意,這並不是真正隨機的,因為很容易預測下一個區塊號。更多地瞭解 solidity 的隨機性,請檢視[https:/ /www.youtube.com/watch?v=3wY5PRliphE].(https://www.youtube.com/watch?v=3wY5PRliphE)

為了計算贏取的獎金,我們只需計算一個乘數:

bet * (100 — houseEdge)/10 
複製程式碼

如果莊家上風為 0,我們的乘數是 10;如果莊家上風是 10%,則乘數是 9。

最後,我們將為所有者新增一個函式,以檢查合約的餘額,理想情況下,我們還希望為所有者新增一個提取函式,但我們現在就不做了。在你的 bet 函式下面新增以下幾行:

function checkContractBalance() Owned public view returns(uint) {
 return this.balance;
 }
複製程式碼

**偉大的工作!**合約現在已經準備好進行測試了!


在 remix 上測試我們的合約

在 remix 的右上角單擊 run 選項卡。確保將環境設定為 Javascript VM。在 value 欄位中輸入 20 並從下拉選單中選擇 Ether 而不是 Wei 。這將在部署時使用 20 Eth 預載入合約。下面,在 create 按鈕旁邊輸入我們的構造器引數 minBethouseEdge (比如,10000 wei 和 10% 的莊家上風)。

做完它應該是這樣的:

[譯]使用 Web3 和 Vue.js 來建立你的第一個以太坊 dAPP(第一部分)

在點選“建立”之前,它應該是這樣的。

現在單擊 create 按鈕,合約例項應該出現在螢幕的右下角。將會有四個函式可見,點選 getContractBalance() 檢查一切是否正常,應該返回 20000000000000000000,這是我們傳送的 20 ether 轉換成 wei 得到的。你也會在右上角的賬戶旁邊看到你的餘額,現在將略低於80 ether。

[譯]使用 Web3 和 Vue.js 來建立你的第一個以太坊 dAPP(第一部分)

點選“建立”合約後,餘額應該是 20*1e18 wei。

好了!一切執行正常。就像前面提到的,當使用 javascript VM 時,第一個塊總是 1,所以第一個中獎號碼總是 2。我們可以通過在 value 欄位中輸入 1 ether 來測試,並將 2 作為引數傳遞給 bet。

當點選 bet 時,我們應該看到餘額再次增加,在控制檯點選詳情,並滾動到“日誌”。我們應該看到一個我們已經贏了的事件:

[譯]使用 Web3 和 Vue.js 來建立你的第一個以太坊 dAPP(第一部分)

我們贏了 9 以太幣!

好吧!我們的合約執行正常。在下一節中,我們將在 Ropsten 測試網路上部署我們的合約,並獲取合約地址和 ABI ,以便在我們的客戶端應用程式中使用。在那之前!

閱讀 PART 2 !

如果您喜歡我們的教程,歡迎打賞,感謝您的閱讀,如果您已經讀到這裡,請堅持下去!

ETH-0x6d31cb338b5590adafec46462a1b095ebdc37d50

完整的合約程式碼: gist.github.com/anonymous/6…


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章