02 ベースアプリ
ClickHouse にデータが入った状態で、動いている NYC タクシーアプリを一巡し、拡張する前にその構造を理解します。
開始時点
build-workshop-v1 にいます(モジュール 00 で選択済み)— チェックアウトは不要です。
所要時間は約 5分 です。
モジュール 00 で起動したワークショップのスタックは、まだ動いているはずです。
前提条件: モジュール 00 と 01 が完了していること(スタックが healthy で、ClickHouse に
データが入っている)、フロントエンドに http://localhost:8080/ でアクセスできること。
なぜ
見たことがないものは拡張できません。ウェアハウスにデータが入ったので(モジュール 01)、 数分かけてアプリの構造を理解しましょう。2つのダッシュボードは何のためにあるのか、フロント エンド、バックエンド、データベースがどう組み合わさっているのか、そして AI チャットパネルは どこにあるのか。作るものが何もない唯一のモジュールですが、これは意図的です — ここで全体像を つかんでから、続くモジュールでライブデータ、エージェント、オブザーバビリティを使ってアプリを 拡張していきます。
ゴール
Ops ダッシュボードは何のためにあるのか、Historical ダッシュボードは何のためにあるのか、 そしてアプリのデータはどこから来るのか(モジュール 01 で ClickHouse Cloud に投入した履歴データ、 モジュール 03 で CDC 経由でストリーミングするライブデータ)を、それぞれ1文で説明できるように なることです。
ステップ 1 — Ops ダッシュボードを開く
frontend/
http://localhost:8080/ を開きます。これが Ops ダッシュボードで、リアルタイムの運用メトリクス
(直近の乗車、稼働中のゾーン、ニアリアルタイムの集計)のためのカード、フィルター、レイアウトです。
いまはまだ空のままです — ライブビューが埋まるのは、モジュール 03 で CDC 経由でリアルタイムな行を
ストリーミングしてからです。モジュール 01 で投入した履歴データは、次の Historical ダッシュボードに
表示されます。
以下のスクリーンショットは、Use sample window ボタンを適用した状態の Ops ダッシュボードです。 投入済みのデータでレイアウトが埋まった様子が分かります — デフォルトではライブ(当日)の期間で 開くため、モジュール 03 で CDC を開始するまでは空のままです。

ステップ 2 — Historical ダッシュボードを開く
frontend/
http://localhost:8080/historical を開きます。このダッシュボードは、履歴の乗車データに対する
広い期間の集計とドリルダウンのために作られており、モジュール 01 で1か月分の乗車データを
ClickHouse Cloud に投入したので、いまは実際に描画されます。その月をまたぐ広い日付範囲と
フィルターのコントロールを試して、クエリが1秒を大きく下回る時間で返ってくるのを確かめてください。

ステップ 3 — チャットパネルを見つけてデータの流れをたどる
backend/
UI 内で AI チャットパネルの場所を確認します(実際のモデルに接続するのはモジュール 08 です)。 次に、フロントエンドがどのように FastAPI バックエンドを呼び出しているか、そしてバックエンドが ClickHouse にクエリを投げるためにどう設定されているかを見てください — その接続先は、 モジュール 01 で接続してデータを投入した自分の Cloud サービスです。
React front end -> FastAPI back end -> ClickHouse Cloud (connected + seeded in module 01)
-> ClickHouse-managed Postgres (operational source; created in module 03)コーディングエージェントに、分析エンドポイントを要約させてみましょう。
Read the FastAPI backend and list each analytics endpoint, what it returns, and which table it reads from.完了したかどうかの確認方法
- 両方のダッシュボードを開いた。Historical ダッシュボードはモジュール 01 で投入したデータから 描画され、Ops (Live) ダッシュボードはモジュール 03 で CDC を開始するまで空である — これは期待どおりです。
- アプリのデータがどこから来るのかを言える(モジュール 01 で ClickHouse Cloud に投入した履歴 データ、モジュール 03 のライブ CDC)。
- まだモデルには接続されていないものの、チャットパネルの場所が分かっている。
まとめ
これでアプリのメンタルモデルができました。2つのダッシュボード、FastAPI の API、マネージドな ソース Postgres、そして接続を待っているチャットパネルです。以降のどのモジュールも、この絵の どこか1か所を変えていきます。
終了状態
動いているアプリを理解しました。 03 マネージド Postgres CDC に進んで、 Ops ダッシュボードにライブな行を流し込みましょう。