02 Aplicación base

Punto de partida

Estás en build-workshop-v1 (seleccionado en el módulo 00); no hace falta hacer checkout. Reserva unos 5 minutos. La pila del taller que iniciaste en el módulo 00 debería seguir en ejecución.

Requisitos previos: módulos 00 y 01 completos (pila en buen estado, ClickHouse con datos) y front-end accesible en http://localhost:8080/.

Por qué

No puedes ampliar algo que no has visto. Ahora que tu almacén contiene datos (módulo 01), dedica unos minutos a comprender la estructura de la aplicación: para qué sirven los dos paneles, cómo encajan el front-end, el back-end y las bases de datos, y dónde se encuentra el panel de chat con IA. Este es el único módulo en el que no hay nada que construir, y es intencionado: aquí te orientas; en los módulos siguientes amplías la aplicación con datos en directo, agentes y observabilidad.

Objetivo

Ser capaz de describir, con una frase por elemento, para qué sirve el panel Ops, para qué sirve el panel Historical y de dónde proceden los datos de la aplicación (datos históricos que cargaste en ClickHouse Cloud en el módulo 01; datos en directo que transmites mediante CDC en el módulo 03).

Paso 1: abre el panel Ops

frontend/

Abre http://localhost:8080/. Este es el panel Ops: las tarjetas, los filtros y el diseño para métricas operativas en directo (viajes recientes, zonas activas y agregaciones casi en tiempo real). Por ahora permanece vacío; la vista en directo solo se llena cuando transmitas filas en tiempo real mediante CDC en el módulo 03. Los datos históricos que cargaste en el módulo 01 aparecen a continuación en el panel Historical.

La captura siguiente muestra el panel Ops con el botón Use sample window aplicado, para que puedas ver el diseño relleno con los datos iniciales. De forma predeterminada, se abre en el intervalo en directo (hoy), que permanece vacío hasta que inicias CDC en el módulo 03.

Paso 2: abre el panel Historical

frontend/

Abre http://localhost:8080/historical. Este panel está diseñado para agregaciones de intervalos amplios y desgloses de datos históricos de viajes, y ahora se muestra porque cargaste un mes de viajes en ClickHouse Cloud en el módulo 01. Prueba un intervalo de fechas amplio dentro de ese mes y los controles de filtro, y observa cómo las consultas regresan en mucho menos de un segundo.

Paso 3: encuentra el panel de chat y sigue el flujo de datos

backend/

Localiza el panel de chat con IA en la interfaz (lo conectarás a un modelo real en el módulo 08). Después, observa cómo el front-end llama al back-end de FastAPI y cómo el back-end está configurado para consultar ClickHouse; el servicio al que apunta es tu servicio en la nube, conectado y cargado en el módulo 01.

React front end  ->  FastAPI back end  ->  ClickHouse Cloud (connected + seeded in module 01)
                                        ->  ClickHouse-managed Postgres (operational source; created in module 03)

Pide a tu agente de programación que resuma los endpoints de analítica:

Read the FastAPI backend and list each analytics endpoint, what it returns, and which table it reads from.

Cómo comprobar que has terminado

• Has abierto ambos paneles: Historical muestra los datos que cargaste en el módulo 01 y Ops (Live) permanece vacío hasta que se inicia CDC en el módulo 03; es lo esperado.
• Puedes indicar de dónde proceden los datos de la aplicación (carga histórica en ClickHouse Cloud del módulo 01; CDC en directo del módulo 03).
• Sabes dónde está el panel de chat, aunque todavía no esté conectado a un modelo.

Resumen

Ya tienes un modelo mental de la aplicación: dos paneles, una API de FastAPI, un Postgres administrado como origen y un panel de chat que espera su conexión. Cada módulo posterior modifica una parte de esta imagen.

Estado final

Comprendes la aplicación en ejecución. Continúa en 03 CDC con Postgres administrado para transmitir filas en directo al panel Ops.