设置前端
荣誉！我们已经部署了 dApp。我们已经准备好继续设置我们的前端。不再等待，出发吧！
设置忠诚度前端
在 loyalty 目录中打开一个新终端，或者继续使用之前打开的终端。
运行以下命令克隆前端目录：
#![allow(unused)] fn main() { git clone https://github.com/0xmetaschool/sui-loyalty-dapp-frontend.git }
前端将具有以下文件结构。
让我们安装我们的依赖项：
#![allow(unused)] fn main() { yarn install }
查找忠诚度套餐 ID
接下来，我们需要找到我们在编写合约时实现的 loyalty 模块的包 ID。请按照以下步骤执行此操作。
-
前往 Sui Explorer 并在搜索栏中输入您在上一课中获得的交易摘要。
-
您可以看到带有“摘要”标题的侧边栏。请滚动到侧边栏的末尾以找到“发布”字段。
-
现在，通过单击“发布”字段中的“>”符号打开“对象”字段，然后单击“忠诚度”模块。
你会看到类似这样的页面：
-
复制您的包 ID，如以下屏幕截图中所述。这将是我们将在前端使用的您的忠诚度套餐 ID。
设置环境变量
为什么我们还需要忠诚度套餐 ID？我们需要 ID 将 Move 项目与前端连接起来。请记住，我们在上一课中讨论过，要运行忠诚度应用程序，我们需要一个池。因此，转到克隆前端中的 .env 文件，并填写您的忠诚度套餐 ID。
#![allow(unused)] fn main() { LOYALTY_PACKAGE_ID=YOUR_LOYALTY_PACKAGE_ID }
此外，我们需要与 dex 应用程序使用的环境变量相同的环境变量。由于忠诚度应用程序只有在您不使用 Google 登录后才能运行，因此请将一些 ETH 代币兑换为 USDC 代币，将 USDC 代币兑换为 ETH 代币。因此，要么在此处使用相同的 .env 文件数据，要么复制粘贴以下变量。为了您的方便，我们还在 .env 文件中填充了这些变量。
#![allow(unused)] fn main() { DEX_STORAGE_ID=0x6912d83e2c4868386511fe3f6f18aff9399b9ad5cae2d97943766e2ff160ab25 DEX_PACKAGE_ID=0xa1dce324bcf781692a358adb27bd105844231d35863b5c99f94e54801d653788 NEXT_PUBLIC_CLIENT_ID_GOOGLE=YOUR_GOOGLE_CLIENT_ID URL_ZK_PROVER=http://142.93.211.174:8001/v1 }
请务必将 YOUR_GOOGLE_CLIENT_ID 替换为您的 Google 客户端 ID，因为它不能被多个用户使用。
运行前端
要运行前端，请在终端中运行以下命令。
#![allow(unused)] fn main() { yarn dev }
该命令将为您提供如下输出：
转到链接， local 字段将向您显示。您将在浏览器中看到类似的内容。
小结
唷，我们为您自己设置前端而感到自豪。接下来，我们将与前端进行交互，看看我们的 dex 和忠诚度 dApp 是如何协同工作的。