Ahora que tenemos la aplicación con los modelos, podemos generar el código del cliente para el frontend.

#### Instalar `openapi-ts`

Puedes instalar `openapi-ts` en tu código de frontend con:

<div class="termy">

```console
$ npm install @hey-api/openapi-ts --save-dev

---> 100%
```

</div>

#### Generar el Código del Cliente

### Cachear el esquema de OpenAPI

Puedes usar la propiedad `.openapi_schema` como un "cache", para almacenar tu esquema generado.

De esa forma, tu aplicación no tendrá que generar el esquema cada vez que un usuario abra la documentación de tu API.

Se generará solo una vez, y luego se usará el mismo esquema cacheado para las siguientes requests.

{* ../../docs_src/extending_openapi/tutorial001.py hl[13:14,25:26] *}

Y genera esquemas OpenAPI.

Así es como funciona en Flask, Starlette, Responder, etc.

Pero luego, tenemos otra vez el problema de tener una micro-sintaxis, dentro de un string de Python (un gran YAML).

El editor no puede ayudar mucho con eso. Y si modificamos parámetros o esquemas de Marshmallow y olvidamos también modificar ese docstring YAML, el esquema generado estaría obsoleto.

Si quieres jugar con tokens JWT y ver cómo funcionan, revisa <a href="https://jwt.io/" class="external-link" target="_blank">https://jwt.io</a>.

## Instalar `PyJWT`

Necesitamos instalar `PyJWT` para generar y verificar los tokens JWT en Python.

Asegúrate de crear un [entorno virtual](../../virtual-environments.md){.internal-link target=_blank}, activarlo y luego instalar `pyjwt`:

<div class="termy">

```console

Los ejemplos aquí usan `.dict()` para compatibilidad con Pydantic v1, pero deberías usar `.model_dump()` si puedes usar Pydantic v2.

///

Eso generaría un `dict` solo con los datos que se establecieron al crear el modelo `item`, excluyendo los valores por defecto.

Luego puedes usar esto para generar un `dict` solo con los datos que se establecieron (enviados en el request), omitiendo los valores por defecto:

///

Tiene toda la información sobre la *path operation* y se usa para generar la documentación automática.

Incluye los `tags`, `parameters`, `requestBody`, `responses`, etc.

Este esquema de OpenAPI específico de *path operation* normalmente se genera automáticamente por **FastAPI**, pero también puedes extenderlo.

/// tip | Consejo

Este es un punto de extensión de bajo nivel.

Puedes añadir código que se ejecute con la `request`, antes de que cualquier *path operation* la reciba.

Y también después de que se genere la `response`, antes de devolverla.

Por ejemplo, podrías añadir un custom header `X-Process-Time` que contenga el tiempo en segundos que tomó procesar la request y generar una response:

{* ../../docs_src/middleware/tutorial001.py hl[10,12:13] *}

/// tip | Consejo

* Generar definiciones de <a href="https://json-schema.org" class="external-link" target="_blank">JSON Schema</a> para tu modelo, que también puedes usar en cualquier otro lugar si tiene sentido para tu proyecto.
* Esquemas que serán parte del esquema de OpenAPI generado y usados por la <abbr title="User Interfaces">UIs</abbr> de documentación automática.

En este ejemplo, las *path operations* bajo el `router` usarán la clase personalizada `TimedRoute`, y tendrán un header `X-Response-Time` extra en el response con el tiempo que tomó generar el response:

*[Fess Site Search](https://github.com/codelibs/fess-site-search)* es una alternativa gratuita a [Google Site Search](https://enterprise.google.com/search/products/gss.html). Para más detalles, consulta la [documentación de FSS JS Generator](https://fss-generator.codelibs.org/docs/manual).

## Sitio web

[fess.codelibs.org](https://fess.codelibs.org/)

## Problemas/Preguntas

[discuss.codelibs.org](https://discuss.codelibs.org/c/FessEN/)