使用 React + JS + Leo 在 Aleo 上构建应用程序指南

Leo 能帮助我们编写出去中心化的智能合约，但是智能合约是没法与普通用户进行交互的，和其它去中心化程序一样，这里需要传统的 Web2 知识帮忙构建和用户进行交互的图形界面，方便用户使用我们的智能合约。本教程将演示一个简单的可交互的去中心化应用程序。

现在正式开始我们的教程。

1. 安装

在这之前需要确保你已经安装了 Node.js 18+ 以上的版本。

然后您将需要安装 React + JavaScript + Leo 模板，命令如下

npm create aleo-app@latest

在应用模版安装完成之后再运行如下命令

cd aleo-project
npm install
npm run install-leo
npm run dev

上面的命令帮我们安装项目所需要的依赖库和 Leo 编程语言，然后在本地帮我们运行了一个 React 的应用程序的本地实例，可以通过 http://localhost:5173 访问。

顺便了解下程序的核心结构

src/App.jsx：React 应用程序的核心。
helloworld/：存放 Leo 程序的文件夹。
src/workers/worker.js：Leo 程序的 WebAssembly 模块（WASM）。

2. 运行

现在我们打开链接 http://localhost:5173

然后打开开发者控制台，然后点击 execute helloworld.aleo ，观察控制台的输出，正常情况如下

然后会弹出弹窗

3. 部署程序

前面的合约是本地执行的，现在我们需要将合约部署到测试网上，在这之前我们需要一个有测试积分的账户用来部署程序。

首先创建账户

leo account new

注意：您的私钥、查看密钥和地址请保存在安全的地方，注意安全

拥有帐户后，需要使用官方提供的水龙头获取一些 Aleo 测试积分，这里获取测试积分有两种方式，一种是发送短信，另外一种是通过 Discord 的指定水龙头频道获取。

第一种获取方式：在水龙头页面并按照那里的说明进行操作。

第二种获取方式：先将账户地址加入 https://faucetgreenlist.snarkos.net/ 名单，然后加入Discord 服务器并使用该频道。#faucet每 6 个小时只能发送一个请求，一天只能请求 15 个积分。一旦您发送了水龙头请求，Discord 就会在水龙头通道下启动一个线程来处理您的请求。

格式：

/sendcredits aleo1address amt

例子：

/sendcredits aleo13g7xe4u8mzy3mru2p0dfq4f49cczkm0arflqe8rlsmmhel4atu8sj7jnhe 15

记下水龙头 URL 后面的交易 ID。Discord 线程中的成功消息应如下所示：

Transfer successful! for message ID: 1156693507768078496
https://apiv2.aleo.network/testnet3/transaction/at12u62xwfew2rq32xee8nwhtlxghfjz7mm3528yj240nuezue625fqy4lhlp

到这里我们准备工作做完之后就可以开始部署程序。

注意：在 Aleo 上部署合约有一些限制需要注意，第一个是程序名称必须唯一；第二个是程序名称尽量不少于10个字符，因为越短需要花费在部署上的费用越高。

因为helloworld之前已经部署过，现在我们要修改他的名字保证唯一，但让我们使用 Leo 来创建和构建一个全新的程序。

leo new helloworld_[randomsuffix]
cd helloworld_[randomsuffix]

生成新helloworld项目后，您可以删除原始helloworld文件夹。

您会注意到 React 应用程序现在出现错误。导航到 React 应用程序的主目录并打开App.jsx. 将第 5 行的文件夹名称更改为刚刚我们创建的 Leo 的新项目的名称以消除错误：

import helloworld_program from "../helloworld_[randomsuffix]/build/main.aleo?raw";

让我们再深入一点。回到 Leo 项目的根目录并将您的私钥添加到.env 中。将示例私钥替换为您自己的私钥。

NETWORK=testnet3
PRIVATE_KEY=APrivateKey...

完成此操作后，在新的 Leo 项目的根目录中，您可以自己尝试以下命令并观察终端中的输出：

leo run main
leo execute main

我们继续

在部署合约时，我们需要用从水龙头请求的积分支付部署费用。现在我们可以点 Deploy helloworld.aleo 按钮进行程序的部署，但是这个过程很慢，需要一些时间来扫描区块链上的交易，为了加快进程，我们直接提供我们获得的测试积分的准确记录来加快部署进程。让我们了解一下具体的解密过程。

当您从水龙头获得的积分是私有的，我们需要在交易中找到该私有记录记录。

之前从 Discord URL 获取您的交易 ID：

您可以使用 https://api.explorer.aleo.org/v1/testnet3/transaction/[insert-your-transaction-id] 接口在返回的 JSON 中 object.execution.transitions[0].outputs[0].value 位置找到加密的 record，看起来像这样：

然后跳转到 aleo.tools/rest 网页点击 Record ，然后填入你刚刚复制的 record 和前面创建账户生成 `View Key 来解密该记录获取记录的明文。

解密后，复制明文记录并将其粘贴到的第 67 行src/workers/worker.js。我们可以注释掉第 64 行，因为我们不希望扫描交易记录的功能处于活动状态，所以要手动替换它，

最终结果worker.js应该是这样的：

// // Deploy the program to the Aleo network
// const tx_id = await programManager.deploy(program, fee);

// Optional: Pass in fee record manually to avoid long scan times
const feeRecord = "{owner: aleo1qpjvun06n87jne3jwkml4jwdjqalw7n2qms03mcamenzczrj0uysp85fit.private, microcredits: 50000000u64.private, _nonce: 7736650979063383113375091219637426887776503149825722849440478642541635263210group.public}";
const tx_id = await programManager.deploy(program, fee, undefined, feeRecord);

现在可以点击 Deploy helloworld.aleo 按钮开始部署了

部署成功的截图：

到这里就成功部署了智能合约，也知道了如何创建去中心化的私有应用程序的流程了。

Yaakov

使用 React + JS + Leo 在 Aleo 上构建应用程序指南

1. 安装

2. 运行

3. 部署程序

Yaakov