Flutterflow

Платформа Nodul обеспечивает взаимодействие с приложениями, созданными с помощью сервиса Flutterflow, через узел Trigger on Webhook.

Flutterflow предоставляет интуитивные инструменты для дизайна интерфейсов мобильных приложений, позволяя быстро и эффективно разрабатывать фронтенд с минимальными усилиями. Nodul может управлять бэкенд-логикой.

Пример сценария: генерация случайных чисел для отображения в Flutterflow

Создание сценария в Nodul

• Trigger on Webhook: Начните сценарий с этого узла и сохраните его URL для последующего использования в Flutterflow.

• JavaScript: Добавьте узел с кодом для генерации случайного числа.

export default async function run({execution_id, input, data, store}) {
    let randomNumber = Math.floor(Math.random() * 101);

    return {
        random_number: randomNumber
    }
}

• Webhook Response: Используйте этот узел для отправки результата сценария в Flutterflow.

Создание формы в Flutterflow

Регистрация: Зарегистрируйтесь в Flutterflow.

Создание проекта

• Перейдите на страницу Projects и нажмите Create new.

• Назовите новый проект и выберите Create Blank.

Дизайн интерфейса

• На вкладке Widget Tree (1) просмотрите элементы интерфейса и обновите текстовый элемент (2) вверху.

• Добавьте TextField (2) в элемент Column (1).

• Добавьте Button в Column.

• Настройте параметры, выровняйте поля и переименуйте кнопки по желанию.

Настройка API

• На вкладке API Calls (1) выберите Create API Call (2).

• Назовите вызов (1), добавьте адрес узла Trigger on Webhook (2) и нажмите Add Call (3).

Тестирование

• Запустите сценарий один раз в Nodul.

• На вкладке Response & Test нажмите «Test API Call» и просмотрите результаты. Для выходного параметра number нажмите Add JSON Path, назовите его (1) и сохраните (2).

• Вернитесь на вкладку Widget Tree (1) и нажмите Add parameter (2).

• Добавьте строковый параметр number и нажмите Confirm.

• Для элемента TextField (1) установите Initial Value (2) равным number (3).

• Для элемента Button (1) перейдите в раздел Action (2).

• Откройте Action Flow Editor и добавьте действие для вызова настроенного API, чтобы запрос отправлялся в Nodul при нажатии кнопки. При необходимости измените имя выходного параметра первого действия.

• Добавьте действие для передачи ответа в параметр number.

Тестирование созданного сценария и формы Flutterflow

• Нажмите кнопку запуска приложения.

• Запустите сценарий один раз на платформе Nodul.

• Нажмите кнопку Generate и просмотрите случайное число, сгенерированное Nodul.