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

はじめに

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

クライアントアプリケーションは以下のように表示されます：

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

• Basic ウェブアプリ
• React ウェブアプリ
• Angular ウェブアプリ

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

Catalyst Serverless:

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

Catalyst Cloud Scale:

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

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

このアプリケーションの構築には、CatalystウェブコンソールとCatalyst Command Line Interface（CLI）を使用します。

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

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

To-Doリストアプリケーションの動作は以下のとおりです：

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