Создаем на Flow | Изучаем FCL - 1. Введение
Tags: javascript, tutorial, blockchain, onflow
Published: 2022-06-29 12:48:46

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

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

- что такое 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://flow.com/) и [https://docs.onflow.org/](https://docs.onflow.org/)

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

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

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

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

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

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

### Шаг 2 - Импорт

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

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

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

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

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

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

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

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

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

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

```jsx
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 });
})()
```

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

```bash
{result: "42"}
```

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

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

## Материалы

- **(ENG) | Полный пример на Codesandbox** - [https://codesandbox.io/s/dev-to-fcl-01-introduction-zbhz0v](https://codesandbox.io/s/dev-to-fcl-01-introduction-zbhz0v)

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

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