11.08.2021

Behind the scenes der "Geschichte Unterwegs"-App

Heute blicken wir hinter die technischen Kulissen der "Geschichte-Unterwegs"-App. Welche Technologien wurden warum verwendet und wie sieht unser abschließendes Fazit zur Entwicklung aus?

Vorab empfiehlt es sich, den zuerst erschienenen Blogartikel zu den Hintergründen der Zusammenarbeit zwischen dem Historischen Museum Hannover und newcubator zu lesen. Viele Informationen und Details stecken in unserem Blogartikel Historisches Museum Hannover goes digital.

Entstehung der Progressive Web App

Zu Beginn wollen wir auf die Entstehung der Progressive Web App (PWA) eingehen. Die Basis bildete eine Webapp, die von unserer Kollegin Sepideh ganz zu Anfang des Projektes entwickelt wurde. Daraus wurde von Jonathan eine Progressive Web App gemacht, die auf GatsbyJS und React basiert. Die beiden Technologien sind bei uns bereits von der Entwicklung unserer Homepage bekannt und sorgten deshalb für ein schnelles Setup.

Mittels emotion wurden die React Komponenten, welche wir für die React App entwickelt haben gestylt. Emotion erlaubt einen sehr angenehmen Syntax bei der Entwicklung, inspiriert durch "styled components":

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; color: black; font-weight: bold; &:hover {
    color: white; }
`

render(<Button>This my button component.</Button>)

Verschiedene Gatsby Plugins wurden genutzt, um weitere Funktionalitäten hinzuzufügen.

Den eigentlichen Inhalt haben wir in Markdown geschrieben und in verschiedenen Unterverzeichnissen abgelegt. Mit dem Plugin "gatsby-transformer-remark" wurde das Markdown in HTML Code gewandelt, welchen wir dann problemlos in der App anzeigen konnten. Mittels frontmatter werden den einzelnen Markdown-Dateien Metadaten im yaml Format hinzugefügt, wie zum Beispiel die Koordinaten der einzelnen Stationen, der Seitentitel und die Jahreszahl. Das sieht dann zum Beispiel so aus:

---
title: Beginenturm
lat: 52.371857933381335
long: 9.731301705091482
address: Pferdestraße 8, 30159 Hannover
color: '#f9f6cc'
---

Der Beginenturm wurde 1357 ...

Ein weiteres Plugin ist das "gatsby-plugin-offline", mit welchem ein Service Worker etabliert wurde, durch den die Web App auch offline funktioniert. Weiter wurde "gatsby-plugin-manifest" verwendet, um ein WebApp Manifest zu erstellen. Dieses erlaubt - in Kombination mit dem Service Worker, dass die WebApp wie eine normale App auf Smartphones installiert werden kann.

Mithilfe von Leaflet ist die Karte mit den Standorten (auch Markern genannt) entstanden. Leaflet ist eine Open-Source JavaScript Library zur Darstellung von Karten im Web. Hier hatte Jonathan bereits Erfahrungen mit der Library. Zudem ist Leaflet sehr flexibel was den Ursprung des Kartenmaterials betrifft. Deshalb haben wir für das Projekt Tilemill verwendet, mit dem man eigene Styles für Openstreetmap Karten erstellen kann. Die fertig generierte Karte wurde mit dem tool mbutil von MapBox als einzelne PNG-Dateien exportiert. Da wir lediglich den kleinen Abschnitt der Stadt Hannover aus der Karte brauchten, haben wir uns dadurch das Aufsetzen eines Tileservers gespart.

Gehostet wird die App auf AWS, wo wir es mittels Terraform deployen. Terraform ist ein beliebtes Infrastructure AS Code Tool, mit welchem man sich mühsame manuelle Konfiguration im AWS Interface spart und einen Verlauf der Infrastrukturänderungen im Git festhalten kann. Das sieht dann zum Beispiel so aus:

resource "aws_s3_bucket" "default" {
  bucket = "geschichte-unterwegs.app"

  website {
    index_document = "index.html"
    error_document = "404.html"
  }

  policy = <<POLICY
{
    "Version": "2008-10-17",
    "Id": "PublicHomepageAccess",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::geschichte-unterwegs.app/*"
        }
    ]
}
POLICY
}

Hiermit wird ein S3 Bucket, mit einer Policy, die das Lesen aller Objekte erlaubt, erzeugt. In dem Bucket wird dann das Gatsby Projekt gehostet.

Von PWA zu nativer App

Um nun aus der Web App eine native App zu bauen, wurde das Capacitor Projekt verwendet. Hier war vor allem die Modernität im Vergleich zu anderen runtimes, wie Apache__Cordova oder PhoneGap, eine Entscheidungsgrundlage. Ebenso half die leicht verständliche Dokumentation bei der Arbeit.

Unser Fazit zur Technologieauswahl

Nun stellen wir uns rückblickend die Frage, ob unsere Technologie-Auswahl sinnvoll war. Bei der Arbeit mit GatsbyJS und React traten keine größeren Probleme auf. Alle Schwierigkeiten konnten schnell behoben werden. Auch Leaflet wird weiterhin unsere erste Wahl bei der Darstellung von Karten im Web bleiben. Capacitor wird ebenfalls weiterhin in Benutzung bleiben, obwohl die Erstellung der tatsächlichen App-Pakete am Ende doch umständlich war.

Insgesamt sind wir stolz auf unser digitales Zusatzprodukt, das wir dem Historischen Museum Hannover präsentieren konnten.

Haben auch Sie eine Idee für ein digitales Zusatzangebot, das Ihr Geschäft bereichern kann? Dann melden Sie sich gerne bei uns für ein Erstgespräch. Gemeinsam machen wir Ihre Idee digITal real.

Lucas Meurer

Softwareentwickler

Zurück zum Blog
Mehr Blogartikel...
Unser Blog behandelt eine Vielzahl verschiedener Themen. Wir setzen uns in unseren Artikeln mit Gedanken, Erfahrungen und Meinungen zu Ereignissen und technischen Neuerungen auseinander, die uns im Arbeitsalltag begegnen.

Mehr Blogartikel...

Technologien mobiler Anwendungen - Technischer Vergleich der Technologien
Welche Technologie ist am schnellsten? Welche Technologie kann die meisten Nativen Features bieten? Diese und weitere Fragen werden in diesem Artikel - dem technischen Vergleich beantwortet.
Jonathan Zbick | 27.07.2021

Technologien mobiler Anwendungen - Technischer Vergleich der Technologien

Technologien mobiler Anwendungen - Wirtschaftlicher Vergleich der Technologien
Welche Technologie ist am schnellsten fertig? Welche Technologie kostet am wenigsten? Diese und weitere Fragen werden in diesem Artikel - dem wirtschaftlichen Vergleich beantwortet.
Jonathan Zbick | 19.08.2021

Technologien mobiler Anwendungen - Wirtschaftlicher Vergleich der Technologien

Hallo

Wir sind für Sie da und freuen uns auf Ihre Fragen oder Ihr Feedback.