# 3. Astar WASM IDE 使用流程演示

{% embed url="<https://www.youtube.com/watch?t=266s&v=q-Bf5RHSt4s>" %}

## 1. 选择模板&#x20;

Astar WASM IDE 为各位开发者提供了各种基础或复杂的模板，如：Flipper, PSP22, PSP34, Magink-dApp 等。点击即可进入模板。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FMNKCCYQnkQml1iFQ2QRj%2Fimage.png?alt=media&#x26;token=5be9c551-8447-4637-be19-30b0ecb29807" alt=""><figcaption></figcaption></figure>

## 2. 编写合约

进入项目后，文件夹中自带的 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%2FJmyBSNKc7caj4avYmvtL%2Fimage.png?alt=media&#x26;token=de27e3f0-cbb9-47c5-8474-7f90eb94005f" 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%2FENmcZXgb09XxN28JlMXk%2Fimage.png?alt=media&#x26;token=499c3d83-97a8-4709-bb03-123a72828ee2" 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%2Fy5VlyGqpO1RM6sy1HW0i%2Fimage.png?alt=media&#x26;token=8fad4cf0-4a02-4b12-bea7-6f09425ec90b" alt=""><figcaption></figcaption></figure>

## 3. 编译合约

合约代码编写完成后，点击右侧菜单栏的 Compiler 按钮打开编译模块，选择是否开启 release 和 nightly (一般不用)，然后点击 Build \*\*\*.rs 启动编译。

> WASM 合约编译需要几分钟的时间，为此，我们可以先进行下一步

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FZWIqDdy3rKjFH26NBrRA%2Fimage.png?alt=media&#x26;token=3fd6874a-b1e7-469c-87ba-33d426cc4b0c" alt=""><figcaption></figcaption></figure>

编译成功后，左侧 Explorer 栏会出现 target/ink 文件夹，并且在该文件夹下会出现 \*\*\*.contract 文件 （该文件用于部署合约）。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2Fhua2EXFxwvdPtZQv78bo%2Fimage.png?alt=media&#x26;token=5a21c782-1e18-4060-b9d5-f9be33cf449e" alt="" width="296"><figcaption></figcaption></figure>

## 4. 连接 Astar WASM

部署合约前，需要先点击右上角的 Connect Wallet，选择钱包，以此连接到 Astar 区块链上。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FNYQjKC5ZhRG5I10lYbp7%2Fimage.png?alt=media&#x26;token=e5108079-71e6-4b6a-9943-6f9f16d334d6" alt=""><figcaption></figcaption></figure>

默认连接的是 Shibuya 测试网，如果需要切换到其他网络，可以点击右下角的 Shibuya Testnet 进行网络切换。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FSSi8kpdqlEuKNNQotvd6%2Fimage.png?alt=media&#x26;token=feb27ed7-0d01-4ac5-bd9f-6cd6a20b4ce9" alt=""><figcaption></figcaption></figure>

ChainIDE 支持 Astar 主网， Shibuya 测试网，Shiden 主网和自定义网络，共计4种网络的切换。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FPy9PaQUSlwrOVc4ZedGc%2Fimage.png?alt=media&#x26;token=add0dd61-10dc-49d1-8c95-e33ddc18d452" alt="" width="455"><figcaption></figcaption></figure>

### 4.1 连接到 Swanky Node

> Swanky Node 是一个基于 Substrate 的区块链，以帮助 Wasm 智能合约的本地开发。如果你需要大量的代币进行测试，同时对交互速度要求比较高，那么这一小节值得一看。

ChainIDE 已集成了图形化的 Swanky Node，点击右侧的 Astar Swanky Node，并点击 Start。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FMJTi2IE2zOR1BN4KjqWA%2Fimage.png?alt=media&#x26;token=bde1d9ab-2e41-400e-a21d-1d53fca68b44" alt=""><figcaption></figcaption></figure>

等待几秒至 Sandbox 出现以下2行字段后。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2Fvm6CzSPL0DNnBCEeGVYs%2Fimage.png?alt=media&#x26;token=94745dad-d4c8-4d75-99ae-53b78a8d155c" alt="" width="507"><figcaption></figcaption></figure>

点击 Faucet UrL 中的跳转键去获取swanky node 本地网上的测试代币。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FTp4hIZlVzlx4aplcl5JF%2Fimage.png?alt=media&#x26;token=f61dbd13-c8c6-4636-95bf-6e9c37f8e01e" 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%2Fg07QxwdskLz8u1XEAHH4%2Fimage.png?alt=media&#x26;token=6c5f4ed3-1a5e-44de-82c0-b7cb74e0cc3a" 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%2FunapXKL2ncRN2ipwtzzu%2Fimage.png?alt=media&#x26;token=977cff26-1684-4da5-8d86-dad2abe5a98a" 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%2FsVj4IPgmvu7V6CTTN8Ep%2Fimage.png?alt=media&#x26;token=ffef25ee-0257-4a32-91ec-31c015560973" alt=""><figcaption></figcaption></figure>

返回 ChainIDE for Astar 页面，复制 WebSocket Url。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FxHqfPEcH2aXzm1O6lAEv%2Fimage.png?alt=media&#x26;token=0cbe48dc-e822-4be6-9636-158a652fb76f" alt=""><figcaption></figcaption></figure>

参考[3.连接](#3.-lian-jie-dao-qu-kuai-lian)[ Astar WASM](#3.-lian-jie-astar-wasm)，选择 Custom Mode，并填入上一步复制的 Websocket URL，点击 Switch。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FeMSsQg2obPnS3trZJJsK%2Fimage.png?alt=media&#x26;token=48be2048-e6a3-4537-ba05-f680faf3f866" alt="" width="454"><figcaption></figcaption></figure>

恭喜你成功切换至 Swanky Node 本地网。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FE1ker2O7jYMQkmpNPl4t%2Fimage.png?alt=media&#x26;token=508de970-8db1-455c-948d-031a35f1190c" alt=""><figcaption></figcaption></figure>

## 5. 部署合约

点击右侧的 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%2FJX4QmgAQa8iZGTGL86Qq%2Fimage.png?alt=media&#x26;token=167a9053-4824-42fe-a607-23c8e6bea9fb" alt=""><figcaption></figcaption></figure>

除此之外，你还可以点击 Import Deployed Contract 导入已部署过的合约；Use On-Chain Contract Code 使用 CodeHash 来部署合约。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2F12W4Z53nx2aWZGEDPqZl%2Fimage.png?alt=media&#x26;token=24be1168-af3c-46e1-9cd6-f9591e7a73b8" alt="" width="254"><figcaption></figcaption></figure>

## 6. 合约交互

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

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FrKuXZUxihB6GkffaRHPJ%2Fimage.png?alt=media&#x26;token=aeb8ded4-e937-499b-acb5-eff433c4188c" alt=""><figcaption></figcaption></figure>

## 7. 交易查询

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

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FZWHhuUnwjH6fUUgOLmpN%2Fimage.png?alt=media&#x26;token=f6a907f2-445a-46dd-bcd6-e109274ab6c4" alt=""><figcaption></figcaption></figure>

## 8. 合约验证

通过 ChainIDE 编译的合约，可以提交给 Polkaholic 进行合约验证。

点击右侧的 Scan Verifier 按钮，选择 Network，Code Hash，Public Mode 后，点击 Publish Verified Code 即可进行合约验证。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FpxtUo4x5HPS5b93OqgKe%2Fimage.png?alt=media&#x26;token=3a5ded20-1067-459d-89ec-7b2ac453c2f8" alt=""><figcaption></figcaption></figure>

## 9. 查看仪表盘

ChainIDE 和 Polkaholic 合作开发了 WASM Developer Dashboard。

点击右侧的 WASM Developer Dashboard 按钮，即可查看 Recent Code Stored,  Recent Contracts Instantiated 和 Recent Calls 信息。

<figure><img src="https://2772835953-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ6_j0WUFnBhwIdP3LR%2Fuploads%2FdRqFaifBrpoq7sTXTfXM%2Fimage.png?alt=media&#x26;token=1b7c4876-f873-4e8e-a5c9-55f3885ddcb1" alt=""><figcaption></figcaption></figure>

## 10. Astar WASM Sandbox

如果你喜欢使用命令行进行开发，可以打开 Astar WASM Sandbox，其中已自带 [Swanky Suite](https://docs.astar.network/docs/build/wasm/swanky-suite/), [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%2FlVJdz7Z3bGByxDqAY86x%2Fimage.png?alt=media&#x26;token=339fb72b-01cf-4148-b4a0-52da7329e57a" alt=""><figcaption></figcaption></figure>

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