Catalyst Toolsの使い方

このヘルプセクションでは、Catalyst Tools拡張機能を最大限に活用し、VS Code環境内でプロジェクトのさまざまな操作を実行する方法について説明します。

Catalyst Toolsのインストール

拡張機能をインストールするには：

1. VS Codeの拡張機能アイコンをクリックし、「Catalyst Tools」を検索します。
   

2. Installをクリックします。
   

Catalyst Tools拡張機能は、サイドバーのCatalystアイコンをクリックするか、IDEのフッター部分からアクセスできます。

Catalystへのログイン

Catalyst Tools拡張機能の使用を開始するには、まずCatalystアカウントにログインする必要があります。各手順の詳細については、CLIログインのヘルプページを参照してください。

VS Code IDEからCatalystアカウントにログインする手順は以下の通りです：

1. 左パネルのCATALYST CONFIGSセクションにあるLoginボタンをクリックします。
   

2. ログインするDCを選択します。
   

3. デフォルトブラウザで権限ページにリダイレクトされます。
   

4. Acceptをクリックして、Catalystアカウントへのログインを完了し、IDEをCatalystコンソールに接続します。
   

5. ログインが完了します。
   

ウィンドウを閉じて、VS CodeでCatalyst Tools拡張機能を引き続き使用してください。

Catalystプロジェクトの初期化

この拡張機能でプロジェクトを初期化する前に：

• Catalystコンソールでプロジェクトを作成済みであることを確認してください。作成方法はこちらのヘルプセクションで確認できます。

• VS CodeのCatalyst Toolsを使用してCatalystプロジェクトを初期化するためのローカルディレクトリを作成してください。

Function（さまざまなスタックとタイプを含む）をローカル環境で初期化する方法の詳細については、CLIリソースの初期化に関するヘルプドキュメントを参照してください。

Catalyst Tools拡張機能でプロジェクトを初期化するには：

1. Initializeをクリックします。
   

2. リモートアカウントのすべてのCatalystプロジェクトがここに表示されます。VS Code内で初期化するプロジェクトを選択してください。
   

3. 初期化するコンポーネントを選択し、チェックアイコンをクリックします。FunctionsとClientを初期化できます。
   

4. Functionのセットアップ

   • 必要なFunctionタイプを選択します。各タイプの詳細については、Functionsのヘルプページを参照してください。
     

   • プログラミング言語としてJavaまたはNode.jsを選択します。
     

   • 必要な詳細を入力し、Enterをクリックして送信します。
     

   • 作成者のメールアドレスを入力するか、EnterをクリックしてCatalystアカウントの作成に使用したメールアドレスと同じものを使用します。
     

   • 必要な依存関係をインストールする場合は、Yesをクリックします。
     Functionのセットアップが完了しました。

初期化されたAdvanced I/O Functionは、HTTP FUNCTIONSセクションで確認できます。

各Functionスタックの初期化手順の詳細は、こちらのヘルプページで確認できます。

5. Clientのセットアップ

   • 初期化するClientとして、Basic、Angular、またはReact Webクライアントを選択します。
     

   • Client名を入力し、送信アイコンをクリックします。
     

プロジェクトディレクトリには、標準構造のClientおよびFunctionディレクトリが含まれます。設定ファイルとインストールされる依存関係の詳細については、プロジェクトディレクトリ構造のヘルプページを参照してください。

プロジェクトとそのリソースが、Catalyst Tools拡張機能を使用してVS Code IDE内で正常に初期化されました。

プロジェクトの管理

CATALYST CONFIGSセクションを使用して、プロジェクト内のさまざまな操作を実行し、管理できます。以下の操作が可能です：

• Add Functions: プロジェクトディレクトリに新しいHTTPまたはNon-HTTP Functionを追加します。

• Client Setup: プロジェクトディレクトリにClientコンポーネントをセットアップします。

• Serve: デフォルトの3000ポートを使用して、localhostでプロジェクトのFunctionおよびClientリソースの両方をサーブします。

• Deploy: ローカルプロジェクト全体をコンソールにデプロイします。

• Project: プロジェクト情報を表示し、拡張機能に組み込まれた管理コンソールを使用して設定を変更します。

Functionの追加

このオプションを使用して、任意のタイプやスタックの追加Functionをプロジェクトディレクトリに追加できます。プロジェクトの初期化時にFunctionを初期化しなかった場合、このオプションで最初のFunctionを追加することもできます。詳細については、Functionの操作のヘルプページを参照してください。

プロジェクトにHTTPまたはNon-HTTP Functionを追加するには、Add FunctionsオプションをクリックしてFunctionのセットアップを開始します。

こちらのヘルプページのFunctionのセットアップセクションに記載されている手順と同じ手順に従ってください。

このヘルプドキュメントでは、Event Functionを作成しました。これはIDEのNON HTTP Functionsセクションに表示されます。Functionは標準のFunctionディレクトリ構造で作成されます。

Clientのセットアップ

プロジェクトの初期化時にClientを初期化しなかった場合、このオプションを使用してプロジェクトディレクトリにClientコンポーネントをセットアップできます。詳細については、Clientの操作のヘルプページを参照してください。

Clientコンポーネントを初期化するには、Client SetupオプションをクリックしてClientのセットアップを開始します。

こちらのヘルプページに記載されているClientのセットアップセクションの手順に従ってください。

このヘルプドキュメントでは、React Webアプリとして新しいClientコンポーネントを作成しました。これは標準構造で作成されます。

サーブ

Basic I/OおよびAdvanced I/O Function、およびすべてのタイプのClientコンポーネントを、デフォルトポート3000を使用してlocalhostでサーブし、リモートプロジェクトにデプロイする前にテストできます。詳細については、リソースのサーブのヘルプページを参照してください。

プロジェクトのすべてのリソースをローカルでサーブするには：

1. Serveボタンをクリックします。
   

2. お好みのオプションを選択します：
   

   • Yesをクリックすると、すべてのFunctionおよびClientコンポーネントがサーブされます。
     

   • Noをクリックすると、ローカルでサーブする特定のコンポーネントを選択できます。
     選択したコンポーネントがローカルでサーブされます。お好みのブラウザで生成されたURLを使用して、コンポーネントの機能をテストできます。
     

   • 停止アイコンをクリックして、サーブプロセスを終了できます。
     

デプロイ

拡張機能で初期化したすべてのFunctionとClientをリモートコンソールにデプロイできます。これにより、プロジェクトの開発環境で利用可能になります。各プロジェクトリソースのデプロイプロセスの詳細については、リソースのデプロイのヘルプページを参照してください。

プロジェクトをCatalystコンソールにデプロイするには：

1. Deployボタンをクリックします。
   

2. お好みのオプションを選択します：
   

   • Yesをクリックすると、すべてのコンポーネントがデプロイされます。
     

   • Noをクリックすると、デプロイする特定のコンポーネントを選択できます。デプロイするコンポーネントをクリックし、送信アイコンをクリックします。
     

選択したリソースがデプロイされ、拡張機能にアクセス可能なFunctionおよびClientのエンドポイントURLが表示されます。

catalyst.json内からのサーブとデプロイ

catalyst.jsonファイルには、プロジェクト全体のコンポーネントリストと設定が含まれています。Catalyst Toolsを使用すると、catalyst.jsonファイル内からプロジェクト全体または選択したリソースのサーブとデプロイを行うオプションがあります。

プロジェクトリソースをサーブまたはデプロイするには、各プロジェクトリソースの横にあるServeおよびDeployボタンをクリックし、上記のサーブおよびデプロイの手順に従ってください。

Functions

このセクションでは、Catalyst Tools拡張機能のHTTP FUNCTIONSおよびNON HTTP FUNCTIONSセクションで実行できるすべての操作について説明します。

• Run/Debug: Functionをローカルでサーブし、その機能をテストします。また、IDEのデバッガーと同期し、コードを簡単にデバッグできます。

• Deploy: FunctionコンポーネントのみをCatalystコンソールにデプロイします。

• Delete: ローカルプロジェクトからFunctionを永久に削除します。

Functionの実行またはデバッグ

このセクションでは、拡張機能のRun/Debug機能を効果的に使用する手順を説明します。

HTTP FUNCTIONS

HTTP Functionには、HTTPリクエストおよびレスポンス機能を含むことができるBasic I/OおよびAdvanced I/O Functionが含まれます。プロジェクト内のすべてのBasic I/OおよびAdvanced I/O Functionにここからアクセスできます。

HTTP Functionをローカルでテストし、デバッグするには以下の手順に従ってください：

1. HTTP FUNCTIONSセクションのFunctionリストから、作業するFunctionをクリックします。
   

2. Run/Debugオプションをクリックして、Functionをローカルでサーブします。
   

localhostを通じたFunction URLがVS CodeのCatalyst Serve Terminalに生成されます。クリックして機能のテストを開始できます。

3. FunctionのローカルURLをクリックすると、デフォルトブラウザで開きます。IDEもデバッグセクションにリダイレクトされます。

4. 必要に応じて、同時にコードを変更・編集し、変更をライブで確認できます。
   

NON HTTP FUNCTIONS

プロジェクト内のCron Function、Event Function、Integration Functionにここからアクセスできます。これらのFunctionタイプをRun/Debugするには、catalyst-inputs.jsonという名前のJSONファイルを作成する必要があります。このファイルにはJSON値としてのテスト入力が含まれ、対応するFunctionのディレクトリに格納する必要があります。

このヘルプドキュメントでは、shipment-submitという名前のEvent FunctionをRun/Debugします。

このNon-HTTP FunctionをRun/Debugするには、まずshipment-submit Functionディレクトリにcatalyst-inputs.jsonを作成します。

shipment-submit Event Functionのcatalyst-inputs.jsonファイルに追加するサンプルJSONコードを以下に示します：

{
    "cache_put": {
        "project_details": {
            "id": "1434000000473001",
            "project_name": "ShipmentTracking"
        },
        "event_bus_details": {
            "name": "Default",
            "id": "1434000000473009"
        },
        "data": {
            "cache_name": "3b793",
            "cache_value": "0b3c97a93a",
            "project_details": {
                "id": "1434000000473001",
                "project_name": "Tunneling"
            },
            "segment_details": {
                "segment_name": "Default",
                "project_details": {
                    "project_name": "Tunneling",
                    "id": "1434000000473001",
                    "project_type": "Live"
                },
                "id": "1434000000473037"
            },
            "expiry_in_hours": 48,
            "expires_in": "Apr 28, 2023 03:13 PM"
        },
        "current_project": {
            "id": "1434000000473001",
            "project_name": "Tunneling"
        },
        "action": "Put",
        "source_entity_id": "1434000000473037",
        "source": "Cache",
        "event_time": 1682502183500
    },
    "datastore_insert": {
        "project_details": {
            "id": "1434000000473001",
            "project_name": "Tunneling"
        },
        "event_bus_details": {
            "name": "Default",
            "id": "1434000000473009"
        },
        "data": [
            {
                "ROWID": "345460658792283",
                "CREATORID": "979726486268217",
                "CREATEDTIME": "2023-04-26 15:14:06",
                "MODIFIEDTIME": "2023-04-26 15:14:06"
            }
        ],
        "current_project": {
            "id": "1434000000473001",
            "project_name": "Tunneling"
        },
        "action": "Insert",
        "source_entity_id": "817140351651431",
        "source": "Datastore",
        "event_time": 1682502245961
}
}

この入力ファイルは、Defaultイベントリスナーで発生するCache PUTおよびData Store INSERT操作からのサンプルイベントデータを渡します。イベントデータはshipment-submit Functionに渡されます。

shipment-submit Functionディレクトリには以下のファイルが含まれます：

次に、以下の手順に従ってFunctionをローカルでテストし、必要に応じてデバッグしてください：

1. NON HTTP FUNCTIONSセクションのFunctionリストから、作業するFunctionをクリックします。
   

2. Run/Debugオプションをクリックして、Functionをローカルでサーブします。
   

3. Functionをサーブする入力キーをクリックします。
   

4. VS CodeでCatalyst Serve Terminalが開きます。FunctionがWebソケットでサーブされていることを確認できます。Functionをテストできます。IDEのデバッガーにもアクセスできます。
   

5. 必要に応じてFunctionのコードを変更でき、サーブプロセス中に反映されます。
   IDEの下部にあるコンソールの削除アイコンをクリックして、Catalyst Serve Terminalを終了することもできます。
   

上記の例ではEvent Functionを使用しましたが、CronおよびIntegration Functionのテスト用のcatalyst-inputs.jsonファイルの例を以下に示します：

Cron Function用のcatalyst-inputs.jsonサンプルファイル：

{
    "cron_input": {
        "param": "value"
    }
}

Integration Function用のcatalyst-inputs.jsonサンプルファイル：

{
    "bot_welcome": {
        "name": "Sample",
        "unique_name": "sample_uniq",
        "handler": {
            "type": "welcome_handler"
        },
        "response_url": "https://cliq.zoho.com/v2/extensions/2980/responses/17202823900615741410013820",
        "type": "bot",
        "timestamp": 1569520690703,
        "params": {
            "environment": {
                "data_center": "us"
            },
            "access": {
                "user_id": "651652091",
                "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:69.0) Gecko/20100101 Firefox/69.0",
                "chat_id": "CT_2243226337559778047_661211447-B2"
            },
            "user": {
                "country": "us",
                "timezone": "Asia/calcutta",
                "last_name": "Fisher",
                "first_name": "Scott",
                "language": "en",
                "id": "123456",
                "email": "scott.fisher@zylcal.com",
                "admin": true,
                "organization_id": "123456456"
            },
            "newuser": true,
            "mentions": [],
            "options": {},
            "selections": [],
            "arguments": ""
        }
    }
}

Functionのデプロイ

FunctionをCatalystコンソールにデプロイするには、以下の手順に従ってください：

1. HTTP FUNCTIONSまたはNON HTTP FUNCTIONSセクションのFunctionリストから、デプロイするFunctionをクリックし、Deployをクリックします。
   

2. Yesをクリックして確認します。
   

Functionがコンソールにデプロイされ、VS Code IDEのCatalyst Deploy TerminalにFunctionのデプロイメントURLが生成されます。

Functionは、Catalyst Serverless内のFunctionsコンポーネントからコンソールでアクセスできます。

Functionの削除

Catalyst Toolsを使用してローカルプロジェクトからFunctionを削除するには、以下の手順に従ってください：

1. HTTP FUNCTIONSまたはNON HTTP FUNCTIONSセクションのFunctionリストから、削除するFunctionをクリックし、Deleteをクリックします。
   

2. Yesをクリックして続行します。
   

Functionとそのディレクトリ内のすべてのファイルがローカルプロジェクトから削除されます。

Client

Catalyst Tools拡張機能のClientセクションでは、Clientコンポーネントに対して以下の操作を実行できます：

• Clientリソースのみをサーブし、その機能をテストします。
• ClientリソースのみをデプロイしてCatalystコンソールに反映します。
• ローカルプロジェクトからClientコンポーネントを削除します。

サーブ操作

Catalyst Tools拡張機能を使用してClientコンポーネントのみをlocalhost:3000でサーブするには、以下の手順に従ってください：

1. 拡張機能のCLIENTセクションに移動し、Serveをクリックします。
   

Clientコンポーネントがローカルでサーブされ、Catalyst Serve TerminalにClientコンポーネントのローカルエンドポイントURLが生成されます。URLをクリックすると、デフォルトのWebブラウザでWebクライアントにアクセスできます。

2. 停止アイコンボタンをクリックして、サーブプロセスを終了できます。
   IDEの下部にあるコンソールの削除アイコンをクリックして、Catalyst Serve Terminalを終了することもできます。

デプロイ操作

Catalyst Tools拡張機能を使用してClientコンポーネントのみをCatalystコンソールにデプロイするには、以下の手順に従ってください：

1. 拡張機能のCLIENTセクションに移動し、Deployをクリックします。
   

2. Yesをクリックしてデプロイ操作を続行します。
   Clientコンポーネントがデプロイされ、VS Code内のCatalyst Deploy TerminalにClientコンポーネントのデプロイメントURLが生成されます。URLをクリックすると、デフォルトのWebブラウザでClientにアクセスできます。
   

IDEの下部にあるコンソールの削除アイコンをクリックして、Catalyst Deploy Terminalを終了することもできます。

削除操作

Catalyst Toolsを使用してローカルプロジェクトからClientコンポーネントを削除するには、以下の手順に従ってください：

1. CLIENTセクションに移動し、Deleteをクリックします。
   

2. Yesをクリックして続行します。
   

Clientコンポーネントがローカルプロジェクトから削除されます。