Currículum completo · escritorio + móvil + backend
Todo lo que necesitas para construir el sistema de tu restaurante
Esta guía cubre, de principio a fin, los conceptos, las librerías y el código para desarrollar una aplicación de restaurante con tres piezas: una app de escritorio en React + Tauri, una app móvil en Flutter y un backend en Spring Boot o Go (Gin). Léela en orden o salta directo a la funcionalidad que te interese.
0.1 Qué vamos a construir
El sistema es híbrido: red local + nube. La app central (React + Tauri) y los meseros trabajan contra un backend local — rápido y sin depender de internet — mientras que un backend en la nube atiende a los repartidores por WebSocket, reenvía sus ubicaciones al local y guarda una copia de seguridad de todos los datos:
La regla de oro se mantiene: las aplicaciones nunca se hablan directamente entre sí; cada una habla con su backend. Cuando el mesero toma un pedido no se conecta a la app central ni a la impresora: se lo manda al backend local, que lo guarda, lo difunde a cocina por WebSocket y lo imprime. Las claves del lado híbrido:
- Dentro del local, todo es local. Pedidos, cocina, tickets y mapa funcionan a velocidad de LAN y siguen operando aunque se caiga el internet del restaurante.
- La nube existe por dos razones: los repartidores (un teléfono en 4G no puede alcanzar tu red local) y la copia de seguridad de los datos.
- Los dos backends se unen por un túnel WebSocket que el local abre hacia afuera: la nube le reenvía las ubicaciones por ahí, y el local le sube los eventos para respaldo. Como la conexión es saliente, el módem del restaurante no necesita puertos abiertos ni IP fija.
- El detalle de esta pieza — el túnel, el patrón de respaldo y el papel de GraphQL — está en el capítulo 3.7.
0.2 Mapa de funcionalidades
Cada funcionalidad que pediste está cubierta en un capítulo concreto. Esta tabla es tu índice rápido:
| Funcionalidad | App | Dónde se explica |
|---|---|---|
| Mapa con usuarios (repartidores) en tiempo real | Escritorio | Cap. 4.2 |
| Imprimir tickets en impresora térmica | Escritorio | Cap. 4.3 |
| Recibir información de un teléfono en la misma red | Escritorio | Cap. 4.4 |
| Graficar datos (ventas, platillos, horas pico) | Escritorio | Cap. 4.5 |
| Distribuir la app móvil (APK) por red local | Escritorio | Cap. 4.6 |
| Ruta más rápida con múltiples puntos de entrega | Móvil | Cap. 5.2 |
| Enviar ubicación al servidor por WebSocket | Móvil | Cap. 5.3 |
| Detectar llamada entrante y enviarla al escritorio | Móvil | Cap. 5.4 |
| Tomar pedidos como mesero → cocina (pantalla o impresora) | Móvil | Cap. 5.5 |
| Pedir ticket impreso (desde ambas apps) | Ambas | Cap. 4.7 y 5.6 |
| API REST, verbos HTTP, endpoints, headers y bodies | Backend | Cap. 1.3–1.5 |
| DTO ↔ JSON ↔ request body | Backend | Cap. 1.6 |
| WebSocket: qué es y cuándo usarlo | Backend | Cap. 1.7 |
| Arquitectura híbrida: backend local + nube, túnel y respaldo | Backend | Cap. 3.7 |
| JWT, autenticación y autorización | Backend | Cap. 2 |
| Rendimiento y buenas prácticas de React | Escritorio | Cap. 6 |
| Arquitecturas de frontend | Escritorio | Cap. 6.4 |
0.3 Los capítulos
Capítulo 01 · Base
Fundamentos web
Frontend vs backend, cómo viaja una petición HTTP, verbos, API REST, diseño de endpoints con headers y bodies, DTOs y JSON, y WebSocket vs REST.
Capítulo 02 · Base
JWT, autenticación y roles
Autenticación vs autorización, anatomía de un JWT, flujo de login, refresh tokens, roles del restaurante y la implementación en Spring Security y Gin.
Capítulo 03 · Base
El backend del restaurante
Arquitectura en capas, el contrato completo de la API, el hub de WebSocket con sus canales, la cola de impresión y la comparación honesta Spring vs Gin.
Capítulo 04 · Aplicaciones
Escritorio: React + Tauri
Mapa en tiempo real con Leaflet, impresión térmica ESC/POS desde Rust, recibir datos del teléfono, gráficas con Recharts y repartir el APK por la red local.
Capítulo 05 · Aplicaciones
Móvil: Flutter
Ruta óptima con múltiples paradas (OSRM), ubicación en vivo por WebSocket, detectar llamadas entrantes, tomar pedidos como mesero y pedir tickets.
Capítulo 06 · Profundiza
React: rendimiento y arquitectura
Por qué re-renderiza React, memo/useMemo/useCallback bien usados, code splitting, virtualización, y las arquitecturas de frontend para organizar tu app.
0.4 Cómo leer esta guía
- Si estás empezando: lee en orden. Los capítulos 1–3 construyen el vocabulario (HTTP, REST, JWT, WebSocket) que los capítulos 4 y 5 usan sin volver a explicar.
- Si ya dominas la base: salta directo a la funcionalidad que necesites con la tabla del punto 0.2. Cada sección enlaza a los conceptos que asume.
- El código de backend aparece en pestañas Spring Boot / Go + Gin: elige una tecnología y sigue siempre esa pestaña; ambas implementan exactamente lo mismo.
- Los bloques de código son adaptables, no de juguete: tienen los nombres reales de paquetes y librerías, el manejo de errores mínimo razonable y comentarios donde una línea no se explica sola.
Los ejemplos usan un dominio consistente en toda la guía: Pedido, ItemPedido, Mesa, Repartidor y Ticket. Cuando veas POST /api/pedidos en el capítulo 1, es el mismo endpoint que el mesero de Flutter llama en el capítulo 5 y que la cocina recibe por WebSocket en el capítulo 4. Toda la guía construye una sola aplicación.
0.5 El stack completo de un vistazo
| Pieza | Tecnología | Librerías clave |
|---|---|---|
| Escritorio | React 18 + TypeScript + Tauri 2 | react-leaflet, recharts, zustand, @tanstack/react-query, qrcode.react |
| Móvil | Flutter 3 (Dart) | flutter_map, geolocator, web_socket_channel, phone_state, dio, esc_pos_utils_plus |
| Backend (opción A) | Java 21 + Spring Boot 3 | Spring Web, Spring Security, jjwt, WebSocket/STOMP, Spring Data JPA |
| Backend (opción B) | Go 1.22 + Gin | gin-gonic/gin, gorilla/websocket, golang-jwt/jwt, pgx |
| Backend en la nube | el mismo stack, desplegado en un VPS | WS de repartidores, relay al local y respaldo (cap. 3.7) |
| Base de datos | PostgreSQL | — |
| Impresión | ESC/POS sobre TCP (puerto 9100), USB o Bluetooth | bytes crudos, escpos-coffee (Java), esc_pos_printer (Flutter) |
| Mapas y rutas | OpenStreetMap + OSRM (o Google Maps) | tiles OSM, API /trip de OSRM para optimizar paradas |