[Application 58 ] « Scanne ton Employé » Notes à propos du Back End.

scanneIntroduction


Gérer un Back End Firebase noSql est totalement différent d’un back End Php Mysql ou Java Mysql.

Le point fort de Firebase est la synchronisation mondiale en temps réel et la simplicité apparente de la syntaxe

Le point faible est que l’on dépend d’un back end qui ne se trouve pas sur notre serveur.

 Le point fort de MYSQL ou de ORACLE et des bases relationelles est qu’il est bien plus facile de requeter la base avec SQL pour faire des statistiques numéraires ou graphiques, et qu’il est facile de récupérer un seul résultat avec un select, afin de réaliser le mapping objet/relationnel ensuite (Avec la fonction jsonEncode de php, par exemple).

Lire la suite

Publicités

[ Application 58] « Scanne ton Employé » Journal de développement au jour 5

scanne

Introduction


Aujourd’hui, je crée la possibilité d’ajouter une catégorie socio-professionelle dans l’application . Temps de réalisation : 3h30

Voici le look de la vue une fois qu’elle sera créée :

categvue.jpg

Par ailleurs j’ajoute la possibilité de supprimer un employé (Pour l’instant, pas de demande de confirmation) dans la vue liste.html

Je crée aussi la vue des statistiques.

Je créerais le FRONT END en dernier lieu, ce sera l’écran de demande de scane de l’employé, à la porte de l’établissement.

Ajouter une catégorie Socio-Professionelle :


Quel est le but ?

Pouvoir ajouter une catégorie socio-professionelle à un employé, afin de le catégoriser.

Pour cela, on doit réaliser les actions suivantes :

  1. Modifier la vue « nouveau.html » en ajoutant un menu déroulant qui permet de choisir la catégorie socio professionelle pour l’employé.
  2. Modifier le controleur de la vue « nouveau.html » afin qu’il charge le modèle de données des catégorie socio professionelle, pour les présenter dans le menu déroulant.
  3. Créer une vue permettant le CRUD(création/suppression/Maj) d’une catégorie socio professionelle, cette vue s’appelera categories.html. Ne pas oublier de l’ajouter au routing d’angularJs .
  4. Créer le controleur de la vue categories.html qui gère le CRUD sur le back end firebase.

 


  1. Ajouter le menu déroulant dans la vue nouveau.html :
<div class="form-group input-group">
	<span class="input-group-addon">Catégorie</span>
	<select ng-model="nouvelEmploye.categorie" class="form-control form-field">
	<option ng-repeat="categorie in categEmployes" value="{{categorie.nom}}">{{categorie.nom}}</option>
	</select>
</div>

 

2.Modifier le controleur de la vue « nouveau.html »


/* CHARGE LES CATEGORIES DEMPLOYES POUR LE SELECT CATEGORIES*/
var ref = new Firebase("https://blinding-heat-8502.firebaseio.com");
$scope.categEmployes = $firebaseArray(ref.child('categEmployes'));

3.Créer une vue permettant le CRUD(création/suppression/Maj) d’une catégorie socio professionelle, cette vue s’appelera categories.html:

<div class="row ">
	<div class="col-lg-12 " >
		 <div class="panel panel-warning">
			<!-- ENTETE DU PANEL -->
			<div class="panel-heading"> 
				<span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span> Catégories
			</div>
			
			<!-- CENTRAL DU PANEL -->
			<div  class="panel-body " style="min-height:600px;">
					
				<div class="row">
					<div class="col-md-6">
						<div class="well">
							<form name="myForm"> <!-- LE NOMMER POUR BENEIFICER DU CONTROLE ANGULARJS -->
								<div class="panel-heading">
									<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> 
									Ajouter 
								</div>
									
								<div class="form-group input-group">
									<span class="input-group-addon">Catégorie</span>
									<input type="text" ng-model="nouvelleCategorie.nom" class="form-control text "placeholder="Tapez ici le nom"  required>
								</div>	
								
								<div class="form-group input-group">
									<span class="input-group-addon">Décrire</span>
									<textarea type="text" ng-model="nouvelleCategorie.desc" class="form-control text " placeholder="Tapez ici la description" ></textarea>
								</div>
								
								<button class="btn btn-block" ng-click="myForm.$valid && ajouterCategorie()">Ajouter</button>
							</form>
						</div>
					</div>
					
					<div class="col-md-6">
						<div class="well">
							
							<div class="panel-heading">
								<span class="glyphicon glyphicon glyphicon-minus" aria-hidden="true"></span> 
								Supprimer
							</div>
								
							<div class="limitModalNico">
								<ul>
									<div ng-repeat="categorie in categEmployes|orderBy:'nom'">
										<div class="form-group input-group">
											<span class="input-group-btn"><button ng-click="categEmployes.$remove(categorie)" class="btn btn-danger">x</button></span>
													<input placeholder="{{categorie.nom}}" class="form-control text " ></input>
										</div>
									</div>
								</ul>
							</div>
						
						</div>
					</div>
				<!-- FIN DE ROW -->
				</div>
			
			
			<!-- FIN DE PANEL BODY -->
			</div>
			
			<!-- PIED DE PAGE DU PANEL -->
			<div class="panel-footer text-right">
			</div>
			
		 </div>
	</div>
</div> 

4. Créer le controleur de la vue categories.html qui gère le CRUD sur le back end firebase.

/* CONTROLEUR DE LA VUE CATEGORIES */
.controller('categCtrl', function($scope, notifier,$firebaseArray) {	

var ref = new Firebase("https://blinding-heat-8502.firebaseio.com");
$scope.categEmployes = $firebaseArray(ref.child('categEmployes'));

$scope.ajouterCategorie = function(){
		$scope.categEmployes.$add(angular.copy($scope.nouvelleCategorie)).then(function(){
		notifier.notify('La catégorie a bien été ajoutée');
	});

}
/* FIN DU CONTROLEUR */
})

Et ne pas oublier …Le menu PARAMETRES/AJOUTER UNE CATEGORIE D’EMPLOYE pointe sur la vue categories.html dans le routing angularJs :


ROUTING DE VUES */
.config(function ($routeProvider, $locationProvider){
  $routeProvider
	.when('/accueil', {
	  templateUrl: 'vues/accueil.html',
	  controller: 'accueilCtrl'
	})
	.when('/nouveau', {
	  templateUrl: 'vues/nouveau.html',
	  controller: 'nouveauCtrl'
	})
	.when('/liste', {
	  templateUrl: 'vues/liste.html',
	  controller: 'listeCtrl'
	})
	.when('/stats', {
	  templateUrl: 'vues/stats.html',
	  controller: 'statsCtrl'
	})
	.when('/parametres', {
	  templateUrl: 'vues/parametres.html',
	  controller: ''
	})
	 .when('/maj', {
		templateUrl: 'vues/nouveau.html',
		controller: 'majCtrl'
     })
	 .when('/categories', {
		templateUrl: 'vues/categories.html',
		controller: 'categCtrl'
     })
	.otherwise({redirectTo: '/accueil'});
})

[ Application 58] « Scanne ton Employé » Journal de développement au jour 4

scanne

Introduction au jour 4


Aujourd’hui, je m’occupe de la vue « mise à jour », et je corrige le bug du champs date.

De ce fait, on peut désormais éditer les données d’un utilisateur.

Pour tester l’application au jour 4, cliquer ici.

Durée : 4 h !

Ajout de modules AngularJs 1.5 avec BOWER:


  • Angular-Ui , qui permet d’obtenir un popup de date picker compatible avec firefox.

Problèmes rencontrés :


  • Firebase ne stocke pas des objets date, il faut donc les passer en string avec .toString() avant l’enregistrement, puis les repasser en format date avec new date() lors de la lecture, sans cela, cela ne fonctionne pas.
  • Par soucis d’évolution facile de l’application, la vue « nouveau.html » ou nouvel employé doit être la même que la vue « maj.html », ou la vue de mise à jour. De cette façon, lorsque que l’on ajoute un champs à l’application dans le vue « nouveau.html », pas besoin de remettre une vue de mise à jour à jour, c’est important. Le problème étant que les contrôleurs compliquent un peu le système, car, pour l’instant, à cause de la syntaxe firebase, je re-télécharge le modèle de données lors de la vue « mise à jour », alors qu’il ne faudrait pas. Sans controleurs, cela serait facile, mais avec les plusieurs controleurs(qui sont nécessaire pour la séparation des performances) c’est plus difficile. Demain, je ferais un service global qui stockera le modèle de données… A voir… Puisqu’à l’avenir, seules des parties de la liste des employés seront chargées dans la mémoire vive, sans cela cela serait trop long..
  • Le modèle de données de l’application doit être chargé uniquement dans la vue liste, le reste du temps, dans la mise à jour? on doit ‘picorer’ dans FIrebase, sans avoir bien sur à retélécharger tout le modèle de données, seulement, avec la séparation des contrôleurs, le système est un peu plus difficile à mettre en place. Bref, cela marche aujoud’hui comme cela.
  • En fait, la vue « nouveau » sert pour créer et updater, mais il y a deux controleurs différent pour la même vue.
  • Lorsque l’on clique sur éditer un employé, son identifiant n’apparait pas, c’est normal car si on lui réédite ses données, il sera regénéré.

[ Application 58] « Scanne ton Employé » Journal de développement au jour 3

scanneIntroduction


Aujourd’hui, on continue sur la vue nouveau.html, et on mets en place la vue liste.html.

Durée : 3h30 .

Pour tester l’application au jour 3 , cliquer ici.

Rappel de l’architecture de l’application  :


système angular api scannersystème angular api scanner-page-001

 

Fonctionnalités ajoutées dans la vue nouveau.html:


  • Possibilités d’imprimer la carte avec le code barre grâce à la fonction $scope.imprimerDiv().
  • Restriction de clics sur les boutons « Imprimer la carte » ou « sauvegarder » si l’id n’a pas été créé auparavant ( et donc que nouvelEmploye.identifiant soit inexistant ->ng-disabled= »!nouvelEmploye.identifiant « 
  • Analyse de l’objet Google Map récupéré par autocomplete.js, finalement, je ne récupère que formatted_address dans l’objet nouvelEmploye, on pourrait aussi récupérer seulement la ville ou le code postal ou etc …
  • Ajout du style « overflow:auto » sur la div de la carte, pour que cela ne dépasse pas sur mobile.

Fonctionnalités ajoutées dans la vue liste.html:


  • Affichage de la liste des employé dans une table HMTL, provenant du back end Firebase.
  • Ajout du style « overflow:auto », pour que la table ne soit pas horrible sur mobile.

Voici le look d’un enregistrement au format JSON sur Firebase, c’est très pratique !  (On voit qu’au jour 3 il manque encore la date de naissance, qui est un objet que je n’ai pas encore formaté dans la vue nouveau:

rscanner

Chaque nouvel employé est ajouté dans le tableau d’objets JSON employes sur Firebase, en ligne !

 

Ajout de modules AngularJs 1.5 avec BOWER:


  • Ajout du module angular-notifier pour toutes les notifications dans l’application(Remplace les alert de js).
  • Ajout du module Firebase pour le gérer back-end, vu qu’on ne traite qu’un seul tableau (array) nommé employes au pluriel sur le back end firebase,  on ajoute au contrôleur seulement $firebaseArray(Voir le code)

 

Lire la suite

[ Application 58] « Scanne ton Employé » Journal de développement au jour 2

scanneIntroduction JOUR 2


Aujourd’hui, je me concentre sur la validation du formulaire et la génération de la carte plastique avec le code barre.

A ce stade, on peut taper les données d’un utilisateur, puis cliquer sur le boutton « Générer la carte » pour générer la carte et le code barre de l’employé, on génére aussi l’identifiant.

Si on imprime avec une imprimante ce code barre puis qu’on le scanne avec le scanner USB, alors, on récupère l’identifiant de l’employé !

Tout cela se passe uniquement dans la vue nouveau.html et dans le controleur ‘nouveauCtrl’

J’ai fait tout ça en 3h30 à peu près.

Pour tester l’état de l’application au jour 2, cliquer ici .

Explication Technique :


  • Compatibilité : Chrome, Opéra, non compatible avec Firefox(pour l’instant, à cause de l’input Date et de la validation formulaire)
  • Pour générer un code barre en fonction d’une variable, j’utilise la directive suivante AngularJs 1.5 : https://github.com/zhuk-aa/angular-barcode-generator.
  • La variable générant le code barre est la concaténation de la première lettre du prénom et du nom, ainsi que la date de naissance de la personne, cela crée un ID qui sera utilisé pour identifier les personnes, dans le programme, et lors d’un scan laser.
  • La validation des champs utilise la validation interne du navigateur et en même temps la validation optionnelle de AngularJs, qui se vérifie lorsque myForm.$valid est true, en fait, je me sers de cette validation pour valider les données pour la génération de la carte ET pour valider l’enregistrement en base de données du nouvel employé. AngularJs 1.5 permet de vérifier la longueur d’une variable entrée par exemple et bien plus.
  • Pour rappel, toutes les variables du formulaire sont contenues dans un objet JSON qui se modifie en temps réel, il s’appelle $scope.nouvelEmploye , du coup, si je mets à jours le nom du nouvel employé dans le formulaire, alors la variable $scope.nouvelEmploye.nom sera peuplée.
  • Un autocomplete GoogleMap remplit automatiquement la case adresse, façon noSql-bigData

PROBLEME PROVISOIRE AVEC L’IDENTIFIANT D’UN EMPLOYE:

La contrainte d’intégrité et d’unicité de l’identifiant d’un employé n’est pas respectée au jour 2.

Autrement dit, le système de concaténation de la première lettre du prénom, du nom et de la date de naissance n’est pas suffisant, parce que, dans le cas ou il y a ait 100 000 employés, il est probable qu’il y aura des doublons.

Mais pour l’instant, j’ai du faire comme cela, parce que sinon, si l’identifiant est trop grand, le code barre généré dépasse le format de la carte !

Il faudra donc revenir sur ce système… De toute façon on peut tout placer dans le code barre, même un identifiant auto-incrémental généré par Mysql, on fait ce que l’on veut dans la mesure ou la contrainte d’unicité et d’intégrité soit respectée, hi hi !

Photo de l’application:


app

Le code :

Lire la suite

[ Application 58]

scanneIntroduction


J’essaye de normaliser au maximum ma production d’applications WEB.

Pour cette application, je décris donc jour par jour ce que je fais.

Le jour 1 , je mets en place le squelette Modèle Vue Controleur AngularJs 1.5 de l’application en me basant sur cette source, je réalise également tous les CSS, que je normalise au maximum, au départ, toutes les vues ont le même squelette Bootstrap 3.0, en me basant sur le site bootstrap Component comme modèle. Tout cela m’a pris 2h30 à faire.

Pour tester l’application au jour 1, cliquer ici 

Ma volonté est d’utiliser de très gros icônes et que tout soit très logique et facile à comprendre et à modifier par d’autres développeurs.

Voici l’arborescence de l’application au jour 1, elle ne devrait pas beaucoup changer dans le futur…:

arbo.jpg

Le Rôle des répertoires de l’application :

  • bower_component contient toutes les librairies de l’application, que l’on installe avec Bower
  • css contient seulement un fichier css de l’application, qui permet de personnaliser le style de l’application, le design. Il est accessible à un dév Css.
  • img-app contient toutes les images propres de l’application(Le Logo par exemple).
  • img-employes contiendra toutes les photos des employes .
  • js contient le fichier app.js, c’est le moteur de l’application.Pour l’instant, les controleurs et directives AngularJs sont dans le même fichier. Chaque vue dispose d’un controleur différent qui gère la vue.
  • vues contient toutes les différentes vues de l’application (Par exemple la vue de l’accueil, la vue de la liste des employés scannées etc …)

 

 

Mode de développement

Lire la suite

[Java] La piste intéressante du système JPA.

maxresdefault.jpg

Introduction


Après avoir lu un livre (Eyrolles – Spring par la Pratique.pdf) parlant du  framework Spring MVC, et avoir beaucoup de mal à comprendre les concepts si nombreux,

j’ai découvert le livre suivant Antonio Goncalves- Java EE 5, qui parle du système JPA apparu en 2007.

Ce système semble vraiment très intéressant, en effet, JPA crée les tables SQL du programme automatiquement, et réalise automatiquement le mapping objet-relationnel.

 

Description


Dans mes exercices, je suis souvent en train de faire du mapping objet relationnel, par exemple ici, dans « Trouve ton Film ».

En l’occurence, Le langage PHP requête la base SQL, puis crée le mapping objet relationnel à l’aide de la fonction jsonEncode() qui renvoie l’objet à AngularJs;

Sans parler que dès que j’ai besoin de faire du Crud, il n’existe pas à ma connaissance de système de Scaffolding angularJs-Php. Par contre il en existe des PHP-Mysql tout court.

Le système JAVA – JPA est donc une super idée, dans le sens qu’il automatise tout ce système de mapping objet relationnel. Par contre on ne travaille plus au format JSON.

Je suis très loin d’avoir mis en place pareil système avec mon Eclipse, mais sur le papier c’est assez séduisant. Apparemment, il faut bien maitriser les JSP, les Servlets et les Beans pour le mettre en place, mais la fonctionnalité est relativement bien décrite.

 

Le problème


Les concepts Java sont souvent attrayants sur le papier et bien structurés, mais j’ai souvent un mal de chien à les appliquer dans mes exercices, et à faire tourner Eclipse sans péter les plombs, je ne sais pas pourquoi. Il faut quand même essayer d’en faire tous les jours si possible. Je n’ai aucun petit exo sympa tournant sous Java et Sql actuellement.

Je me demande si je ne devrais pas tout simplement utiliser Notepad++ pour utiliser Java.

 

Comment faire :


Il faudrait réaliser un exercice tout en Français utilisant JPA, réduit à sa plus simple expression, le problème étant qu’il implique des technologies comme le serveur Glassfish qui rentre en collision avec mon autre matériel.

Il faudrait se cantonner à faire du simple CRUD avec ce JPA, (qui permet également de créer des jointures !)

C’est quand même super de se dire qu’en tapant le programme JAVA, les tables SQL vont se créer et se gérer toutes seules !

Les liens sur Internet :


  • http://www.jmdoudoux.fr/java/dej/chap-jpa.htm
  • https://openclassrooms.com/courses/creez-votre-application-web-avec-java-ee/la-persistance-des-donnees-avec-jpa
  • http://jean-luc.massat.perso.luminy.univ-amu.fr/ens/jee/tp-JPA1.html