Web SDK

概要

Catalyst Web SDKには、クライアントWebアプリケーションからCatalystコンポーネントにアクセスするためのJavaScriptメソッドが含まれています。

前提条件

• Catalyst CLI（CLIのインストールを参照）
• Catalystプロジェクト（Catalystプロジェクトを参照）
• 任意のテキストエディタ（XcodeまたはSublime）

認証

Catalystは、Catalyst REST APIおよびSDKにアクセスするための簡単な認証メカニズムを提供しています。クライアントアプリケーションからCatalystコンポーネントを使用するには、Catalystが提供する認証メカニズムを統合することが必須です。

SDKの初期化

以下のコードスニペットをアプリケーションに含めることで、Catalyst認証をアプリケーションに統合できます。このスクリプトにより、Catalyst Web SDKのJavaScriptメソッドにアクセスできるようになります。

これにより、Web SDKが初期化され、init.jsファイルが参照されます。このファイルは、プロジェクトの一意のIDであるProject IDや、プロジェクトのキーであるZAIDなど、プロジェクトの基本情報を自動的に設定します。

これらの値は、作業中の環境に基づいて自動的に設定されます。つまり、このスクリプトがアプリの開発環境URLから呼び出された場合、適切なZAID値が設定されます。

<script src="https://static.zohocdn.com/catalyst/sdk/js/4.0.0/catalystWebSDK.js"></script>
<script src="/__catalyst/sdk/init.js"></script>
<script>
catalyst.auth.signIn("your element id here....");
</script>

このコードスニペットを使用して、アプリケーションのサインインフォームをiFrameとして構築できます。ただし、このコードスニペットをすべてのページに追加する必要があります。catalystオブジェクトのスコープは単一ページに限定されているため、この初期化スクリプトはすべてのページで必要です。

コードにはcatalyst.auth.signIn(“Your elementID here”);という行が含まれています。elementIDは、アプリケーションのログインページ内の任意のHTML要素またはdiv要素のIDを指定できます。これをアプリケーションのelementIDに置き換え、ユーザーログインを含むページに実装してください。

同じページ内でiFrame用のdivisionを次のように作成できます：<div id=“Your elementID here”> </div>。これにより、同じページ内にユーザーログイン用のiFrameが展開されます。

たとえば、elementIDが「login」の場合、コードは次のようになります：

• Web SDK初期化スクリプト内：catalyst.auth.signIn(“login”);
• ページのbody内：<div id=“login”></div>

環境変数の管理

以下のCatalystメソッドを使用して、コードから環境変数を管理できます：

• 環境変数をsetする場合：

catalyst.setCatalystEnv(keyName,value)

• 環境変数をgetする場合：

catalyst.getCatalystEnv(key)

• 環境変数をdeleteする場合：

catalyst.deleteCatalystEnv(key)

インスタンスオブジェクト

不要な場合にAPIアクセスを最小限に抑えることは常に効果的です。実際にAPIを呼び出すのではなく、コード内でコンポーネントを参照し、後続のアクセスに使用するためのAPI参照が必要な場合、Catalyst WebSDKはその機能を提供します。

たとえば、以下のコードは特定のファイルコンポーネントを参照する際にAPI呼び出しを実行しません。

catalyst.file.folderId(folder_id).fileId(file_id);

ただし、以下のコードは選択したフォルダからファイルを削除するためにAPI呼び出しを実際に実行します。

catalyst.file.folderId(folder_id).fileId(file_id).delete();

レスポンスと例外

すべてのレスポンスは、データ、ステータスコード、およびステータスメッセージを含むJSONオブジェクトとして返されます。開発者はこれらのオブジェクトからレスポンスを簡単に追跡できます。

例外

アプリケーション出力の不正な動作は、例外またはエラーと呼ばれます。Catalyst Web SDKは、appET, ServerET,およびDeveloperET.と呼ばれる3種類のエラーをスローします。これらのエラーは、不正な動作がアプリケーションコード、サーバーエラー、またはその他の原因によるものかを定義します。

クライアントアプリケーションのコーディング

1. システムのターミナルを開き、空のリソースディレクトリを作成します。

2. Catalystを初期化し、clientオプションを選択します。

3. クライアントアプリケーションをデプロイするために、作成したプロジェクトを選択します。

4. 以下のようにボイラープレートのクライアントコードが生成されます。

5. テキストエディタで開くと、以下のような構成になっています。

以下の表は、リソースディレクトリ内のファイルとその目的の一覧です。

client-package.jsonの構造

{ 
"name": "SampleApp", 
"version": "1.0.0", 
"description": "This is my sample app", 
"homepage": "index.html", 
"login_redirect":"home.html" 
}

以下はclient-package.jsonの属性です：

Clientフォルダ内の適切なファイルに、WebアプリケーションのUI要素、JavaScriptファイル、およびCSSをコーディングできます。

クライアントアプリケーションのデプロイ

Catalyst CLIを使用してクライアントアプリケーションをデプロイできます。詳細については、リソースのデプロイヘルプページを参照してください。

1. システムのターミナルを開きます。
2. プロジェクトのホームロケーションから、以下のコマンドを使用してクライアントアプリをデプロイします：

デプロイが完了すると、クライアントアプリケーションにアクセスするためのURLエンドポイントが取得できます。