次の方法で共有

チュートリアル: Node.js Databricks アプリを開発する

このチュートリアルでは、Databricks Apps で、Chart.jsと Express を使用して動的なグラフを含む Web ページを提供する単純な Node.js アプリを作成する方法について説明します。 アプリには次のものが含まれます。

  • グラフをレンダリングするスタイル付きのホーム ページ
  • モック時系列売上データを返す API エンドポイント
  • 環境変数を使用した動的ポート

[前提条件]

このチュートリアルを完了する前に、次の手順を実行します。

手順 1: 依存関係をインストールする

ターミナルを開き、次のコマンドを実行して次の操作を行います。

  • Node.js をインストールする
  • アプリのソース ファイルと構成ファイルのローカル ディレクトリを作成する
  • Express のインストール
brew install node
mkdir my-node-app
cd my-node-app
npm install express

手順 2: アプリ ロジックを定義する

次の内容を含む app.js というファイルを作成します。

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const app = express();
const port = process.env.PORT || 8000;

const __dirname = path.dirname(fileURLToPath(import.meta.url));
app.use('/static', express.static(path.join(__dirname, 'static')));

// Serve chart page
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'static/index.html'));
});

// Serve mock time-series data
app.get('/data', (req, res) => {
  const now = Date.now();
  const data = Array.from({ length: 12 }, (_, i) => ({
    date: new Date(now - i * 86400000).toISOString().slice(0, 10),
    sales: Math.floor(Math.random() * 1000) + 100,
  })).reverse();
  res.json(data);
});

app.listen(port, () => {
  console.log(`🚀 App running at http://localhost:${port}`);
});

このコードは、Express サーバーを作成します。

  • /static ディレクトリから HTML ページを提供します
  • モック売上データを使用して /data に応答する
  • PORT環境変数で定義されているポートをリッスンします (既定では 8000)。

手順 3: 静的 HTML ファイルを追加する

Chart.js を読み込んで折れ線グラフをレンダリングするファイルを static/index.html に作成します。 グラフでは、 /data API からモック データが自動的にフェッチされ、ブラウザーにレンダリングされます。

<!DOCTYPE html>
<html>
  <head>
    <title>Sales Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
      body {
        font-family: sans-serif;
        padding: 2rem;
      }
      canvas {
        max-width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <h1>📈 Sales Dashboard</h1>
    <canvas id="salesChart"></canvas>

    <script>
      async function renderChart() {
        const response = await fetch('/data');
        const data = await response.json();

        const ctx = document.getElementById('salesChart').getContext('2d');
        new Chart(ctx, {
          type: 'line',
          data: {
            labels: data.map((d) => d.date),
            datasets: [
              {
                label: 'Daily Sales',
                data: data.map((d) => d.sales),
                borderWidth: 2,
                fill: false,
              },
            ],
          },
          options: {
            responsive: true,
            scales: {
              y: {
                beginAtZero: true,
              },
            },
          },
        });
      }

      renderChart();
    </script>
  </body>
</html>

手順 4: 依存関係を定義する

Express を依存関係として宣言し、開始スクリプトを設定する package.json ファイルを作成します。

{
  "name": "databricks-chart-app",
  "version": "1.0.0",
  "type": "module",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

手順 5: アプリをローカルで実行する

アプリをローカルでテストするには、次のコマンドを実行します。

npm install
npm run start

http://localhost:8000に移動して、過去 12 日間のモック売上データの動的なグラフを表示します。

ノード アプリの出力

次のステップ

  • アプリを展開します。 Databricks アプリのデプロイを参照してください。
  • モック データを Unity カタログまたは外部 API のデータに置き換えます。
  • 日付範囲や製品カテゴリなどの UI フィルターを追加します。
  • Azure Databricks シークレットまたは OAuth を使用してアプリをセキュリティで保護します。
  • Last updated on