Appsmith で Typeform 連携アプリケーションを作成
Appsmith は、チームがビジネスオペレーションを改善するためのUI を素早く簡単に構築できる、オープンソースの内部ツールビルダーです。CData Connect AI と組み合わせることで、ビジネスアプリケーションから Typeform のデータ に即座にアクセスできるようになります。この記事では、Connect AI を使用して Typeform に接続し、Appsmith で Typeform のデータ から基本的なアプリケーションを作成するプロセスを説明します。
CData Connect AI は、Typeform を含む数百のデータソースをSQL Server 互換エンドポイントとして公開するクラウドサービスです。Appsmith からは通常のSQL Server と同じ手順で接続でき、レプリケーション不要でライブのTypeform のデータを利用できます。
Appsmith 用に Typeform への接続を構成
Appsmith から Typeform への接続は、CData Connect AI を介して行います。Appsmith から Typeform のデータ を操作するには、まず Typeform 接続を作成して構成します。
- Connect AI にログインし、Sources をクリックして、 Add Connection をクリックします
- Add Connection パネルから「Typeform」を選択します
-
Typeform に接続するために必要な認証プロパティを入力します。
まず、Profile 接続プロパティにTypeForm プロファイルのディスク上の場所を設定します（例：C:\profiles\TypeForm.apip）。次に、ProfileSettings 接続プロパティにTypeForm の接続文字列を設定します（以下を参照）。
TypeForm API プロファイル設定
TypeForm への認証にはOAuth 標準を使用します。
TypeForm に認証するには、まずTypeForm でOAuth アプリケーションを登録および設定する必要があります：https://admin.typeform.com/account#/section/tokens。アプリにはclient ID とclient secret が割り当てられ、接続文字列で設定できます。OAuth アプリケーションの設定の詳細については、https://developer.typeform.com/get-started/ をご参照ください。
使用シナリオによって異なるリダイレクトURI が必要です：
- CData デスクトップアプリケーション：CData デスクトップアプリケーション（Sync、API Server、ArcESB）は/src/oauthCallback.rst でOAuth トークンを受け入れます。ホストとポートはアプリケーションが使用するデフォルトポートと同じです。例えば、http://localhost:8019/ でCData Sync にアクセスする場合、リダイレクトURI はhttp://localhost:8019/src/oauthCallback.rst になります。
- CData クラウドアプリケーション：CData クラウドアプリケーションはデスクトップ版と同様です。https://1.2.3.4/ でConnect AI にアクセスする場合、リダイレクトはhttps://1.2.3.4/src/oauthCallback.rst を使用します。
- デスクトップアプリケーション：デスクトップアプリケーションを使用する場合、URI はhttps://localhost:33333 を推奨します。
- Web アプリケーション：ドライバーを使用してWeb アプリケーションを開発する場合、https://my-website.com/oauth のような独自のURI を使用します。
以下の接続プロパティを設定すると、接続の準備が整います：
- AuthScheme：OAuth に設定します。
- InitiateOAuth：GETANDREFRESH に設定します。InitiateOAuth を使用してOAuthAccessToken を取得するプロセスを管理できます。
- OAuthClientId：アプリ設定で指定されているClient Id を設定します。
- OAuthClientSecret：アプリ設定で指定されているClient Secret を設定します。
- CallbackURL：アプリ設定で指定したRedirect URI を設定します。
- Save & Test をクリックします
-
Add Typeform Connection ページのPermissions タブに移動し、User-based permissions を更新します。
パーソナルアクセストークンの追加
REST API、OData API、またはVirtual SQL Server を介してConnect AI に接続する場合、パーソナルアクセストークン（PAT）を使用してConnect AI への接続を認証します。アクセスの粒度を維持するために、サービスごとに個別のPAT を作成することをお勧めします。
- Connect AI アプリの右上にある歯車アイコン（）をクリックして、設定ページを開きます。
- 設定ページで、Access Tokens セクションに移動し、 Create PAT をクリックします。
-
PAT に名前を付けて、Create をクリックします。
- パーソナルアクセストークンは作成時にのみ表示されるため、必ずコピーして安全な場所に保存してください。
接続が構成され、PAT が生成されたので、Appsmith から Typeform のデータ に接続する準備が整いました。
ライブ Typeform のデータ からAppsmith アプリケーションを作成
Appsmith からCData Connect AI Virtual SQL Server への接続を確立するには、以下の手順に従います。
Appsmith で Typeform に接続
- Appsmith インスタンスにログインし、新しいアプリケーションを作成します。
-
新しいアプリケーションで、Data ページを開き、Bring your data を選択します。
-
このページで、Microsoft SQL Server を検索し、データソースとして選択します。
-
新しいデータソースの名前を入力し、以下の接続設定を入力します。
- Host address: tds.cdata.com
- Port: 14333
- Database name: 接続するCData Connect AI データソースの接続名を入力します（例：API1）。
- Username: CData Connect AI のユーザー名を入力します。これはCData Connect AI インターフェースの右上に表示されます。例：[email protected]。
- Password: 先ほど生成したPAT を入力します。
- Test configuration をクリックして接続が成功したことを確認し、Save をクリックしてデータソースを保存します。
新しいクエリを作成
データソースへの接続を構成したら、SQL クエリを追加してデータソースから実際にデータを取得します。
-
新しいデータソースの画面で、New Query をクリックします。
-
クエリエディタが開き、データを選択するSQL クエリを入力できます。SQL クエリの指定については、CData Connect AI のExplorer を使用して、SQL クエリと取得するデータをプレビューできます。
-
SQL クエリを作成したら、Appsmith のクエリエディタに戻り、SQL クエリを入力してRun をクリックします。
- クエリが正常に実行されたら、あとは取得したデータを表示するためのページをセットアップするだけです。
Typeform のデータ を表示
-
UI タブを開き、New UI element をクリックします。
-
新しいUI 要素を選択し、ページ上にドラッグアンドドロップします。
-
新しいUI 要素でConnect data をクリックし、先ほど作成したクエリを選択します。
-
データが接続されると、UI 要素にデータが表示されます。
アプリケーションをデプロイ
Typeform のデータ がアプリケーションのUI 要素に接続されたら、アプリケーションをデプロイできます。Appsmith の右上にあるDeploy をクリックすると、Typeform のデータ を表示するアプリケーションが別ウィンドウで開きます。
CData Connect AI の入手
クラウドアプリケーションから数百種類のSaaS、ビッグデータ、NoSQL ソースへのリアルタイムデータアクセスを実現するには、CData Connect AI をお試しください。