흐름에 따라 | Изучаем FCL — 2. Передавайте аргументы в скрипты

크라트키 오브조르

После работы с данными в этой статье вы должны знать, как это сделать:

передать простые аргументы - Int , String и т. д.

передавать сложные аргументы - Arrays и Dictionaries

передавать сложные структуры - 사전의 배열 및 т.п.

💡Лучше учиться с помощью видео? К счастью для вас, есть видео, которое вы можете смотреть вместе с этим руководством. Рассказывает один и единственный разработчик Flow Developer Advocate - !

콘텐츠 키마징

https://youtu.be/DWz8Plv5n3k

Ранее в разделе "Изучение FCL"

В мы узнали, как отправить на выполнение базовый скрипт Cadence. В этой статье я покажу вам, как передавать различные типы аргументов.

Для этого и всех следующих примеров мы будем использовать Codesandbox, чтобы упростить процесс 🙂 .

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

Добавьте "@onflow/fcl": "1.0.0" в качестве зависимости

Шаг 2 - 나스트로이카

Как и в прошлый раз импортируем необходимые 방법 및 nasstrаиваем FCL:

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

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

Шаг 3 - Передача целых значений

passIntegers передаст два целых аргумента простому скрипту Cadence, который вернет нам их сумму.

const passIntegers = async () => {
  // Here we will store the code we want to execute.
  // We can inline it into the object we pass to "query" method,
  // but it feels cleaner this way
  const cadence = `
    pub fun main(a: Int, b: Int): Int{
      return a + b
    }
  `;

  // Even though both of the arguments are numbers, we need to pass them as strings representation
  const a = (5).toString();
  const b = (12).toString();
  const args = (arg, t) => [arg(a, t.Int), arg(b, t.Int)];

  // "query" will pass Cadence code and arguments to access node for execution and return us a result:
  // read more about "query" method on Flow Docs Site:
  // https://docs.onflow.org/fcl/reference/api/#query
  const result = await query({ cadence, args });
  console.log({ result }); //
};

Шаг 4 - Передача нескольких различных типов

passMultipleDifferentTypes передаст аргументы String, Bool, UFix64 및 주소.

const passMultipleDifferentTypes = async () => {
  const cadence = `
    pub fun main(a: String, b: Bool, c: UFix64, d: Address): Address{
      return d
    }
  `;

  const a = "Hello";
  const b = true;
  // All  numeric values should be passed as strings, remember? :)
  const c = "42.0";
  // Address should be passed as string value as well
  const d = "0x01";

  // Types should always mirror argument types defined in script
  const args = (arg, t) => [arg(a, t.String), arg(b, t.Bool), arg(c, t.UFix64), arg(d, t.Address)];

  const result = await query({ cadence, args });
  console.log({ result }); //
};

Шаг 5 - Передача 배열

메서드passArray는 어레이의 배열과 데이터를 저장하는 데 사용됩니다.

const passArray = async () => {
  const cadence = `
    pub fun main(a: [String]): String{
      return a[1]
    }
  `;

  const a = ["Hello", "Cadence"];
  // Type of the argument is composed of t.Array and t.String
  const args = (arg, t) => [arg(a, t.Array(t.String))];

  const result = await query({ cadence, args });
  console.log({ result }); //
};

Шаг 6 - Передача Dictionary

Метод passDictionary передает Dictionary в качестве аргумента, а затем возвращает значение одного из полей. Ключи указанного словаря будут иметь тип String , а значения - тип Int .

const passDictionary = async () => {
  // In this example we will pass to Cadence Dictionary as argument
  // keys will be of type "String" and values of type "Int"
  const cadence = `
    pub fun main(a: {String: Int}): Int?{
      return a["amount"]
    }
  `;

  // Dictionaries should be represented as array of key/value pairs of respective types
  // Note that we shall pass numeric value as string here
  const a = [{ key: "amount", value: "42" }];
  // Dictionary type is composed out of t.Dictionary, t.String and t.Int for our case
  const args = (arg, t) => [
    arg(a, t.Dictionary({ key: t.String, value: t.Int }))
  ];

  const result = await query({ cadence, args });
  console.log({ result }); //
};

Шаг 7 - Передача сложного аргумента

passComplex покажет, как передать аргумента의 딕셔너리 배열. Концептуально это смесь 배열과 사전.

const passComplex = async () => {
  // In this example we will pass an Array of Dictionaries as argument
  // Keys will be of type "String" and values of type "Int"
  const cadence = `
    pub fun main(a: [{String: Int}]): Int?{
      return a[0]["amount"]
    }
  `;

  // Array of Dictionaries should be represented as array of arrays of key/value pairs of respective types
  // Note that we shall pass numeric value as string here
  const a = [[{ key: "amount", value: "1337" }]];
  // Dictionary type is composed out of t.Dictionary, t.String and t.Int for our case
  const args = (arg, t) => [
    arg(a, t.Array(t.Dictionary({ key: t.String, value: t.Int })))
  ];

  const result = await query({ cadence, args });
  console.log({ result });
};

Заключение

Давайте добавим IIFE в конец filela и заполним его методами, которые мы только что разобрали:

(async () => {
  console.clear();
  await passIntegers();
  await passMultipleDifferentTypes();
  await passArray();
  await passDictionary();
  await passComplex();
})();

Когда все разрешится, в увидите следующее:

{result: "17"}
{result: "0x0000000000000001"}
{result: "Cadence"}
{result: "42"}
{result: "1337"}

Практикуйтесь в передаче различных типов аргументов, поскольку в будущем это станет для вас обычным делом.

Полный код можно найти на Codesandbox здесь:
https://codesandbox.io/s/dev-to-fcl-script-arguments-knpuel

예를 들어! 👋

정보 조사

Другие источники, которые могут быть вам полезны:

(영어) | Документация Flow - https://docs.onflow.org/ - более детальная информации о блокчейне Flow и как взаимодействовать с ним

(영어) | Flow Portal - https://flow.com/ - Flow에 대한 진입점

(영어) | FCL JS - https://github.com/onflow/fcl-js - Исходный код и возможность поучаствовать в разработке библиотеки FCL JS 라이브러리

(영어) | 케이던스 - https://docs.onflow.org/cadence/

Codesandbox - https://codesandbox.io - Замечательная среда разработки и прототипирования прямо в вашем браузере