fix bonus points
This commit is contained in:
139
README.md
139
README.md
@@ -1,11 +1,11 @@
|
|||||||
# DHBW 2025: Web Engineering Prüfungsleistung
|
# DHBW 2025: Web Engineering Prüfungsleistung
|
||||||
**Maximale Punktzahl: 100 Punkte**
|
**Maximale Basispunktzahl: 100 Punkte + bis zu 15 Bonuspunkte**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 1. Grundanforderungen (insg. 30 Punkte)
|
## 1. Grundanforderungen (30 Punkte)
|
||||||
|
|
||||||
### Projektgrundlagen (15/30 Punkte)
|
### Projektgrundlagen (15 Punkte)
|
||||||
- **Funktionsfähige Anwendung** (8 Punkte)
|
- **Funktionsfähige Anwendung** (8 Punkte)
|
||||||
- Webapp oder Backend-Anwendung läuft fehlerfrei
|
- Webapp oder Backend-Anwendung läuft fehlerfrei
|
||||||
- Kernfunktionalitäten sind in der Projektdokumentation beschrieben und testbar
|
- Kernfunktionalitäten sind in der Projektdokumentation beschrieben und testbar
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
- README.md mit Installation, Verwendung und Technologie-Stack
|
- README.md mit Installation, Verwendung und Technologie-Stack
|
||||||
- Kurze Erklärung der Hauptfunktionen am Anfang relevanter Dateien
|
- Kurze Erklärung der Hauptfunktionen am Anfang relevanter Dateien
|
||||||
|
|
||||||
### Präsentation (15/30 Punkte)
|
### Präsentation (15 Punkte)
|
||||||
- **Elevator Pitch** (5 Punkte)
|
- **Elevator Pitch** (5 Punkte)
|
||||||
- Maximal 1 Minute
|
- Maximal 1 Minute
|
||||||
- Welches Problem wird gelöst und warum wurde es vorher noch nicht gelöst?
|
- Welches Problem wird gelöst und warum wurde es vorher noch nicht gelöst?
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
- **Technische Präsentation** (5 Punkte)
|
- **Technische Präsentation** (5 Punkte)
|
||||||
- PowerPoint/Folien mit Technologie-Stack
|
- PowerPoint/Folien mit Technologie-Stack
|
||||||
- Live-Demo der Anwendung
|
- Live-Demo der Anwendung
|
||||||
- **Projektevolution:** (5 Punkte)
|
- **Projektevolution** (5 Punkte)
|
||||||
Jedes Projekt verläuft unterschiedlich.
|
Jedes Projekt verläuft unterschiedlich.
|
||||||
Sofern es zutrifft, beschreibt die unterschiedlichen Phasen des Projekts.
|
Sofern es zutrifft, beschreibt die unterschiedlichen Phasen des Projekts.
|
||||||
*Wie weit seid ihr gekommen? Wo waren die Stolpersteine? Wie könnte sich eure Anwendung bei fortgesetzter Arbeit entwickeln?*
|
*Wie weit seid ihr gekommen? Wo waren die Stolpersteine? Wie könnte sich eure Anwendung bei fortgesetzter Arbeit entwickeln?*
|
||||||
@@ -37,9 +37,9 @@
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2. Clean Code Prinzipien (insg. 30 Punkte)
|
## 2. Clean Code Prinzipien (25 Punkte)
|
||||||
|
|
||||||
### Projektstruktur (10/30 Punkte)
|
### Projektstruktur (10 Punkte)
|
||||||
- **Ordnerstruktur** (5 Punkte)
|
- **Ordnerstruktur** (5 Punkte)
|
||||||
```
|
```
|
||||||
projekt/
|
projekt/
|
||||||
@@ -64,9 +64,9 @@
|
|||||||
- Ein Konzept pro Datei (Single Responsibility)
|
- Ein Konzept pro Datei (Single Responsibility)
|
||||||
- Konsistente Namenskonventionen: `kebab-case` für Dateien, `camelCase` für Variablen, `PascalCase` für Komponenten/Klassen
|
- Konsistente Namenskonventionen: `kebab-case` für Dateien, `camelCase` für Variablen, `PascalCase` für Komponenten/Klassen
|
||||||
|
|
||||||
### Code-Qualität (10/30 Punkte)
|
### Code-Qualität (10 Punkte)
|
||||||
|
|
||||||
#### KISS Prinzip (2 Punkte)
|
#### KISS Prinzip (3 Punkte)
|
||||||
|
|
||||||
**❌ Nicht so einfach:**
|
**❌ Nicht so einfach:**
|
||||||
```javascript
|
```javascript
|
||||||
@@ -85,23 +85,7 @@ function calculateActiveTotal(data) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**❌ Nicht so einfach:**
|
#### Beschreibende Namen (3 Punkte)
|
||||||
```javascript
|
|
||||||
const u = users.find(u => u.id === id && u.active && !u.deleted) || null;
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Einfach:**
|
|
||||||
```javascript
|
|
||||||
function findActiveUser(users, userId) {
|
|
||||||
return users.find(user =>
|
|
||||||
user.id === userId &&
|
|
||||||
user.active &&
|
|
||||||
!user.deleted
|
|
||||||
) || null;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Beschreibende Namen (2 Punkte)
|
|
||||||
|
|
||||||
**❌ Schlecht:**
|
**❌ Schlecht:**
|
||||||
```javascript
|
```javascript
|
||||||
@@ -117,21 +101,7 @@ let userProfiles = [];
|
|||||||
function calculateTotalPrice(price, taxRate) { return price * taxRate; }
|
function calculateTotalPrice(price, taxRate) { return price * taxRate; }
|
||||||
```
|
```
|
||||||
|
|
||||||
**❌ Unklar und uneindeutig:**
|
#### Funktionsverantwortlichkeiten (4 Punkte)
|
||||||
```javascript
|
|
||||||
const btn = document.getElementById('btn');
|
|
||||||
let flag = false;
|
|
||||||
function process(items) { /* ... */ }
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Sprechende Variablennamen:**
|
|
||||||
```javascript
|
|
||||||
const submitButton = document.getElementById('submit-btn');
|
|
||||||
let isFormValid = false;
|
|
||||||
function validateUserInput(formData) { /* ... */ }
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Funktionsverantwortlichkeiten (5 Punkte)
|
|
||||||
|
|
||||||
**❌ Zu viele Verantwortlichkeiten:**
|
**❌ Zu viele Verantwortlichkeiten:**
|
||||||
```javascript
|
```javascript
|
||||||
@@ -163,7 +133,7 @@ function sendWelcomeEmail(email) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Kommentierung & Dokumentation (5/30 Punkte)
|
### Kommentierung & Dokumentation (5 Punkte)
|
||||||
**JSDoc ist optional und der beste Code muss nicht kommentiert werden.**
|
**JSDoc ist optional und der beste Code muss nicht kommentiert werden.**
|
||||||
|
|
||||||
**❌ Über-/Unterkommentiert:**
|
**❌ Über-/Unterkommentiert:**
|
||||||
@@ -193,40 +163,11 @@ function calculateCompoundInterest(principal, rate, time) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**❌ Unterkommentiert:**
|
|
||||||
```javascript
|
|
||||||
function x(a,b,c,d,e) {
|
|
||||||
return a*b+c-d/e;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**✅ Mit JSDoc dokumentiert:**
|
|
||||||
```javascript
|
|
||||||
/**
|
|
||||||
* Calculates shipping cost based on weight, distance and priority
|
|
||||||
* @param {number} weight - Package weight in kg
|
|
||||||
* @param {number} distance - Delivery distance in km
|
|
||||||
* @param {boolean} isPriority - Priority delivery flag
|
|
||||||
* @returns {number} Total shipping cost
|
|
||||||
*/
|
|
||||||
function calculateShippingCost(weight, distance, priority) {
|
|
||||||
const baseCost = weight * 2.5;
|
|
||||||
const distanceCost = distance * 0.1;
|
|
||||||
const priorityMultiplier = priority ? 1.5 : 1;
|
|
||||||
return (baseCost + distanceCost) * priorityMultiplier;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Live-Demo (5/30 Punkte)
|
|
||||||
- Anwendung läuft während der Präsentation stabil
|
|
||||||
- Alle Kernfunktionen werden erfolgreich vorgeführt
|
|
||||||
- Ungefähr 5 Minuten Demo-Zeit
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3. Accessibility & UX (25 Punkte insg.)
|
## 3. Accessibility & UX (25 Punkte)
|
||||||
|
|
||||||
### Web Accessibility (15/25 Punkte)
|
### Web Accessibility (15 Punkte)
|
||||||
|
|
||||||
#### Semantisches HTML (5 Punkte)
|
#### Semantisches HTML (5 Punkte)
|
||||||
|
|
||||||
@@ -307,7 +248,7 @@ div.clickable:focus {
|
|||||||
<div class="clickable" tabindex="0" aria-label="Menü öffnen">🍔</div>
|
<div class="clickable" tabindex="0" aria-label="Menü öffnen">🍔</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Responsive Design (10/25 Punkte)
|
### Responsive Design (10 Punkte)
|
||||||
|
|
||||||
#### Mobile First Approach (5 Punkte - mindestens 1 Breakpoint)
|
#### Mobile First Approach (5 Punkte - mindestens 1 Breakpoint)
|
||||||
```css
|
```css
|
||||||
@@ -358,9 +299,9 @@ div.clickable:focus {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 4. Erweiterte Technologien & Innovation (15 Punkte insg.)
|
## 4. Technische Umsetzung (20 Punkte)
|
||||||
|
|
||||||
### Plattformunabhängigkeit (5/15 Punkte)
|
### Plattformunabhängigkeit (5 Punkte)
|
||||||
- Funktioniert auf macOS, Windows, GNU/Linux
|
- Funktioniert auf macOS, Windows, GNU/Linux
|
||||||
- Browser-Kompatibilität (Chrome, Firefox, Safari, Edge)
|
- Browser-Kompatibilität (Chrome, Firefox, Safari, Edge)
|
||||||
|
|
||||||
@@ -391,9 +332,7 @@ function copyToClipboard(text) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Entwicklungs-Tools (10/15 Punkte)
|
### Package Management (5 Punkte)
|
||||||
|
|
||||||
#### Package Management (4 Punkte)
|
|
||||||
|
|
||||||
Sämtliche nodeJS/JavaScript Projekte sollten eine `package.json` beinhalten.
|
Sämtliche nodeJS/JavaScript Projekte sollten eine `package.json` beinhalten.
|
||||||
`npm init` und ein Dialog öffnet sich.
|
`npm init` und ein Dialog öffnet sich.
|
||||||
@@ -417,7 +356,7 @@ Sämtliche nodeJS/JavaScript Projekte sollten eine `package.json` beinhalten.
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Build Tools & Optimierung (6 Punkte)
|
### Build Tools & Optimierung (5 Punkte)
|
||||||
- Vite, Webpack, oder ähnliche Tools
|
- Vite, Webpack, oder ähnliche Tools
|
||||||
- Optimierte Produktions-Builds
|
- Optimierte Produktions-Builds
|
||||||
- Debugger und unnötige console.log()'s entfernen
|
- Debugger und unnötige console.log()'s entfernen
|
||||||
@@ -442,10 +381,18 @@ import { debounce } from 'lodash';
|
|||||||
// Debug-Code entfernt in Production
|
// Debug-Code entfernt in Production
|
||||||
```
|
```
|
||||||
|
|
||||||
### Zusätzliche Features (Bonus: bis maximal 10 Punkte zusätzlich)
|
### Live-Demo (5 Punkte)
|
||||||
**Wähle mindestens 2 Bereiche:**
|
- Anwendung läuft während der Präsentation stabil
|
||||||
|
- Alle Kernfunktionen werden erfolgreich vorgeführt
|
||||||
|
- Ungefähr 5 Minuten Demo-Zeit
|
||||||
|
|
||||||
#### API Integration (5 Punkte)
|
---
|
||||||
|
|
||||||
|
## 5. Bonusfeatures (max. 15 Zusatzpunkte)
|
||||||
|
|
||||||
|
**Wähle mindestens 2 Bereiche für Bonuspunkte:**
|
||||||
|
|
||||||
|
### API Integration (5 Bonuspunkte)
|
||||||
|
|
||||||
**❌ Ohne Error Handling:**
|
**❌ Ohne Error Handling:**
|
||||||
```javascript
|
```javascript
|
||||||
@@ -471,7 +418,7 @@ async function fetchUserData(userId) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Local Storage / State Management (5 Punkte)
|
### Local Storage / State Management (5 Bonuspunkte)
|
||||||
|
|
||||||
**❌ Ohne Error Handling:**
|
**❌ Ohne Error Handling:**
|
||||||
```javascript
|
```javascript
|
||||||
@@ -506,7 +453,7 @@ function loadUserPreferences() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Progressive Web App Features (5 Punkte)
|
### Progressive Web App Features (5 Bonuspunkte)
|
||||||
- Service Worker für Offline-Funktionalität
|
- Service Worker für Offline-Funktionalität
|
||||||
- Manifest.json für App-Installation
|
- Manifest.json für App-Installation
|
||||||
- Caching-Strategien
|
- Caching-Strategien
|
||||||
@@ -528,7 +475,7 @@ if ('serviceWorker' in navigator) {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Testing (10 Punkte)
|
### Testing (5 Bonuspunkte)
|
||||||
|
|
||||||
Von Vornherein mitgedachte Tests helfen beim Code-Splitting.
|
Von Vornherein mitgedachte Tests helfen beim Code-Splitting.
|
||||||
Um beim Testen jene Funktionen eindeutig referenzieren zu können, hilft es sie in einzelne Dateien zu verteilen und Ordnern zu gruppieren.
|
Um beim Testen jene Funktionen eindeutig referenzieren zu können, hilft es sie in einzelne Dateien zu verteilen und Ordnern zu gruppieren.
|
||||||
@@ -563,7 +510,7 @@ test('calculateTotal should throw error for invalid input', () => {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Responsive Design Erweitert (5 Punkte - 2 oder mehr Breakpoints)
|
### Erweiterte Responsive Features (5 Bonuspunkte - 3+ Breakpoints)
|
||||||
```css
|
```css
|
||||||
/* Mobile */
|
/* Mobile */
|
||||||
.grid { display: block; }
|
.grid { display: block; }
|
||||||
@@ -591,7 +538,7 @@ test('calculateTotal should throw error for invalid input', () => {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Security Features (5 Punkte)
|
### Security Features (5 Bonuspunkte)
|
||||||
|
|
||||||
**❌ Unsicher:**
|
**❌ Unsicher:**
|
||||||
```javascript
|
```javascript
|
||||||
@@ -622,6 +569,20 @@ function search(query) {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Punkteverteilung im Überblick
|
||||||
|
|
||||||
|
**Basispunkte (100 Punkte):**
|
||||||
|
- Grundanforderungen: 30 Punkte
|
||||||
|
- Clean Code Prinzipien: 25 Punkte
|
||||||
|
- Accessibility & UX: 25 Punkte
|
||||||
|
- Technische Umsetzung: 20 Punkte
|
||||||
|
|
||||||
|
**Bonuspunkte (max. 15 Punkte):**
|
||||||
|
- Bis zu 3 Bonusfeatures à 5 Punkte wählbar
|
||||||
|
- Gesamtmögliche Punktzahl: 115 Punkte
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Abgabe
|
## Abgabe
|
||||||
|
|
||||||
- **Deadline:** 27.07.2025
|
- **Deadline:** 27.07.2025
|
||||||
@@ -635,4 +596,4 @@ function search(query) {
|
|||||||
3. **Fragt bei Unklarheiten** rechtzeitig nach
|
3. **Fragt bei Unklarheiten** rechtzeitig nach
|
||||||
4. **Fokussiert euch** auf Qualität statt Quantität
|
4. **Fokussiert euch** auf Qualität statt Quantität
|
||||||
5. **Behaltet Barrieren im Blick** und vermeidet sie rechtzeitig
|
5. **Behaltet Barrieren im Blick** und vermeidet sie rechtzeitig
|
||||||
5. **Verwendet gute Struktur** um eure Code-Beispiele zu organisieren
|
6. **Verwendet gute Struktur** um eure Code-Beispiele zu organisieren
|
||||||
Reference in New Issue
Block a user