Пользовательская функция — это блок кода, который выполняет определенную задачу и может быть повторно использован в различных частях приложения. Если в приложении неоднократно выполняется определенный набор операций, может оказаться полезным создать пользовательскую функцию.
Наш редактор пользовательского кода позволяет задавать входящие и исходящие параметры, а также легко проверять наличие ошибок прямо в редакторе.
Добавление пользовательской функции
Давайте посмотрим, как добавить пользовательскую функцию, на примере страницы корзины, которая рассчитывает и отображает общую стоимость товаров в корзине. Можно создать пользовательскую функцию, которая будет принимать в качестве параметра товары в корзине и возвращать общую цену всех товаров. Эту функцию можно повторно использовать во всем приложении, когда необходимо вычислить общую стоимость товаров в корзине. Вот как это выглядит:
1. Определение пользовательской функции
Для определения пользовательской функции:
- Выберите пункт Пользовательские функции в меню навигации (левая часть экрана).
- Нажмите + Добавить, выберите Function и укажите имя функции.
- Для получения выходных данных см. раздел Возвращаемое значение,
- Установите подходящий тип возвращаемого значения. Например, если пользовательская функция возвращает текст, установите для параметра Type значение String. Если пользовательская функция возвращает список данных, например, чисел или названий фруктов, отметьте опцию List. Для данного примера установите значение Double, поскольку мы можем иметь значение общей цены в десятичной системе счисления.
- Если вы уверены, что этот аргумент всегда будет иметь значение и не будет равен null, можно снять флажок с опции Nullable.
- Для передачи входных данных:
- Нажмите на кнопку + Добавить аргумент (в разделе Определить аргументы).
- Введите имя первого параметра в поле ввода Аргумент 1.
- Установите подходящий тип входящего значения.
- Определите, нужно ли передавать один элемент или несколько, и установите соответствующий параметр List. В данном примере это будет список товаров в формате JSON.
- Если вы уверены, что этот аргумент всегда будет иметь значение и не будет равен null, можно снять флажок Nullable.
2. Добавить код
Чтобы добавить код:
- На вкладке Код функции добавьте свой пользовательский код.
- Кроме того, для генерации кода из текста можно воспользоваться вкладкой Code Copilot (на базе GPT-3.5 Turbo). Просто укажите ему, какая функция вам нужна, например, «вычислить общую стоимость товаров», и он сгенерирует пример кода, который вы можете использовать. Обратите внимание, что код будет сгенерирован на основе добавленных входных и выходных параметров.
- Чтобы получить код, нажмите кнопку Копировать функцию.
- Чтобы сгенерировать код с другим вариантом, нажмите кнопку Обновить.
- Нажмите кнопку Сохранить функцию.
- Щелкните на Check Errors (Проверить ошибки), чтобы проверить, все ли в порядке для продолжения работы. Если все в порядке, появится кнопка No Errors!, в противном случае появится кнопка Has Errors (нажмите на нее, чтобы увидеть ошибки; см. также, как исправить ошибки с помощью ChatGPT).
Видео:https://www.loom.com/share/828cc62933024d47b3c566acea2ee862?sid=822c06ad-55ee-4c65-8a0c-df3f5564934b
3. Тестирование кода
Тестирование кода пользовательской функции позволяет убедиться в том, что код работает так, как ожидается, при различных входных воздействиях. В целом это помогает обрести уверенность при отправке приложения в производство.
Чтобы протестировать код, выполните следующие действия:
- После добавления кода выберите вкладку Тест функции.
- Укажите входные данные для функции. В данном примере это будет список JSON-объектов, каждый из которых содержит информацию о товаре.
- Нажмите на кнопку Выполнить.
- Проверьте вывод, отображаемый под кнопкой Выолнить.
- Чтобы добавить дополнительные тесты, нажмите кнопку + Добавить тест. Чтобы запустить все тесты вместе, нажмите на кнопку Запустить все тесты.
4. Использование пользовательской функции
Созданная функция доступна через меню «Установить из переменной». Вот как ее можно использовать:
- Выберите любое свойство виджета, позволяющее устанавливать значение из переменной.
- Выберите Custom Function > [имя_настраиваемой_функции].
- Укажите входные данные для пользовательской функции с помощью функции Set Function Argument. Для данного примера укажите список товаров в формате JSON (который в данном примере сохраняется в переменной app state).
- Опционально можно задать параметры формата чисел для отображения их в соответствующем формате.
- Например, отображение общей цены в десятичном формате с символом валюты.
Аналогичным образом можно использовать эту пользовательскую функцию везде, где это необходимо в вашем приложении. Совет: вы можете скопировать переменную функцию.
Форматирование пользовательской функции
При работе с кодом важно убедиться, что он правильно отформатирован и легко читается. Когда код не выровнен должным образом, его бывает трудно понять и отладить. Для решения этой проблемы мы предлагаем встроенный форматировщик кода, который автоматически форматирует ваш код.
Для его использования достаточно щелкнуть на значке Format Code (), расположенном в правой верхней части редактора кода.
Выявление ошибок
Возможно, что при добавлении кода в редакторе кода вы можете допустить ошибки. В такой ситуации наш редактор кода помогает найти ошибки. Чтобы определить ошибки:
- Найдите строку, в которой редактор кода показывает красное подчеркивание.
- Подведите курсор мыши к строке, чтобы увидеть точную ошибку.
Поддерживаемые типы данных
При определении параметров пользовательских действий доступны следующие типы данных.
- Целое число: Для передачи/приема чисел, таких как 100, 4302, 50000 и т.д.
- Двойной: Для передачи/получения десятичных чисел, таких как 12.43, 3233.50, 65.5666 и т.д.
- Логический: Передача/получение значения true или false.
- Строка: Для передачи/получения обычного текста, такого как название, описание и т.д.
- Путь к изображению: Для передачи/получения URL-адреса загруженного изображения.
- Путь к видео: Для передачи/получения URL-адреса загруженного видео.
- Аудио путь: Для передачи/получения URL-адреса загруженного аудио.
- Цвет: Для передачи/получения значения цвета.
- Ссылка на документ: Передать/получить ссылку на документ.
- Документ: Передать/получить фактическую запись, т.е. документ Firestore.
- JSON: передача/получение значения JSON, например {«firstName»: «John», «lastName»: «Doe»}.
- DateTime: Передача/получение значения даты и времени.
- Диапазон времени (TimestampRange): Для передачи/получения значений начального и конечного времени.
- Lat Lng: Передача/получение широты и долготы определенного места.
- GooglePlace: Для передачи/получения данных GooglePlace.
- Data Type (Тип данных): Для передачи/получения пользовательского типа данных (также как Firestore Map).
- Загруженный файл: передача/получение локально загруженных файлов, таких как PDF, аудио (MP3) или файлов любого другого типа.
Вопросы и ответы
Я не могу добавить импорт!
Импорт в пользовательской функции невозможен. Чтобы иметь возможность добавлять импорты, используйте Custom Widget или Custom Action.
Получаю ошибку: Функция ‘FFAppState’ не определена.
Вы не можете использовать переменную состояния приложения (например, FFAppState().variablename) непосредственно в коде пользовательской функции. Вместо этого можно передать переменную состояния приложения в качестве параметра, а затем использовать ее в коде, как показано на рисунках ниже.