'/%3e%3cpath%20id='cross_2'%20data-name='cross%202'%20class='cls-2'%20d='M20.612,30.43h0a5.361,5.361,0,1,0-10.723,0H0A33.709,33.709,0,0,1,30.569,0V9.75a5.361,5.361,0,1,1,0,10.723V30.43Z'%20transform='translate(67.193%200.007)%20rotate(90)'/%3e%3cpath%20id='cross_3'%20data-name='cross%203'%20class='cls-3'%20d='M20.612,30.43h0a5.361,5.361,0,1,0-10.723,0H0A33.709,33.709,0,0,1,30.569,0V9.75a5.361,5.361,0,1,1,0,10.723V30.43Z'%20transform='translate(67.186%2067.041)%20rotate(180)'/%3e%3cpath%20id='cross_4'%20data-name='cross%204'%20class='cls-4'%20d='M20.6,30.5h0a5.361,5.361,0,1,0-10.723,0H0A33.71,33.71,0,0,1,30.56,0V9.818a5.361,5.361,0,1,1,0,10.723V30.5Z'%20transform='translate(0%2067.041)%20rotate(-90)'/%3e%3c/svg%3e)
Consultar el ejemplo de frontend
Al crear la API, se generan automáticamente una carpeta y archivos de frontend de ejemplo en el espacio de trabajo. Puede usar el resultado tal como está o adaptarlo a su equipo con ayuda de la AI.
Carpeta del frontend de ejemplo
index.html: pantalla inicial
Es una pantalla CRUD básica que permite consultar listas y detalles, crear, modificar y eliminar en un solo lugar. Incluye style.css y se proporciona lista para usar.
Si el espacio de trabajo bloquea los scripts, seleccione
Always allow for this filepara activarlos.
test.html: pantalla de prueba de la API
Al igual que Swagger, Postman o Insomnia, esta pantalla permite invocar directamente las API generadas y comprobar sus respuestas.
style.css / README.md
| Archivo | Uso |
|---|---|
style.css | Estilos comunes de las pantallas de ejemplo. |
README.md | Documento que explica cómo usar la API. Incluye los endpoints predeterminados, la estructura de columnas de la lista y el formulario, y los campos de solicitud y respuesta y el esquema de registros de cada API. |
Modifique
index.htmlystyle.csspara convertir la pantalla predeterminada generada automáticamente en un sitio web adaptado a su equipo.
Mejorar index.html con AI
README.md contiene una descripción detallada de la estructura de las tablas y de la API. Entréguelo directamente a una AI, como Claude o ChatGPT, para solicitar cambios en la lógica o el diseño de index.html sin dar más explicaciones.
- Copie el contenido de
README.mdy entréguelo a la AI. - Describa la estructura o el diseño que desea; por ejemplo: «Muestra la lista como tarjetas y usa colores distintos según el estado».
- Sobrescriba el archivo
index.htmlde la misma carpeta con la versión modificada por la AI. - Use
test.htmlpara volver a comprobar el funcionamiento de la API.
Usar la interfaz terminada
Después de adaptar index.html a su equipo, puede usarlo de dos maneras.
| Método | Descripción |
|---|---|
| Uso interno del equipo | Ábralo mediante la vista web de carpetas y utilícelo con su equipo como interfaz interna de gestión de datos. → Crear un servicio web interno |
| Uso público externo | Despliéguelo mediante Webspace y úselo como interfaz de un servicio público. → Crear un servicio web externo |