Для создания графического интерфейса для приложений на 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 можно импортировать, используя curl-команду:
Все API успешно импортированы. Теперь можно открыть и протестировать, добавив API-ключи:
Можно также ввести локальный адрес и переключить в режим "Браузер" (API-ключ сделать публичным).
Создание приложения
Для создания графического интерфейса приложения необходимо перейти в раздел "Приложения" и нажать кнопку "Создать новое приложение".
Можно добавить поля и выбрать действия ввода и вывода (API) вручную, а можно использовать наш новый режим - Разработка с помощью ИИ.
В этом режиме нужно только выбрать API из списка и добавить текстовое описание приложения. Мой пример:
Чем лучше Вы опишите задачу, тем лучше будет результат.
Кончено, Вы можете не использовать api2app, а сразу попросить любую другую модель ИИ создать веб-приложение для API, но при использовании api2app токенов тратится значительно меньше, так как ИИ не нужно писать полный код приложения, а нужно только создать JSON по определенным правилам. Кроме того, результат более предсказуемый. Документация для ИИ находится здесь: https://github.com/andchir/api2app-frontend/blob/main/docs/JSON_FORMAT.md
Такое приложение мне создал ИИ:
Остальные вкладки
Проверяю правильно ли ИИ сделал связку элементов приложения с полями 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, оно принадлежит только Вам. В этой статье я специально не давал ссылку на основной сайт, потому что знаю как хабражители не любят рекламные статьи :) (кто захочет, тот найдёт адрес). Надеюсь инструмент, описанный в этом уроке, будет кому-то полезен.