Для создания графического интерфейса для приложений на FastAPI часто Python-разработчики используют что-то вроде gradio или streamlit. В этом уроке я расскажу про ещё одну альтернативу - api2app.

Отличие этой альтернативы в том, что вам не нужно изучать библиотеки и программировать, графический интерфейс для своего приложения можно создать, используя другой интуитивно понятный графический интерфейс. При этом код не будет привязан к какому-то стороннему серверу, вы сможете его скачать и использовать на своём сервере. Кроме того, при помощи api2app вы можете тестировать свои API.

Предположим, у вас уже есть API c использованием swagger:

Исходный код API, которое я использую в этом уроке, есть на github: https://github.com/andchir/fastapi-support-tickets

Это API для управления службой поддержки, в котором не требуется регистрация (авторизация по uuid).

Импорт и тестирование API

На сайте нужно перейти в раздел API и нажать кнопку "Импортировать". Если у API есть внешний доступ, для импорта в сервис api2app можно использовать ссылку на openapi.json:

Импорт конфигурации API при помощи openapi.json

Также конфигурацию API можно импортировать, используя curl-команду:

Импорт конфигурации API при помощи curl команды

Все API успешно импортированы. Теперь можно открыть и протестировать, добавив API-ключи:

Можно также ввести локальный адрес и переключить в режим "Браузер" (API-ключ сделать публичным).

Тестирование локального API в режиме "Браузер"

Создание приложения

Для создания графического интерфейса приложения необходимо перейти в раздел "Приложения" и нажать кнопку "Создать новое приложение".

Можно добавить поля и выбрать действия ввода и вывода (API) вручную, а можно использовать наш новый режим - Разработка с помощью ИИ.

Кнопка для активации режима разработки с помощью ИИ

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

Чем лучше Вы опишите задачу, тем лучше будет результат.

Кончено, Вы можете не использовать api2app, а сразу попросить любую другую модель ИИ создать веб-приложение для API, но при использовании api2app токенов тратится значительно меньше, так как ИИ не нужно писать полный код приложения, а нужно только создать JSON по определенным правилам. Кроме того, результат более предсказуемый. Документация для ИИ находится здесь: https://github.com/andchir/api2app-frontend/blob/main/docs/JSON_FORMAT.md

Такое приложение мне создал ИИ:

Остальные вкладки

Проверяю правильно ли ИИ сделал связку элементов приложения с полями API.

Действие ввода - API, для которого будет использован элемент ввода

Вижу, что для создания службы поддержки всё корректно:

Действие ввода для названия службы поддержки

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

Создание локального демо-приложения для FastAPI

После того как приложение готово, его можно скачать.

Если Вы планируете использовать демо-приложение на разных доменах (локально и на удалённом сервере), то можно перед скачиванием у всех API убрать домен. Также можно это сделать позже в файлах JSON, которые будут в ZIP-архиве.

Убран домен перед скачиванием приложения

У меня получилось два приложения - для администратора и для пользователя отдельно. Скачиваю приложения и распаковываю ZIP-архивы в локальную папку "static".

Все JSON-файлы с параметрами приложения и API находятся в папке "assets":

Теперь нужно в коде приложения создать роуты для этих приложений:

app.mount("/demo", StaticFiles(directory="static/demo", html=True), name="demo")
app.mount("/demo-admin", StaticFiles(directory="static/demo-admin", html=True), name="demo-admin")

Готово. Теперь, если открыть в браузере адрес http://127.0.0.1:8000/demo, откроется готовое приложение с удобным интерфейсом.

Данное приложение не привязано к серверу api2app, оно принадлежит только Вам. В этой статье я специально не давал ссылку на основной сайт, потому что знаю как хабражители не любят рекламные статьи :) (кто захочет, тот найдёт адрес). Надеюсь инструмент, описанный в этом уроке, будет кому-то полезен.

api2app: Использование совместно с FastAPI