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

はじめに

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

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

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

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

To-Doリストアプリケーションには、以下の基本的なCatalystコンポーネントが含まれています：

Catalyst Serverless:

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

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リストアイテムとして追加します。クライアントコンポーネントがAdvanced I/Oファンクションをトリガーします。ファンクションは、HTTP POSTリクエストを使用して、Catalyst Data Storeのテーブルにレコードとしてノートを保存します。対応するレスポンス（ノート）が既存のTo-Doリストに追加されます。
• ノートの表示: ユーザーがアプリケーションを開くと、クライアントコンポーネントがAdvanced I/Oファンクションをトリガーし、HTTP GETリクエストを使用してCatalyst Data Storeから既存のTo-Doリストアイテムを取得します。このリストがユーザーに表示されます。
• ノートの削除: ユーザーがクライアントアプリケーションでノートをクリックすると、HTTP DELETEリクエストがトリガーされます。Data Storeから対応するレコードが削除され、クライアントからもノートが削除されます。更新されたTo-Doリストがクライアントに表示されます。