Heute blicken wir hinter die 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":
1import styled from '@emotion/styled';
2
3const Button = styled.button`
4 padding: 32px;
5 background-color: hotpink;
6 font-size: 24px;
7 border-radius: 4px;
8 color: black;
9 font-weight: bold;
10 &:hover {
11 color: white;
12 }
13`;
14
15render(<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:
1---
2title: Beginenturm
3lat: 52.371857933381335
4long: 9.731301705091482
5address: Pferdestraße 8, 30159 Hannover
6color: '#f9f6cc'
7---
8Der 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:
1resource "aws_s3_bucket" "default" {
2 bucket = "geschichte-unterwegs.app"
3
4 website {
5 index_document = "index.html"
6 error_document = "404.html"
7 }
8
9 policy = <<POLICY
10{
11 "Version": "2008-10-17",
12 "Id": "PublicHomepageAccess",
13 "Statement": [
14 {
15 "Sid": "1",
16 "Effect": "Allow",
17 "Principal": {
18 "AWS": "*"
19 },
20 "Action": "s3:GetObject",
21 "Resource": "arn:aws:s3:::geschichte-unterwegs.app/*"
22 }
23 ]
24}
25POLICY
26}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 kontaktieren Sie uns für ein Erstgespräch.
