2. Main Server

Die Mobile App benötigt einen Main Server, um Inhalte zum Anzeigen abzurufen. Ohne Daten von einem Server, gibt es in der App nichts zu sehen.

• Dokumentation Main Server

Verknüpfung Server und App

Ist der Server lokal aufgesetzt und gestartet, kann dessen IP in der App hinterlegt werden. Dafür muss eine Konfigurationsdatei existieren, die nicht im Git-Repository liegt. Der Pfad ist deshalb in .gitignore eingetragen.

Diese Konfigurationsdatei beinhaltet alle server-relevanten Informationen für die App zur Kommunikation mit dem Server. Sie muss unter /src/config liegen und secrets.js heißen. Im Repository liegt bereits eine temporäre Konfigurationsdatei die verwendet werden kann. Dafür muss die Dateiendung von .temp zu .js geändert werden.

Es gibt dort zwei Einträge, die für den Server gesetzt werden müssen.

• serverUrl
  • für einen lokalen Server z. B.: http://192.168.1.85:3000
  • für ein App-Release muss hier die endgültige Server-Url eingetragen werden
• graphqlEndpoint
  • standardmäßig /graphql

Authentifizierung zum Server

Damit Daten überhaupt von der angegeben Url abgerufen werden können, muss sich die App am Server authentifizieren. Dafür müssen die vier weiteren Konfigurationen eingetragen werden.

• oAuthTokenEndpoint
  • standardmäßig /oauth/token
• oAuthClientId
  • vom Server erstellter und autorisierter Client-ID-Token
• oAuthClientSecret
  • vom Server erstellter und autorisierter Client-Secret-Token
• oAuthGrantType
  • standardmäßig client_credentials

Konfigurationen

Neben den Verbindungseinstellungen gibt es auch App-Einstellungen. Dazu zählen z. B. Farben und Texte.

Farben

Das Farbschema der App kann unter /src/config/colors.js angepasst werden.

Texte

Textbausteine, die in der App hinterlegt sind, können unter /src/config/texts.js verändert werden.

HTML-View-Styles

Die App rendert an mehreren Stellen HTML-Inhalte direkt. Dafür greifen bestimmte hinterlegte Styles, um diese an das Standard-Layout der App anzugleichen. Diese liegen in versch. Dateien unter /src/config/styles. Hier können u.a. Schriftarten, Schriftgrößen und Abstände definiert werden.

Inhalte

Alle Inhalte in der App werden vom Main Server bezogen. Hierzu zählen neben Nachrichten, Veranstaltungen, Orten & Touren ebenso die Navigation, Service-Angebote und statische Inhalt-Screens wie Impressum und Datenschutz.

Navigation

Die App verfügt über ein Hamburger-Menü mit der Möglichkeit beliebig viele Navigationspunkte unterzubringen. Der erste Punkt "Übersicht" ist fest hinterlegt. Alle weiteren Punkte sind dynamisch und werden vom Main Server bezogen. Hierfür existiert die Datei /public/mobile-app/configs/navigation.json. In der JSON-Datei wird ein darzustellender Text title, die verwendete Komponente screen, eine GraphQL-Query query mit eventuellen Variablen queryVariables und eine eventuelle verschachtelte GraphQL-Query subQuery angegeben. Dies sind die benötigten Informationen, um die Navigation aufzubauen. Jeder Eintrag muss über einen eindeutigen Key verfügen, in CamelCase. Wenn eine subQuery genutzt wird, wird empfohlen, auch rootRouteName auf den eindeutigen Key festzusetzen, sodass beim tiefer Navigieren in die verschachtelte Query der Hauptmenüpunkt als aktiv markiert bleibt.

In /src/navigation/AppStackNavigator.js ist ersichtlich, welche Komponenten screen ausgewählt werden können.

• Home
• Index
• Detail
• Html
• Web

Service-Angebote

Der Bereich für Service-Angebote funktioniert fast identisch. Hier gibt es allerdings keinen vordefinierten Punkt. Alle Services werden vom Server geladen. Hierfür existiert die Datei /public/mobile-app/configs/homeService.json. In der JSON-Datei wird für jeden Service ein darzustellender Text title, die verwendete Komponente routeName, eine Grafikdatei icon, sowie params für die Navigation benötigt. Die params sind identisch zu den zuvor in Navigation beschriebenen.

In /src/navigation/AppStackNavigator.js ist ersichtlich, welche Komponenten routeName ausgewählt werden können.

• Home
• Index
• Detail
• Html
• Web

Statische Inhalt-Screens

Am Ende des Home-Screens der App gibt es einen Bereich für zusätzliche Inhaltsscreens, die ebenfalls vom Server geladen werden. Sowohl die Konfiguration für die einzelnen Punkte als auch die Inhalte der gewünschten Screens kommen vom Server. Für die Konfiguration existiert die Datei /public/mobile-app/configs/homeAbout.json. In der JSON-Datei wird für jeden Inhaltspunkt ein darzustellender Text title, die verwendete Komponente routeName, sowie params für die Navigation benötigt. Die params sind identisch zu den zuvor in Navigation beschriebenen.

Für alle Konfigurationen, die auf die Komponente Html verweisen, muss es eine entsprechende HTML-Datei unter /public/mobile-app/contents geben. Auf welche Datei in welchem Punkt verwiesen wird, steht unter queryVariables in name. Dort wird der Dateiname ohne Dateiendung eingetragen.

Beispiel:

Für

"query": "publicHtmlFile",
"queryVariables": {
  "name": "smart-village-app"
}

muss es eine Datei /public/mobile-app/contents/smart-village-app.html geben.

Home-Screen Bilderkarussell

Der Home-Screen der App hat die Besonderheit, dass ganz oben beliebig viele Bilder in einem automatisch fortlaufenden Karussell dargestellt werden können. Die Daten dafür liegen ebenfalls auf dem Server. Hierfür existiert die Datei /public/mobile-app/configs/homeCarousel.json. Hier sind Pfade zu allen gewünschten Bildern anzugeben. Mit jedem Starten der App werden diese in zufälliger Reihenfolge im Karussell geladen.