Aplicaciones Dinámicas e Híbridas

1$productos = $repo->buscar($_GET['q'] ?? '');
2
3$accept = $_SERVER['HTTP_ACCEPT'] ?? '';
4if (str_contains($accept, 'application/json')) {
5    header('Content-Type: application/json; charset=utf-8');
6    echo json_encode($productos, JSON_UNESCAPED_UNICODE);
7} elseif (isset($_SERVER['HTTP_HX_REQUEST'])) {          // la petición la hace HTMX
8    echo $vista->render('productos/_lista', ['productos' => $productos], layout: null);
9} else {
10    echo $vista->render('productos/index', ['productos' => $productos]);
11}

1<?php
2header('Content-Type: application/json; charset=utf-8');
3header('Cache-Control: no-store');
4
5$email = trim($_GET['email'] ?? '');
6if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
7    http_response_code(422);
8    echo json_encode(['disponible' => false, 'motivo' => 'formato']);
9    exit;
10}
11$s = conectar()->prepare('SELECT 1 FROM usuarios WHERE email = ?');
12$s->execute([$email]);
13echo json_encode(['disponible' => !$s->fetchColumn()]);

1const campo = document.querySelector("#email");
2const aviso = document.querySelector("#aviso-email");
3let espera;
4
5campo.addEventListener("input", () => {
6  clearTimeout(espera);
7  espera = setTimeout(async () => {                    // espera a que deje de escribir
8    const r = await fetch("/api/disponible.php?email=" + encodeURIComponent(campo.value), {
9      headers: { Accept: "application/json" },
10    });
11    const { disponible } = await r.json();
12    aviso.textContent = disponible ? "" : "Ese email ya está registrado";
13  }, 400);
14});

1<script src="https://unpkg.com/htmx.org@2"></script>
2
3<input type="search" name="q" placeholder="Buscar productos…"
4       hx-get="/productos" hx-trigger="input changed delay:300ms" hx-target="#resultados">
5<div id="resultados"><!-- aquí el servidor coloca el fragmento --></div>
6
7<button hx-post="/carrito/7" hx-target="#contador-carrito" hx-swap="outerHTML">
8  Añadir al carrito
9</button>

1<?php if (!$productos): ?>
2  <p>No hay resultados para «<?= e($q) ?>».</p>
3<?php endif ?>
4<?php foreach ($productos as $p): ?>
5  <article class="producto">
6    <h3><?= e($p['nombre']) ?></h3>
7    <p><?= number_format($p['precio'], 2, ',', '.') ?> €</p>
8  </article>
9<?php endforeach ?>

1<?php
2header('Content-Type: text/event-stream');
3header('Cache-Control: no-store');
4header('X-Accel-Buffering: no');                  // que Nginx no acumule la salida
5session_write_close();                            // libera la sesión: si no, bloquea las demás peticiones
6
7for ($i = 1; $i <= 10 && !connection_aborted(); $i++) {
8    $estado = consultarProgresoExportacion($_GET['tarea']);
9    echo "event: progreso\n";
10    echo 'data: ' . json_encode(['porcentaje' => $estado['porcentaje']]) . "\n\n";
11    @ob_flush();
12    flush();                                      // envía ya, sin esperar al final del script
13    if ($estado['porcentaje'] >= 100) break;
14    sleep(1);
15}
16
17// En el cliente: new EventSource('/progreso.php?tarea=42').addEventListener('progreso', …)

1// Con funciones nativas
2$contexto = stream_context_create(['http' => ['timeout' => 5, 'header' => "Accept: application/json\r\n"]]);
3$respuesta = @file_get_contents('https://api.open-meteo.com/v1/forecast?latitude=42.23&longitude=-2.10&current=temperature_2m', false, $contexto);
4if ($respuesta === false) {
5    // plan B: mostrar la página sin el tiempo, nunca un error en blanco
6}
7$tiempo = json_decode($respuesta, true);
8
9// Con Guzzle (composer require guzzlehttp/guzzle), más cómodo para APIs complejas
10$cliente = new GuzzleHttp\Client(['base_uri' => 'https://api.ejemplo.com/', 'timeout' => 5]);
11$datos = json_decode($cliente->get('pedidos', ['query' => ['estado' => 'pendiente']])->getBody(), true);

1<?php
2$cuerpo = file_get_contents('php://input');                 // el cuerpo crudo: la firma se calcula sobre él
3$firma = $_SERVER['HTTP_FIRMA'] ?? '';
4
5if (!firmaValida($firma, $cuerpo, getenv('PAGOS_WEBHOOK_SECRETO'))) {   // el reto del tema
6    http_response_code(400);
7    exit;
8}
9$evento = json_decode($cuerpo, true);
10
11if ($evento['tipo'] === 'pago.completado') {
12    $s = conectar()->prepare("UPDATE pedidos SET estado = 'pagado' WHERE id = ? AND estado = 'pendiente'");
13    $s->execute([$evento['pedido']]);                        // si ya estaba pagado, no hace nada: idempotente
14}
15http_response_code(200);                                    // responder rápido: si no, la pasarela reintenta

1interface ServicioTiempo
2{
3    /** @return array{temperatura: float, cielo: string}|null */
4    public function actual(float $lat, float $lon): ?array;
5}
6
7final class OpenMeteo implements ServicioTiempo { /* llamada HTTP real con timeout y caché */ }
8
9final class TiempoFalso implements ServicioTiempo                  // para los tests
10{
11    public function __construct(private ?array $respuesta) {}
12    public function actual(float $lat, float $lon): ?array { return $this->respuesta; }
13}
14
15// El test comprueba que la ficha de la tienda se muestra aunque el servicio falle
16$html = (new FichaTiendaControlador(new TiempoFalso(null)))->mostrar(1);
17$this->assertStringContainsString('Calle Mayor', $html);
18$this->assertStringNotContainsString('°C', $html);

1final class OpenMeteo implements ServicioTiempo
2{
3    public function __construct(private Cache $cache) {}
4
5    public function actual(float $lat, float $lon): ?array
6    {
7        return $this->cache->recordar("tiempo:$lat:$lon", 600, function () use ($lat, $lon) {
8            $url = 'https://api.open-meteo.com/v1/forecast?' . http_build_query([
9                'latitude' => $lat, 'longitude' => $lon, 'current' => 'temperature_2m,weather_code',
10            ]);
11            $ctx = stream_context_create(['http' => ['timeout' => 3, 'ignore_errors' => true]]);
12            $json = @file_get_contents($url, false, $ctx);
13            $datos = $json ? json_decode($json, true) : null;
14            if (!isset($datos['current']['temperature_2m'])) {
15                return null;                               // se guarda en caché también el fallo, para no insistir
16            }
17            return [
18                'temperatura' => (float) $datos['current']['temperature_2m'],
19                'cielo' => ($datos['current']['weather_code'] ?? 0) < 3 ? 'despejado' : 'nublado',
20            ];
21        });
22    }
23}

1<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
2<h1><?= e($tienda['nombre']) ?></h1>
3<p><?= e($tienda['direccion']) ?></p>
4
5<?php if ($tiempo): ?>
6  <p class="tiempo">Ahora: <?= round($tiempo['temperatura']) ?> °C, <?= $tiempo['cielo'] ?></p>
7<?php endif ?>
8
9<div id="mapa" style="height: 320px" data-lat="<?= $tienda['lat'] ?>" data-lon="<?= $tienda['lon'] ?>"></div>
10<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
11<script>
12  const el = document.querySelector("#mapa");
13  const pos = [Number(el.dataset.lat), Number(el.dataset.lon)];
14  const mapa = L.map(el).setView(pos, 16);
15  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
16    attribution: "&copy; colaboradores de OpenStreetMap",
17  }).addTo(mapa);
18  L.marker(pos).addTo(mapa);
19</script>