Micro Application partagée 13 : Evalue une ville V2 : Un crud Performant et simple avec AngularJs + Firebase, tout en Français.

evalueville2

CLIQUER ICI POUR TESTER MON APPLICATION EN LIGNE

Introduction


TEMPS DE REALISATION : 1h45 !!!!! Woow!

Ma micro app 12 m’a permit de dégrossir l’utilisation de la base de données Firebase.

L’intérêt MAJEUR de Firebase est la liaison tridirectionnelle des données entre l’application et la base de données.

Cela permet l’invention d’applications partagées en temps réel vraiment facilement une fois que l’on a compris, bien plus qu’avec les autres technologies.

Cependant, il y a pleins de maladresses dans mon application 12, qui en font une app encore trop lourde à gérer pour des développeurs, des parties obscures ou l’on ne comprends pas, ce qui est normal, puisque c’était un labo. Mon obsession étant de réaliser le code le plus clair, et simple possible, compréhensible facilement par les autres,  je dois faire une autre app de base qui récapitule mes acquis.

Je crée donc maintenant cette application de base, réduite à sa plus simple expression, permettant la notation de villes. Je l’ai fait en 1h30 à tout casser !

Il n’y a pas de routing de vue, mais l’app permet l’édition en ligne par tout le monde.

Index.HTML est l’unique vue comportant deux onglets bootstrap et possède un seul controleur .

Le contenu du formulaire d’ajout d’une ville est injecté en temps réel  dans l’objet  $scope.newVille .

L’astuce est que $scope.newVille  peut également contenir un objet ville pré-existant, lors de l’édition (lorsque l’on clique sur le bouton « EDITER » d’une ville).

Cette astuce est majeure, en effet, il n’y a plus qu’un seul formulaire à gérer, c’est extrêmement rapide de modifier ce formulaire en cas de besoin, pour parler autrement il n’y a plus qu’à créer les champs input, tout le reste est automatique, c’est ça qui est révolutionnaire avec FIREBASE (ou MongoDb) et le NoSQL. IL n’y a plus besoin de créer des champs de base de données, etc … Le développement bureautique est 15 fois plus rapide qu’avec les autres technologies.

En d’autres terme, mon objet $scope.newVille peut contenir DES TAS DE CHOSES COMPLEXES, et cela extrêmement facilement, en un temps records, sans rien faire !

Pour rappel, un objet JSON unique $scope.newVille ressemble à cela :

$scope.newVille = {nom: »lille »,note: »6″,photo: »lille.jpg »}

Ensuite, lorsqu’on l’enregistre $scope.newVille dans notre modèle de données $scope.villes , on obtient un TABLEAU d’objets JSON ressemblant à cela :

$scope.villes = [

{nom: »lille »,note: »6″,photo: »lille.jpg »},

{nom: »Marseille »,note: »3″,photo: »marseilles.jpg »}

]

Il ne nous reste plus qu’à réaliser des tas d’opérations mathématiques sur notre modèle ou tout simplement à le lister, c’est extrêmement puissant et facile à utiliser avec ANGULAR JS !

Le typage des variables est conditionné par les champs dans la vue , pas besoin de s’embêter comme en Java ou en Mysql, ça fait gagner un teamps fou !

LE CODE


 On a donc

  • index.html qui appelle les librairies (Par exemple: Angular) et qui contient le code HTML (la vue) avec les appels aux variables AngularJs (par exemple un ng-repeat qui liste notre modèle de données), ainsi que des appels aux fonctions présentes dans notre controleur.
  • app.js qui est l’unique controleur de l’application, on a dedans le chargement du modèle de données sur la base de données Firebase, et toutes les fonctions ANGULARJS qui opèrent sur notre vue.
  • directives.js qui comprends des fonctions « bateaux » ou random, souvent utilisées.
  • factoryFirebase.js qui permet de lire, d’écrire et d’updater notre base de donnée firebase en ligne.
  • general.js qui initialise le module angular, et qui contient la constante de connexion à la base de données Firebase.

index.html :


<!doctype html>
<html ng-app="app" lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Angular Firebase</title>

	<!-- CHARGEMENT DES LIBRAIRIES -->

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

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

				<!-- AngularFire pour firebase-->
				<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></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'>

				<!--	APPEL LIB TEXTANGULAR-->
				<link rel="stylesheet" href="librairies/textAngular/textAngular.css">
				<script src="librairies/textAngular/textAngular-rangy.min.js"></script>
				<script src="librairies/textAngular/textAngular-sanitize.min.js"></script>
				<script src="librairies/textAngular/textAngular.min.js"></script>

				<!-- CSS DE L'APPLICATION -->
				<link href="css/truc36.css" media="screen" rel="stylesheet" type="text/css" />
				<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

				<!-- LE PROGRAMME -->
				<script src="general.js"></script>

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

				<!-- Les directives : -->
				<script src="directives/directives.js"></script>

				<!-- La factory Firebase pour dialoguer avec la base de données nosql-->
				<script src="factory/factoryFirebase.js"></script>  

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

	<body ng-controller="appCtrl">

	<tabset>

	<!-- ONGLET FICHES DES VILLES-->
		<tab heading="Fiches" active="etatOnglets.static1">
			<tab-heading>
				<i class="glyphicon glyphicon-file"></i> Fiches
			</tab-heading>

			<div  class="fiche " ng-repeat="ville in villes| orderBy:nom"  uib-tooltip="Cliquez pour modifier la ville">
				<img ng-src="{{ville.photo}}" class="imagesGen centre">
				<h4>{{ville.nom| uppercase}}</h4>
				Catégorie : <b>{{ville.categorie}} </b><br>
				<uib-rating ng-model="ville.note"  max="10"   readonly="true"></uib-rating> <br>
				<button class="glyphicon glyphicon-pencil" style="float:right" ng-click="editerVille(ville)" uib-tooltip="Editer"></button>
				<button class="fa fa-trash-o " style="float:right" ng-really-click="supprimerVille(ville)"  ng-really-message="Etes vous sur?" uib-tooltip="Cliquez pour supprimer cette ville..."></button>
			</div> 

		</tab>

<!-- ONGLET EDITION ET CREATION -->
		<tab heading="Ajouter" active="etatOnglets.static2">
			<tab-heading >
				<i class=" glyphicon glyphicon-pencil"></i> Editer
			</tab-heading>

				<form class="form-container" role="form" >
					<h1>Ville:</h1>

						<div class="form-group">

							<label class="form-title">Photo:</label><br>
							<img ng-src="{{newVille.photo}}"  class="imagesGen"><br><BR>
							<label  class="form-title">Placer la photo du cursus sur le Serveur:</label><BR>
							<input  type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" ></input>
							{{infoUpload}}<br>

							<label class="form-title">Nom:</label>
							<input type="text" class="form-control form-field" ng-model="newVille.nom" placeholder="Nom"  ng-required="true" >

							<label class="form-title">Description</label>
							<textarea   style="min-width: 100%; min-height:200px;" class="form-control form-field textarea" ng-model="newVille.description" placeholder="Description" ng-required="true" ></textarea>

							<label class="form-title">Catégorie de la ville:</label><BR>
							<select class="form-field" ng-model="newVille.categorie"  >
									<option value="">Selectionner	</option>
									<option value="petite">petite	</option>
									<option value="moyenne">moyenne	</option>
									<option value="grande">grande	</option>
							</select><BR>

							<label class="form-title">Note de la Ville:</label><BR>
							<uib-rating ng-model="newVille.note"  max="10"   ></uib-rating> 

					<!-- BOUTONS -->

					<button  ng-click = "ajouterVille()" class="right" >Enregistrer la Ville<span class="glyphicon glyphicon-plus" aria-hidden="true" ></button>

					<button  ng-click="validerEdition()" class="right" label="Modifier le Cursus">Modifier la ville<span class="glyphicon glyphicon-plus" aria-hidden="true" ></button>

					<span ng-bind="infos"></span> 

				</form>
		</tab>
	</tabset>	

	</body>
</html>

Le controleur de l’application app.js :

app.controller('appCtrl', ['$scope','VillesService','$http', function ($scope,VillesService,$http) {

	/* INITIALISATION DU FORMULAIRE */
	$scope.newVille 		= {}; // Tout ce que l'on inscrit dans le formulaire est copié dans cet objet en temps réel.
	$scope.newVille.photo 	= "img-app/ville.jpg" // Image de base d'une ville que l'on modifie après après telechargement et update dans l'objet newVille

	/* INITIALISATION DES ONGLETS (ON CHOISIT QUEL ONGLET SERA VU EN PREMIER) */
	$scope.etatOnglets 			= {static1: true, static2: false};

	/* CHARGEMENT DU MODELE DE DONNEES SUR FIREBASE ET LIAISON PERMANENTE TRI-DIRECTIONNELLE A LA BASE DE DONNEE EN TEMPS REEL !(3 way binding): */
	$scope.villes 			= VillesService.getVilles(); // $scope.villes est affiché en temps réel dans la vue, c'est un tableau d'objets Json contenant des villes.

	/* AJOUT D'UNE VILLE ET ENREGISTREMENT EN BASE DE DONNEES FIREBASE : */
	$scope.ajouterVille = function(){
		VillesService.ajouterVille(angular.copy($scope.newVille));// transmets l'objet ville à la base de données firebase suite à un click sur enregistrer la ville...
		$scope.infos = "La ville a été ajoutée en ligne à la base de données FIREBASE"
	}

	/* SUPPRESSION D'UNE VILLE */
	$scope.supprimerVille = function(ville){
		VillesService.supprimerVille(ville);
	}

	/* EDITION DUNE VILLE */
	$scope.editerVille = function(ville){
		/* FOCUS SUR L ONGLET EDITION */
		$scope.etatOnglets 		= {};
		$scope.etatOnglets 		= {static1: false, static2: true}; // Permet de placer automatiquement lutilisateur sur l'onglet EDITER

		/* POUR POUVOIR EDITER UN OBJET IL FAUT LE RECUPERER SUR FIREBASE CA DOIT ETRE UN OBJET FIREBASE , DU COUP ON UTILISE GETRECORD COMME INDIQUE DANS LA DOC: */
		$scope.newVille  		=  $scope.villes.$getRecord(ville.$id); // Astuce permettant de charger l'objet ville directement dans le formulaire : super rapide, super simple !
	}

	/* VALIDATION DE L EDITION DUNE VILLE  */
	$scope.validerEdition = function(){
		VillesService.editerVille($scope.newVille);
	}

	/* CHARGEMENT D UNE PHOTO SUR LE SERVEUR */
	$scope.uploadFile = function(files) {

		var fd = new FormData();
			//Take the first selected file
			fd.append("file", files[0]);
			console.log(files[0].name);
			var uploadUrl = "uploadTruc36.php";
			$http.post(uploadUrl, fd, {
				withCredentials: true,
				headers: {'Content-Type': undefined },
				transformRequest: angular.identity
			}).success(function(data){
				$scope.infoUpload="Fichier téléchargé sur le serveur ";
				$scope.newVille.photo="uploads/"+files[0].name;
				})
				.error(function(data){
					$scope.infoUpload="Echec du téléchargement sur le serveur";
				});

	};

<!-- FIN DU CONTROLEUR	 -->
}]) 

La factory Firebase qui permet la gestion de la base de données noSql : tout en Français !

<!-- FACTORY DE DATA DES VILLES -->

app.factory('VillesService', ['$firebaseArray', 'FIREBASE_URI', function ($firebaseArray, FIREBASE_URI) {

	var ref = new Firebase(FIREBASE_URI);
	var villes = $firebaseArray(ref);

    var getVilles = function () {
        return villes;
    };

    var ajouterVille = function (ville) {
        villes.$add(ville);
    };

    var editerVille = function (ville) {
        villes.$save(ville);
    };

    var supprimerVille = function (id) {
        villes.$remove(id);
    };

	return {
        getVilles: 		getVilles,
        ajouterVille: 	ajouterVille,
        editerVille: 	editerVille,
        supprimerVille: supprimerVille

    }
}])

Le fichier directives.js qui contient des fonctions random :


/* DIRECTIVES */
/* MODALE OUI NON */
app.directive('ngReallyClick', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                var message = attrs.ngReallyMessage;
                if (message && confirm(message)) {
                    scope.$apply(attrs.ngReallyClick);
                }
            });
        }
    }
}]);

/* GIF ANIME PENDANT LES HTTP REQUESTS */
app.directive('loading', ['$http', function ($http) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        scope.isLoading = function () {
          return $http.pendingRequests.length > 0;
        };
        scope.$watch(scope.isLoading, function (value) {
          if (value) {
            element.removeClass('ng-hide');
          } else {
            element.addClass('ng-hide');
          }
        });
      }
    };
}]);

Publicités