PrestAula — Guión didáctico

Identificación

Punto de partida

En la unidad formativa anterior, el alumnado ha desarrollado una aplicación web básica capaz de mostrar información y recoger datos mediante formularios.

Sin embargo, esa información todavía no se conserva cuando la aplicación se reinicia. Los recursos, las personas usuarias y los préstamos aparecen solo como datos de ejemplo escritos directamente en el código.

La pregunta que guía esta propuesta es sencilla:

El caso práctico: PrestAula

PrestAula es una aplicación web para gestionar el préstamo de recursos de un centro de formación.

El sistema permitirá registrar y consultar recursos como portátiles, proyectores, cámaras, libros, tabletas, adaptadores o auriculares; identificar a las personas usuarias; y controlar los préstamos, devoluciones y la disponibilidad de cada recurso.

Durante la unidad, el alumnado diseñará una base de datos SQLite y la conectará con una aplicación web desarrollada con Bun y TypeScript.

Antes y después

PrestAula parte de una aplicación web sencilla desarrollada previamente. A lo largo de esta propuesta, el alumnado aprenderá a transformar esa web inicial en una aplicación capaz de conservar información, consultarla cuando sea necesaria y evitar errores habituales durante la gestión de recursos y préstamos.

El objetivo no es memorizar comandos aislados, sino comprender cómo una necesidad real —prestar un proyector, registrar una devolución o localizar un recurso— se traduce en datos, tablas, consultas y acciones dentro de una aplicación web.

01 · Comprender y diseñar

1. Identificar la información que necesita almacenar una aplicación de gestión de préstamos de recursos en un centro de formación.
2. Diseñar un modelo de datos básico para PrestAula, diferenciando categorías, recursos, personas usuarias y préstamos, así como las relaciones entre ellos.

02 · Crear y conectar

1. Crear una base de datos SQLite con tablas relacionadas, aplicando claves principales, claves foráneas y restricciones básicas de integridad.
2. Realizar consultas SQL sencillas para registrar, consultar, modificar y eliminar información relacionada con recursos, personas usuarias y préstamos.
3. Conectar una aplicación web desarrollada con Bun y TypeScript a una base de datos SQLite para mostrar y gestionar información persistente.

03 · Aplicar y comprobar

1. Implementar operaciones CRUD en PrestAula, incorporando formularios, validaciones y mensajes de error comprensibles.
2. Aplicar reglas básicas de funcionamiento, como impedir préstamos duplicados, controlar las devoluciones y conservar el historial de los recursos del centro.

Una web puede mostrar datos, recibir información mediante formularios y responder a las acciones de una persona usuaria. Sin embargo, si esos datos solo existen mientras la aplicación está abierta, desaparecen cuando se reinicia.

PrestAula necesita conservar la información de los recursos del centro, las personas que los solicitan y los préstamos realizados. Para conseguirlo, la aplicación utilizará una base de datos SQLite.

Datos temporales y datos persistentes

Vocabulario básico

Dato

Información concreta, como el nombre de un recurso o una fecha.

Base de datos

Sistema organizado para guardar información.

Persistencia

Capacidad de conservar los datos aunque la aplicación se cierre.

Formulario

Pantalla que permite introducir o modificar información.

Para gestionar préstamos de forma organizada, PrestAula no guarda toda la información en una única lista. Cada tipo de dato tiene su propio espacio y se relaciona con los demás cuando es necesario.

01 · Categorías

Sirven para agrupar los recursos del centro y facilitar su localización.

• Tecnología
• Material audiovisual
• Biblioteca
• Material de aula

Las categorías se crean como datos iniciales y se seleccionan al registrar cada recurso.

02 · Recursos

Son los objetos concretos que el centro puede prestar.

Cada recurso tiene un código de inventario único, una categoría, una ubicación habitual y un estado interno.

03 · Personas usuarias

Son las personas que pueden solicitar recursos del centro.

Una persona inactiva conserva su historial, pero no puede solicitar nuevos préstamos.

04 · Préstamos

Un préstamo conecta a una persona concreta con un recurso concreto durante un periodo de tiempo.

Antes de crear tablas o escribir código, es necesario decidir cómo se organizará la información. Este diseño previo se denomina modelo de datos.

El modelo permite responder a preguntas como:

• ¿Qué información debe guardar la aplicación?
• ¿Qué datos pertenecen a cada recurso?
• ¿Cómo se relaciona un préstamo con una persona y un material?
• ¿Qué información no debe repetirse?

En PrestAula, la información se organiza en cuatro tablas relacionadas: categorías, recursos, personas usuarias y préstamos.

Diagrama entidad-relación

Lectura del modelo

• Una categoría puede incluir varios recursos. Por ejemplo, Material audiovisual incluye proyectores, cámaras y auriculares.
• Un recurso puede aparecer en muchos préstamos a lo largo del tiempo.
• Una persona usuaria puede tener varios préstamos registrados.
• Cada préstamo une a una persona concreta con un recurso concreto.

Dos conceptos importantes

Hasta ahora hemos decidido qué información necesita guardar PrestAula y cómo se relacionan los datos. El siguiente paso es crear un lugar donde esa información pueda conservarse.

Para este proyecto utilizaremos SQLite

SQLite es una base de datos ligera que se guarda en un único archivo. No necesita instalar ni administrar un servidor independiente, por lo que resulta adecuada para aprender cómo funciona el acceso a datos y para desarrollar una primera versión funcional de PrestAula.

De una tabla visual a una tabla real

La tabla recursos representa cada objeto concreto que puede prestarse en el centro.

En código SQL

CREATE TABLE recursos (
    id INTEGER PRIMARY KEY,
    codigo_inventario TEXT NOT NULL UNIQUE,
    nombre TEXT NOT NULL,
    categoria_id INTEGER NOT NULL,
    ubicacion TEXT NOT NULL,
    estado TEXT NOT NULL
      CHECK (estado IN ('activo', 'mantenimiento', 'baja')),
    fecha_alta TEXT NOT NULL,

    FOREIGN KEY (categoria_id) REFERENCES categorias(id)
);

¿Qué está haciendo este código?

• CREATE TABLE recursos crea una tabla llamada recursos.
• INTEGER PRIMARY KEY genera un identificador único para cada recurso.
• NOT NULL indica que ese dato es obligatorio.
• UNIQUE evita que dos recursos compartan el mismo código de inventario.
• FOREIGN KEY conecta cada recurso con su categoría.
• CHECK limita el estado a las opciones permitidas.

Una vez creada la base de datos, PrestAula necesita poder consultar y modificar la información que guarda. Para ello se utiliza SQL, un lenguaje que permite indicar a SQLite qué datos queremos obtener o qué cambios queremos realizar.

Las operaciones principales forman el acrónimo CRUD:

En código SQL

-- Consultar los recursos disponibles
SELECT
    r.codigo_inventario,
    r.nombre,
    c.nombre AS categoria,
    r.ubicacion
FROM recursos r
JOIN categorias c ON c.id = r.categoria_id
LEFT JOIN prestamos p
    ON p.recurso_id = r.id AND p.estado = 'activo'
WHERE r.estado = 'activo' AND p.id IS NULL
ORDER BY r.nombre;

-- Registrar un recurso nuevo
INSERT INTO recursos (
    codigo_inventario, nombre, categoria_id,
    ubicacion, estado, fecha_alta
)
VALUES ('AV-PR-001', 'Proyector Epson EB-X06', 2,
    'Almacén audiovisual', 'activo', '2027-03-12');

Resultado de la consulta

SQLite ya puede guardar información, pero todavía necesitamos que PrestAula sea capaz de utilizarla dentro de la aplicación web. En este proyecto, cada tecnología tiene una función clara:

El recorrido de una consulta

Cuando una persona abre la página de recursos, PrestAula traduce la ruta en una llamada al módulo de TypeScript, que ejecuta una consulta SQL contra SQLite y devuelve las filas a la plantilla HTML que las pinta en pantalla.

En código TypeScript

import { Database } from "bun:sqlite"

const db = new Database("prestaula.sqlite")

export function obtenerRecursosDisponibles() {
   return db.query(`
          SELECT r.codigo_inventario, r.nombre, r.ubicacion
          FROM recursos r
          LEFT JOIN prestamos p
            ON p.recurso_id = r.id AND p.estado = 'activo'
          WHERE r.estado = 'activo' AND p.id IS NULL
          ORDER BY r.nombre
        `).all()
}

¿Qué hace este código?

1. Abre el archivo de base de datos de PrestAula.
2. Ejecuta una consulta SQL para localizar recursos disponibles.
3. Devuelve los resultados a la ruta de la aplicación.
4. La página HTML utiliza esos datos para crear el listado que verá la persona usuaria.

El primer CRUD completo de PrestAula se aplica a los recursos. El alumnado empieza por una información fácil de identificar —un portátil, un proyector o un libro— antes de trabajar con préstamos, que requieren relacionar varios datos.

Pantalla principal de recursos

La pantalla principal lista los recursos del centro y permite acceder al detalle de cada uno para crear, editar o dar de baja. La maquetación concreta se aborda en las sesiones prácticas.

En código TypeScript

type NuevoRecurso = {
    codigoInventario: string
    nombre: string
    categoriaId: number
    ubicacion: string
    estado: "activo" | "mantenimiento" | "baja"
    fechaAlta: string
}

export function crearRecurso(recurso: NuevoRecurso) {
    const existe = db
        .query("SELECT 1 FROM recursos WHERE codigo_inventario = ?")
        .get(recurso.codigoInventario)

    if (existe) {
        throw new Error("Ya existe un recurso con este código.")
    }

    db.query(`
        INSERT INTO recursos (
          codigo_inventario, nombre, categoria_id,
          ubicacion, estado, fecha_alta
        ) VALUES (?, ?, ?, ?, ?, ?)
    `).run(
        recurso.codigoInventario, recurso.nombre,
        recurso.categoriaId, recurso.ubicacion,
        recurso.estado, recurso.fechaAlta
    )
}

Después de trabajar con los recursos del centro, PrestAula aplica el mismo patrón a las personas usuarias. Esta parte permite consolidar las operaciones CRUD antes de introducir los préstamos, que requieren relacionar información de varias tablas.

Cada persona usuaria dispone de una ficha con sus datos de contacto, su tipo de relación con el centro y su estado de actividad.

Pantalla de personas usuarias

La pantalla de personas usuarias muestra la lista completa con sus datos clave y permite abrir cada ficha para consultar el historial de préstamos asociado.

En código TypeScript

type NuevaPersona = {
    nombre: string
    apellidos: string
    email: string
    telefono?: string
    tipo: "alumnado" | "profesorado" | "personal"
}

export function crearPersona(persona: NuevaPersona) {
    const existe = db
        .query("SELECT 1 FROM personas_usuarias WHERE email = ?")
        .get(persona.email)

    if (existe) {
        throw new Error("Este correo ya está registrado.")
    }

    db.query(`
        INSERT INTO personas_usuarias (
          nombre, apellidos, email, telefono, tipo, activa
        ) VALUES (?, ?, ?, ?, ?, 1)
    `).run(
        persona.nombre, persona.apellidos, persona.email,
        persona.telefono ?? null, persona.tipo
    )
}

Un préstamo es el registro que relaciona a una persona usuaria con un recurso concreto durante un periodo de tiempo.

PrestAula no crea recursos ni personas nuevas al registrar un préstamo. Utiliza datos que ya existen en la base de datos y comprueba que ambos cumplen las condiciones necesarias.

Información necesaria

Formulario de préstamo

El formulario pide seleccionar una persona y un recurso existentes, completar las fechas y, opcionalmente, añadir observaciones. Antes de guardar, PrestAula valida los datos.

En código TypeScript

export function crearPrestamo(datos: {
   recursoId: number
   personaId: number
   fechaPrestamo: string
   fechaPrevista: string
   observaciones?: string
}) {
   if (datos.fechaPrevista < datos.fechaPrestamo) {
       throw new Error(
           "La fecha prevista no puede ser anterior."
       )
   }

   const recursoDisponible = db.query(`
       SELECT r.id FROM recursos r
       LEFT JOIN prestamos p
           ON p.recurso_id = r.id AND p.estado = 'activo'
       WHERE r.id = ? AND r.estado = 'activo' AND p.id IS NULL
   `).get(datos.recursoId)

   if (!recursoDisponible) {
       throw new Error("El recurso no está disponible.")
   }

   db.query(`
       INSERT INTO prestamos (
         recurso_id, persona_id, fecha_prestamo,
         fecha_prevista_devolucion, estado, observaciones
       ) VALUES (?, ?, ?, ?, 'activo', ?)
   `).run(
       datos.recursoId, datos.personaId, datos.fechaPrestamo,
       datos.fechaPrevista, datos.observaciones ?? null
   )
}

Validaciones que aplica PrestAula

1. La fecha prevista no puede ser anterior a la fecha de préstamo.
2. El recurso debe existir y estar marcado como activo.
3. El recurso no debe tener un préstamo activo pendiente.
4. La persona debe existir y estar activa.
5. Las observaciones, si se incluyen, no superan los 500 caracteres.

Cuando un recurso regresa al centro, PrestAula no elimina el préstamo. Registra la fecha real de devolución y cambia su estado a devuelto.

De esta forma, el historial se conserva y el recurso vuelve a poder aparecer como disponible para otra persona.

Cómo se calcula la disponibilidad

La disponibilidad no se escribe manualmente dentro de la ficha del recurso. PrestAula la calcula consultando los préstamos activos asociados.

Registrar una devolución

export function registrarDevolucion(
    prestamoId: number,
    fechaDevolucion: string
) {
    const resultado = db.query(`
        UPDATE prestamos
        SET estado = 'devuelto', fecha_devolucion_real = ?
        WHERE id = ? AND estado = 'activo'
    `).run(fechaDevolucion, prestamoId)

    if (resultado.changes === 0) {
        throw new Error("No se ha podido registrar la devolución.")
    }
}

Después de esta acción:

1. El préstamo queda registrado como devuelto.
2. Se conserva la fecha real de devolución.
3. El recurso vuelve a aparecer como disponible.
4. El historial permite saber quién lo utilizó y cuándo.

Reglas que protege PrestAula

Las actividades se organizan de forma progresiva. Cada una parte de una necesidad concreta del centro de formación y añade una mejora visible a la aplicación.

El alumnado no trabaja con ejercicios aislados: avanza paso a paso hasta convertir una web inicial en una aplicación capaz de guardar y gestionar información.

Actividades de aprendizaje

1. Actividad 1 · Identificar la información necesaria

   Reconocer qué datos debe guardar PrestAula.

   Caso: una docente solicita un proyector para una sesión formativa y debe devolverlo dos días después. Resultado esperado: listado razonado de datos necesarios: recurso, código de inventario, persona, fechas, ubicación y estado.

2. Actividad 2 · Diseñar el modelo de datos

   Organizar la información antes de crear la base de datos.

   En parejas, el alumnado completa el diagrama entidad-relación de PrestAula, indicando las tablas, los campos principales y las relaciones entre categorías, recursos, personas usuarias y préstamos. Resultado esperado: diagrama revisado y preparado para traducirse a tablas SQLite.

3. Actividad 3 · Crear la base de datos y datos iniciales

   Crear las tablas necesarias e introducir ejemplos de prueba.

   El alumnado crea la base de datos SQLite, añade las categorías iniciales y registra varios recursos y personas usuarias. Resultado esperado: archivo SQLite funcional con datos de demostración.

4. Actividad 4 · Conectar una pantalla con SQLite

   Sustituir los datos de ejemplo de la web por datos reales.

   A partir de una plantilla inicial, el alumnado conecta la página de recursos con SQLite y muestra los recursos disponibles en una tabla HTML. Resultado esperado: listado de recursos generado desde la base de datos.

5. Actividad 5 · Resolver situaciones reales

   Aplicar reglas de funcionamiento y controlar errores.

   El alumnado recibe casos como: intentar prestar un recurso ya prestado; registrar una devolución con fecha incorrecta; solicitar material con una persona inactiva; dar de baja un recurso con préstamos anteriores. Resultado esperado: aplicación de validaciones y mensajes claros para cada situación.

6. Actividad 6 · Consolidación final: ¿qué haría PrestAula?

   Fijar lo aprendido.

   A partir de seis situaciones breves, el alumnado identifica qué dato interviene, qué operación CRUD corresponde, qué validación debe aplicarse y cuál debe ser la respuesta de la aplicación. Resultado esperado: ficha de comprobación individual corregida en pareja y puesta en común de los errores más frecuentes.

Metodología didáctica

La propuesta se desarrolla mediante una metodología activa basada en proyecto. PrestAula funciona como hilo conductor durante toda la unidad: el alumnado analiza una necesidad real, diseña una solución y la convierte en una aplicación web funcional.

Principios metodológicos

• Aprendizaje basado en proyecto — el trabajo se organiza alrededor de PrestAula, una aplicación con una finalidad reconocible: controlar préstamos de recursos en un centro de formación.
• De lo simple a lo complejo — primero se trabaja con recursos, después con personas usuarias y finalmente con préstamos, devoluciones y reglas de disponibilidad.
• Explicación + demostración + práctica — cada bloque combina la exposición del docente, una demostración aplicada y ejercicios prácticos del alumnado.

Trabajo individual y colaborativo

• Análisis y diseño del modelo de datos en parejas.
• Desarrollo de ejercicios individuales.
• Puestas en común para revisar decisiones y errores frecuentes.
• Resolución colaborativa de casos prácticos.

Atención a diferentes ritmos

• Plantillas iniciales para quien necesite apoyo.
• Ejemplos de consultas y estructuras parcialmente completadas.
• Retos de ampliación para quien avance más rápido.

La evaluación será continua, práctica y centrada en evidencias de aprendizaje. No se valorará únicamente que la aplicación funcione: también se tendrá en cuenta la capacidad para analizar el problema, diseñar el modelo de datos, aplicar reglas de funcionamiento y explicar las decisiones tomadas.

E1 · Modelo de datos y creación de la base de datos

A partir de un supuesto práctico, el alumnado identifica entidades, atributos, relaciones, claves e índices básicos; crea las tablas necesarias mediante SQL y documenta el modelo de datos.

Qué se comprueba

• Identificación correcta de recursos, personas usuarias y préstamos.
• Diseño de relaciones coherentes.
• Creación de tablas con campos adecuados.
• Uso básico de claves principales, foráneas y restricciones.
• Claridad en la documentación del modelo.

E2 · Acceso a datos desde PrestAula

El alumnado conecta la aplicación web con SQLite e implementa operaciones de consulta, alta, modificación y gestión de préstamos, aplicando validaciones y tratamiento de errores.

Qué se comprueba

• Conexión correcta entre Bun, TypeScript y SQLite.
• Consulta y representación de datos en la web.
• Uso de operaciones CRUD.
• Registro de préstamos y devoluciones.
• Validaciones comprensibles y coherentes.

Rúbrica simplificada

De una web inicial a una aplicación que gestiona información

PrestAula muestra cómo una aplicación web puede evolucionar desde una interfaz con datos de ejemplo hasta una herramienta capaz de guardar, consultar y actualizar información de forma organizada. A lo largo de la propuesta, el alumnado:

• identifica qué información necesita gestionar un centro de formación;
• diseña un modelo de datos con recursos, personas usuarias y préstamos;
• crea una base de datos SQLite con tablas relacionadas;
• conecta una aplicación web desarrollada con Bun y TypeScript;
• implementa operaciones CRUD;
• aplica validaciones para evitar errores y conservar el historial.

Demo funcional

Código QR cuadrado que codifica la URL https://prestaula.samuhlo.dev/ — la demo funcional de PrestAula, el sistema de préstamo de recursos desarrollado como caso práctico de la unidad.

Reto de ampliación

Glosario básico

Base de datos

Sistema organizado para guardar información y recuperarla cuando sea necesaria.

Campo

Cada dato que se guarda dentro de una tabla, por ejemplo nombre o fecha.

Clave foránea

Campo que conecta un registro de una tabla con otro registro de otra tabla.

Clave principal

Dato que identifica de forma única cada registro de una tabla.

CRUD

Siglas de crear, consultar, modificar y eliminar información.

Dato

Información concreta, como el nombre de un recurso o una fecha.

Formulario

Pantalla que permite introducir o modificar información.

Persistencia

Capacidad de conservar los datos aunque la aplicación se cierre o reinicie.

Registro

Conjunto de campos que describe una entidad concreta, como un recurso o un préstamo.

SQL

Lenguaje utilizado para crear, consultar y modificar datos en una base de datos.

Tabla

Estructura que organiza registros del mismo tipo en filas y campos.

Bibliografía y webgrafía

• Boletín Oficial del Estado. Real Decreto 1531/2011, de 31 de octubre, por el que se establecen certificados de profesionalidad de la familia profesional de Informática y Comunicaciones.
• Bun. Documentación oficial de Bun y del módulo `bun:sqlite`.
• SQLite. Documentación oficial del lenguaje SQL y creación de tablas.
• Materiales elaborados para la propuesta didáctica PrestAula: modelo de datos, diagramas, actividades, ejemplos SQL, fragmentos TypeScript y diseño visual.