Actividad 4 - Tema 4

Frontend web sencillo para una agenda de contactos conectada a una API creada con FastAPI y MySQL.

Funcionalidad

• Listar contactos desde la API.
• Crear nuevos contactos.
• Editar contactos existentes.
• Eliminar contactos.
• Configurar la URL base de la API desde la interfaz.

Estructura esperada de la API

El frontend usa estos endpoints REST:

• GET /contacts
• POST /contacts
• PUT /contacts/{id}
• DELETE /contacts/{id}

Cada contacto puede tener esta forma:

{
	"id": 1,
	"name": "Ana López",
	"email": "ana@example.com",
	"phone": "+52 55 1234 5678",
	"company": "Universidad",
	"notes": "Prefiere contacto por correo"
}

Uso

1. Abre index.html en el navegador o sirve la carpeta con un servidor estático.
2. Ajusta la URL de la API, por ejemplo http://localhost:8000.
3. Instala las dependencias con pip install -r requirements.txt.
4. Inicia el backend con uvicorn backend.main:app --reload.
5. Si vas a usar MySQL, configura DATABASE_URL o las variables MYSQL_USER, MYSQL_PASSWORD, MYSQL_HOST, MYSQL_PORT y MYSQL_DATABASE.

Archivos

• index.html: interfaz principal.
• styles.css: estilos responsivos.
• app.js: lógica de consumo de la API y CRUD.
• backend/: API FastAPI con CRUD para contactos.