Construye en Flow | Aprende FCL - 1. Introducción

brunogonzales

Bruno Gonzales

Posted on May 27, 2022

Construye en Flow | Aprende FCL - 1. Introducción

Resumen
Después de atravesar los ejemplos en este post sabrás:

  • Qué es FCL y cómo se usa.
  • Cómo configurar FCL JS para interactuar con la Testnet de la blockchain de Flow.
  • Como ejecutar scripts en Cadence 💪

¿Qué es FCL?

La Flow Client Library (FCL) es un conjunto de patrones de comunicación estandarizados entre billeteras, aplicaciones y usuarios, usado para realizar una variedad de acciones desde tu dapp. Diferentes lenguajes tienen tienen su propia implementación de los conceptos y estándar de FCL .

En el lado de JavaScript, es un paquete NPM usado para interactuar con billeteras de usuarios y la blockchain de Flow tanto como en el navegador y en el ambiente del servidor.

Espera, que es la Flow blockchain?

Es una buena cosa que hayas preguntado! Flow es una blockchain construida para la siguiente generación de juegos, aplicaciones y activos digitales que les dan poder.

Hay muchas características diferentes que hacen a Flow único. Aquí algunas de ellas:

  • Cadence - El nuevo lenguaje de programación orientado a recursos que es fácil de aprender diseñado para dapps y bienes digitales.
  • Contratos inteligentes actualizables - Parcha bugs y actualiza partes pre-especificadas de un contrato inteligente de forma segura.
  • Rapido y de finalidad determinista - Flow esta construido para ser rápido, responsivo - logrando finalidad global en segundos.

Para más información acerca de la blockchain de Flow visita flow.com y docs.onflow.org

Ejemplo simple

En futuros posts demostraremos ejemplos mas complejos y significativos pero por ahora tratemos de hacer que la Testnet de Flow retorne un numero especifico para nosotros (por favor mantén presente que será mucho más interesante en un futuro).

Usaremos la plataforma Codesandbox para que compartir el resultado final sea mas fácil y permitirte clonar el sandbox y probar tus propias ideas.

Paso 1 - Instalación

Añade "@onflow/fcl": "1.0.0" como dependencia a tu proyecto.

Paso 2 - Importar

FCL JS expone multiples metodos desde el paquete para construir interacciones, configurar FCL, interactuar con la blockchain, etc. Importaremos los metodos:

import { query, config } from "@onflow/fcl";
Enter fullscreen mode Exit fullscreen mode

Paso 3 - Configurar FCL

FCL necesita saber donde enviar ese script para ejecución. La siguiente línea establecerá el endpoint de Access Node usando el método config .

const api = "[https://rest-testnet.onflow.org](https://rest-testnet.onflow.org/)"
config().put("accessNode.api", api);
Enter fullscreen mode Exit fullscreen mode

Paso 4 - Ejecutar un script en la Testnet

En orden para ejecutar Cadence scripts en la blockchain de Flow, podemos enviarlos con el metodo query. Nuestro caso básico no utiliza argumentos, asi que solo pasaremos el script en Cadence.

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

Finalmente - Código completo

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

const api = "[https://rest-testnet.onflow.org](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 });
})();
Enter fullscreen mode Exit fullscreen mode

En el siguiente post resaltaremos como pasar un argumento a tus scripts. Quédate atentx! 👋

El sandbox completo esta disponible aquí: https://codesandbox.io/s/dev-to-fcl-introduction-zbhz0v

Links y fuentes

Esta es una traducción al español del primer artículo de la serie Build on Flow | Learn FCL escrita por Maksimus Starka.

💖 💪 🙅 🚩
brunogonzales
Bruno Gonzales

Posted on May 27, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related