App Konfiguration
In dem folgenden Wiki Abschnitt, wird erklärt, wie jede Blutspende-Einrichtung die App und auch das Admin-Interface konfigurieren und anpassen kann. Dafür gibt es einige Möglichkeiten, wie Logos, Wortwahl, oder auch ganze Fragen im FAQ ändern. Damit all diese Editierungsmöglichkeiten erreichbar sind, müssen zunächst die App, das Admin-Interface und das Backend installiert werden. Dafür gibt es das Installationsanweisung App (GitHub), das Installationsanweisung Verwaltungsoberfläche (GitHub) und zuletzt das Installationsanweisung Backend.
Wenn all diese Schritte erfolgreich durchgeführt wurden, kann mit der Konfiguration begonnen werden.
Das User-Frontend bildet neben dem Admin-Frontend unsere App aus der Sicht der tatsächlichen Nutzer. Dabei stellt das User-Frontend die App dar, die der Nutzer tatsächlich benutzt, um einen Termin zu buchen. Wie diese App funktioniert, wird im Handbuch: Benutzeranleitung-App erklärt.
Localization erlaubt es uns, unsere App in mehreren Sprachen anzubieten, ohne jedes Mal die eingestellte Sprache prüfen zu müssen. Im Hintergrund wird die Einstellungssprache des Gerätes herausgefunden, und dann wird in den entsprechenden Dateien nach dem eingestellten Begriff oder Wortlaut gesucht.
Diese Dateien können bearbeitet und erweitert werden. Wie das funktioniert, wird im Anschluss erklärt.
Um neue Sprachen hinzuzufügen, muss die Datei kopiert werden und die Textfelder müssen bearbeitet werden. Dabei wird eine Fehlermeldung auftreten, die über zwei Schritte entfernt wird.
Zunächst müssen alle Pakete neu geladen werden mit flutter pub get, oder die pubspec.yaml Datei muss in VS Code gespeichert werden, was denselben Effekt hat.
Damit VS Code's interner linter mit dieser neuen Datei arbeiten kann, muss das Fenster einmal geschlossen werden. Wenn man nun das Fenster wieder öffnet, kann die neue Sprache problemlos eingesetzt werden.
Falls man neue Wörter und Sätze zu dem Programm hinzufügen möchte, wegen neuen Features oder aus anderen Gründen, muss diese Editierung in allen .arb Dokumenten stattfinden. Sonst betitelt flutter diese Änderungen als fehlerhaft und kompiliert nicht.
Wenn man bei allen Dokumenten die neuen Inhalte hinzugefügt wurden, dann wird genauso verfahren, wie bei dem Hinzufügen einer neuen Sprache
Beispielhaft: Localization
|
Path zu den Localization Dateien |
Inhalt der Localization Dateien |
|
app_de.arb {
"appTitle" : "UKM Blutspende-App",
"@appTitle": {
"description": "The title of the application"
},
"name": "Name",
"yourName": "Ihr Name",
"birthday": "Geburtsdatum",
"yourBirthday": "Ihr Geburtsdatum",
...
}
app_en.arb {
"appTitle" : "UKM Blood Donation App",
"@appTitle": {
"description": "The title of the application"
},
"name": "Name",
"yourName": "Your name",
"birthday": "Birthday",
"yourBirthday": "Your date of birth",
...
}
|
Die Dateien enthalten dabei eine Map, die String zu String überführt. Zusätzlich kann, wie man bei der Variable appTitle sieht, weitere Informationen, zu jeder einzelnen Variable zu geben, die bei der Programmierung der App helfen können.
Bei Benutzung in der Programmierumgebung, kann es hilfreich sein, sich die Dokumentation von flutter's Localization anzuschauen.
In unserem Projekt wurden viele Bilder verwendet, die sich speziell auf unseren initialen Partner, das UKM beziehen. Um die App und auch das Admin-Interface an die Bedürfnisse und den Stil des eigenen Krankenhauses oder Blutspendeeinrichtung anzupassen, müssen einige Bilder bearbeitet werden.
Diese können in dem Ordner blood-donation-app > assets > images bearbeitet werden. Am einfachsten ist es dabei, die Bilder unter demselben Namen zu speichern, aber es können selbstverständlich auch die Namen im Code bearbeitet werden, wenn dies gewünscht ist.
Nach dem Hinzufügen von Bildern, muss flutter pub get aufgerufen werden, damit die neuen assets geladen werden. Falls neue Bilder hinzugefügt werden sollen, müssen diese in der pubspec.yaml-Datei registriert werden, worauf wieder ein Aufruf von flutter pub get folgen muss.
|
Path zu den Bild-Dateien |
beispielhafte Bild Dateien |
|
logo_square.png 
logo.png 
|
Das Theme der App bestimmt den "Look-and-Feel" der App. Dieser ist aktuell sehr auf das UKM zugeschnitten und muss bei der Anpassung der App an die eigene Blutspende-Anstalt angepasst werden.
Beispielhaft: Theme-Datei
|
Path zu der Theme-Datei |
Inhalt der Theme-Datei |
|
theme.dart Color _primaryColor = const Color(0xff0b4874);
Color _accentLight = const Color(0xfff2f9fa);
Color _accentDark = const Color(0xff5f7a8e);
final ThemeData lightTheme = ThemeData(
primaryColor: _primaryColor,
...
|
Im Folgenden ist ein Beispiel, was passiert, wenn man die theme.dart Datei an den eigenen "Look-and-Feel" anpasst.
|
Theme Datei |
App |
Color _primaryColor = const Color(0xff0b4874);
Color _accentLight = const Color(0xfff2f9fa);
Color _accentDark = const Color(0xff5f7a8e);
final ThemeData lightTheme = ThemeData(
primaryColor: _primaryColor,
...
|
|
Color _primaryColor = Colors.redAccent;
Color _accentLight = Colors.black12;
Color _accentDark = const Color(0xff5f7a8e);
final ThemeData lightTheme = ThemeData(
primaryColor: _primaryColor,
...
|
|
Zum Schluss ist noch die Datei env.dart anzupassen. Hier lassen sich alle globalen App Konstanten bearbeiten. Neben Institutionsbezogenen Werten sind die Einstellungen für das Backend hier zu finden.
So müssen für die Konfiguration des Backends die Konstanten API_ADDRESS und API_TOKEN angepasst werden.
Das Admin-Frontend bildet neben dem User-Frontend unsere App aus der Sicht der tatsächlichen Nutzer. Dabei ist stellt das Admin-Frontend das Interface dar, welches Mitarbeiter benutzen, um Termine freizuschalten, Termine zu akzeptieren und die App selbst zu editieren. Wie das Admin-Interface funktioniert, wird im Handbuch: Benutzeranleitung Admininterface erklärt
Die "Settings" im Admin-Interface ermöglichen es, mobil und reibungslos neue FAQ- und Spenderfragen zu der App hinzuzufügen. Wie dies im exakten funktioniert, wird im Folgenden erklärt.
|
Screenshot Admin-Interface |
Screenshot App |
|
|
In den FAQ Einstellungen können, ohne auf den Code direkt zuzugreifen, neue FAQ Fragen erstellt, alte Fragen gelöscht, die Reihenfolge und der Inhalt der Fragen geändert werden. Dies ist in dem oben gezeigten Interface dargestellt. Im Folgenden werden die einzelnen Aktivitäten erklärt.
Neue Frage erstellen
Um eine neue Frage zu erstellen, muss auf das "+" in der Ecke unten rechts geklickt werden. Daraufhin öffnet sich ein Pop-up-Fenster, in welchem die Frage und die Antwort für jede eingestellte Sprache übergeben werden kann. Diese können im später noch verändert werden, falls gewünscht.
Ändern der bereits vorhandenen Fragen
Falls später im Verlauf neue Sprachen hinzugefügt werden über die Language Settings oder Probleme mit Wortwahl und Rechtschreibung auftreten, kann im Verlauf das Programm an die eigenen Wünsche angepasst werden. Dafür muss nur auf die Frage geklickt werden und schon öffnet sich ein Editor, in dem alle notwendigen Änderungen vorgenommen werden können.
Löschen von Fragen
Im Falle, dass Fragen nicht mehr aktuell sind, können diese gelöscht werden. Beim Löschen der Fragen muss auf das Mülltonnen-Icon der jeweiligen Frage geklickt werden. Dabei öffnet sich ein Fenster, in dem man bestätigen kann, dass diese Löschung nicht fehlerhaft ist und die Frage gelöscht werden soll. Wenn man die Löschung bestätigt, ist die Frage gelöscht.
Verändern der Fragenreihenfolge
Zusätzlich kann die Reihenfolge der Fragen geändert werden. Dies geschieht über das Icon rechts bei jeder Frage. Dort kann über "Drag-and-Drop" die jeweilige Frage an die Position geschoben werden, wo sie am sinnvollsten ist.
Speichern der neuen Fragen
Nachdem Änderungen an den Fragen durchgeführt wurden, MÜSSEN die Änderungen gespeichert werden, um einen Effekt auf Nutzerseite zu bewirken. Wenn dies nicht passiert, dann werden die Änderungen nach Schließen der Applikation gelöscht. Um dies zu vermeiden, existiert der Speicherknopf oben rechts im Fenster. Wenn dieser gedrückt wird, wird der aktuelle Status der Admin FAQ-Settings gespeichert.
|
Screenshot Admin-Interface |
Screenshot App |
|
|
In den Spenderfragen Einstellungen können, ohne auf den Code direkt zuzugreifen, neue Spenderfragen erstellt, alte Fragen gelöscht, die Reihenfolge und der Inhalt der Fragen geändert werden. Dies ist in dem oben gezeigten Interface dargestellt. Die einzelnen Aktivitäten sind dabei sehr ähnlich wie bei dem FAQ, mit dem Unterschied, dass nur eine Frage eingegeben wird und eine Option, ob "ja" oder "nein" die gewünschte Antwort des Users bei den Spenderfragen ist. Dies ist, um dem Admin alle Möglichkeiten offenzulassen beim Fragen erstellen. So sollte die Frage "Sind sie älter als 18?" mit "ja" beantwortet werden, jedoch die Frage "Sind sie HIV-positiv getestet?" mit "nein". Neben diesen beiden Änderungen kann man sich an dem FAQ orientieren.
Auch im Admin Interface erlaubt es Localization uns, das Interface in mehrere Sprachen zu übersetzen. Für das Admin-Interface ist aktuell nur eine Sprache implementiert, diese ist Englisch. Dabei handelt es sich um die Standard-Sprache in flutter's Localization-Package. Wie man neue Sprachpakete hinzufügt oder bereits vorhandene editiert, siehe oben.
|
Path zu den Localization Datei |
Inhalt der Localization Datei |
|
app_en.arb {
"appTitle" : "Blood Donation Admin Interface",
"@appTitle": {
"description": "The title of the application"
},
"saveChanges": "Save changes",
"request": "Request",
"created": "Created",
"status": "Status",
...
}
|
Wie auch in der App, hat auch das Admin-Interface eine Theme-Datei, in welcher der "Look-and-Feel" der Applikation definiert wird. Wenn dieser geändert werden soll, sollte wie auch bei der App verfahren werden.
|
Path zu der Theme-Datei |
Inhalt der Theme-Datei |
|
const Color _primaryColor = Color.fromRGBO(11, 72, 116, 1);
ThemeData lightTheme = ThemeData(
scaffoldBackgroundColor: const Color.fromARGB(255, 242, 242, 247),
primarySwatch: createMaterialColor(_primaryColor),
appBarTheme: const AppBarTheme(
backgroundColor: Colors.white,
foregroundColor: _primaryColor,
),
);
...
|
Auch bei der Verwaltungsoberfläche ist zum Schluss noch die Datei lib/misc/env.dart anzupassen. So muss für die Konfiguration des Backends die Konstante WEBSOCKETURL angepasst werden.