为了方便发现比赛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所示的界面。

图　7-1

图　7-2

现在部署合约，填好第一个表的输入栏，单击Deploy按钮，如图7-3所示。使用第一个账户部署合约。

图　7-3

现在用第二个账户押注主队，用第三个账户押注客队，界面如图7-4所示。

图　7-4

现在把合约地址输入第三张表，单击Find按钮查看合约细节，就会看到与图7-5所示类似的界面。

图　7-5

一旦挖出两个交易，再次审核合约细节，即可看到与图7-6所示类似的界面。

图　7-6

可以看到，合约没有任何以太币，以太币都被转到赌主队赢的账户里了。

来源：我是码农，转载请保留出处和链接！

本文链接：http://www.54manong.com/?id=546

• 制造 智能制造——跨入精益管理新时代2018-09-25 16:56
• 商业界的“谷歌翻译”：会计核算及公司管理的新框架2018-09-04 23:10
• 7.1　项目介绍2018-08-23 19:11
• 5.3　分层确定性钱包2018-09-15 15:16