17 — Mapa de prototipo — RELE
1. Fuentes de verdad
| Capa | Rol |
|---|
| Paper | Hi-fi visual + UX process (no clicable nativo vía MCP) |
| App Angular | Prototipo interactivo end-to-end |
| Docs 00–20 | Especificación y narrativa portfolio |
Paper file: https://app.paper.design/file/01KZJNCCMJ1FDHHPZZ923RWDWY
2. Mapa de clics (app)
[/]
├─ Entrar / Abrir panel / Soy residente / Soy asesor → [/login]
└─ (footer/demo si aplica)
[/login]
├─ ← Inicio → [/]
└─ submit OK → [/lecturas]
[/lecturas]
├─ Nueva lectura (RESIDENT) → [/lecturas/nueva]
├─ card → [/lecturas/:id]
├─ Reintentar → reload
└─ Salir → login/home + clear
[/lecturas/nueva]
├─ back → [/lecturas]
└─ submit OK → [/lecturas]
[/lecturas/:id]
├─ ← Lecturas → [/lecturas]
└─ (ADVISOR) REVIEWED | FLAGGED → same page update
3. Paper artboard → ruta
| Artboard | Ruta | Notas de paridad |
|---|
| 01 Home | / | Hero, 3 pasos, CTAs |
| 02 Login | /login | Split navy |
| 03 Lecturas | /lecturas | Stats + lista |
| 04 Nueva | /lecturas/nueva | Form |
| 05 Detalle | /lecturas/:id | Acciones advisor |
| 06 Mobile | mismas | viewport |
| 07 Empty | /lecturas | 0 items |
| 08 Error | /lecturas | API down |
4. Guiones de demo (prototipo vivo)
Guión A — Residente (3 min)
- Home: leer claim “El consumo, a la vista.”
- Login
casa@rele.energy / password123.
- Señalar stats y códigos
RE-0809-….
- Nueva lectura periodo actual + kWh.
- Abrir detalle; mostrar notas si hay.
Guión B — Asesor (3 min)
- Login
asesor@rele.energy.
- Cola con nombres de residente.
- Abrir SUBMITTED.
- Nota + FLAGGED o REVIEWED.
- Volver a lista; badge actualizado.
Guión C — Resiliencia (1 min)
- Parar API.
- Reintentar lista → error.
- Arrancar API → Reintentar OK.
5. Datos del prototipo (seed)
| Código | Periodo | kWh | Status |
|---|
| RE-0809-01 | 2026-07 | 212 | REVIEWED |
| RE-0809-02 | 2026-06 | 168 | REVIEWED |
| RE-0809-03 | 2026-08 | 245 | SUBMITTED |
| RE-0809-04 | 2026-05 | 141 | FLAGGED |
| RE-0809-05 | 2026-04 | 155 | SUBMITTED |
Vivienda: Piso Ruzafa · CUPS ES0021000000000001AB.
6. Limitaciones del prototipo
| Limitación | Impacto demo |
|---|
| Sin guards de ruta Angular formales | Deep link sin token redirige en ngOnInit |
| Sin notificaciones | Loop asesor→residente es visual en detalle |
| Sin multi-home UI | Una vivienda seed |
| Enum EN en badges | Explicar en narración |
7. Checklist de paridad pre-demo
8. Entrega de prototipo
| Audiencia | Qué mostrar |
|---|
| Portfolio | Paper §1–§5 + app guión A/B |
| Tech | Network tab JWT + PATCH |
| Producto | Diferencia vs marketplace/lead-form |