> 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/5.-dfinity-ide/1.-difinity-shi-yong-liu-cheng-yan-shi.md).

# 1. Internet Computer IDE 使用流程演示

## 1. 新建 Internet Computer 项目

&#x20;   首先进入  [ChainIDE](https://chainide.com/)  入口页面,点击 Code Smarter。

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

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

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

点击 New Project 按钮。

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

出现一个弹窗，切换至 Internet Computer 栏，选择一个模板创建一个工程，此处以模板Random Maze为例。

![](/files/FCAkIMzejZaQslGPnGt7)

## 2. Workspace 概览

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

1. 顶部栏，包括  回退至 Dashboard 按钮、工程名称展示及修改、用户信息
2. 左侧 Panel，包括 explorer（即文件树）、PLUGIN MANAGER（管理插件）、Port Forward(端口转发)
3. 右侧 Panel，与合约工程部署交互相关的插件在此处
4. 底部栏，Welcome 及 Logger 的入口

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

![](/files/kisx9HDVUjmKZ5pthXlC)

## 3. 部署项目至 IDE 本地节点

首先用户需要在当前 IDE 中启动一个本地节点，IDE 为用户提供了快捷工具可一键启动本地网络，用户也可以手动打开一个 Terminal，通过 Internet Computer SDK 启动节点。

为了启动的节点能在外部访问，需要指定节点起的IP为 `0.0.0.0` 以及端口，端口需为未被其他服务占用的端口，如下：

```
dfx start --host 0.0.0.0:8000
```

![启动本地 Internet Computer 节点](/files/ZvOoIAAKaAwqnBQufhYS)

本地节点启动后，在底部 Panel 的 Ports 栏将节点的端口进行对外转发，以便外部能够访问。

![](/files/EiaF88r4siWbIRmwjGwU)![](/files/Eea4Zo4fYYJxx8Lrs2S6)

在部署项目之前，若当前工程带有`package.json`模块，则需要先开一个 Node 镜像的 Terminal 进行依赖的安装：

```
npm install
```

点击部署时若尚未安装 package，会在 Output 中进行提醒；

![安装package提醒](/files/JFQrpug7ejbq4Kevrbu9)

切到 *Deploy Panel*，打开 Deploy，在 *LocalNet & TestNet* 栏将上述转发的地址粘贴至 Network 中，点击Deploy，等待 Terminal 输出部署信息

![部署中](/files/UD0NrWTrV7YXZPg3Z2W6)

部署成功后，IDE 会读取文件列表，从 .dfx 读取当前网络下的 canister\_ids.json 文件，生成可交互的canister列表。

如果 Terminal 提示部署成功，Interact 没有生成，请刷新页面，文件同步可能存在延迟。

用户可以通过表单的形式输入参数，点击 Call 来调用已部署的 canister 的方法；也可以点击链接打开canister ui，通过 UI 的形式来访问 canister :

![Interact](/files/Qmd4g42FQSGNZvDFlNpt)

![点击ui链接打开的canister random\_maze\_assets前端界面](/files/XLHx58HorNUozCly7G85)

{% hint style="warning" %}
值得一提的是，由于本地节点是临时性的，下次再打开此工程时，上次已部署的 canister 就失效了，应当删除 `.dfx 文件.`
{% endhint %}

## 4. 部署至测试节点

IDE 为所有用户提供了一个 *ChainIDE-Test Network ，*&#x5176;IP为 <http://34.209.219.32:8000>

仍以 Random Maze 工程为例，进入工程后切到 *Deploy Panel。*&#x6253;开 Deploy，在 *LocalNet & TestNet* 栏可以看到 *Network 输入栏*  默认值为测试节点IP，直接点击 Deploy，等待 Terminal 输出部署信息。

![部署中](/files/DQ4ARdk6BYo0NpNKypLU)

部署成功后，IDE 会读取文件列表，从 .dfx 读取当前网络下的 canister\_ids.json 文件，生成可交互的canister 列表。

如果 Terminal 提示部署成功，Interact没有生成，请刷新页面，文件同步可能存在延迟。

用户可以通过表单的形式输入参数，点击 Call 来调用已部署的 canister 的方法；也可以点击链接打开canister ui，通过 UI 的形式来访问 canister :

![Interact Panel](/files/hnl1gTdGtx6q7x0SeaLd)

![调用已部署的canister方法](/files/jnZhlmhCjyEubje29w09)

![点击ui链接打开的canister random\_maze\_assets前端界面](/files/iikijbKVk7swXWTGwQCt)

## 5. 部署至主网IC

部署至主网需要使用 Internet Computer 官方的 **NNS(Network Nervous System)**，并且其账户上需要有足够的ICP。

**1. 在nns中创建canister**

见官方教程 [NNS App quick start](https://sdk.dfinity.org/docs/token-holders/nns-app-quickstart.html) 的`Deploy a canister with cycles`一栏；

创建一个具有至少 2T cycles的canister 备用，复制生成的`canisterId`， 如：`mhgjp-7yaaa-aaaag-aaadq-cai`

![NNS Canistes](/files/zY8mWnjfmZvGyEiPcFaV)

**2. 获取本机的 Principal，将其设置为上述 canister 的 Controller**

在 IDE 的 Terminal 中获取当前账户的主体标识 Principal ：

```
dfx identity get-principal
```

用户也可通过 Tools 快捷工具快速获取：

![Get Principal](/files/TID8S90DWCKVMMwop9MZ)

在[NNS的Canister栏](https://nns.ic0.app/#/canisters)相应的`canister`中，点击`Change Controllers`按钮，将`Principal`添加为上述`canister`的`Controllers`

![添加Controller](/files/LFZjwH2jvyGN2uxxVHM5)

**3. 应用 canister 部署合约**

配置完 controller 之后，还需在当前 Internet Computer 工程中配置 canister\_ids.json 文件，设置上述生成的`canisterId`为`dfx.json`配置的`canister`的id。IDE为用户提供了快捷配置：

&#x20;切到 *Deploy Panel。*&#x6253;开 Deploy，在 Main*Net* 栏，点击 <mark style="color:green;">Config</mark> ，打开弹窗，为 dfx.json 中的 canister挨个配置 `canisterId`

![配置canister\_ids.json](/files/m0NE3yr4m4er2h4UTR90)

canister\_ids.json 文件`配置成功后在`Main*Net* 栏点击 Deploy 进行部署，等待 Terminal 输出主网部署信息。

在 Internet Computer 的[dashboard](https://ic.rocks/network)中搜索部署后的`canister` `mhgjp-7yaaa-aaaag-aaadq-cai` ，可以看到合约相关信息，说明合约工程已成功部署至主网：

![ic dashboard查看已部署canister信息](/files/A45PgrBf1AHAmus3Zh1x)

{% hint style="info" %}
如需同时部署多个`canister`，则需要在`NNS`中创建对应的canister，并在`canister_ids.json`中配置
{% endhint %}
