您好！今天，我们将介绍如何构建一个可以与Ethereum智能契约交互的web应用程序。这种互动非常有吸引力，因为它将为那些想在区块链周边开发应用程序的网络开发者打开一个新的可能性世界。

在本教程中，我们将构建一个微智能契约来存储和检索区块链以太网中的数据，并创建一个网络应用程序来允许我们访问和更改智能契约上的数据。

* *智能合同* *

让我们首先介绍我们将用来构建web应用程序的智能契约。由于本文的重点是将JavaScript连接到区块链，所以我尽量简化合同：

务实稳健的^0.6.6；

合同酷数合同{

uint public coolNumber=10

函数SetCoolNumber(uint _ CoolNumber)public {

coolNumber=_ coolNumber

{}

{}

也许这不是历史上印象最深刻的聪明合同，但现在还可以。如果你不确定这个聪明的合同是为了什么，让我解释一下。

智能合同酷数合同在区块链存储一个名为酷数的变量，初始值为10。这个变量是一个公共函数，这意味着我们可以在不构建getter函数的情况下从区块链访问它的值。

此外，智能契约还包含一个名为setCoolNumber的公共函数，正如您可能已经猜到的那样，它将更改区块链中的变量值。这里需要记住的真正重要的一点是，区块链数据的任何变化都必须用交易来表示。这意味着调用方法setCoolNumber将需要一个事务，该事务将有一个与之相关联的气体费用。

继续之前，请确保将智能合同部署到测试网络。

设置项目和依赖项

这就是乐趣的开始。要在JavaScript中与任何区块链以太网交互，您将需要一个库。在我们的例子中，我们将使用web3。Web3将允许我们通过Web3提供商(如元掩码或Gan3)与任何以太网网络进行交互。

让我们开始一个新项目。您可以使用任何想要的框架。我会用原来的JavaScript和HTML，但是你可以用任何框架，比如React或者Vue。我所有的代码都将被放入一个文件index.html，我将从下面的结构开始：

！DOCTYPE html

html

头

meta charset='utf-8 '

元http-equiv='X-UA-Compatible '内容='IE=edge '

标题Web 3演示/标题

元名称='视口'内容='宽度=设备宽度，初始比例=1 '

脚本src=' node _ modules/web 3/dist/web 3 . min . js '/脚本

/head

身体

网络3演示

英国铁路公司

button onclick=' PrintCoolNumber()；'打印冷号/按钮

按钮onclick=' ChangeCoolNumber()；'更改冷号/按钮

br /br /

状态：跨度id=“状态”加载./span

脚本类型='text/javascript '

/script

/body

/html

让我们分解上面的代码，从body标签开始。这是一个简单的用户界面，有两个按钮和一个指示状态的范围。两个按钮都调用尚未定义的JavaScript函数。

在头部标签上，重要的标签是我们正在导入的脚本。那就是我们对web3的依赖。您可以像我一样将这种依赖关系添加到您的代码中，或者如果您正在使用框架，您可以使用以下命令简单地导入包：

从“Web3”导入web 3；

如果图书馆还没有安装，可以通过NPM:

npm安装web3

最后，在继续之前，我强烈建议您安装元掩码扩展。如果您更喜欢使用任何其他提供者，您可能需要相应地更改一些代码，因为所提供的示例使用了由MetaMask注入的web3提供者。

将网络应用程序连接到以太网块链

现在我们已经准备好了基本结构和依赖关系，我们可以添加将应用程序连接到区块链的代码。

在正文的脚本标签中，我们将添加：

异步函数loadWeb3() {

if (window.ethereum) {

window . web 3=new Web3(window . ether eum)；

window . ether eum . enable()；

{}

{}

异步函数加载(){

wait LoadWeb3()；

更新状态('就绪！')；

{}

函数updateStatus(status) {

const Statusel=document . GetElementBYid(' status ')；

statusEl.innerHTML=status

console.log(状态)；

{}

load()；

以上代码都很简单，除了loadWeb3这个函数，我们会进一步解释。该功能负责建立连接并授权我们与区块链互动。

为了使用我们的智能契约，我们需要一个新的Web3实例。创建此实例时，您需要指定要使用的提供程序。当我们使用元掩码作为代理时，我们使用由元掩码扩展注入的window.ethereum提供程序。

如果您现在转到浏览器并通过文件或网络浏览器加载页面，您将看到元掩码授权过程。应该是这样的：

请务必接受并将您的钱包连接到您的应用程序以继续。

访问智能合同

到目前为止，您的代码可以访问与区块链的交互。确保您的应用程序可以与智能合同进行交易。

为此，我们将创建一个新函数来创建与您的合同接口相匹配的合同实例：

异步函数loadContract() {

返回等待新窗口.网站3.eth.Contract(ABI，contract address)；

{}

要获得区块链任何合同的实例，我们需要做两件事：合同的ABI规范和合同地址，这两者都可以从Remix中提取。

要获取合同的ABI规范，请转到“编译”选项卡上的“混音”，确保进行编译，然后单击ABI:

这个按钮将把你的合同的ABI规范复制到剪贴板上的JSON数组中，我们可以直接把它作为第一个参数的一部分。

第二个参数是部署的合同地址，可以在部署时从Remix或Etherscan获取。

以下是完整的功能代码如何找到我的智能合同：

异步函数loadContract() {

返回等待新窗口。web3.eth.Contract([

{

输入' : []，

姓名' : '酷数'，

outputs': [

{

internalType': 'uint256 '，

名称' : ' '，

键入' : 'uint256 '

{}

]，

状态可变性' : '视图'，

键入“:”函数

}，

{

输入' : [

{

internalType': 'uint256 '，

名称' : ' _酷数'，

键入' : 'uint256 '

{}

]，

名称' : '设置酷号'，

outputs': []，

状态可变性' : '不可访问'，

键入“:”函数

{}

]，'0x5f 4 A8 c 71 AFB 0 c 01 ba 741106d 418 e 7888607 ee 63 ')；

{}

完成后，我们可以简单地从加载器函数调用loadContract:

异步函数加载(){

wait LoadWeb3()；

window . contract=await LoAdContract()；

更新状态('就绪！')；

{}

从智能合同中解读价值

我们准备好开始调用智能契约函数，并将从从契约中检索我们的coolNumber开始。

借助web3，我们可以非常快速地从智能合同中检索数据。这是一个获取公共变量coolNumber值的示例：

异步函数printCoolNumber() {

更新状态('正在获取酷号码.')；

const CoolNumber=wait window . contract . methods . CoolNumber()。call()；

updateStatus(` cool number : $ { cool number } `)；

{}

超级容易！我们使用上一节中的契约实例，获取方法并调用带有变量名的函数(这是我在开始提到的getter)。最后，我们使用调用来启动远程请求。

更新智能合同的价值

最后，我们需要确保我们也可以使用智能合同进行交易。为此，我们将通过访问setter函数来显示一个例子，从而改变存储在契约中的coolNumber。

我们的更改功能将简单地分配一个新的随机数，并将其保存在区块链：

async函数changeCoolNumber() {

const value=Math . floor(Math . random()* 100)；

updateStatus(`用${value}更新CoolNumber ')；

const account=wait GetCurrentAccount()；

const CoolNumber=wait window . contract . methods . SetCoolNumber(值)。发送({ from : account })；

更新状态('已更新')；

{}

这里我想强调两点。首先，我们引用一个getCurrentAccount()函数，这个函数还没有定义。我们以后再处理。其次，我们怎么称呼setter。如果您注意到从智能契约调用setCoolNumber方法的行，它看起来与我们为调用者所做的略有不同：

const CoolNumber=wait window . contract . methods . SetCoolNumber(值)。发送({ from : account })；

我们不使用调用，而是使用发送方法。我们需要指定发送者帐户。为什么？事实证明，我们需要一笔交易来改变区块链的价值。也就是说，一个事务需要一个“从”和“到”帐户才有效——从事务的发起者到智能合同地址。

我们可以用任何账户作为起始值吗？不，它必须是您有权访问的帐户(在我们的情况下，该帐户已在您的元口罩钱包中注册)，因为您需要授权交易并确认煤气费。

现在我们已经弄清楚了这一点，让我们构建getCurrentAccount()方法：

异步函数getCurrentAccount() {

const accounts=wait window . web 3 . eth . GetAccounts()；

返回帐户[0]；

{}

Web3很棒。我们可以与区块链和钱包互动，因此我们可以通过网络3请求钱包中注册的帐户信息。在我们的例子中，我们只需要把它们都拿走，用第一个账户来交易。

把它们放在一起。

如果你完成了所有的功能，代码应该和我的差不多。测试时，您应该会看到类似于以下内容的内容：