Build on Flow: Learn FCL - Introduction

#javascript #flow #tutorial #fcl

Overview

After going through example in this post you will know

what FCL is and why you need it
how configure FCL JS to interact with Flow Testnet blockchain
execute basic Cadence script 💪

💡 Learn better with video? Lucky for you there is a video you can follow along w/ this guide. Narrated by one and only Flow Developer Advocate Kimcodeashian!

Kimazing Content

What is FCL?

The Flow Client Library (FCL) is a standardized set of communication patterns between wallets, applications and users that is used to perform a wide variety of actions of your dapp. Different languages have their own implementations of FCL concept and standard.

On the Javascript side, it's an NPM package used to interact with user wallets and the Flow blockchain in both browser and server environments.

Wait, what is Flow blockchain?

It's a good thing you asked! Flow is a blockchain built for the next generation of apps, games, and the digital assets that power them.

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

Cadence - The new easy-to-learn resource oriented programming language designed for dApps and digital assets
Upgradable Smart Contracts - Securely and transparently patch bugs and upgrade pre-specified 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/

Simple Example

In later posts we will showcase more complex and meaningful examples, but for now let's try to make Flow Testnet return a specific number for us (please bear with us, it will be much more interesting later 😄)

We will use Codesandbox (https://codesandbox.io) platform so it will be easier to share final solution, while enabling you to fork the sandbox and try your own ideas.

Step 1 - Installation

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

Step 2 - Import

FCL JS exposes multiple methods from package - to "build" interactions, to configure FCL, interact with chain, etc. We will import:

query (https://docs.onflow.org/fcl/reference/api/#query)
config (https://docs.onflow.org/fcl/reference/api/#common-configuration-keys) methods

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

Step 3 - Configure FCL

FCL needs to know where to send that script for execution. The following line will set Access Node endpoint using config method:

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

Step 4 - Execute a script on Testnet

In order to execute Cadence script on Flow blockchain, we can submit it with query method. Our basic case is not using any arguments, so we will only pass single field in that argument:

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

Finally - 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 next post we will highlight how to pass arguments to your scripts. Stay tuned! 👋

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

Link and Sources

Flow Docs Site - https://docs.onflow.org/ - More detailed information about 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 ability to contribute to the FCL JS library
Cadence - https://docs.onflow.org/cadence/ - Introduction to Cadence
Codesandbox - https://codesandbox.io - An amazing in-browser IDE enabling quick prototyping