AI SREClickHouse Workshops

02 ベースアプリ

ClickHouse にデータが入った状態で、動いている NYC タクシーアプリを一巡し、拡張する前にその構造を理解します。

Your computer
macOS terminal: Run workshop commands in Terminal using zsh or bash.

開始時点

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 を開始するまでは空のままです。

NYC Taxi Ops (Live) ダッシュボード: 2022年7月のサンプル期間に設定された Filters カード、乗車数・運賃・p50/p95 所要時間の「Act 1 — What's happening now?」チャート、および Top pickup zones の棒グラフ

ステップ 2 — Historical ダッシュボードを開く

frontend/

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

2022年通年の期間を対象にした Historical Metrics ダッシュボード: Filters カード、月別の乗車数を示す KPI Timeseries チャート、曜日×時刻の Seasonality ヒートマップ

ステップ 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 ダッシュボードにライブな行を流し込みましょう。

このページの内容

Track your progress?

Optional. We email a link to confirm your address; progress records once you open it.

Please use your work email address, not a personal one.

Progress tracking also requires accepting the current Terms of Service in Privacy settings.

JA