ThoughtSpot EverywhereでReactアプリに対話型分析を埋め込む

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 raw

ThoughtSpot Everywhereを使い始める

上記のコードはすべて、このCodeSandboxから入手可能です。また、githubでも入手可能です。SDKはフレームワークに依存しないため、お使いのフレームワークでご利用いただけます。

また、ThoughtSpotが新たにリリースしたDeveloper Playgroundでも、ThoughtSpot Everywhereの全機能をご利用いただけます。