Tutorial: Desarrollo de una aplicación de Node.js Databricks

En este tutorial se muestra cómo crear una aplicación de Node.js sencilla en Aplicaciones de Databricks que sirve una página web con un gráfico dinámico mediante Chart.js y Express. La aplicación incluye:

  • Página principal con estilo que representa un gráfico
  • Un punto final de API que devuelve datos ficticios de series temporales de ventas
  • Un puerto dinámico mediante una variable de entorno

Prerrequisitos

Antes de completar este tutorial:

Paso 1: Instalación de dependencias

Abra un terminal y ejecute los comandos siguientes para:

  • Instalación de Node.js
  • Creación de un directorio local para los archivos de origen y configuración de la aplicación
  • Instalación de Express
brew install node
mkdir my-node-app
cd my-node-app
npm install express

Paso 2: Definir la lógica de la aplicación

Cree un archivo llamado app.js con el siguiente contenido:

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

Este código crea un servidor Express que:

  • Proporciona una página HTML desde el /static directorio
  • Responde a /data con datos de ventas ficticios
  • Escucha en el puerto definido por la variable de entorno PORT (o 8000 de forma predeterminada)

Paso 3: Agregar un archivo HTML estático

Cree un archivo en static/index.html que cargue Chart.js y represente un gráfico de líneas. El gráfico captura automáticamente los datos ficticios de la /data API y los representa en el explorador.

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

Paso 4: Definir dependencias

Cree un archivo package.json que declare Express como dependencia y configure el script de inicio:

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

Paso 5: Ejecutar la aplicación localmente

Para probar la aplicación localmente, ejecute los siguientes comandos:

npm install
npm run start

Vaya a http://localhost:8000 para ver un gráfico dinámico de datos de ventas simulados en los últimos 12 días.

Salida de la aplicación node

Pasos siguientes

  • Implemente la aplicación. Consulte Implementación de una aplicación de Databricks.
  • Reemplace los datos ficticios por datos de Unity Catalog o una API externa.
  • Agregue filtros de interfaz de usuario, como un intervalo de fechas o una categoría de producto.
  • Proteja la aplicación mediante secretos de Azure Databricks o OAuth.
  • Last updated on