Перейти к основному содержимому

Создание и тестирование вызова API

В этом руководстве вы узнаете, как создавать и тестировать вызовы API в FlutterFlow. Интеграция вызовов API позволяет вашему приложению взаимодействовать с внешними сервисами, получая данные в реальном времени и функциональность, которая расширяет возможности вашего приложения.

Создание вызова API​

Чтобы использовать API в вашем приложении, сначала создайте вызов API в FlutterFlow.

Просто выберите API Calls в левом меню навигации, нажмите кнопку + Add и выберите Create API Call. Введите API Call Name, выберите Method Type (GET, POST, DELETE, PUT или PATCH) и укажите URL API сервиса, к которому хотите обратиться.

Типы методов

Тип метода определяет тип операции, которую выполнит вызов API. Вот разбивка распространенных типов методов:

  • GET: Получает данные с сервера.
  • POST: Отправляет данные для создания или обновления ресурса.
  • DELETE: Удаляет ресурс с сервера.
  • PUT: Обновляет или создает ресурс с полными данными.
  • PATCH: Частично обновляет ресурс.

Динамические URL API​

Если вы хотите использовать динамический URL, например, <https://reqres.in/api/users/2> где 2 динамично и <https://reqres.in/api/users?page=5> где 5 динамично:

  1. Замените жестко заданное значение на значимое имя в скобках (например, с https://reqres.in/api/users/2 на https://reqres.in/api/users/[user_id]).
  2. Затем создайте новую переменную с тем же именем, которое вы указали в скобках.

Дальнейшие инструкции основаны на выбранном Method Type.

Для вызовов GET и DELETE​

Если вы выбрали GET или DELETE в качестве типа метода, следуйте шагам ниже:

  1. Опционально: Если вызов API требует заголовков запроса, таких как токен авторизации, добавьте заголовок.
  2. Опционально: Если вызов API требует параметров запроса, таких как номер страницы или ID пользователя, добавьте параметры запроса.
  3. Нажмите Add Call, чтобы сохранить вызов API.
warning

После внесения любых изменений вы должны сохранить вызов API.

В приведенном выше демо определяется вызов API GET для получения данных пользователей из REQ | RES (который предоставляет размещенный REST API для тестирования HTTP-запросов).

Демо использования динамического URL в GET-запросе выглядит следующим образом:

Чтобы добавить такой вызов API:

  1. Замените жестко заданное значение на значимое имя в скобках (например, с https://reqres.in/api/users/2 на https://reqres.in/api/users/[user_id]).
  2. Затем создайте новую переменную с тем же именем, которое вы указали в скобках.

Вызов API DELETE также можно определить аналогично; просто убедитесь, что вы выбрали Method Type как DELETE.

Для вызовов POST, PUT и PATCH​

Если вы выбрали POST request, следуйте шагам ниже:

  1. Опционально: Если вызов API требует заголовков запроса, таких как токен авторизации, добавьте заголовок.
  2. Создайте тело запроса для вызова API.
  3. Нажмите Add Call, чтобы сохранить вызов API.
warning

После внесения любых изменений вы должны сохранить вызов API.

В этом демо определяется вызов API POST с двумя переменными, userName и userJob. Переменные используются внутри JSON-тела запроса.

Вызовы API PUT и PATCH можно определить аналогично; убедитесь, что вы ввели действительный конечный URL API и выбрали правильный тип метода.

Группировка вызовов API​

Вы можете создать группу вызовов API, которые используют один и тот же базовый URL. Группировка вызовов API помогает добавить все заголовки запроса (например, токен авторизации) сразу, и они будут автоматически добавлены ко всем вызовам API внутри группы.

warning

Для private APIs заголовки, определенные в группе, не будут автоматически включены. Вам нужно будет вручную добавить заголовки для API, помеченных как приватные.

Чтобы создать группу API:

  1. Нажмите кнопку + (в верхнем левом углу) и выберите Create API Group.
  2. Введите API Group Name.
  3. Введите API Base URL. Это должна быть часть, общая для всех API. Примечание: Не ставьте '/' в конце.
  4. Вы можете добавить заголовки запроса, нажав кнопку + Add Header. См. подробные инструкции по добавлению заголовков.
  5. Нажмите Add Group. Это отобразит группу слева.
  6. Откройте newly created API group и нажмите + Add API Call.
  7. Добавьте вызов API так, как обычно. Примечание: В конечной точке API введите часть URL, которая начинается после базового URL.

Импорт определений API​

Мы позволяем добавлять несколько определений вызовов API, импортируя их напрямую из Swagger/OpenAPI оптом. С помощью одного клика вы можете добавить большое количество API, значительно сокращая время и усилия, необходимые для их ручного создания.

Кроме того, возможность импорта определений Swagger/OpenAPI напрямую в FlutterFlow устраняет риск ошибок, которые могут возникнуть при ручном создании определений API, обеспечивая надежность и эффективность приложений.

к сведению

Мы также добавляем все необходимые настройки для запуска API, такие как headers, query parameters, variables и body, как они определены в файле Swagger. Однако вам может потребоваться заменить жестко заданные значения в тексте Body на variables.

warning

Обратите внимание, что хотя возможно импортировать API, созданные с OAS 2.0 в FlutterFlow, вы можете столкнуться с некоторыми проблемами, такими как потеря тела запроса во время импорта. Наша функция импорта построена на стандарте OAS 3.0, поэтому для лучшего опыта и совместимости рекомендуется использовать API, соответствующие OAS 3.0 или выше.

Чтобы импортировать определения вызовов API:

  1. Нажмите иконку Import OpenAPI. Это откроет новое всплывающее окно.
  2. Нажмите Upload File. Здесь вы можете загрузить свой файл swagger в формате .yml или .json.
  3. После успешного импорта вы увидите список всех созданных API, добавленных как группа.

Вот пример импорта вызовов API оптом, взятый отсюда.

Тестирование вызовов API​

Вы всегда должны тестировать вызов API перед использованием его в приложении. Мы упростили для вас тестирование вызова API внутри нашего конструктора.

Чтобы протестировать вызов API вместе с его ответом, следуйте шагам ниже:

  1. Выберите уже созданный вызов API или тот, который вы сейчас определяете, и перейдите на вкладку Response & Test.
  2. Слева вы увидите раздел Variables, где можно ввести значения для переменных, определенных для вашего вызова API.
  3. Справа раздел Preview позволяет проверить URL API, заголовки запроса, тело запроса и ответ. На вкладке Test Response вы можете просмотреть полный ответ API, включая формат JSON и сырой текст тела, а также заголовок ответа.
  4. Нажмите Test API Call, чтобы запустить вызов API. Вы заметите, что отображается статус GET-запроса, и если он успешен (код статуса 200), результат, возвращенный этим запросом, также будет отображен ниже.
  5. Любое значение результата JSON можно получить, определив путь JSON.

Демо ниже показывает тестирование создания нового пользователя с помощью POST-запроса. Вызов API принимает две переменные: userName и userJob. Успешный POST-запрос возвращает код статуса 201.

к сведению

Тестирование запросов PUT и PATCH также будет аналогичным.

Действие [API Call]​

После того как вызовы API определены в вашем проекте FlutterFlow, вы можете использовать их там, где нужно.

Откройте Action Flow Editor на виджете, где должен запускаться вызов API. После выбора желаемого Action Trigger найдите "API Calls" в выпадающем списке Actions и выберите вызов API, который хотите использовать.

use-api-call.png

подсказка

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

Перейдите в ваш проект и следуйте шагам ниже, чтобы определить действие для любого виджета.

  1. Выберите Widget (например, Button), на котором хотите определить действие.
  2. Выберите Actions в панели Properties (правое меню) и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
  3. Нажмите + Add Action.
  4. Справа найдите и выберите действие API Call (в разделе Backend/Database).
    1. Выберите Group or Call Name из выпадающего списка.
    2. Опционально: Если ваш вызов API требует переменных (например, токен авторизации, параметры запроса, ID пользователя и т.д.), передайте их значение, нажав кнопку + Variable.
    3. Action Output Variable Name помогает получить ответ вызова API. По умолчанию мы устанавливаем случайное имя. Однако вы можете изменить его на значимое имя, если хотите (например, loginResponse).
    4. Вы можете добавить условное действие, которое проверяет, успешен ли вызов API.
    5. Если вызов API успешен, все действия под путем TRUE будут выполнены. Например, перейти на домашнюю страницу, если вход успешен.
    6. Если вызов API не удался, все действия под путем FALSE будут выполнены. Например, показать snackbar, если вход не удался.