什么是BNB链?
今年早些时候,币安决定将其区块链网络更名为“BNB 链”。更名的原因之一是强调生态系统的两条链和 BNB(“Build & Build”)代币的互操作性,同时将该网络与币安的品牌区分开来。这一决定背后的动机是 BNB 不仅仅是币安。因此,该代币与 BNB 链相结合,现在是一个独立的生态系统,走的路线与币安不同。
此外,BNB 链由两条链组成:BNB 信标链和 BNB 智能链。在更名之前,这两条区块链分别名为币安链和币安智能链。尽管如此,BNB 链生态系统仍然由两条并行运行的区块链组成。
第一个是 BNB Beacon Chain,其主要目的是处理和验证 BNB Chain 网络内的去中心化交易。该链旨在托管网络的原生 BNB 代币。然而,BNB Beacon Chain 不具备智能合约功能,这限制了生态系统,并导致了另一条链的发展:BNB Smart Chain。
BNB 智能链具有智能合约,与 BNB 信标链并行运行。然而,尽管它们并行运行,但它们仍然是独立的。因此,这意味着如果其中一条链离线,它们可以独立工作。此外,BNB 链与 EVM 兼容,这意味着 BNB 链上的开发与以太坊区块链非常相似。因此,如果您有以太坊开发经验,您可以快速为 BNB 链生态系统开发 dapp。
随着对 BNB Chain 有了更深刻的了解,现在是时候仔细研究一下 BNB Chain 样板了,它介绍了构建 Web3 应用程序的最快方法!
BNB 链样板 – 构建 BNB 链 Dapps 的最快方法
在探索构建 BNB Chain dapp 的最简单方法之前,我们将仔细研究 Moralis 的 BNB Chain 样板。这将让您了解样板的功能以及您正在努力实现的目标。不过,这是 BNB Chain 样板的登录页面:
您首先会注意到的是应用程序顶部的导航栏。此栏包含“交易”、“转账”、“余额”等选项卡。但是,如果您立即单击其中一个选项卡,则运气不佳。相反,您需要先通过单击“连接钱包”按钮 来验证您的Web3 身份:
单击此按钮将提示您的 MetaMask 钱包,允许您签署一条消息。消息签署后,它将自动使用有关您的 Web3 钱包的信息填充 BNB Chain 样板的各个选项卡。因此,例如,如果您单击“交易”选项卡,您将看到一个显示您的交易历史记录的表格:
此外,如果您单击其他任一选项卡,则可以在“ERC-20”和“NFT”之间进行筛选。此外,如果您选择余额选项卡,它将如下所示:
从那里,如果你单击“NFT”选项,dapp 将整齐地显示你所有的 NFT:
此外,BNB Chain 样板的另一个功能是明暗模式。要在两者之间切换,您可以使用最右边的按钮:
这基本上涵盖了模板的主要功能。因此,BNB Chain 样板为您未来的任何项目提供了良好的基础,具有Web3 身份验证、获取链上数据等功能。您所要做的就是定制模板以满足您的客户/用户的需求!
使用 BNB 链样板构建 Dapps – 三步分解
现在您已经了解了 Moralis 的 BNB Chain 样板的工作原理以及您的工作目标,我们将直接开始创建 BNB Chain dapp!由于您将使用 BNB Chain 样板,因此只需三个步骤即可创建 dapp:
克隆 BNB 链样板
环境变量配置
启动 Dapp
按照这些步骤,您可以在几分钟内创建一个 dapp!
步骤 1:克隆 BNB 链样板
要克隆 BNB Chain 样板,您首先需要为项目创建一个文件夹并打开 IDE(集成开发环境)。我们在本教程中使用 VSC(Visual Studio Code);但是,您可以选择任何您喜欢的环境。此外,请注意,如果您不使用 VSC,该过程可能会有所不同。
启动 IDE 并准备好项目文件夹后,下一步是打开一个新终端。如果您使用的是 VSC,可以单击顶部的“终端”,然后单击“新终端”:
接下来,访问 BNB Chain 样板的 GitHub 存储库。您将在简介中找到存储库的链接。单击链接后,您必须复制存储库 URL。您可以通过单击“代码”按钮并复制 URL 来执行此操作:
从那里,您可以通过在终端输入以下命令来克隆模板(确保在项目文件夹中运行该命令):
接下来,您可以使用以下命令导航到正确的文件夹:
如果您在合适的位置输入了所有正确的命令,您现在应该在本地目录中有一个 BNB Chain 样板版本。因此,它应该看起来像这样:
第 2 步:环境变量配置
接下来,将“.env.local.example”重命名为“.env.local”并打开文件。这应该是文件的原始内容:
如上面的代码片段所示,总共有五个环境变量。我们将逐一介绍它们并向您展示正确的配置。因此,让我们从“ APP_CHAIN_ID ”开始,最初设置为“ 0x1 ”。这是以太坊网络的链 ID,当您要创建 BNB Chain 应用程序时,您需要更改此值。因此,将“ 0x1 ”更改为“ 0x38 ”,这对应于 BNB Chain 主网。
第二个变量是“ APP_DOMAIN ”;您可以保留原样。第三个变量是“ MORALIS_API_KEY ”,目前没有值。因此,您需要自己的 API 密钥,而要获取密钥,您需要一个 Moralis 帐户。因此,如果您还没有,请立即创建您的 Moralis 帐户并登录。登录后,导航到“帐户”选项卡,单击“密钥”,然后复制 Web3 API 密钥:
您必须将其粘贴到代码中,并确保“ MORALIS_API_KEY ”等于此值。第四个变量是“ NEXTAUTH_SECRET ”,您需要向其添加密钥。您可以使用以下链接生成需要输入到代码中的值:“ https://generate-secret.now.sh/32 ”。
最后一个变量是“ NEXTAUTH_URL ”,初始设置为“ http://localhost:3000 ”。由于我们处于开发阶段,因此目前可以使用。因此,您可以在本地主机上测试应用程序。但是,当您启动 dapp 时,这需要等于 dapp 的域。
以下是最终的“.env.local”代码的示例:
步骤 3:启动 Dapp
在完成 BNB Chain 样板的所有配置后,您几乎已完成所有工作并准备测试 dapp。但是,在此之前,您需要安装一些依赖项。为此,请使用以下命令之一输入终端(取决于您使用的是“ yarn ”还是“ npm ”):
一旦安装了所有依赖项,您就可以通过在终端中输入以下任一命令来继续运行该应用程序:
这将在本地主机上运行应用程序,允许您使用前面步骤中指定的 URL 启动该应用程序:“ http://localhost:3000 ”。
现在您已经完成了!您已成功使用 Moralis 的 BNB Chain 样板创建了一个 dapp。剩下的就是通过添加或删除功能来定制模板,使其适合您的客户群!