Florian Grühn
Software Engineer

Essensbestellung 2.0 - In unter vier Stunden mit Hilfe von Angular und Firebase zum Mittagessen


Auch Kernkräfte müssen mal essen. Und weil alleine Essen nicht sehr gemütlich ist, tun wir uns gerne zusammen und bestellen bei einem örtlichen Lieferdienst. Um gebündelt bestellen zu können schreibt der Besteller eine E-Mail, wo und wann bestellt wird und hungrige Kernkräfte antworten mit Essenswünschen.

Mit der neuen Version von Angular und dem Google Service Firebase haben wir heute die Möglichkeit, ohne großen Programmier- und Konfigurationsaufwand, die oben beschriebenen E-Mails durch eine kleine Webapplikation abzulösen.


Was ist Angular?

Angular ist ein, mittlerweile schon 9 Jahre altes, Front End Framework, welches nun in der vierten Version verfügbar ist. Angular ist mit Hilfe von Typescript geschrieben und beinhaltet viele Komponenten die das Entwicklerleben vereinfachen. Zum Beispiel Module für die einfachere Erstellung von HTML-Komponenten.


Was ist Firebase?

Firebase ist ein Cloud Service von Google. Dieser beinhaltet viele Funktionen, wovon einige kostenfrei sind. Dazu gehört zum Beispiel das Speichern von Daten, eine Realtime-Datenbank, aber auch eine Menge anderer Funktionen, wie E-Mail-Benachrichtigungen und Authentifizierung.

Aber in unter 4 Stunden eine Webapplikation bauen? Ich muss doch erst mal die Ordnerstruktur aufbauen und alles konfigurieren!

Zum Glück nicht. Ein Team von Google Entwicklern hat es sich zur Aufgabe gemacht den Einstieg in die Entwicklung zu erleichtern und ein Tool namens Angular-Cli veröffentlicht.

So ist es möglich mit den vier folgenden Befehlen ein neues Projekt zu erstellen. Strukturiert und aufgebaut nach den Empfehlungen von Google.


Angular Cli für Essensbestellung


Das neue Projekt enthält automatisch eine Webpack Konfiguration sowie vorkonfigurierte Tests. Mit Hilfe des Angular-Cli ist es zudem möglich Komponenten, Module, Services etc. für die Anwendung zu erstellen.

Eine Übersicht über die Befehle können hier eingesehen werden.


Und wie verbinde ich mein Projekt jetzt mit Firebase?

Zuerst muss man sich bei http://www.firebase.google.com mit seinem Google Konto anmelden und ein neues Projekt erstellen. Wenn das Projekt erstellt ist kann man sich über die Schaltfläche „Firebase zu meiner App hinzufügen“ die benötigte Konfiguration ausgeben lassen.


Firebase für Essensbestellung


Um nun unsere Angular Anwendung mit Firebase zu verbinden hilft uns zum Glück das Modul AngularFire2. Das Modul ermöglicht es uns in wenigen Schritten Objekte in der Datenbank zu speichern und abzurufen.

Zuerst konfigurieren wir die Anwendung:


Anwendungen konfigurieren


Dazu müssen wir das AngularFireModule einbinden (Zeile 11), die Konfiguration von Firebase eingeben (Zeile 13-19) und das Modul in unsere Angular App einbinden (Zeile 33). Es wird empfohlen für öffentliche Projekte die Konfiguration auszulagern.

Dann kann angefangen werden, die Daten aus der Datenbank auszulesen. Es sind keine komplizierten HTTP Request nötig.


Daten aus der Datenbank auslesen


Das AngularFire Modul kann wie in dem Beispiel oben in ein Angular Service eingebunden werden (Zeile 3) um dann zum Beispiel wie in Zeile 10 eine Liste in der Datenbank einem Objekt zuzuweisen.

Das Objekt in dem Beispiel „this.orders“ kann dann in einer Funktion zurückgegeben werden um zum Beispiel alle Bestellungen anzuzeigen. Auch neue Objekte können hier direkt in der Datenbank gespeichert werden. „this.orders“ kann hier wie ein javascript Array benutzt werden. Werden neue Objekte in das Array gepusht, wird das Array automatisch mit der Firebase Datenbank synchronisiert (Zeile 17-19).


Array Synchronisation 


Die Objekte können dann mit der *ngFor Direktive in der View ausgegeben werden.

Als Layout wird in dieser View Angular Material benutzt um ein gutes Look & Feel zu ermöglichen.


Angular Material


Mit diesen Grundvoraussetzungen ist es möglich, eine Webanwendung mit einfachen Ein- und Ausgaben ohne Server Code oder überschüssige Konfiguration zu erstellen.

Ein Klick auf das Bild unten (animiertes GIF) zeigt wie eine einfache Anwendung aussehen kann.


Beispiel (Vorschau für animiertes GIF)

Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar