© 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 installiere...

Neugierig geworden?

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