📐 Diagrama de Arquitectura
🏗️ Elementos de la Arquitectura Mashup
Una aplicación Mashup está compuesta por siete elementos fundamentales que trabajan juntos para integrar múltiples servicios en una experiencia unificada y coherente:
📊 Fuentes de Datos
(Data Sources)
Es de donde proviene la información bruta. Incluye APIs (REST/JSON), feeds RSS, bases de datos externas y archivos XML.
• API REST de Twitter
• Feed RSS de noticias CNN
• Base de datos PostgreSQL externa
• Archivo XML con datos de productos
🎨 Componentes de Interfaz
(UI Components)
Elementos visuales listos para usar, como widgets, reproductores de video embebidos o botones de redes sociales.
• Widget de clima de Weather.com
• Reproductor YouTube embebido
• Botón "Compartir" de Facebook
• Calendario de Google embebido
🔌 Servicios Externos
(External Services)
Funcionalidades complejas de terceros, como servicios de Mapas (Google Maps), pasarelas de pago o autenticación de redes sociales.
• Google Maps API (geolocalización)
• Stripe Payment Gateway
• OAuth 2.0 de Google
• SendGrid (envío de emails)
⚙️ Motor del Mashup
(Mashup Runtime)
Es el lugar donde ocurre la "magia". Puede ejecutarse en el navegador del cliente (usando JavaScript) o en un servidor intermedio que combina los datos antes de enviarlos.
• Cliente: React, Vue.js, Angular
• Servidor: Node.js, Python Flask, Django
• Híbrido: Next.js (SSR + Client)
🧩 Lógica y Orquestación
(Logic & Orchestation)
El código que decide cómo se mezclan los datos. Filtra, transforma y combina la información de las diferentes fuentes para que tenga sentido.
• Filtrado de datos relevantes
• Transformación de formatos (XML → JSON)
• Validación y limpieza de datos
• Combinación inteligente de información
💻 Interfaz de Usuario Integrada
(User Interface)
La vista final que ve el usuario, donde todos los servicios inconexos aparecen como una única aplicación coherente.
• Diseño unificado y consistente
• El usuario NO ve múltiples servicios
• Navegación fluida entre componentes
• Experiencia de usuario (UX) cohesiva
👤 Usuario Final
(End-User)
Quien interactúa con la aplicación integrada a través de su dispositivo, sin saber que está consumiendo múltiples servicios simultáneamente.
• Computadora PC/Mac
• Tablet (iPad, Android)
• Smartphone (iOS, Android)
• Smart TV o dispositivos IoT
🔄 Flujo de Funcionamiento de un Mashup
1️⃣ Usuario Final solicita información desde la interfaz (ej: buscar restaurantes cerca)
2️⃣ Motor del Mashup recibe la solicitud y la procesa
3️⃣ Lógica de Orquestación llama a múltiples fuentes de datos en paralelo
4️⃣ Fuentes de Datos y Servicios Externos devuelven datos (JSON, XML, etc.)
5️⃣ Motor del Mashup combina, filtra y procesa todos los datos recibidos
6️⃣ Componentes de Interfaz son populados con la información procesada
7️⃣ Interfaz de Usuario presenta la información integrada de forma unificada
✨ Todo esto sucede en segundos de forma transparente para el usuario final
💡 Ejemplo Práctico: Aplicación de Búsqueda de Restaurantes
🍕 Caso de Uso Real
1. Fuentes de Datos: Yelp API (restaurantes), Google Places API (reviews)
2. Componentes de Interfaz: Tarjetas de restaurante, estrellas de rating
3. Servicios Externos: Google Maps (mapas), Stripe (reservas de pago)
4. Motor del Mashup: Node.js + Express en el servidor
5. Lógica: Combina reviews de Yelp + Google, calcula rating promedio
6. Interfaz: React app responsive que muestra todo integrado
7. Usuario: Ve UNA app de restaurantes, no 4 servicios diferentes
✅ Ventajas de esta Arquitectura
✓ Modularidad: Cada elemento puede actualizarse independientemente
✓ Escalabilidad: Añade nuevas fuentes sin reescribir todo
✓ Reutilización: Los componentes se pueden usar en otras aplicaciones
✓ Mantenibilidad: Más fácil detectar y solucionar problemas
✓ Flexibilidad: Cambia una API sin afectar las demás
✓ Costo-efectivo: Aprovecha servicios gratuitos o de bajo costo