SDK組み込みツアー

Anyflow SDKをプロダクトに組み込む手順について

完成イメージ

トライアルツアーで使用したウィザードホスティングのページを例として取り上げます。

画面の構成や要件はあくまでも一例です。このページで紹介していないメソッドもSDKドキュメントには存在するため、状況に応じて利用してください。

連携ソリューション一覧画面（例）

要件

• 連携ソリューション一覧にはデプロイされたソリューションの一覧が表示される

• 各ソリューションの「連携する」ボタンを押すとウィザードが立ち上がる

• 既に連携を設定済の場合は「連携する」ボタンではなく「連携設定済み」ボタンを表示する

設定済み連携一覧画面（例）

要件

• 設定済のソリューションの一覧が表示される

• 最終実行日が表示される

• 「実行履歴」ボタンを押すとそのソリューションの実行履歴を表示できる

• トリガーがClickトリガーまたはMy Eventトリガーの場合は手動実行できる

• ソリューションの有効状態を切り替えられる

以下の手順で、組み込み例を再現することができます。

1. 初期設定

1-1. インストール

まずは次のコマンドを実行しSDKをインストールします。

npm install @anyflowinc/embed-sdk

1-2. JWTの生成

step3で使うものです。 Anyflow Embedでは、JWTを使用してベンダープロダクトとデータのやりとりを行います。

JWT生成の大まかなステップ

1. ウィザードを埋め込むサイトのオリジン（URL）の共有

2. JWTペイロードの内容検討

3. 公開鍵と秘密鍵の生成

4. JWT生成処理の実装

1-3. SDKの初期化

step2で作成したJWT生成の関数をSDKのinit関数に渡すとSDKを初期化できます。

const fetchJwt = async () => {
  const res = await fetch("./path/to/your/jwt/endpoint");
  const json = await res.json();
  return json["token"];
};

AnyflowSDK.init(fetchJwt);

初期化後はinstance関数を使いSDKインスタンスを取得します。

const sdk = AnyflowSDK.instance;

2. 連携ソリューション一覧画面の実装

2-1. ソリューションの一覧を取得する

ソリューション一覧

ソリューションの一覧情報を取得するにはSDKのgetSolutionメソッドを使用します。

JavaScript

// 特定のソリューションの情報のみ取得する
const solution = await sdk.getSolution("solution_id");

// リストで取得する
const solutions = await sdk.getSolutions();

TypeScript

// 特定のソリューションの情報のみ取得する
const solution: Solution = await sdk.getSolution("solution_id");

// リストで取得する
const solutions: Solution[] = await sdk.getSolutions();

以下の様な情報を取得できます。

[{
    "id": "string",
    "name": "string",
    "description": "string",
    "state": "string",
    "runnable": "boolean",
    "thumbnail_url": "string",
    "created_at": "string (ISO 8601 format)",
    "updated_at": "string (ISO 8601 format)",
    "latestJob": {},
}]

2-2. ソリューションのインストール状態を取得する

左：インストール前　右：インストール後

ソリューションがインストール済みかどうかは Solutionオブジェクトの stateプロパティから取得できます。（SDKドキュメント）

JavaScript

const state = solution.state;

TypeScript

const state: SolutionState = solution.state;

state	説明
not_installed	まだソリューションがインストールされていません。
enabled	ソリューションが有効です。
disabled	ソリューションはインストールされていますが、有効にされていません。

今回の例では、not_installed の場合はインストール前と判断し、UIでは「連携する」ボタンを表示します。

enabled と disabled の場合はインストール後と判断し、UIでは「連携設定済み」ボタンを表示します。

2-3. ボタンを押したらウィザードを立ち上げる

ウィザード

連携ボタンを押したとき、認証や連携の設定を行う「ウィザード」を立ち上げるにはcreateWizard メソッドを使用しウィザードのインスタンスを生成したうえで、そこにloadメソッドで指定のソリューションを読み込みます。

JavaScript

const iframe = document.getElementById("solution_wizard");
const solutionWizard = sdk.createWizard(iframe);
solutionWizard.load("your_solution_id");

TypeScript

const iframe = document.getElementById("solution_wizard");
const solutionWizard: SolutionWizard = sdk.createWizard(iframe);
solutionWizard.load("your_solution_id");

3. 設定済み連携一覧画面の実装

3-1. 設定済み連携の一覧を取得する

設定済み連携一覧

設定済みの連携一覧は、step 2-1, 2-2と同様にgetSolutionメソッドを使い、stateプロパティが enabled または disabled のソリューションのみを抽出することで得られます。

getSolutionメソッドで得られたSolutionオブジェクトのlatestJobプロパティから最終実行日時の情報にアクセスできます。

[{
    "id": "string",
    "name": "string",
    "description": "string",
    "state": "string",
    "runnable": "boolean",
    "thumbnail_url": "string",
    "created_at": "string (ISO 8601 format)",
    "updated_at": "string (ISO 8601 format)",
    "latestJob": {
        "id": "string",
        "state": "string",
        "archived": "boolean",
        "logs": ["array of strings"],
        "startedAt": "string (ISO 8601 format)",
        "finishedAt": "string (ISO 8601 format)"
    },
}]

3-3. 手動実行の場合に実行ボタンを表示する

getSolutionメソッドで得られたSolutionオブジェクトのrunnableがTrueの場合、そのソリューションは手動実行することが可能です。

必要に応じて実行ボタンを表示してください。（ClickトリガーまたはMy Eventトリガーの場合、手動実行が可能です）

Clickトリガーの場合、ソリューションを実行するには SDK の runSolutionメソッドを実行します。

const job = await sdk.runSolution("your_solution_id");

My Eventトリガーの場合、ソリューションを手動実行するには SDK の sendMyEventメソッドを実行します。

3-4. ソリューションの有効状態を切り替える

ソリューションを有効/無効を切り替えるには sdk のenableSolution/disableSolutionメソッドを、無効にするにはdisableSolutionソッドを実行します。

// 有効にする
await sdk.enableSolution("your_solution_id");

// 無効にする
await sdk.disableSolution("your_solution_id");

3-5. 実行履歴を表示する

SolutionWizard オブジェクトの loadHistory メソッドを使用します。 loadHistory メソッドには実行履歴を確認したいソリューションの ID を指定します。（SDKドキュメント）

solutionWizard.loadHistory("your_solution_id");

参考：SDKメソッドと画面要素の関係

SDKメソッドと画面要素の関係