Learn how to use Flow IDE to develop dApps
This page provides a comprehensive guide on how to use Flow IDE to develop decentralized applications (dApps).
1. Create a new Flow Project
Visit ChainIDE and click the "Try Now" button on the front page of ChainIDE as shown in the figure below.
Here, you will choose your login method, which includes two options: GitHub and Guest. In the tutorial, select GitHub login, as later on, the use of the Sandbox requires users to log in with GitHub.
Click the "New Project" button.
A pop-up window will appear. On the left side of the pop-up, select "Flow". Then, select a temple to create a new project.
2. Workspace Overview
The workspace is divided into different sections:
Top Bar: This section contains the "Return to Dashboard" button, the project name, and options to modify your project name.
Left Panel: Here, you will find several tabs including Explorer, Search All, Plugin Manager, Port Manager, and Git. These tabs provide access to different functionalities such as exploring the project, managing plugins, and interacting with Git repositories.
Right Panel: This section contains plugins related to contract compilation, deployment, and interaction. These plugins enable you to compile and deploy smart contracts and interact with them after deployment.
Status Bar: This bar displays the version number, welcome message, logger, and connected wallet information.
The logger is located at the bottom of the workspace, the logger is used to access the panel at the bottom, which displays the IDE log output, terminal, port forwarding, and other features.
3. Account Panel
On the right-hand side of the workspace, you will find the Accounts plugin panel, which utilizes FCL (Flow Client Library) to authenticate and log out of your account. To begin, select either the Mainnet or Testnet to connect to, and then click the "Authenticate" button to establish a connection with your wallet. Once your wallet is connected, you will have the option to log out whenever necessary. This plugin panel enables you to manage your accounts and interact with the blockchain, allowing you to easily monitor and make changes to your dApp.
Flow Testnet Faucet: https://testnet-faucet.onflow.org/fund-account,
Once you have successfully authenticated your account, you can view important details such as the current account address, Flow balance address, and any contracts that have been deployed using that specific wallet address.
When you're ready to log out of the Flow IDE, simply click on the "Sign Out" button located in the top right-hand corner of the workspace
4. Deploying, Upgrading, and Interacting with Flow Contracts
The Flow IDE features a "Deploy and Interaction" panel on the right-hand side of the workspace, which enables users to deploy, upgrade, and interact with Flow smart contracts. With this panel, you can easily deploy your smart contracts to the blockchain, upgrade existing contracts, and interact with your deployed contracts.
4.1. Contract Deployment
To deploy the HelloWorld smart contract, start by opening the contract file in the Flow IDE Editor panel. Once the contract file is open, you'll notice that it is automatically selected in the Deploy column on the right-hand side of the workspace. From here, simply click the "Deploy" button and use your currently logged-in user to authorize the transaction. Finally, confirm the transaction in your wallet to deploy the contract.
Once your smart contract has been successfully deployed, switch to the Accounts panel and refresh the contract list for your current account. You should now see that the "HelloWorld" contract has been added to the list of deployed smart contracts under your wallet address. To view the code for the deployed contract, simply click on the "HelloWorld" contract within the list.
4.2. Updating the contract
To update the content of your smart contract, start by opening the originally deployed contract in the Flow IDE. From there, you can modify the contract content as needed and click the "Deploy" button again to redeploy the updated contract. To illustrate this process, let's assume you want to update the "HelloWorld" contract to return a different message. To do this, simply open the contract file ("HelloWorld.cdc") in the Contracts section of the IDE, modify the code to return "Hello, World, 2023!" instead of "Hello, World!", and then switch to the Deploy & Interaction panel. From there, click the "Deploy" button to redeploy the updated contract.
Once you have made the necessary updates to your smart contract, you will need to confirm the changes before you can redeploy the contract. After reviewing the changes, you can then click the "OK" button to initiate the update process.
4.3. Send Transaction
To interact with the deployed HelloWorld contract, open the Transaction.cdc file in the Explorer panel. Locate the code at the beginning and change the address from 0x01 to the actual address of the deployed HelloWorld contract (your wallet address), which can be found in the Accounts panel.
For example, replace 0x01 with 0x37635ca1570877c0 to use the HelloWorld contract with that address.
Then, go to the Deploy and Interaction panel on the right, select the TRANSACTION tab, and you will see that Transaction.cdc is automatically selected. Click on the "Send" button, use the currently logged-in user to authorize the transaction, and confirm in the wallet to send the transaction.
4.4. Execute the script
Open scripts > Script.cdc in EXPLORER, and click Execute, ChainIDE will execute the corresponding script and output the corresponding result.
5. Building on Flow using the Terminal
The Flow (Ubuntu) image of ChainIDE comes with pre-installed tools such as Flow-CLI, Flow-Emulator, and Node.js. To create a smart contract development folder for your dApp, open the Sandbox and enter the following command:
This will create a new folder named "my-dapp" in the current directory.
For more information on how to use Flow-CLI, please refer to the following link: https://developers.flow.com/tools/flow-cli/super-commands. For Node.js (16) documentation, please refer to the following link: https://nodejs.org/docs/latest-v16.x/api/
Thank you for learning how to use Flow IDE. If you encounter any issues or have any questions, please don't hesitate to contact us. We are always here to help!
Last updated
