# 1. Flow IDE 使用流程演示

{% embed url="<https://youtu.be/3gIk3iDICLY>" %}

## 1. 新建 Flow 项目

首先进入  [ChainIDE](https://chainide.com/)  的入口页面，点击 Code Smarter。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2F6LVGAXmqRlma9m1z0dfB%2Fimage.png?alt=media&#x26;token=b2117dc2-ef61-43f5-995f-b149131de2e1" alt=""><figcaption></figcaption></figure>

这里会选择你的登录方式，有 Github 和 Guest 两种。（选择 GIthub 登录才可使用 Sandbox 功能）。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FqkiBZk26rrnG9Oj4UAHv%2Fimage.png?alt=media&#x26;token=a5f03e51-ff54-440d-a062-4934a263f235" alt=""><figcaption></figcaption></figure>

点击 New Project 按钮。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2Fuvt5dI3aw2VpYYRYPaAQ%2Fimage.png?alt=media&#x26;token=cc4c82e0-e757-4f47-8b11-2ca2c63ade8a" alt=""><figcaption></figcaption></figure>

出现一个弹窗，在弹窗的左侧选择 Flow，再点击一个项目模板创建项目。此处以模板 Hello World 为例。点击模板卡片后，即会创建此模板的工程并进入 WorkSpace。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FPbhI8uC71VvnV8y0bbtD%2Fimage.png?alt=media&#x26;token=ee86d024-a92c-4416-bdcb-1cdd922b1d00" alt=""><figcaption></figcaption></figure>

## 2. WorkSpace 概览

&#x20;进入工程后，展示当前工程的 workspace。整体上 workspace 可分为以下几部分：

1. 顶部栏，包括  回退至 Dashboard 按钮、工程名称展示及修改用户信息
2. 左侧 Panel，包括 Explorer（文件树）、Search All (文件搜索)、Plugin Manager（管理插件）、Port Manager (端口管理) 和 Git (GIt 管理)
3. 右侧 Panel，与合约工程部署交互相关的插件在此处
4. 底部栏，Welcome 及 Logger 的入口

用户可点击底部 Logger 唤起底部 Panel，以此查看 IDE 日志输出、Terminal、进行 port forward 等

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FizplGJFoT6wrF7AkEUW0%2Fimage.png?alt=media&#x26;token=f669a1ea-ef1f-4bad-8c34-6429b4f88a11" alt=""><figcaption></figcaption></figure>

## 3. 账户面板

在右侧 Accounts 插件面板中，可使用 FCL 进行 Authenticate 及 Unauthenticate。先选择要连接到的Mainnet or Testnet, 再点击`Authenticate`按钮连接钱包。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FlJOE4PMIKQti4NblVAnh%2Fimage.png?alt=media&#x26;token=45aeee07-46a2-4ab6-9def-d94f93c3ed04" alt=""><figcaption></figcaption></figure>

> Flow Testnet Faucet: <https://testnet-faucet.onflow.org/fund-account> &#x20;

登录认证后，可在此面板查看当前登录账户地址，Flow 余额以及账户上的合约。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FvnK8mIGQ6nFzXZdV3F4B%2Fimage.png?alt=media&#x26;token=f90c6364-1c60-44fb-b6e9-567faa543910" alt=""><figcaption></figcaption></figure>

登录后，可点击`Sign Out`按钮进行登出，登出后可登录其他账户。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FwoJQDyPK9uOF5u4BjwwB%2Fimage.png?alt=media&#x26;token=8a30f46f-bd36-4f81-95d3-0832dd76d0ec" alt=""><figcaption></figcaption></figure>

## 4. Flow 合约部署、升级合约、发送交易、执行脚本

在右侧`Deploy & Interaction`插件面板中，用户可进行 Flow 合约的部署、升级合约、发送交易以及执行 Flow 脚本。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FwjTWCisoea86g4xFEWPJ%2Fimage.png?alt=media&#x26;token=809cb8f1-d9a0-45d7-a035-1d697a65c6ed" alt=""><figcaption></figcaption></figure>

### 4.1 合约部署

在 EXPLORER 中打开 contracts > HelloWorld.cdc，可以看到，右侧 Deploy 栏自动选中当前打开的合约文件。点击 Deploy，使用当前登录的用户进行 authorization，在钱包中进行确认即可进行合约部署。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FQ7vG2sn8KHvJx2ExD3A0%2Fimage.png?alt=media&#x26;token=bf65b604-4ea9-4bbe-9ebe-433fc65f2973" alt=""><figcaption></figcaption></figure>

部署成功后，切至 Accounts 面板，刷新当前账户的合约列表，可以看到 KittyVerse 合约成功部署至当前账户；点击 HelloWorld2，可以看到已部署的合约代码。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FrhdRLpFKCqzRdmewKZ3v%2Fimage.png?alt=media&#x26;token=52971c17-5dcd-439d-86fe-1b5fb7fd2c84" alt=""><figcaption></figcaption></figure>

### 4.2 更新合约

如果你想更新合约内容，打开原来已部署的合约，修改合约内容后，再次点击部署。打开 contracts > HelloWorld2.cdc，将合约中的  `return "Hello, World!"` 修改为 `return "Hello, World, 2023!"`, 切换到 Deploy & Interaction，点击 Deploy 。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FPWR0WzjkCHHhkdxLLayt%2Fimage.png?alt=media&#x26;token=d868c23f-135f-4492-b152-e8978cd13add" alt=""><figcaption></figcaption></figure>

二次确认无误后，点击 OK，即可更新该合约

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FAiE9Ihq6itFx4KhjTBn5%2Fimage.png?alt=media&#x26;token=f54423eb-1dc4-482a-afd7-2588061d00e9" alt=""><figcaption></figcaption></figure>

### 4.3 发送交易

在 EXPLORER 中打开 transactions > Transaction.cdc，定位到开头处的代码&#x20;

```javascript
import HelloWorld from 0x01 // Replace 0x01 with HelloWorld.cdc smart contract address
```

将 0x01 修改为 HelloWorld 的合约地址，即为部署 HelloWorld 合约的账户地址。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2F8AzSAeLq94MpbM3dQQiZ%2Fimage.png?alt=media&#x26;token=e371ec7e-013a-4e78-9ae1-dfdacf3c091b" alt=""><figcaption></figcaption></figure>

```javascript
import HelloWorld from 0x37635ca1570877c0 // Replace 0x01 with HelloWorld.cdc smart contract address
```

右侧切换 Deploy & Interaction 栏，可以在 TRANSACTION中，可以看到 Transaction.cdc 自动被选中。点击Send，使用当前登录的用户进行authorization，在钱包中进行确认即可发送交易。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FBwdYN0hU2agHr4gM9HBV%2Fimage.png?alt=media&#x26;token=6b2acbeb-316e-4ab5-825a-c409c446c9e3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FBAn9ON1kTlK0BV5ZkogY%2Fimage.png?alt=media&#x26;token=1390c676-2a06-43f7-b67c-79ddf82f2679" alt=""><figcaption></figcaption></figure>

### 4.4 执行脚本

&#x20;    在 EXPLORER 中打开 scripts > Script.cdc，点击 Execute, ChainIDE 会执行对应的脚本，并输出对应结果。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2Fx2Rf4yT6N4eC7UefL2UN%2Fimage.png?alt=media&#x26;token=0f7b41e4-d33a-4ecd-baa7-367431df59b5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FrNjzRGWPMbzHuAp6BjqJ%2Fimage.png?alt=media&#x26;token=da47d870-d382-4ed9-987f-f131a76062f5" alt=""><figcaption></figcaption></figure>

## 5. 使用 Terminal 进行 Flow 开发

在 ChainIDE 的 Flow（Ubuntu） 镜像中，预安装了 Flow-CLI、Flow-Emulator, 和 Node.js v16。

打开 Sandbox，在命令行中输入

```bash
flow
```

{% hint style="info" %}
FLOW-CLI & Flow-Emulator 使用文档: <https://developers.flow.com/tools/flow-cli/super-commands>

Node.js v16使用文档：<https://nodejs.org/docs/latest-v16.x/api/>
{% endhint %}

感谢你学习如何使用 Flow IDE。如果你遇到任何问题或有任何疑问，请不要犹豫，与我们联系。我们一直会为你们提供帮助!