The Flow Playground is an editor and emulator built directly into the browser.

Using the playground, developers can start learning to write Cadence smart contracts and interact with a local Flow emulated blockchain using scripts and transactions.

You do not need to know Cadence to follow the tutorial. The playground has preloaded templates that we'll use.

The goal of this tutorial is to help you get familiar with the Flow Playground and how it works 🏆

🗣️ FYI: Google Chrome is the recommended browser according to the Flow documentation.

Accounts

The Flow Playground starts with five default accounts. Each account has a different address starting with 0x01. The accounts are located in the left toolbar. You can read more about Accounts here.

Deploying a Contract

To deploy a contract, you first need to select an Account. The accounts are located on the left and are labeled by address e.g. 0x01, 0x02.

Select account 0x01. This is the account we will use to deploy our contract.

To the right of the Accounts, is the contract section. Here you will see a preloaded contract called HelloWorld.cdc. The Playground is preloaded with a contract template so there is no need to create our own contract.

There are a lot of comments but for good reason because the comments explain exactly what is happening with the code. Two important points, our greeting variable is set to “Hello World” and the function hello() returns the greeting variable.

We’re going to deploy the contract to the local Flow emulated blockchain. To do this, click on the green Deploy button located on the right of the screen.

After deploying the contract, the console will print Deployed Contract To: 0x01 to indicate that the contract was deployed successfully.

If you see this message, well done! You have successfully deployed a contract to account 0x01!

Transactions

Transactions are one way to interact with the Flow blockchain. Transactions are used to make changes on the blockchain and cost money to execute.

On the left side of the screen, under Accounts, you will see Transaction Templates. Select the transaction template named “Transaction”. A preloaded transaction will appear.

Without going too in-depth with Cadence, this transaction will log the greeting variable from the HelloWorld contract we deployed to account 0x01. Remember the greeting variable in the HelloWorld contract was “Hello World”.

You will see a new box appear on the right side of the screen: Transaction Signers. This is where you will choose the account to sign the transaction. In this case, we will leave it as the default account 0x01.

Click the green Send button.

The results of the transaction will appear in the console:

Congrats 👏 You just ran a transaction!

Scripts

Scripts are used to read data (not change data) from the blockchain and there are no fees for using scripts on Flow.

Under Transactions, you will see the Script Template section.

Select the script template named “Script” and then delete all of the code inside the template.

Copy and paste the following code into “Script”:

import HelloWorld from 0x01

pub fun main(): String {
  return HelloWorld.greeting
}

This script will return the value of the variable greeting from the HelloWorld contract, which is “Hello World”.

On the right side of the screen, there is a green Execute button. Click Execute.

Inside the console, the script results will be displayed. This is how your console should look:

Wow 🤩 Our script read from the HelloWorld contract that we deployed to account 0x01 and returned the “value” of the greeting variable. Bravo!

Congratulations

You made it! You’re officially a Playground Pro 💪 You have deployed a contract and interacted with your contract using a script and a transaction. Now it’s time for you to dive deeper.

Playground Tutorials

The playground also includes the following tutorials that you can complete:

• Hello World

• Mint Fungible Tokens

• Create Non-Fungible Tokens

• Build a Marketplace

• Expand Non-Fungible Tokens

• Voting Contract

Each tutorial contains all the code that you will need. This is a great way to get more familiar with Cadence and how to interact with the Flow blockchain.

For more information, you can visit the Flow docs or hop in the Flow Discord!

Thanks for checking out the tutorial and feel free to share😄 You can connect with me here or on Twitter.