Initial commit: Pizza Delivery con Relay Gateway

Author: NeftaliYagua

.github/workflows/deploy.yml

@@ -0,0 +1,48 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Update Relay URL for production
+        run: |
+          sed -i.bak "s|const RELAY_URL = 'http://localhost:5000';|const RELAY_URL = window.location.hostname === 'coderic.org' ? 'wss://demo.relay.coderic.net' : 'http://localhost:5000';|g" index.html
+          rm -f index.html.bak
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: .
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

README.md

@@ -0,0 +1,97 @@
+# 🍕 Pizza Delivery - Tracking en Tiempo Real
+
+Ejemplo de sistema de pedidos de pizza con tracking en tiempo real utilizando [Relay Gateway](https://github.com/NeftaliYagua/Relay).
+
+![Demo](https://img.shields.io/badge/demo-online-green)
+
+## 🚀 Inicio Rápido
+
+### Prerrequisitos
+
+1. Tener Relay Gateway ejecutándose en `http://localhost:5000`
+
+```bash
+# Opción 1: Con Docker Compose (recomendado)
+cd infraestructura && docker compose up -d
+
+# Opción 2: Directo con npx
+npx relay-gateway
+```
+
+### Ejecutar el ejemplo
+
+```bash
+# Clonar este repositorio
+git clone https://github.com/Coderic/relay-ejemplo-pizza-delivery.git
+cd relay-ejemplo-pizza-delivery
+
+# Servir los archivos estáticos
+npx serve -p 8001
+```
+
+Abre http://localhost:8001 en tu navegador.
+
+## 📖 Características
+
+- **Vista Cliente**: Selecciona pizzas y realiza pedidos
+- **Vista Cocina**: Gestiona los pedidos y actualiza estados
+- **Tracking en tiempo real**: Observa el progreso de tu pedido
+
+### Estados del pedido
+
+1. 📝 **Recibido** - Pedido registrado
+2. 👨‍🍳 **Preparando** - En la cocina
+3. 🔥 **Horneando** - En el horno
+4. ✅ **Listo** - Esperando repartidor
+5. 🛵 **En Camino** - El repartidor va hacia ti
+6. 🎉 **Entregado** - ¡Buen provecho!
+
+## 💻 Cómo funciona
+
+```javascript
+// Conectar a Relay
+const relay = new RelayConector('http://localhost:5000');
+await relay.conectar();
+
+// Enviar nuevo pedido (cliente)
+relay.enviarATodos({
+  tipo: 'nuevo_pedido',
+  pedidoId: 'ABC123',
+  pizza: 'Pepperoni',
+  precio: 14.99
+});
+
+// Actualizar estado (cocina)
+relay.enviarATodos({
+  tipo: 'estado_pedido',
+  pedidoId: 'ABC123',
+  estado: 'preparando'
+});
+
+// Escuchar actualizaciones
+relay.on('relay', (data) => {
+  if (data.tipo === 'estado_pedido') {
+    actualizarTracking(data.estado);
+  }
+});
+```
+
+## 📁 Estructura
+
+```
+├── index.html      # Interfaz cliente/cocina
+├── conector.js     # Cliente Relay para navegador
+├── package.json
+└── README.md
+```
+
+## 🔗 Enlaces
+
+- [Relay Gateway](https://github.com/NeftaliYagua/Relay)
+- [Documentación](https://neftaliyagua.github.io/Relay/)
+- [Otros ejemplos](https://github.com/Coderic?q=relay-ejemplo)
+
+## 📄 Licencia
+
+MIT © [Coderic](https://github.com/Coderic)
+

conector.js

@@ -0,0 +1,127 @@
+/**
+ * Conector Relay v2
+ * Cliente JavaScript para conectarse al gateway Relay
+ * 
+ * Uso:
+ *   const relay = new RelayConector('http://localhost:5000');
+ *   await relay.conectar();
+ *   await relay.identificar('miUsuario');
+ *   relay.enviarATodos({ mensaje: 'Hola!' });
+ *   relay.on('relay', (data) => console.log(data));
+ */
+
+class RelayConector {
+  constructor(url = 'http://localhost:5000') {
+    this.url = url;
+    this.socket = null;
+    this.usuario = null;
+    this.listeners = {};
+    this.connected = false;
+  }
+
+  conectar() {
+    return new Promise((resolve, reject) => {
+      if (typeof io === 'undefined') {
+        reject(new Error('Socket.io no cargado. Incluye: <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>'));
+        return;
+      }
+
+      this.socket = io(this.url + '/relay', {
+        transports: ['websocket', 'polling']
+      });
+
+      this.socket.on('connect', () => {
+        console.log('Relay: Conectado -', this.socket.id);
+        this.connected = true;
+        this._emit('connect', { socketId: this.socket.id });
+        resolve(this);
+      });
+
+      this.socket.on('disconnect', (reason) => {
+        console.log('Relay: Desconectado -', reason);
+        this.connected = false;
+        this._emit('disconnect', { reason });
+      });
+
+      this.socket.on('connect_error', (error) => {
+        console.error('Relay: Error -', error.message);
+        this._emit('error', error);
+        reject(error);
+      });
+
+      // Eventos de Relay
+      this.socket.on('notificar', (data) => this._emit('notificar', data));
+      this.socket.on('relay', (data) => this._emit('relay', data));
+    });
+  }
+
+  identificar(usuario) {
+    return new Promise((resolve) => {
+      this.usuario = usuario;
+      this.socket.emit('identificar', usuario, (ok) => {
+        console.log('Relay: Identificado como', usuario);
+        this._emit('identificado', { usuario, ok });
+        resolve(ok);
+      });
+    });
+  }
+
+  // Enviar mensaje por el canal 'relay'
+  enviar(data) {
+    this.socket.emit('relay', data);
+  }
+
+  // Enviar notificación
+  notificar(data) {
+    this.socket.emit('notificar', data);
+  }
+
+  // Atajos para destinos
+  enviarAMi(data) {
+    this.enviar({ ...data, destino: 'yo' });
+  }
+
+  enviarAOtros(data) {
+    this.enviar({ ...data, destino: 'ustedes' });
+  }
+
+  enviarATodos(data) {
+    this.enviar({ ...data, destino: 'nosotros' });
+  }
+
+  // Sistema de eventos
+  on(evento, callback) {
+    if (!this.listeners[evento]) {
+      this.listeners[evento] = [];
+    }
+    this.listeners[evento].push(callback);
+    return this;
+  }
+
+  off(evento, callback) {
+    if (this.listeners[evento]) {
+      this.listeners[evento] = this.listeners[evento].filter(cb => cb !== callback);
+    }
+    return this;
+  }
+
+  _emit(evento, data) {
+    if (this.listeners[evento]) {
+      this.listeners[evento].forEach(cb => cb(data));
+    }
+  }
+
+  desconectar() {
+    if (this.socket) {
+      this.socket.disconnect();
+    }
+  }
+}
+
+// Exportar para uso en módulos o global
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = RelayConector;
+} else {
+  window.RelayConector = RelayConector;
+}
+