Merge pull request #2 from fhswf/praktikum-8

Praktikum 8

.devcontainer/devcontainer.json

@@ -15,7 +15,9 @@
 		"vscode": {
 			// Add the IDs of extensions you want installed when the container is created.
 			"extensions": [
-				"mongodb.mongodb-vscode"
+				"mongodb.mongodb-vscode",
+				"GitHub.copilot",
+				"GitHub.copilot-chat"
 			]
 		}
 	},

backend/exercise2.md

@@ -0,0 +1,23 @@
+# Frontend an Backend anbinden
+
+In dieser Aufgabe wollen wir das Frontend an das Backend anbinden. Dazu müssen wir die REST-Schnittstelle des Backends im Frontend ansprechen.
+
+## Aufgabe 1: REST-Schnittstelle im Frontend ansprechen
+Aktuell wird die ToDo-Liste im Frontend als Konstante initialisiert.
+Verwenden Sie stattdessen im `onload` Callback die Funktion `fetch()`, um die Liste der ToDos vom Backend zu laden. 
+
+> Zur Erinnerung: Die Funktion `fetch()` gibt ein Promise zurück, d.h. das Ergebnis erhalten Sie *asynchron*.
+
+Das Ergebnis sollten Sie im Frontend in einer Variable speichern, damit Sie die Liste nur einmalig beim Laden der Seite abrufen müssen.
+
+## Aufgabe 2: Hinzufügen, Löschen und Ändern von ToDos
+
+Bei den Änderungen der ToDos müssen Sie darauf achten, dass die Daten im Frontend aktuell bleiben. Konkret heißt das, dass Sie 
+
+- beim Anlegen eines ToDos den neuen Eintrag, den Sie beim POST Request zurückerhalten, auch in die lokale Liste einfügen,
+- beim Löschen eines ToDos im Anschluss den Eintrag aus der Liste entfernen, 
+- Änderungen eines ToDos nach einem erfolgreichen PUT Request auch in die lokale Liste eintragen.
+
+## Aufgabe 3: Testen
+Testen Sie die Anwendung, indem Sie Todos anlegen, bearbeiten und löschen.
+

backend/exercise3.md

@@ -0,0 +1,61 @@
+# Persistenz der ToDo-Objekte
+
+## Aufgabe 1: Beispiel-Todos importieren
+
+Bevor wir mit der Implementierung des Backends beginnen, initialisieren wir die Datenbank mit einigen Beispiel-Todos. Dazu erstellen wir eine neue Datenbank `todos` und eine neue Collection `todos`.
+
+In der Datei `todos.json` befinden sich dazu zwei Beispiel-Todos. Zunächst wollen wir diese importieren und dabei die Datenbank und die Collection anlegen. Dazu verwenden wir den Befehl `mongoimport`:
+
+```MongoDB
+mongoimport -c todos --jsonArray --file todos.json --db todos
+```
+
+Anschließend kontrollieren Sie mithilfe der Mongo-Shell, ob die Daten korrekt importiert wurden:
+
+```MongoDB
+mongosh 
+
+test> use todos
+switched to db todos
+
+test> db.todos.find()
+[
+  {
+    _id: ObjectId("6403604ac1febec4d03dae85"),
+    title: 'Für die Klausur Webentwicklung lernen',
+    due: '2023-01-14T00:00:00.000Z',
+    status: 2
+  },
+  {
+    _id: ObjectId("6403604ac1febec4d03dae86"),
+    title: 'Übung 4 machen',
+    due: '2022-11-12T00:00:00.000Z',
+    status: 0
+  }
+]
+
+test>
+```
+
+## Aufgabe 2: ToDo-Objekte in der Datenbank speichern
+
+Zunächst installieren wir den Node.js Treiber für MongoDB:
+
+```bash
+npm install mongodb
+```
+
+In der Datei `backend/src/db.js` finden Sie eine Klasse DB, die eine Verbindung zur Datenbank herstellt und die CRUD-Operationen auf der Collection `todos` implementiert. Die Klasse DB wird in der Datei `backend/src/app.js` importiert und verwendet.
+
+### Aufgabe 2.1: Implementieren Sie die fehlenden Datenbank-Methoden
+
+Die Methode `DB.queryAll()` ist bereits implementiert. Implementieren Sie analog die fehlenden Methoden für die übrigen CRUD-Operationen analog zu `DB.queryAll()`.
+Die Methoden können jeweils ein `Promise` zurückgeben. Mit den entsprechenden Methoden des Mongo-Treibers (s. [Dokumentation](https://www.mongodb.com/docs/drivers/node/current/)) handelt es sich jeweils um wenige Zeilen.
+
+### Aufgabe 2.2: Implementieren Sie die fehlenden REST-Endpoints
+
+Der REST-Endpoint `GET /todos` ist bereits implementiert. Implementieren Sie analog die fehlenden REST-Endpoints für die übrigen CRUD-Operationen analog zu `GET /todos`.
+
+### Aufgabe 2.3: Testen Sie die REST-Endpoints
+
+Testen Sie die REST-Endpoints mit Hilfe von [Postman](https://www.postman.com/) oder einem anderen REST-Client.

backend/index.js

@@ -9,17 +9,27 @@ const app = express();
  */
 let TODOS = [
     {
-        "id": 1671056616571,
+        "_id": 1671056616571,
         "title": "Übung 4 machen",
         "due": "2022-11-12T00:00:00.000Z",
         "status": 0
     },
     {
-        "id": 1671087245763,
+        "_id": 1671087245763,
         "title": "Für die Klausur Webentwicklung lernen",
         "due": "2023-01-14T00:00:00.000Z",
         "status": 2
     },
+    {
+        "_id": 1671087245764,
+        "title": "Einen Kuchen backen",
+        "due": "2023-01-14T00:00:00.000Z",
+        "status": 1
+    }
 ];
 
 // Your code here
+app.get('/todos', (req, res) => {
+    res.json(TODOS);
+});
+app.listen(3000);