在过去的六个月里，tezos上的dapp开发经历了很大的变化，之所以会出现这种变化，是因为引入了强大的工具，使开发人员能够专注于为其dapp提供价值和功能，而忘记了将dapp插入区块链的技术性问题。我们有充分的理由相信区块链溯源会成为行业的主流，会逐步影响越来越多的人。
taquito不需要任何介绍，它是将tezos dapp连接到区块链的实际工具。但不要让它的垄断地位诱惑你，它是一个神奇的工具，将使你的工作不仅快100倍而且更容易。通过几行代码，您的dapp将被设置并连接到区块链和智能合约。taquito将在后台做所有繁重的工作，所以你不必担心它。
beacon是由airgap开发的一个工具包，它会连接到一个钱包(目前是到airgap钱包)，并将交易信号发送到网络上。稳定版本是最近才发布的，但已经很有前途了。在本教程中，我们将使用beacon扩展来签署交易，但你也可以使用手机上的钱包!beacon提供了一个简单、时髦且高效的界面，其中包含大量信息和可定制的选项!
在本教程中，我选择了vanillajavascript来编写dapp，因为它将为您提供所有需要的信息，以便您使用带有becon钱包的taquito，并使代码适应您喜欢的任何框架。我们将要构建的dapp非常简单，它连接到我部署在carthagenet(testnet)上的一个演示智能合约(testnet)来测试不同的功能，dapp有一个按钮连接您的钱包，一个简单的接口将连接来自区块链和智能合约中的所有信息，它为您提供了将数据保存到智能合约中的两个选项。为了继续阅读，您必须至少了解htmlcssjs以及tezos区块链是如何工作的。
准备工作
由于本教程并不关注html或css，所以我准备了一个样板文件，你可以从github上下载，这样我们就可以更快地开始编写javascript了。您可以跟随本教程，检查.js文件中的不同部分，也可以删除该文件并从零开始。
首先要做的是下载必要的软件包。你可以简单地运行npm从项目的根目录安装并检查package.json文件。您将看到我们需要创建一个tezos dapptaquitotaquito^6.3.1-beta.0和@taquitobeacon-wallet^6.3.1-beta.0的两个主要依赖项。这些是本教程的最新版本。
注意：您不需要安装@airgapbeacon-sdk，因为taquito将为您完成它！html在文件中，您将看到它非常简单，主标记包含两个divs：一个显示连接钱包的按钮，另一个显示合同接口。
css文件包含基本的样式信息，您可能注意到稍后我们将覆盖beacon钱包的一些特性时将使用一个toast.css文件。
此时，您应该已经在浏览器中安装了beacon扩展。如果没有，请按照以下说明安装。你需要它与dapp中的智能合约进行交互。
连接你的钱包
现在让我们开始编码
打开一个新的js文件，名为“index.js”。首先，让我们导入所需的依赖项。如果您检查了github repo中提供的index.js文件，您可能会在顶部看到导入“babel-polyfill”。只有在对package使用es6语法时才需要这样做，package是这个项目中使用的bundler。
接下来，我们导入这个项目所需的两个依赖项:
第一行导入beacon钱包类，我们将需要它来创建钱包对象。第二行从taquito导入tezos对象。这是一个多功能的物体，我们将在不同的情况下使用。您还可以看到，我们初始化了一个名为contractaddress的变量，它将保存我们想要连接到的合约的地址(这在开发期间非常有用，因为地址可能经常更改)。
当您运行npm run dev并在:localhost:1234上打开一个新窗口时，您将看到一个大的teal按钮。这是你将点击连接钱包的按钮。 首先，我们必须将它连接到初始化钱包的函数:
之后，我们可以开始编写钱包初始化的不同步骤:
注意，函数必须是异步的。下一步包括设置前面导入的tezos对象。我们将通过调用它的setprovider方法告诉它我们想要连接到哪个网络(这里是carthagenet): 我通常建议包装钱包初始化的步骤或交易过程到一个尝试…因为很多事情都可能出错，所以通知你的用户是至关重要的，如果有些事情没有达到预期的效果。
tezos单例实例，即从@taquitotaquito导入的对象（在文档中称为tezostoolkit）有一个名为接受具有不同属性的对象的setprovider，其中一个名为rpc，它必须是到tezos节点rpc接口的链接。我一般都用smartpy提供的那种，但是你可以用你喜欢的那种。
现在，我们告诉我们的dapp我们要连接到哪个网络，是时候照顾好你的钱包了！首先，我们使用从库导入的类创建一个新的beacon钱包实例：
新的钱包对象必须用包含不同选项的对象实例化。至少，您应该为dapp提供一个名称，该名称将出现在弹出窗口中，用于签署交易。稍后我们将添加更多选项。
在钱包中设置dapp的名称对于一般用户体验来说是一个重要的细节，因为dapp的用户将知道他们正在使用的dapp触发了弹出窗口，而不是其他东西。
然后，您创建一个新的钱包与新的信标钱包（选项）。创建新钱包后，可以通过创建具有类型属性的对象来设置要连接到的网络。默认情况下，beacon 钱包将连接到主网，但您也可以使用车市网络值连接到 carthagenet 或自定义连接到沙盒节点。如果需要，还可以指定要连接到 rpcurl 属性的 rpc url（如果未提供，钱包将连接到其默认 rpc 接入点）。
在决定网络后，钱包对象会提供请求选项方法，该方法将请求连接到指定网络的权限并代表您签署交易。一旦允许，您的钱包配置正确，随时可以工作！在此配置步骤中要做的最后一件事是将钱包设置为 taquito 的默认钱包：
新的钱包 api 在 tezos 对象上提供了一个 setwalletprovider 方法，允许您向 taquito 指示要使用的钱包（设置后）。从现在开始，塔基托将使用信标钱包发送交易！
更新 dapp 接口
创建 dapp 时，始终建议向用户提供有关其帐户的基本信息，如其地址和余额。这种反馈表明他们的钱包设置正确，dapp 连接到区块链及其钱包。
初始化钱包后，您可以很容易地从wallet.permit .address获得用户的地址。一旦你有了地址，你可以使用taquito提供的tezos对象获得用户的余额:
同时，将contract实例保存在内存中是很有用的，这样我们可以在向区块链发送交易时方便地访问它。再一次，多功能的tezos对象将帮助我们。在新的钱包api下，使用tezos.wallet.at(contractaddress)可以为您提供一个智能合约的抽象值。在此过程中，我们可以使用相同的抽象实例来获取合约的存储，并通过调用合约实例上的存储方法来直接使用来自合约的数据并进一步更新dapp接口:
在现实生活中，您可能会使用一个框架来构建dapp，比如react或vue，但我们这里使用的是普通的js，因此必须手动更新dom。我创建了一个简单的函数，用于更新html标签内的文本，以遵循dry (避免重复)原则。首先，我们想隐藏“connect”按钮，显示dapp界面，然后用我们从智能合同中获得的数据更新所有的值:
这里有一些一般性意见:
1. 我通常更喜欢将用户的地址和余额保存在顶层，并在代码的任何地方都可以访问，以避免不必要的代码多次请求地址和余额。大多数钱包在用户登录和登录时都会分发事件，您可以拦截事件来修改地址或余额(稍后我们将看到)。
2. 余额总是在microtez中返回，这对于计算来说非常好，但是对于dapp用户来说很难读取。不要忘记将余额除以1,000,000以得到可读性更强的数字。你可以把它四舍五入，使用tolocalestring(“en-us”)可以让它看起来更好!
3. taquito将这些值作为contractinstance.storage(返回的对象的属性)保存在存储中。这样就可以很容易地访问存储中的值(映射和稍微复杂一点的大映射除外)。
更新智能合约中的消息
现在我们的dapp已经准备好使用智能合约了!
github存储库中提供的javascript文件包含3个函数，用于更改智能合约中的消息，以及整数值的递增递减。我们将在这里编写changemessage函数，您可以尝试自己编写递增和递减函数(如果需要帮助请留言)!
首先，我们创建一个changemessage函数，并用更新消息id将其附加到按钮的单击事件上:
现在是时候考虑一些用户体验建议了。很多dapp用户没有意识到，在主网上向块添加一个交易实际上需要一分钟的时间(在测试网上大约需要30秒)，他们中的一些人会失去耐心，多次点击确认按钮。这将创建多个交易，他们可能会认为第一个交易没有通过而接受这些交易。你必须防止这种情况发生。当它们确认交易时，应该禁用接口的可操作部分，并明确指示它们必须等待。这是下面两行代码的目标:
现在，你的用户不能在当前交易完成之前发送一个新的交易，他们会看到一个小转轮，表明有东西正在加载，他们应该同时等待得到他们输入的消息。如果您愿意，您可以检查是否有消息或字符串是否遵循某些规则。
接下来，再次使用taquito并发送transaction，将消息保存到智能合约中:
下面是发生在几行代码:
1. 我们使用try ... catch ... finally ...语句来包装交易。如果交易由于某种原因而失败，则必须通知用户，以便他们可以停止等待，并可能自己解决问题。
2. 我们之前保存的还有实例公开了一个方法属性，该属性本身包含反映智能合约入口点的属性。在这种情况下，我们要调用changemessage，它将字符串作为参数。结果提供了一个“发送”方法，该方法将把交易发送到tezos节点并返回通过交易操作对象解析的对象。
3. 发送交易后，您必须等待其确认。上一行返回的交易操作对象提供了一种确认方法。如果未提供任何参数，taquito将等待1个块确认。
4. 如果提供数字n作为参数，taquito将在执行以下行之前等待n个块确认。
5. 如果交易失败，您将获得一个错误对象，可用于向用户显示消息。交易处理通过或失败后，您将通过启用确认按钮并卸下微调器使界面返回工作状态。
确认交易后，您可以执行以下操作：
1. 您可以重置消息的值。通常，这是发生了某些事情且消息已“消失”的一个很好的线索。
2. 您应该刷新存储。尽管您也可以只更新包含来自存储中消息的html标记，但是在交易处理之后进行其他更改的情况下，最好在交易处理后获得一个新的存储。如果使用框架，则可能具有带有存储属性的状态，而获取新的存储将更新链接到该状态的接口中的所有数据。
3. 您可以执行一些其他次要更新，例如获取用户的新余额以反映为交易记录借记的气体成本。
自定义beaconsdk
beaconsdk提供了多种自定义方法。
beaconsdk提供多种方法来定制您用户使用钱包的体验。我们来查查其中一个。在交易被发送到更新智能合约后，您可以在dapp中看到一个弹出，为您提供有关交易的有用信息：可能您不希望出现这个弹出，您希望提供一个自定义的响应，比如祝酒词。不要害怕，因为这需要2分钟的时间才能完成！
让我们回到过去。你还记得我们是怎么创造新的beacon钱包的吗？新的beacon钱包中的备用选项对象包含dapp的名称。事实证明，您可以提供更多的选项来自定义您的dapp！在本教程中，我们将使用祝酒词通知我们的用户交易已经成功地发送到网络！
在html文件中，您可以在最下面看到：<divid=“tofas”一些文本。在js文件中，让我们添加一个函数，该函数将显示一条消息，并在3秒后显示并隐藏它：
首先，我们将祝酒词延迟3秒，因为在确认交易后，beacon钱包窗口大约需要2秒才能关闭。然后我们更新祝酒词中的信息，我们显示它3秒，然后再隐藏它。
现在，让我们回到钱包初始化选项，这些选项应该如下所示：
我们将向options对象添加一个事件处理程序属性，以告诉becon，当交易请求被成功发送时，我们想要做什么。事件处理程序属性接受一个对象，您可以根据要捕获的事件设置不同的属性。让我们看看当请求成功时，它是如何处理分派事件的：
该属性必须是github回购中列出的此枚举中的事件之一。每个事件处理程序都接受一个带有处理程序属性的对象，您可以将该属性设置为接收事件数据的承诺。当交易成功时，我们用这个承诺来展示我们的祝酒词。结果是：
现在，默认的beacon弹出窗口不见了，取而代之的是我们的祝酒词。使用这个非常简单的方法，您可以定制来自beacon钱包的响应，例如在出现错误或不同事件（如与钱包连接）时。您也可以使用它来更改用户的地址和平衡，当他们登录到一个不同的地址。
结论
这个非常简单的dapp展示了现在可以在tezos上构建的两个最佳工具的优势:taquito和beacon sdk。两者都提供了广泛的特性、高水平的定制和允许开发人员编写更少的代码并更多地关注用户体验而不是与tezos节点交互的细节的界面。
taquito新的钱包api是使用不同钱包将dapp连接到区块链方向上的巨大进步，beacon钱包最终为tezos dapps提供了一个安全、美观、易用的钱包解决方案。
现在生态系统终于准备好欢迎更多dapp开发人员,所以我们是时候开始构建了。