From ff82f5a0542ffe696a5b9b8b30656b01630b3fb9 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Mon, 12 Oct 2026 08:29:27 +0200 Subject: [PATCH] --- 03_js-dom/agenda.md | 67 ++++++++++++++----- .../tag25/02_website/backend/api.rest | 25 +++++++ .../02_website/backend/models/ProductModel.js | 14 ++++ .../tag25/02_website/backend/server.js | 31 +++++++-- 03_js-dom/unterricht/tag25/meeting.md | 8 +-- 5 files changed, 121 insertions(+), 24 deletions(-) create mode 100644 03_js-dom/unterricht/tag25/02_website/backend/api.rest diff --git a/03_js-dom/agenda.md b/03_js-dom/agenda.md index 6e6a514..8cc6800 100644 --- a/03_js-dom/agenda.md +++ b/03_js-dom/agenda.md @@ -430,41 +430,76 @@ Projekte --- -#### TBA - -**Inhalt:** - -- **Exkurs: Gulp vs Vite** -- CRUD - Create - Read - Update - Delete -- Object Methoden. -- Verwendung von Modulen (Bootstrap) - -**Übungen:** - -Projekte & optionale Übungen +## BROWSER API --- -#### Tag 29 +#### Tag 26 **Inhalt:** - **Exkurs: DOM Inhalte über mit REST API Express** - **Erweiterung Frontend um REST API** -- CRUD - Create - Read - Update - Delete +- CRUD - (Create - Read) - Update - Delete - BREAD - Browse - Read - Edit - Add - Delete - Verwendung von Modulen (Modal von BS, Toastify, Splide) **Übungen** -Projekte + weiteres Modul einbinden +Projekte & optionale Übungen --- -#### Tag 30 +#### Tag 27 +- **Exkurs: Vite vs Gulp** +- **SASS 7 on 1 mit Bootstrap 6** - **Projektfinalisierung Express + REST API** - Einführung in Typescript --- + +### Tag 28 + +**Inhalt:** + +- Typescript Grundlagen +- Typescript Annotationen +- Typescript "more Types" + +**Übungen:** + +Übungen 1 - 5 + +--- + +### Tag 29 + +**Inhalt:** + +- Typescript Annotationen +- Primitive Types, Object, Union Types +- type statement vs interface +- Type Assertion with as and <> +- Typescript "more Types" + +**Übungen:** + +Übungen 4 - 9 + +--- + +### Tag 30 + +**Inhalt:** + +- Typescript "more Types" + - Interface, as statement, literale +- Typescript Narrowing with Guards + - truthiness, equality, in-operator, type-predicate +- TS Funktionen und Objekte + +**Übungen:** + +Übungen 10 - 19 diff --git a/03_js-dom/unterricht/tag25/02_website/backend/api.rest b/03_js-dom/unterricht/tag25/02_website/backend/api.rest new file mode 100644 index 0000000..a72f66d --- /dev/null +++ b/03_js-dom/unterricht/tag25/02_website/backend/api.rest @@ -0,0 +1,25 @@ +# BROWSE Products + +GET http://127.0.0.1:8000/api/products + +### + +# READ Product + +GET http://127.0.0.1:8000/api/products/174a2a19-26eb-475e-af47-4f46d2ab62ec + +### + +# ADD Product + +POST http://127.0.0.1:8000/api/products +Content-Type: application/json + +{ + "name": "Testproduct", + "price": 9.99 +} + +### + + diff --git a/03_js-dom/unterricht/tag25/02_website/backend/models/ProductModel.js b/03_js-dom/unterricht/tag25/02_website/backend/models/ProductModel.js index 0ae9d29..a3d0a39 100644 --- a/03_js-dom/unterricht/tag25/02_website/backend/models/ProductModel.js +++ b/03_js-dom/unterricht/tag25/02_website/backend/models/ProductModel.js @@ -29,10 +29,24 @@ const ProductModel = () => { return product; }; + const add = (product) => { + const { name, price } = product; + + products.push({ + _id: id(), + position: products.length + 1, + name, + price: Number(Number(price).toFixed(2)), + }); + + return true; + }; + return { load, getAll, get, + add, }; }; diff --git a/03_js-dom/unterricht/tag25/02_website/backend/server.js b/03_js-dom/unterricht/tag25/02_website/backend/server.js index 8540556..a40d340 100644 --- a/03_js-dom/unterricht/tag25/02_website/backend/server.js +++ b/03_js-dom/unterricht/tag25/02_website/backend/server.js @@ -14,7 +14,8 @@ products.load(); const app = express(); // Middleware ======= -// app.use(express.static('./public')); +app.use(express.static('./public')); +app.use(express.json()); // => HTTP-Request Body wird als JSON Objekt erwartet und geparsed. // app.use(bodyParser.json()) - Module: body-parser war in express 4 notwendig. // Routes =========== @@ -25,18 +26,40 @@ const app = express(); // PUT/PATCH - Daten aktualisieren /Datensatz aktualisieren // DELETE - Daten löschen +// HTTP - Methode - POST +// (C)RUD - create +// BRE(A)D - add +app.post('/api/products', (req, res) => { + const product = req.body; + + if (!products.add(product)) { + return res.status(400).send({ msg: 'Could not add product', status: 400, success: false }); + } + + return res.send({ msg: 'Product added', status: 200, success: true, data: product }); +}); + // HTTP - Methode - GET // C(R)UD - read // (B)READ - browse app.get('/api/products', (req, res) => { const data = products.getAll(); - res.send(data); + return res.send(data); +}); + +// HTTP - Methode - GET +// C(R)UD - read +// B(R)EAD - read +app.get('/api/products/:id', (req, res) => { + const { id } = req.params; + const data = products.get(id); + return res.send(data); }); // app.get('/', (req, res) => { - res.send('Server is running!'); + return res.send('Server is running!'); }); app.get('/persons', (req, res) => { @@ -49,7 +72,7 @@ app.get('/persons', (req, res) => { // ]), // ); - res.send([ + return res.send([ { firstName: 'Max', lastName: 'Mustermann' }, { firstName: 'John', lastName: 'Wick' }, ]); diff --git a/03_js-dom/unterricht/tag25/meeting.md b/03_js-dom/unterricht/tag25/meeting.md index cf9240f..b1e0064 100644 --- a/03_js-dom/unterricht/tag25/meeting.md +++ b/03_js-dom/unterricht/tag25/meeting.md @@ -1,6 +1,6 @@ # Meeting Fr. 09.10.2026 -- [ ] Benjamin 14:30 - 14:40 -- [ ] Florian 14:40 - 14:50 -- [ ] Christian 14:50 - 15:00 -- [ ] Stefan 15:00 - 15:10 \ No newline at end of file +- [x] Benjamin 14:35 - 14:45 +- [x] Florian 14:45 - 14:55 +- [x] Christian 14:55 - 15:05 +- [x] Stefan 15:05 - 15:15 \ No newline at end of file