Självstudie: Utveckla en Node.js Databricks-app

2025-06-25

Den här handledningen visar hur du med hjälp avChart.jsskapar en enkel Node.js-app i Databricks-appar som visar en webbsida med ett dynamiskt diagram. Appen innehåller:

En formaterad startsida som renderar ett diagram
En API-slutpunkt som returnerar falska försäljningsdata för tidsserier
En dynamisk port med hjälp av en miljövariabel

Förutsättningar

Innan du slutför den här självstudien:

Kontrollera att din Azure Databricks-arbetsyta och lokala utvecklingsmiljö är korrekt konfigurerade. Se Konfigurera din Databricks Apps-arbetsyta och utvecklingsmiljö.
Skapa en anpassad Databricks-app som fungerar som container för din Node.js-kod. Se Skapa en anpassad Databricks-app.

Steg 1: Installera beroenden

Öppna en terminal och kör följande kommandon för att:

Installera Node.js
Skapa en lokal katalog för käll- och konfigurationsfilerna för din app
Installera Express

brew install node
mkdir my-node-app
cd my-node-app
npm install express

Steg 2: Definiera din applogik

Skapa en fil med app.js namnet med följande innehåll:

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}`);
});

Den här koden skapar en Express-server som:

Visar en HTML-sida från /static katalogen
Svarar på /data med falska försäljningsdata
Lyssnar på porten som definieras av PORT miljövariabeln (eller 8 000 som standard)

Steg 3: Lägg till en statisk HTML-fil

Skapa en fil vid static/index.html som läser in Chart.js och renderar ett linjediagram.

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

Diagrammet hämtar automatiskt falska data från API:et /data och renderar dem i webbläsaren.

Steg 4: Definiera beroenden

Skapa en package.json fil som deklarerar Express som ett beroende och konfigurerar startskriptet:

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

Steg 5: Konfigurera app.yaml (valfritt)

Lägg till en app.yaml fil för att definiera hur Azure Databricks ska köra din app:

command:
  - npm
  - start

env:
  - name: PORT
    value: 8000

Den här konfigurationen anger standardporten och använder npm start för att starta appen. Om du inte anger ett anpassat kommando, använder appen npm run start.

Steg 6: Kör appen lokalt

Testa appen lokalt genom att köra följande kommandon:

npm install
npm start

Navigera till http://localhost:8000 för att se ett dynamiskt diagram med simulerade försäljningsdata för de senaste 12 dagarna.

Nodappens utdata

Nästa steg

Distribuera appen. Se Installera en Databricks-applikation.
Ersätt falska data med data från Unity Catalog eller ett externt API.
Lägg till användargränssnittsfilter, till exempel ett datumintervall eller en produktkategori.
Skydda din app med hjälp av Azure Databricks-hemligheter eller OAuth.

Dela via