Создаем на Flow | Изучаем FCL - 1. Введение

maxstalker

Max Daunarovich

Posted on June 29, 2022

Создаем на Flow | Изучаем FCL - 1. Введение

Краткий обзор

После того, как вы закончите чтение этой статьи вы будете знать:

  • что такое FCL и зачем он вам нужен
  • как настроить FCL JS для взаимодействия с Тестовой сетью (Тестнет / Testnet) блокчейна Flow
  • как запустить исполнение простого скрипта написанного на языке Cadence

Что такое FCL?

Flow Client Library (FCL) - это стандартизированный набор коммуникационных шаблонов между "кошельками" (wallets), приложениями и пользователями, который используется для выполнения большого разнообразия действий в вашем децентрализованном приложении. Различные языки программирования имеют свои собственные имплементации концепции FCL и стандарта.

В среде Javascript, это NPM-пакет, который используется для взаимодействия между кошельками, пользователем и блокчейном Flow, как в браузере так и на серверной стороне.

Подожди, а что за блокчейн такой, Flow?

Я рад, что вы задали такой вопрос! Flow - это блокчейн, созданный специально для нового поколения приложений, игр и цифровых “предметов” используемых в них.

Есть много различных характеристик, которые делают Flow уникальной “цепью”. Вот некоторые из них:

  • Cadence - это новый легко-изучаемый ресурсо-ориентированный язык программирования, разработанный для децентрализованных приложений (dApps) и цифровых “предметов”
  • Обновляемые Смарт-Контракты - позволяет безопасно и “прозрачно” исправить ошибки и обновить предопределенные части смарт-контракта
  • Быстрая и Детерминированная Завершенность (Finality) - Flow разработан таким образом, чтобы быть быстрый и отзывчивым - позволяя достигнуть глобальной завершенности в течении нескольких секунд

Вы можете найти больше информации о блокчейне Flow на сайтах https://flow.com и https://docs.onflow.org/

К сожалению, в данный момент документация доступно только на английском языке 😢 
Но мы работаем в этом направлении и обновим ссылки на русско-язычные ресурсы, как только они станут доступны

Простой Пример

В последующих статьях мы покажем более сложные и значительные пример, но пока давайте попросим тестовую сеть Flow вернуть нам определенное число (пожалуйста не убегайте, дальше будет гораздо интереснее 😅)

Воспользуемся платформой Codesandbox (https://codesandbox.io), чтобы было проще поделиться с вами готовым решением и позволяя вам “форкнуть” (создать свою копию, чтобы иметь возможность делать в ней изменения) “песочницу” и попробовать свои идеи.

Шаг 1 - Установка

Добавьте пакет "@onflow/fcl": "1.0.0" в качестве одной из ваших “зависимостей”:

Шаг 2 - Импорт

Программный пакет FCL JS предоставляет множество методов - для “постройки” взаимодействий, конфигурации FCL, взаимодействии с цепью и т.д. Мы импортируем два их них:

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

Шаг 3 - Настройка FCL

FCL должен знать, куда ему отправлять скрипт для обработки. Нижеследующий код задаст адрес Узла Доступа (Access Node) используя метод config:

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

Шаг 4 - Исполните скрипт на Тестнете

Для того, чтобы исполнить скрипта на блокчейне Flow, мы можем отправить его при помощи метода query . Наш пример не использует аргументов (параметров), поэтому внутрь query мы передадим только код скрипта:

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

В итоге - Полный Код

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

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

// Мы воспользуемся конструкцией IIFE чтобы автоматически // запустить наш код 
(async () => {
  console.clear();

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

  const result = await query({ cadence });
  console.log({ result });
})()
Enter fullscreen mode Exit fullscreen mode

После выполнения данного блока кода вы должны увидеть ответ в консоли:

{result: "42"}
Enter fullscreen mode Exit fullscreen mode

Поздравляем! Вы успешно справились с заданием 👍

В следующей статье мы покажем, как вы можете передавать параметры для ваших скриптов. Оставайтесь на связи! 👋

Материалы

Ccылки и Исходный Код

  • (ENG) | Документация Flow  - https://docs.onflow.org/ - более детальная информации о блокчейне Flow и как взаимодействовать с ним
  • (ENG) | Flow Portal - https://flow.com/ - your entry point to Flow
  • (ENG) | FCL JS - https://github.com/onflow/fcl-js - Исходный код и возможность поучаствовать в разработке библиотеки FCL JS library
  • (ENG) | Cadence - https://docs.onflow.org/cadence/ - Введение в язык программирования Cadence
  • Codesandbox - https://codesandbox.io - Замечательная среда разработки и прототипирования прямо в вашем браузере
💖 💪 🙅 🚩
maxstalker
Max Daunarovich

Posted on June 29, 2022

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

Sign up to receive the latest update from our blog.

Related