ThoughtSpotは、検索とAIによってビジネスユーザーが分析を利用する方法に革命をもたらしました。ThoughtSpotはビジネスユーザーにとってかつてないほど手軽で汎用的な分析ツールですが、製品の開発者もThoughtSpotを使って検索ベースの分析をユーザーに提供できるようになりました。
本日、ThoughtSpotは新しいSDKをリリースします。このSDKでは、ThoughtSpotをWebアプリケーションにほんの数分で埋め込むことができます。 ここではReact + Typescriptで構築されたアプリを使ってこのSDKの仕組みを説明しますが、実際にはどのフレームワークを使用していただいても構いません。
1. Reactアプリを作成する
まず、create-react-appを使用するか、上図のようにReact + Typescript CodeSandboxを使用してシンプルなReactアプリを作成します。
$ npx create-react-app my-app
2. ThoughtSpot Visual Embed SDKをインストールする
新しいThoughtSpot Visual Embed SDKを利用すると、埋め込みの検索やビジュアライゼーションコンポーネントを制御できます。
$ npm i @thoughtspot/visual-embed-sdk
3. 埋め込みSDKを初期設定する
埋め込みSDKはThoughtSpotインスタンスを指している必要があります。この例では、ThoughtSpotの公開デモインスタンスを銀行のサンプルデータセットに使用します。このサンプルデータは、Developer Portalから入手することもできます。独自のデータで試したい場合は、無料トライアルにご登録ください。
import { init, AuthType } from "@thoughtspot/visual-embed-sdk";
init({
thoughtSpotHost: "https://try-everywhere.thoughtspot.cloud", // Your instance here.
authType: AuthType.None // Your Auth scheme, SAML or AuthToken
});
export const App = ...
なお、公開デモインスタンスはオープンで権限が不要なため、ここではAuthType.Noneを使用しています。その他のTSE認証機能については、開発者ガイドをご覧ください。
4. 検索コンポーネントを作成する
ThoughtSpot検索コンポーネントを格納するシンプルなラッパーを作成します。SDKによりThoughtSpotが初期設定され、指定したコンポーネントに埋め込まれます。
import { SearchEmbed } from "@thoughtspot/visual-embed-sdk";
export const Search = () => {
...
React.useEffect(() => {
const tsSearch = new SearchEmbed("#tse" /* The DOM element reference */, {
hideDataSources: true
// Other Options go here.
});
tsSearch.render();
}, []);
return <div id="tse" />
}
オプションのリストについては、検索のAPIリファレンスをご覧ください。
これでThoughtSpotがアプリに埋め込まれました。
5. ユーザーのアプリ体験をカスタマイズする
ThoughtSpot Everywhereはイベントを発行し、アプリはそれを利用してユーザーに体験を提供します。
以下にシンプルなユースケースを示します。ここでは、ThoughtSpotコンポーネントのロード中に、ユーザーに対してスピナー（回転する円状のマーク）を表示する方法を説明します。
import { SearchEmbed, EmbedEvent } from "@thoughtspot/visual-embed-sdk";
...
React.useEffect(() => {
...
tsSearch
.on(EmbedEvent.Init, () => setIsLoading(true)) // Listen to `init` event.
.on(EmbedEvent.Load, () => setIsLoading(false)) // Listen to 'load` event.
.render();
}, []);
...
ThoughtSpot Everywhere埋め込みオブジェクトから出されるイベントのリストについては、こちらをご覧ください。
6. カスタムアクションをトリガーする
ThoughtSpot Everywhereの最も優れた機能の1つは、インサイトをThoughtSpotからアプリにプッシュできることです。これを可能にする方法の1つに、カスタムアクションの作成があります。作成したアクションをユーザーがクリックすると、分析データを含むコールバックがアプリに呼び出されます。
これにより、ユーザーはデータをサードパーティーのツールに送り、インサイトに基づくアクションを実行できます。
import { SearchEmbed, EmbedEvent } from "@thoughtspot/visual-embed-sdk";
...
React.useEffect(() => {
...
tsSearch
.on(EmbedEvent.CustomAction, (payload: any) => {
const data = payload.data;
if(data.id === 'send-email') {
sendEmail(data); // Call your own method here.
}
})
.render();
}, []);
...
view rawThoughtSpot Everywhereを使い始める
上記のコードはすべて、このCodeSandboxから入手可能です。また、githubでも入手可能です。SDKはフレームワークに依存しないため、お使いのフレームワークでご利用いただけます。
また、ThoughtSpotが新たにリリースしたDeveloper Playgroundでも、ThoughtSpot Everywhereの全機能をご利用いただけます。
