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 17. Mai findet eine obligatorische aber nicht bewertete Zwischenpräsentation statt, zu der die statische Version (nur HTML und CSS) des Projekts gezeigt wird.

Die finalen Ergebnisse aller Gruppen werden zur Abschlusspräsentation am 12. Juli vorgestellt.

Die Präsentationen sollen jeweils maximal 5 Minuten dauern und eine für alle zugängliche Live-Version zeigen.
Bei Terminproblemen können Sie mir schreiben.

Bewertung

Die Bewertung 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 für eine 1,0 also 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
• Mindestens drei Detail-Seiten
• Impressum
• Kontaktformular
• Einbinden mindestens eines Bildes / Hintergrundbildes
• Benutzung mindestens einer externen Schriftart, beispielsweise von Google Fonts (Better Google Fonts) oder ähnlichen Diensten
• Einbinden einer Karte, beispielsweise über Google Maps, OpenStreetMap oder ähnliche Dienste. (Wer es schicker möchte: snazzymaps.com bietet diverse Styles für Google Maps)
• Deployment auf FB4-Studi-Server oder über Dienste wie Netlify oder zeit.co/now

CRUD-Backend & Ajax

• 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.
• Daten werden vom Client per Ajax geladen
• Deployment (z.B. über zeit.co/now)

Datenbank

• Anbindung an Datenbank, z.B. vom FB4-Studi-Server
• Aller State wird persistiert / kein anfragen-übergreifender State in der Anwendung
• 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 immer mit der Anzahl der zugeordneten Einträge angezeigt.
• Kategorien sollen angelegt, bearbeitet und gelöscht werden können. (Was in letzterem Fall mit den dazugehörigen Produkten passiert, ist Ihnen überlassen.)

Suche + Filter

• In der Oberfläche global verfügbares Suchfeld
• global oder an einer speziellen Stelle verfügbares Filtermenü
• dedizierte Seite für Suchergebnisse
• Volltextsuche über alle Attribute aller Entitäten
• Mindestens ein Attribut ist mindestens ordinal skaliert, damit darauf über eine Bereichseinschränkung gefiltert werden kann (z.B. Alter von bis)

Auth

• Einloggen mit Benutzername + Passwort
• Möglichkeit zum Ausloggen
• Anzeige des eingeloggten Nutzers im Header
• rudimentäre Rechtekontrolle (bestimmte Aktionen nur für eingeloggte Nutzer)

Responsive Web Design / Progressive Web App

• Sich an die Gerätegröße anpassendes User Interface (von Dektop bis Mobile)
• Manifest mit Name, Homescreen-Icon etc.
• app-ähnliches Verhalten durch entsprechende Meta-Tags oder Manifest-Einträge
• ServiceWorker für Offlinefähigkeit kann genutzt werden

React.js

• Gesamtes Frontend wird unter Verwendung von React komponentenbasiert entwickelt

Ressourcen

• freie Bilder: unsplash.com, picsum.photos designerspics.com
• freue Videos: mazwai.com
• freie Icons: iconfinder.com, freepik.com