本文假设读者是熟悉 JavaScript 和 React[1] 的开发者,对 Flow[2] 有着一定的了解,或者熟悉 Flow 智能合约语言 Cadence[3] 相关的概念。
我们将通过本文熟悉并搭建本地开发环境,使用 JavaScript 根据现有的 JS-SDK[4] 完成对链的调用与交互。
包含以下内容:
-
搭建本地开发模拟环境
-
部署开发版钱包服务
-
使用 Dev Wallet 创建本地账户
-
查询账户信息执行 Cadence 脚
-
本部署 Cadence 合约并与之交互
教程内容参照了原文 flow-js-sdk quick start[5] 内容根据最新的代码和示例略有增补。
初始化仓库和开发环境
为了方便读者理解,我们直接使用 flow-js-sdk 官方提供的代码库作为基础,并针对原有的示例略有一些调整,请参照 fork 的仓库 react-fcl-demo[6] 来完成部署和演示
git clone https://github.com/caosbad/react-fcl-demo.git
cd react-fcl-demo
yarn
首先将远程仓库克隆到本地,然后在实例项目中安装依赖,yarn 会将 package.json
文件中的项目依赖 @onflow/fcl
@onflow/sdk
@onflow/six-set-code
@onflow/dev-wallet
等下载。
@onflow/fcl
[7] -- 基于 DApp 开发者的需求,对 @onflow/sdk 的一层封装。
@onflow/sdk
[8] --
-
使用 JavaScript 进行 build[9], resolve[10] , send[11] 和 decode[12] 工具,与 Flow 链进行交互。
-
@onflow/dev-wallet
[13] -- 提供给测试与开发的本地钱包环境。
在这之前,我们还需要初始化 Flow 的本地模拟器启动 wallet-dev 服务
安装和启动模拟器
模拟器是帮助我们在本机启动一·个本地的 Flow 网络,以及以太坊的 ganache,模拟器的下载安装步骤可以参考此处的说明 [14]。
// Linux and macOS
sh -ci "$(curl -fsSL https://storage.googleapis.com/flow-cli/install.sh)"
// Windows
iex "& { $(irm 'https://storage.googleapis.com/flow-cli/install.ps1') }"
// --init 参数是在第一次启动的时候添加,如果已经初始化过,就直接执行 start 命令
flow emulator start --init
在示例项目的目录里执行 init 命令后,我们会发现目录下多出了一个 flow.json
文件,某些以下的结构:
{
"accounts": {
"service": {
"address": "f8d6e0586b0a20c7",
"privateKey": "84f82df6790f07b281adb5bbc848bd6298a2de67f94bdfac7a400d5a1b893de5",
"sigAlgorithm": "ECDSA_P256",
"hashAlgorithm": "SHA3_256"
}
}
}
模拟器启动之后你会看到启动成功的日志,模拟器提供了 gRPC 和 http 通信的接口
接下来在新的终端启动 Dev wallet
启动 Dev wallet 服务
在 package.json
文件中,我们会看到 scripts
的配置项中有所谓 dev-wallet
和 dev-wallet-win
两个脚本,现在把我们上一步模拟初始化生成的 privateKey
覆盖现有的配置。
然后执行 yarn run dev-wallet
或 yarn run dev-wallet-win
成功之后,将会看到以下的日志:
这里启动了多个服务,同时注意服务地址和私钥与模拟器生成的一致。
环境已经配置成功,接下来就是启动示例项目:
启动示范项目
yarn start
确保模拟器和 Dev wallet 也在启动的状态,我们可以看到页面上的一些示例操作,下面我们从代码层面了解一些相互作用的细节
获取最新区块链
// hide/demo/GetLatestBlock.tsx
import { decode, send, getLatestBlock } from "@onf