Loading repository data…
Loading repository data…
inma2709 / repository
Aplicación web CRUD básica para principiantes, desarrollada con Node.js y Express en el backend y HTML, CSS y JavaScript vanilla en el frontend, utilizando un array en memoria para simular la gestión de datos.
Esta actividad consiste en el desarrollo y actualización de una aplicación web completa que permite comprender el funcionamiento básico de una arquitectura frontend + backend mediante la implementación de operaciones CRUD (Crear, Leer, Actualizar y Eliminar).
El ejercicio está especialmente diseñado para estudiantes que se inician en el desarrollo web, por lo que se trabaja con tecnologías fundamentales, evitando dependencias complejas y priorizando la comprensión de los conceptos clave del flujo cliente-servidor.
🧩 Tecnologías utilizadas Backend
Se desarrolla un servidor con Node.js y Express, utilizando la sintaxis clásica basada en require. Esto permite al alumnado familiarizarse con el entorno backend, la definición de rutas y la gestión de peticiones HTTP de forma progresiva y accesible.
Frontend
La interfaz se construye con HTML, CSS y JavaScript vanilla, sin uso de frameworks. De este modo, se refuerzan los fundamentos del desarrollo web, la estructura de documentos HTML, el estilo con CSS y la manipulación del DOM mediante JavaScript.
Gestión de datos
Los datos se gestionan mediante un array en memoria, que simula el comportamiento de una base de datos. Esta decisión pedagógica permite centrarse en la lógica de las operaciones CRUD y en la comunicación entre frontend y backend, sin necesidad de configurar sistemas de persistencia reales.
🎯 Objetivos de aprendizaje
Comprender la estructura básica de una aplicación web cliente-servidor.
Implementar operaciones CRUD completas.
Conectar el frontend con el backend mediante peticiones HTTP.
Organizar correctamente un proyecto para su control de versiones.
Aprender a subir y actualizar un proyecto en un repositorio Git, documentando los cambios realizados.
🧠 Competencias que se trabajan
Pensamiento lógico y resolución de problemas.
Uso básico de Node.js y Express.
Manipulación del DOM con JavaScript.
Buenas prácticas iniciales en control de versiones con Git.
ejercicio-estudiantes/
├── package.json # Dependencias y scripts
├── servidor.js # Servidor backend con Express
├── README.md # Este archivo
└── public/ # Archivos del frontend
├── index.html # Estructura HTML
├── styles.css # Estilos CSS
└── app.js # Lógica JavaScript
npm install
npm start
o para desarrollo con auto-reinicio:
npm run dev
http://localhost:3000
El servidor incluye 4 estudiantes de ejemplo:
[
{
id: 1,
nombre: "Ana García",
edad: 20,
carrera: "Ingeniería en Sistemas",
promedio: 8.5
},
{
id: 2,
nombre: "Carlos López",
edad: 22,
carrera: "Diseño Gráfico",
promedio: 9.0
},
// ... más estudiantes
]
| Método | Endpoint | Descripción |
|---|---|---|
| GET | /api/estudiantes | Obtener todos los estudiantes |
| GET | /api/estudiantes/:id | Obtener estudiante por ID |
| POST | /api/estudiantes | Crear nuevo estudiante |
| PUT | /api/estudiantes/:id | Actualizar estudiante |
| DELETE | /api/estudiantes/:id | Eliminar estudiante |
servidor.jsEste ejercicio está diseñado para ser educativo. Los estudiantes pueden:
💻 ¡Feliz programación! 🎉