© svetabelaya/Shutterstock.com
Ionic und Firebase: Hybride Apps mit Backend as a Service

Bau deine eigene Foto-Cloud


Das Cross-Plattform-Framework Ionic erfreut sich sowohl unter Web- als auch unter Mobile-Entwicklern immer größerer Beliebtheit. Zusätzlich ist das Backend as a ­Service Firebase von Google im Zusammenspiel mit Ionic die perfekte Lösung für Entwickler, die komplexe Anwendungen mit Echtzeitdaten entwickeln möchten.

Ionic ist die Kombination aus dem längst in der Enterprise-Welt angekommenen Webframework Angular und Cordova, einem Framework, das Webseiten in einen Container legt und als mobile Anwendung baut. Hinzu kommen diverse eigene Elemente von Ionic, die es dem Entwickler erlauben, mehr als eine Webanwendung in einer App zu bauen und ein natives Erlebnis für den Endnutzer ermöglichen.

Darüber hinaus wird sich der Artikel ebenfalls mit Firebase beschäftigen, einem Realtime-Backend in der Cloud, das es auch Entwicklern ohne fundierte Serverkenntnisse erlaubt, innerhalb kürzester Zeit eine Backend-Schnittstelle für ihre App bereitzustellen. Innerhalb dieses Artikels wird eine Ionic-Anwendung entwickelt, die Firebase integriert. Es werden sowohl die Authentifizierung über Firebase als auch die Cloud-Datenbank und Storage-Funktionen von Firebase benutzt, um eine simple Foto-Cloud-App zu erstellen.

Start unserer Ionic-App

Nachdem Ionic auf unserer Maschine installiert wurde, ermöglicht es das Command Line Interface (CLI), neue Projekte anzulegen, in denen bereits die nötigsten Dateien angelegt und Abhängigkeiten installiert werden. Zusätzlich können über CLI mittels des generator-Kommandos (kurz g) neue Dateien an der korrekten Stelle innerhalb des Projekts angelegt werden. In unserem Beispiel benötigen wir drei weitere pages, die eine Seite innerhalb der App darstellen. Zusätzlich erzeugen wir einen provider, der die Schnittstelle zu Firebase sein wird und den Austausch von Daten für uns übernimmt. Zuletzt installieren wir noch weitere npm-Pakete für unsere Ionic-App, in diesem Fall das Paket AngularFire, das eine einfachere Schnittstelle mit besseren Funktionen bereitstellt, sowie das offizielle Firebase-Paket.

Da wir innerhalb unserer Anwendung auf die Kamera zugreifen wollen, benötigen wir ebenfalls ein Cordova-Plug-in sowie das zugehörige Ionic-Native-Paket. Ionic Native ist hierbei ein Wrapper um den JavaScript-Code des Cordova-Plug-ins, um es innerhalb von Angular besser und natürlicher zu integrieren. Folgen Sie den Kommandos in Listing 1, um jetzt Ihre App anzulegen, die nötigen Dateien zu erstellen und zuletzt die benötigten Pakete zu installieren.

Listing 1: Start einer Ionic-App

// Erzeuge ein neues Ionic-Projekt ionic start imageCloud blank cd imageCloud // Neue Pages und Provider mit dem Generator erstellen ionic g page login ionic g page register ionic g page home ionic g provider firebase // npm-Pakete für Firebase und AngularFire installieren npm install angularfire2@4.0.0-rc0 firebase —save // Cordova-Plug-in und Ionic-Native-Paket für Kamera installieren ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera

Nachdem unsere App erzeugt wurde und wir alles angelegt haben, was im weiteren Verlauf benötigt wird, müssen wir das Modul unserer App anpassen, um die verschiedenen Pakete zu laden. Die Datei app.module.ts definiert alle Pakete und Abhängigkeiten unseres Moduls, das unserer App entspricht. Hier müssen nun die entsprechenden npm- und Ionic-Native-Pakete sowie unser selbst erstellter Provider eingetragen werden. Zusätzlich wird für die Verbindung zu Firebase eine Konfiguration angelegt, die dem AngularFire-Modul bei der Initialisierung mitgegeben wird. Bisher haben wir diese Werte noch nicht, im nächsten Schritt werden wir sie allerdings direkt von Firebase ohne Probleme importieren können. Fügen Sie die neuen Elemente in die src/app/app.module.ts wie in Listing 2 gezeigt ein, um alle nötigen Abhängigkeiten zu importieren.

Listing 2: Konfiguration unseres Moduls

// app.module.ts // Alle bisherigen Imports bleiben erhalten import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AngularFireModule } from 'angularfire2'; import { FirebaseProvider } from '../providers/firebase/firebase'; import { Camera } from '@ionic-native/camera'; const firebaseConfig = { apiKey: "PLACEHOLDER", authDomain: "PLACEHOLDER", databaseURL: "PLACEHOLDER", projectId: "PLACEHOLDER", storageBucket: "PLACEHOLDER", messagingSenderId: "PLACEHOLDER" }; @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, HttpModule, AngularFireDatabaseModule, AngularFireAuthModule, AngularFireModule.initializeApp(firebaseConfig), IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, FirebaseProvider, Camera ] })

Eine neue Firebase-App anlegen

Sollten Sie noch keinen Account bei Firebase haben, können Sie diesen kostenlos ohne Probleme anlegen. Firebase wird erst kostenpflichtig, sobald Sie ein höheres Volumen an Daten benötigen. Wenn Sie in Firebase angemeldet sind, befinden Sie sich in der Projektkonsole, wie in Abbildung 1 gezeigt. Hier können Sie Projekte verwalten und anlegen, was wir im nächsten Schritt tun. Klicken Sie dafür auf Projekt hinzufügen und wählen Sie einen Namen sowie den Standort des Servers. Hier ist es sinnvoll, eine Region zu wählen, in der die potenziellen Nutzer Ihrer Anwendung leben, da so die Latenz verringert wird.

grimm_ionic_1.tif_fmt1.jpgAbb. 1: Firebase-Projektkonsole

Nachdem das Projekt angelegt wurde, befinden Sie sich in der Übersicht Ihres neuen Projekts. Derzeit benötigen wir die Konfiguration für unser Modul, die wir direkt angezeigt bekommen, wenn wir Firebase zu meiner Web-App hinzufügen anklicken. Firebase liefert Ihnen hier einen ganzen Block, den Sie in eine Webanwendung integrieren könnten, allerdings benötigen wir für die Konfiguration unserer App nur den config-Block, der bei genauerer Betrachtung bereits exakt aussieht wie der Dummyblock, der sich derzeit in unserer app.module.ts befindet. Kopieren Sie diese Informationen aus Firebase, ersetzen Sie den Platzhalter innerhalb der Moduldatei, und schon kann Ihre Anwendung auf das Firebase Back­end zugreifen.

Zusätzlich muss im Bereich Authentication bei Fire­base noch das Anmeldeverfahren Email/Passwort aktiviert werden, danach können wir direkt über unsere App einen Benutzer registrieren und ohne weiteren Code anmelden.

Die Schnittstelle zu Firebase

Innerhalb von Angular gibt es verschiedene Komponenten, die es ermöglichen, die Logik unserer Anwendung besser aufzuteilen. Unser Provider wird allen Code enthalten, um mit Firebase zu interagieren. Auch wenn wir bereits ein weiteres Paket – AngularFire – installiert haben, ist es sinnvoll, diese Interaktionen gebündelt innerhalb eines Providers zu haben, der dann in allen Pages der App verfügbar ist. Innerhalb des Providers implementieren wir alle benötigten Funktionen für den Registrierungs- und Anmeldeprozess und um unsere Bilder hochzuladen. Bereits im Konstruktor des Providers können wir uns auf den authState von Firebase subscriben, da dieser ein Observable ist und wir so jede Änderung am Status direkt erkennen. Sollte ein Benutzer sich also an- oder abmelden, werden wir jeweils den aktuellen Nutzer neu setzen. Außerdem subscriben im weiteren Verlauf der Anwendung auch andere Pages zu diesem Status, um ebenfalls alle Änderungen sofort zu erhalten.

Das eigentliche Registrieren eines neuen Nutzers erfolgt innerhalb einer Zeile, da wir nur die entsprechende Funktion von AngularFire benutzen müssen, um einen Benutzer mit E-Mail und Passwort zu registrieren. Zusätzlich führen wir hier allerdings eine erste Aktion auf die Datenbank bei Firebase aus, bei der wir eine Liste abrufen, die unter dem Knoten /userProfile liegt. Wenn wir bei Firebase einen Benutzer anlegen, ist dieser zwar im System registriert, allerdings haben wir kein wirkliches Profil vom ihm. Daher erzeugen wir direkt nach der Registrierung einen neuen Knoten in der Datenbank. Dessen Key ist die einzigartige ui...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang