在互联网计算机上构建前端 Dapp
互联网计算机区块链使开发人员能够使用完全在公共区块链上的容器智能合约构建可扩展的 Web 体验，并通过 Web 浏览器直接为最终用户提供服务。
这篇文章提供了在互联网计算机上构建前端 dapp 的过程的演练，同时利用它支持的新功能。如果它看起来很简单，那就太好了！
我们致力于让区块链开发人员，尤其是已经习惯于在 Netlify、Fastly 或 S3 存储桶上托管静态资产的工程师易于使用此工作流程。
在本教程结束时，您的 dapp 或网站将加入 1,000 多个已经在互联网计算机上运行的其他网站。
为了这个演示，我将使用 Gatsby.js。
入门
首先，我运行命令 npm init gatsby。系统提示我，“你想怎么称呼你的网站？” 我将其称为“contact_book”，我也会为相应的文件夹使用该名称。
接下来，有人问我是否会使用 CMS，我的回答是“不”。我将从样式系统提示中选择“styled-components”作为首选项，跳过其他可选功能，然后我们开始一个新项目！
这将为我设置一个简单的文件结构：
部署静态站点
我们可以通过运行 webpack-dev-server 启动项目 npm run develop，然后我们可以使用命令将项目编译为静态 HTML、CSS 和 JavaScript 资产 npm run build。
为了在互联网计算机上托管项目，我们需要执行以下操作：
在项目的根目录创建并配置一个 dfx.json 文件
安装 dfx SDK
使用 dfx deploy 命令进行部署
创建 dfx.json
因为 Gatsby 将其构建输出编译到 public 目录中，所以我们的 dfx.json 文件将如下所示：
安装 dfx
按照 https://dfinity.org/developers/ 上的说明安装 SDK，我们使用 WSL 或 VirtualBox，支持 Mac、Linux 和 Windows。
部署您的网站
首先运行 npm run build 编译您的网站，您现在可以 dfx deploy --network ic --no-wallet 从与 dfx.json 相同的目录运行，将您的网站发布到互联网计算机。
站点部署完成后，您可以通过运行 dfx canister id www 找到您的容器 ID，然后导航到 https://{canisterId}.ic0.app。
如何充值你的第一个容器
我们现在有一个关于如何支付和设置您的第一个容器的指南，基本流程（目前）基本上是这样的：
在 NNS dapp 中使用 ICP 创建一个容器
将该容器链接到您的 dfx 主体
部署到现有容器
需要时使用 NNS 接口用 Cycles 装满容器
喘口气
恭喜 - 您已经部署了您的第一个互联网计算机 Web 应用程序！这很有可能是您基于区块链技术构建的第一个应用程序，值得庆祝。
您将看到从 HTML 到图像的所有资产都正常运行，就好像您直接从老式 Nginx 或 PHP 静态服务器中提取它们一样。
自定义应用程序
现在让我们稍微自定义一下这里的代码。我想构建一个通讯录，所以让我们用我们新的应用程序逻辑替换 src/pages/index.js 中的逻辑。
基本上，我们有一个允许用户创建联系人的表单，一个通过电子邮件地址搜索联系人的输入，以及一个呈现已保存联系人的组件。
我们可以通过多种方式来保存这些信息，我可能首先将数据作为简单文本写入 localStorage、Firebase 或 MongoDB Atlas，并使用 JSON.stringify() 进行编码。
今天，我将在互联网计算机上使用容器智能合约保存该数据。
添加后端
我们需要进行一些更改以修改我们的项目以添加后端容器。
为我们的合约添加源代码
为后端容器配置 dfx.json
配置 Gatsby 以别名我们由 dfx 生成的代码
使用 @dfinity/agent npm 包通过 Actor 调用后端
将 Actor 连接到我们的应用程序逻辑
添加我们的后端逻辑
我将创建一个 Motoko 容器，它将实现存储在 HashMap 中的设置和获取信息的简单逻辑。
这里没有深入研究细节，这段代码使用一个稳定的 var 来保存我们的数据在升级过程中，并初始化一个友好的 HashMap 接口，该接口存储具有 Text 类型键和 Text 类型值的数据。
然后我们实现我们的 set 和 get 接口，并添加 preupgrade 和 postupgrade 钩子，再次在升级中保留数据。
我会将其保存到 src 目录中的一个新文件夹中，位于 src/backend/contact_book/Main.mo。
这段代码是用 Motoko 编写的，这是一种由 Dfinity 维护的语言，专门针对互联网计算机的功能。
IC 支持任何可以编译为 Web Assembly 的语言，Rust 和 C 是容器开发的其他流行选择。Motoko 是一种开源语言，您可以在官网了解更多信息。
配置 dfx.json
现在我们需要配置 dfx 以了解我们的新容器，我们将为它添加一个新的容器对象，并将其链接为前端容器的依赖项。看起来像这样：
配置 Gatsby
接下来，我们需要使用别名来更新 Gatsby，该别名指向 dfx 动态生成的代码，该代码将位于项目中隐藏的 .dfx 文件夹中。
我们将在我们项目的根目录中创建一个 gatsby-node.js 文件，并编写一些代码，这些代码将使用我们在 dfx.json 中的设置来为我们的新后端导入我们的自定义接口。
此外，我们将向 gatsby-config.js 文件添加一个代理，代理 localhost:8000，这是我们 dfx 副本的默认地址。
使用 @dfinity/agent
现在我们已经为 dfx 生成的资源设置了别名，我们可以导入它们并在我们的代码库中使用它们。
所以接下来我将创建 src/actor.js 并从 dfx-generated/contact_book 导入 @dfinity/agent。
在这里，我们创建了一个代理并将其与从后端接口生成的代码中的 idlFactory 和 canisterId 一起传递给 Actor 构造函数。
然后，我们导出我们的 Actor，它有两个方法（set 和 get），它们已经配置了一个基于 Promise 的 API，以对我们的容器后端进行类型安全的调用。
最后，我们把它连接起来
我们将修改我们的 index.js 页面，使其逻辑存储从我们的容器上的表单提交，使用电子邮件字段。
我将导入 Actor（将其作为动态导入执行，以避免在 Gatsby 的服务器端渲染期间初始化 HttpAgent）。
我们将使用我们的 set 方法 handleSubmit 来存储数据，然后清理我们的联系表单。
然后我们将使用 get 方法通过电子邮件搜索获取联系人。
现在我们有了一个可以在互联网计算机上运行的功能齐全的应用程序！
包起来
现在我们已经调整了我们的代码库，我们的项目结构如下所示：
我们可以通过运行在本地测试更改 dfx deploy，这将构建我们的后端并将其上传到本地副本。
一旦完成，我们将能够使用 npm run develop -- --port 3000 再次运行我们的前端，使用所有不错的开发功能，例如热模块重新加载。我们指定了一个端口，因为 Gatsby 也默认为端口 8000。
如果一切顺利，您应该能够通过提交然后使用 UI 检索联系人来在本地测试应用程序。
应该就是这样！你可以自己尝试这些步骤，从 https://github.com/krpeacock/ic-vcf-gatsby 下载这个示例项目，或者使用本指南作为参考来开始你自己的项目。
我们迫不及待地想看看你建造了什么！
开始在 sdk.dfinity.org 上构建并加入我们的开发者社区 forum.dfinity.org。
作者：DFINITY 软件工程师 Kyle Peacock
翻译：Catherine
长按关注 DFINITY 微信公众号
随时答疑解惑
＊添加小助手微信 cdimnp 进交流社群