자습서: Node.js Databricks 앱 개발

이 자습서에서는 Chart.jsExpress를 사용하여 동적 차트가 있는 웹 페이지를 제공하는 Databricks Apps에서 간단한 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 서버를 만듭니다.

  • 디렉터리에서 HTML 페이지 제공 /static
  • /data에 모의 판매 데이터로 응답합니다.
  • 환경 변수에 의해 PORT 정의된 포트에서 수신 대기합니다(또는 기본적으로 8000).

3단계: 정적 HTML 파일 추가

파일을 static/index.html에 생성하여 Chart.js을 로드하고 꺾은선형 차트를 렌더링합니다. 차트는 API에서 모의 /data 데이터를 자동으로 가져와 브라우저에서 렌더링합니다.

<!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