如何创建以太坊dApp：前端部分

指南“如何创建以太坊dApp”的第一部分涵盖了后端部分。在第二部分中，我们将详细介绍如何创建以太坊dApp的前端。

在开始之前，如前一篇文章所述，可以在此GitLab配置文件中找到所有代码。

有问题的dApp将是一个Web应用程序，因此需要Web技术才能正常工作。

从上图可以看出，前端开发部分需要能够通过浏览器交互和查看区块链上的数据。

如何创建以太坊dApp

该项目使用的技术：

• HTML
• CSS
• 引导
• 使用Javascript
• 的jquery.js
• Web3.js

上面提到的一些技术不是必需的，对于其中一些技术，可以找到各种替代方案（例如使用bootstrap或Jquery），但它们可以简化工作并使界面更具响应性，功能性和美观性

前端部分的骨架取自以下完全免费的Bootstrap模板，尽管它已经过一段时间的建模和扩展，并进行了各种修改。

实施

以太坊区块链和前端部分之间的连接由Web3.js库保证，该库与用于此项目的其他库一样，必须在实际使用之前在代码中调用。

通常，最好在内部调用它们 标签，从下一张图片可以看出。

在这种情况下，库Jquery和Web3的轻量版本已经下载并放在一个名为“vendor”的新文件夹中。

第二个必要步骤是定义对象Web3的实例，其中将指定以太坊区块链的本地地址，方法如下：

为了调用先前开发的智能合约，有必要将其声明为var name_smart_contract = web3.eth.contract（ABI smart contract）;

ABI和创建智能合约

ABI代表应用程序二进制接口，它只不过是用于弥合以Solidity编写的智能合约与javascript代码之间差距的接口。

本质上，它是一个json文件，具有可变长度，具体取决于智能合约的实现，必须在圆括号内复制和粘贴。

要轻松访问ABI，需要执行以下步骤：

• 从PowerShell类型：npm install -g truffle-export-abi
• 下一个类型：truffle-export-abi
• 将在构建目录中创建ABI文件

使用文本编辑器打开文件，然后复制并粘贴函数中的所有内容。

另一个基本步骤是指定创建的智能合约的以太坊地址。

为此，只需编写var contract = name_smart_contract.at（“address_smart_contract”）。

在第一次进行的交易中，可以很容易地在Ganache上找到该地址。

按照本指南中指明的确切顺序，它应位于第三笔交易的“合约创建”标题下。现在有必要复制表示为“创建的合约地址”的地址，并将其插入上一个函数的引号中。

此时，通过调用先前编写的函数和任何公共属性，可以与智能合约正确交互。

智能合约的运作

这个以太坊dApp的主要功能是购买，它已在智能合约中定义如下：

以下是该任务的简要说明。

它将艺术作品的ID和成本作为输入。然后输入买方和卖方的地址。检查买方的余额以确定是否足以支付该项目，如果是，则调用智能合约以证明区块链上的购买。此外，进行交易，其中购买所需的以太从买方的地址移动到卖方的地址。

其次，屏幕上出现弹出窗口以警告用户操作成功或失败。之后，重新加载页面以允许更新主页，使得已经购买的艺术品被分类为已售出，并且不可能再次购买相同的产品。这种可能性通过图形界面被拒绝，但无论如何，由于智能合约中插入了支票，因此不可能购买两倍相同的元素。

然后在每张卡的onclick功能内调用购买功能，该功能代表待售的艺术品，如下图所示。

所有者表

创建了第二个名为“Owners.html”的页面，其中动态构建了一个表，每次重新加载页面时，都会调用getBuyers（）函数。它返回艺术品买家的当前地址列表。此数据用于填写表格。

一切都按以下方式完成：

如果地址以“0x00”开头，则表示它是一个空的以太坊地址，因此没有针对给定图稿的认证买方。

必须在正文中定义具有适当ID的表，以便可以通过jQuery提供的document.getElementById函数轻松访问它。

此时，整个基础架构已经创建，一切都应该完美运行。

“所有者”页面中的表格将使用艺术品买方的地址动态更新，并且通过使用Ganache，可以查看智能合约的每次调用，该调用通过给定图稿的地址来证明所有权。

该物业由以下事实保证：只有该以太坊地址的实际所有者才能通过其私钥访问相应的钱包。

包含后端和前端的整个项目代码可以在此GitLab配置文件中找到。

帖子如何创建以太坊dApp：前端部分首先出现在The Cryptonomist上。