To-Do Listアプリケーション

はじめに

このチュートリアルでは、CatalystでシンプルなシングルページのTo-DoリストWebアプリケーションを構築する方法を説明します。このアプリケーションにより、ユーザーはやるべきタスクを記録し、完了後に削除することができます。

クライアントアプリケーションは以下のようになります：

各タイプの動作するアプリケーションにアクセスし、その機能をテストできます：

• Basic web app
• React web app
• Angular web app

To-Doリストアプリケーションは、以下のCatalystコンポーネントを利用しています：

1. Catalyst Serverless:

   • Advanced I/O Function: Advanced I/Oファンクションは、Java、Node.js、またはPythonプログラミング環境でコーディングできます。ユーザーがリストアイテムを作成、表示、削除するためのAPIが含まれています。

2. Catalyst Cloud Scale:

   • Data Store: To-Doリストアイテムをテーブルに保存します。
   • ZCQL: クエリを通じてData Storeからデータを取得します。
   • Client: ウェブクライアントホスティングを通じてCatalystでホストされるアプリケーションのフロントエンドです。ウェブクライアントは、基本的なCatalystウェブアプリ、Angularアプリ、またはReactアプリとして初期化できます。

このチュートリアルでは、3種類すべてのウェブクライアントの手順を説明します。AngularおよびReactアプリを簡単に構築、テスト、デプロイするために、Catalystが提供するネイティブプラグインを使用します。

このアプリケーションの構築には、CatalystウェブコンソールとCatalystコマンドラインインターフェース（CLI）を使用します。

このチュートリアルでは、ファンクションおよびクライアントコンポーネントに含めるファイルのコードが提供されます。ここに記載されたコードをコピーし、指示に従って適切なファイルに貼り付けるだけです。

アプリケーションアーキテクチャ

To-Doリストアプリケーションの動作は以下のように説明できます：

• ノートの追加: ユーザーがクライアントアプリケーションでノートを入力し、To-Doリストアイテムとして追加します。クライアントコンポーネントがServerless Advanced I/Oファンクションをトリガーします。ファンクションは、HTTP POSTリクエストを使用して、Cloud Scale Data Storeのテーブルにレコードとしてノートを保存します。対応するレスポンス（ノート）が既存のTo-Doリストに追加されます。

• ノートの表示: ユーザーがアプリケーションを開くと、クライアントコンポーネントがAdvanced I/Oファンクションをトリガーし、HTTP GETリクエストを使用してData Storeから既存のTo-Doリストアイテムを取得します。このリストがユーザーに表示されます。

• ノートの削除: ユーザーがクライアントアプリケーションでノートをクリックすると、HTTP DELETEリクエストがトリガーされます。Data Storeから対応するレコードが削除され、クライアントからもノートが削除されます。更新されたTo-Doリストがクライアントに表示されます。