# 如何构建您的第一个 Archway dApp

**Published by:** [Archway中文资料](https://paragraph.com/@archway/)
**Published on:** 2022-03-24
**URL:** https://paragraph.com/@archway/archway-dapp-2

## Content

dApp 是支撑区块链的生计。dApp 的前端通常是一个托管网站，用户在该网站上连接您的智能合约以进行查询或交易。 在本文中，我们将在 Archway 上构建一个 dApp 前端。为此，首先我们需要使用Archway 开发者 CLI创建一个智能合约项目。如果您还没有这样做，请查看快速入门指南以快速启动和运行。 入门 将你的 dApp 连接到 Archway 网络需要三个可以使用NPM安装的依赖项。 您需要安装的软件包是：](https://images.mirror-media.xyz/publication-images/hRhczw4fpTQ0gJhm-VzsD.png?height=393&width=700)@cosmjs/proto-signing@cosmjs/stargate@cosmjs/cosmwasm-stargate@cosmjs / proto -signing是一个包含基于protobuf的消息签名实用程序的软件包，用于将您的 dApp 前端连接到用户的钱包。 @ cosmjs / stargate是Cosmos SDK的客户端库，@ cosmjs / cosmwasm - stargate扩展了CosmWasm智能合约的功能；我们需要它，因为 Archway 智能合约基于CosmWasm。 如果您还没有，请继续创建一个新的 Web 应用程序，这样您就可以在某个地方放置您的代码，那么让我们开始吧！ 连接到钱包让我们从一个简单的测试开始。在此示例中，我们使用硬编码的助记符字符串连接到 protobuf 签名者。https://gist.github.com/drewstaylor/6fd9357d8edc94dac79d5559f1304423/raw/72079f9210663c13743fabaa4701ebf9682d4835/connectWallet.js 上面的代码片段设置了康斯坦丁测试网的汽油价格，并授权钱包执行交易。这很酷，但还没有为公众消费做好准备；为此，我们需要我们的 dApp 使用Keplr钱包等浏览器扩展连接到用户的钱包。 安装扩展后，您会注意到 Keplr 作为活动页面的 JavaScript窗口对象的属性暴露给网页。为了连接到你的 dApp，Keplr 需要知道一些关于它连接的链的元数据，以及存储在那里的合约类型。https://gist.github.com/drewstaylor/fd6b5449ddabb3b62154900b9b0980cd/raw/8b7b1746ab84e97178efdfdaca82a89586f8a090/chainInfo.constantine.js 有了这个，我们可以使用ChainInfo为康斯坦丁测试网设置 Keplrhttps://gist.github.com/drewstaylor/214eb298d14e6958106db999dedd43fe/raw/bfa1f1124c5509a1339fee55290254bb16ba3462/connectWallet.keplr.js 现在任何访问我们网页的人都可以授权他们的 Keplr 钱包与我们的 dApp 进行交互。我们的 dApp UI 只需要显示一个按钮，该按钮调用我们的connectKeplrWallet函数作为onclick事件。查询牌坊网络之前我们存储了对CosmWasmClient的引用，我们将使用它来查询和交易我们的 dApp 合约。 对于一般的链查询，比如账户余额，我们可能再次需要关于网络本身的元数据，但我们可以重用我们的ChainInfo对象。 以下是请求用户余额的一般查询可能的样子。请注意getBalance函数是**@cosmjs/cosmwasm-stargate**包本身的一部分。https://gist.github.com/drewstaylor/769f41d158b1096ff9cfbccdb2e54daa/raw/ec73d1c65bb028efa4f175aae5097d0cb796e710/getBalance.js 如果我们想查询合约数据，我们也可以这样做，但我们需要合约地址和入口点参数。 入口点是公开暴露的合约功能。如果你调用一个不需要参数的函数，我们使用语法 {} 来表示没有参数。 以下是查询不带参数的智能合约入口点的样子：https://gist.github.com/drewstaylor/42fae013120aab6fec0aa0ade23d0c8e/raw/1b7487a62beadf18d3fea3d96eb14d1e58399a62/archwayQuery.js 即使您不发送构造函数参数，您仍然需要指定入口点名称。上面的例子引用了我们之前设置的函数queryHandler 。dApp 交易让你的 dApp 与最终用户进行交易或多或少与查询相同，它只是使用不同的模块，但前面的规则适用：你需要合约地址、入口点名称（在蛇情况下）和参数（可选） . 同样，如果入口点不需要构造函数参数，请使用 {} 表示没有参数。 下面是从 dApp 向不带参数的入口点发起交易的样子https://gist.github.com/drewstaylor/2f5c0e946003bc85b19862383a8af29f/raw/6d5cc8c6d7fac3ed4f59dbb650303e01f5bc257a/archwayTx.js 这个例子引用了我们之前设置的gasPrice变量。尝试自己开发我们在 GitHub 上有一些工作 dApp 前端的示例，并且我们每周都会添加更多。您可以在我们的dApp 示例存储库中找到它们。 任何问题？加入我们的 Discord，我们将在那里帮助您完成。 宇宙见！🧑‍🚀 ***Archway ***是一个奖励开发者的智能合约平台。Archway 专为灵活开发和轻松部署到 Cosmos 而设计，可实现可扩展的跨链 dApp，以覆盖尽可能多的用户和资产。 准备好开始建造了吗？在此处查看我们的文档。 想要了解 Archway 的最新动态吗？ 通讯// Discord // Twitter // Github // Telegram

## Publication Information

- [Archway中文资料](https://paragraph.com/@archway/): Publication homepage
- [All Posts](https://paragraph.com/@archway/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@archway): Subscribe to updates