Im Rahmen des Projekts sollen Inhalte, Konzepte und Techniken aus den einzelnen Veranstaltungen des Moduls Web Development im Team in einem konkreten Anwendungsfall eingesetzt und damit eingeübt als auch vertieft werden. Dabei stehen zwei Anwendungsgebiete zur Auswahl: Offene Daten aus dem Bundesministerium für Verkehr und Infrastruktur und Cranach Kontext.

Das Projekt muss im Team von zwei bis drei Teilnehmern absolviert werden. Jedes Team entwickelt zunächst zwei konkrete Projektvorschläge im Rahmen der Anwendungsgebiete. Dabei gibt es zwei grundsätzliche Ansätze: Deep Dive und Multiperspective. Bei der ersten Richtung ist die Grundidee, Inhalte, Konzepte und Techniken aus einer Veranstaltung möglichst gut, sauber und umfassend anzuwenden und so einem eher kleinen Anwendungsfall möglichst tief zu durchdringen, bzw. möglichst umfassend und professionell zu lösen. Bei der zweiten Richtung geht es darum, Ansätze und Techniken aus zwei oder mehr Veranstaltungen zu verknüpfen und anzuwenden, um so einen größeren Anwendungsfall aus mehreren Perspektiven zu bearbeiten, wobei die Durchdringung, bzw. die Tiefe der Lösung hier naturgemäß geringer sein darf als bei der vorgenannten Richtung.

Versuchen Sie einen möglichst professionellen und transparenten Workflow zu realisieren.

Anwendungsgebiet 1: Open Data

Das Bundesministeriums für Verkehr und Infrastruktur stellt mit der mCLOUD Plattformen bereit, die den offenen Zugang zu Daten des Geschäftsbereichs, den Daten und Diensten aus dem Copernicus Erdbeobachtungsprogramm und zu weiteren Daten aus den Themenfeldern des BMVI ermöglichen.

Für einen Deep Dive Ansatz könnte hier, z.B. ein Benachrichtigungsdienst konzipiert und umgesetzt werden, der einen bestimmten Bereich von Daten auf diesem Portal überwacht und Dienstnutzer, nach bestimmten Kriterien über das Vorliegen von Daten bzw. Ergänzungen oder Änderungen, informiert.

Für einen Multiperspective Ansatz könnten hier z.B. Daten aus dem Portal in ein Frontend gegeben und/oder visualisiert werden. Als zusätzliche Perspektive könnten auch Sensoren oder Aktoren zur Steuerung oder Anzeige integriert werden. Eine weitere Möglichkeit wäre die Bereitstellung eines Services für andere Dienstnehmer mit entsprechender Integration von Authentisierungs-, Authentifizierungs- und Autorisierungsmechanismen.

Anwendungsgebiet 2: Cranach Kontext

In diesem Anwendungsgebiet wird der Grundgedanke aus dem letzten Semester Screendesign aufgenommen, nämlich eine Anwendung zur Bereitstellung von zusätzlichen Informationen zu Gemälden einer Lucas Cranach Ausstellung zu realisieren.

Für einen Deep Dive Ansatz könnte hier, z.B. einer der enstandenen Entwürfe möglichst genau und gut strukturiert umgesetzt werden.

Für einen Multiperspective Ansatz könnte hier z.B. die physikalische Annäherung an ein Gemälde integriert oder andere Interaktionsmöglichkeiten über Sensoren konzipiert und implementiert werden.

Rahmenbedingungen

Abgabe-/ Präsentationstermin/ Bearbeitungszeitraum

Der Termin steht noch nicht genau fest. Er wird entweder in der zweiten Prüfungswoche, oder in der ersten Vorlesungswoche des Wintersemesters, also Anfang Oktober 2019 liegen. Somit steht ein Bearbeitungszeitraum von ca. 13 Wochen zur Verfügung.

Workload

Das Projekt hat einen Workload von 5CP, das entspricht einem studentischen Workload von 150 Stunden. Dies entspricht etwa 19 Tagen, bei einer Arbeitszeit von 8 Stunden pro Tag. Bei mehreren Teammitgliedern multipliziert sich der zur Verfügung stehende Workload entsprechend.

Beratungs- und Feedbacktermine

Während der Vorlesungsfreien Zeit werden noch einige Beratungstermine angeboten. Die Termine werden im Zeitplan zum Modul in Kürze veröffentlicht.

Arbeitsergebnis

Im Sinne des Agilen Manifests steht das Erarbeiten einer lauffähigen Software im Vordergrund. Allerdings ist Anwendung der vermittelten Arbeits- und Kollaborationstechniken auch ein wichtiger Punkt in diesem Projekt. Darunter fallen z.B.:

Nutzung von Git zur Versionskontrolle und Kollaboration
Einreichung sinnvoller Commits, ggf. Zusammenfassung von Commits
Nutzung von Branches
Verbesserung der Code Qualität durch Codereviews/ Pull Requests
Integration von Tests
Nutzung von Github Issues und Projektmanagement Werkzeugen

Im Bereich Phasen und Ergebnisse finden Sie hierzu mehr Informationen.

Dokumentation

Bitte erzeugen Sie eine kurze, professionelle und möglichst prägnante Projektbeschreibung auf der Github.io Seite Ihres Projekts. Der Prozess sollte über die Nutzung von Issues und Pull Requests ausreichend dokumentiert sein.

Die Projektbeschreibung richtet sich an alle Interessierten. Sie sollte das Vorhaben kurz, prägnant und professionell vorstellen und dabei mindestens folgende Fragen beantworten.

Wer ist Autor des Projekts?
Was ist das Projektziel?
Was war der Ausgangspunkt?
In welchem Kontext ist das Projekt angesiedelt?
Um welche Projektart handelt es sich (Deep Dive oder Multiperspective) und wie wird das Projekt dieser Projektart gerecht?
Wie nutze ich als Endnutzer das Projekt? (kleiner Leitfaden/ Tutorial)
Wie sieht die Roadmap des Projekts aus? Was konnte umgesetzt werden? Wie könnten Folgeprojekte aussehen?

Technische Fragen

Welche Technologien, Frameworks, Libs, etc. nutzt das Projekt und warum?
Was brauche ich, um das Projekt in meiner Umgebung zu installieren?
Wie installiere ich das Projekt? (Installationsanleitung)

Diskussion/ Reflexion

Verfassen Sie bitte eine prägnante und professionelle Reflexion. Diese kann Teil Ihrer github.io Seite sein, oder in einer zusätzlichen Markdown Datei hinterlegt werden. Hierbei ist das Ziel einem Fachpublikum wesentliche Herausforderungen, wichtige Aspekte und interessante Implementierungsdetails Ihres Projekts vorzustellen, z.B.

Welche Probleme galt es zu lösen und wie wurden sie gelöst?
Welche Probleme konnten nur mit einem „Dirty Hack” eliminiert werden?
Was wurde besonders gut oder elegant gelöst?
Welcher Teil hat den größten Aufwand/ die meiste Anstrengung gekostet?
Was hat Sie überrascht?
Was würden Sie eigentlich gerne noch mal refactoren?

Phasen und Ergebnisse

Projekt- & Teamfindung 04. bis 09. Juli 2019	Pro Team werden zwei konkrete Projektvorschläge verfasst und auf dieser Seite bis zum 09. Juli 2019 veröffentlicht. Hier finden Sie hier eine entsprechende [Anleitung zur Veröffentlichung](#anleitung-zur-veroeffentlichung).
Projektdiskussion & -entscheidung 11. Juli 2019	Beim Feedbacktermin werden die Vorschläge diskutiert, ggf. angepasst und final entschieden, so dass ab diesem Termin gestartet werden kann.
Abgabe Repo 23. September 2019	An diesem Tag werden Forks von den Repos gezogen, die als Basis für die Bewertung des Projekts in den Dimensionen Code, Organisation & Kollaboration dienen.
Abgabe Dokumentation 30. September 2019	An diesem Tag werden Forks von den Repos gezogen, die als Basis für die Bewertung des Projekts in den Dimensionen Code, Organisation & Kollaboration dienen.
Präsentationstag 07. Oktober 2019, 15:00 Uhr, Raum 3.216	An diesem Tag wird das Projekt öffentlich präsentiert und ausgestellt. Dafür muss ein Demonstrator bereitgestellt werden, ein Poster mit Erläuterungen zum Demonstrator und eine 10-minütige Präsentation des Projekts gehalten werden. Darüber hinaus muss eine kurze, professionelle und möglichst prägnante Projektdokumentation als Github.io Seite zur Verfügung stehen.

Projektvorschläge

All-for-One-Rentals

Carlos Bystron, Felix Günthner, Marius Hammer

Git Repository: One For All Rental">One For All Rental
Anwendungsgebiet: Open Data
Typ: Multiperspective

Idee

Ziel ist es eine WebApp auszuarbeiten, welche die Leihfahrzeuge mehrerer Anbieter anzeigt und dem User so eine Auswahl des passenden Anbieters für die konkrete Fahrt ermöglicht. Insbesondere soll die Anwendung sich vorerst auf das Anzeigen von Leihfahrrädern und E-Scootern im Großraum Köln beschränken um den Projektscope realisierbar zu halten. Eine Erweiterung des Radius sowie der Fahrzeugklassen ist jedoch durchaus möglich.

Die benötigten Daten werden durch das Portal mCloud sowie die APIs der Hersteller zur Verfügung gestellt.

Eine Erweiterung unter Einbeziehung des Lehrstoffes aus dem Kurs IOT scheint ebenfalls möglich. Ein Fahrrad ließe sich mit den nötigen Sensoren und ggf. Aktoren ausstatten um ebenfalls in der WebApp angezeigt werden zu können.

Besonderheit

Die Projektidee lässt sich gut modular entsprechend des Bottom Up Prinzips umsetzen. Zuerst werden Kernfunktionalitäten implementiert, dann ggf. Erweiterungen realisiert. Eine Anwendung die unsere Projektidee bereits vollumfänglich umsetzt ist uns nicht bekannt.

WebApp Cranach

Jan Koll, Shirina Löber

Git Repository: https://github.com/JanKoll/cranach-webapp
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Dive Deep

Idee

Screen Design Projekt ausarbeiten und als hybride oder WebApp umsetzen.

Besonderheit

Arbeiten mit passenden Framworks, z.B. Ionic oder Vue.

Relaunch Cranach Website

Jan Koll, Shirina Löber

Git Repository: https://github.com/JanKoll/cranach-website-relaunch
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Dive Deep

Idee

Eine umfassende Neugestaltung und Umsetzung der Cranach Webseite auf auf Basis eines CMSs.

Besonderheit

Komplexes System mit möglicherweise speziellen Ausnahmefällen; Multilanguage System; Barrierefreiheit; Responsive Design;

Rundgang mit NFC-Chipkarten

Christopher Schmitz, Bogdan Krenz, Dogus Ünsala

Git Repository: https://github.com/bogdankrenz/wd-projekt-2019
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Multiperspective

Idee

Ein Rundgang durch das Museum mit Hilfe von NFC-Chipkarten, die man an das Gemälde (oder ein Chipkartenleser in der Nähe des Bildes) halten kann und dann die Infos aufs Smartphone/Tablet bekommt.

Besonderheit

Visualizing Open Data

Christopher Schmitz, Bogdan Krenz, Dogus Ünsala

Git Repository: https://github.com/bogdankrenz/wd-projekt-2019
Anwendungsgebiet: Open Data
Typ: Deep Dive

Idee

Open Data von dem Verkehrsminesterium nutzen, um diese in einer Website in Tabellen und Graphen zu visualisieren und ggf. zu vergleichen.

Erweiterte Interaktion mit den Gemälden

Dennis Sterle, Hendrik Pawlowski

Git Repository: https://github.com/dsterle/cranach_erweiterte_interaktion
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Multiperspective

Idee

Die Idee schnell Informationen über das vorliegende Gemälde zu erhalten soll verbessert werden, indem die Gemälde beispielsweise mit einem Button oder Ähnlichem ausgestattet werden. Betätigt man den Button, so wird dem Besucher direkt die jeweilige Website auf dem Iphone angezeigt (funktioniert nur, wenn entsprechende Funktion, die zusätzlich implementiert werden müsste, beim Iphone / auf der Website aktiviert ist). Eine andere Möglichkeit wäre eine Art Ultrashall-Sensor neben den Gemälden zu platzieren, um das Iphone lediglich an diese Stelle halten zu müssen, um die Website angezeigt zu bekommen. Weiterhin könnte die gleiche Idee auch mit Sound-Dateien für die jeweiligen Gemälde umgesetzt werden.

Besonderheit

Die Umsetzung eines Entwurfs aus Screendesign könnte mit einem speziellen Framework wie Vue oder React erfolgen.

Cranach QR Code / NFC Expansion

Dennis Sterle, Hendrik Pawlowski

Git Repository: https://github.com/dsterle/cranach_qr_nfc_expansion
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Multiperspective

Idee

Die Gemälde des Lucas Cranach Archivs werden mit QR codes oder auch, wenn möglich mit NFC-chips augestattet. Wenn die Besucher des Museums diese scannen, werden sie auf die jeweilige Website des Gemäldes weitergeleitet.

Besonderheit

Verknüpfung von QR codes / NFC mit einer Website

Bildinformationen durch Bluetooth Beacons mit Mobile Device

Powerrangers, Moritz Dahlke, Joel Mai, Emre Inci

Git Repository: https://github.com/Inf166/WDSS19-Praxisarbeit
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Dive Deep

Idee

Bei dem Besuch einer Museumsaustellung können Besucher mit einem bluetooth-fähigen Gerät in die Nähe von Gemälden gehen, welche mit Bluetoothbeacons versehen sind. Bei ausreichender Nähe bekommen die Besucher Informationen zu den Gemälden angezeigt.

Besonderheit

Grundsätzlich ist das ja die bekannte Version, welche sicherlich ein spannedes Projekt darstellt, jedoch wollen wir ggf. die Idee um Flowcontrol erweitern, d.h. das die Benutzer sehen können wo es sich gerade im Museum staut und wo wenig Menschen sind. Des Weiteren kann das Museum anonyme Daten darüber erheben, wie viele Besucher sich an welchem Bild aufgehalten haben.

Bildinformationen durch Bilderkennung mit Mobile Device

Powerrangers, Moritz Dahlke, Joel Mai, Emre Inci

Git Repository: https://github.com/Inf166/WDSS19-Praxisarbeit
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Dive Deep

Idee

Mit Hilfe einer Webanwendung/App kann der Benutzer die Gemälde im Museum einscannen. Das eingescannte Bild wird darauf hin analysiert und dem Benutzer zugehörige Ansichten und Informationen zu dem Bild geliefert.

Besonderheit

Anders als bei den Bluetooth Beacons ist man hier von der Entfernung und Frequenzstörungen unabhängig und der Benutzer kann selbst auswählen wann er Informationen angezeigt bekommen möchte.

Cranach Bildergalerie als SPA PWA

Raphael Höser, Tim Missal

Git Repository: https://github.com/Snapstromegon/TH-SS19-WD-Projekt
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Dive Deep

Idee

Eine Bildergalerie (mit zusätzlichen Informationen) als Single Page Application umsetzen, welche zusätzlich eine Progressive Web App ist.

Besonderheit

Entweder wird ein besonderer Schwerpunkt auf offline first Aspekte der PWA gesetzt und der SPA Teil mit Vue gelöst,

oder die SPA wird mit besonderem Augenmerk auf native Web Components via Custom Elements V1 umgesetzt und somit komplett auf ein Frontend Framework verzichtet.

CDA to JSON Backend

Raphael Höser, Tim Missal

Git Repository: https://github.com/Snapstromegon/TH-SS19-WD-Projekt
Anwendungsgebiet: Lucas Cranach Archiv
Typ: Dive Deep

Idee

Einen API Endpunkt bereitstellen, welcher als Open Data Provider für das Cranach Archiv agiert und die Daten über einen Web Crawler/Scraper entweder vorbezieht oder bei Anfragen direkt parsed. Zudem kann der Endpunkt Vorschläge für ähnliche Bilder liefern.

Besonderheit

Besonderer Wert wird hier auf eine klare Übersetzung der CDA Seite in eine REST(ful) API und deren Dokumentation gelegt. Die Vorschlagsfunktion soll Metainformationen der Bilder analysieren und z.B. ähnliche Datierung oder Zuordnung und Ausstellungen evaluieren und entsprechend ähnliche Bilder vorschlagen können.

Um Ihre Projektvorschläge zu veröffentlichen müssen Sie zunächst das Veranstaltungsrepo in Ihren Account forken. Dann im Verzeichnis «_proposals/2019» eine neue Markdowndatei anlegen und diese entsprechend der Beispieldatei füllen. Danach die Änderungen in Ihrem Fork commiten und dann einen Pull Request im Veranstaltungsrepo initiieren.

Dazu gibt es hier noch ein geschmeidiges Videotutorial.

WebDev Projekt 2019

Open Data // Cranach Kontext

Anwendungsgebiet 1: Open Data

Anwendungsgebiet 2: Cranach Kontext

Rahmenbedingungen

Abgabe-/ Präsentationstermin/ Bearbeitungszeitraum

Workload

Beratungs- und Feedbacktermine

Arbeitsergebnis

Dokumentation

Technische Fragen

Diskussion/ Reflexion

Phasen und Ergebnisse

Projektvorschläge

All-for-One-Rentals

Idee

Besonderheit

WebApp Cranach

Idee

Besonderheit

Relaunch Cranach Website

Idee

Besonderheit

Rundgang mit NFC-Chipkarten

Idee

Besonderheit

Visualizing Open Data

Idee

Erweiterte Interaktion mit den Gemälden

Idee

Besonderheit

Cranach QR Code / NFC Expansion

Idee

Besonderheit

Bildinformationen durch Bluetooth Beacons mit Mobile Device

Idee

Besonderheit

Bildinformationen durch Bilderkennung mit Mobile Device

Idee

Besonderheit

Cranach Bildergalerie als SPA PWA

Idee

Besonderheit

CDA to JSON Backend

Idee

Besonderheit