В последнее время я опубликовал более десяти крупных статей на тему разработки собственного API с использованием FastAPI. Однако, в основном, эти статьи были теоретическими. Сегодня я решил создать чисто практическую статью, в которой мы с нуля разработаем полноценный веб-сервис с фронтендом и бэкендом.

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

Что мы будем использовать?

1. Python фреймворк FastApi (если с ним совсем незнакомы, то можете найти в моем профиле на Хабре подробное описание всех основных аспектов фреймворка)

2. Сервис WebSim, который сгенерирует для нас фронтенд. Подробное описание этого бесплатного сервиса и то, как им пользоваться я описывал в этой статье: «WebSim AI: Бесплатный ИИ-помощник для быстрой веб-разработки»

3. Библиотеку CurlFetch2Py, которая будет выполнять основную логику нашего приложения. Подробное описание библиотеки и того какие она проблемы решает я описывал тут: «CurlFetch2Py – Эффективное преобразование CURL и FETCH команд в структурированные Python объекты»

Что будет делать наше приложение?

Наше приложение будет принимать на входе CURL или FETCH строку и будет трансформировать ее в Python код. Пользователям на выбор мы дадим получение кода под работу с Python библиотекой Requests (синхронная) или с библиотекой HTTPX (асинхронная).

Логика такая:

1. Выбираем CURL/FECTH на входе

2. Вставляем строку

3. Выбираем Requests/httpx

4. Нажимаем на кнопку

5. Забираем Python код

И, когда с вводной частью определились, начнем писать код.

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

Для начала установим необходимые для проекта библиотеки. Я предлагаю сразу использовать файл requirements.txt, тем более он нам понадобиться при деплое. Заполним его так:

fastapi[all]
requests
httpx
curl_fetch2py

• requests и httpx предлагаю использовать для тестирования полученного от веб-приложения кода. Устанавливать не обязательно.

• curl_fetch2py библиотека, которая будет выполнять основную логику по трансформации CURL/FETCH в Python код.

• fastapi[all] нужен для установки fastapi со всеми зависимостями. К примеру, такая конструкция подтянет Pydantic, который мы будем использовать для валидации данных.

Для установки воспользуемся командой:

pip install -r requirements.txt

Теперь начнем писать само API.

Структуру я буду использовать ту же самую, что и во всех статьях по FastApi.

Подготовим следующие файлы.

 project/
├── app/
│   ├── api/
│   │   ├── router.py
│   │   ├── schemas.py
│   │   ├── utils.py
│   ├── static/
│   │   ├── script.js
│   │   ├── style.css
│   ├── templates/
│   │   ├── index.html
│   ├── main.py
├── requirements.txt

Теперь нам необходимо подготовит Pydantic модель для обработки входящих данных. Модель мы опишем в файле app/api/schemas.py:

from enum import Enum
from pydantic import BaseModel, Field


class StartEnum(str, Enum):
    fetch = "fetch"
    curl = "curl"


class TargetEnum(str, Enum):
    requests = "requests"
    httpx = "httpx"


class RequestData(BaseModel):
    request_type: StartEnum = Field(..., description="Вариант fetch или curl")
    target: TargetEnum = Field(..., description="Вариант requests или httpx")
    data_str: str = Field(..., description="Строка на вход")

Модель достаточно простая, если вы знакомы с синтаксисом Pydantic. Единственное что заслуживает внимания – это использование Enum (перечислений).

Я заложил в коде 2 варианта request_type, ограничив их fetch и curl. Кроме того, прописано ограничение для цели конвертации. Тут, так же, 2 варианта: reuests и httpx.

Кроме того, на вход мы будем ждать одно строковое поле. Тут будет содержаться или Fecth-срока или Curl-строка.

Теперь нам необходимо прописать одну утилиту под curl_fetch2py. Дело в том, что библиотека позволяет только получить Python-объект с данными, а нам нужно получить в виде строки код запроса (requsts/httpx).

Утилиту мы опишем в файле app/api/utils.py:

def execute_request(context, target):
    method = context.method.upper()
    url = context.url
    headers = dict(context.headers) if context.headers else None
    if isinstance(headers, dict):
        try:
            del headers['Accept-Encoding']
        except:
            pass

    data = dict(context.data) if context.data else None
    cookies = dict(context.cookies) if context.cookies else None

    if target == "httpx":
        return f'''import httpx
import asyncio


async def fetch():
    async with httpx.AsyncClient() as client:
        response = await client.request(
            method="{method}",
            url="{url}",
            headers={headers},
            data={data},
            cookies={cookies}
        )
        return response.text


rez = asyncio.run(fetch())
print(rez)
'''
    elif target == "requests":
        return f'''import requests

def fetch():
    response = requests.request(
        method="{method}",
        url="{url}",
        headers={headers},
        data={data},
        cookies={cookies}
    )
    return response.text


rez = fetch()
print(rez)
'''
    else:
        raise ValueError("Unsupported target")

Как вы видите, на вход данная утилита принимает context – результат выполнения логики curl_fetch2py и target – конечную цель трансформации.

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

Значение ключа "Accept-Encoding" из headers я удалил намеренно, так как это значение может помешать нам получать корректный результат в Python после выполнения полученных запросов.

Теперь мы полностью готовы для написания нашего первого и единственного API-метода. Опишем его в файле app/api/router.py:

from fastapi import APIRouter, HTTPException
from curl_fetch2py import CurlFetch2Py
from app.api.schemas import RequestData
from app.api.utils import execute_request

router = APIRouter(prefix='', tags=['API'])


@router.post('/api', summary='Основной API метод')
async def main_logic(request_body: RequestData):
    request_type = request_body.request_type
    target = request_body.target
    data_str = request_body.data_str

    try:
        if request_type == 'curl':
            context = CurlFetch2Py.parse_curl_context(data_str)
        elif request_type == 'fetch':
            context = CurlFetch2Py.parse_fetch_context(data_str)
        else:
            raise ValueError("Unsupported start type")
        return {"request_string": execute_request(context, target).strip()}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

Давайте разбираться.

Все начинается с импортов.

from fastapi import APIRouter, HTTPException

• APIRouter нам нужен для создания роутера, а HTTPException нужен для обработки ошибкок.

from app.api.schemas import RequestData

from app.api.utils import execute_request

Таким образом мы импортировали нашу Pydantic-модель и утилиту.

from curl_fetch2py import CurlFetch2Py

Тут мы импортировали основной класс библиотеки curl_fetch2py, который будет трансформировать CURL/FETCH строки в Python-объекты.

Затем мы настроили наш роутер:

router = APIRouter(prefix='', tags=['API'])

А теперь давайте отдельно разберем наш эндпоинт:

@router.post('/api', summary='Основной API метод')
async def main_logic(request_body: RequestData):
    request_type = request_body.request_type
    target = request_body.target
    data_str = request_body.data_str

    try:
        if request_type == 'curl':
            context = CurlFetch2Py.parse_curl_context(data_str)
        elif request_type == 'fetch':
            context = CurlFetch2Py.parse_fetch_context(data_str)
        else:
            raise ValueError("Unsupported start type")
        return {"request_string": execute_request(context, target).strip()}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

На старте мы привязываем работу данного эндпоинта к адресу /api.

Далее, для удобства работы, я достал значения request_type, target и data_str в отдельные переменные, которые мы после будем использовать в коде.

И далее, в зависимости от типа входящих данных, мы получаем Python-объект (контекст) и, если мы не получили никаких ошибок, возвращаем данные объект в виде JSON (словаря) под значение ключа request_string.

Само значение request_string мы прогоняем через нашу утилиту.

Теперь привяжем router к приложению и можно будет приступать к тестам. Для включения роутера необходимо в файле app/main.py прописать следующее:

from fastapi import FastAPI
from app.api.router import router as router_api


app = FastAPI()
app.include_router(router_api)

Теперь запустим наше FastApi приложение и проверим работает ли наш метод.. Для запуска приложения, с его корня (не папка app), выполним через консоль следующую команду:

uvicorn app.main:app --reload

Для входа в документацию воспользуемся http://127.0.0.1:8000/docs

Тут мы видим, что нужный нам метод появился. Давайте протестируем его. Для тестирования я буду использовать браузер Firefox и возьму сайт python.org.

1. Открываем сайт

2. Вызываем панель разработчика (F12)

3. Кликаем на вкладу «Сеть»

4. Обновляем страницу

5. Находим запрос, который возвращает HTML главной страницы

6. Кликаем по нему правой кнопкой мыши

7. Кликаем на «Копировать значение»

8. Далее нас будет интересовать вариант «Копировать как cURL (POSIX)» и «Копировать как Fetch»

Давайте протестируем как наш метод обрабатывает cURL строки.

Заполним данные следующим образом:

• request_type: curl

• target: requests: (после попробуем httpx)

• data_str: строка CURL, которую мы копировали.

Для проверки нажмем на «Execute».

Я получил корректный результат. FETCH результат протестируем отдельно на форме, так как нам необходима будет некоторая дополнительная обработка, для трансформации многострочной строки в однострочную (эту логику за нас напишет нейронка WebSim).

Приступаем к созданию фронта

Для  этого нам необходимо выполнит аутентификацию на сайте WebSim и там, в окне для ввода запросов, вписать то что мы хотим получить в итоге.

Далее я опишу каждый свой промт (запрос к нейросети) и при помощи скриншотов покажу какой результат я получал на том или ином этапе. Под каждым скрином описание того промта, который я оправлял WebSim.

ПРОМТ 1

ПРОМТ 2

ПРОМТ 3

ПРОМТ 4

По дизайну пока, думаю, достаточно. После первых тестов внесем в него корректировки, если это будет необходимо.

Теперь попросим нейросеть адаптировать JavaScript код приложения под наше существующее API.

ПРОМТ 5

после клика на кнопку "CONVERT TO PYTHON" должен выполнится POST запрос на /api. передаем JSON c такими полями {

  "request_type": "fetch",

  "target": "requests",

  "data_str": "string"

} при формировании data_str необходимо убедиться, что попадает именно однострочная строка, а не многострочная. затем необходимо в поле результата отобразить значение ключа request_string.

Обратите внимание, на этом этапе я попросил многострочные строки трансформировать в однострочные, тем самым сняв с нашего API необходимость заниматься этим вопросом.

Далее нам достаточно сохранить полученный результат. Для этого воспользуемся специальным функционалом сервиса WebSim.

Напоминаю, что на этапе подготовки проекта мы с вами заложили такие файлы как: index.html, style.css и script.js.

Разложим полученный HTML на отдельные файлы. В результате у меня получился следующий HTML:

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python-style cURL/Fetch Converter</title>
    <link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>
  <div class="container">
    <h1>Python-style cURL/Fetch Converter</h1>
    <div class="tabs">
      <div class="tab active" onclick="switchTab('curl')">cURL</div>
      <div class="tab" onclick="switchTab('fetch')">Fetch</div>
    </div>
    <textarea id="input" placeholder="Enter your cURL or fetch command here..."></textarea>
    <div class="button-container">
      <button class="clear-button" onclick="clearInput()">Clear Input</button>
      <button onclick="convertToPython()">Convert to Python</button>
      <div class="switch-container">
        <span class="slider-label">requests</span>
        <label class="switch">
          <input type="checkbox" id="libraryToggle">
          <span class="slider"></span>
        </label>
        <span class="slider-label">httpx</span>
      </div>
    </div>
    <div id="output"></div>
  </div>

  <div class="copy-alert" id="copyAlert">Copied to clipboard!</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="/static/script.js"></script>
</body>
</html>

 В него, отдельно, я прописал импорт JavaScript (script.js):

<script src="/static/script.js"></script>

И стилей (style.css):

<link rel="stylesheet" type="text/css" href="/static/style.css">

Стили и JS прописал в отдельных файлах. Тут дублировать не буду, кому нужен будет полный исходник – переходите в мой телеграмм канал «Легкий путь в Python», там вы найдете не только полный исходный код данного проекта, но и получите эксклюзивный контент, который я не публикую на Хабре.

Теперь, после того как мы подготовили наш фронт, его необходимо привязать к нашему FastApi приложению.

Для начала привяжем обработчик статических файлов (style.css и script.js). Для этого в файле app/main.py нам необходимо прописать следующее:

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

from app.api.router import router as router_api

app = FastAPI()

app.mount('/static', StaticFiles(directory='app/static'), 'static')

app.include_router(router_api)

Вы видите, что тут мы примонтировали статические файлы. О том как это работает и зачем я подробно писал в статье «Создание собственного API на Python (FastAPI): Подключаем фронтенд и статические файлы».

Теперь нам осталось описать вызов index.html при переходе в корень нашего приложения. Для этого изменим код файла app/api/router.py следующим образом:

from fastapi import APIRouter, Request, HTTPException, Depends
from fastapi.templating import Jinja2Templates
from curl_fetch2py import CurlFetch2Py
from app.api.schemas import RequestData
from app.api.utils import execute_request

router = APIRouter(prefix='', tags=['API'])
templates = Jinja2Templates(directory='app/templates')


@router.get('/')
async def get_main_page(request: Request):
    return templates.TemplateResponse(name='index.html', context={'request': request})


@router.post('/api', summary='Основной API метод')
async def main_logic(request_body: RequestData):
    request_type = request_body.request_type
    target = request_body.target
    data_str = request_body.data_str

    try:
        if request_type == 'curl':
            context = CurlFetch2Py.parse_curl_context(data_str)
        elif request_type == 'fetch':
            context = CurlFetch2Py.parse_fetch_context(data_str)
        else:
            raise ValueError("Unsupported start type")
        return {"request_string": execute_request(context, target).strip()}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

Тут мы привязали рендер, который будет подтягивать наш index.html и будет возвращать его при переходе в корень приложения.

Перезапустим приложение и перейдем по адресу: http://127.0.0.1:8000/

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

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

Видим, что все работает, но, кое-что нам точно нужно подправить.

Вернемся на сайт WebSim и опишем что бы мы хотели изменить в нашем дизайне или добавить. У меня получился такой промт:

• При смене вкладки CURL/FETCH пусть очищается поле ввода данных.

• Добавь кнопку для очистки строки ввода

• добавь визуальный перенос в результате, если ширина полученной строки превышает ширину экрана демонстрации. При этом влияния на ответ быть не должно (при копировании)

• стилизуй кнопку копирования, чтоб появлялся не обычный alert, a html

• стилизуй поле результата и поле ввода.

Затем я прикинул, что приложением может будут и с телефона пользоваться и попросил следующее:

• добавь адаптацию под мобильную версию

Не знаю как вас, а меня дизайн полностью устраивает.

Сохраняем, снова разбиваем код на куски и выполним несколько тестов обновленного приложения.

И cURL и FETCH корректно отрабатывают, так как мы это закладывали, а значит, что все работает корректно.

А теперь, для того, чтоб получить практическую пользу от приложения, предлагаю подготовить сложный requests запрос сайта, который без корректной передачи куки не будет возвращать правильные данные.

Для этого я возьму сайт DNS, скопирую в него CURL строку, трансформирую ее в requests запрос через наше веб-приложение и после посмотрю на результат выполнения.

Вставляю полученные данные и копирую результат:

В Pycharm у меня получился такой результат:

Я его немного изменю, а именно, не просто распечатаю результат, а сохраню его в HTML файл. Подпишем как request_curl.html

rez = asyncio.run(fetch())
with open('request_curl.html', 'w', encoding='utf-8') as result:
    result.write(rez)

Видим, что данные получены.

Теперь трансформируем curl в httpx и повторим попытку.

Получаем тот-же результат!

Получилось интересно, но хотелось бы чтоб нашу работу могли оценить и другие пользователи, не так-ли? Для того чтоб это стало возможно – нам необходимо выполнить деплой приложения на какой-то сервис, который поддерживает работу с FastAPI.

В качестве такого сервиса, уже не в первый раз, я выбираю Amvera Cloud.

Деплой приложения на Amvera Cloud

Основная причина, по которой я выбираю этот сервис – это его простота. Вам достаточно закинуть файлы в сервис через GIT или напрямую, через консоль, и сервис сам все подхватит и выполнит запуск.

Единственное, что для того, чтоб сервис понял, что именно вы будете запускать, ему необходимо прописать инструкции. Тут есть два варианта:

• Dockerfile – для тех, кто знает, что такое Docker

• amvera.yml – файл с простыми инструкциями, который можно сгенерировать прямо на сайте Amvera.

Далее я покажу, как используя amvera.yml файл и GIT мы выполним деплой за 5 минут. Засекайте.

1. Переходим на сайт Amvera Cloud

2. Выполняем простую регистрацию, если ее ещё не было (новые пользователи получают 111 рублей на баланс, чего будет достаточно для пользования сервисом пару недель, так как ценник более чем доступный)

3. Переходим в раздел проектов

4. Создаем новый проект

• Тут остановлю внимание на последнем этапе – формирование файла настроек. Настройки заполните, примерно, как на скрине ниже. Тут самое важное – это корректно указать название файла requirements.txt, так как система Amvera должна будет понимать какие библиотеки необходимо устанавливать.

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

Что примечательно, заморочки с Nginx/Apache, как и с htpps протоколом, сервис берет на себя, а вам остается только подготовить файлы и закинуть их в сервис.

Далее, перейдите на вкладку «Репозиторий». Там вас будет интересовать git-ссылка на ваш репозиторий.

Копируем ссылку и на локальной машине, последовательно, выполняем следующие команды (предварительно устанавливаем GIT на локальный компьютер):

git init
git remote add amvera ptoject_link

В моем случае это:

git remote add amvera https://git.amvera.ru/yakvenalex/curl-fetch2py

На этом этапе, если вы впервые работаете с Amvera через GIT, вам необходимо будет ввести логин и пароль от доступа к личному кабинету Amvera.

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

git pull amvera master

Файл настроек должен иметь такой вид:

---
meta:
  environment: python
  toolchain:
    name: pip
    version: 3.12
build:
  requirementsPath: requirements.txt
run:
  persistenceMount: /data
  containerPort: 8000
  command: uvicorn app.main:app --host 0.0.0.0 --port 8000

Тут важно, чтоб порт контейнера совпадал с портом, который вы используете в своей команде (command). Если тут вы видите, что порты отличаются – исправьте это в файле настроек.

После этого отправим приложения на сервис Amvera.

git add .
git commit -m "init commit"
git push amvera master

После этого файлы должны будут оказаться в сервисе.

Далее вам остается подождать 2-3 минуты, перед тем как ваше приложение станет общедоступным по ссылке, которую мы получили на этапе входа в настройки в приложение.

В моем случае такая ссылка: https://curl-fetch2py-yakvenalex.amvera.io/

Перейдем по ссылке и проверим работает ли приложение:

А что там по документации к API:

Все работает, а это значит что наше приложение прошло все этапы разработки и полностью готово!

Заключение

На этом простом примере я постарался показать, что сегодня, с помощью современных инструментов, таких как WebSim, можно создавать полноценные (Full Stack) приложения самостоятельно, даже не будучи опытным фронтенд-разработчиком. Надеюсь, что эта информация оказалась для вас полезной и дала вам важное осознание: используя WebSim и FastAPI, вы можете без особых усилий визуализировать любой свой код.

Полный исходный код этого и других примеров из моих статей вы найдете в моем телеграм-канале «Легкий путь в Python». Кроме того, к каналу привязано активное сообщество, где мы обсуждаем проблемы и вместе решаем, какая статья выйдет следующей.

Если вам понравилась эта статья, не забудьте поставить лайк, оставить приятный комментарий или подписаться на меня. Это бесплатно, но для автора это не просто приятно — это огромная мотивация создавать для вас еще больше полезного и качественного контента.

На этом пока всё. Всего доброго и до новых встреч!