在过去的六个月里，Dapp在Tezos上的发展经历了巨大的变化。这种变化的原因是引入了强大的工具，使开发人员能够专注于为他们的Dapp提供价值和功能，而忘记了将Dapp插入区块链的技术问题。

塔基多不需要任何介绍，它是一个实用的工具，可以将特佐斯达普与区块链联系起来。但是不要让它的垄断诱惑你。这是一个神奇的工具，它会让你的工作快100倍，更容易。用几行代码，你的Dapp将被设置并连接到区块链和智能合同。塔基多将在后台完成所有繁重的工作，所以你不用担心。

信标是一个由Airgap开发的工具包，它连接到一个钱包(目前是Airgap钱包)，并向网络发送交易信号。稳定版本是最近才发布的，但它已经很有希望了。在本教程中，我们将使用Beacon扩展来签署交易，但您也可以使用手机上的钱包！信标提供了一个简单，时尚和有效的界面，其中包含了大量的信息和可定制的选项！

在本教程中，我选择了vanillaJavaScript来编写DAPP，因为它将为您提供使用Taquito和Becon wallet所需的所有信息，并使代码适应您喜欢的任何框架。我们要建立的民主行动党非常简单。它与我在迦太基网络(Testnet)上部署的用于测试不同功能的智能契约(Testnet)相连接。DAPP有一个按钮可以连接到你的钱包，一个简单的界面可以连接区块链和智能合同的所有信息。它为您提供了两个选项来保存智能合同中的数据。要继续阅读，你必须至少理解超文本标记语言/超文本标记语言/超文本标记语言和泰索斯区块链是如何工作的。

准备工作

由于本教程不关注HTML或CSS，我准备了一个模板文件，您可以从Github下载，这样我们就可以更快地开始编写JavaScript了。您可以遵循本教程并检查的不同部分。js文件，或者您可以删除该文件并从头开始。

首先要做的是下载必要的软件包。您可以简单地运行npm，从项目的根目录安装并检查package.json文件。您将会看到我们需要创建两个主要的依赖项：tezos dapp : @ tax uoto/tax uoto 6 . 3 . 1-beta . 0和@ tax uoto/beacon-wallet 6 . 3 . 1-beta . 0。这些是本教程的最新版本。

注意：你不需要安装@airgap/beacon-sdk，因为塔基多将为你完成它！在文件中，你会看到它非常简单。主标签包含两个ps:一个显示连接钱包的按钮，另一个显示合同界面。

Css文件包含基本的样式信息，你可能会注意到，当我们稍后介绍Beacon wallet的一些特性时，我们将使用toast.css文件。

此时，您应该已经在浏览器中安装了信标扩展。如果没有，请按照以下说明安装。您需要它与Dapp中的智能合同进行交互。

连接您的钱包

现在让我们开始编码

打开一个名为“index.js”的新JS文件。首先，让我们导入所需的依赖项。如果您查看Github repo中提供的index.js文件，您可能会在顶部看到导入“babel-poly ill”。只有当您对包使用ES6语法时，这才是必要的，这是本项目中使用的bundler。

接下来，我们导入这个项目所需的两个依赖项：

第一行导入信标钱包类，我们需要创建一个钱包对象。第二行从塔基多导入Tezos对象。这是一个多功能物体，我们将在不同的情况下使用。您还可以看到，我们初始化了一个名为contractAddress的变量，它将保存我们想要连接的合同的地址(这在开发过程中非常有用，因为地址可能会经常变化)。

当您运行npm run dev并在http://localhost:1234上打开一个新窗口时，您将看到一个大的青色按钮。这是您将点击连接钱包的按钮。首先，我们必须将其连接到初始化钱包的函数：

之后，我们可以开始编写钱包初始化：的不同步骤

请注意，该函数必须是异步的。下一步包括设置之前导入的Tezos对象。我们将通过调用它的setProvider方法(这里是迦太基):来告诉它我们想要连接到哪个网络。我通常建议将钱包初始化步骤或交易过程打包成一个尝试……因为很多事情都可能出错，如果有些事情没有达到预期的结果，通知用户是非常重要的。

Tezos singleton实例，即从@ tax uoto/tax uoto(在文档中称为TezosToolkit)导入的对象有一个名为的SetProvider，用于接受具有不同属性的对象，其中一个属性名为rpc，它必须是Tezos节点的rpc接口的链接。我通常使用SmartPy提供的那种，但是你可以使用你喜欢的那种。

现在，我们告诉我们的Dapp我们想连接到哪个网络。是时候保管好你的钱包了！首先，我们使用从库中导入的类来创建一个新的信标钱包实例：

新钱包对象必须用具有不同选项的对象进行实例化。至少，您应该为Dapp提供一个名称，该名称将出现在签署交易的弹出窗口中。稍后我们将添加更多选项。

在钱包中设置Dapp的名称对于一般用户体验来说是一个重要的细节，因为Dapp的用户将知道他们正在使用的Dapp触发了弹出窗口，而不是别的什么。

然后你创建一个新的钱包和一个新的信标钱包(选项)。创建新钱包后，您可以通过创建具有类型属性的对象来设置要连接的网络。默认情况下，信标钱包将连接到主网络，但您也可以使用汽车市场网络值连接到迦太基或自定义连接到沙盒节点。如有必要，您还可以指定rpcUrl来连接到RPC网址属性(如果没有提供，钱包将连接到其默认的RPC访问点)。

确定网络后，wallet对象提供一个请求选项方法，该方法将请求连接到指定网络的权限，并代表您签署交易。一旦允许，您的钱包配置正确，并准备工作！在此配置步骤中，最后要做的事情是将钱包设置为塔基多的默认钱包：

新的钱包应用编程接口在Tezos对象上提供了一个setWalletProvider方法，它允许您向Taquito指示要使用的钱包(在设置之后)。从现在开始，塔基托将使用信标钱包发送交易！

更新Dapp接口

创建Dapp时，总是建议向用户提供有关其帐户的基本信息，例如他们的地址和余额。这个反馈表明他们的钱包设置正确，并且Dapp连接到区块链和它的钱包。

初始化钱包后，您可以很容易地从钱包.许可证.地址中获得用户的地址。一旦您有了地址，您就可以使用塔基多提供的Tezos对象来获得用户的余额：

同时，将合同实例保存在内存中很有用，这样我们在向区块链发送事务时就可以很容易地访问它。多功能Tezos物体将再次帮助我们。在新的钱包应用编程接口下，tezos.wallet.at(合同地址)可以为您提供智能合同的抽象价值。在这个过程中，我们可以使用相同的抽象实例来获取契约的存储，并通过调用契约实例上的存储方法来直接使用契约中的数据，并进一步更新Dapp接口：

在现实生活中，您可能会使用一个框架来构建Dapp，比如Response或Vue，但是我们在这里使用普通的JS，所以我们必须手动更新DOM。我创建了一个简单的函数来更新HTML标签中的文本，以遵循DRY的原则。首先，我们想隐藏“连接”按钮，显示Dapp界面，然后用我们从智能合同中获得的数据更新所有值：

以下是一些一般性评论：

1.我通常更喜欢在顶层保存用户的地址和余额，并在代码中的任何地方访问它，以避免不必要的代码多次请求地址和余额。大多数钱包在用户登录时分发事件。您可以截取事件来修改地址或余额(我们将在后面看到)。

2.余额总是在microtez中返回，这对于计算来说非常好，但是对于Dapp用户来说很难阅读。别忘了把余额除以1，000，000，得到一个更易读的数字。你可以把它弄圆，然后用一个本地字符串(“en-us”)使它看起来更好！

3.Taquito将这些值保存在存储中，作为contractInstance.storage(返回对象的属性)。这使得访问存储中的值变得容易(除了映射和稍微复杂一点的大型映射)。

更新智能合同中的消息

现在我们的Dapp已经准备好使用智能合同了！

Github存储库中提供的JavaScript文件包含三个函数，用于更改智能契约中的消息和增加/减少整数值。我们将在这里编写变更消息函数，您可以尝试自己编写递增和递减函数(如果您需要帮助，请留言)！

首先，我们创建一个变更消息函数，并将其附加到具有更新消息标识：的按钮的点击事件上

现在是考虑一些用户体验建议的时候了。许多Dapp用户没有意识到在主网络上向一个块添加一个事务实际上需要一分钟(在测试网络上大约需要30秒)，他们中的一些人会失去耐心并多次点击确认按钮。这将创建多个事务，他们可以接受这些事务，因为第一个事务失败了。你必须防止这种情况发生。当他们确认事务时，他们应该禁用接口的可操作部分，并明确表示他们必须等待。这是下面两行代码的目标：

现在，您的用户不能在当前事务完成之前发送新事务。他们会看到一个小轮子，表示有东西在加载。他们应该同时等待他们输入的消息。如果您愿意，您可以检查是否有消息或者字符串是否遵循某些规则。

接下来，再次使用Taquito并发送事务，将消息保存到智能合同：

以下是在代码：的几行中发生的情况

1.我们尝试.捕捉.最后.语句来包装事务。如果事务由于某种原因失败了，必须通知用户，这样他们就可以停止等待，并有可能自己解决问题。

2.我们还保存了一个公开方法属性的示例，该属性包含反映智能契约入口点的属性。在这种情况下，我们称之为changeMessage，它以一个字符串作为参数。结果提供了一个“发送”方法，该方法将事务发送到Tezos节点，并返回由事务操作对象解析的对象。

3.发送交易后，您必须等待其确认。上一行返回的交易操作对象提供了一种确认方式。如果没有提供参数，塔基多将等待1个块确认。

4.如果提供数字n作为参数，Taquito将在执行下一行之前等待n个块的确认。

5.如果事务失败，您将获得一个错误对象，该对象可用于向用户显示消息。在事务处理通过或失败后，您将启用确认按钮并移除微调器以使界面返回工作状态。

确认交易后，您可以执行以下操作：

1.您可以重置消息的值。通常，这是一个很好的线索，表明发生了一些事情，消息已经“消失”。

2.您应该刷新存储。虽然您只能更新包含来自商店的消息的超文本标记语言标签，但是如果在事务处理后进行了其他更改，最好在事务处理后获得一个新的商店。如果您使用一个框架，您可能有一个带有存储属性的状态，并且获取一个新的存储将更新链接到该状态的接口中的所有数据。

3.您可以执行一些其他的小更新，例如获取用户的新金额，以反映交易借记的燃气成本。

自定义信标DK

信标DK提供了多种定制方法。

BeaconSDK提供了几种定制用户钱包体验的方法。让我们检查其中一个。在交易被发送到更新的智能合同之后，您可以在Dapp中看到一个弹出窗口，它为您提供了关于交易的有用信息：您可能不想要这个弹出窗口，但是您想要提供一个定制的响应，例如祝酒。不要害怕，因为要花2分钟才能完成！

让我们回到过去。你还记得我们是如何创造新的信标钱包的吗？新信标钱包中的备用选项对象包含DAPP的名称。事实证明，您可以提供更多选项来定制您的DAPP！在本教程中，我们将使用祝酒词通知我们的用户交易已成功发送到网络！

在超文本标记语言文件中，你可以在底部看到一些文本。在JS文件中，让我们添加一个函数，它将显示一条消息，并在3秒钟后显示和隐藏它：

首先，我们将烤面包延迟了3秒钟，因为在交易确认后，信标钱包窗口关闭大约需要2秒钟。然后我们更新吐司中的信息，显示3秒钟，然后隐藏它。

现在，让我们回到钱包初始化选项，它应该如下所示：

我们将向选项对象添加一个事件处理程序属性，告诉Becon当事务请求成功发送时我们想做什么。事件处理程序属性接受对象，您可以根据要捕获的事件设置不同的属性。让我们来看看请求成功时是如何处理调度事件的：

该属性必须是Github回购中列出的枚举中的事件之一。每个事件处理程序都接受一个带有处理程序属性的对象，您可以将其设置为接收事件数据的承诺。当交易成功时，我们用这个承诺来表示我们的祝贺。结果是：

现在，默认的信标弹出窗口消失了。相反，这是我们的祝酒词。通过这种非常简单的方法，您可以自定义信标钱包的响应，例如，当出现错误或不同的事件(如连接到钱包)时。当用户登录到不同的地址时，您也可以使用它来更改用户的地址和余额。

结论

这个非常简单的Dapp展示了可以在Tezos、Taquito和Beacon SDK上构建的两个最佳工具的优势。两者都提供了广泛的特性、高水平的定制和界面，允许开发人员编写更少的代码，更多地关注用户体验，而不是与Tezos节点交互的细节。

塔基多的新钱包应用编程接口是一个伟大的进步，用不同的钱包连接Dapp和区块链。Beacon wallet最终为Tezos Dapps提供了一个安全、美观且易于使用的钱包解决方案。

现在生态系统终于准备好欢迎更多的Dapp开发者了，是我们开始构建的时候了。