MongoDB-TP-TW3
Ressources :
-
CodeSandbox est une plateforme en ligne offrant un environnement de développement collaboratif basé sur le cloud.
-
L’image Docker officielle de MongoDB peut être trouvée sur le Hub Docker - MongoDB, offrant une solution prête à l’emploi pour le déploiement de bases de données MongoDB dans des conteneurs Docker.
-
Express est un framework web minimaliste et flexible pour Node.js, permettant de créer des applications web robustes et évolutives.
-
MongoDB est un système de gestion de base de données NoSQL orienté document.
-
Body-Parser est un middleware Node.js facilitant le traitement des données du corps des requêtes HTTP dans une application Express.
Étapes :
- Créer un devBox Node.js sur codesandBox
- Utiliser le cours pour installer mongoDB dans le codesandBox, et lancer un container docker mongo.
- Installer les dépendances (librairies), nécessaire au projet.
npm i express mongodb body-parser
- Créer les fichiers de base du projet :
- index.js
- index.html
- style.css
- script.js
- package.json
Il y a des erreurs dans le code que je vous fourni, principalement du fait que j’ai fait évoluer l’exercice plusieurs fois. Vous allez devoir les identifier pour faire fonctionner le project
vous pouvez/devez travailler tous ensembles
Création des fichiers
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Node.js MongoDB Docker</title>
</head>
<body>
<h1>Hello, MongoDB!</h1>
<div>
<label for="dataInput">Data:</label>
<input type="text" id="dataInput" />
<button onclick="sendData()">Send Data</button>
</div>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
public/style.css
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
div {
margin-top: 20px;
}
label {
font-weight: bold;
}
input {
margin-right: 10px;
}
button {
cursor: pointer;
}
public/script.js
function sendData() {
const dataInput = document.getElementById('dataInput');
const outputDiv = document.getElementById('output');
const data = dataInput.value;
// Utilisez fetch pour envoyer des données au serveur
fetch('/sendData', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ data }),
})
.then(response => response.json())
.then(result => {
outputDiv.innerText = `Server Response: ${result.message}`;
})
.catch(error => {
console.error('Error sending data:', error);
});
}
src/index.js
const express = require('express');
const { MongoClient } = require('mongodb');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3000;
// URL de MongoDB sur le port 27017, le protocole est mongodb:// l'hôte est localhost utilisez les information de configuration de docker comme référence.
const mongoUrl = 'mongodb://localhost:27017';
// Utilisez bodyParser pour parser les requĂŞtes JSON
app.use(bodyParser.json());
// Utilisez express.static pour servir les fichiers statiques
app.use(express.static("src/public"));
// Route pour envoyer des données à l'API
app.post('/addData', async (req, res) => {
const dataContent = req.body.data;
try {
// Établir une connexion avec la base de données
const client = new MongoClient(mongoUrl);
await client.connect();
// Sélectionne la base de données et la collection
const collection = client.db().collection('data');
// Insérer une nouvelle donnée dans la collection
await collection.insertOne({ content: dataContent });
// Fermer la connexion
await client.close();
res.json({ message: 'Data added successfully' });
} catch (error) {
console.error('Error adding data:', error);
res.status(500).json({ error: 'Internal Server Error' });
}
});
// Route pour récupérer des données depuis l'API
app.get("/list", async (req, res) => {
try {
// Établir une connexion avec la base de données
const client = new MongoClient(mongoUrl);
await client.connect();
// SĂ©lectionner la collection
const collection = client.db("test").collection("ma_collection");
// Récupérer les données de la collection et les formatter en tableau JSON
const list = await collection.find().toArray();
// Fermer la connexion
await client.close();
// Renvoyer le tableau JSON Ă l'utilisateur
res.json({ list });
} catch (error) {
console.error("Error reading data:", error);
res.status(500).json({ error: "Internal Server Error" });
}
});
// Route pour récupérer un document depuis l'API
app.get("/etudiant/:id", async (req, res) => {
const { id } = req.params;
// à vous de compléter
});
// Route pour modifier un document depuis l'API
app.post("/edit/:id", async (req, res) => {
const { id } = req.params;
// à vous de compléter
});
// ... (autres routes)
app.listen(PORT, () => {
console.log(`Example app listening on port ${PORT}`)
})
Objectifs
Développer le projet créé en utilisant deux documents (cf: modélisation) :
pet et owner pour reprendre le TP précédent, vous pourrez réutiliser un structure connu et simple, ce qui vous permettra de vous concentrer sur l’essentiel.