Créer un système de statistiques rapide avec Express API
Publié le 2024-09-25
Dernière mise à jour 2024-09-25
Associé avec #Express.js , #API , #Statistiques , #Backend , #JavaScript , #Développement
Par :
Elouan
Introduction
Un système de statistiques bien conçu peut fournir des informations précieuses sur l'utilisation de votre application. Dans cet article, nous allons explorer comment créer rapidement un système de statistiques robuste en utilisant Express.js comme backend API.
Configuration du serveur Express
Commençons par mettre en place notre serveur Express avec les dépendances nécessaires :
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Serveur en écoute sur le port ${PORT}`);
});
Création des endpoints pour les statistiques
Maintenant, créons quelques endpoints pour collecter et récupérer des statistiques :
// Stockage en mémoire pour les statistiques (à remplacer par une base de données dans un environnement de production)
let stats = {
pageViews: {},
userActions: [],
errors: []
};
// Endpoint pour enregistrer une vue de page
app.post('/api/stats/pageview', (req, res) => {
const { page } = req.body;
stats.pageViews[page] = (stats.pageViews[page] || 0) + 1;
res.status(200).json({ message: 'Page view recorded' });
});
// Endpoint pour enregistrer une action utilisateur
app.post('/api/stats/useraction', (req, res) => {
const { action, details } = req.body;
stats.userActions.push({ action, details, timestamp: new Date() });
res.status(200).json({ message: 'User action recorded' });
});
// Endpoint pour enregistrer une erreur
app.post('/api/stats/error', (req, res) => {
const { error, context } = req.body;
stats.errors.push({ error, context, timestamp: new Date() });
res.status(200).json({ message: 'Error recorded' });
});
// Endpoint pour récupérer toutes les statistiques
app.get('/api/stats', (req, res) => {
res.status(200).json(stats);
});
Intégration côté client
Pour utiliser notre API de statistiques, nous pouvons créer une petite bibliothèque côté client :
class StatsCollector {
constructor(apiUrl) {
this.apiUrl = apiUrl;
}
async recordPageView(page) {
return this.sendRequest('/pageview', { page });
}
async recordUserAction(action, details) {
return this.sendRequest('/useraction', { action, details });
}
async recordError(error, context) {
return this.sendRequest('/error', { error: error.message, context });
}
async sendRequest(endpoint, data) {
try {
const response = await fetch(`${this.apiUrl}${endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
return response.json();
} catch (error) {
console.error('Erreur lors de l'envoi des statistiques:', error);
}
}
}
// Utilisation
const stats = new StatsCollector('http://localhost:3000/api/stats');
stats.recordPageView('/home');
stats.recordUserAction('button_click', { buttonId: 'submit-form' });
Visualisation des statistiques
Pour visualiser rapidement vos statistiques, vous pouvez créer une simple page de tableau de bord :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau de bord des statistiques</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Tableau de bord des statistiques</h1>
<canvas id="pageViewsChart"></canvas>
<ul id="userActionsList"></ul>
<ul id="errorsList"></ul>
<script>
async function fetchStats() {
const response = await fetch('http://localhost:3000/api/stats');
return response.json();
}
async function renderDashboard() {
const stats = await fetchStats();
// Rendu du graphique des vues de page
const ctx = document.getElementById('pageViewsChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: Object.keys(stats.pageViews),
datasets: [{
label: 'Vues de page',
data: Object.values(stats.pageViews)
}]
}
});
// Rendu de la liste des actions utilisateur
const userActionsList = document.getElementById('userActionsList');
stats.userActions.forEach(action => {
const li = document.createElement('li');
li.textContent = `${action.action} - ${new Date(action.timestamp).toLocaleString()}`;
userActionsList.appendChild(li);
});
// Rendu de la liste des erreurs
const errorsList = document.getElementById('errorsList');
stats.errors.forEach(error => {
const li = document.createElement('li');
li.textContent = `${error.error} - ${new Date(error.timestamp).toLocaleString()}`;
errorsList.appendChild(li);
});
}
renderDashboard();
</script>
</body>
</html>
Conclusion
Ce système de statistiques rapide vous permet de collecter et de visualiser facilement des données sur l'utilisation de votre application. Pour un environnement de production, vous devriez considérer l'ajout d'une base de données pour le stockage persistant, l'implémentation de l'authentification pour sécuriser vos endpoints, et l'optimisation des performances pour gérer un grand volume de requêtes.
Note : Cet article fournit une base solide pour créer un système de statistiques simple. Pour des fonctionnalités plus avancées ou des conseils sur l'optimisation des performances, n'hésitez pas à me contacter via la page Contact.