设置前端

荣誉！我们已经部署了 dApp。我们已准备好继续设置我们的前端。不再等待，出发吧！

设置 Dex 前端

在 dex 目录中打开一个新终端，或者继续使用之前打开的终端。

运行以下命令克隆前端目录：

#![allow(unused)]
fn main() {
git clone https://github.com/0xmetaschool/sui-dex-frontend
}

前端将具有以下文件结构。

frontend-1.1.png

让我们安装我们的依赖项：

#![allow(unused)]
fn main() {
yarn install
}

查找dex包ID

接下来，我们需要找到我们在编写合约时实现的 dex 模块的包 ID。请按照以下步骤执行此操作。

前往 Sui Explorer 并在搜索栏中输入您在上一课中获得的交易摘要。
您可以看到带有“摘要”标题的侧边栏。请滚动到侧边栏的末尾以找到“发布”字段。
现在，通过单击“Publish”字段中的“>”符号打开“Object”字段，然后单击“dex”模块。

你会看到类似这样的页面：

复制您的包 ID，如以下屏幕截图中所述。这将是我们将在前端使用的 dex 包 ID。

设置环境变量

为什么我们还需要 dex 包 ID？我们需要 ID 将 Move 项目与前端连接起来。请记住，我们在上一课中讨论过，要运行 dex 应用程序，我们需要一个池。因此，请转到克隆前端中的 .env 文件，并使用以下包 ID，因为此包 ID 已经用 100 Sui 填充了池，以方便您使用。
```
#![allow(unused)]
fn main() {
DEX_PACKAGE_ID=0xa1dce324bcf781692a358adb27bd105844231d35863b5c99f94e54801d653788
}
```
另外，如果 .env 文件未更新，请记住粘贴以下 DEX_STORAGE_ID 。
```
#![allow(unused)]
fn main() {
DEX_STORAGE_ID=0x6912d83e2c4868386511fe3f6f18aff9399b9ad5cae2d97943766e2ff160ab25
}
```
如果您已经创建了池，那么您可以使用您的 ID。我们需要填充池，因为如果不填充池，应用程序会给您错误。

运行前端

要运行前端，请在终端中运行以下命令。
```
#![allow(unused)]
fn main() {
yarn dev
}
```
该命令将为您提供如下输出：

转到链接， local 字段将向您显示。您将在浏览器中看到类似的内容。

在这里，您可以看到有一个使用 Google 登录的选项。当您尝试单击“使用 Google 签名”按钮时，它将给出以下响应。

因此，我们需要 Google Cloud 凭据，以便我们能够使用 Google 登录并使用我们的应用程序。

小结

唷，我们为你自己建立前端而感到自豪。接下来，我们将设置 Google Cloud 凭据并启动并运行我们的前端。

quiz

分享运行应用程序后前端的屏幕截图。

master move

设置前端

设置 Dex 前端

查找dex包ID

设置环境变量

运行前端

小结

quiz