> 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/3.-astar-wasm-ide-shi-yong-liu-cheng-yan-shi.md).

# 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="/files/ZaBxiZTXgHNg9psTIT8L" alt=""><figcaption></figcaption></figure>

## 2. 编写合约

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

<figure><img src="/files/GNBd3Qy2IH2g1XWhfYmT" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/wP7oiGxkfxdnCPbYAeLz" alt=""><figcaption></figcaption></figure>

点击一个合约文件，即可对代码进行编辑操作。

<figure><img src="/files/mcUypDXQ2yHPa86xV5h5" alt=""><figcaption></figcaption></figure>

## 3. 编译合约

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

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

<figure><img src="/files/NMneBZVJGMCwEmWhFuJm" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/wYFd8y4IdN0AgJ9MuAWo" alt="" width="296"><figcaption></figcaption></figure>

## 4. 连接 Astar WASM

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

<figure><img src="/files/jUPINrTVTtyz9eBrqjB9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/Nae5hZ3L0EeyG0Z1AwCQ" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/80GzKYNBXIOHmhxQ32l3" alt="" width="455"><figcaption></figcaption></figure>

### 4.1 连接到 Swanky Node

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

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

<figure><img src="/files/wVDmvpvg1YDsOmkKcigG" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/JxkcAYW148qGICqwQdNV" alt="" width="507"><figcaption></figcaption></figure>

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

<figure><img src="/files/MCyOmZvRKeG3n5JDV2Os" alt=""><figcaption></figcaption></figure>

选择一个有代币的账户向自己钱包转账一些代币。

<figure><img src="/files/GjdNiOLoQsHsSiv0Pxgd" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/sZUucXwAylQtGXRmr0yR" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ezF0sN2RWeqFo7MVz6vr" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/RRDKwQO2arrSf882sm6q" 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="/files/trqCO6IAU6WGhKXpAZ3m" alt="" width="454"><figcaption></figcaption></figure>

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

<figure><img src="/files/pKTeFI7fUvsau4WHkPDI" alt=""><figcaption></figcaption></figure>

## 5. 部署合约

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

<figure><img src="/files/RvdfflCZwYp2mWp28Ho5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/7fsiFuH9Qg5SyANOVRE5" alt="" width="254"><figcaption></figcaption></figure>

## 6. 合约交互

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

<figure><img src="/files/0Gyio8VIJQxvNfGsl7cp" alt=""><figcaption></figcaption></figure>

## 7. 交易查询

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

<figure><img src="/files/l7zkS6kMla3kIRjhFvVt" alt=""><figcaption></figcaption></figure>

## 8. 合约验证

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

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

<figure><img src="/files/95ZoRlCVCqo8IdLdDC9z" alt=""><figcaption></figcaption></figure>

## 9. 查看仪表盘

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

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

<figure><img src="/files/OevmFnz4qG67WnsqI9W4" 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="/files/Ot4Mj8iYcxz9mBt7e3LY" alt=""><figcaption></figcaption></figure>

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