SDK組み込みツアー
Anyflow SDKをプロダクトに組み込む手順について
完成イメージ
トライアルツアーで使用したウィザードホスティングのページを例として取り上げます。
画面の構成や要件はあくまでも一例です。このページで紹介していないメソッドもSDKドキュメントには存在するため、状況に応じて利用してください。
連携ソリューション一覧画面（例）
要件
連携ソリューション一覧にはデプロイされたソリューションの一覧が表示される
各ソリューションの「連携する」ボタンを押すとウィザードが立ち上がる
既に連携を設定済の場合は「連携する」ボタンではなく「連携設定済み」ボタンを表示する
設定済み連携一覧画面（例）
要件
設定済のソリューションの一覧が表示される
最終実行日が表示される
「実行履歴」ボタンを押すとそのソリューションの実行履歴を表示できる
トリガーがClickトリガーまたはMy Eventトリガーの場合は手動実行できる
ソリューションの有効状態を切り替えられる
以下の手順で、組み込み例を再現することができます。
1. 初期設定
1-1. インストール
まずは次のコマンドを実行しSDKをインストールします。
npm install @anyflowinc/embed-sdk1-2. JWTの生成
step3で使うものです。 Anyflow Embedでは、JWTを使用してベンダープロダクトとデータのやりとりを行います。
JWT生成の大まかなステップ
ウィザードを埋め込むサイトのオリジン（URL）の共有
JWTペイロードの内容検討
公開鍵と秘密鍵の生成
Anyflow管理画面より公開鍵の登録
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メソッドを使用します。
// 特定のソリューションの情報のみ取得する
const solution = await sdk.getSolution("solution_id");
// リストで取得する
const solutions = 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ドキュメント）
const state = solution.state;not_installed
まだソリューションがインストールされていません。
enabled
ソリューションが有効です。
disabled
ソリューションはインストールされていますが、有効にされていません。
今回の例では、not_installed の場合はインストール前と判断し、UIでは「連携する」ボタンを表示します。
enabled と disabled の場合はインストール後と判断し、UIでは「連携設定済み」ボタンを表示します。
2-3. ボタンを押したらウィザードを立ち上げる
連携ボタンを押したとき、認証や連携の設定を行う「ウィザード」を立ち上げるにはcreateWizard メソッドを使用しウィザードのインスタンスを生成したうえで、そこにloadメソッドで指定のソリューションを読み込みます。
const iframe = document.getElementById("solution_wizard");
const 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メソッドと画面要素の関係
最終更新