Task Managerアプリ

はじめに

このチュートリアルでは、Task ManagerというReact Webアプリケーションの構築方法を解説します。このアプリケーションでは、以下の機能を実行できます：

• タスクの作成
• 作成した各タスクへのステータスの割り当て
• タスクのフィルタリング
• 作成済みタスクの更新
• 不要になったタスクの削除

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

このアプリケーションのロジックは、以下のCatalystサービスおよびそのコンポーネントを使用してコーディングされています：

1. Catalyst Serverless：

   • Advanced IO Function：Node.js環境でアプリケーションのバックエンドロジックをコーディングします。

2. Catalyst CloudScale：

   • NoSQL：JSONまたはJSON配列として渡される非構造化データまたは半構造化データを格納します。
   • Web Client Hosting：アプリケーションのフロントエンドをReact Webアプリとしてホスティングします。

Catalyst WebコンソールとCatalyst Command Line Interface（CLI）を使用してアプリケーションを構築します。

主要コンセプト

アプリケーションの構築に入る前に、以下のNoSQLテーブルキーについて理解しておくことが重要です：

• Partition Key：このキーは必須属性であり、分散NoSQLテーブル内でデータがどのように、どこに格納されるかを定義します。

• Sort Key：このキーは通常オプションの属性であり、同じPartition Keyを共有する必要なデータを参照する際に役立ちます。

たとえば、果物に関するデータを含むNoSQLテーブルがある場合、果物自体がPartition Keyとなり、その特定の品種がSort Keyとなります。

アプリケーションワークフロー

アプリケーションのワークフローは以下の通りです：

• クライアントに表示される入力フィールドに値を入力してタスクを作成します。UserIDがPartition Keyとして、Task NameがSort Keyとして機能します。

• タスクが作成されると、非構造化データがNoSQLストレージコンポーネントに格納されます。

• 作成済みタスクをフィルタリングでき、UserID（Partition Key）とTask Name（Sort Key）を使用して必要なタスクが参照されます。

• 作成済みタスクに対してEditおよびDelete操作を実行することもできます。データの変更はNoSQLコンポーネントに反映されます。

• 最後に、ReactアプリケーションはWeb Client Hostingコンポーネントを使用してCatalyst上にホスティングされます。