Axios と CData Connect AI で JSON に接続した Web アプリを構築

Jerod Johnson
Jerod Johnson
Director, Technology Evangelism
CData Connect AI を使用してJSONのリアルタイムデータに接続し、Axios で JSON に接続した Web アプリを構築します。

Axios は開発者が Web ブラウザや Node.js からサーバーに HTTP リクエストを送信できる JavaScript ライブラリです。CData Connect AI と組み合わせることで、Web アプリからライブJSON servicesにアクセスできます。この記事では、JSON に接続し、Axios でライブJSON servicesにアクセスできる Web アプリを構築する方法を説明します。

Axios から JSON に接続

Axios で JSON を操作するには、Connect AI から JSON に接続し、ユーザーにアクセス権を提供し、JSON services 用のワークスペースを作成する必要があります。

Connect AI から JSON に接続

CData Connect AI はシンプルなポイントアンドクリックインターフェースでデータソースに接続できます。

  1. Connect AI にログインして「Sources」をクリック、次に「 Add Connection」をクリック
  2. 接続の追加
  3. 接続を追加パネルから「JSON」を選択
  4. データソースの選択
  5. JSON に接続するために必要な認証プロパティを入力します。

    データソースへの認証については、ヘルプドキュメントの「はじめに」を参照してください。CData 製品は、JSON API を双方向データベーステーブルとして、JSON ファイルを読み取り専用ビュー(ローカル ファイル、一般的なクラウドサービスに保存されているファイル、FTP サーバー)としてモデル化します。HTTP Basic、Digest、NTLM、OAuth、FTP などの主要な認証スキームがサポートされています。詳細はヘルプドキュメントの「はじめに」を参照してください。

    URI を設定して認証値を入力したら、DataModel を設定してデータ表現とデータ構造をより厳密に一致させます。

    DataModel プロパティは、データをどのようにテーブルに表現するかを制御するプロパティで、次の基本設定を切り替えます。

    • Document(デフォルト):JSON データのトップレベルのドキュメントビューをモデル化します。CData 製品 は、ネストされたオブジェクト配列を集約されたJSON オブジェクトとして返します。
    • FlattenedDocuments:ネストされた配列オブジェクトと親オブジェクトを、単一テーブルに暗黙的に結合します。
    • Relational:階層データから個々の関連テーブルを返します。テーブルには、親ドキュメントにリンクする主キーと外部キーが含まれています。

    リレーショナル表現の設定についての詳細は、ヘルプドキュメントの「JSON データのモデリング」を参照してください。また、以下の例で使用されているサンプルデータも確認できます。データには人や所有する車、それらの車に行われたさまざまなメンテナンスサービスのエントリが含まれています。

    Amazon S3 内のJSON への接続

    URI をバケット内のJSON ドキュメントに設定します。さらに、次のプロパティを設定して認証します。

    • AWSAccessKey:AWS アクセスキー(username)に設定。
    • AWSSecretKey:AWS シークレットキーに設定。

    Box 内のJSON への接続

    URI をJSON ファイルへのパスに設定します。Box へ認証するには、OAuth 認証標準を使います。 認証方法については、Box への接続 を参照してください。

    Dropbox 内のJSON への接続

    URI をJSON ファイルへのパスに設定します。Dropbox へ認証するには、OAuth 認証標準を使います。 認証方法については、Dropbox への接続 を参照してください。ユーザーアカウントまたはサービスアカウントで認証できます。ユーザーアカウントフローでは、以下の接続文字列で示すように、ユーザー資格情報の接続プロパティを設定する必要はありません。 URI=dropbox://folder1/file.json; InitiateOAuth=GETANDREFRESH; OAuthClientId=oauthclientid1; OAuthClientSecret=oauthcliensecret1; CallbackUrl=http://localhost:12345;

    SharePoint Online SOAP 内のJSON への接続

    URI をJSON ファイルを含むドキュメントライブラリに設定します。認証するには、User、Password、およびStorageBaseURL を設定します。

    SharePoint Online REST 内のJSON への接続

    URI をJSON ファイルを含むドキュメントライブラリに設定します。StorageBaseURL は任意です。指定しない場合、ドライバーはルートドライブで動作します。 認証するには、OAuth 認証標準を使用します。

    FTP 内のJSON への接続

    URI をJSON ファイルへのパスが付いたサーバーのアドレスに設定します。認証するには、User およびPassword を設定します。

    Google Drive 内のJSON への接続

    デスクトップアプリケーションからのGoogle への認証には、InitiateOAuth をGETANDREFRESH に設定して、接続してください。詳細はドキュメントの「Google Drive への接続」を参照してください。

    接続の設定(Salesforce の例)
  6. 「Save & Test」をクリック
  7. JSON 接続の追加ページで「Permissions」タブに移動し、ユーザーベースのアクセス許可を設定します。 アクセス許可の更新

Personal Access Token の作成

REST API、OData API、または Virtual SQL Server を介して Connect AI に接続する場合、Personal Access Token(PAT)を使用して Connect AI への接続を認証します。アクセスの粒度を維持するために、サービスごとに個別の PAT を作成することをお勧めします。

  1. Connect AI アプリの右上にある歯車アイコン()をクリックして設定ページを開きます。
  2. 設定ページで「Access Tokens」セクションに移動し、「 Create PAT」をクリックします。
  3. PAT に名前を付けて「Create」をクリックします。 新しい PAT の作成
  4. Personal Access Token は作成時にのみ表示されるため、必ずコピーして安全な場所に保存してください。

Axios 用に JSON エンドポイントを設定

JSON に接続したら、目的のテーブル用のワークスペースを作成します。

  1. 「Workspaces」ページに移動し、「 Add」をクリックして新しいワークスペースを作成します(または既存のワークスペースを選択)。 ワークスペースページ 新しいワークスペースの追加
  2. Add」をクリックしてワークスペースに新しいアセットを追加します。
  3. JSON 接続(例: JSON1)を選択して「Next」をクリックします。 アセットの選択(Salesforce の例)
  4. 操作するテーブルを選択して「Confirm」をクリックします。 テーブルの選択(Salesforce の例)
  5. ワークスペースの OData サービス URL をメモしておきます(例: https://cloud.cdata.com/api/odata/{workspace_name})。

接続、PAT、ワークスペースが設定できたので、Axios からJSON servicesに接続する準備が整いました。

Axios ワークフローで JSON Servicesに接続

OData プロトコルを使用して Axios から CData Connect AI への接続を確立するには、以下のステップに従います。

  1. Web アプリ用のプロジェクトディレクトリを作成します(例: ~/connect_cloud/
  2. ターミナルを開き、プロジェクトディレクトリに移動して以下のコマンドで node プロジェクトを初期化します:
    npm init -y
  3. 以下のコマンドでプロジェクトに Axios 依存関係をインストールします:
    npm install axios
  4. プロジェクトディレクトリに以下のコードを含む server.js ファイルを作成します。CData Connect AI のユーザー名(例: [email protected])と PAT(前提条件で作成した PAT)を指定します。また、SELECT * FROM JSON1.SCHEMA.people のようなデータクエリも指定する必要があります。

    server.js コード

          const axios = require('axios')
    
          const user = '[email protected]'
          const pat = '***********************************';
    
          //API エンドポイント
          const url = 'https://cloud.cdata.com/api/odata/{workspace_name}';
    
          //POST リクエストで送信するデータ
          const data = {
          "query":"SELECT * FROM {workspace_name}.SCHEMA.people"
          };
    
          axios.post(url, data, {
          auth: {
          username: user,
          password: pat
          }
          })
          .then(response => {
          const rows = response.data.results[0].rows;
          const schema = response.data.results[0].schema;
    
          //カラム名の配列を作成
          const columnNames = schema.map(col => col.columnName);
    
          //各行をループして、カラム名と値をログ出力
          rows.forEach(row => {
          const rowObject = {};
          row.forEach((value, index) => {
          const columnName = columnNames[index];
          rowObject[columnName] = value;
          });
          console.log(rowObject);
          })
          })
          .catch(error => {
          console.error('Error:', error);
          });
        
  5. ターミナルで以下のコマンドを実行してサーバーを起動します:
    node server.js
    クエリ結果が表示されます:
        { ID: 1, VALUE: -2 }
        { ID: 2, VALUE: 1 }
        { ID: 11, VALUE: null }
        { ID: 3, VALUE: 2 }
        { ID: 4, VALUE: 5 }
        ...

クラウドアプリケーションから JSON Servicesへの簡易アクセス

これで、Axios からライブJSON servicesへの直接接続が確立されました。Axios のようなクラウドアプリケーションから 100 以上の SaaS、ビッグデータ、NoSQL ソースへの簡易アクセスについての詳細は、Connect AI ページを参照してください。

はじめる準備はできましたか?

CData Connect AI の詳細、または無料トライアルにお申し込みください:

無料トライアル