Explorando APIs REST y Vue.js: Creando Interfaces Reactivas e Interactivas

En este plan de clase, los estudiantes universitarios de Ingeniería de Sistemas explorarán el consumo de APIs REST y el desarrollo de componentes reactivos utilizando Vue.js. A través de un enfoque basado en problemas, los estudiantes aprenderán a integrar datos externos en sus aplicaciones web y a construir interfaces dinámicas que respondan eficientemente a los cambios del usuario o del servidor.

Este aprendizaje es fundamental para el desarrollo moderno de aplicaciones web, donde la interacción con servicios externos es constante y la experiencia del usuario depende en gran medida de la reactividad del front-end. Los estudiantes aplicarán conceptos clave de HTTP, JSON, arquitectura REST y programación reactiva en Vue.js, conectando teoría con práctica real y relevante para su futuro profesional.

El plan está diseñado para que los estudiantes enfrenten retos reales de consumo y manipulación de APIs, fomentando el pensamiento crítico y habilidades técnicas avanzadas, preparándolos para proyectos reales y el mercado laboral actual en desarrollo web.

• Analizar la arquitectura y funcionamiento de APIs REST para su consumo en aplicaciones web.
• Diseñar y desarrollar componentes reactivos en Vue.js que consuman y muestren datos de APIs externas.
• Implementar técnicas de manejo de estado y eventos en Vue.js para mejorar la interactividad del usuario.
• Evaluar soluciones técnicas mediante pruebas prácticas y depuración en el consumo de APIs y reactividad de componentes.
• Argumentar la importancia de la integración de servicios web y componentes reactivos en el desarrollo de aplicaciones modernas.

• Computadoras con entorno de desarrollo instalado (Node.js, npm, VS Code o similar) – 1 por estudiante o grupo
• Acceso a internet para consumo de APIs públicas
• Documentación oficial de Vue.js (https://vuejs.org/) y Postman para testar APIs
• Repositorio Git con plantilla base de proyecto Vue.js (proporcionado por el docente)
• Pizarra y marcadores para esquematización y discusión
• Proyector para demostraciones en vivo
• Material impreso con guías básicas de Vue.js y consumo de APIs REST
• Acceso a APIs públicas de ejemplo: JSONPlaceholder, PokéAPI, o similar

• Conocimientos básicos de programación en JavaScript y HTML/CSS.
• Familiaridad previa con conceptos HTTP (métodos, códigos de estado) y JSON.
• Introducción previa a frameworks JavaScript, preferentemente conceptos básicos de Vue.js o similar.
• Experiencia en uso de editores de código y terminal básica.
• Habilidades para trabajo colaborativo y exposición oral.

Sesión 1: Introducción y primeros pasos con APIs REST y Vue.js

Fase de Inicio

Tiempo estimado: 30 minutos

Propósito de la sesión: Conectar conocimientos previos y presentar la importancia del consumo de APIs REST y la reactividad en Vue.js, motivando a los estudiantes para abordar un problema real.

Activación de conocimientos previos:

• Docente: Presenta la pregunta detonadora: “¿Cómo crees que una aplicación web como una tienda en línea obtiene y muestra la información de productos en tiempo real?”
• Estudiantes: Responden en plenaria durante 5 minutos, compartiendo experiencias y expectativas.

Motivación y enganche:

• Docente: Muestra una demo rápida de una aplicación Vue.js consumiendo una API pública (por ejemplo, mostrando usuarios desde JSONPlaceholder) y destaca la fluidez y reactividad.
• Estudiantes: Observan y plantean preguntas iniciales.

Contextualización:

• Docente: Explica cómo el consumo de APIs REST y la reactividad con Vue.js están presentes en muchas aplicaciones cotidianas (redes sociales, comercio electrónico, dashboards) y la relevancia para su formación profesional.
• Estudiantes: Reflexionan y anotan ejemplos personales o conocidos.

Fase de Desarrollo

Tiempo estimado: 140 minutos

Presentación del contenido: Se presenta brevemente la arquitectura REST y estructura de una API, así como la base para crear componentes reactivos en Vue.js usando ejemplos claros y visuales. No es solo exposición magistral sino análisis guiado de documentación y ejemplos reales.

• Actividad 1: Exploración guiada de API REST
• Objetivo: Analizar la estructura y respuesta de una API REST pública.
• Instrucciones:
  • En parejas, los estudiantes usarán Postman o navegador para consultar endpoints de JSONPlaceholder.
  • Identificarán recursos, métodos HTTP y estructura JSON de respuesta.
  • Responderán: ¿Qué datos se reciben? ¿Cómo se estructuran? ¿Qué métodos se usan para obtenerlos?
• Organización: Parejas
• Producto: Breve reporte escrito con respuestas a las preguntas.
• Tiempo: 60 minutos
• Rol docente: Circular, hacer preguntas que profundicen la comprensión, clarificar conceptos.
• Actividad 2: Configuración inicial de proyecto Vue.js
• Objetivo: Diseñar y preparar el entorno para consumir APIs en Vue.js.
• Instrucciones:
  • Individualmente, los estudiantes clonan el repositorio base y configuran su entorno local.
  • Revisan la estructura básica y crean un componente simple que muestre datos estáticos.
• Organización: Individual
• Producto: Proyecto inicial con componente Vue básico funcionando.
• Tiempo: 80 minutos
• Rol docente: Asistir individualmente, resolver dudas técnicas, validar progreso.

Diferenciación:

• Para estudiantes adelantados: Proponer que investiguen y prueben otro API pública adicional por cuenta propia, documentando diferencias.
• Para estudiantes con dificultades: Dar apoyo personalizado, proporcionar ejemplos paso a paso y recursos visuales adicionales.

Transición: El docente conecta la exploración inicial con la próxima sesión, donde se profundizará en la integración dinámica y reactividad.

Fase de Cierre

Tiempo estimado: 10 minutos

• Síntesis: Cada pareja comparte en plenaria 3 datos clave aprendidos sobre APIs REST.
• Reflexión metacognitiva:
  • ¿Qué elementos de una API REST te parecieron más importantes?
  • ¿Cómo crees que Vue.js puede ayudarte a mostrar datos de manera reactiva?
• Retroalimentación: El docente comenta las respuestas, enfatiza conceptos clave y aclara dudas.
• Transferencia: Se anticipa que en la siguiente sesión se desarrollará la integración real de APIs con componentes dinámicos.
• Tarea: Revisar documentación de Vue.js sobre componentes y reactividad para la próxima sesión.

Sesión 2: Integración y consumo dinámico de APIs en Vue.js

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión: Revisar la tarea, conectar con lo aprendido y presentar el reto de integrar datos en componentes Vue reactivos.

• Activación: Mini debate: ¿Qué desafíos crees que hay al mostrar datos externos en tiempo real en una aplicación?
• Motivación: Mostrar demo en vivo que actualiza datos al hacer peticiones dinámicas.

Fase de Desarrollo

Tiempo estimado: 150 minutos

• Actividad 1: Consumo de API REST con Axios en Vue.js
• Objetivo: Implementar el consumo dinámico de datos desde una API usando Axios dentro de un componente Vue.
• Instrucciones:
  • El docente explica brevemente Axios y su integración.
  • En grupos de 3-4, los estudiantes codifican un componente que hace peticiones GET y muestra datos recibidos (ej: lista de usuarios).
  • Prueban el componente y verifican que los datos se actualicen al recargar.
• Organización: Grupos de 3-4
• Producto: Componente funcional que consume y muestra datos de API.
• Tiempo: 90 minutos
• Rol docente: Supervisar, sugerir mejoras y guiar solución de errores comunes.
• Actividad 2: Manejo de estado y eventos en Vue.js
• Objetivo: Implementar interacción del usuario para filtrar o actualizar la visualización de datos.
• Instrucciones:
  • Los grupos añaden controles (input, botones) para modificar los datos mostrados (ej: filtro por nombre).
  • Implementan métodos y propiedades computadas para actualizar la vista de forma reactiva.
• Organización: Grupos de 3-4
• Producto: Componente interactivo y reactivo con filtros funcionales.
• Tiempo: 60 minutos
• Rol docente: Facilitar comprensión, promover buenas prácticas y probar funcionalidades.

Diferenciación:

• Estudiantes adelantados: Explorar manejo de errores en peticiones y mostrar mensajes al usuario.
• Estudiantes con dificultades: Apoyo con ejemplos guiados y revisión individualizada.

Transición: El docente conecta la creación de componentes reactivos con la importancia del trabajo colaborativo y calidad de código para la siguiente sesión.

Fase de Cierre

Tiempo estimado: 15 minutos

• Síntesis: Mapas mentales en grupos sobre consumo de APIs y reactividad en Vue.js.
• Reflexión:
  • ¿Qué dificultades enfrentaste al integrar datos en tu componente?
  • ¿Cómo mejora la experiencia del usuario la reactividad en los componentes?
• Retroalimentación: Comentarios en plenaria, resaltando aprendizajes y áreas de mejora.
• Transferencia: Se explica el reto de integrar múltiples componentes y manejar estados globales en la próxima sesión.
• Tarea: Investigar Vuex o composición API para manejo avanzado de estado.

Sesión 3: Profundizando en componentes reactivos y estado global

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito: Repasar contenidos previos y preparar a los estudiantes para manejar estado global y componentes anidados.

• Activación: Preguntas rápidas en plenaria: “¿Qué es la reactividad? ¿Cómo se puede compartir estado entre componentes?”
• Motivación: Breve demo que muestra actualización simultánea en componentes hermanos con estado compartido.

Fase de Desarrollo

Tiempo estimado: 150 minutos

• Actividad 1: Creación de componentes anidados y comunicación entre ellos
• Objetivo: Diseñar componentes Vue que se comuniquen mediante props y eventos personalizados.
• Instrucciones:
  • En grupos, crear estructura de componentes padre e hijo.
  • Transmitir datos padre-hijo con props y del hijo al padre con eventos.
  • Ejemplo: un componente padre que recibe filtro, y componente hijo que muestra lista filtrada.
• Organización: Grupos de 3-4
• Producto: Componente anidado funcional con interacción bidireccional.
• Tiempo: 90 minutos
• Rol docente: Apoyo técnico, sugerencias para estructurar componentes y probar comunicación.
• Actividad 2: Introducción al manejo de estado global con Vuex o composición API
• Objetivo: Implementar un estado global básico que sincronice datos entre componentes.
• Instrucciones:
  • El docente explica concepto y uso básico de Vuex o composición API para estado global.
  • Los estudiantes integran un pequeño store para compartir datos (ej: estado de usuario o carrito simple).
  • Prueban que cambios en un componente se reflejen en otro automáticamente.
• Organización: Grupos de 3-4
• Producto: Proyecto con estado global sincronizado entre componentes.
• Tiempo: 60 minutos
• Rol docente: Guía en configuración, resolución de problemas y revisión del código.

Diferenciación:

• Avanzados: Experimentar con módulos en Vuex o composición avanzada.
• Con dificultades: Materiales de apoyo y sesiones breves de refuerzo individual.

Transición: El docente relaciona estas habilidades con la creación de aplicaciones profesionales en la siguiente sesión.

Fase de Cierre

Tiempo estimado: 15 minutos

• Síntesis: Resumen grupal con esquema en pizarra sobre comunicación entre componentes y manejo de estado.
• Reflexión:
  • ¿Cómo facilita el manejo de estado global el desarrollo de aplicaciones complejas?
  • ¿Qué retos encontraste al implementar comunicación entre componentes?
• Retroalimentación: Revisión colectiva y recomendaciones para mejorar estructuras.
• Transferencia: Preparación para integrar todo en una aplicación completa en la próxima sesión.
• Tarea: Preparar propuesta de aplicación que integre consumo de APIs y componentes reactivos.

Sesión 4: Integración final y evaluación práctica

Fase de Inicio

Tiempo estimado: 10 minutos

Propósito: Presentar el reto final: construir una mini aplicación Vue.js que consuma API y use componentes reactivos con estado global.

• Activación: Breve revisión en plenaria de la propuesta de aplicación de cada grupo.
• Motivación: Mostrar ejemplo de aplicación finalizada para inspirar.

Fase de Desarrollo

Tiempo estimado: 155 minutos

• Actividad 1: Desarrollo guiado de aplicación completa
• Objetivo: Integrar consumo de API, componentes reactivos y manejo de estado global en un proyecto funcional.
• Instrucciones:
  • En grupos, desarrollan su aplicación siguiendo la propuesta.
  • Implementan consumo dinámico de API, componentes anidados, filtros interactivos y estado global para sincronización.
  • Prueban, corrigen errores y preparan demostración.
• Organización: Grupos de 3-4
• Producto: Aplicación funcional y código fuente documentado.
• Tiempo: 155 minutos
• Rol docente: Supervisar, apoyar, evaluar avances y fomentar colaboración y calidad técnica.

Fase de Cierre

Tiempo estimado: 15 minutos

• Síntesis: Presentación rápida de cada grupo con demostración y explicación técnica.
• Reflexión:
  • ¿Qué aprendiste sobre el consumo de APIs y reactividad en Vue.js?
  • ¿Cómo resolvieron los retos técnicos y de diseño en equipo?
  • ¿Qué mejorarías en tu aplicación para futuros proyectos?
• Retroalimentación: Comentarios del docente y compañeros, destacando fortalezas y áreas de mejora.
• Transferencia: Se invita a aplicar estas competencias en proyectos reales y exploraciones avanzadas.
• Tarea final (opcional): Documentar el proyecto y subirlo a repositorio público con README explicativo.

Tipo de evaluación:

• Diagnóstica: Al inicio de la sesión 1 mediante preguntas detonadoras para conocer conocimientos previos.
• Formativa: Durante todas las sesiones evaluando la participación en actividades prácticas, discusiones y progreso técnico.
• Sumativa: En la sesión 4, evaluación del proyecto final integrador y presentación.

Criterios de evaluación:

• Comprensión de la estructura y consumo de APIs REST (objetivo 1).
• Capacidad para diseñar y desarrollar componentes reactivos en Vue.js (objetivo 2).
• Habilidad para implementar y manejar estado y eventos para interactividad (objetivo 3).
• Calidad técnica y funcionalidad del proyecto final (objetivo 4).
• Argumentación clara sobre la importancia de los conceptos aprendidos (objetivo 5).

Instrumentos sugeridos:

• Rúbrica para evaluación del proyecto final (código, funcionalidad, presentación, trabajo en equipo).
• Lista de cotejo para seguimiento de actividades prácticas.
• Observación directa y cuestionarios de reflexión.
• Autoevaluación y coevaluación durante presentaciones.

Evidencias de aprendizaje:

• Reporte de exploración de API REST (sesión 1).
• Componentes Vue funcionales con consumo de API y filtros (sesión 2 y 3).
• Proyecto final integrador con presentación demostrativa (sesión 4).
• Participación activa en discusiones y reflexiones escritas.