pwa-cranach-digital-archive
WebDev Projekt 2019 - Cranach Digital App Archive
Praxisprojekt zum Vertiefungsmodul Web Development 2019 an der TH-Köln
Autoren des CDAAâs
- Design: Joel Mai
- FunktionalitÀt: Moritz Dahlke
- Dokumentation: Emre Inci
Projektbeschreibung
Projektziel
Das Ziel des Projekts war es, eine Anwendung zur Bereitsstellung von zusÀtzlichen Informationen zu GemÀlden einer Lucas Cranach Ausstellung zu realisieren.
Was ist das CDAA?
Das CDAA bietet eine sehr einfache, innovative, mobile Version des originalen Cranach Digital Archivâs. Die Anwendung ermöglicht es dem Nutzer, wĂ€hrrend des Aufenthalts in der Lucas Cranach Ausstellung, QR-Codes zu GemĂ€lden einzulesen, um weitere, auf ein Wesentliches reduzierte, Informationen oder alternative Ansichten zum jeweiligen GemĂ€lde zu erhalten.
Das CDAA ist eine Progressive Web App. Das bedeutet, die Anwendung kann sowohl normal in einer Browser-Registerkarte ausgefĂŒhrt, oder aber direkt auf einem Smart-Device installiert werden. Nach dem AusfĂŒhren der auf einem GerĂ€t installierten Anwendung verhĂ€lt sich diese wie eine normale App. Deutlich wird dies dadurch, dass sie mit einem BegrĂŒĂungsbildschirm startet und in der Anwendung keine Browserleiste mehr sichtbar ist.
Da es sich um eine PWA handelt ist es möglich, Website-Daten und Weiteres in den GerĂ€tespeicher (Cache) aufzunehmen und sie somit auch offline verfĂŒgbar zu machen. So muss ein Besucher der Galerie nicht zwangslĂ€ufig Zugang zum Internet besitzen, kann die Anwendung aber trotzdem verwenden, sollte er die Anwendung vorher zu Hause installiert haben.
Die Projektart des CDAA lÀsst sich nicht ganz so leicht auf Deep Dive oder Multiperspective eingrenzen, da keiner der beiden AnsÀtze zu 100% zutreffend ist. In erster Linie findet ein Deep Dive im Bereich Frameworks, sowie im Bereich Frontend Development statt, was sich durchaus auch als Multiperspective definieren lÀsst.
Funktionsweise des CDAA
Die Funktionsweise des CDAA ist sehr einfach. Im Prinzip besteht die Anwendung aus einer Website, die mittels nativem Javascript Service-Worker zu einer PWA umfunktioniert wurde, somit auf einem Smart-Device wie eine App installiert werden kann und dadurch auch offline verfĂŒgbar ist. Durch eine selbst-ernannte âfake APIâ werden Bilder und Bildinformationen abgerufen und gecached. Ein eingebundener QR-Scanner akzeptiert bestimmte QR-Codes und mittels JS wird der Seiteninhalt aktualisiert und angezeigt. Der Scanverlauf wird lokal auf dem GerĂ€t gespeichert und kann vom Benutzer manuell gelöscht werden. Dies funktioniert ĂŒber die native, browser-ĂŒbergreifende IndexedDB.
Installation, Tutorial & Rundgang
Installation der PWA auf einem Smart-Device
- Ăffnen der Demo, welche sich in einem seperaten Repository befindet.
- BrowsermenĂŒ öffnen oder, falls vorhanden, die am unteren Rand erscheinende Pop-Up Nachricht auswĂ€hlen.
- Anwendung zum Startbildschirm hinzufĂŒgen.
- Auf den Startbildschirm wechseln und Anwendung starten.
- Zugriff auf Kamera erlauben und Entscheidung merken.
Zur Anleitung mit Bildern hier klicken.
Anwendung
Nach Start der Anwendung erhĂ€lt der Nutzer die Möglichkeit, mittels QR-Scanner einen jedem GemĂ€lde beiliegenden QR-Code einzuscannen. Dadurch gelangt er auf eine Informationsseite zum jeweiligen GemĂ€lde. Auf dieser Seite findet er zusĂ€tzliche Bildinformationen wie bspw. eine Beschreibung oder Daten ĂŒber BildmaĂe. AuĂerdem ist der Nutzer in der Lage, ĂŒber den sich unter dem Vorschaubild befindenden Link âMehr Bilderâ, eine Ăbersicht mit alternativen Bildansichten wie z.B. schwarz-weiĂ Versionen oder InfrarotabzĂŒge anzeigen zu lassen.
Am unteren Bildschirmrand befindet sich zu jedem Zeitpunkt eine Navigationsleiste, ĂŒber die der Nutzer vier wesentliche Seiten ansteuern kann. Der Indikator fĂŒr die aktuelle Seite ist hierbei optisch hervorgehoben.
Der erste Navigationspunkt blendet den QR-Scanner fĂŒr weitere QR-Scans ein.
Ăber den zweiten Navigationspunkt kann sich der Nutzer seinen Scanverlauf anzeigen lassen, welcher alle zuvor abgerufenen GemĂ€lde in absteigender Reihenfolge beinhaltet. So kann der Nutzer selbst wenn er sich bereits physisch vom GemĂ€lde entfernt hat noch einmal auf die dazugehörigen Informationen zugreifen, um z.B. auseinanderliegende GemĂ€lde miteinander zu vergleichen. DafĂŒr kann der Nutzer das jeweilige Bild einfach antippen.
Ein dritter MenĂŒpunkt steuert eine Galerie an, welche jedes GemĂ€lde in der aktuellen Ausstellung beinhaltet. In dieser Galerie kann der Nutzer GemĂ€lde ĂŒber ihren Namen suchen und finden. Auch hier lĂ€sst sich der jeweilige Eintrag antippen, um auf die Bildinformationen zuzugreifen.
Der vierte und letzte MenĂŒpunkt zeigt dem Nutzer eine Handvoll an nĂŒtzlichen, projektbezogenen Links an und bietet dem Nutzer auĂerdem die Möglichkeit, seinen Scanverlauf zu löschen, um bspw. eine neue Ausstellungstour zu initiieren.
Verwendete Frameworks & Libraries
Weitere Informationen bezĂŒglich des Projekts befinden sich im Wiki des Projekts.
Reflexion/Auswertung nach Abschluss des Projekts
In einer genauen Reflexion des Projektverlaufs werden wesentliche Herausforderungen/Probleme, sowie wichtige und interessante Erkenntnisse die aus der Projektarbeit hervorgingen vorgestellt und zusammengefasst.