Zur Website: qrona.de

Motivation

Mit der exponentiellen Verbreitung von Covid-19 ist es immer schwieriger Infektionsketten nachzuverfolgen. Mit unserer App soll das vereinfacht werden.

Funktionsweise

App für Nutzer

Ein User lädt die App runter und gibt seine Kontaktdaten an (E-Mail und/oder Telefon). Wenn der User sich an einem Öffentlichen Ort aufhält (Supermarkt, Arztpraxis, etc.) kann er einen dort ausgehängten QRona QR code mit der App scannen. Diese übermittelt an den Server einen Timestamp. Somit werden alle Personen erfasst die zur gleichen Zeit am gleichen Ort sind.

Web App für Geschäftsbetreiber

Betreiber von Supermärkten und anderen öffentlichen Orten können auf unserer Website den QR Code für ihren Ort generieren. Dieser muss dann gut sichtbar ausgehangen werden.

API für Ämter

Gesundheitsämter und andere zuständigen Behörden können über eine API auf die Daten zugreifen. Die Dokumentation für die Schnittstelle kann auf GitHub {add link to readme} eingesehen werden.

Designentscheidungen

Am Freitag haben wir viel Zeit mit der Ideation und Konzeption unserer Anwendung verbracht. Wichtig ist uns dabei gewesen getreu dem Motto "Weniger ist Mehr" den Fokus auf die wichtigste Funktionalität zu legen.

Usability

Es ist besonders wichtig die Zielgruppe der App zu beachten. Da die Zielgruppe der App sehr breit ist kann nicht mit großer Technikaffinität der Nutzer gerechnet werden. Dem entsprechend haben wir zusätzliche Buttons, eigene Konfigurationen und Ansichten in der App auf ein Minimum beschränkt. Des weiteren ist Effizienz wichtig. Beim Öffnen der App kommt man sofort auf den "Scanner" Screen und kann QR-Codes einscannen. Die App wird also nur wenige Sekunden lang bedient.

Unterstützung für verschiedene Plattformen

Auch aufgrund der breiten Zielgruppe ist es wichtig die App für Android und für iOS anzubieten. Dazu verwenden wir React-Native (siehe Tech Stack). Die Erzeugung von QR Codes für Geschäfte passiert in einer Web App auf die mit allen Browsern zugegriffen werden kann.

Datensparsamkeit

Unser System benutzt Daten nur sehr sparsam. Beim erstmaligen Aufrufen der App wird lediglich die E-Mail Adresse oder Telefonnummer abgefragt damit im Fall der Fälle die Ämter Kontakt aufnehmen können. Ansonsten ist die Datenerfassung freiwillig und klar ersichtlich da sie eine Interaktion des Nutzers benötigt (nicht im Hintergrund über GPS).

Verhaltenspsychologische Überlegungen

Mittlerweile sind viele Menschen (zurecht) verunsichert aufrund von Covid-19 vor. Doch der "Feind" ist diffus und nicht greifbar. Viele Menschen überkommt also ein Gefühl der Ohnmacht und des Ausgeliefert seins. Da unsere App eine Aktion des Nutzers (einscannen) erfordert gibt sie dem Nutzer das Gefühl etwas "gegen Corona zu tun" und sich zumindest selbst besser zu schützen. Desweiteren setzen wir auf einen gewissen "Herdentrieb". Wenn Leute an Geschäften die QR-Codes entdecken und andere Leute dabei Beobachten wie diese gescannt werden, werden sie eher motiviert die App auch zu benutzen.

Kommunikation über offizielle Stellen

Am Anfang unserer Überlegungen haben wir mit dem Gedanken gespielt den Nutzer über Push Benachrichtigungen zu informieren, falls er evtl. Kontakt zu einem Infizierten hatte. Wir haben uns jedoch dagegen entschieden da kein paraller Informationsfluss zu Behörden entstehen soll. Wir befürchten sonst die vermehrte Verbreitung von Fake-News und Panikmache.

Tech Stack

Zur Implementierung der App wurde React Native genutzt, was den Vorteil bietet, nicht zwei seperate Apps für die beiden Platformen bauen zu müssen. Die Implementierung des QR-Code Scanners wurde mittels des Open Source Projektes von moaazsidat umgesetzt. Für die Authentifizierung mit der Datenbank wurde eine Hashfunktion mittels sha256 und einem Secret genutzt. Die benutzten Open Source Projecte sind auch in der entsprechenden README verlinkt. Die Website wurde mittels des New Age Theme von Start Bootstrap designed. Unsere App (Backend und Webapp) sind hoch skalierbar, da wir docker und docker-compose für das deployment benutzen. Somit wären beste Vorraussetzungen gegeben, um die App für eine große Anzahl von Nutzern zu skalieren.

How to install

Die Installation der iOS, Android, Webapp und des Backends ist auf der offiziellen Github Seite erklärt.

Besonderere Herausforderungen

Eine besondere Herausforderung war zu Beginn, die Android Version der React Native App compiliert zu bekommen. Dabei musste sich in das Grundliegende Prinzip von build/gradle Files und verschiedene Berechtigungen auf Android eingearbeitet werden.

Open Source

Unser Projekt ist Open Source unter der MIT Lizenz

Verlauf

Das gesamte Projekt wurde während des Hackathons vom 20.03 bis 22.03 entwickelt.

Freitagabend/ Nacht

Wir begannen mit dem Aufbau des Backends und der Website und dem Anlegen einer Beispielapp in React Native. Wir bauten eine React-Native Beispielapp nach und importierten den QR-Code Scanner in diese. Die iOs Version der App konnte bereits auf Geräten zum laufen gebracht werden. Im Backapp konnten wir schon mittels API Daten in einer MongoDB speichern.

Samstagvormittag

In der App wurde ein Anmeldungsbildschirm hinzugefügt und die Funktionalität, Daten an das Backend zu schicken erreicht.

Samstagabend/ Nacht

Das Backend wurde fertiggestellt. Außerdem wurde am frühen Nachmittag endlich die Android App auf einem Gerät deployed. Der Loginscreen wurde graphisch ansprechender gestaltet und mit dem Backend verknüpft. Desweiteren wurde die Website gestaltet, mit dem Backend verknüpft und die Funktionalität hinzugefügt, als Geschäftsinhaber einen individuelle Barcode zu erstellen. Im Verlauf des Abends wurden noch weitere Bugs gefixt und die Usability verbessert.

Sonntagvormittag

Die App wurde grafisch ansprechender gestaltet. Das Backend wurde mittels Docker-Compose auf einer Google Cloud Instanz deployed und mit der App verknüpft.

Sonntagnachmittag

Die Website wurde finalisiert und das Video zur App gedreht, geschnitten und veröffentlicht.

Nächste Schritte

  • Verbessertes Onboarding
  • Authentifizierung
  • Front-End für Ämter / Integration in bestehende Systeme
  • Internationalize (Unterstützung anderer Sprachen)
Share this project:

Updates