Création d'applications mobiles multiplateformes en temps réel : exemples utilisant Ionic Framework et Firebase

L'un des principaux problèmes rencontrés par les entreprises lors de la création d'une application pour smartphone est le coût multiplicatif de la création d'une application native sur différentes plates-formes. Alors que les développeurs frontaux avertis se sont tournés vers le développement de plusieurs plates-formes hybrides qui promettent d'aider à résoudre ce problème, Ionic Framework et Firebase forment un duo dynamique qui, ensemble, nous offre vraiment une flexibilité incroyable dans la création d'applications pour smartphone en temps réel à l'aide de JavaScript et HTML5. .

Ce didacticiel présente les fonctionnalités de ces outils de développement mobile multiplateformes et fournit même des exemples Ionic et Firebase.

(Remarque : cet article suppose une certaine familiarité avec les bases du framework AngularJS. Voici un excellent article d'introduction sur AngularJS pour ceux qui n'ont pas cette expérience.)

Présentation du cadre ionique

Le cadre ionique est composé de trois composants principaux :

1. Un cadre d'interface utilisateur basé sur SASS conçu et optimisé pour les interfaces utilisateur mobiles.
2. Un framework JavaScript frontal AngularJS utilisé pour créer rapidement des applications évolutives et rapides.
3. Un compilateur (Cordova ou PhoneGap) pour les applications mobiles natives avec CSS, HTML et JavaScript.

Le framework Ionic contient également de nombreux composants CSS utiles prêts à l'emploi.

Félicitations à Ionic pour avoir fourni une documentation complète, des exemples et des vidéos de démarrage pour aider à simplifier la courbe d'apprentissage et permettre aux développeurs d'être opérationnels rapidement.

Présentation de Firebase

Firebase est un système de données sans schéma backend-as-a-service qui fournit une synchronisation des données en temps réel sans nécessiter l'écriture d'un code personnalisé. Firebase rend une grande partie de votre développement back-end obsolète, réduisant ainsi considérablement le temps de développement multiplateforme.

Les principales caractéristiques et avantages incluent :

1. Changements de données sans changement de code. Toutes les modifications de données sont publiées immédiatement sur les clients, sans qu'aucune modification de code backend ne soit nécessaire.
2. Beaucoup d'adaptateurs. Il existe des adaptateurs, avec un bon support et une bonne documentation, pour tous les frameworks JavaScript populaires et les SDK de plate-forme mobile. (Nous avons utilisé AngularFire, qui est la liaison AngularJS pour Firebase, dans cet article.)
3. Facilité d'authentification. L'authentification dans Firebase est aussi simple qu'un seul appel de méthode, quelle que soit la méthode d'authentification. Prend en charge les connexions par e-mail et mot de passe simples, Google, Facebook, Twitter ou Github.
4. Hors ligne activé. Toutes les données Firebase sont hors ligne, de sorte qu'une application peut être entièrement (ou presque entièrement) fonctionnelle en mode déconnecté. Les applications sont automatiquement synchronisées lorsque la connexion est rétablie.
5. Tableau de bord de configuration. Une grande partie de Firebase (règles de sécurité, par exemple) peut être facilement configurée via l'interface de tableau de bord intuitive de Firebase.
6. Centré sur JSON. Dans Firebase, toutes les données sont stockées et récupérées sous la forme d'objets JSON.

Firebase propose également des services cloud pour l'hébergement du code frontal, ce qui peut gagner un temps considérable dans le déploiement et la maintenance.

Il convient également de noter que Firebase a été acquis par Google en octobre dernier, ce qui lui a conféré beaucoup plus d'attention et de visibilité.

Un exemple de cas d'utilisation simple : suivi des dépenses

Les colocataires partagent souvent les dépenses et comptent les uns sur les autres en cas de besoin. Alors, aidons les colocataires à suivre leurs dépenses et aidons-les à faire le rapprochement à la fin du mois.

Pour rendre les choses encore plus intéressantes, construisons une application mobile multiplateforme qui fournira des mises à jour en temps réel, afin qu'ils puissent chacun surveiller les dépenses au fur et à mesure qu'elles se produisent.

Maintenant que nous avons décidé ce que nous voulons créer et que nous avons découvert les outils, commençons !

Premiers pas avec Ionic et Firebase

La première chose que nous devons faire est d'installer Ionic. Suivez les instructions d'installation fournies sur la page Ionic Getting Started. (Notez qu'Ionic dépend de NodeJS, donc les instructions vous demanderont de l'installer également si vous ne l'avez pas déjà sur votre machine).

Le didacticiel AngularFire de 5 minutes est un excellent endroit pour commencer à se familiariser avec Firebase. Et si vous êtes un "bricoleur" ou un apprenant tactile comme moi, vous voudrez peut-être extraire mon implémentation de GitHub et commencer à jouer avec le code.

Codage de notre application multiplateforme

Pour ce didacticiel, nous allons utiliser l'exemple d'application d' tabs fourni dans le cadre de l'installation d'Ionic comme base de notre application. (Vous pouvez exécuter l'exemple d'application avec la commande ionic start myApp tabs .)

Ouvrez l'exemple d'application d' tabs dans votre IDE préféré (j'utilise Webstorm) et commençons à le modifier pour créer notre application de colocataires.

Pour notre exemple d'application Ionic et Firebase, nous aurons besoin des trois écrans suivants :

Avant de créer ces écrans, supprimons l'"écran de détail des amis" fourni par défaut avec l'exemple d'application comme suit :

1. Supprimez le fichier www/templates/friend-detail.html .
2. Dans www/js/app.js , supprimez (ou commentez) l'état de friend-detail.html .
3. Dans www/js/controllers.js , supprimez le contrôleur FriendDetailCtrl qui est référencé dans l'état que nous avons supprimé.

Modifions maintenant les icônes et le texte des sélecteurs d'onglets en bas de notre écran pour qu'ils soient les suivants :

Cela se fait simplement en apportant les modifications suivantes dans 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>

Avant de connecter nos données à Firebase, créons une liste et lions-la à un tableau appelé expenses en ajoutant le code suivant à 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>

Nous devrons également étendre le DashCtrl dans www/js/controllers.js pour inclure le tableau des expenses , ainsi qu'une méthode addExpense et une méthode getTotal , comme suit :

 .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; }; })

Le tableau des expenses est ce qui stocke les éléments dans la liste des dépenses, la méthode addExpense() ajoute une nouvelle valeur au tableau des expenses et la méthode getTotal() nous donne le total de tous les éléments du tableau.

Un ensemble similaire de modifications doit maintenant être apporté à tab-friends.html . Essayez de le faire par vous-même, mais si vous rencontrez des problèmes ou si vous souhaitez vérifier que vous l'avez fait correctement, vous pouvez vous référer à mon implémentation sur GitHub.

Accrochage à Firebase

Vous aurez besoin d'un compte Firebase. Vous pouvez vous inscrire ici pour un "plan de piratage" Firebase gratuit.

Une fois inscrit, vous recevrez votre URL racine , qui ressemblera à quelque chose comme https://<yourfirebase>.firebaseio.com .

L'activation de Firebase dans notre application nécessite deux petits mods pour notre application.

Tout d'abord, nous devons inclure les scripts Firebase dans le fichier www/index.html de l'application comme suit :

 <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>

Ensuite, nous devons ajouter le module Firebase à notre application en ajoutant 'firebase' à la liste dans notre module 'starter' AngularJS :

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

Firebase est maintenant activé, comme tout autre module AngularJS.

Le tutoriel AngularFire de 5 minutes vous apprendra à créer des références de données dans les contrôleurs. Pour notre application de démonstration, cependant, j'ai décidé de conserver ces références dans un service séparé (car cela facilite grandement la maintenance et la mise à jour si l'URL racine est modifiée). Pour créer ce service, ajoutez ce qui suit à 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; } } });

Le code ci-dessus ajoute trois URL de référence. Un pour la racine et deux pour les collections que nous avons nommées expenses et room-mates .

L'ajout d'une nouvelle collection à Firebase se fait simplement en ajoutant son nom à la fin de votre url racine . Donc, pour créer la collection de expenses dont nous aurons besoin, tout ce dont nous avons besoin est ce qui suit :

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

Cela créera la collection de expenses , et nous pourrons alors commencer à y ajouter des objets.

OK, maintenant nous pouvons accrocher la collection de dépenses de Firebase pour remplacer le tableau de dépenses "factice" que nous avons créé plus tôt. Cela se fait en modifiant DashCtrl dans www/js/controllers.js comme suit :

 .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; }; })

Un ensemble similaire de modifications doit être apporté à FriendsCtrl . Je vous recommande à nouveau d'essayer de le faire par vous-même, mais si vous rencontrez des problèmes ou si vous souhaitez vérifier que vous l'avez fait correctement, vous pouvez vous référer à mon implémentation sur GitHub.

Pour vérifier que cela fonctionne, tout en exécutant l'application sur deux clients différents, ajoutez une nouvelle dépense et vérifiez qu'elle s'affiche dans la liste sur les deux clients. Si ça marche… woo-hoo ! Vous avez maintenant connecté avec succès votre application Ionic à Firebase !

Vous pouvez tester votre application multiplateforme sur différents appareils en connectant un appareil à votre système et en exécutant ionic run android ou ionic emulate ios . Reportez-vous à la documentation Ionic pour plus d'informations sur le test de votre application.

Gestion de compte et sécurité avec Firebase

Bien que la fonctionnalité de base fonctionne maintenant, un problème sérieux est que notre application est actuellement complètement non sécurisée. Le monde entier peut voir vos dépenses, sans qu'aucune autorisation ou connexion ne soit requise. Cela doit évidemment être abordé.

Firebase fournit un cadre d'authentification puissant mais simple utilisant des "règles". Il y a beaucoup de choses qui peuvent être faites en utilisant le langage de règles de Firebase. (Reportez-vous à la documentation de sécurité de Firebase pour plus de détails.)

Dans notre cas, nous allons écrire une règle très simple pour empêcher les utilisateurs non autorisés d'accéder à nos données. Pour cela, ouvrez votre url racine, cliquez sur "Sécurité & Règles" dans votre barre d'action de gauche, collez le code ci-dessous dans vos règles, et cliquez sur Enregistrer.

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

Si vous exécutez votre application maintenant, vous remarquerez qu'il n'y a pas de données. Vous pouvez même essayer d'inspecter votre demande en utilisant les outils du navigateur et vous devriez voir un message dans votre console indiquant que vous n'êtes pas autorisé à afficher les données.

Création de comptes d'utilisateurs et activation de la connexion

Vous pouvez authentifier vos utilisateurs en les laissant créer leur propre combinaison e-mail/mot de passe, ou utiliser l'un de leurs identifiants de connexion Google, Facebook, Twitter ou Github existants. Pour l'authentification par e-mail/mot de passe, Firebase propose un ensemble complet de méthodes API pour le changement de mot de passe, la réinitialisation, etc. Vous trouverez plus d'informations sur l'authentification à l'aide de Firebase dans le guide Firebase.

Pour notre application de démonstration, nous allons créer deux comptes d'utilisateurs via l'interface Firebase. Cela peut être fait en accédant à votre URL racine Firebase et en procédant comme suit :

1. Cliquez sur Connexion et authentification dans la barre d'action de gauche.
2. Cochez la case pour activer l'authentification par e-mail et mot de passe.
3. Faites défiler vers le bas pour trouver le "Formulaire d'ajout de nouveaux comptes"
4. Ajoutez vos comptes en utilisant "Ajouter un nouvel utilisateur".

Pour activer l'interface de connexion pour vos utilisateurs, ajoutez d'abord le code suivant à 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>

Ajoutez ensuite ce qui suit à AccountCtrl dans www/controller.js :

 .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; }; });

Une chose importante à savoir du point de vue de la sécurité est que les connexions Firebase sont persistantes par défaut . Par conséquent, si vous souhaitez que votre utilisateur doive se connecter à chaque démarrage de l'application, vous devrez modifier la configuration de Firebase en conséquence. Pour ce faire, une seule fois après une connexion réussie, exécutez le code suivant :

 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]"]);

Vous pouvez l'ajouter dans le contrôleur de compte après une connexion réussie, ou mettre un point d'arrêt après une connexion réussie et l'exécuter dans votre inspecteur de console.

Filtrage basé sur l'utilisateur

Il manque cependant une fonctionnalité importante à l'application mobile multiplateforme. Nous voulons distinguer vos dépenses de celles de votre colocataire. Maintenant que nous avons créé deux comptes, il ne nous reste plus qu'à filtrer les données sur nos vues.

Nous devons d'abord modifier le dashCtrl dans www/js/controllers.js afin (a) d'obtenir les données de l'utilisateur actuel dans $scope et (b) d'économiser toute dépense supplémentaire pour l'utilisateur actuel :

 .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; }; })

Ensuite, nous devons ajouter un filtre dans www/templates/tab-dash.html pour afficher uniquement les dépenses de l'utilisateur actuel :

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

OK, l'écran d'accueil est maintenant parfait. Un utilisateur ne peut voir et ajouter que ses propres dépenses.

La dernière et dernière étape consiste à permettre le partage de la liste complète des dépenses entre colocataires. Pour ce faire, modifiez le www/templates/tab-friends.html pour ajouter ce filtre :

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

Modifiez ensuite FriendsCtrl dans www/controllers.js comme suit :

 .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; }; })

C'est ça! Installez/mettez à jour l'application sur votre appareil et celui de votre colocataire et vous devriez être prêt !

Emballer

Notre exemple simple ne fait qu'effleurer la surface de ce qui peut être accompli - et avec quelle facilité cela peut être accompli - en utilisant Ionic et Firebase. Ils forment vraiment un duo puissant pour créer des applications de smartphone multiplateformes en temps réel utilisant JavaScript et HTML5.