[Reach教程翻译] 2.2 创建DApp脚手架

本系列教程最终目标是开发一个石头剪刀布游戏,本文章是关于建立一个DApp最基础的前后端框架的教程。

*[Reach教程翻译] Reach是安全简单的Dapp开发语言 让用户可以像开发传统App一样开发DApp 目前使用Reach开发的智能合约可以部署在以太坊、Conflux、Algorand [Reach官网](https://reach.sh/) [Reach官方文挡](https://docs.reach.sh/)* # 2.2 创建DApp脚手架 [原文链接](https://docs.reach.sh/tut-2.html) 在本教程中,我们将建立一个剪刀石头布的应用程序。其中,两个玩家Alice和Bob可以对比赛结果下注。我们将从头开始,并逐步完善这个应用程序的功能。 您可以复制程序的全部代码,然后查看运行情况。您也可以输入每行代码,这样您就可以熟悉Reach语言以及程序的每个部分。 首先创建一个名为index.rsh的文件。文件可以放置在任何位置,但是我们建议将其放在当前目录,即〜/reach/tut中。在随后的所有代码示例中,我们将以当前教程的代码作为基础代码结构进行扩充。例如,首先在index.rsh中输入以下内容: [rps-1-setup/index.rsh](https://github.com/reach-sh/reach-lang/blob/master/examples/rps-1-setup/index.rsh) ```javascript 1 'reach 0.1'; 2 3 export const main = Reach.App(() => { 4 const Alice = Participant('Alice', { 5 // Specify Alice's interact interface here 6 }); 7 const Bob = Participant('Bob', { 8 // Specify Bob's interact interface here 9 }); 10 deploy(); 11 // write your program here 12 13 }); ``` 您是否注意到[rps-1-setup/index.rsh](https://github.com/reach-sh/reach-lang/blob/master/examples/rps-1-setup/index.rsh) 代码示例上方的链接?您可以单击这些链接,进入GitHub库查看完整文件。 您的文本编辑器是否将index.rsh识别为Reach程序,并显示适当的语法提示?如果没有,请访问[IDE/文本编辑器中的扩展支持](https://docs.reach.sh/guide-editor-support.html),或手动配置该插件将Reach(.rsh)文件视为JavaScript。 这只是Reach程序的基础架构,并不能做多少事情,但是它具有一些重要的部份。 * 第1行表明这是一个Reach程序。请始终将它写在每个程序的顶部。 * 第3行定义了程序的主要输出。编译时,编译器将查看这个内容。 * 第4-9行指定了该应用程序的两个参与者:Alice和Bob。 * 第10行表示Reach程序的部署,在这之后程序可以真正开始"做事"。 在进一步介绍之前,让我们为JavaScript前端代码创建一个类似的框架。创建一个名为index.mjs的新文件,代码如下: [rps-1-setup/index.mjs](https://github.com/reach-sh/reach-lang/blob/master/examples/rps-1-setup/index.mjs) ```javascript 1 import { loadStdlib } from '@reach-sh/stdlib'; 2 import * as backend from './build/index.main.mjs'; 3 const stdlib = loadStdlib(process.env); 4 5 (async () => { 6 const startingBalance = stdlib.parseCurrency(100); 7 const accAlice = await stdlib.newTestAccount(startingBalance); 8 const accBob = await stdlib.newTestAccount(startingBalance); 9 10 const ctcAlice = accAlice.deploy(backend); 11 const ctcBob = accBob.attach(backend, ctcAlice.getInfo()); 12 13 await Promise.all([ 14 backend.Alice(ctcAlice, { 15 // implement Alice's interact object here 16 }), 17 backend.Bob(ctcBob, { 18 // implement Bob's interact object here 19 }), 20 ]); 21 })(); // <-- Don't forget these! ``` 这个JavaScript代码的主要结构在随后所有测试程序中都会被延用。 * 第 1 行导入 Reach 标准函数加载器。 * 第 2 行导入你的后端,也就是在运行`./reach compile`时所生成的。 * 第 3 行定义了一个异步函数,它是我们前端的入口函数。 * 第 5 行根据REACH_CONNECTOR_MODE环境变量动态加载标准库。 * 第 6 行添加 10 个代币作为初始余额以便后续可以进行转账操作。 * 第 7-8 行为 Alice 和 Bob 创建了 10 个代币的测试帐户。这仅适用于Reach提供的开发人员测试网络。 * 第 10 行 Alice 部署了该应用程序。 * 第 11 行 Bob 加入到该应用程序。 * 第 14-16 行初始化 Alice 的后端。 * 第 17-19 行初始化 Bob 的后端。 * 第 13 行等待后端完成。 * 第 21 行调用我们定义的异步函数。 现在就可以编译和运行我们的程序了。输入`./reach run`便可以运行** Reach 会为应用程序构建并启动 Docker 容器。 (这份代码中没有做任何操作,您运行时只会看到很多诊断消息,这些对现在而言不太重要。) 当您开始下一步教程时,可以通过运行`./reach init`来自动化创建Reach的脚手架代码! 在下一步中,我们将实现剪刀石头布的逻辑!我们也会开始见到我们DApp的雏形! 您知道了吗?:当您使用 Reach 编写 DApp 时,您应该 1. 用 Solidity 编写智能合约,用 Ethereum SDK 编写 JavaScript 后端,用 JavaScript 编写前端,然后用 Reach 进行测试和部署; 还是 2. 在 Reach 中编写程序,使用 Reach 生成智能合约和后端,在加上一个 JavaScript 前端,然后使用 Reach 来测试和部署 ? 回答:2. Reach将所有关于底层网络的细节都抽象化省去了^^ 欢迎关注Reach微信公众号 并在公众号目录 -> 加入群聊 选择加入官方开发者微信群与官方Discord群 与更多Reach开发者一起学习交流! ![_.png](https://img.learnblockchain.cn/attachments/2021/11/IslW4w8i6192082848c1a.png)

[Reach教程翻译] Reach是安全简单的Dapp开发语言 让用户可以像开发传统App一样开发DApp 目前使用Reach开发的智能合约可以部署在以太坊、Conflux、Algorand Reach官网 Reach官方文挡

2.2 创建DApp脚手架

原文链接

在本教程中,我们将建立一个剪刀石头布的应用程序。其中,两个玩家Alice和Bob可以对比赛结果下注。我们将从头开始,并逐步完善这个应用程序的功能。

您可以复制程序的全部代码,然后查看运行情况。您也可以输入每行代码,这样您就可以熟悉Reach语言以及程序的每个部分。

首先创建一个名为index.rsh的文件。文件可以放置在任何位置,但是我们建议将其放在当前目录,即〜/reach/tut中。在随后的所有代码示例中,我们将以当前教程的代码作为基础代码结构进行扩充。例如,首先在index.rsh中输入以下内容:

rps-1-setup/index.rsh

1    'reach 0.1';
 2    
 3    export const main = Reach.App(() => {
 4      const Alice = Participant('Alice', {
 5        // Specify Alice's interact interface here
 6      });
 7      const Bob   = Participant('Bob', {
 8       // Specify Bob's interact interface here
 9      });
10      deploy();
11      // write your program here
12    
13    });

您是否注意到rps-1-setup/index.rsh 代码示例上方的链接?您可以单击这些链接,进入GitHub库查看完整文件。

您的文本编辑器是否将index.rsh识别为Reach程序,并显示适当的语法提示?如果没有,请访问IDE/文本编辑器中的扩展支持,或手动配置该插件将Reach(.rsh)文件视为JavaScript。

这只是Reach程序的基础架构,并不能做多少事情,但是它具有一些重要的部份。

  • 第1行表明这是一个Reach程序。请始终将它写在每个程序的顶部。
  • 第3行定义了程序的主要输出。编译时,编译器将查看这个内容。
  • 第4-9行指定了该应用程序的两个参与者:Alice和Bob。
  • 第10行表示Reach程序的部署,在这之后程序可以真正开始"做事"。

在进一步介绍之前,让我们为JavaScript前端代码创建一个类似的框架。创建一个名为index.mjs的新文件,代码如下: rps-1-setup/index.mjs

1    import { loadStdlib } from '@reach-sh/stdlib';
 2    import * as backend from './build/index.main.mjs';
 3    const stdlib = loadStdlib(process.env);
 4    
 5    (async () => {
 6      const startingBalance = stdlib.parseCurrency(100);
 7      const accAlice = await stdlib.newTestAccount(startingBalance);
 8      const accBob = await stdlib.newTestAccount(startingBalance);
 9    
10      const ctcAlice = accAlice.deploy(backend);
11      const ctcBob = accBob.attach(backend, ctcAlice.getInfo());
12    
13      await Promise.all([
14        backend.Alice(ctcAlice, {
15          // implement Alice's interact object here
16        }),
17        backend.Bob(ctcBob, {
18          // implement Bob's interact object here
19        }),
20      ]);
21    })(); // &lt;-- Don't forget these!

这个JavaScript代码的主要结构在随后所有测试程序中都会被延用。

  • 第 1 行导入 Reach 标准函数加载器。
  • 第 2 行导入你的后端,也就是在运行./reach compile时所生成的。
  • 第 3 行定义了一个异步函数,它是我们前端的入口函数。
  • 第 5 行根据REACH_CONNECTOR_MODE环境变量动态加载标准库。
  • 第 6 行添加 10 个代币作为初始余额以便后续可以进行转账操作。
  • 第 7-8 行为 Alice 和 Bob 创建了 10 个代币的测试帐户。这仅适用于Reach提供的开发人员测试网络。
  • 第 10 行 Alice 部署了该应用程序。
  • 第 11 行 Bob 加入到该应用程序。
  • 第 14-16 行初始化 Alice 的后端。
  • 第 17-19 行初始化 Bob 的后端。
  • 第 13 行等待后端完成。
  • 第 21 行调用我们定义的异步函数。

现在就可以编译和运行我们的程序了。输入./reach run便可以运行**

Reach 会为应用程序构建并启动 Docker 容器。

(这份代码中没有做任何操作,您运行时只会看到很多诊断消息,这些对现在而言不太重要。)

当您开始下一步教程时,可以通过运行./reach init来自动化创建Reach的脚手架代码!

在下一步中,我们将实现剪刀石头布的逻辑!我们也会开始见到我们DApp的雏形!

您知道了吗?:当您使用 Reach 编写 DApp 时,您应该

  1. 用 Solidity 编写智能合约,用 Ethereum SDK 编写 JavaScript 后端,用 JavaScript 编写前端,然后用 Reach 进行测试和部署;

还是

  1. 在 Reach 中编写程序,使用 Reach 生成智能合约和后端,在加上一个 JavaScript 前端,然后使用 Reach 来测试和部署

?

回答:2. Reach将所有关于底层网络的细节都抽象化省去了^^

欢迎关注Reach微信公众号 并在公众号目录 -> 加入群聊 选择加入官方开发者微信群与官方Discord群 与更多Reach开发者一起学习交流!

[Reach教程翻译] 2.2 创建DApp脚手架插图

本文参与登链社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。

  • 发表于 2021-11-15 23:47
  • 阅读 ( 308 )
  • 学分 ( 27 )
  • 分类:其他
  • 专栏:Reach开发资料

评论