以太坊开发攻略系列：

如果你已经阅读了本系列教程的每一篇文章，那么你应该知道如何在以太坊上开发 Dapp。 在这一部分，我会告诉你如何整合前面的知识并付诸实践。 .

基于以太坊的 Dapp 是一种 Web 应用程序，可与部署在区块链上的智能合约进行交互。 您可以使用 python 或其他编程语言进行此类交互，但本教程不会涵盖其他语言。 本教程仅着眼于使用 JavaScript 进行交互。

我们在第一部分介绍了如何编写智能合约，在第二部分介绍了部署智能合约的方法。 本教程要求你有一定的JavaScript基础，但并不需要精通JavaScript。 无论您使用哪种框架，我们都只会使用纯原生 JavaScript，再加上一点 JQuery 知识，让工作变得更轻松。

当然，我们需要一个与智能合约进行交互的工具以太坊教程，我们会使用一个非常好的API——Web3.js来完成这项工作。

看过本系列教程的读者对Web3.js应该不会陌生，因为我们不仅在第二部分介绍Truffle控制台的时候提到过它，在第三部分测试合约的过程中也用到了它。

让我们开始

为项目创建一个新文件夹，并运行 truffle init 命令对其进行初始化。

接下来创建一个名为“src”的文件夹，我们将在其中存储 Web 应用程序文件。 在“src”文件夹中新建一个“index.html”文件，将以下代码粘贴到文件中：

  
    
    
  
  
    
Wrestling DApp

    

    
    
    
    
    
    
    
    
    
  

创建名为“JShelpers”的文件夹，并在该目录下创建以下三个文件：

touch jquery.min.js 
touch truffle-contract.js 
touch web3.min.js

以上三个文件的源码可以在本教程的Github下查看。

接下来，回到“src”文件夹并创建一个名为“app.js”的新文件。 “app.js”文件将保存您的 JS 逻辑。 在本文中，我们只使用了一点点 JQuery 和简单的 Javascript 来使项目尽可能简单。 在实际的DApp开发中，你当然可以使用React、Angular或者Vue等方便的框架进行开发。

现在打开“app.js”文件并向其中添加以下代码：

var web3Provider = null;
var WrestlingContract;
const nullAddress = "0x0000000000000000000000000000000000000000";
function init() {
  // We init web3 so we have access to the blockchain
  initWeb3();
}
function initWeb3() {
  if (typeof web3 !== 'undefined' && typeof web3.currentProvider !== 'undefined') {
    web3Provider = web3.currentProvider;
    web3 = new Web3(web3Provider);
  } else {    
    console.error('No web3 provider found. Please install Metamask on your browser.');
    alert('No web3 provider found. Please install Metamask on your browser.');
  }
  
  // we init The Wrestling contract infos so we can interact with it
  initWrestlingContract();
}

首先要做的当然是创建一些必要的变量并初始化 Web3 提供程序变量。 默认情况下，用户在使用 Dapp 时将继续运行 web3 提供程序。 目前大多数用户通过加载了“Metamask”插件的Chrome或Firefox浏览器与以太坊区块链进行交互，所以我们可以默认Metamask会在网页中加载一个web3实例，当然如果没有检测到Metamask，提示用户安装插件。

现在要添加与合约交互所必需的函数，首先我们需要初始化对已部署合约的引用，即创建函数“initWrestlingContract()”：

function initWrestlingContract () {
  $.getJSON('Wrestling.json', function(data) {
    // Get the necessary contract artifact file and instantiate it with truffle-contract
    WrestlingContract = TruffleContract(data);
    // Set the provider for our contract
    WrestlingContract.setProvider(web3Provider);
    // listen to the events emitted by our smart contract
    getEvents ();
    // We'll retrieve the Wrestlers addresses set in our contract using Web3.js
    getFirstWrestlerAddress();
    getSecondWrestlerAddress();
  });
}

然后在主体中创建其他函数来接受数据：

function getEvents () {
  WrestlingContract.deployed().then(function(instance) {
  var events = instance.allEvents(function(error, log){
    if (!error)
      $("#eventsList").prepend('
' + log.event + '
'); // Using JQuery, we will add new events to a list in our index.html
  });
  }).catch(function(err) {
    console.log(err.message);
  });
}
function getFirstWrestlerAddress() {
  WrestlingContract.deployed().then(function(instance) {
    return instance.wrestler1.call();
  }).then(function(result) {
    $("#wrestler1").text(result); // Using JQuery again, we will modify the html tag with id wrestler1 with the returned text from our call on the instance of the wrestling contract we deployed
  }).catch(function(err) {
    console.log(err.message);
  });
}
function getSecondWrestlerAddress() {
  WrestlingContract.deployed().then(function(instance) {
    return instance.wrestler2.call();
  }).then(function(result) {
    if(result != nullAddress) {
      $("#wrestler2").text(result);
      $("#registerToFight").remove(); // By clicking on the button with the ID registerToFight, a user can register as second wrestler, so we need to remove the button if a second wrestler is set 
    } else {
      $("#wrestler2").text("Undecided, you can register to wrestle in this event!");
    }   
  }).catch(function(err) {
    console.log(err.message);
  });
}

这些函数的“init()”初始化当然不会是自动的，所以我们需要手动触发：

// When the page loads, this will call the init() function
$(function() {
  $(window).load(function() {
    init();
  });
});

现在我们需要完成 html 页面并将其修改为如下所示：

  
    
    
  
  
    
Wrestling DApp

    

    

      
Today's wrestling event
      
 VERSUS 
      REGISTER TO FIGHT
    
    

      

        
      
    
    
    
    
    
    
    
    
    
  

回到“app.js”脚本，添加“registerAsSecondWrestler”函数，允许用户注册为第二个 Wrestler 玩家：

function registerAsSecondWrestler () {
  web3.eth.getAccounts(function(error, accounts) {
  if (error) {
    console.log(error);
  } else {
    if(accounts.length <= 0) {
      alert("No account is unlocked, please authorize an account on Metamask.")
    } else {
      WrestlingContract.deployed().then(function(instance) {
        return instance.registerAsAnOpponent({from: accounts[0]});
      }).then(function(result) {
        console.log('Registered as an opponent')
        getSecondWrestlerAddress();
      }).catch(function(err) {
        console.log(err.message);
      });
    }
  }
  });
}

至此，我们的 Web 应用程序已完成！ 现在我们需要做一些配置，努力工作。

安装

虽然 html 文件可以直接在浏览器中打开，但由于浏览器安全策略以太坊教程，Metamask 插件无法直接与其交互，因此我们需要使用小型本地 http 服务器来提供该文件。 为了解决这个问题，我们将使用 lite-server：

npm init -y
npm install lite-server --save-dev

在项目的根目录下为lite-server创建一个名为“bs-config.json”的配置文件，并将以下内容粘贴到其中：

{
  "server": {
    "baseDir": ["./src", "./build/contracts"]
  }
}

以上内容将引导lite-server从我们的web应用所在的“src”目录中读取文件，并从“./build/contracts”目录中读取truffle描述智能合约部署的json文件。

然后添加这一行：

"dev": "lite-server",

转到“package.json”中的“scripts”节点：

...
  "scripts": {
    "dev": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

然后在控制台运行以下命令，它会在浏览器中打开“:3000/”：

npm run dev

现在让我们在浏览器上搜索并安装 Metamask。

智能合约

不要忘记在您的测试网络上部署智能合约。 您可以在本教程的第一部分找到摔跤合约，并在第二部分找到测试它的方法。

在这部分，我将使用 Gancache 的 GUI 版本，当然你也可以使用 ganache-cli 来模拟以太坊区块链。

运行以下 truffle 迁移命令来部署智能合约：

truffle migrate --network development

不要忘记检查您的“truffle-config.js”文件是否设置正确。 并检查是否添加了部署合约所需的迁移脚本。

配置元掩码

安装Metamask后，点击小狐狸标志，然后点击左上角弹出的下拉菜单，会看到不同的接入网络，选择“:7545”。 如果弹出的下拉菜单中没有这个选项，点击“Custom RPC”选项，然后添加这个链接，这样Metamask就可以连接到Ganache了。

现在回到Metamsk主界面，点击“restore from seed phrase”，将ganache中生成的12个记忆词复制粘贴到Wallet Seed中，然后在下方一栏输入你的自定义密码。

此步骤将解锁您的第一个帐户，我们之前使用该帐户来部署智能合约。 但是为了更好的模拟，我们将使用 Ganache 生成的第二个账户，所以接下来点击 Metamask 右上角的用户图标，然后选择“导入账户”，粘贴你从 ganache-cli 复制的私钥，如果你正在使用 Ganache 的 GUI 版本，单击钥匙图标进行操作。

测试 DApp

目前，智能合约已经部署在你的测试网络上，web应用准备好了，Metamask也配置好了，一切准备就绪，接下来我们就可以测试DApp了。

首先打开：3000/，这是lite-server为我们的web应用提供服务的链接，你会看到如下图的web应用界面：

- 我们 DApp 中很棒的用户界面 -

确保在当前Metamask中选择了账号2，点击“Register to fight”按钮，通常Metamask会弹出一个窗口，提示你确认转账（如果没有弹出窗口，可以点击小狐狸图标运行）。

当点击提交按钮时，第二个摔跤手的地址应该自动替换为触发呼叫的帐户地址（如果没有自动替换，您可以刷新页面。如果转移失败，请检查您是否按照教程进行操作正确，或者 Metamask 没有错误，因为在我写这个教程的时候，Metamask 确实有问题，目前很多以太坊相关的工具还处于开发阶段，我们应该感谢他们背后的开发者的巨大努力）。

以上就是一个基于以太坊的DApp的全貌，其他的就不用在上面加了。 对于那些希望在DApp后端与智能合约进行交互的开发者，可以使用NPM安装基于Node.js的Web3.js库，并使用Geth或infura.io作为提供者进行开发。 这里有一个关于使用这个想法进行开发的优秀教程。

以下是本教程的源代码链接：

devzl/ethereum-walkthrough-5

如果您觉得本教程难以理解，您可以尝试阅读本教程或本教程。

提升

现在您已经熟悉了开发以太坊智能合约和DApps的所有工具和方法，您可以阅读其他您之前没有想过的教程，阅读本项目中提到的开发工具的文档，并付诸实践. 对于已经通读了整个系列教程的你来说，完成文中提到的 web app 并为智能合约添加其他方法将是一个很好的练习。

您可以加入 Reddit 上的开发社区，您会经常在其中找到有趣的开发新闻。 浏览 WeekInEthereum，了解以太坊世界每周发生的事情。 ethereum forums也是一个很有意思的网站，在以太坊的gitter上经常可以看到热烈的讨论。

至此这一系列的教程已经介绍完了，不过我已经准备好了写下一篇教程的一切。 请注意，以免迷路，下次教程播出时会通知您。

您也可以在 Twitter @dev_zl 上找到我。

原文链接：