Bitbucket のデータでDash Webアプリを作る方法（Connect AI + Python）

Jerod Johnson
Jerod Johnson
Director, Technology Evangelism
CData Connect AI Python SDKとpandasを使い、リアルタイムのBitbucket のデータをDashのWebアプリで可視化する方法を解説。コーディングなしの接続設定からグラフ表示まで実現します。

CData Connect AI の Python SDK（DB-API 2.0準拠）を使うと、pandas と Dash でリアルタイムのBitbucket のデータを可視化する Web アプリを、個別ドライバー不要で構築できます。接続・モジュールインストール・アプリ構築の3ステップで、約10分で完成します。

Python は豊富なモジュールのエコシステムを備えているため、素早く作業に取りかかり、システムをより効果的に連携できます。CData Connect AI Python SDK、pandas モジュール、そして Dash フレームワークを使えば、Bitbucket のデータを扱う Bitbucket 連携の Web アプリケーションを構築できます。この記事では、Connect AI に接続し、pandas と Dash を使ってBitbucket のデータを可視化するシンプルな Web アプリを構築する方法をご紹介します。

Connect AI Python SDK（cdata-connect-ai）は DB-API 2.0（PEP 249）に準拠したクライアントなので、pandas は SDK の接続オブジェクトから直接クエリ結果を読み取れます。ソースごとにドライバーをインストールする必要はありません。パーソナルアクセストークンで接続して、アプリを構築しましょう。

Python + pandas + Dash でできること

Bitbucket データの可視化ダッシュボード作成

SQL クエリで取得した Bitbucket のレコードを pandas の DataFrame に読み込み、Dash のグラフコンポーネントに渡すだけで、業種別の傾向などを視覚的に確認できるダッシュボードを構築できます。

リアルタイムデータの自動更新レポート

Connect AI 経由の接続はパーソナルアクセストークンで認証されるため、スケジュール実行するスクリプトに組み込めば、Bitbucket の最新データを反映したレポートを定期的に生成できます。

複数データソースとの統合分析

DB-API 2.0 準拠のクライアントなので、同じコードパターンで Bitbucket 以外のデータソースにも接続でき、pandas 上で結合・集計してから Dash で一元的に可視化できます。

Connect AI で Bitbucket に接続する方法は？

CData Connect AI では、直感的なクリック操作ベースのインターフェースでデータソースに接続できます。

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

    ほとんどのクエリでは、ワークスペースを設定する必要があります。唯一の例外は、Workspacesテーブルです。このテーブルはこのプロパティの設定を必要とせず、クエリを実行すると、Workspaceの設定に使用できるワークスペーススラッグのリストが提供されます。このテーブルにクエリを実行するには、スキーマを'Information'に設定し、SELECT * FROM Workspacesクエリを実行する必要があります。

    Schemaを'Information'に設定すると、一般的な情報が表示されます。Bitbucketに接続するには、以下のパラメータを設定してください。

    • Schema: ワークスペースのユーザー、リポジトリ、プロジェクトなどの一般的な情報を表示するには、これを'Information'に設定します。それ以外の場合は、クエリを実行するリポジトリまたはプロジェクトのスキーマに設定します。利用可能なスキーマの完全なセットを取得するには、sys_schemasテーブルにクエリを実行してください。
    • Workspace: Workspacesテーブルにクエリを実行する場合を除き、必須です。Workspacesテーブルへのクエリにはこのプロパティは必要ありません。そのクエリはWorkspaceの設定に使用できるワークスペーススラッグのリストのみを返すためです。

    Bitbucketでの認証

    BitbucketはOAuth認証のみをサポートしています。すべてのOAuthフローからこの認証を有効にするには、カスタムOAuthアプリケーションを作成し、AuthSchemeをOAuthに設定する必要があります。

    特定の認証ニーズ（デスクトップアプリケーション、Webアプリケーション、ヘッドレスマシン）に必要な接続プロパティについては、ヘルプドキュメントを必ず確認してください。

    カスタムOAuthアプリケーションの作成

    Bitbucketアカウントから、以下のステップを実行します。

    1. 設定（歯車アイコン）に移動し、ワークスペース設定を選択します。
    2. アプリと機能セクションで、OAuthコンシューマーを選択します。
    3. コンシューマーを追加をクリックします。
    4. カスタムアプリケーションの名前と説明を入力します。
    5. コールバックURLを設定します。
      • デスクトップアプリケーションとヘッドレスマシンの場合、http://localhost:33333または任意のポート番号を使用します。ここで設定するURIがCallbackURLプロパティになります。
      • Webアプリケーションの場合、信頼できるリダイレクトURLにコールバックURLを設定します。このURLは、ユーザーがアプリケーションにアクセスが許可されたことを確認するトークンを持って戻るWebの場所です。
    6. クライアント認証情報を使用して認証する予定の場合、これはプライベートコンシューマーですを選択する必要があります。ドライバーでは、AuthSchemeをclientに設定する必要があります。
    7. OAuthアプリケーションに与える権限を選択します。これにより、読み取りおよび書き込みできるデータが決まります。
    8. 新しいカスタムアプリケーションを保存するには、保存をクリックします。
    9. アプリケーションが保存された後、それを選択して設定を表示できます。アプリケーションのKeyとSecretが表示されます。これらを将来の使用のために記録してください。Keyを使用してOAuthClientIdを設定し、Secretを使用してOAuthClientSecretを設定します。
    接続の設定（Salesforce の例）
  4. 「Save & Test」をクリックします
  5. 「Permissions」タブに移動し、ユーザーベースの権限を更新します。 権限の更新

パーソナルアクセストークン（PAT）を生成する

Python SDK は、アカウントのメールアドレスとパーソナルアクセストークン（PAT）を使って Connect AI に認証します。アクセスの粒度を保つために、アプリケーションごとに個別の PAT を作成することをおすすめします。

  1. Connect AI アプリの右上にある歯車アイコン（）をクリックして、設定ページを開きます。
  2. 設定ページの Access Tokens セクションに移動し、 Create PAT をクリックします。
  3. PAT に名前を付けて Create をクリックします。 新しい PAT の作成
  4. パーソナルアクセストークンは作成時にのみ表示されます。必ずコピーして安全な場所に保管してください。

必要なモジュールをインストールする

pip ユーティリティを使って、SDK（pandas エクストラ付き）、Dash、Plotly をインストールします。

pip install "cdata-connect-ai[full]"
pip install dash
pip install plotly

Python で Bitbucket のデータの Web アプリを構築する

必要なモジュールをインストールしたら、Web アプリを構築する準備は完了です。以下にコードスニペットを紹介しますが、完全なソースコードは記事の末尾に掲載しています。

まずモジュールをインポートし、アカウントのメールアドレスと PAT で Connect AI に接続して、Bitbucket のデータを DataFrame に読み込みます。識別子は <Connection>.<Schema>.<Table> という3つの部分で構成されており、接続名はデフォルトでソース名（例：Bitbucket1）になります。

import dash
from dash import dcc, html
import pandas as pd
import plotly.graph_objs as go
import cdata_connect_ai

conn = cdata_connect_ai.connect(
    username="[email protected]",
    password="<your_pat>",
)

df = pd.read_sql(
    "SELECT Title, ContentRaw "
    "FROM [Bitbucket1].[Bitbucket].[Issues] "
    "WHERE Id = '1'",
    conn,
)

conn.close()

アプリとレイアウトを設定する

クエリ結果を DataFrame に格納したら、Bitbucket のデータから棒グラフを作成し、アプリのレイアウトを設定します。

app = dash.Dash(__name__)
app.title = 'CData Connect AI + Dash'

trace = go.Bar(x=df['Title'], y=df['ContentRaw'], name='Title')

app.layout = html.Div(
    children=[
        html.H1("CData Connect AI + Dash", style={'textAlign': 'center'}),
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [trace],
                'layout': go.Layout(title='Bitbucket Issues Data', barmode='stack'),
            },
        ),
    ],
    className="container",
)

アプリを実行できるようにする

接続、アプリ、レイアウトの設定が完了したら、アプリを実行する準備は整いました。

if __name__ == '__main__':
    app.run(debug=True)

それでは、Python で Web アプリを実行し、ブラウザでBitbucket のデータを確認してみましょう。

python bitbucket-dash.py
ブラウザで動作する Dash の Web アプリ（Salesforce の例）

関連情報と無料トライアル

これで、CData Connect AI Python SDK を使って、リアルタイムのBitbucket のデータでインタラクティブな Dash の Web アプリを構築できるようになりました。Bitbucket（および数百種類のその他のデータソース）への接続について詳しくは、Connect AI のページをご覧ください。

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

無料トライアル お問い合わせ


完全なソースコード

import dash
from dash import dcc, html
import pandas as pd
import plotly.graph_objs as go
import cdata_connect_ai

conn = cdata_connect_ai.connect(
    username="[email protected]",
    password="<your_pat>",
)

df = pd.read_sql(
    "SELECT Title, ContentRaw "
    "FROM [Bitbucket1].[Bitbucket].[Issues] "
    "WHERE Id = '1'",
    conn,
)

conn.close()

app = dash.Dash(__name__)
app.title = 'CData Connect AI + Dash'

trace = go.Bar(x=df['Title'], y=df['ContentRaw'], name='Title')

app.layout = html.Div(
    children=[
        html.H1("CData Connect AI + Dash", style={'textAlign': 'center'}),
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [trace],
                'layout': go.Layout(title='Bitbucket Issues Data', barmode='stack'),
            },
        ),
    ],
    className="container",
)

if __name__ == '__main__':
    app.run(debug=True)

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

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

無料トライアル

この記事の内容

関連記事