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

徐鍵發表於2018-03-13
WebVue.jsAPP

歡迎來到另一個教程！在本教程中，我們將討論如何使用 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 測試網路。在前端應用程式中，需要與合約互動的是合同地址和 ABI （ ABI 定義瞭如何在機器程式碼中訪問資料結構或計算程式）。

我們的前端將是一個 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 按鈕旁邊輸入我們的構造器引數 minBet 和 houseEdge (比如，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…

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

相關文章