在现实糊口中，您大概会利用一个框架来构建Dapp，好比React或Vue，但我们这里利用的是普通的JS，因此必需手动更新DOM。我建设了一个简朴的函数，用于更新HTML标签内的文本，以遵循DRY (制止反复)原则。首先，我们想埋没“Connect”按钮，显示Dapp界面，然后用我们从智能条约中得到的数据更新所有的值:
1. 我凡是更喜欢将用户的地点和余额生存在顶层，并在代码的任那里所都可以会见，以制止不须要的代码多次请求地点和余额。大大都钱包在用户登录和登录时城市分发事件，您可以拦截事件来修改地点或余额(稍后我们将看到)。
筹备事情
Beacon是由Airgap公司开拓的一个东西包，它会毗连到一个钱包(今朝是到Airgap钱包)，并将生意业务信号发送到网络上。不变版本是最近才宣布的，但已经很有前途了。在本教程中，我们将利用Beacon扩展来签署生意业务，但你也可以利用手机上的钱包!Beacon提供了一个简朴、时髦且高效的界面，个中包括大量信息和可定制的选项!
此刻是时候思量一些用户体验发起了。许多Dapp用户没有意识到，在主网上向块添加一个生意业务实际上需要一分钟的时间(在测试网上约莫需要30秒)，他们中的一些人会失去耐性，多次点击确认按钮。这将建设多个生意业务，他们大概会认为第一个生意业务没有通过而接管这些生意业务。你必需防备这种环境产生。当它们确认生意业务时，应该禁用接口的可操纵部门，并明晰指示它们必需期待。这是下面两行代码的方针:
3. 您可以执行一些其他次要更新，譬喻获取用户的新余额以反应为生意业务记录借记的气体本钱。
2. 余额老是在microtez中返回，这对付计较来说很是好，可是对付Dapp用户来说很难读取。不要健忘将余额除以1,000,000以获得可读性更强的数字。你可以把它四舍五入，利用toLocaleString(“en-US”)可以让它看起来更好!
新的钱包 API 在 Tezos 工具上提供了一个 setWalletProvider 要领，答允您向 Taquito 指示要利用的钱包（配置后）。以后刻开始，塔基托将利用信标钱包发送生意业务！
1. 您可以重置动静的值。凡是，这是产生了某些工作且动静已“消失”的一个很好的线索。
接下来，再次利用Taquito并发送transaction，将动静生存到智能合约中:
我们将向Options工具添加一个事件处理惩罚措施属性，以汇报Becon，当生意业务请求被乐成发送时，我们想要做什么。事件处理惩罚措施属性接管一个工具，您可以按照要捕捉的事件配置差异的属性。让我们看看当请求乐成时，它是如那里理惩罚分配事件的：
5. 假如生意业务失败，您将得到一个错误工具，可用于向用户显示动静。生意业务处理惩罚通过或失败后，您将通过启用确认按钮并卸下微调器使界面返回事情状态。
Github存储库中提供的JavaScript文件包括3个函数，用于变动智能合约中的动静，以及整数值的递增/递减。我们将在这里编写changeMessage函数，您可以实验本身编写递增和递减函数(假如需要辅佐请留言)!
Tezos单例实例，即从@taquito/taquito导入的工具（在文档中称为TezosToolkit）有一个名为接管具有差异属性的工具的SetProvider，个中一个名为rpc，它必需是到Tezos节点rpc接口的链接。我一般都用SmartPy提供的那种，可是你可以用你喜欢的那种。
2. 您应该刷新存储。尽量您也可以只更新包括来自存储中动静的HTML标志，可是在生意业务处理惩罚之后举办其他变动的环境下，最亏得生意业务处理惩罚后得到一个新的存储。假如利用框架，则大概具有带有存储属性的状态，而获取新的存储将更新链接到该状态的接口中的所有数据。
1. 我们利用try … catch … finally …语句来包装生意业务。假如生意业务由于某种原因而失败，则必需通知用户，以便他们可以遏制期待，并大概本身办理问题。
由于本教程并不存眷HTML或CSS，所以我筹备了一个样板文件，你可以从Github上下载，这样我们就可以更快地开始编写JavaScript了。您可以跟从本教程，查抄.js文件中的差异部门，也可以删除该文件并从零开始。
3. 发送生意业务后，您必需期待其确认。上一行返回的生意业务操纵工具提供了一种确认要领。假如未提供任何参数，Taquito将期待1个块确认。
接下来，我们导入这个项目所需的两个依赖项:
让我们回到已往。你还记得我们是怎么缔造新的Beacon钱包的吗？新的Beacon钱包中的备用选项工具包括DAPP的名称。事实证明，您可以提供更多的选项来自界说您的DAPP！在本教程中，我们将利用祝酒词通知我们的用户生意业务已经乐成地发送到网络！
这里有一些一般性意见:
Taquito新的钱包API是利用差异钱包将Dapp毗连到区块链偏向上的庞大进步，Beacon钱包最终为Tezos Dapps提供了一个安详、雅观、易用的钱经办理方案。
css文件包括根基的样式信息，您大概留意到稍后我们将包围Beacon钱包的一些特性时将利用一个toast.css文件。
自界说BeaconSDK
当您运行npm run dev并在http://localhost:1234上打开一个新窗口时，您将看到一个大的teal按钮。这是你将点击毗连钱包的按钮。 首先，我们必需将它毗连到初始化钱包的函数:
在本教程中，我选择了vanillaJavaScript来编写DAPP，因为它将为您提供所有需要的信息，以便您利用带有Becon钱包的Taquito，并使代码适应您喜欢的任何框架。我们将要构建的DAPP很是简朴，它毗连到我陈设在Carthagenet(Testnet)上的一个演示智能合约(Testnet)来测试差异的成果，DAPP有一个按钮毗连您的钱包，一个简朴的接口将毗连来自区块链和智能合约中的所有信息，它为您提供了将数据生存到智能合约中的两个选项。为了继承阅读，您必需至少相识HTML/CSS/JS以及Tezos区块链是如何事情的。
毗连你的钱包
打开一个新的JS文件，名为“index.js”。首先，让我们导入所需的依赖项。假如您查抄了Github repo中提供的index.js文件，您大概会在顶部看到导入“babel-polyfill”。只有在对package利用ES6语法时才需要这样做，package是这个项目中利用的bundler。
更新智能合约中的动静
首先，我们将祝酒词延迟3秒，因为在确认生意业务后，Beacon钱包窗口约莫需要2秒才气封锁。然后我们更新祝酒词中的信息，我们显示它3秒，然后再埋没它。
4. 假如提供数字n作为参数，Taquito将在执行以下行之前期待n个块确认。
此刻，我们汇报我们的Dapp我们要毗连到哪个网络，是时候照顾好你的钱包了！首先，我们利用从库导入的类建设一个新的Beacon钱包实例：
同时，将contract实例生存在内存中是很有用的，这样我们可以在向区块链发送生意业务时利便地会见它。再一次，多成果的Tezos工具将辅佐我们。在新的钱包API下，利用Tezos.wallet.at(contractAddress)可觉得您提供一个智能合约的抽象值。在此进程中，我们可以利用沟通的抽象实例来获取合约的存储，并通过挪用合约实例上的存储要领来直接利用来自合约的数据并进一步更新Dapp接口:
然后，您建设一个新的钱包与新的信标钱包（选项）。建设新钱包后，可以通过建设具有范例属性的工具来配置要毗连到的网络。默认环境下，Beacon 钱包将毗连到主网，但您也可以利用车市网络值毗连到 Carthagenet 或自界说毗连到沙盒节点。假如需要，还可以指定要毗连到 rpcUrl 属性的 RPC URL（假如未提供，钱包将毗连到其默认 RPC 接入点）。
在抉择网络后，钱包工具会提供请求选项要领，该要领将请求毗连到指定网络的权限并代表您签署生意业务。一旦答允，您的钱包设置正确，随时可以事情！在此设置步调中要做的最后一件事是将钱包配置为 Taquito 的默认钱包：
此刻生态系统终于筹备好接待更多Dapp开拓人员,所以我们是时候开始构建了。2. 我们之前生存的尚有实例果真了一个要领属性，该属性自己包括反应智能合约进口点的属性。在这种环境下，我们要挪用changeMessage，它将字符串作为参数。功效提供了一个“发送”要领，该要领将把生意业务发送到Tezos节点并返回通过生意业务操纵工具理会的工具。
确认生意业务后，您可以执行以下操纵：
更新 Dapp 接口
这个很是简朴的Dapp展示了此刻可以在Tezos上构建的两个最佳东西的优势:Taquito和Beacon SDK。两者都提供了遍及的特性、高程度的定制和答允开拓人员编写更少的代码并更多地存眷用户体验而不是与Tezos节点交互的细节的界面。
该属性必需是Github回购中列出的此列举中的事件之一。每个事件处理惩罚措施都接管一个带有处理惩罚措施属性的工具，您可以将该属性配置为吸收事件数据的理睬。当生意业务乐成时，我们用这个理睬来展示我们的祝酒词。功效是：
在已往的六个月里，Tezos上的Dapp开拓经验了很大的变革，之所以会呈现这种变革，是因为引入了强大的东西，使开拓人员可以或许专注于为其Dapp提供代价和成果，而健忘了将Dapp插入的技能性问题。
此刻我们的Dapp已经筹备好利用智能合约了!
留意：您不需要安装@airgap/beacon-sdk，因为Taquito将为您完成它！HTML在文件中，您将看到它很是简朴，主标志包括两个divs：一个显示毗连钱包的按钮，另一个显示条约接口。
之后，我们可以开始编写钱包初始化的差异步调:
首先要做的是下载须要的软件包。你可以简朴地运行npm从项目标根目次安装并查抄package.json文件。您将看到我们需要建设一个Tezos Dapp:@taquito/taquito^6.3.1-beta.0和@taquito/beacon-wallet^6.3.1-beta.0的两个主要依赖项。这些是本教程的最新版本。
BeaconSDK提供多种要领来定制您用户利用钱包的体验。我们来查查个中一个。在生意业务被发送到更新智能合约后，您可以在Dapp中看到一个弹出，为您提供有关生意业务的有用信息：大概您不但愿呈现这个弹出，您但愿提供一个自界说的响应，好比祝酒词。不关键怕，因为这需要2分钟的时间才气完成！
初始化钱包后，您可以很容易地从wallet.permit .address得到用户的地点。一旦你有了地点，你可以利用Taquito提供的Tezos工具得到用户的余额:
BeaconSDK提供了多种自界说要领。
此时，您应该已经在欣赏器中安装了Beacon扩展。假如没有，请凭据以下说明安装。你需要它与Dapp中的智能合约举办交互。
在钱包中配置Dapp的名称对付一般用户体验来说是一个重要的细节，因为Dapp的用户将知道他们正在利用的Dapp触发了弹出窗口，而不是其他对象。
首先，我们建设一个changeMessage函数，并用更新动静ID将其附加到按钮的单击事件上:
此刻，默认的Beacon弹出窗口不见了，取而代之的是我们的祝酒词。利用这个很是简朴的要领，您可以定制来自Beacon钱包的响应，譬喻在呈现错误或差异事件（如与钱包毗连）时。您也可以利用它来变动用户的地点僻静衡，当他们登录到一个差异的地点。
Taquito不需要任何先容，它是将Tezos Dapp毗连到区块链的实际东西。但不要让它的把持职位诱惑你，它是一个神奇的东西，将使你的事情不只快100倍并且更容易。通过几行代码，您的Dapp将被配置并毗连到区块链和智能合约。Taquito将在靠山做所有沉重的事情，所以你不必担忧它。
在HTML文件中，您可以在最下面看到：<divid=“tofas”>一些文本。在JS文件中，让我们添加一个函数，该函数将显示一条动静，并在3秒后显示并埋没它：
下面是产生在几行代码:
建设 Dapp 时，始终发起向用户提供有关其帐户的根基信息，如其地点和余额。这种反馈表白他们的钱包配置正确，，Dapp 毗连到区块链及其钱包。
3. Taquito将这些值作为contractInstance.storage(返回的工具的属性)生存在存储中。这样就可以很容易地会见存储中的值(映射和稍微巨大一点的大映射除外)。
此刻让我们开始编码
新的钱包工具必需用包括差异选项的工具实例化。至少，您应该为Dapp提供一个名称，该名称将呈此刻弹出窗口中，用于签署生意业务。稍后我们将添加更多选项。
第一行导入Beacon钱包类，我们将需要它来建设钱包工具。第二行从Taquito导入Tezos工具。这是一个多成果的物体，我们将在差异的环境下利用。您还可以看到，我们初始化了一个名为contractAddress的变量，它将生存我们想要毗连到的合约的地点(这在开拓期间很是有用，因为地点大概常常变动)。
此刻，你的用户不能在当前生意业务完成之前发送一个新的生意业务，他们会看到一个小转轮，表白有对象正在加载，他们应该同时期待获得他们输入的动静。假如您愿意，您可以查抄是否有动静或字符串是否遵循某些法则。
结论
留意，函数必需是异步的。下一步包罗配置前面导入的Tezos工具。我们将通过挪用它的setProvider要领汇报它我们想要毗连到哪个网络(这里是Carthagenet): 我凡是发起包装钱包初始化的步调或生意业务进程到一个实验…因为许多工作都大概堕落，所以通知你的用户是至关重要的，假如有些工作没有到达预期的结果。
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
