Erstellen von mobilen Echtzeitanwendungen für mehrere Plattformen: Beispiele mit Ionic Framework und Firebase

Eines der größten Probleme, auf die Unternehmen bei der Entwicklung einer Smartphone-Anwendung stoßen, sind die multiplikativen Kosten für die Erstellung einer nativen Anwendung auf verschiedenen Plattformen. Während versierte Front-End-Entwickler sich auf die Entwicklung mehrerer hybrider Plattformen eingestellt haben, die versprechen, dieses Problem anzugehen, sind Ionic Framework und Firebase ein dynamisches Duo, das uns gemeinsam wirklich eine erstaunliche Flexibilität beim Erstellen von Echtzeit-Smartphone-Anwendungen mit JavaScript und HTML5 bietet .

Dieses Tutorial stellt die Funktionen dieser plattformübergreifenden mobilen Entwicklungstools vor und bietet sogar einige Ionic- und Firebase-Beispiele.

(Hinweis: Dieser Artikel setzt eine gewisse Vertrautheit mit den Grundlagen des AngularJS-Frameworks voraus. Hier ist ein großartiger Einführungsbeitrag zu AngularJS für diejenigen ohne diesen Hintergrund.)

Einführung in das ionische Framework

Das Ionic Framework besteht aus drei Hauptkomponenten:

1. Ein SASS-basiertes UI-Framework, das für mobile UIs entwickelt und optimiert wurde.
2. Ein AngularJS-Front-End-JavaScript-Framework, das zum schnellen Erstellen skalierbarer und schneller Anwendungen verwendet wird.
3. Ein Compiler (Cordova oder PhoneGap) für native mobile Anwendungen mit CSS, HTML und JavaScript.

Das Ionic-Framework ist auch vollgepackt mit vielen nützlichen CSS-Komponenten, die sofort einsatzbereit sind.

Kudos an Ionic für die Bereitstellung umfangreicher Dokumentationen, Beispiele und Startervideos, um die Lernkurve zu vereinfachen und Entwickler schnell zum Laufen zu bringen.

Einführung in Firebase

Firebase ist ein schemaloses Back-End-as-a-Service-Datensystem, das Datensynchronisierung in Echtzeit ermöglicht, ohne dass benutzerdefinierter Code geschrieben werden muss. Firebase macht einen Großteil Ihrer Back-End-Entwicklung obsolet und reduziert dadurch die Entwicklungszeit für mehrere Plattformen erheblich.

Zu den wichtigsten Funktionen und Vorteilen gehören:

1. Datenänderungen ohne Codeänderungen. Alle Datenänderungen werden den Clients sofort veröffentlicht, ohne dass eine Änderung des Backend-Codes erforderlich ist.
2. Viele Adapter. Es gibt Adapter mit guter Unterstützung und Dokumentation für alle gängigen JavaScript-Frameworks und SDKs für mobile Plattformen. (Wir haben in diesem Artikel AngularFire verwendet, die AngularJS-Bindung für Firebase.)
3. Einfache Authentifizierung. Die Authentifizierung in Firebase ist so einfach wie ein einzelner Methodenaufruf, unabhängig von der Authentifizierungsmethode. Unterstützt einfache E-Mail- und Passwort-, Google-, Facebook-, Twitter- oder Github-basierte Anmeldungen.
4. Offline aktiviert. Alle Firebase-Daten sind offlinefähig, sodass eine Anwendung im getrennten Modus vollständig (oder nahezu vollständig) funktionsfähig sein kann. Anwendungen werden automatisch synchronisiert, wenn die Verbindung wiederhergestellt ist.
5. Konfigurations-Dashboard. Ein Großteil von Firebase (z. B. Sicherheitsregeln) kann einfach über die intuitive Dashboard-Oberfläche von Firebase konfiguriert werden.
6. JSON-zentriert. In Firebase werden alle Daten in Form von JSON-Objekten gespeichert und abgerufen.

Firebase bietet auch Cloud-Dienste zum Hosten des Front-End-Codes an, was viel Zeit bei der Bereitstellung und Wartung einsparen kann.

Es ist auch erwähnenswert, dass Firebase im vergangenen Oktober von Google übernommen wurde, was ihm deutlich mehr Aufmerksamkeit und Sichtbarkeit verschafft hat.

Ein einfaches Anwendungsbeispiel: Ausgabenverfolgung

Mitbewohner teilen sich oft die Ausgaben und verlassen sich in Zeiten der Not aufeinander. Lassen Sie uns also Mitbewohnern helfen, ihre Ausgaben zu verfolgen und ihnen helfen, sich am Ende des Monats zu versöhnen.

Um die Dinge noch interessanter zu machen, bauen wir eine plattformübergreifende mobile Anwendung, die Echtzeit-Updates bereitstellt, sodass jeder die Ausgaben überwachen kann, sobald sie anfallen.

Nachdem wir uns nun entschieden haben, was wir bauen möchten, und uns die Tools vorgestellt wurden, können wir loslegen!

Erste Schritte mit Ionic und Firebase

Als erstes müssen wir Ionic installieren. Befolgen Sie die Installationsanweisungen auf der Ionic-Erste-Schritte-Seite. (Beachten Sie, dass Ionic eine Abhängigkeit von NodeJS hat, daher müssen Sie die Anweisungen auch installieren, wenn Sie es nicht bereits auf Ihrem Computer haben).

Das 5-Minuten-Tutorial von AngularFire ist ein großartiger Ort, um sich mit Firebase vertraut zu machen. Und wenn Sie ein „Tüftler“ oder ein taktiler Lerner wie ich sind, möchten Sie vielleicht meine Implementierung von GitHub ziehen und anfangen, mit dem Code zu spielen.

Codierung unserer Multi-Plattform-App

Für dieses Tutorial verwenden wir die Beispiel tabs App, die als Teil der Ionic-Installation als Grundlage für unsere App bereitgestellt wird. (Sie können die Beispiel-App mit dem Befehl ionic start myApp tabs .)

Öffnen Sie die Beispiel- tabs -App in Ihrer bevorzugten IDE (ich verwende Webstorm) und beginnen Sie mit der Änderung, um unsere Mitbewohner-App zu erstellen.

Für unsere Beispiel-Ionic- und Firebase-App benötigen wir die folgenden drei Bildschirme:

Bevor wir diese Bildschirme erstellen, entfernen wir den „Freunde-Detailbildschirm“, der standardmäßig mit der Beispiel-App bereitgestellt wird, wie folgt:

1. Löschen Sie die Datei www/templates/friend-detail.html .
2. Entfernen Sie in www/js/app.js den Zustand für friend-detail.html (oder kommentieren Sie ihn aus).
3. Entfernen Sie in www/js/controllers.js den FriendDetailCtrl Controller, auf den in dem von uns gelöschten Zustand verwiesen wird.

Lassen Sie uns nun die Symbole und den Text der Registerkartenauswahl unten auf unserem Bildschirm wie folgt ändern:

Dies geschieht einfach, indem Sie die folgenden Änderungen in www/templates/tabs.html :

 <ion-tabs class="tabs-icon-top"> <!-- My Tab --> <ion-tab title="My Expense" icon="icon ion-log-in" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Friends Tab --> <ion-tab title="Roomie's" icon="icon ion-log-out" href="#/tab/friends"> <ion-nav-view name="tab-friends"></ion-nav-view> </ion-tab> <!-- Account --> <ion-tab title="Account" icon="icon ion-ios7-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> </ion-tabs>

Bevor wir unsere Daten mit der Firebase verbinden, erstellen wir eine Liste und binden sie an ein Array mit dem Namen expenses , indem wir den folgenden Code zu www/templates/tab-dash.html :

 <ion-view title="My Expenses"> <ion-content> <ion-list> <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap"> {{expense.label}} <span class="badge badge-balanced">{{expense.cost}}</span> </ion-item> </ion-list> <div class="card assertive"> <div class="item item-text-wrap"> Total Spent <span class="badge badge-positive">{{getTotal()}}</span> </div> </div> </ion-content> <ion-footer-bar> <input ng-model='label' type='text' placeholder='Type a new expense...' /> <input ng-model='cost' type="number" placeholder='$' /> <button class="button icon-left ion-plus" ng-click="addExpense($event)">Add</button> </ion-footer-bar> </ion-view>

Wir müssen auch DashCtrl in www/js/controllers.js erweitern, um das expenses -Array sowie eine addExpense -Methode und eine getTotal Methode wie folgt einzuschließen:

 .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: 'email', label: 'test', cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: < some email > label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Das expenses -Array speichert die Elemente in der Ausgabenliste, die addExpense() Methode fügt dem expenses -Array einen neuen Wert hinzu und die getTotal() Methode gibt uns die Summe aller Elemente im Array.

Eine ähnliche Reihe von Änderungen muss jetzt an tab-friends.html . Versuchen Sie dies selbst, aber wenn Sie auf Probleme stoßen oder überprüfen möchten, ob Sie dies richtig gemacht haben, können Sie auf meine Implementierung auf GitHub verweisen.

Einhaken in Firebase

Sie benötigen ein Firebase-Konto. Sie können sich hier für einen kostenlosen Firebase „Hacker Plan“ anmelden.

Wenn Sie sich anmelden, erhalten Sie Ihre Root-URL , die in etwa so aussieht wie https://<yourfirebase>.firebaseio.com .

Das Aktivieren von Firebase in unserer App erfordert zwei kleine Mods für unsere App.

Zuerst müssen wir die Firebase-Skripte wie folgt in die Datei www/index.html der App einfügen:

 <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script> <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script> <script src="js/app.js"></script>

Als nächstes müssen wir das Firebase-Modul zu unserer Anwendung hinzufügen, indem wir 'firebase' zur Liste in unserem AngularJS- 'starter' -Modul hinzufügen:

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

Firebase ist jetzt aktiviert, genau wie jedes andere AngularJS-Modul.

Das 5-Minuten-Tutorial von AngularFire zeigt Ihnen, wie Sie Datenreferenzen in Controllern erstellen. Für unsere Demo-App habe ich mich jedoch entschieden, diese Referenzen in einem separaten Dienst zu behalten (da dies die Wartung und Aktualisierung erheblich vereinfacht, wenn die Root-URL geändert wird). Um diesen Dienst zu erstellen, fügen Sie Folgendes zu www/js/services.js :

 .factory('fireBaseData', function($firebase) { var ref = new Firebase("https://luminous-fire-3429.firebaseio.com/"), refExpenses = new Firebase("https://luminous-fire-3429.firebaseio.com/expenses"), refRoomMates = new Firebase("https://luminous-fire-3429.firebaseio.com/room-mates"); return { ref: function() { return ref; }, refExpenses: function() { return refExpenses; }, refRoomMates: function() { return refRoomMates; } } });

Der obige Code fügt drei Referenz-URLs hinzu. Eine für den Stamm und zwei für Sammlungen, die wir expenses und room-mates genannt haben.

Das Hinzufügen einer neuen Sammlung zu Firebase erfolgt einfach durch Hinzufügen ihres Namens am Ende Ihrer Stamm-URL . Um also die expenses zu erstellen, die wir brauchen, brauchen wir nur Folgendes:

https://<yourfirebase>.firebaseio.com/expenses

Dadurch wird die expenses erstellt, und wir können dann damit beginnen, Objekte hinzuzufügen.

OK, jetzt können wir die Ausgabenerfassung von Firebase einbinden, um das zuvor erstellte „Dummy“-Ausgaben-Array zu ersetzen. Dazu ändern Sie DashCtrl in www/js/controllers.js wie folgt:

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: < someemail > , label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Ein ähnlicher Satz von Änderungen muss an FriendsCtrl vorgenommen werden. Ich empfehle erneut, dass Sie dies selbst versuchen, aber wenn Sie auf Probleme stoßen oder überprüfen möchten, ob Sie dies richtig gemacht haben, können Sie auf meine Implementierung auf GitHub verweisen.

Um zu überprüfen, ob es funktioniert, während Sie die App auf zwei verschiedenen Clients ausführen, fügen Sie eine neue Ausgabe hinzu und prüfen Sie, ob sie auf beiden Clients in der Liste angezeigt wird. Wenn es funktioniert … woo-hoo! Sie haben Ihre Ionic-App jetzt erfolgreich mit Firebase verbunden!

Sie können Ihre Multi-Plattform-App auf verschiedenen Geräten testen, indem Sie ein Gerät an Ihr System anschließen und ionic run android oder ionic emulate ios ausführen. Weitere Informationen zum Testen Ihrer App finden Sie in der Ionic-Dokumentation.

Kontoverwaltung und -sicherheit mit Firebase

Obwohl die grundlegende Funktionalität jetzt funktioniert, ist ein ernstes Problem, dass unsere App derzeit völlig unsicher ist. Die ganze Welt kann Ihre Ausgaben sehen, ohne dass Berechtigungen oder Anmeldungen erforderlich sind. Dies muss offensichtlich angegangen werden.

Firebase bietet ein leistungsstarkes und dennoch einfaches Authentifizierungs-Framework mit „Regeln“. Mit der Rules Language von Firebase kann viel getan werden. (Weitere Einzelheiten finden Sie in der Firebase-Sicherheitsdokumentation.)

In unserem Fall werden wir eine sehr einfache Regel schreiben, um nicht autorisierte Benutzer daran zu hindern, auf unsere Daten zuzugreifen. Öffnen Sie dazu Ihre Stamm-URL, klicken Sie in Ihrer linken Aktionsleiste auf „Sicherheit & Regeln“, fügen Sie den folgenden Code in Ihre Regeln ein und klicken Sie auf „Speichern“.

 { "rules": { ".read": "auth != null", ".write": "auth != null" } }

Wenn Sie Ihre Anwendung jetzt ausführen, werden Sie feststellen, dass keine Daten vorhanden sind. Sie können sogar versuchen, Ihre Anfrage mithilfe von Browsertools zu überprüfen, und Sie sollten eine Meldung in Ihrer Konsole sehen, die besagt, dass Sie nicht berechtigt sind, die Daten anzuzeigen.

Erstellen von Benutzerkonten und Aktivieren der Anmeldung

Sie können Ihre Benutzer authentifizieren, indem Sie sie ihre eigene E-Mail-/Passwort-Kombination erstellen lassen oder ihre vorhandenen Anmeldeinformationen für Google, Facebook, Twitter oder Github verwenden. Für die E-Mail-/Kennwortauthentifizierung bietet Firebase einen vollständigen Satz von API-Methoden zum Ändern, Zurücksetzen usw. von Kennwörtern. Weitere Informationen zur Authentifizierung mit Firebase finden Sie im Firebase-Handbuch.

Für unsere Demo-App erstellen wir zwei Benutzerkonten über die Firebase-Oberfläche. Gehen Sie dazu zu Ihrer Firebase-Stamm-URL und gehen Sie wie folgt vor:

1. Klicken Sie in der linken Aktionsleiste auf Login & Auth.
2. Aktivieren Sie das Kontrollkästchen, um die E-Mail- und Kennwortauthentifizierung zu aktivieren.
3. Scrollen Sie nach unten, um das Formular „Neue Konten hinzufügen“ zu finden.
4. Fügen Sie Ihre Konten mit „Neuen Benutzer hinzufügen“ hinzu.

Um die Anmeldeschnittstelle für Ihre Benutzer zu aktivieren, fügen Sie zunächst den folgenden Code zu www/templates/tab-account.html :

 <ion-view title="Account"> <ion-content> <div class="list" ng-show="showLoginForm"> <label class="item item-input"> <span class="input-label">Email</span><input type="text" ng-model="em"/> </label> <label class="item item-input"> <span class="input-label">Password</span><input type="password" ng-model="pwd"/> </label> <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button> </div> <div class="card" ng-hide="showLoginForm"> <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div> </div> <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button> </ion-content> </ion-view>

Fügen Sie dann Folgendes zu AccountCtrl in www/controller.js hinzu:

 .controller('AccountCtrl', function($scope, fireBaseData) { $scope.showLoginForm = false; //Checking if user is logged in $scope.user = fireBaseData.ref().getAuth(); if (!$scope.user) { $scope.showLoginForm = true; } //Login method $scope.login = function (em, pwd) { fireBaseData.ref().authWithPassword({ email : em, password : pwd },function(error, authData) { if (error === null) { console.log("User ID: " + authData.uid + ", Provider: " + authData.provider); $scope.user = fireBaseData.ref().getAuth(); $scope.showLoginForm = false; $scope.$apply(); } else { console.log("Error authenticating user:", error); } }); }; // Logout method $scope.logout = function () { fireBaseData.ref().unauth(); $scope.showLoginForm = true; }; });

Eine wichtige Sache, die Sie aus Sicherheitsgründen beachten sollten, ist, dass Firebase-Anmeldungen standardmäßig persistent sind . Wenn Sie also möchten, dass sich Ihr Benutzer bei jedem Start der Anwendung anmelden muss, müssen Sie die Firebase-Konfiguration entsprechend ändern. Führen Sie dazu einmalig nach erfolgreicher Anmeldung folgenden Code aus:

 var r = $firebase(fireBaseData.refRoomMates()).$asArray(); // NOTE: Substitute the email addresses of your two user accounts in the line below r.$add(["[email protected]","[email protected]"]);

Sie können dies nach erfolgreicher Anmeldung im Konto-Controller hinzufügen oder nach erfolgreicher Anmeldung einen Haltepunkt setzen und in Ihrem Konsoleninspektor ausführen.

Filtern nach Benutzer

Der plattformübergreifenden mobilen App fehlt jedoch noch eine wichtige Funktion. Wir möchten Ihre Ausgaben von denen Ihres Mitbewohners unterscheiden. Nachdem wir nun zwei Konten erstellt haben, müssen wir nur noch die Daten unserer Ansichten filtern.

Wir müssen zuerst dashCtrl in www/js/controllers.js ändern, um (a) die Daten für den aktuellen Benutzer in $scope zu bekommen und (b) zusätzliche Kosten für den aktuellen Benutzer zu sparen:

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.user = fireBaseData.ref().getAuth(); // ADD MESSAGE METHOD $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.user.password.email, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Als nächstes müssen wir einen Filter in www/templates/tab-dash.html , um nur die Ausgaben des aktuellen Benutzers anzuzeigen:

 <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

OK, der Startbildschirm ist jetzt perfekt. Ein Benutzer kann nur seine eigenen Ausgaben sehen und hinzufügen.

Der letzte und letzte Schritt besteht darin, das Teilen der vollständigen Ausgabenliste zwischen Mitbewohnern zu ermöglichen. Ändern Sie dazu www/templates/tab-friends.html , um diesen Filter hinzuzufügen:

 <ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

Ändern Sie dann FriendsCtrl in www/controllers.js wie folgt:

 .controller('FriendsCtrl', function($scope, fireBaseData, $firebase) { $scope.user = fireBaseData.ref().getAuth(); $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray(); $scope.roomies.$loaded().then(function(array) { //array = [[set1_rm1_email, set1_rm2_email], [set2_rm1_email, set2_rm2_email] ...] for (var i = 0; i < array.length; i++) { if (array[i][0] === $scope.user.password.email) { $scope.roomiesEmail = array[i][1]; } else if (array[i][1] === $scope.user.password.email) { $scope.roomiesEmail = array[i][0]; } } $scope.$apply(); // NOTE: For simplicity, this demo only supports the 2-roommate use case }); $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.roomiesEmail, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Das ist es! Installiere/aktualisiere die App sowohl auf deinem Gerät als auch auf dem Gerät deines Mitbewohners und du solltest fertig sein!

Einpacken

Unser einfaches Beispiel kratzt nur an der Oberfläche dessen, was mit Ionic und Firebase erreicht werden kann – und wie einfach es erreicht werden kann. Sie sind wirklich ein leistungsstarkes Duo zum Erstellen von Echtzeit-Smartphone-Anwendungen für mehrere Plattformen mit JavaScript und HTML5.