[Exercice 49] Maths de Lycée avec AngularJs

Introductionpouvoir-statistiques-icone-8550-96.png


Un micro exercice de calculs de pourcentages, probabilité, fait en 2 heures 30.

Il permet d’établir des stats de défectuosité sur un objet, automatiquement et les stats se mettent à jour lorsqu’on ajoute les données du jour. Pas de Back end mais je devrais en faire un rapide avec Firebase, c’est tellement facile.

Explication technique sommaire : $scope.objet est un tableau d’objets Json « container » que l’on rafraichit à loisir par les données d’un carburateur ou d’un démarreur ou que sais-je, on peut réaliser un appel back end lors du changement d’objet. Demain, j’ajouterais un graphique chart.Js et un back end en Firebase noSql vite fait. Je ferais aussi des pbs conditionnelles si possibles et Stats comparatives entre objets.

Note importante : Ce code utilise à fond le 2 way binding, en cela, il est possible qu’il soit sujet à problème de performances si les données dépassaient les 2000 lignes. En ce cas, la ré-écriture totale du code s’imposerait probablement. (A « mocquer » avec un modèle de données de 3000 objets Json pour tester..)

Pour le tester c’est ici : 

Photo de l’exo :


exo49.jpg

Sommaire :


  • Jour 1 : 2 h30 de code.
  • Jour 2 : Ajout d’un graphe en 15 minutes.
  • Jour 3 : Correction de la formule de moyenne d’une série, qui était fausse, grâce au livre 1ère S Prépabac.

 

Le code Jour 1


Lire la suite

Publicités

[Exercice 48] : S’identifier dans Mysql avec AngularJs/Php et stocker l’id utilisateur

Introductionauth


On a besoin de créer une système d’identification simple pour construire des applications multi-utilisateur avec AngularJs 1.x, Php et Mysql. Il s’agit de Mysql, c’est donc une base relationnelle (et donc pas du noSql). La solution présentée ici serait similaire avec Oracle ou PostGre.

Pour tester l’exercice en ligne, c’est ici.

Se logger avec email : jo@gmail.com et pass: jojo

Ordonnancement Fonctionnel:

1/ Entrée de l’email et du mot de passe
2/ Vérification de la correspondance dans la base de donnée
3/ Si vérification ok, alors Stockage de l’id utilisateur dans l’application, pour personnalisation de l’application en fonction de l’id utilisateur.

Comment faire:


  • Tout d’abord, installer AngularJs et Bootstrap avec Bower dans notre webApp.
  • Créer 1 fichier Html qui comprends le formulaire d’identification qui récupère les 2 variables email et motDePasse
  • Créer 1 Controleur Angular JS dans le fichier Js qui envoie les 2 variables au fichier PHP qui contrôle dans la base de données Mysql si le couple est ok; si il est ok, le login est déclenché, le script PHP renvoie un objet Json comprenant toutes les données utilisateur, et l’ID utilisateur est stocké dans le service stockeIdUtilisateur, de cette façon, l’application sait qui est loggé et affiche des trucs ou pas en fonction de cet id.
  • Créer 1 fichier PHP qui lit Mysql et récupère les données utilisateur si le couple email.Mdp est ok.
  • Créer 1 fichier PHP de connexion à mysql.

Les amélioration possibles : Encryption base 64 du mot de passe (des services existent sur internet pour le faire.)
Le fichier Php retourne le mot de passe c’est pas terrible pour la sécurité, mais peut servir, en tout cas, il faut avoir le mot de passe pour obtenir le mot de passe dans Angular.
On peut récupérer directement l’objet contenant les données de l’utilisateur (data dans la fonction de rappel) dans un objet AngularJs nommé $scope.donneesUtilisateur, de ce fait on peut acceder aux données en tapant par exemple $scope.donneesUtilisateur.nom plus tard dans l’application.

A par ça, pour cet exo, vu qu’on récupère l’id utilisateur, on peut facilement filtrer un modèle de données en fonction de l’id utilisateur, ce qui est super.

Structure de la Base de données:


base

Le code :


Le fichier Html qui affiche le form d’identification, il récupère les 2 variables email et motDePasse en temps réel avec ng-model, lorsqu’on clique sur « Se Logger », la fonction identificationUtilisateur() est exécutée  :


<html ng-app="App">
	<head>
		<meta charset="utf-8" />
		<title>Authentification Mysql avec AngularJs.</title>

		<!-- JQUERY ET BOOTSRAP -->
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<!-- Custom styles for this template -->
		<link href="sticky-footer.css" rel="stylesheet">

		<!-- ANGULAR -->
		<script src='bower_components/angular/angular.min.js'></script>

		<!-- UI BOOTSTRAP -->
		<script src='bower_components/angular-bootstrap/ui-bootstrap.min.js'></script>
		<script src='bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js'></script>

	</head>

	<body ng-controller="MainCtrl">
		<div class="container-fluid">
			<nav class="navbar navbar-inverse">
			  <div class="container-fluid">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">Exo 48 Auth</a>
					</div>
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right">
							<div class="form-group">
								<form>
								</form>
							</div>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>

			<div class="container">
				<form class="form-signin">
					<h2 class="form-signin-heading">Identifiez vous {{test}}</h2>
					<label for="inputEmail" class="sr-only">Email</label>
					<input ng-model="email" type="email" class="form-control" placeholder="Email" required autofocus>
					<label for="inputPassword" class="sr-only">Mot de Passe</label>
					<input ng-model="motdepasseATester" class="form-control" placeholder="Mot de Passe" required>
					<div class="checkbox">
					  <label>
						<input type="checkbox" value="remember-me"> Se souvenir de moi
					  </label>
					</div>
					<button ng-click="identificationUtilisateur()" class="btn btn-lg btn-primary btn-block" type="submit">S'identifier sur Mysql avec Php.</button>

					<div ng-if="informationLogin" class="alert alert-warning" role="alert"> {{informationLogin}}, bienvenue {{prenom}} {{nom}}, votre id est {{idUtilisateur}}</div>
				</form>

			</div>

			<footer class="footer">
			  <div class="container">
				<p class="text-muted">Place sticky footer content here.</p>
			  </div>
			</footer>

		<!-- FIND DE DIV GLOBALE FLUID BOOSTRAP POUR LES PHONES -->
		</div>
		<script src="app.js"> </script>
	</body>
</html>

Le fichier app.js comprends le controleur Angular.js, le service stockeIdUtilisateur est injecté dans ce controleur afin que l’on puisse l’utiliser ainsi que le service $http qui permet les accès AJAX.
Dans la fonction $scope.identificationUtilisateur , on trouve un accès $http vers le fichier PHP filtrer.php, avec en option les 2 variables entrées par l’uilisateur email et motdepasseATester.
En cas de succès, on récupère toutes les données utilisateurs et on stocke l’id utilisateur qui s’est loggé dans le service approprié pour pourvoir afficher son application personnalisée durant toute la séquence d’utilisation de l’app:

var app = angular.module('App', ['ui.bootstrap'])

app.controller('MainCtrl', function($scope,$http,stockeIdUtilisateur) {

	$scope.identificationUtilisateur = function(){
		/* Test puis validation du couple login-mot de passe */
		$http.post('filtrer.php?action=get_login',
			{
				'email' : $scope.email,
				'motdepasseATester' : $scope.motdepasseATester,
			}
			).success(function (data, status, headers, config) {

				/* Si le Login est raté : */
				if (data == "false"){
					$scope.informationLogin = "Login raté";

				}

				/* Si le Login est réussi : */
				else{
					$scope.informationLogin = "Login réussi" ;
					$scope.nom  = data.nom;
					$scope.prenom  = data.prenom;
					/* console.log(data.id); */
					stockeIdUtilisateur.setIdUtilisateur(data.id); // Stocke l id dans le service angular pour  que l'application sache qui est l'utilisateur
					$scope.idUtilisateur = stockeIdUtilisateur.getIdUtilisateur();
				}
			}).error(function(data, status, headers, config){
				alert('pas de connexion vers le serveur');
			  });
	}
})

/* SERVICE QUI STOCKE L ID  UTILISATEUR APRES LE LOGIN, CEST UTILE POUR UNE APPLICATION MULTI UTILISATEUR DE SAVOIR QUI EST LOGGE*/
.service('stockeIdUtilisateur', function() {
    var Idutilisateur = '';

    return {
        getIdUtilisateur: function() {
            return IdUtilisateur;
        },
        setIdUtilisateur: function(value) {
            IdUtilisateur = value;
        }
    };
})

Le fichier PHP filtrer.php va requêter sur la base Mysql pour savoir si le couple email/motdepasse est valable. Si oui, il imprime un objet Json dans le navigateur contenant toutes les informations de l’utilisateur, qui est récupéré par AngularJs dans la fonction de rappel .success dans l’objet data.
De ce fait, angularJs peut récupèrer le nom de l’utilisateur en tapant data.nom, mais ça c’est seulement si il y a eu succès, dans le cas contraire, c’est un false qui est récupéré par angularJs

<?php

include('connexionConfig.php');
error_reporting(E_ALL ^ E_NOTICE); // important pour ne pas afficher les notice PHP sans cela le script ne marche pas.

/**  Switch Case pour récupérer la l'action demandée par le controleur  Angular **/

switch($_GET['action'])  {
	case 'get_login' :
            get_login();
            break;
}

/*Function qui teste le login: */
 function get_login() {  

	/* Reception des données login a tester en base de donnée */
	$data = json_decode(file_get_contents("php://input"));
    $email = $data->email;
	$motdepasseATester = $data->motdepasseATester;
$email = mysql_real_escape_string($email);
$motdepasseATester = mysql_real_escape_string($motdepasseATester);
	/* Recherche de l'email en base de données. */
	$q = "SELECT * from utilisateurs WHERE utilisateurs.email = '" .$email."'";
	$qry = mysql_query($q);

	 /* Mets le resultat du Login dans un tableau (On recupère l id de l utilisateur). */
	 while($rows = mysql_fetch_array($qry))
		{
		$tab= array(
					"id"      	=> $rows['id'],
					"email"     => $rows['email'],
					"motDePasse"=> $rows['motDePasse'],
					"nom"     	=> $rows['nom'],
					"prenom"	=> $rows['prenom']
					);
		}

	  /*  Teste si le password écrit par l'utilisateur est egal au password dans la base de données. */
        if($motdepasseATester==$tab[motDePasse]){
			/* renvoie les variables id et email et mot de passe de l'utilisateur au script angularJs*/
			print_r(json_encode($tab));
		}

        else {
             /* Afficher false au script angularJs qui va afficher une erreur de login */
            echo('false');
		}
	exit();	

}

?>

Ne pas oublier ce petit fichier connexionConfig.php qui permet la connexion à Mysql :

<?php

  /****** Database Details *********/

    $host      = "localhost";
    $user      = "root";
    $pass      = "secret";
    $database  = "truc48";
    $con       = mysql_connect($host,$user,$pass);

    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }

    //echo 'Connected successfully'; 

    mysql_select_db($database,$con);  

    /*******************************/

?>

[MicroApp 47] Micro Crm : exercice de crm en 2h30 avec AngularJs, ngMap et Bootstrap.

Introductioncrm-icon.png


Aujourd’hui je crée une micro Application CRM en 2h30 de temps ( de 15hà 17h20) en partant de zéro.

Fonctionnalités:

  • Ajout de nouveaux prospects par vendeurs.
  • On retrouve le prospect sur la carte par clic sur un bouton.
  • Notation des prospects et importance.

On pourrait ajouter :

  • Des statistiques graphiques.
  • Un back End NoSql Firebase ou en PHP ou Java.
  • Autocomplete Google sur la case du prospect !!!
  • Le dropdown des noms des vendeurs doit provenir d’une requête et pas être codé en dur bien sur

Libs utilisées :

  • Bootstrap 3.0 et css
  • AngularJs 1.5
  • Jquery (besoin pour faire tourner boostrap)
  • NgMap
  • Bower (Pour installer le tout très rapidement et à jour)

Testing en ligne : CLIQUER ICI

Photo de l’app :


microcrm.jpg

Explication Fonctionnelle :


 

L’admin attribue des prospects à ses Vendeurs.

Les vendeurs peuvent voir leurs prospects dédiés sur Google Map et les noter.

 

Explication Technique :


$scope.vdrs est le modèle de données des prospects(Contrairement à ce que le nom de la var pourrait laisser penser…), Chacun de ces objets Json prospects comprends le nom d’un vendeur, de cette façon, on peut filtrer ensuite les prospects de tel ou tel vendeur dans le développement. ce modèle ne comprenant que 3 champs, on peut aisément l’enregistrer en BDD relationelle en faisant un mapping objet.relationnel. Mais bien sur, sur Firebase c’est un milliard de fois mieux en noSql avec AngularFire et le 3 ways binding !

$scope.referentielVendeur est le référentiel des vendeurs avec leur age, leur durée de travail etc … Il est indépendant de $scope.vdrs.

 

Le code :


Le fichier JS qui contient le controleur AngularJS :

var app = angular.module('App', ['ngMap','ui.bootstrap'])

app.controller('MainCtrl', function($scope,$uibModal) {

	/* DONNES DE DEMONSTRAION */
	$scope.vdrs = [
	{"nom":"Dupuis","prospect":"renault 150 Avenue de la Division Leclerc, 95160 Montmorency","telephone":"03 89 09 09 09","note":"3","importance":"4"},
	{"nom":"Dubert","prospect":"Psa  Route de Chalampé, 68390 Sausheim","telephone":"03 89 09 09 09","note":"3","importance":"2"},
	{"nom":"Hammed","prospect":"Mercedes 116 Avenue Henri Barbusse, 92700 Colombes","telephone":"01 41 19 79 79","note":"3","importance":"1"},
	{"nom":"Dupuis","prospect":"Fiat 25 Avenue du Général de Gaulle, 92250 La Garenne-Colombes","telephone":"01 46 49 80 80","note":"3","importance":"2"}
	]

	$scope.referentielVendeur = [
	{"nom":"Dupuis","prenom":"Michel","age":"37","duree":"5"},
	{"nom":"Dubert","prenom":"Roger","age":"22","duree":"5"},
	{"nom":"Hammed","prenom":"Mohammed","age":"28","duree":"7"}
	]

	/* INITS */
	$scope.nouveauProspect = {};
	$scope.adresse="";
	$scope.adresseOk="Paris";
	$scope.liste = [];
	$scope.nomVendeur = "";
	$scope.vendeurs = [];

	/* Initialisation de la date et de l'heure du jour en cours */
	var date = new Date();
	var d = date.getDate();
    d = ("0" + d).slice(-2)
    var m = date.getMonth();
	m = (m+1);
    m = ("0" + m).slice(-2)
    var y = date.getFullYear();

	$scope.date  =  d+'-'+m+'-'+y;

	/* Cherche une adresse dans googlemap et l'ajoute à la liste*/
	$scope.chercherAdresse = function(adresse){
		if(adresse){
			var x = adresse;
			$scope.adresseOk = x;
		}
		else{
			var x = $scope.adresse;
			$scope.adresseOk = x;
			$scope.liste.push({"Adresse":x});
		}
	}

	/* Affecte la liste des villes à un vendeur */
	$scope.affecterListe = function(){
		var x = angular.copy($scope.nomVendeur);
		var z = angular.copy($scope.liste); // Angular Copy debinde le z de $scope.liste
		$scope.vendeurs.push({"nom":x,"liste":z});

	}

	/* Supprimer une adressse */
	$scope.s=function(index){
		$scope.liste.splice(index,1);
	}

	/* Lorsquon choisit un vendeur dans le dropown, la var change */
	$scope.setVendeur = function(vendeur){
		$scope.choixVendeur =  vendeur;

	}

	/* Sert à visualiser sur la carte */
	$scope.setAdresse = function(adresse){
		$scope.adresseOk = adresse;

	}

	/* Ajouter un prospect  */
	$scope.ajoutProspect = function (){
		$scope.vdrs.push({"nom":$scope.nouveauProspect.nom,"prospect":$scope.nouveauProspect.prospect,"telephone":$scope.nouveauProspect.telephone});
	}

});

Le code HTML :

<html ng-app="App">
	<head>
		<meta charset="utf-8" />
		<title>Exercice Google Maps.</title>

		<!-- JQUERY ET BOOTSRAP -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

		<!-- ANGULAR -->
		<script src='bower_components/angular/angular.min.js'></script>

		<!-- GOOGLE MAP ET NGMAP -->
		<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
		<script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script>

		<!-- UI BOOTSTRAP -->
		<script src='bower_components/angular-bootstrap/ui-bootstrap.min.js'></script>
		<script src='bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js'></script>
	</head>

<body ng-controller="MainCtrl">
	<div class="container-fluid">
		<nav class="navbar navbar-inverse">
		  <div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				  </button>
				  <a class="navbar-brand" href="#">MicroCrm</a>
			</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-nav">
		  <li class="dropdown">
			  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vendeur <span class="caret"></span></a>
			  <ul class="dropdown-menu">
				<li><a ng-click = "setVendeur('Dupuis')" href="#">Dupuis</a></li>
				<li><a ng-click = "setVendeur('Dubert')" href="#">Dubert</a></li>
				<li><a ng-click = "setVendeur('Hammed')" href="#">Hammed</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Stats</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Contacts</a></li>
			  </ul>
			</li>

		  </ul>
		  <form class="navbar-form navbar-left" role="search">
			<div class="form-group">
			  <input type="text" class="form-control" ng-model="chercheProspect" placeholder="Chercher un prospect">
			</div>
		   <!--  <button type="submit" class="btn btn-default">Rechercher</button> -->
			</form>
		  <ul class="nav navbar-nav navbar-right">

		   <div class="form-group">
			<form>
			  <input type="text" class="form-control" ng-model="nouveauProspect.prospect" placeholder="Ajouter un prospect" required>
			  <input type="text" class="form-control" ng-model="nouveauProspect.telephone" placeholder="Téléphone du Prospect" required>
				<select class="form-control" ng-model="nouveauProspect.nom" required>
				<option value="">Vendeur</option>
				<option value="Dupuis">Dupuis</option>
				<option value="Dupert">Dupert</option>
				<option value="Hammed">Hammed</option>
				</select>
				<button type="submit" ng-click="ajoutProspect()" class="btn btn-default">Ajouter</button>
			</form>
			</div>

		  </ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>

<div class="row" style="min-width:300px;">
	<div class="col-md-4"><img src="img-app/vendeur.png" class="img"></src>
		<table  class="table" >
			<thead>
			  <tr>

				<th>Nom: </th>
				<th >Prénom : </th>
				<th >Age :</th>
				<th >Durée de Travail:</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="x in referentielVendeur |filter:choixVendeur">
					<td>{{::x.nom}}</td>
					<td>{{::x.prenom}}</td>
					<td>{{::x.age}}</td>
					<td>{{::x.duree}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="col-md-8">
		<table  class="table" >
			<thead>
			  <tr>

				<th>Prospect</th>
				<th >Téléphone: </th>
				<th >Note:</th>
				<th >Importance:</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="d in vdrs |filter:choixVendeur|filter:chercheProspect">
					<td><button class="btn btn-primary" ng-click="setAdresse(d.prospect)">{{::d.prospect}}</button></td>
					<td>{{::d.telephone}}</td>
					<td>
					<uib-rating ng-model="d.note" max="5" ></uib-rating>
					</td>
					<td><uib-rating ng-model="d.importance" max="5" ></uib-rating></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

	<div>
		<ng-map style="height:100%" center="{{adresseOk}}" zoom="14">
		<marker ng-repeat="d in vdrs |filter:choixVendeur" position="{{d.prospect}}" ></marker>
		</ng-map>
	</div> 

	<!-- FIND DE DIV GLOBALE FLUID BOOSTRAP POUR LES PHONES -->
</div>
<script src="app.js"> </script>
</body>

<style>
.angular-google-map-container { height: 600px; }
.div{
border-style: groove;
}
.img{
width:100px;
height:100px;
}
</style>
</html>

[ngMap] Exercice d’affectation d’adresses Google Map à des vendeurs.

IntroductionngMap


Un premier petit exercice fait en 1h30 heures avec ngMap., un module angularJs pour google map.

L’app permet d’affecter des adresses à des vendeurs en prospection(Ensuite, on peut passer le tableau de json à un calendrier, mais je ne le fais pas ici). A tester ici .

Les markers apparaissent lorsque le tableau d’adresses JSON $scope.liste est peuplé . On peut donc envisager l’inverse -> Afficher les markers après un chargement $http de $scope.liste. Fonctionnellement parlant, on peut par exemple envisager d’afficher les markers en fonction de la date du jour et de l’id utilisateur du Vendeur dans son téléphone portable. ce qu’il faudrait, c’est pouvoir passer les adresses à google navigation, lorsque le bouton du prospect a été cliqué.

Pour installer ng-Map, utiliser Bower qui installe automatiquement toutes les dépendances.

 

Le code :


 

Le fichier Js  :


var app = angular.module('App', ['ngMap'])

app.controller('MainCtrl', function($scope) {
	$scope.adresse="";
	$scope.liste = [];
	$scope.nomVendeur = "";
	$scope.vendeurs = [];

	/* Initialisation de la date et de l'heure du jour en cours */
	var date = new Date();
	var d = date.getDate();
    d = ("0" + d).slice(-2)
    var m = date.getMonth();
	m = (m+1);
    m = ("0" + m).slice(-2)
    var y = date.getFullYear();

	$scope.date  =  d+'-'+m+'-'+y;

	/* Cherche une adresse dans googlemap et l'ajoute à la liste*/
	$scope.chercherAdresse = function(adresse){
		if(adresse){
			var x = adresse;
			$scope.adresseOk = x;
		}
		else{
			var x = $scope.adresse;
			$scope.adresseOk = x;
			$scope.liste.push({"Adresse":x});
		}
	}

	/* Affecte la liste des villes à un vendeur */
	$scope.affecterListe = function(){
		var x = angular.copy($scope.nomVendeur);
		var z = angular.copy($scope.liste); // Angular Copy debinde le z de $scope.liste
		$scope.vendeurs.push({"nom":x,"liste":z});

	}

	/* Supprimer une adressse */
	$scope.s=function(index){
		$scope.liste.splice(index,1);
	}

});

le fichier Html :

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="utf-8" />
		<title>Exercice Google Maps.</title>
		<script src='bower_components/angular/angular.min.js'></script>
		<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
		<script src="bower_components/ngmap/build/scripts/ng-map.min.js"></script>
	</head>
	
	<body ng-controller="MainCtrl">
		
		<div>
		
			<ng-map style="height:100%" center="{{adresseOk}}" zoom="14">
			<marker ng-repeat="l in liste" position="{{l.Adresse}}" ></marker>
			</ng-map>
		</div> 
	
		<div class ="div">
			<h1>Trouver une adresse </h1>
			<input ng-model="adresse"placeholder="Entrez l'adresse"></input> 
			<button ng-click="chercherAdresse()">Chercher</button><br><br>
			Liste des Adresses au {{date}}:<br>
			<span ng-repeat="l in liste"><button ng-click="chercherAdresse(l.Adresse)">{{l.Adresse| uppercase}}</button>
			<button ng-click="s($index)">Supprimer</button> <br></span>
		</div> 
		
		<div class ="div">
			<h1>Affecter la liste au vendeur</h1> :<br>
			<input ng-model="nomVendeur" placeholder="Entrez le nom du vendeur"></input> 
			<button ng-click="affecterListe()"> Affecter</button><br>
			<span ng-repeat="v in vendeurs">{{v.nom| uppercase}}<br>
				<p><ul ng-repeat="k in v.liste"><button ng-click="chercherAdresse(k.Adresse)">{{k.Adresse| uppercase}}</button><br></ul></p>
			</span>
		</div> 	
		<script src="app2.js"> </script>
			
	</body>

	<style>
	.angular-google-map-container { height: 400px; }
	.div{
	border-style: groove;
	}
	</style>
</html>

[Théorie] Exploiter le format de données JSON dans les applications WEB modernes (2011-2020).

Introduction json


Attiré depuis longtemps par la programmation objet, avec PHP-MySql (Objet), et Java avec UML ; je me trouva, il y a un an, fort attiré par la programmation objet et Mvc en Javascript avec le framework AngularJs.

Mais …je ne comprenais pas, au début, comment utiliser le format de données JSON avec ce nouveau framework AngularJs 1.x.

Au fil du temps, j’ai commencé à comprendre que c’était d’une simplicité, d’une puissance et d’une flexibilité déconcertante.

Depuis, je ne conçois pas de revenir à une autre technologie, mais plutôt à améliorer mes connaissances du façonnage de données au format JSON.

La programmation objet avec la technologie JSON est très agréable face aux autres technologies, bien plus rapide, simple et extrêmement intuitive, orientée Temps réel et collaborative.

Ce qu’il faut comprendre, c’est que JSON permet la manipulation en temps réel des données, en permanence, en particulier avec AngularJS 1.x ou Aurélia qui ont exploité ce format pour permettre une gestion extrêmement facile de la création d’applications.

Ensuite, il faut comprendre que la plupart du temps,on passe notre temps à éditer des tableaux d’objets Json dans les applications modernes Js, ceci en temps réel.

Chaque objet dispose d’un indice($index), qui nous permet de retrouver son rang dans le tableau. Des solutions de stockage Back-End comme Firebase(2013) attribuent carrément un id à chaque nouvel objet JSON créé, il n’y a plus de mapping objet/relationnel à faire, car tout est objet, cela implique une simplicité accrue de développement, sans compter les possibilités de créations d’applications collaboratives en temps réel !.

Je ne dis pas cela au hasard, c’est au fil de mes périgrinations sur les sites anglo-saxons que j’ai compris tout cela.

Sommaire


  • L’objet Json {}
  • Le tableau d’objets Json []
  • L’affichage en temps réel d’un objet Json avec AngularJs 1.x
  • L’édition en temps réel d’un objet Json.
  • Rappel du Modèle-Vue-Controleur avec AngularJs 1.x

Lire la suite

[Agenda] Créer et gérer un Agenda dans une application, avec un Plug-in AngularJs ou Jquery

Introductionvecteur calendrier


Si il est bien un domaine que le développeur d’application bureautique Web doit maitriser, c’est l’intégration d’un agenda dans une application Web.

Qu’il s’agisse d’une application commerciale, d’une app de garage de voitures, d’une app médicale, d’une application Crm ou de finances; l’agenda est omniprésent et son intégration est assez complexe et critique.

Le clic sur un évènement ouvre généralement une fenêtre pop-up répertoriant les caractéristiques de l’évènement.

Sommaire


  1.  Introduction(Suite)
  2. Tour d’horizon des plug-ins disponibles
  3. l’objet JSON « évènement »
  4. Testing, démonstration, explication et exploitation du plug-in Ng Simple Calendar « for the nuls »
  5. Testing, démonstration, explication et exploitation du plug-in Angular UI Ui-Calendar
  6. Testing, démonstration, explication et exploitation du plug-in Angular Bootstrap Calendar
  7. Travaux dirigés : Création d’une application qui stocke des points GPS cliqués sur google Map par date dans un calendrier

Lire la suite

[Css] Utiliser un templates Css d’Administration moderne et responsive pour créer une application.

template.pngIntroduction


On tends forcément à trouver des méthodes plus rapides, modernes et efficaces pour construire une application « onePage » sérieuse, susceptible, qui sait, d’être vendues un jour à un public Francophone qui compte tout de même près de 400 000 000 de personnes. Cela peut être un rêve, mais qui sait peut être un jour se réaliser.

Lorsque se pose la question du Design de notre future Application, on a beau être fort en Css, des thêmes existent qui feront souvent mieux que ce que l’on fait, et ont l’avantage d’être dispos en téléchargement, parfois gratuitement.

 

Sommaire


  1. Introduction(suite)
  2. Méthode d’utilisation et de modification
  3. Tour d’Horizon des templates
  4. Testing en temps réel et modification

 

Introduction (Suite)


Du coup, pourquoi passer des heures à essayer de créer un template responsive? Cela n’a pas forcément de sens, alors qu’il existe des tas de modèles très esthétiques sur Internet . Dans le cadre d’un Projet comportant un graphe MPM et un diag de Gantt, on a pas envie d’exploser nos délais(D’ailleurs on ne peut pas,lol). Ré-inventer la roue n’a pas d’intérêt hormis l’autoflagellation..

Certes, notre application n’utilisera pas forcément ce que les élèments du template propose, car ce sont des solutions lambda. En l’occurrence, notre application sera hautement spécialisée, et devra proposer des solutions inédites et des calculs complexes, mais ça, c’est la partie fonctionnelle et technique du projet.

Le pré-requis est que notre template CSS propose un look très sympathique à notre future application orientée professionnelle, et qu’elle s’adapte automatiquement aux  matériels mobiles. A noter que les templates que j’ai repéré semblent aussi faire carrément office de framework UI (Avec des boutons spéciaux, des dropdowns etc …) .

Mon langage étant AngularJs +Firebase +PhpSql, j’essaye à fond d’éviter Jquery, cependant , énormément de templates l’incluents d’office.

Une dernière note, payer un template est très envisageable, dans la mesure ou le gain de temps est fortement appréciable.

Mais quelle est la méthode pour les utiliser ?


On télécharge le template, puis on farfouille dans le code pour placer du code AngularJS là ou il faut ! Il faut donc bien connaitre comment fonctionnent les CSS, les DIV et comment gérer les librairies et se repérer dans le code pré-existant.

Il faut repérer les noms des classes CSS du template, et surtout éviter de créer les siennes ! En effet, les css du concepteur du template seront forcément mieux fait la plupart du temps et respectent les normes.

Si on veut faire du Mvc avec AngularJs par dessus, cela ne pose pas de problèmes bien sur.

Dans mon cas, le prérequis est donc de savoir coder en AngularJS+Firebase noSql

dashy

Voici mes 3 choix pour ma future application TIP TOP CRM  :


  • AdminLte2 : Un « Dashboard » gratuit qui contient pleins de superbes élèments UI et un calendrier, malheureusement, Jquery est omniprésent, a analyser donc, si on peut le manipuler rapidement et arriver à bien en tirer partie.
  • Xenon : Un Dashboard avec AngularJS à visualiser ici :
  • Monarch, un autre Dashboard angularJs responsive

http://dashy.strapui.com/angular/?utm_source=startangular&utm_medium=startangular&utm_campaign=StrapUI#/dashboard/profile

le testing et la modification en live de AdminLte2  sur mon serveur :

Pour tester le template, cliquer ici .