[Firebase] Requêtes SQL converties en Firebase noSql.

Firebase

Introduction


Firebase est une base de données géniale de Google en ligne comparable à MongoDb mais avec pleins de fonctionnalités  supers du style Auth, sécurité etc …

Firebase est pas mal pour créer des maquettes d’applications rapidement par exemple ou pour développer dans l’urgence une petite application temporaire (6 mois d’utilisation.).

Par contre c’est du stock d’objets JSON, du coup on peut pas requêter en SQL dessus.

Comment requêter sur Firebase  ?


Regarder le blog de ces personne qui ont converti des rqts SQL communes en rqts Firebase:

https://firebase.googleblog.com/2013/10/queries-part-1-common-sql-queries.html
https://firebase.googleblog.com/2014/11/firebase-now-with-more-querying.html

Exercice 46 : Filtrer une base de données Php-Mysql , une base noSql Firebase, et une base Java-Mysql dans la même application AngularJs très courte.

Firebase  logo-phpjava

Introduction


Il peut arriver que l’on ne puisse pas charger tout notre modèle de données d’un seul coup dans une application AngularJs 1.5 parce qu’il est trop grand et que le temps de chargement est trop long.

POUR TESTER L’APP, CLIQUER ICI.

De ce fait, je décide d’imposer un filtrage de la base de données à l’aide d’un select HTML, avant le chargement Ajax de notre modèle de données JSON dans mon navigateur.
En effet, filtrer en local, avec ng-repeat, peut nécessiter beaucoup de processeur, alors que si on filtre AVANT dans les requêtes, on gagne. cependant, Ng-repeat est fantastiquement utile pour les selects html par exemple, qu’il mets à jour automatiquement, à ce moment, on peut filtrer en local sur de modestes données, à noter que pas mal de plug-ins dropdowns proposent cette fonctionnalité.

Voici donc un exercice fonctionnel répertoriant :

  • 1 filtrage de la base de données noSql firebase (similaire à MongoDb)
  • 1 filtrage de la base de données relationnelle Mysql avec le langage PHP en Back End.
  • 1 fitrage de la base de données relationnelle Mysql avec le langage JAVA en Back End.

Temps de réalisation : 3h(A cause d’un pb de syntaxe avec une var string dans la rqt sql PHP qui m’a ralenti 45 min!)
EDIT : Le code Java est sérieusement compliqué à mettre en place(Comme d’hab), il ne sera pas dispo de suite !

A noter que le filtrage sur Firebase aurait pu être organisé différemment si les nodes avaient été rangés par catégorie. Ici, j’utilise la fonction .equalTo(critère)de l’api firebase, probablement plus couteuse en temps.

Le framework Css utilisé est tout simplement Foundation 6 .css avec un template. Celui-ci est excellent car il passe aussi bien sur les ordis de bureau que sur les téléphones mobiles 5 pouces si on fait bien attention aux classes CSS.

Phase 1 : Créer nos bases de données :


Voici le look de ma base de données noSql sur firebase, j’ai donc une branche nommée « Aliments », mon but est de pouvoir quérir et les trier par catégories à l’aide d’angularJs 1.x: (Pour créer ma base, j’ai créé un mini prog en angularJs mais on peut le faire en ligne de commande avec les commandes firebase.)

nodescool

.

Dans Mysql, je crée ma base de donnée relationnelle, contenant les mêmes aliments que la base noSql, cela donne ça :

mysql huidf

PHASE 2 : Le code :


Lire la suite

Application de base avec identification Firebase et filtrage par utilisateur.

Introduction :


App traduite en Français, basée sur le vieux angularFire 0.0.9, fonctionnelle.

Bonne base pour créer des apps sécurisées  sur la base de données en ligne Firebase avec Angular.Js 1.x

Les utilisateurs ne peuvent pas modifier les articles des autres utilisateurs. Un utilisateur non identifié ne peut pas accéder aux données ni à l’application, en l’apparence, mais la sécurité firebase n’est pas traitée.

Pour tester, cliquer ici. (log-in:a@a.fr pass:aaaaaaaa)

Basée sur ce tuto :

Le Code :


nicolash.org/truc43.zip

 

Charger une partie d’une BDD noSql Firebase, sous contrainte de filtre.

Introduction


Suite à l’exercice 13 que j’ai fait, on peut constater que charger une BDD Firebase de plus de 500 objets JSON d’un seul coup commence à être un peu long pour l’utilisateur, même si cela fonctionne encore.

Du coup, une piste est

  • Soit d’utiliser la pagination.
  • Soit de charger une partie de la BDD, en spécifiant un critère de filtrage, ceci en permanence.

Comment faire ?


Une première piste ici :

http://stackoverflow.com/questions/17179532/using-limits-with-angularfire

et là :

https://www.firebase.com/blog/2013-10-01-queries-part-one.html

 

Solution 1 : BASIQUE


 

Lors de le connexion à notre BDD, spécifier un limit(x), cela limite le nombre d’objets json chargés . Si l’on ajoute startAt(), cela charge uniquement les premiers objets créés dans notre modèle de données .

Exemple :

var ref = new Firebase(« https://blinding-heat-8502.firebaseio.com/villes »).limit(50).startAt();

Paginer une Base de Données noSql Firebase

INTRODUCTION


Une lib existe pour paginer une base de données noSql Firebase :

http://firebase.github.io/firebase-util/#/toolbox/Paginate/example/page

Leur exemple comporte une erreur à la ligne :

<li ng-repeat="item in scrollItems">{{item.$id}}: {{item.string}}</li>

Pour le voir marcher, il faut écrire :

<li ng-repeat="item in pageItems">{{item.$id}}: {{item.string}}</li>

 


EXEMPLE FONCTIONNEL(Cliquer ici pour tester) :


 

index.html

<!DOCTYPE html>
<html  class="" lang="en">
	<head>

		<!-- CHARGEMENT DES LIBRAIRIES -->

				<!-- CHARGEMENT LIB ANGULAR -->
				<script type="text/javascript" src="librairies/angular-1.3.13/angular.min.js"></script>

				<!-- AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

				<!-- Firebase Utils -->
				<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
				<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
				<script>
					Firebase.util.logLevel('log');
					Firebase.util.log('hello world');
				</script>

					<!--	APPEL LIB BOOTSTRAP -->
				<script src="librairies/bootstrap/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
				 	<link rel='stylesheet prefetch' href='librairies/bootstrap/css/bootstrap.css'>
				 	<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css'>
				
				
				
				<!-- Le CONTROLEUR -->
				<script src="controleurs/app.js"></script>
	</head>

<body ng-app="app" ng-controller="ctrl">
<h4>Showing: Page {{ pageItems.currentPageNumber }} of {{ pageItems.pageCount }}<span ng-show="pageItems.couldHaveMore"> or more</span></h4>
<ul>
	<li ng-repeat="item in pageItems">{{item.$id}}: {{item.string}}</li>
</ul>
<button class="btn btn-primary"
            ng-click="pageItems.page.setPage(1)"
            ng-disabled="pageItems.currentPageNumber < 2">
        <i class="glyphicon glyphicon-fast-backward"></i>
    </button>

    <button class="btn btn-primary"             ng-click="pageItems.page.prev()"             ng-disabled="!pageItems.page.hasPrev()">
        <i class="glyphicon glyphicon-backward"></i>
    </button>

    <button class="btn btn-primary"             ng-click="pageItems.page.next()"             ng-disabled="!pageItems.page.hasNext()">
        <i class="glyphicon glyphicon-forward"></i>
    </button>

    <button class="btn btn-primary"             ng-click="pageItems.page.setPage(pageItems.pageCount)"             ng-disabled="!pageItems.page.hasNext() || pageItems.currentPageNumber >= pageItems.pageCount">
        <i class="glyphicon glyphicon-fast-forward"></i>
    </button>

</body>
</html>

app.js :

var app = angular.module('app', ['firebase']);

app.controller('ctrl', function($scope, $pageArray) {
   var ref = new Firebase('https://fbutil.firebaseio.com/paginate');
  $scope.pageItems = $pageArray(ref, 'number');
});

app.factory('$pageArray', function($firebaseArray) {
  return function(ref, field) {
    // Créer une référence de pagination
    var pageRef = new Firebase.util.Paginate(ref, field, {maxCacheSize: 250});
    // génére un tableau synchronisé utilisant  the special page ref
    var list = $firebaseArray(pageRef);
    // store the "page" scope on the synchronized array for easy access
// stocke le scope de la page sur le tableau synchronisé pour faciliter l'acces
    list.page = pageRef.page;

    // when the page count loads, update local scope vars
// Quand la page compte les enregitrement, mettre à jour le scope local de variables
    pageRef.page.onPageCount(function(currentPageCount, couldHaveMore) {
      list.pageCount = currentPageCount;
      list.couldHaveMore = couldHaveMore;
    });

    // when the current page is changed, update local scope vars
    pageRef.page.onPageChange(function(currentPageNumber) {
      list.currentPageNumber = currentPageNumber;
    });

    // load the first page
    pageRef.page.next();

    return list;
  }
});

Ajouter un bouton « Montrer les 25 prochains objets » avec Firebase.

Introduction


Il existe une lib pour gérer la pagination avec Firebase sous Angular 1.0:

http://firebase.github.io/firebase-util/#/

 

Exemple fonctionnel (Cliquer ici pour tester):


Index.html :


<!DOCTYPE html>
<html  class="" lang="en">
	<head>

		<!-- CHARGEMENT DES LIBRAIRIES -->

				<!-- CHARGEMENT LIB ANGULAR -->
				<script type="text/javascript" src="librairies/angular-1.3.13/angular.min.js"></script>

				<!-- AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>

				<!-- Firebase Utils -->
				<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
				<script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script>
				<script>
					Firebase.util.logLevel('log');
					Firebase.util.log('hello world');
				</script>

				<!-- Le CONTROLEUR -->
				<script src="controleurs/app.js"></script>
	</head>

	<body ng-app="app" ng-controller="ctrl">
<h4>Items loaded: {{scrollItems.length}}</h4>
<button class="btn btn-primary" 			  ng-click="scrollItems.scroll.next(25)" 			  ng-disabled="!scrollItems.scroll.hasNext()">
			  Load Next 25
		  </button>
<ul class="scrollbox" scroll-to-bottom="scrollItems">
	<li ng-repeat="item in scrollItems">{{item.$id}}: {{item.nom}}</li>
</ul>
</body>
</html>

app.js

var app = angular.module('app', ['firebase']);

app.controller('ctrl', ['$scope', '$firebaseArray', '$scrollArray',
  function($scope, $firebaseArray, $scrollArray) {
    var servicesRef = new Firebase('https://fbutil.firebaseio.com/paginate');
    $scope.scrollItems = $scrollArray(servicesRef, 'number');
}])

app.factory('$scrollArray', ['$firebaseArray', function($firebaseArray) {
  return function(ref, field) {
    var scrollRef = new Firebase.util.Scroll(ref, field);
    var list = $firebaseArray(scrollRef);
    list.scroll = scrollRef.scroll;

    return list;
  }
}])

// just some scroll magic to show the bottom of the list as new records are loaded
app.directive('scrollToBottom', function () {
  var unbind;
  return {
    restrict: 'A',
    scope: { scrollToBottom: "=" },
    link: function (scope, element) {
      if( unbind ) { unbind(); }
      unbind = scope.$watchCollection('scrollToBottom', function () {
        // assumes we have jQuery, which handles the pretty animation
        // otherwise, just use this code instead:
        element[0].scrollTop = element[0].scrollHeight;
        $(element).animate({scrollTop: element[0].scrollHeight});
      });
    }
  }
});

 

 

 

Micro Application 14 : MedicSolutions, une application médicale multi-utilisateur en noSql.

medicsolutions

Introduction :


Un exercice de création d’application médicale avec un mapping sur le corps humain en guise de filtrage AngularJs.

Stockage en ligne sur Firebase.

C’est du NoSql.

Synopsys :


 Log in : a@a.fr Mot de passe : aaaaaaaa

Le personnel hospitalier débordé a besoin de connaitre les médicaments suggérés en fonction de symptômes ou des endroits ou le mal perdure.

Il peut ainsi suggérer par email le médicament à prendre au patient, ou les commander pour lui.

Il peut trier en temps réel les médicaments selon :

  • Leur puissance
  • Les effets secondaires plus ou moins fort.

Ils peuvent aussi modifier toutes les données.
Il s’identifie dans l’application et retrouve les prescriptions qu’il a réalisé par dates.
Ils peuvent aussi générer des prescriptions dans l’application, avec le look officiel( Surimpression des données sur un scan de prescription vierge.)

Descriptif :


  • Type : Micro- Application Web de type Saas, compatible avec téléphones android 5 pouces.
  • Responsive : Oui.
  • Langage : AngularJs, Framework foundation Responsive, Html 5.0, Css3.0
  • Bibliothèques : AngularFire, Foundation.
  • Modules : angular-notifier
  • Format d’échanges de Données : JSON
  • Routing angularJs : Non (Des modales)
  • Back-end : noSql FIREBASE en ligne
  • Difficulté : ++++0/+++++
  • Test avec jasmine : Non.
  • Durée de codage : Entre 1 mois et 2 mois.
  • UML 2.0 : non.
  • Webstorage(stockage des données dans le navigateur) : Non
  • Gestion de la concurence : Firebase s’en charge
  • Webservice : non.
  • Authentification : Oui sur firebase
  • Minification Grunt : non.
  • Nodes.Js : non.
  • MongoDb/Nosql : Firebase
  • Ambition Commerciale : non.
  • Etude de Marché, Barrières commerciales  : non.
  • Arborescence de l’appli : 
    • CSS
    • CONTROLEURS
    • VUES
    • DIRECTIVES
    • FACTORY
    • UPLOADS
    • IMG-APPS
    • LIBRAIRIES

Journal :


Lire la suite