Semesteraufgabe
Über das Semester hinweg soll eine Web-Anwendung zur Verwaltung von Dingen entwickelt werden. “Dinge” können beispielsweise Projekte, Lebensmittel oder Pokémon sein – die Wahl ist Ihnen überlassen.
Die Anwendung kann allein oder in einer Gruppe von bis zu vier Personen bearbeitet werden. Die Anforderungen steigen mit der Gruppengröße.
Präsentationen
Am 8. November findet eine obligatorische aber nicht bewertete Zwischenpräsentation statt, zu der die statische Version (nur HTML und CSS nötig) des Projekts gezeigt wird.
Die finalen Ergebnisse aller Gruppen werden zur Abschlusspräsentation am 31. Januar vorgestellt.
Die Präsentationen sollen jeweils maximal 10 Minuten dauern und eine für alle zugängliche Live-Version zeigen.
Bei Terminproblemen können Sie mir schreiben.
Bewertung
Die Bewertung des Projekts findet auf Grundlage der in der Abschlusspräsentation vorgestellten Ergebnisse statt.
Es gibt einzelne Blöcke: Einen Minimalblock, der mindestens erfüllt sein muss, um als Einzelperson den Kurs zu bestehen und sieben weitere Blöcke.
Für die gleiche Note muss pro weiterer Person ein weiterer Block erfüllt werden. Eine Vierergruppe muss also für eine 1,0 alle acht Blöcke erarbeiten, eine Zweiergruppe nur sechs.
Bewertungsblöcke
- Verwenden Sie keine Web-Generatoren und keine CSS-Frameworks wie Bootstrap oder Material UI. Sie müssen den Code selber schreiben.
- Achten Sie darauf, kein urheberrechtlich geschütztes (Bild)-Material zu verwenden.
Basis
- Statische HTML-Seite mit Beispielseiten für Dinge und Kategorien
- Dinge haben mindestens drei Attribute (Name, Preis, Mana o.ä.)
- Einbindung eines externen Stylesheets, keine internen oder inline Styles
- Globale Header und Footer
- Übersichtsseite (PLP)
- Mindestens drei Detail-Seiten (PDP)
- Impressum
- Kontaktformular (muss keine Mail verschicken)
- Einbinden mindestens eines Bildes / Hintergrundbildes
- Benutzung mindestens einer externen Schriftart, beispielsweise von Bunny.net Fonts, Google Fonts oder ähnlichen Diensten
- Einbinden einer Karte, beispielsweise über OpenFreeMap, OpenStreetMap, Google Maps oder ähnliche Dienste. (Wer es schicker möchte: snazzymaps.com bietet diverse Styles für Google Maps)
- Deployment auf einem Sever Ihrer Wahl
- statische Seiten können Sie kostenlos aus Ihrem GitHub-Repo heraus über GitHub Pages hosten
CRUD-Backend
- Benutzern soll es möglich sein, Einträge hinzuzufügen, anzuzeigen, zu ändern und zu löschen (CRUD).
- Alle Eingabedaten werden auf Validität und Plausibilität geprüft und bereinigt.
- Deployment auf einem Sever Ihrer Wahl
- kostenloses Hosting bieten Dienste wie Netlify oder Vercel
- im GitHub Student Developer Pack gibt es Credits für z.B. Digital Ocean und Heroku
Datenbank
- Anbindung an eine Datenbank
- Aller State wird persistiert / kein anfragen-übergreifender State in der Anwendung
- Schutz for Injections durch Verwendung von Prepared Statements o.ä.
- (Mock-Daten können über Dienste wie mockaroo generiert werden)
Kategorien
- Beim Anlegen neuer Einträge sollen eine oder mehrere Kategorien ausgewählt werden können, denen der Eintrag zugeordnet wird.
- Kategorien haben einen Namen und werden in der Oberfläche immer mit der Anzahl der zugeordneten Einträge angezeigt.
- Kategorien sollen angelegt, bearbeitet und gelöscht werden können (CRUD) – bitte bedenken Sie, was nach dem Löschen mit den dazugehörigen Produkten passiert
Suche + Filter
- ein global verfügbares Suchfeld (z.B. im Header)
- ein global oder an einer speziellen Stelle verfügbares Filtermenü
- dedizierte Seite für Suchergebnisse
- Volltextsuche über alle passenden Attribute aller Entitäten
- Mindestens ein Attribut ist mindestens ordinal skaliert, damit darauf über eine Bereichseinschränkung gefiltert werden kann (z.B. Preis von bis)
Auth
- Nutzer können sich registrieren
- Einloggen mit Benutzername + Passwort
- Anzeige des eingeloggten Nutzers im Header
- Möglichkeit zum Ausloggen
- rudimentäre Rechtekontrolle: bestimmte Aktionen sind nur für eingeloggte Nutzer möglich
- Nutzer-Passwörter werden nach Stand der Technik gehasht gespeichert
Responsive Web Design / Progressive Web App
- Sich an die Gerätegröße anpassendes User Interface (von Desktop bis Mobile)
- Manifest-Datei mit Name, Homescreen-Icon etc.
- app-ähnliches Verhalten durch entsprechende Meta-Tags oder Manifest-Einträge
- Eingabefelder nutzen korrekte Input-Types
- Bilder werden in automatisch in der passenden Größe geladen
- ServiceWorker für Offlinefähigkeit kann genutzt werden
React.js & Ajax
- Gesamtes Frontend wird unter Verwendung von React komponentenbasiert entwickelt
- Daten werden vom Client per Ajax geladen
Ressourcen
- freie Bilder: unsplash.com, picsum.photos designerspics.com
- freue Videos: mazwai.com
- freie Icons: iconfinder.com, freepik.com