Truc 28 : Gérer une application partagée AngularJs en ligne avec une base de données Firebase noSql. (Application

FirebaseIntroduction.


Mieux que Mongolab, Firebase permet d’avoir une authentification dans notre application partagée.

Récente startup de 2 ans environs, avec 7 salariés, vers San francisco.

On a donc directement notre base de données en ligne, qui stocke des objets JSON. Pas besoin de s’embêter à monter un serveur, à gérer un serveur Apache ou Tomcat, et même à parler un autre langage… Tout est en Js, bref, c’est bien.

L’avantage particulier est la liaison des données tridirectionnelle, en d’autre termes, une modification opérée dans le navigateur d’une personne se répercute automatiquement immédiatement dans le navigateur de toutes les autres personnes sur Internet, autrement dit, l’application Angular se mets à jour en temps réel comme avec un système socket.io, mais sans rien faire d’autre que du code angularJs et en se servant de l’API Firebase.

Tout le monde se connecte dessus, on peut donc créer des applications MVC AngularJs partagées avec ce système. (et pas seulement en Angular,c’est aussi possible en Java ou autre)

Quelques liens :


La méthode officielle en Anglais pour gérer le module Firebase pour Angular :

  • https://www.firebase.com/docs/web/libraries/angular/quickstart.html

API AngularFire :

  • https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-users-and-authentication

Gérer l’authentification :

Une Méthode en français :

  • http://blog.xebia.fr/2014/01/17/firebase-et-angularjs-front-sans-back/

Le Code


Exemple 1 , Un chat en ligne avec Jquery, sans Angular:


<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>
  <body>

<div id='messagesDiv'></div>

    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>

	<!-- Connexion à la Base FireBase -->
      var myDataRef = new Firebase('https://blinding-heat-XXXX.firebaseio.com/');

	<!-- Gestion du formulaire en Jquery -->
	  $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text}); // Ecris dans Firebase
          $('#messageInput').val('');
        }
      });

	 <!-- Gestion du rafraichissement -->
	 myDataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
		displayChatMessage(message.name, message.text);
      });

	  function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>
  </body>
</html>

Exemple 2 : Une écriture de base avec Angular, Firebase est en module:

<html ng-app="monApp">
    <head>
        <meta charset="utf8" >
        <title>Une App partagée AngularJs-Firebase </title>

        <!-- CHARGEMENT DES LIBRAIRIES -->

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

        <!-- CHARGEMENT LIB FIREBASE -->
        <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>

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

        <!-- CSS DE L'APPLICATION -->
        <link href="truc28.css" media="screen" rel="stylesheet" type="text/css" /> 

        <!-- FIN DE CHARGEMENT DES LIBRAIRIES -->

        <script>

        <!-- CONNEXION A LA DATABASE FIREBASE -->
        var myDataRef = new Firebase('https://blinding-heat-8502.firebaseio.com/'); 

        <!-- INCLUSION DU MODULE FIREBASE -->
        var monApp = angular.module('monApp',["ngRoute","firebase"])

            .config(function ($routeProvider, $locationProvider){

            <!-- ROUTING ANGULAR -->
            $routeProvider
                .when('/accueil', {
                  templateUrl: 'defaut.html',
                  controller: 'accueilCtrl'
                })
                .otherwise({redirectTo: '/accueil'});
            })

            <!-- LE CONTROLEUR GENERAL ET DE LA LISTE -->
            .controller("accueilCtrl", function($scope) {
                $scope.nom="";
                $scope.message="";
				$scope.r = function(){
                    myDataRef.push({name: $scope.nom, text: $scope.message}); // Ecrit dans Firebase
                }
            <!-- FIN DU CONTROLEUR -->
            })
        </script>
    </head>

<!-- La page HTML générale -->
<body ng-controller="accueilCtrl" class="body">

<h1>Une App partagée AngularJs-Firebase </h1>

	<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->

<div class="container ">

<div >
			<a class="menu" href="#/accueil" ><button class="myButton" >Accueil</button></a>
		 </div>

	</div>

	 <!-- Cette balise NG-View va afficher les différentes vues -->

<div id="main" class="designDiv">

<div ng-view></div>

	</div>

 </body>

<!-- VUE HTML : DEFAUT-->
<script type="text/ng-template" id="defaut.html">

<div class="desc">
        <input type='text' ng-model="nom" placeholder='Nom'>
        <input type='text' ng-model="message" placeholder='Message'>
        <button ng-click="r()">Sauvegarder dans Firebase</button>
    </div>

</script>

EXEMPLE 3 (Cliquer pour tester):

Une liaison tridirectionnelle automatisée (Three Way Binding) permet la mise à jour de la Base de donnée, et des vues AngularJs automatiquement ! Notre tableau d’objets JSON est géré dynamiquement.

<html ng-app="sampleApp">
	<head>
		<meta charset="utf8" >
		<title>Une Application partagée AngularJs-Firebase </title>

		<!-- CHARGEMENT DES LIBRAIRIES -->

		<!-- CHARGEMENT LIB ANGULAR -->
		<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-route.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>
		<!-- CHARGEMENT LIB FIREBASE -->
		<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
		<!-- AngularFire -->
		<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
		<!-- CSS DE L'APPLICATION -->
		<link href="truc28.css" media="screen" rel="stylesheet" type="text/css" /> 

		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->

		<script>
		<!-- INCLUSION DU MODULE FIREBASE -->
		var app = angular.module("sampleApp", ["firebase"]);

		<!-- CONTROLEUR -->
		app.controller("SampleCtrl", function($scope, $firebaseArray) {
			<!-- CONNEXION A LA DATABASE FIREBASE -->
			var myDataRef = new Firebase('https://blinding-heat-8502.firebaseio.com/');	

			// créer un tableau synchronisé, contenant des objets JSON
			  $scope.messages = $firebaseArray(myDataRef);

			  // Ajouter de nouveaux objets au tableau
			  // Ce message est automatiquement ajouté à notre base de données Firebase
			  $scope.addMessage = function() {
				$scope.messages.$add({
				  text: $scope.newMessageText
				});
			  };
		});
		</script>
	</head>

  <!-- La page HTML générale -->
<body ng-controller="SampleCtrl">

<h1>Une Application partagée AngularJs-Firebase</h1>

<ul>

<li ng-repeat="message in messages">
			<!-- editer un message -->
			<input ng-model="message.text" ng-change="messages.$save(message)" />
			<!-- supprimer un message -->
			<button ng-click="messages.$remove(message)">Delete Message</button>
		</li>

    </ul>

    <!-- Ecrire un message dans le tableau -->

<form ng-submit="addMessage()">
      <input ng-model="newMessageText" />
      <button type="submit">Add Message</button>
    </form>

  </body>
</html>

Explication de l’exercice 3 :

Le 3wayz Binding( Liaison de données tridirectionnelle ):

Sur la page html, si on modifie un message d’un utilisateur qui a déjà été créé , alors la directive

ng-change="messages.$save(message)"

sauvegarde en temps réel la modification dans la base de données FIREBASE, et tous les utilisateurs sur les différents ordinateurs voient en temps réel la valeur du champs se modifier, puisque Angular mets à jour les vues en temps réel à partir de l’objet synchronisé !

En ligne, on voit les enregistrements apparaitre en live:
exfirebase1

Publicités