Illo Un Campero
Illo Un
Campero
Plataforma de Pedidos Online
Multiplataforma
Trabajo Fin de Grado
Miguel · Jose Antonio · Bryan
CPIFP Alan Turing
2025 / 2026
1
Índice
01
Motivación y Objetivos
02
Tecnologías
03
Arquitectura del Sistema
04
Funcionalidades Principales
05
Seguridad
06
Testing y Calidad
07
Despliegue
08
Demo + Conclusiones
2
Motivación
y Problema
Restaurantes locales gestionan pedidos por llamadas y WhatsApp
Plataformas externas aplican comisiones del 30%
Sin carta digital, ni seguimiento, ni app propia
🎯 Objetivo del TFG
Digitalizar el proceso completo de pedido: desde la carta hasta el seguimiento en tiempo real.
Web PWA API REST Android
Hamburguesa
📱 Antes: sólo por llamada
✅ Ahora: plataforma propia
3
Stack Tecnológico
Frontend Web
Angular 20
TypeScript 5.9
Firebase Auth
Stripe.js
Signals + Standalone
Playwright E2E
Backend
Spring Boot 3.4
Java 21
Firebase Admin SDK
Spring Security
Stripe Java
Bucket4j Rate Limit
Móvil Android
Kotlin
Jetpack Compose
Material 3
Retrofit
Firebase Auth + FCM
Stripe Android SDK
Servicios Cloud
Firebase
Cloudinary
Render
Stripe
4
Arquitectura del Sistema
Angular PWA
Firebase Hosting
Android App
Compose + Retrofit
JWT Token
Spring Boot REST API
Render — Docker
Firebase Admin SDK
verificación tokens JWT
Firebase
Auth + Firestore
Stripe
Pagos + Webhooks
Cloudinary
CDN Imágenes
5
Modelo de Datos
Producto
nombre
descripción
precio
categoría / subcategoría
imagenUrl
disponible · esOferta
Pedido
cliente · productos · total
método de pago · cupón
Estado:
PENDIENTE→ COCINANDO→ REPARTO→ ENTREGADO
Usuario
uid · nombre · email
teléfono · dirección
rol: CLIENTE / ADMIN / COCINA
Cupón
código · descuento · activo
Reseña
puntuación (1–5) · comentario
vinculada a pedido entregado
6
Funcionalidades
del Cliente
Carta + Carrito
Filtros, búsqueda, carrito persistente con notas
Checkout
Stripe, efectivo y cupones de descuento
Seguimiento Real
Timeline en vivo del estado del pedido
Valoraciones
1–5 estrellas solo en pedidos entregados
App móvil
🌍 Bilingüe ES / EN
7
Panel Admin
y Cocina
CRUD de productos — subida firmada a Cloudinary
Dashboard cocina — pedidos en tiempo real
Estadísticas — ventas del día, top productos
Cupones — crear, activar y desactivar
Toggle apertura — abrir/cerrar tienda al instante
Cocina restaurante
👨‍🍳 Gestión en tiempo real
8
App Móvil Android
Jetpack Compose + Material 3
Misma API REST que la web (Retrofit)
Notificaciones push FCM
Pago con Stripe integrado
MVVM — 7 ViewModels · 3 Repositories
9 Pantallas
Login · Registro · Carta · Carrito · Pedidos
Seguimiento · Admin · Cocina · Configuración
App móvil
📱 Kotlin + Compose
9
Seguridad
Login seguro — Firebase Auth con tokens JWT verificados
3 roles separados — Cliente · Admin · Cocina
Protección anti-abuso — límite de peticiones en pagos y cupones
Pagos protegidos — Stripe con firma verificada en cada cobro
Validación total — todos los datos verificados antes de procesarse
Protección contra ataques web — cabeceras de seguridad y CORS
Seguridad
🛡️ 6 capas de protección
10
Testing y Calidad
Playwright E2E — 6 suites: navegación, responsive, carta, formularios, integridad y rendimiento
Responsive — testado en pantalla 1440px y móvil Pixel 7
Carga en menos de 3.5 segundos — validado automáticamente
82%
Cobertura de código
Tests en frontend, backend y Android
Testing
✅ Calidad automatizada
11
Visible y usable
en cualquier sitio
📲
Instálala como app
Se añade a la pantalla de inicio del móvil igual que una app nativa
🔍
Sale en Google
Cada página tiene su título y descripción para buscadores
📤
Compártela bien
Al compartir el enlace se ve imagen, título y descripción en WhatsApp e Instagram
⚡
Carga rápida
Funciona sin conexión y carga en menos de 3 segundos
🍪
Cumple la ley europea
Aviso de cookies, política de privacidad y aviso legal incluidos
PWA móvil
Añadir a pantalla de inicio
illo-uncampero.web.app
Cancelar
Añadir
12
Despliegue
Frontend
Firebase Hosting
Build Angular → dist/ · Cache 1 año
Backend
Render (Docker)
Dockerfile multi-stage · Auto-deploy en push
Base de datos
Firebase Firestore
NoSQL en tiempo real · Sin mantenimiento
Imágenes
Cloudinary CDN
CDN global · Transformaciones auto
Servidores cloud
🌍 Infraestructura cloud
13
Demo en vivo
Prueba la aplicación aquí:
QR Illo Un Campero
illo-uncampero.web.app/restaurantes
Web en portátil
⚠️ Despierta Render 10 min antes
14
Conclusiones
Plataforma funcional y completa — web, API y Android
Experiencia multiplataforma — sin depender de terceros
Arquitectura escalable y segura
Proyecto real con potencial de comercialización
🚀 Trabajo futuro
Web Push Impresora tickets Fidelización App iOS
Hamburguesería
15
¡Gracias!
¿Alguna pregunta?
Miguel · Jose Antonio · Bryan
CPIFP Alan Turing
2025 / 2026
16