Aller au contenu principal
Dernière mise à jour le

Didacticiel : Développer une application Databricks Node.js

Ce tutoriel vous montre comment créer une simple application Node.js dans Databricks Apps qui sert une page web avec un graphique dynamique en utilisant Chart.js et Express. L'application comprend :

  • Une page d'accueil stylisée qui rend un graphique
  • Un Endpoint API qui renvoie des données de ventes de séries chronologiques simulées.
  • Un port dynamique utilisant une variable d’environnement

Prérequis​

Avant de terminer ce didacticiel :

Étape 1 : Installer les dépendances​

Ouvrez un terminal et exécutez les commandes suivantes pour :

  • Installer Node.js
  • Créez un répertoire local pour les fichiers source et de configuration de votre application.
  • Installer Express
Bash
brew install node
mkdir my-node-app
cd my-node-app
npm install express

Étape 2 : Définissez la logique de votre application​

Créez un fichier appelé app.js avec le contenu suivant :

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

Ce code crée un serveur Express qui :

  • Sert une page HTML à partir du répertoire /static
  • Répond à /data avec des données de Ventes fictives.
  • Est à l'écoute sur le port défini par la variable d'environnement PORT (ou 8000 par default)

Étape 3 : Ajouter un fichier HTML statique​

Créez un fichier à static/index.html qui charge Chart.js et affiche un graphique linéaire. Le graphique récupère automatiquement des données fictives depuis l'API /data et les affiche dans le navigateur.

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

Étape 4 : Définir les dépendances​

Créez un fichier package.json qui déclare Express comme dépendance et configure votre script de start :

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

Étape 5 : exécutez l'application localement​

Pour tester l'application localement, exécutez les commandes suivantes :

Bash
npm install
npm run start

Accédez à http://localhost:8000 pour voir un graphique dynamique de données de ventes fictives des 12 derniers jours.

Résultat de l&#39;application Node

Étapes suivantes​

  • Déployez l'application. Consultez Déployer une application Databricks.
  • Remplacez les données factices par des données issues de Unity Catalog ou d'une API externe.
  • Ajoutez des filtres d'interface utilisateur, tels qu'une plage de dates ou une catégorie de produit.
  • Sécurisez votre application à l'aide des secrets Databricks ou d'OAuth.
Sur cette page