RetoolとTiDB Cloudを使って30分でリアルタイムカンバンを作る

著者：Jinpeng Zhang  (TiDB Cloud エンジニア)
編集者：Fendy Feng, Tom Dewan

ビジュアル化されたボード、つまり「カンバン」は、ワークフローの管理、プロジェクトの進行状況の追跡、一般的な可視化したインサイトなどに大いに役立ちます。理想的には、このすべてがリアルタイムで行われるべきです。しかし、リアルタイムのカンバンアプリケーションの構築は、面倒な作業で時間がかかります。

今、私たちは2つの注目すべきツールを使って、物事をよりシンプルにすることができます。TiDB CloudとRetoolです。TiDB Cloudは、オープンソースのHTAP (Hybrid Transactional and Analytical Processing) データベースであるTiDBをあなたのクラウドに取り込む、フルマネージドDBaaS (Database-as-a-Service) です。Retoolは、社内ツールの高速な構築を支援するローコード開発プラットフォームです。この2つのツールを活用することで、リアルタイムカンバンアプリケーションを30分で構築したり、簡単なSQL文を書くだけでカンバン作成したり、そこからインサイトを抽出したりすることができます。 

この投稿では、TiDB CloudとRetoolで構築したアプリケーションのデモと、その上で、このようなアプリケーションを構築する方法を順を追って説明します。

カンバンのデモ：Hacker News Insight

リアルタイムカンバンアプリケーションの構築方法を詳しく説明する前に、TiDB CloudとRetoolを使って構築したHacker News Insightというデモを紹介します。

このカンバンを使用すると、コンピュータサイエンスと起業家精神に焦点を当てた人気のニュースサービスプラットフォームであるHacker Newsに関する履歴およびリアルタイムのインサイトを迅速に取得することができます。例えば、最もアクティブな投稿者やコメンター、新しい投稿の数、一定期間またはリアルタイムで投稿されたコメントなどを特定することができます。

ソースデータの取得とデータベースの準備

リアルタイムカンバンの構築を始める前に、まずソースデータとデータベースを準備する必要があります。

TiDB Cloudクラスタを作成する

• 無料のTiDB Cloudアカウントにサインアップし、ログインします。すでにお持ちの方は、直接アカウントにログインしてください。

• [Active Clusters] ページで [Create Cluster] をクリックします。

• クラスタを作成します。[Create Cluster] ページで、無料の [Developer Tier] を選択します。クラスタ名、クラウドプロバイダー (Dev TierではAWSのみ利用可能) 、および地域を設定します。(アプリケーションがデプロイされているリージョンを使用することをお勧めします。特に、アプリケーションがレイテンシーに敏感な場合は、そのリージョンを使用することをお勧めします。) 次に、[Create] をクリックします。

注：有料の [TiDB Dedicated Tier] を選択することで、より良いパフォーマンスが得られます。

• クラスタを作成すると、[Active Clusters] ページが表示されます。このページの右側で、[Connect] をクリックします。

• ポップアップ・ウィンドウで、トラフィック・フィルターを作成し、SQLクライアントで接続します。

データを準備する 

TiDB Cloudクラスタを作成したら、アプリケーションのデータソースの準備に取り掛かります。リアルタイムデータを生成できるアプリケーションがある場合は、先ほど作成したTiDB Cloudクラスタにアプリケーションのトラフィックをシャドーしておきます。

今回は、Hacker News Crawlerを使って、Hacker Newsに新しく投稿された記事と新しく付与されたコメントのリアルタイムデータを取得します。 

注：過去のデータをデータソースとして使用したい場合は、サンプルデータのインポートをご参照ください。

Retoolでカンバンアプリケーションを構築する

Retoolのアカウントを作成し、TiDB Cloudと接続します。

• Retoolのトライアルアカウントにサインアップし、サインインします。すでにお持ちの方は、直接アカウントにサインインしてください。サインイン後、最初のアプリケーションを作成することができます。
• 新しいアプリケーションを作成します。オンボードページの右上にある[Create new] をクリックします。

• リソースの種類を選択します。[Select a resource type] ウィンドウでは、TiDBはMySQLと互換性があるため、[MySQL] を選択します。

• MySQLリソースを作成します。Name、Folder、Host、Port、Database name、Database username、Database passwordなど、すべての項目を入力します。TiDB Cloudのデフォルトのポートは4000です。完了後、[Create resource] をクリックします。

リアルタイムカンバンを作成する 

Retoolのアカウントを作成し、TiDB Cloudと接続すると、Retoolのコンポーネントを使って、カスタマイズして可視化したカンバンを作成したり、簡単なSQL文を記述して分析クエリを作成したりすることができます。

Hacker Newsの最新投稿記事500件を表示するテーブルを作成する 

1. テーブルを選択します。Retoolページのカンバンのコンポーネント・セクションで、テーブル・コンポーネントを中央にドラッグします。
2. 新しいクエリを開きます。クエリ編集セクションの下部で、[New] をクリックします。以下のSQLコマンドを書いて、TiDB Cloudに保存・処理されているリアルタイムデータをクエリします。

SELECT * FROM items WHERE type=’story’ and title <> ’” ORDER BY time DESC LIMIT 500;

3. クエリと、先ほど [Inspect] セクションで追加したテーブルを接続します。
4. 分析クエリの処理を開始します。[Run] をクリックします。カンバンボードに、Hacker Newsに投稿された最新の500件のストーリーが表示されます。

最もアクティブな投稿者上位20人を表示するグラフを作成する

チャートの作成は、テーブルの作成と似ています。右側のカンバンのコンポーネントセクションから、Chartコンポーネントを中央へドラッグします。次に、以下のSQLコマンドを記述して、Hacker Newsで最もアクティブな投稿者上位20名をクエリします。

SELECT who AS author, COUNT(*) as number_of_articles FROM items 
    WHERE time > UNIX_TIMESTAMP('2022-07-01') and type="story" and who <> '' 
    GROUP BY author ORDER BY number_of_articles DESC LIMIT 20;

すると、カンバンボードには、Hacker Newsの最もアクティブな投稿者上位20人が表示されます。  

このサンプル・アプリケーションは、RetoolとTiDB Cloudでできることのほんの一例に過ぎません。他のRetoolコンポーネントの使い方やアプリケーションへの追加方法については、Retoolのドキュメントをご参照ください。カンバンアプリケーションを他の人と共有したい場合は、カンバンボードの右上にある [Share] をクリックします。アクセスレベルを選択し、適切なフィールドに記入します。

まとめ

このチュートリアルでは、TiDB CloudとRetoolを使ってリアルタイム分析に対応できるカンバンアプリケーションを構築する方法を学びました。皆様がご自身のアプリケーションを構築するきっかけになれば幸いです。

ご質問やご意見がありましたら、Twitter、LinkedIn、またはSlackからお気軽にお問い合わせください。

その他の参考資料：
より良いGitHubインサイトツールを1週間で作る？実話
HTAPの魅力：TiDBとAlloyDBの比較・分析
リアルタイム分析HTAPデータベース構築への長い道のり