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

By [Archway中文资料](https://paragraph.com/@archway) · 2022-03-24

---

dApp 是支撑区块链的生计。dApp 的前端通常是一个托管网站，用户在该网站上连接您的智能合约以进行查询或交易。 在本文中，我们将在 Archway 上构建一个 dApp 前端。为此，首先我们需要使用Archway 开发者 CLI创建一个智能合约项目。如果您还没有这样做，请查看快速入门指南以快速启动和运行。

入门

将你的 dApp 连接到 Archway 网络需要三个可以使用NPM安装的依赖项。

您需要安装的软件包是：\]([https://images.mirror-media.xyz/publication-images/hRhczw4fpTQ0gJhm-VzsD.png?height=393&width=700](https://images.mirror-media.xyz/publication-images/hRhczw4fpTQ0gJhm-VzsD.png?height=393&width=700))

*   [@cosmjs/proto-signing](https://www.npmjs.com/package/@cosmjs/proto-signing)
    
*   [@cosmjs/stargate](https://www.npmjs.com/package/@cosmjs/stargate)
    
*   [@cosmjs/cosmwasm-stargate](https://www.npmjs.com/package/@cosmjs/cosmwasm-stargate)
    
*   @cosmjs / **proto -signing**是一个包含基于protobuf的消息**签名**实用程序的软件包，用于将您的 dApp 前端连接到用户的钱包。
    
    @ **cosmjs** / **stargate**是[Cosmos SDK](https://v1.cosmos.network/sdk)的客户端库，@ **cosmjs** / **cosmwasm** - **stargate**扩展了[CosmWasm](https://cosmwasm.com/)智能合约的功能；我们需要它，因为 Archway 智能合约基于**CosmWasm**。
    
    如果您还没有，请继续创建一个新的 Web 应用程序，这样您就可以在某个地方放置您的代码，那么让我们开始吧！
    
*     
    

![](https://storage.googleapis.com/papyrus_images/9adb49d5560b9837c0e6e31d84762aa740889cc70e1e7eec6a2a013e81d273e9.png)

连接到钱包
=====

让我们从一个简单的测试开始。在此示例中，我们使用硬编码的助记符字符串连接到 protobuf 签名者。

![    ](https://storage.googleapis.com/papyrus_images/fbd0b3904c7f9cabf1aaf78d22be9e1a5f359cd9af6fdd4127cfdc87841df130.png)

[https://gist.github.com/drewstaylor/6fd9357d8edc94dac79d5559f1304423/raw/72079f9210663c13743fabaa4701ebf9682d4835/connectWallet.js](https://gist.github.com/drewstaylor/6fd9357d8edc94dac79d5559f1304423/raw/72079f9210663c13743fabaa4701ebf9682d4835/connectWallet.js)

上面的代码片段设置了[康斯坦丁测试网](https://docs.archway.io/docs/overview/technology/network)的汽油价格，并授权钱包执行交易。这很酷，但还没有为公众消费做好准备；为此，我们需要我们的 dApp 使用[Keplr](https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap)钱包等浏览器扩展连接到用户的钱包。

**安装扩展后，您会注意到 Keplr 作为活动页面的 JavaScript窗口**对象的属性暴露给网页。

![为了连接到你的 dApp，Keplr 需要知道一些关于它连接的链的元数据，以及存储在那里的合约类型。](https://storage.googleapis.com/papyrus_images/1194f2a32bb0c4c5bb7fa8042125c130ced8a6ba66149bd081d0b0b514661e6a.png)

为了连接到你的 dApp，Keplr 需要知道一些关于它连接的链的元数据，以及存储在那里的合约类型。

![](https://storage.googleapis.com/papyrus_images/5a997782ebb2f902c2fea6e51861de48dec2a97926d7227785653c1a83d536a9.png)

[https://gist.github.com/drewstaylor/fd6b5449ddabb3b62154900b9b0980cd/raw/8b7b1746ab84e97178efdfdaca82a89586f8a090/chainInfo.constantine.js](https://gist.github.com/drewstaylor/fd6b5449ddabb3b62154900b9b0980cd/raw/8b7b1746ab84e97178efdfdaca82a89586f8a090/chainInfo.constantine.js)

有了这个，我们可以使用ChainInfo为康斯坦丁测试网设置 Keplr

![](https://storage.googleapis.com/papyrus_images/faa47259b278856330167bf590fbfcf74e17f9e16984261ab11931684726d851.png)

[https://gist.github.com/drewstaylor/214eb298d14e6958106db999dedd43fe/raw/bfa1f1124c5509a1339fee55290254bb16ba3462/connectWallet.keplr.js](https://gist.github.com/drewstaylor/214eb298d14e6958106db999dedd43fe/raw/bfa1f1124c5509a1339fee55290254bb16ba3462/connectWallet.keplr.js)

现在任何访问我们网页的人都可以授权他们的 Keplr 钱包与我们的 dApp 进行交互。我们的 dApp UI 只需要显示一个按钮，该按钮调用我们的**connectKeplrWallet**函数作为**onclick**事件。

查询牌坊网络
======

之前我们存储了对**CosmWasmClient**的引用，我们将使用它来查询和交易我们的 dApp 合约。

对于一般的链查询，比如账户余额，我们可能再次需要关于网络本身的元数据，但我们可以重用我们的**ChainInfo**对象。

以下是请求用户余额的一般查询可能的样子。请注意**getBalance**函数是\*\*@cosmjs/cosmwasm-stargate\*\*包本身的一部分。

![](https://storage.googleapis.com/papyrus_images/d4f24447e2262ce2c7817df1ac72ae1207e0a3e6b4923f8cbbd127e0760444af.png)

[https://gist.github.com/drewstaylor/769f41d158b1096ff9cfbccdb2e54daa/raw/ec73d1c65bb028efa4f175aae5097d0cb796e710/getBalance.js](https://gist.github.com/drewstaylor/769f41d158b1096ff9cfbccdb2e54daa/raw/ec73d1c65bb028efa4f175aae5097d0cb796e710/getBalance.js)

如果我们想查询合约数据，我们也可以这样做，但我们需要合约地址和入口点参数。

入口点是公开暴露的合约功能。如果你调用一个不需要参数的函数，我们使用语法 {} 来表示没有参数。

以下是查询不带参数的智能合约入口点的样子：

![](https://storage.googleapis.com/papyrus_images/8b96bf78b903b044188888cf13ab8accfeef2180a7581a3f4f60425de4a84537.png)

[https://gist.github.com/drewstaylor/42fae013120aab6fec0aa0ade23d0c8e/raw/1b7487a62beadf18d3fea3d96eb14d1e58399a62/archwayQuery.js](https://gist.github.com/drewstaylor/42fae013120aab6fec0aa0ade23d0c8e/raw/1b7487a62beadf18d3fea3d96eb14d1e58399a62/archwayQuery.js)

即使您不发送构造函数参数，您仍然需要指定入口点名称。上面的例子引用了我们之前设置的函数**queryHandler 。**

dApp 交易
=======

让你的 dApp 与最终用户进行交易或多或少与查询相同，它只是使用不同的模块，但前面的规则适用：你需要_合约地址_、_入口点名称_（在蛇情况下）和_参数_（可选） .

同样，如果入口点不需要构造函数参数，请使用 {} 表示没有参数。

下面是从 dApp 向不带参数的入口点发起交易的样子

![](https://storage.googleapis.com/papyrus_images/374c2ad2c481bb6239110bffb0dbed42baaa517642e8e3f613006247249ac644.png)

[https://gist.github.com/drewstaylor/2f5c0e946003bc85b19862383a8af29f/raw/6d5cc8c6d7fac3ed4f59dbb650303e01f5bc257a/archwayTx.js](https://gist.github.com/drewstaylor/2f5c0e946003bc85b19862383a8af29f/raw/6d5cc8c6d7fac3ed4f59dbb650303e01f5bc257a/archwayTx.js)

这个例子引用了我们之前设置的**gasPrice变量。**

尝试自己开发
======

我们在 GitHub 上有一些工作 dApp 前端的示例，并且我们每周都会添加更多。您可以在我们的[dApp 示例存储库](https://github.com/archway-network/dApp-examples)中找到它们。

任何问题？[加入我们的 Discord](https://discord.gg/archwayhq)，我们将在那里帮助您完成。

宇宙见！🧑‍🚀

\*\*\*[Archway](https://archway.io/) \*\*\*是一个奖励开发者的智能合约平台。Archway 专为灵活开发和轻松部署到 Cosmos 而设计，可实现可扩展的跨链 dApp，以覆盖尽可能多的用户和资产。

_准备好开始建造了吗？_[**_在此处查看我们的文档_**](https://docs.archway.io/docs/create/getting-started/install)_。_

想要了解 Archway 的最新动态吗？

[通讯](https://www.archway.io/updates)// [Discord](https://discord.gg/archwayhq) // [Twitter](https://twitter.com/archwayhq) // [Github](https://github.com/archway-network) // [Telegram](https://t.me/ArchwayUpdates)

---

*Originally published on [Archway中文资料](https://paragraph.com/@archway/archway-dapp-2)*