Créer une API avec [Link] et [Link] est une tâche courante pour développer des services backend.
Voici un exemple simple d'API qui permet de gérer une liste de tâches (CRUD - Create, Read, Update,
Delete).
Étape 1 : Configuration du projet
1. Assurez-vous d'avoir [Link] installé sur votre machine.
2. Initialisez un nouveau projet :
bash
mkdir api-express
cd api-express
npm init -y
3. Installez [Link] :
bash
npm install express
Étape 2 : Créez le fichier [Link]
Dans le fichier [Link], ajoutez le code suivant :
javascript
const express = require('express');
const app = express();
const port = 3000;
// Middleware pour parser les requêtes JSON
[Link]([Link]());
// Base de données fictive
let tasks = [
{ id: 1, title: 'Apprendre [Link]', completed: false },
{ id: 2, title: 'Créer une API', completed: true },
];
// Routes
// 1. Récupérer toutes les tâches
[Link]('/tasks', (req, res) => {
[Link](tasks);
});
// 2. Récupérer une tâche par ID
[Link]('/tasks/:id', (req, res) => {
const task = [Link](t => [Link] === parseInt([Link]));
if (!task) return [Link](404).json({ message: 'Tâche non trouvée' });
[Link](task);
});
// 3. Ajouter une nouvelle tâche
[Link]('/tasks', (req, res) => {
const newTask = {
id: [Link] + 1,
title: [Link],
completed: [Link] || false,
};
[Link](newTask);
[Link](201).json(newTask);
});
// 4. Mettre à jour une tâche
[Link]('/tasks/:id', (req, res) => {
const task = [Link](t => [Link] === parseInt([Link]));
if (!task) return [Link](404).json({ message: 'Tâche non trouvée' });
[Link] = [Link] || [Link];
[Link] = [Link] !== undefined ? [Link] : [Link];
[Link](task);
});
// 5. Supprimer une tâche
[Link]('/tasks/:id', (req, res) => {
const taskIndex = [Link](t => [Link] === parseInt([Link]));
if (taskIndex === -1) return [Link](404).json({ message: 'Tâche non trouvée' });
[Link](taskIndex, 1);
[Link](204).send();
});
// Démarrer le serveur
[Link](port, () => {
[Link](`API en cours d'exécution sur [Link]
});
Étape 3 : Tester l'API
1. Lancez le serveur :
node [Link]
2. Utilisez un outil comme Postman ou cURL pour tester les différentes routes :
o GET /tasks : Récupérer toutes les tâches.
o GET /tasks/:id : Récupérer une tâche spécifique.
o POST /tasks : Ajouter une nouvelle tâche (JSON requis, ex. { "title": "Nouvelle tâche" }).
o PUT /tasks/:id : Mettre à jour une tâche existante.
o DELETE /tasks/:id : Supprimer une tâche.
Résultat attendu
Vous avez maintenant une API RESTful fonctionnelle pour gérer des tâches. Vous pouvez l'étendre pour
ajouter des fonctionnalités supplémentaires comme l'authentification ou une base de données réelle
(par exemple, MongoDB ou PostgreSQL).
Pour intégrer une base de données MySQL à l'API, nous allons utiliser le module mysql2 qui permet
d'interagir avec une base de données MySQL. Voici les étapes mises à jour :
Étape 1 : Installer les dépendances supplémentaires
1. Ajoutez le module mysql2 :
bash
npm install mysql2
2. Installez également dotenv pour gérer les variables d'environnement (comme les informations
de connexion à la base de données) :
bash
npm install dotenv
Étape 2 : Configurer la connexion à MySQL
Créez un fichier .env dans votre projet pour y stocker les informations de connexion :
env
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=motdepasse
DB_NAME=todolist
Ajoutez une base de données et une table dans MySQL pour stocker les tâches :
sql
CREATE DATABASE todolist;
USE todolist;
CREATE TABLE tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
completed BOOLEAN DEFAULT FALSE
);
Étape 3 : Modifier le fichier [Link]
Voici le code mis à jour pour inclure MySQL :
javascript
const express = require('express');
const mysql = require('mysql2');
const dotenv = require('dotenv');
[Link](); // Charger les variables d'environnement depuis le fichier .env
const app = express();
const port = 3000;
// Middleware pour parser les requêtes JSON
[Link]([Link]());
// Configuration de la connexion MySQL
const db = [Link]({
host: [Link].DB_HOST,
user: [Link].DB_USER,
password: [Link].DB_PASSWORD,
database: [Link].DB_NAME,
});
// Vérification de la connexion à la base de données
[Link](err => {
if (err) {
[Link]('Erreur de connexion à la base de données :', [Link]);
[Link](1);
}
[Link]('Connecté à la base de données MySQL.');
});
// Routes
// 1. Récupérer toutes les tâches
[Link]('/tasks', (req, res) => {
const sql = 'SELECT * FROM tasks';
[Link](sql, (err, results) => {
if (err) return [Link](500).json({ message: 'Erreur lors de la récupération des tâches', error: err });
[Link](results);
});
});
// 2. Récupérer une tâche par ID
[Link]('/tasks/:id', (req, res) => {
const sql = 'SELECT * FROM tasks WHERE id = ?';
[Link](sql, [[Link]], (err, results) => {
if (err) return [Link](500).json({ message: 'Erreur lors de la récupération de la tâche', error: err });
if ([Link] === 0) return [Link](404).json({ message: 'Tâche non trouvée' });
[Link](results[0]);
});
});
// 3. Ajouter une nouvelle tâche
[Link]('/tasks', (req, res) => {
const { title, completed } = [Link];
const sql = 'INSERT INTO tasks (title, completed) VALUES (?, ?)';
[Link](sql, [title, completed || false], (err, result) => {
if (err) return [Link](500).json({ message: 'Erreur lors de l’ajout de la tâche', error: err });
[Link](201).json({ id: [Link], title, completed });
});
});
// 4. Mettre à jour une tâche
[Link]('/tasks/:id', (req, res) => {
const { title, completed } = [Link];
const sql = 'UPDATE tasks SET title = ?, completed = ? WHERE id = ?';
[Link](sql, [title, completed, [Link]], (err, result) => {
if (err) return [Link](500).json({ message: 'Erreur lors de la mise à jour de la tâche', error: err });
if ([Link] === 0) return [Link](404).json({ message: 'Tâche non trouvée' });
[Link]({ id: [Link], title, completed });
});
});
// 5. Supprimer une tâche
[Link]('/tasks/:id', (req, res) => {
const sql = 'DELETE FROM tasks WHERE id = ?';
[Link](sql, [[Link]], (err, result) => {
if (err) return [Link](500).json({ message: 'Erreur lors de la suppression de la tâche', error: err });
if ([Link] === 0) return [Link](404).json({ message: 'Tâche non trouvée' });
[Link](204).send();
});
});
// Démarrer le serveur
[Link](port, () => {
[Link](`API en cours d'exécution sur [Link]
});
Étape 4 : Tester l'API avec la base de données
1. Lancez le serveur :
bash
node [Link]
2. Testez les différentes routes avec Postman, cURL, ou votre outil préféré.
3. Vérifiez que les données sont bien insérées, récupérées, mises à jour, et supprimées dans la
base de données MySQL.
Points à noter
Pour un projet en production, envisagez d'utiliser un ORM comme Sequelize ou TypeORM pour
simplifier la gestion des bases de données.
Gérer les erreurs (comme une base de données inaccessible) est important pour rendre l'API
plus robuste.
Pour intégrer un frontend avec [Link] à notre API backend [Link]/[Link] (avec MySQL), nous
allons créer une application React qui communique avec l'API pour afficher et gérer les tâches.
Étape 1 : Configurer le projet React
1. Créez un nouveau projet React :
bash
npx create-react-app todolist-frontend
cd todolist-frontend
2. Installez axios pour faciliter les requêtes HTTP :
bash
npm install axios
Étape 2 : Créer la structure de l'application
Organisez votre application React comme suit :
src/
├── components/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
├── [Link]
└── [Link]
Étape 3 : Ajouter le code frontend
1. [Link]
Ce fichier est le point d'entrée principal de l'application.
javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
const App = () => {
const [tasks, setTasks] = useState([]);
// Charger les tâches depuis l'API
useEffect(() => {
[Link]('[Link]
.then(response => setTasks([Link]))
.catch(error => [Link]('Erreur lors du chargement des tâches:', error));
}, []);
// Ajouter une tâche
const addTask = (newTask) => {
[Link]('[Link] newTask)
.then(response => setTasks([...tasks, [Link]]))
.catch(error => [Link]('Erreur lors de l’ajout de la tâche:', error));
};
// Supprimer une tâche
const deleteTask = (taskId) => {
[Link](`[Link]
.then(() => setTasks([Link](task => [Link] !== taskId)))
.catch(error => [Link]('Erreur lors de la suppression de la tâche:', error));
};
// Mettre à jour une tâche
const updateTask = (updatedTask) => {
[Link](`[Link] updatedTask)
.then(() => {
setTasks([Link](task => ([Link] === [Link] ? updatedTask : task)));
})
.catch(error => [Link]('Erreur lors de la mise à jour de la tâche:', error));
};
return (
<div className="App">
<h1>Gestionnaire de Tâches</h1>
<TaskForm addTask={addTask} />
<TaskList tasks={tasks} deleteTask={deleteTask} updateTask={updateTask} />
</div>
);
};
export default App;
2. [Link]
Ce composant gère l'ajout de nouvelles tâches.
javascript
import React, { useState } from 'react';
const TaskForm = ({ addTask }) => {
const [title, setTitle] = useState('');
const handleSubmit = (e) => {
[Link]();
if ([Link]()) {
addTask({ title, completed: false });
setTitle('');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Nouvelle tâche"
value={title}
onChange={(e) => setTitle([Link])}
/>
<button type="submit">Ajouter</button>
</form>
);
};
export default TaskForm;
3. [Link]
Ce composant affiche la liste des tâches.
javascript
import React from 'react';
import TaskItem from './TaskItem';
const TaskList = ({ tasks, deleteTask, updateTask }) => {
return (
<div>
{[Link](task => (
<TaskItem
key={[Link]}
task={task}
deleteTask={deleteTask}
updateTask={updateTask}
/>
))}
</div>
);
};
export default TaskList;
4. [Link]
Ce composant affiche une tâche individuelle avec des options pour la mettre à jour ou la supprimer.
javascript
import React, { useState } from 'react';
const TaskItem = ({ task, deleteTask, updateTask }) => {
const [isEditing, setIsEditing] = useState(false);
const [editedTitle, setEditedTitle] = useState([Link]);
const handleUpdate = () => {
updateTask({ ...task, title: editedTitle });
setIsEditing(false);
};
return (
<div>
{isEditing ? (
<input
type="text"
value={editedTitle}
onChange={(e) => setEditedTitle([Link])}
/>
):(
<span style={{ textDecoration: [Link] ? 'line-through' : 'none' }}>
{[Link]}
</span>
)}
<button onClick={() => setIsEditing(!isEditing)}>
{isEditing ? 'Sauvegarder' : 'Modifier'}
</button>
<button onClick={() => deleteTask([Link])}>Supprimer</button>
<button onClick={() => updateTask({ ...task, completed: ![Link] })}>
{[Link] ? 'Marquer comme non terminé' : 'Marquer comme terminé'}
</button>
</div>
);
};
export default TaskItem;
Étape 4 : Lancer l'application React
1. Démarrez le serveur React :
bash
npm start
2. Assurez-vous que votre backend [Link]/[Link] est déjà en cours d'exécution sur
[Link]
3. Ouvrez votre navigateur à [Link]
Étape 5 : Tester l'application
Ajouter une tâche : Utilisez le champ d'entrée pour ajouter une nouvelle tâche.
Modifier une tâche : Cliquez sur "Modifier", modifiez le texte, puis cliquez sur "Sauvegarder".
Supprimer une tâche : Cliquez sur "Supprimer" pour retirer une tâche.
Marquer comme terminé/non terminé : Utilisez le bouton pour basculer l'état de la tâche.
Vous avez maintenant un gestionnaire de tâches complet avec un backend en [Link]/[Link] et une
base de données MySQL, ainsi qu'un frontend en [Link].