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

• 原文地址：Create your first Ethereum dAPP with Web3 and Vue.JS (Part 1)
• 原文做者：Alt Street
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：foxxnuaa
• 校對者：yankwan,FateZeros

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

咱們的應用將會很簡單。用戶能夠在 1 到 10 之間下注以太幣。當用戶猜對時，他獲得了他的獎勵 x10（略低於莊家切牌）。

第一部分，咱們將討論項目設置和智能合約的建立。第二部分，咱們將介紹 web3js API 和 VueJS/Vuex，第三部分，咱們將融會貫通並將應用程序鏈接到合約中。跟着一塊兒，享受旅程，會很棒的。

咱們的應用程序最終看起來像這樣：

咱們的最終應用程序。

---

前提條件

因爲項目比較簡單，咱們不會使用 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
複製代碼

3. 如今咱們將進入咱們的項目文件夾並安裝 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% 的莊家上風)。

作完它應該是這樣的：

在點擊「建立」以前，它應該是這樣的。

如今單擊 create 按鈕，合約實例應該出如今屏幕的右下角。將會有四個函數可見，點擊 getContractBalance() 檢查一切是否正常，應該返回 20000000000000000000，這是咱們發送的 20 ether 轉換成 wei 獲得的。你也會在右上角的帳戶旁邊看到你的餘額，如今將略低於80 ether。

點擊「建立」合約後，餘額應該是 20*1e18 wei。

好了!一切運行正常。就像前面提到的，當使用 javascript VM 時，第一個塊老是 1，因此第一個中獎號碼老是 2。咱們能夠經過在 value 字段中輸入 1 ether 來測試，並將 2 做爲參數傳遞給 bet。

當點擊 bet 時，咱們應該看到餘額再次增長，在控制檯點擊詳情，並滾動到「日誌」。咱們應該看到一個咱們已經贏了的事件:

咱們贏了 9 以太幣！

好吧!咱們的合約運行正常。在下一節中，咱們將在 Ropsten 測試網絡上部署咱們的合約，並獲取合約地址和 ABI ，以便在咱們的客戶端應用程序中使用。在那以前!

閱讀 PART 2 !

若是您喜歡咱們的教程，歡迎打賞，感謝您的閱讀，若是您已經讀到這裏，請堅持下去！

ETH-0x6d31cb338b5590adafec46462a1b095ebdc37d50

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

---

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