8. Flow IDE

Demonstration of how to use Flow IDE, create dapps using Flow IDE and deploy on Flow blockchain.

1. Create New Flow Project

First, click Try Now". Visit the ChainIDE homepage, choose an already existing project if you have already created one, or create a new project.
Click New Project to open the pop-up window, switch to the Flow column, and select a template according to your requirements to create a project. Here, the template Hello World is used as an example. Clicking the template will create a project for this template and enter the WorkSpace.

2. Workspace Overview

After entering the project, the workspace of the current project is displayed. As a whole, the workspace can be divided into the following parts:
  1. 1.
    Top bar, including Back to Dashboard button, project name display and modification, user information
  2. 2.
    Left Panel, including explorer (ie file tree), PLUGIN MANAGER (management plug-in), Port Forward (port forwarding)
  3. 3.
    On the right panel, plug-ins related to contract project deployment interaction are here
  4. 4.
    The bottom bar, entry for Welcome and Logger
Users can click the bottom Logger to evoke the bottom Panel to view IDE log output, Terminal, port forward, etc.

3. FCL Account Panel

In the Accounts plug-in panel on the right, you can use FCL for Authenticate and Unauthenticated. Click the Authenticate button to authenticate and log in.
After login authentication, you can view the current login account address on this panel, and the Flow balance has already been contracted on the account. Click a contract in the account contract list, a new set of editors will be opened in the editor, and you can view the specific content of the clicked contract.
After logging in, you can click the Sign Out button to log out. After logging out, you can log in to other accounts; the IDE will retain the account information you have logged in before for easy viewing.

4. Flow Contract Deployment, Sending Transaction and executing Scripts

In the Deploy & Interaction plugin panel on the right, users can deploy Flow contracts, send transactions, and execute Flow scripts.

4.1. Contract Deployment

Select a contract file on the left to open, and you can see that the currently opened contract file is automatically selected in the Deploy column on the right. Click Deploy, use the currently logged-in user of FCL for authorization, and confirm in the FCL wallet to deploy the contract

4.2. Execute Transaction

Select one of the transaction files on the left to open, and switch to the TRANSACTION column on the right panel, you can see that the current transaction file is automatically selected. Click Send, and use the currently logged-in user of FCL to authorize and confirm in the FCL wallet to send the transaction.

4.3. Execute the script

Select one of the script files on the left to open, and switch to the SCRIPT column on the right panel, you can see that the current script file is automatically selected. Enter the relevant parameters required by the script's main function and click Execute. FCL will execute the corresponding script and output the corresponding result.

5. Use ChainIDE Terminal for Flow apps development

In the flow-cli terminal image of ChainIDE, Flow-CLI and Flow-Emulator are pre-installed. It only takes a few simple steps to configure and develop using the CLI.

5.1. Configuring FLOW-CLI

Open Terminal, select the flow-cli image and open a new command line. Type flow init on the command line, and you can see that the flow.json configuration file is generated in the current directory.
After the initial configuration is generated, an emulator can be started via the flow emulator command (Flow Emulator is a lightweight tool that simulates the behavior of a real Flow network). Type the flow emulator command, the command line prompts us that port 8080 is occupied. At this point, you need to enter the flow emulator --http-port port number to configure the port to start.

5.2. Configure Flow.json for rapid development

Open the flow.json configuration file generated above, you can see some basic configurations. We can configure the contract, testnet, and mainnet account to be deployed here for quick deployment, as shown in the following figure:
  • contracts: configure contracts and their file paths
  • networks: configure the endpoints of each network
  • accounts: Configure accounts, including aliases, addresses, and private keys
  • deployments: configure the quick deployment of each network, including which account to use and which contracts to deploy
For detailed usage of FLOW-CLI, see https://docs.onflow.org/flow-cli/install/