[ 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


Pour développer cette nouvelle application, je respecte des normes modernes et simples:

  • Les librairies : Elles sont toutes téléchargées avec BOWER avec la commande « bower Install maLibrairie », et ce sont les dernières version. Cette commande est lancée à la racine de l’application, en ligne de commande.
  • Les style css Bootstrap 3.0, et je teste aussi sur le téléphone mobile en parallèle, je ne crée jamais mes propres CSS.
  • Le routing AngularJs 1.5, chaque vue dispose de son controleur affilié.
  • Je vais essayer de regrouper dans la mesure du possible les accès $http dans un service.

Le fichier INDEX.HTML au jour 1 :


Il contient les liens vers les librairies que l’on a téléchargé avec BOWER, le menu, et enfin la DIV qui affiche les différentes vues, en fonction du clic dans le menu, grace au routeur angularJs.

Les css Bootstrap 3.0 doivent passer aussi bien sur ordi de bureau que sur un téléphone mobile 5 pouces, et c’est le cas.

Je ne me sers pas du Bread crumb pour l’instant … C’est le fil d’ariane, je l’ai donc commenté .


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Neutre</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		
		<!-- CHARGEMENT DES LIBRAIRIES -->
		
		<!-- 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">
 
		<!-- ANGULARJS -->
		<script src='bower_components/angular/angular.min.js'></script>
		<script src="bower_components/angular-route/angular-route.min.js"></script>
		<script src="bower_components/angular-locale_fr-fr/angular-locale_fr-fr.js"></script>
		
		<!-- APPLICATION PERSO -->
		<script src="js/app.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"><!-- // Les css de notre app -->
		
		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
</head>

<body ng-app="neutre" >
	
<!--  MENU -->
       <nav class="navbar navbar-default" >
		  <div class="container-fluid">
			<!-- Grouping pour meilleur affichage mobile -->
			<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">Activer la navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand" href="#"><img src="img-app/scanne.jpg" style="width:130px;height:70px;"></img></a>
			</div>

			<!-- Collecte les liens pour que lors de l utilisation sur un mobile, cela se contracte bien -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			  <ul class="nav navbar-nav" bs-active-link>
			  <li class="active"><a href="#/accueil"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></i>  Accueil <span class="sr-only">(current)</span></a></li>
				<li ><a href="#/nouveau"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></i>  Nouveau <span class="sr-only">(current)</span></a></li>
				<li><a href="#/liste"><span class="  glyphicon glyphicon-barcode" aria-hidden="true"></span> Liste</a></li>
				<li class="dropdown">
				  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class=" glyphicon  glyphicon-scale" aria-hidden="true"></span> Paramêtres<span class="caret"></span></a>
				  <ul class="dropdown-menu">
					<li><a href="#">Paramétrer le scanner</a></li>
					<li><a href="#">Paramétrer les statistiques</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="#">Autres paramêtres</a></li>
				  </ul>
				</li>
				<li class="dropdown">
				  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon  glyphicon-log-in" aria-hidden="true"></span>  Identification<span class="caret"></span></a>
				  <ul class="dropdown-menu">
					<li><a href="#">Mon compte</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="#">Sortir</a></li>
				  </ul>
				</li>
			  </ul>
			  
			  <ul class="nav navbar-nav navbar-right">
			  <form class="navbar-form navbar-right" role="search">
				<div class="form-group">
				  <input type="text" class="form-control" placeholder="Rechercher">
				</div>
				<button type="submit" class="btn btn-default">Soumettre</button>
			  </form>
				<!-- <li><a href="#">Link</a></li> -->
			
			  </ul>
			</div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
	
	<!-- <ol class="breadcrumb">
	  <li><a href="#/accueil">Accueil</a></li>
	  <li><a href="#/nouveau">Nouveau</a></li>
	  <li> <a href="#/scanner">Scanner</a></li>
	</ol> -->
	
	
	
<!-- Cette balise NG-View va afficher les différentes vues -->
<div ng-view></div>						
										
</body>
</html>

Le fichier app.js :


Il contient

  • Le chargement des modules AngularJs
  • Le routeur de vues Html
  • Un premier controleur, celui de l’accueil,

angular.module('neutre', ['ngRoute'])

.config(function ($routeProvider, $locationProvider){
  $routeProvider
	.when('/accueil', {
	  templateUrl: 'vues/accueil.html',
	  controller: 'neutreCtrl'
	})
	.when('/nouveau', {
	  templateUrl: 'vues/nouveau.html',
	  controller: 'neutreCtrl'
	})
	.when('/liste', {
	  templateUrl: 'vues/liste.html',
	  controller: 'listeCtrl'
	})
	.when('/parametres', {
	  templateUrl: 'vues/parametres.html',
	  controller: 'paramsCtrl'
	})
	.otherwise({redirectTo: '/accueil'});
})
 
.controller('neutreCtrl', function($scope) {
	
/* FIN DU CONTROLEUR */
})


  

Une des vues HTML : accueil.html


<div class="row ">
	<div class="col-lg-12 " >
		 <div class="panel panel-warning">
			
			<div class="panel-heading"> 
				<span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span> Accueil
			</div>
			
			<div ng-show="!collapsed" class="panel-body " style="min-height:600px;">
				Bonjour, et bienvenue dans votre application.
			
			</div>
			
			<div class="panel-footer text-right">
				<div class="form-group">
				<button class="btn" ng-click="statsGraphs()">
				<span class="glyphicon glyphicon-signal"  aria-hidden="true"></span>
				Statistiques</button>
				</div> 
			</div>
			
		 </div>
	</div>
</div> 

L’astuce est de copier coller les vues lorsqu’elle sont initiales pour qu’elles aient toutes le même aspect .
Ensuite on brode sur chaque vue, par exemple, ma vue nouveau.html a le même canevas que la précédente:

<div class="row ">
	<div class="col-lg-12 " >
		 <div class="panel panel-warning">
			
			<div class="panel-heading"> 
				<span class="glyphicon glyphicon glyphicon-user"  aria-hidden="true"></span> Nouveau
			</div>
			
			<div class="panel-body " style="min-height:600px;" >
				<form>
				<div class="col-lg-6" >
						<div class="form-group input-group">
						  <span class="input-group-addon">Image</span>
						  <img src = "{{editionCandidat.image}}" class = "img-responsive" style ="width : 100px; height:100px;">
						</div>
						<div class="form-group input-group">
							<span class="input-group-addon">Nom</span>
							<input type="text" class="form-control text " ng-model = "">
						</div>
						<div class="form-group input-group">
							<span class="input-group-addon">Prénom</span>
							<input type="text" class="form-control text " ng-model = "">
						</div>
						<div class="form-group input-group">
							<span class="input-group-addon">Date Naissance</span>
							<input type="date" class="form-control text " ng-model = "test">
						</div>
				</div>
				<div class="col-lg-6" >
					<div class="form-group input-group">
						<span class="input-group-addon">Adresse</span>
						<input type="text" class="form-control text " ng-model = "">
					</div>
					<div class="form-group input-group">
						<span class="input-group-addon">Email</span>
						<input type="text" class="form-control text " ng-model = "">
					</div>
					
					<div class="form-group input-group">
						<span class="input-group-addon">Code Barre </span>
						<input type="text" class="form-control text " ng-model = "">
					</div>

				</div>
			
				
				
				
				
				
			</div>
			
			<div class="panel-footer text-right">
				<button class="btn" ng-click="enregistrerUtilisateur()">
				<span class="glyphicon  glyphicon-ok"  aria-hidden="true"></span>
				Enregistrer</button>
			</form>	
			</div>
			
		 </div>
	</div>
</div> 

Publicités