1. How to Use Internet Computer IDE

Demonstration on how to use DFINITY IDE to create an application and deploy on DFINITY blockchain.

1. Create a New Dfinity Project

Visit ChainIDE and click the "Try Now" button on the front page of ChainIDE as shown in the figure below.

To create a new Dfinity blockchain-based project using Dfinity IDE, a user needs to visit the entry page of ChainIDE and click on the create a new project.

Once a user clicks on "New Project", a window like shown below will appear and the user can clone a project from GitHub, upload a project from system local storage, or choose a built-in template and make changes to the template according to the requirements.

The built-in templates are shown in the fig. below such as 'Asset Storage', 'Calc', 'Quicksort', etc. For Demo purposes, we'll choose 'Random Maze'. Users can choose any according to their requirements and make changes to the built-in templates.

2. Workspace overview

After creating a project, the workspace on the current project is displayed. The workspace as a whole can be divided into the following four parts:

The top bar includes the Back to Dashboard button, project name display, and modification,
The left panel of user information, including explorer (ie file tree), PLUGIN MANAGER (management plug-in),
The right panel and the plug-ins related to the contract project deployment interaction are here At the bottom bar, the entrance of Welcome and Logger

Users can click the Logger at the bottom to invoke the Panel at the bottom to view the IDE log output, Terminal, port forward, etc.

3. Deploy the project to the IDE local node

First, the user needs to start a local node in the current IDE. The IDE provides a shortcut tool for the users to start the local network with one click. The user can also manually open a Terminal and start the node through the Dfinity SDK.

In order for the started node to be accessible externally, you need to specify the IP address from the node as 0.0.0.0 and the port, and the port must be a port that is not occupied by other services, as follows:

dfx start --host 0.0.0.0:8000

After the local node is started, users can see a new port in the port section.

After the local node is started, the port of the node is forwarded to the outside in the Ports column of the bottom Panel for external access.

Before deploying the project, if the current project has a package.json module, you need to open a Node mirrored Terminal to install dependencies:

npm install

If the package has not been installed when you click Deploy, it will be reminded in Output;

Switch to the 'Deploy & Interaction' panel, open 'Deploy' sectioon, paste the above-forwarded address into the Network in the LocalNet & TestNet column, click Deploy, and wait for the Terminal to output the deployment information

After the deployment is successful, the IDE will read the file list, read the canister_ids.json file under the current network from .dfx, and generate an interactive canister list.

If the terminal prompts that the deployment is successful and Interact is not generated, please refresh the page, there may be a delay in file synchronization.

The user can enter parameters in the form of a form, click Call to call the deployed canister method; or click the link to open the canister UI, and access the canister in the form of UI:

It is worth mentioning that since the local node is temporary, the canister that has been deployed last time will be invalid when the project is opened next time, and the .dfx file should be deleted.

4. Deploy a Project to the Test Node

IDE provides a ChainIDE-Test Network for all users, whose IP is http://34.209.219.32:8000/

Take the Random Maze project as an example. After entering the project, switch to the Deploy Panel. Open Deploy, and you can see the Network input field in the LocalNet & TestNet column. The default value is the IP of the test node. Click Deploy directly and wait for Terminal to output the deployment information.

After the deployment is successful, the IDE will read the file list, read the canister_ids.json file under the current network from .dfx, and generate an interactive canister list.

If the terminal prompts that the deployment is successful and Interact is not generated, please refresh the page, there may be a delay in file synchronization.

The user can enter parameters in the form of a form, click Call to call the deployed canister method; or click the link to open the canister UI and access the canister in the form of UI

5. Deploy to the mainnet IC

Deploying to the mainnet requires the use of Dfinity's official NNS (Network Nervous System), and sufficient ICP is required on its account.

Create canister in NNS

See the official tutorial of NNS App quick start or How to Create Your Internet Identity: Easy Step by Step Guide of deploying a canister with cycles column;

Create a canister backup with at least 2T cycles and copy the generated canisterId, such as: mhgjp-7yaaa-aaaag-aaadq-cai

2. Get the Principal of the machine and set it to the Controller of the above canister

Get the principal ID Principal of the current account in the IDE's Terminal:

dfx identity get-principal

Users can also quickly obtain through the Tools shortcut tool:

In the NNS field of Canister, click the Change Controllers button to add the Principal as the Controllers of the above canister

3. Application canister deployment contract

After configuring the controller, you need to configure the canister_ids.json file in the current Dfinity project and set the canisterId generated above to the id of the canister configured by dfx.json. IDE provides users with a quick configuration:

Switch to the Deploy Panel. Open Deploy, click Config in the MainNet column, open the pop-up window, and configure the canisterId one by one for the canister in dfx.json

After the canister_ids.json file is successfully configured, click Deploy in the MainNet column to deploy, and wait for Terminal to output the mainnet deployment information. Search for the deployed canister mhgjp-7yaaa-aaaag-aa in the Dfinity dashboard