> For the complete documentation index, see [llms.txt](https://chainide.gitbook.io/chainide-chinese/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chainide.gitbook.io/chainide-chinese/chainide/12.-astar-ide/2.-astar-evm-ide-shi-yong-liu-cheng-yan-shi.md).

# 2. Astar EVM IDE 使用流程演示

编写 EVM 合约，编译合约，部署，交互，查询和验证

{% embed url="<https://www.youtube.com/watch?v=5m3-Ff17mjo>" %}

## 1. 编写合约

进入项目后，文件夹中自带的 readme.md 文件会自动预览。&#x20;

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FD2X4KcTI2NL0KeVtjUjn%2Fimage.png?alt=media&amp;token=e753f96e-2d80-430e-97ba-b24647d2230e" alt=""><figcaption></figcaption></figure>

在 Explorer 栏中，你可以新建文件（夹），刷新目录，下载文件。也可以直接点击模板中自带的文件。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FMgRJQONDvNgCGLYxJ58K%2Fimage.png?alt=media&amp;token=d3c4f64e-f125-4f58-bf85-a9b03374fc94" 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%2FTZUdOfi3e0fVGjlhgF2Q%2Fimage.png?alt=media&amp;token=2dd03df4-7c7a-4bba-b341-164ab7867911" alt=""><figcaption></figcaption></figure>

## 2. 编译合约

合约代码编写完成后，点击右侧菜单栏的 Compiler 按钮打开编译模块，选择 Compiler 版本和是否开启 Optimization，然后点击 Compile \*\*\*.sol 启动编译。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FXr1uLLJvGqMklwtdKr2C%2Fimage.png?alt=media&amp;token=08c74456-0948-4648-89f9-b5a27ee6fd12" alt=""><figcaption></figcaption></figure>

编译成功后，下方会显示 [ABI](https://docs.soliditylang.org/en/latest/abi-spec.html) 和 BYTE CODE ，同时控制台上会输出 Compile contract success 的信息提示。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FSqtKrKS28YN7xmytaRJy%2Fimage.png?alt=media&amp;token=6636a90b-68de-4294-a1f9-1c301a0d519a" alt="" width="326"><figcaption></figcaption></figure>

## 3. 连接 Astar EVM

部署合约前，需要先点击右上角的 Connect Wallet，选择连接到 JavaScript VM (使用 JavaScript 实现的 EVM，主要用于测试) 或 Metamask （可部署到 Astar 区块链上）。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FUr8z4hC1Bno4csamwFla%2Fimage.png?alt=media&amp;token=39d036f9-b40f-4a03-b825-02324d4a8ff0" alt=""><figcaption></figcaption></figure>

## 4. 部署合约

点击右侧的 Deploy\&Interaction 按钮，出现部署页与交互页面。选择好已编译的合约后，点击 Deploy进行部署（然后在 Metamask 中点击确认）。合约部署成功后，控制台上会输出现合约部署的结果以及相关信息。&#x20;

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2F87uOwbmsCCyP2uw4iIMs%2Fimage.png?alt=media&amp;token=ca66c13c-ad11-4294-aec4-bf4fd0b796cf" alt=""><figcaption></figcaption></figure>

除此之外，你还可以点击 Import Deployed Contract 导入已部署过的合约，来进行合约交互。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FVGT0T6Y9lmhXUHHWBPi2%2Fimage.png?alt=media&amp;token=fd2f5fa6-bd8c-448f-854d-6faf8e61bbbd" alt=""><figcaption></figcaption></figure>

## 5. 合约交互

合约部署成功后，可以对合约进行交互操作。点击已部署好的合约，选择对应的接口，点击 Submit 或 Get   进行交互。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2F09TF5RC46Ev5Kgwxuvlf%2Fimage.png?alt=media&amp;token=6c0dc7d3-80a0-4d58-bb35-810de04b879f" alt=""><figcaption></figcaption></figure>

## 6. 交易查询

点击 Output 中的交易 Hash，可以查看每笔交易的具体信息。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2Fsn0sq80yPyyD5tpxXnIA%2Fimage.png?alt=media&amp;token=b9cf7447-5a0d-438a-a532-dd85ed3468c6" alt=""><figcaption></figcaption></figure>

## 7. 验证合约

点击右侧  Scan Verifier 插件，选择需要验证的合约，填入已部署的合约地址，点击 Verify。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FwxmBGt6T74bi0YWnVZW3%2Fimage.png?alt=media&amp;token=8914219f-c3b1-44d0-85d7-e94c05c45512" alt=""><figcaption></figcaption></figure>

验证成功后，可查看到在 blockscout scan 上已验证的合约链接。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FsIjm9a91PDrCS4TIkyKX%2Fimage.png?alt=media&amp;token=700badd8-171d-425c-8384-248a89a3240c" alt=""><figcaption></figcaption></figure>

## 8. Astar EVM Sandbox&#x20;

如果你喜欢使用命令行进行开发，可以打开 Astar EVM Sandbox，其中已自带 [Hardhat](https://hardhat.org/), [Truffle](https://trufflesuite.com/), [Brownie](https://eth-brownie.readthedocs.io/en/stable/) [Ganache](https://trufflesuite.com/ganache/), [Git](https://git-scm.com/) and [Node.js V16](https://nodejs.org/en)。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FjMAlNZhIOXbtHW6b9KgN%2Fimage.png?alt=media&amp;token=6dc0ee92-bfd2-47a3-89bf-4fd8de4b4e3b" alt=""><figcaption></figcaption></figure>

ChainIDE 为全栈开发提供了支持。例如，如果您使用 Voting dApp 或 Hardhat dApp Wave 模板，您不仅可以编译和部署您的智能合约，还可以通过 ChainIDE 的端口转发功能为您的 dApp 前端提供服务。请参考 [ChainIDE-端口转发](/chainide-chinese/5.-port-forwarding.md)。