Bei //SEIBERT/MEDIA wird uns als Mitarbeitern die Möglichkeit geboten, einen gewissen Teil unserer Arbeitszeit als sogenannte Slacktime zu nutzen. Diese Zeit ist dazu da, bewusst von der täglichen Projektarbeit wegzukommen, sich weiterzubilden oder sich an neue und spannende Dinge zu wagen, für die sonst wenig Raum bleibt. (Das Konzept der Slacktime und die Umsetzung bei uns hat Paul in einem früheren Blogpost ausführlich beschrieben.)

In meiner Freizeit engagiere ich mich bereits in der Liquid Democracy-Bewegung und arbeite seit fast zwei Jahren in einer Gruppe mit, die politische Debatten und Informationen durch technische Mittel neu gestaltet. Das Ziel besteht darin, Menschen (wieder) aktiv in eine informierte Demokratie einzubinden und Wissen zu ordnen, das aktuell in Rhetorik und Populismus untergeht.

Teil dieses Teams ist ein Event namens Great American Debate, das als Bildungsinitiative zusammen mit hunderten Schülern, Studenten und Politikern in den USA wieder mehr Aufmerksamkeit für Fakten, Meinungen und politische Themen schaffen soll. Junge Leute sollen dadurch lernen, mit fremden Meinungen in Berührung zu kommen, sie zu tolerieren und in Rhetorik versteckte Trugschlüsse im Zeitalter von Populismus und "Fake News" zu erkennen sowie entsprechend zu behandeln.

Das erste Event, welches live an über hundert Standorte und Universitäten in den USA übertragen werden soll, dreht sich um das hochkontroverse Thema Klimawandel.

Aufgabe: ein Formular als Web-App

Eine Aufgabe besteht zunächst mal darin, dass Studenten und Freiwillige alle verfügbaren Meinungen, Fakten und Standpunkte aus den Weiten des Internets an einem Ort sammeln. Dafür benötigen wir ein "einfaches" Formular in Form einer Web-App.

Da wir etwas unter Zeitdruck stehen und die ersten Studenten noch vor Dezember mit dem Befüllen der Datenbank beginnen sollen, haben wir uns für Google Firebase als Grundlage des ersten Prototypen entschieden - und damit ist auch der Bogen zu meinen beruflichen Arbeitsinhalten geschlagen, denn ich bin Teil des Google-Teams bei //SEIBERT/MEDIA.

Ich werde hier erstmal nur das sogenannte Data Entry Form behandeln, dessen Umsetzung meine Aufgabe war. Dieses besteht aus verschiedenen Formularen und Listen, um Studenten eine einfache Eingabe der verschiedenen Daten zu ermöglichen, die dann direkt in Google Firestore aktualisiert werden.

Ich starte mit einem kleinen Einblick in die Planung, also ab ans Whiteboard:

Etwas chaotisch, aber das soll so. 😉

Eine genauere Beschreibung bietet ein Graph unserer Typen:

Jeder Typ hat noch weiter Felder, diese resultieren aber in keiner Verknüpfung.

In Firebase bzw. im Google Firestore, der uns die Datenbank bietet, speichern wir die Listen entsprechend als eigene Document Collections, wobei jeder Typ eine eigene Collection ist. Das sieht dann so aus:

Anhand des "Contexts" und des "Ref"-Felds kann man sehen, dass wir die Typen entsprechend verlinken. Aktuell handelt es sich hierbei allerdings um eine unidirektionale Verlinkung (ein Statement enthält Context-Links, ein Context aber keine Statement-Links).

Die Umsetzung der App

Nun, da die Datenbank soweit durchdacht ist, kann es also mit der eigentlichen App losgehen! Für die Umsetzung ist meine Wahl auf Angular sowie Angular Material gefallen. Damit schien es mir am einfachsten, in kurzer Zeit zu einem brauchbaren Ergebnis zu kommen.

Ich gestehe, dass ich kein großer Fan von Frontend-Entwicklung bin. Ich mag Design, aber selbst in JavaScript oder wie hier in TypeScript zu entwickeln, vermeide ich, wenn ich kann. Doch in diesem Fall hatte ich keine Option, das Frontend Anderen zu überlassen, und immerhin habe ich bereits Einiges mit Angular gemacht.

Dieser kleine persönliche Exkurs soll nur zeigen, dass ich kein sonderlich erfahrener Frontend-Entwickler bin - und es trotzdem schnell zu einem für das Team guten Ergebnis gebracht habe.

Doch genug der Vorrede: Wir starten das Projekt. Dazu können wir im Grunde nach der Angular- bzw. Angular-Material-Anleitung vorgehen. Die Angular-CLI erlaubt es uns, schnell und einfach ein neues Projekt anzulegen.

npm install @angular/cli
ng new data-entry
cd data-entry

Nun haben wir ein generiertes Projekt namens data-entry und befinden uns im entsprechenden Verzeichnis.

Um die aktuelle Beispielanwendung zu sehen, starten wir den Entwickler-Server:

ng serve
open http://localhost:4200

Weiter geht es mit der Installation von Angular Material, Googles offizieller Bibliothek für Material Design in Angular:

ng add @angular/material

Seit Angular 6 kann die Angular-CLI bereits selbständig die nötigen Komponenten installieren und den bestehenden Code anpassen, um Material einzurichten.

Nun brauchen wir nur noch die Verbindung zu unserem Backend, also Firebase und Firestore. Hierfür gibt es wieder eine offizielle Bibliothek und Anleitung.

npm install @angular/fire firebase

Wir folgen weiter der Anleitung und haben dann bereits die ersten Daten in unserem Projekt. Ich werde den Code hier nicht weiter ausführen, da zum einen die Anleitung bereits recht ausführlich ist und es zum anderen ein öffentliches GitHub-Repo zum Projekt gibt.

Da wir nun die Daten haben, müssen wir sie nur noch darstellen. Unsere Werkzeuge, um die Komponenten zu bauen, sind HTML und TypeScript.

An dieser Stelle möchte ich noch einmal anmerken, dass das Projekt für mich den Charakter eines zeitlich stark beschränkten Hackathons hatte. Dementsprechend zweckmäßig ist der Code. Das Ziel ist ein schneller Prototyp, um Daten einzugeben. Hier geht es also nicht um eine App für den kritischen Produktivbetrieb.

Also weiter: Nach ein wenig einfachem Zusammenstecken bestehender Material Components haben wir schließlich Listen und Formulare - nichts Wildes, aber schon ein erster Schritt. Oben gibt es ein Bild des Whiteboards inklusive Mockup.

Hier ist das erste Ergebnis in Angular:

Wir sehen oben die Reference-Liste und die Bearbeitungsansicht einer einzelnen Reference. Aus einer Reference können wir dann per Knopfdruck ein neues Statement anlegen:

Links ist das neue Statement zu sehen (bereits live in der Datenbank), rechts die ursprüngliche Reference.

Und nun kommt der wohl aufwendigste Teil am Statement: Wir fügen Context hinzu.

Hier sehen wir eine Autovervollständigung auf ganze Wörter der verfügbaren Context-Liste. Wenn wir einen Context auswählen, wird er hinzugefügt:

Sollte kein passender Context zu finden sein, kann der Nutzer einfach mit der Enter-Taste bestätigen und einen neuen Context erstellen:

Auch hier wird der Context sofort angelegt und ist damit in der Datenbank. Die entsprechende Verlinkung wird allerdings erst durch das Speichern des Edit-Formulars gesetzt. Doch fürs erste: Topp!

Dieser Teil ist damit abgeschlossen: Wir können das Formular mit unserem Team und den Testern teilen.

Im zweiten Teil des Blogposts knüpfe ich hier an und zeige, wie wir unsere App für das Team und die Tester verfügbar machen und dafür sorgen, dass nur die richtigen Leute dort Einträge machen können.

Ihr Partner für Google Cloud

Interessieren Sie sich für moderne Zusammenarbeit und Lösungen mit Google-Technologien? Melden Sie sich bei uns, wenn Sie Fragen haben oder mehr wissen wollen. Wir sind offizieller Google Cloud Partner: Gerne beraten wir Sie unverbindlich zur Einführung, Lizenzierung und produktiven Nutzung von G Suite sowie zur Planung und Umsetzung von Anwendungen in der Google AppEngine oder anderen Umgebungen.

Weiterführende Infos

Serverless Apps mit Firebase Cloud Functions
Java-Anwendungen in der Google App Engine mit CloudSQL
Google Apps Scripts, Clasp und Data Studio
Legacy-Projekte in der Cloud – Erfahrungen mit Kubernetes

Mehr über die Creative-Commons-Lizenz erfahren