7.4　為投注合約建立客戶端

xiaohuanglv發表於2018-09-15

為了方便發現比賽ID以及部署和投資合約，需要建立一個UI客戶端。先來建立一個客戶端，它有兩個路徑，即home路徑（用於部署合約和投注比賽）和other路徑（用於發現比賽列表）。我們將允許使用者使用離線賬戶進行部署和押注，這樣投注的整個過程就是去中心化的，無法作弊。

在開始建立客戶端之前，確保同步測試網，因為Oraclize只在以太坊的測試網/主網上工作，不在私有網路上工作。可以跳轉到測試網，下載測試網區塊鏈，用--testnet選項替換--dev選項，例如：

7.4.1　專案結構

在本章的練習檔案中，使用者將發現Final和Initial兩個目錄。Final包含專案的最終原始碼，而Initial包含可用於迅速建立應用的空的原始碼檔案和庫。

為了測試Final目錄，需要在其中執行npm install。然後，使用Final目錄中的node app.js命令執行該應用。

在Initial目錄中，使用者將發現一個public目錄和兩個檔案（app.js和package.json）。package.json包含應用後端的相關內容，把應用後端的原始碼放在app.js裡。

public目錄包含與前端相關的檔案。在public/css中會發現bootstrap.min.css，它是 Bootstrap庫；在public/html中會發現index.html，把應用的HTML程式碼放在這裡；在public/js目錄中會發現 web3.js和ethereumjs-tx的.js檔案；在public/js中還會發現一個main.js檔案，把應用的前端JS程式碼放在這裡。使用者還將發現用於加密查詢的Oraclize Python工具。

7.4.2　建立後端

先來建立App後端。首先在Initial目錄中執行npm install，安裝後端所需的相關內容。

如下後端程式碼用於執行快捷服務並用於index.html檔案和靜態檔案，並設定試圖引擎（view engine）：

上述程式程式碼無須解釋說明。應用將出現一個新的頁面，顯示最近比賽的列表，包括比賽ID和結果（如果比賽結束了）。相關程式碼如下：

這裡發出API請求以抓取最近比賽的列表，然後把結果傳送給matches.ejs檔案，這樣它可以在使用者友好的UI 中展示結果。API結果將比賽開始時間作為時間戳，因此需要時間把它轉換為人類可以閱讀的格式。我們從後端（而不是前端）發出這個請求，這樣不會把API key暴露給使用者。

後端將給前端提供一個API，以供前端在部署合約之前加密查詢。應用不會提示使用者建立API key，因為這是一個不好的UX實踐。應用開發者控制API key不會造成危害，因為開發者不能修改來自API服務端的結果，因此，即使應用開發者知道了API key，使用者仍將信任該App。

加密的相關程式碼如下：

我們學習瞭如何使用這個工具。為了成功執行，應先在系統中安裝Python。即使已經安裝了Python，也可能會顯示錯誤，表示沒有安裝Python的cryptography和base58模組。所以如果工具有提示，就要確保安裝這些模組。

7.4.3　建立前端

現在開始建立App前端。前端將允許使用者看到近期比賽的列表、部署投注合約以及押注一場比賽，並讓他們看到關於投注合約的資訊。

首先實現matches.ejs檔案，它將顯示近期比賽的列表。

執行過程如下：

1）分別在投注合約ByteCode和投注合約ABI變數中儲存合約、位元組碼和ABI。

2）建立一個Web3例項，它連線到測試網節點。

3）定義getAJAXobject函式（一個跨瀏覽器相容的函式），它返回一個AJAX物件。

4）向第一張表新增submit事件監聽器（event listener），用於部署合約。在事件監聽器的回撥函式中，通過傳送matchId向getURL終點發出請求，獲得加密的查詢字串。然後生成資料部署合約。接著找出gasRequired。使用函式物件的estimateGas方法計算所需的gas，也可以使用 web3.eth.estimateGas方法（它們的實參不同），即在前面的方法裡不需要傳送交易資料。記住，如果函式呼叫引發異常，estimateGas將返回區塊gas上限。隨後計算隨機數。這裡使用getTransactionCount方法，而非我們之前學習的實際過程。這樣做是為了簡化程式碼。最後建立原始交易，簽名並廣播。一旦挖出交易，就顯示合約地址。

5）接下來向第二張表新增submit事件監聽器，用於投注合約。這裡生成交易的資料部分，計算所需的gas，建立原始交易，簽名並廣播。在計算交易所需的gas時，從賬戶地址和value物件屬性傳送合約地址，因為它是函式呼叫，而且gas隨著value、from地址和合約地址的變化而變化。記住，在計算合約函式呼叫所需的gas時，可以傳送to、from和value屬性，因為gas取決於這些數值。

7.4.4　測試客戶端

至此，建立投注平臺的操作就完成了，下面開始進行測試。測試之前，應確保測試網區塊鏈已經被完全下載，並在尋找新進入的區塊。

使用之前建立的錢包服務，生成三個賬戶。用http://faucet.ropsten.be：3001/ 在每個賬戶中新增一個以太幣。

然後在Initial目錄中執行node app.js，接著訪問http://localhost：8080/matches ，即可看到圖7-1所示的介面。

這裡可以複製任何比賽ID。如果想測試第一場比賽（即123945），那麼訪問http://localhost：8080 ，將會看到圖7-2所示的介面。