Creating in Flow | Learning FCL 1 — Introduction

Quick Overview

After working with the code in this post, you should know how to

• pass simple arguments — Int, String, etc.
• Pass complex arguments — Arrays and Dictionaries.
• Passing complex structures — arrays of dictionaries, etc.💡 Learning is better with videos? Lucky for you, there is a video you can follow along with this guide. Narrated by one-and-only Flow developer advocate Kimkodashian !

Kimazing Content.
https://youtu.be/DWz8Plv5n3k
What is FCL?
The Flow client library (FCL) is a standardized set of communication patterns between wallets, applications, and users that are used to do a variety of things for your decentralized application. Different languages have their own implementations of the FCL concept and standard.

As for Javascript, it is the NPM package used to interact with user wallets and the Flow blockchain in both browser and server environments.

Wait, what is blockchain Flow?
Good thing you asked! Flow is a blockchain built for the next generation of apps, games and the digital assets on which they are based.

There are many different features that make Flow unique. Here are some of them:

• Cadence, a new easy-to-learn resource-based programming language designed for dApps and digital assets.
• Upgradable smart contracts . Secure and transparent bug fixing and updating of predefined parts of a smart contract.
• Fast and deterministic finality — Flow is built to be fast and responsive — achieving global finality within seconds

More information about Flow Blockchain can be found at https://flow.com and https://docs.onflow.org/.

A simple example

In future posts we’ll demonstrate more complex and meaningful examples, but for now let’s try to get Flow Testnet to return us a specific number (please bear with us, it gets much more interesting next 😄)

We’ll use the Codesandbox platform (https://codesandbox.io) to make it easier to share the final solution, while allowing you to fork Sandbox and try your own ideas.

Step 1 — Installation.

Add "@onflow/fcl": "1.0.0" as your dependency

Step 2 — Import

FCL JS provides several methods from the package — for «creating» interactions, configuring FCL, interacting with the network, etc. We import:

import { query, config } from "@onflow/fcl";

Step 3: Setting up the FCL

The FCL needs to know where to send this script to run. The following line will set up the access node endpoint using the config method:

const api = "https://rest-testnet.onflow.org"
config().put("accessNode.api", api);

Step 4. Execute the script on the test network.

To execute the Cadence script on the Flow blockchain, we can send it using the query method. Our base case does not use any arguments, so we will only pass one field in this argument:

  const cadence = `
    pub fun main(): Int{
      return 42
    }
  `;
  const theAnswer = await query({ cadence });
  console.log({ theAnswer });

Finally, the full code

import { query, config } from "@onflow/fcl";

const api = "https://rest-testnet.onflow.org"
config().put("accessNode.api", api);

// We will use IIFE to execute our code right away
(async () => {
  console.clear();

  const cadence = `
    pub fun main(): Int{
      return 42
    }
  `;

  const theAnswer = await query({ cadence });
  console.log({ theAnswer });
})();

In the next post we will tell you how to pass arguments to your scripts. Stay tuned! 👋

Full sandbox available here: Codesandbox | Learn FCL — 01. Introduction

Link and Sources

• Flow Docs website — https://docs.onflow.org/ — more information about the Flow blockchain and how to interact with it.
• Flow Portal — https://flow.com/ — your entry point to Flow
• FCL JS — https://github.com/onflow/fcl-js — Source code and opportunity to contribute to the FCL JS library
• Cadence — https://docs.onflow.org/cadence/ — Introduction to Cadence
• Codesandbox — https://codesandbox.io — An awesome browser IDE that allows you to quickly create prototypes.