Progressive Web App

Unsere Projektarbeit bestand darin eine Progressive Web App zu entwickeln. Die Progressive Web App, kurz PWA, bietet sowohl die nützlichsten Funktionalitäten der Web App als auch der nativen App. So muss sie wie die Web App einmalig geschrieben werden und funktioniert analog zur nativen App auch offline. Die PWA wird über den Browser (URL) aufgerufen und ist somit plattform- und betriebssystemunabhängig. Dennoch kann sie an mobilen Endgeräten auf den Bildschirm verknüpft werden, wodurch der User häufig nicht bemerkt, dass es sich nicht um eine native App handelt. Dementsprechend sind keine Installationen und manuelle Updates notwendig. Ein weiterer Vorteil, den die PWA bietet, ist die Offlinefunktionalität. Denn sobald sie einmal aufgerufen wurde, kann sie im Anschluss auch ohne bestehende Internetverbindung verwenden werden. Aufgrund der zahlreichen Vorteile, insbesondere der kostengünstigen und ressourcenarmen Entwicklung, haben wir uns gemeinsam dazu entschieden eine PWA zu programmieren. Im Rahmen unserer Projektarbeit wollten wir eine Progressive Web App realisieren, die als Einkaufslistenscanner agiert. Sie soll somit fähig sein, Barcodes (EAN 13) über einen Kamerazugriff zu scannen und das entsprechende Produkt mithilfe einer Datenbank auszulesen. Unsere PWA soll die eingescannten Nummern an eine Datenbank schicken. In dieser ist die Nummer mit dem passenden Produkt hinterlegt und der entsprechende Artikel kann auf die Einkaufsliste hinzugefügt werden. Diese PWA soll den Alltag erleichtern und die Möglichkeit bieten, dass alle Mitglieder eines Haushalts Zugriff auf die Einkaufsliste haben und Artikel sowohl hinzuzufügen als auch entfernen können. Damit der Einkaufslisten Scanner sowohl auf dem Desktop als auch auf dem gewünschten Endgerät online und offline funktioniert, war es von Vorteil diese Idee als Progressive Web App umzusetzen. Es soll die Möglichkeit bestehen, eine Verknüpfung der Applikation auf den Homedisplay des gewünschten Gerätes hinzuzufügen, damit das Öffnen und Nutzen des Einkaufslistenscanners schnell und problemlos erfolgt. Die Usabilty soll somit für den Nutzer so angenehm wie möglich gemacht werden.
Für die Entwicklung haben wir unterschiedliche Webtechnologien benutzt. Zum einen React.js für eine bessere Softwareskalierbarkeit als auch Flexibilität und Bootstrap für das responsive Webdesign. Darüber hinaus haben wir die Datenbank von ean-search.org benutzt, die die EAN zu den entsprechenden Artikeln besitzt. Für die eigene Datenbank haben wir Pouch DB und Couch DB verwendet. Darüber hinaus haben wir die Lizenz der Barcode Scanner SDK von DynamSoft erhalten und durften diese nutzen.
Abschließend kann man sagen, dass die Projektarbeit unsere informationstechnischen Kenntnisse vorangeschritten hat und wir unsere Fähigkeiten im Rahmen der Datenbanken und der Progressive Web App erweitern konnten. Darüber hinaus haben wir eine gute Gruppendynamik entwickelt und konnten dadurch viele Schwierigkeiten als Team lösen. Wir möchten uns herzlichst bei DynamicSoft bedanken, dass wir die Lizenz für den Barcode Scanner erhalten haben. Dadurch wurde uns die Arbeit erheblich erleichtert.

 

Projektteam:
Tim Karger, Marcel Wiskow, Grischa Daum, Sina Schnebelt

Projektbetreuung:
Prof. Dr. Roland Riempp