[Concours Ingénieur d’études Informatique fonction Publique] Condensé rapide de révision, par coeur.

Déroulement d’un projet Informatique en service public… (Apprendre par coeur)

Phase 1 :


Rappeler les normes de sécurité :

  • Le site de l’Ansii (un site Web).
  • Le R.G.S (Le référentiel général de sécurité, en sortir quelques unes.).
  • La CNIL (Publie des recommandations de sécurité, en connaitre quelques unes).

Phase 2:


Etablir un plan d’action en 4 phases, du plus simple au plus compliqué :

Sommaire :

Etape 1 : Cartographier l’état des lieux.

Etape 2 : Les processus de mise en Oeuvre.

Etape 3 : Les actions de sécurité.

Etape 4 : Pérenniser.


Etape 1 : Cartographier l’état des lieux:


  • Le réseau, avec Visio et en ligne de commandes, + éventuellement auditer OSI avec un sniffer. Citer les couches OSI.
  • Les objectifs avec le diagramme d’Ishikawa. (Savoir en faire un de tête)
  • Les problèmes avec le diagramme cause-effets (poisson). (Savoir en faire un de tête)
  • Les processus métiers avec les diagrammes de processus. savoir les modéliser.
  • Les tableaux de bords et indicateurs de performances(Affilié au processus métiers).
  • Les applications (et leur redondances.). (Présence d’un middleware? Type de SGBD ?)
  • La structure de la collectivité avec le diagramme de structure.(Savoir en faire un de tête)
  • Les interactions sociales avec le diagramme d’interactions sociales.(Savoir en faire un de tête)
  •  Etablir un cahier des charges standard et/ou publier un appel d’offre.
  • Les matrices de stratégie d’entreprises (Ad Little, Porter, Swot, BCG) pourraient éventuellement également s’adapter dans certains cas, même si c’est illogique, car commercial( A voir).(Savoir en faire un de tête)

D’une manière générale, rappeller les 4 architectures :

  • Métier
  • Fonctionnelle
  • Applicative
  • Technique

Et cartographier les 4 référentiels suivants :

  • stratégiques
  • fonctionnels
  • applicatifs
  • techniques

Puis,enfin, rappeler les 3 catégories de processus métier :

  • opérationnels
  • de pilotage.
  • de support.

De manière générale, expliquer la démarche professionnelle d’urbanisation des S.I, avec son parrallèle avec l’urbanisation de la cité, citer la zone, le quartier, l’ilot et les blocs fonctionnels qui conversent par flux de données.

Etape 2 : Les processus de mise en Oeuvre:


GESTION DU TEMPS :

  • Le diagramme de Gantt. (Savoir en faire un de tête)
  • Le graphe MPM. (Savoir en faire un de tête, ne pas faire d’erreur)

GESTION DU PROJET :

  • Choisir une méthode de gestion de projet ( En V, Agile, Scrum …) (Savoir en décrire 3, dont une incrémentale, une objet, ne pas faire d’erreur)
  • La roue de Dening.
  • La théorie des graphes. (Savoir faire un exemple de tête des graphes les plus connus, Comprendre par coeur celui du voyageur de Commerce ou des flux.)

GESTION DU DEVELOPPEMENT :

  • UML ou Merise. (UML est assez facile avec les projets Objet) (Connaitre au moins 3 graphes UML de tête et savoir les faire.)

FACULTATIF : GESTION DU RISQUE FINANCIER ET DES PROBABILITES :

  • Facultatif : Parler des probabilités ou de la loi de poisson (Savoir faire des exemples de tête)
  • Facultatif : Parler de la recherche opérationnelle, de la programmation linéaire, du simplexe( et surtout celui à 2 phases), des statistiques (Savoir faire de tête, surtout les stats, à partir de niveau collège->Terminale, ne pas faire d’erreurs, connaitre le programme Maths du Lycée, Connaitre les notations mathématiques du supérieur)
  • Montrer éventuellement que l’on connait le bilan, le compte de résultat (Savoir en faire de tête sommairement, et quelques formules d’analyse) et aussi gérer un plan comptable.

 

Etape 3 : Les actions de sécurité:


Physiques :

  • Onduleurs.
  • Locaux surveillés, fermés à clef.
  • Sauvegardes sur bandes, armoires centrifuges, techniques de sauvegardes( Raid 1,3,5 etc … Savoir les expliquer sommairement si possible)

Réseaux :

  • Adressage complexe/sécuritaire. (Etablissement de Sous réseaux, savoir expliquer comment faire, les puissances, les bits, etc …)
  • VLANS et FILTRAGE PAR Adresse MAC, trunking… (Se rappeler quelques commandes, citer un exemple d’usurpation d’adresse mac et de middle hacking.)
  • ROUTING et METHODES DE SECURISATION(Citer un ou deux exemple de hacking de routeur
  • ACLS CISCO, LINUX, ALCATEL
  • Pare feux (Citer les ports les plus connus et leur nombre 65535, ainsi que les ports les plus craignants)
  • NAT (Savoir expliquer le principe)
  • PROXIE (Savoir expliquer le principe)
  • IPv6 (Savoir expliquer le principe)

Applicatives :

  • Comptes Users, Admin, groupage.
  • Certificats
  • SSL
  • Droits NTFS, Linux
  • Cryptage, Sandboxes et chiffrement
  • Sécurité des applications SAAS et de la décentralisation.
  • Traiter des injections SQL (Donner un exemple..)
  • Savoir expliquer l’héritage en Java, la surcharge des méthodes, le public/private, la technologie OBJET. (Savoir créer une classe de mémoire et quelques exemples.)
  • Savoir expliquer les dernières technologies WEB (AngularJs, Jquery , Mysql, noSql, PHP, L’intérêt des frameworks CSS, JS , PHP etc … Proposer des exemples de tête) Montrer comment faire une JSP.
  • Savoir créer des rqts SQL jointures, parler des triggers, des vues, etc …(Savoir faire de tête un exemple)
  • Connaitre les systèmes d’applications réparties, les middlewares, les systèmes d’annuaire X11 etc …
  • Connaitre et décrire le format XML et le fonctionnement des services WEB.

Etape 4 : Pérénité.


  • Instaurer une culture de sécurité
  • Instaurer un plan pluri-annuel de détermination des besoins.

Publicités

[AngularJs + Php-SQL] Astuce : Copier-Coller des CRUDS pour aller plus vite.

angularjsphp_1_logo-mysql-170x170_400x400

Introduction


Dans les applications informatique, le CRUD revient tout le temps.

Il s’agit de faire de la Creation/Lecture/Mise à jour/Suppression.

L’idée est donc de faire du copié-collé d’un crud standard, puis de changer uniquement le nom du modèle de données, en faisant « controle+h » dans notepad, afin d’aller beaucoup plus vite.

Note : Java Hibernate permettrait de faire cela encore plus simplement( méthode comin’ soon ), sans compter les méthodes de création automatiques des POJO, mais ce n’est pas le sujet de ce post … Là on est sur du back end PHP-MYSQL

Un exemple en temps réel dans une App !


Dans mon application RdvJuristes, j’ai un Crud sur les personnes :

http://nicolash.org/rdvj/index.html#/personnes

crd1.jpg

 

Il est évident que je ne vais pas me retaper tout le code pour créer un CRUD sur les juristes :

http://nicolash.org/rdvj/index.html#/juristes

crd2.jpg

On comprends qu’on a affaire à 2 modèles de données relativement similaires, que l’on peut copier-coller, puis, ensuite adapter à notre convenance.

Lire la suite

[HighCharts] Elaborer une statistique simple avec High Charts dans une application SAAS.

highcharts-logo

Introduction


Dans l’application RdvJuristes, je décide de calculer la somme des notes de frais de tous les rendez vous de la semaine en cours, puis de les afficher dans un graphique High Charts en barres.

Technologie utilisée


  • Highcharts
  • Php-Mysql en technologie PDO pour le back end
  • AngularJs pour le front end

Ordonnancement


  1. Examiner la conception de la base de donnée relationnelle.
  2. Elaborer la requête SQL
  3. Concevoir le Back End
  4. Concevoir le Front End
  5. Tester.

Lire la suite

[Labos] Anciens Labos

Introduction


Je conserve ici mes anciens Labos . Comme leurs noms l’indiquent, ce sont des labos destinés à tester des fonctionnalités, ils ne respectent pas forcément les design pattern ou les bonnes pratiques,et le design n’est pas forcément bien.

Lire la suite

[Android ] Projet de tracking multi-accès

android-logo.jpgIntroduction



Parallèlement à Rdvjuristes, je suis en train de voir pour remonter des infos de matériel android multiples et éventuellement de simples trackers GPS envoyant des SMS, que l’on pourrait attacher à des animaux afin de surveiller leur position dans un enclos, en temps réel.
La méthode Android Studio n’est pas simple aux premiers abords, surtout comparé à la simplicité et la flexibilité d’AngularJs ou de Js , néanmoins je continue à utiliser Android Studio, ça a l’air sympa, pour au moins créer de bons installers, de plus les apps android sont parfois plus agréables à utiliser (Exemple : L’appli EBAY).
.

 

Solutions


Il existe 3 solutions pour remonter des positions GPS (ou autres censors) du téléphone:

  • Utiliser le simple API HTML 5.0 afin d’envoyer à intervalles régulières les positions. Inconvénient : il faut allumer le navigateur ou alors trouver le moyen de le lancer en mode silent.
  • Créer un service avec Android Java, remontant les coordonnées à intervalles régulières, mais la compilation dure 15 secondes lors de chaque élaboration de code, très hard pour quelqu’un qui fait du JS ….
  • Utiliser Cordova, qui permet de créer un installable, néanmoins, je n’aime pas puisque l’api html5 fait désormais aussi bien, sans se taper la galère.

[Entreprenariat] Créer un site de vente d’applications en mode SAAS francophone

logo

Introduction


Je conserve ici des liens me servant pour le projet IM Logiciels, votre application Francophone

.

Les liens

Un bon site de vente dédié à une app,
Le design est vraiment sympa .S’inspirer des panels en bas pour concevoir la future tarification en mode SAAS des apps de I.M logiciels :

https://www.fullcompta.com

Une bonne société de vente de logiciels Francophone, avec de bons tarifs qui commencent très bas à 9 euros par mois !:
https://www.jlogiciels.fr/offres-web

La liste des concours pour « start up »:

Présenter l’application dans un de ses concours, afin de gagner une éventuelle bourse :
https://business.lesechos.fr/entrepreneurs/aides-reseaux/start-up-entrepreneurs-concours-appels-a-projets-et-a-candidatures-211148.php

Demander la CMU au RSI :
https://www.rsi.fr/sante/complementaire-sante/cmu-complementaire/comment-en-beneficier.html

Un texte précisant que l’auto Entrepreneur au RSA ne doit pas payer les cotisations minimales au RSI :
https://www.lecoindesentrepreneurs.fr/cotisations-minimum-rsi-revenus-faibles-ou-zero-

Le texte concernant le cout de 200 euros à l’ INPI pour l’acquisition d’un nom de société pour 10 ans:
http://www.assistant-juridique.fr/nom_commercial_autoentrepreneur.jsp

Les sites qui publient des appels d’offre
http://www.boamp.fr

Un texte confirmant qu’une auto-entrepreneur peut candidater à des marchés publics
https://www.marche-public.fr/Marches-publics/Definitions/Entrees/Candidature-auto-entrepreneur.htm
http://www.excello.fr/faq/l’acces-des-auto-entrepreneurs-aux-marches-publics/

Nom des principales sociétés Françaises Web ou startups à démarcher:
Truffle100-2017.pdf

Samsung cherche à investir dans des sociétés :
http://www.realite-virtuelle.com/samsung-next-start-up-europe-1807

Des subventions pour les TPE de services aux entreprises :
http://www.bretagne.bzh/jcms/preprod_192068/fr/les-aides-regionales

Les incubateurs de Start Ups en Bretagne
http://www.alloweb.org/startups-bretagne/liste-incubateurs-bretagne/
http://www.incubateur-emergys.fr/index.php?id=26
https://business.lesechos.fr/entrepreneurs/aides-reseaux/lancer-sa-start-up-en-bretagne-quel-incubateur-choisir-209760.php

[AngularJs] Une maquette d’application Weathermap, en 3 heures de temps.

Introduction

logo


On m’a demandé de faire l’app suivante :

Using the OpenWeatherMap API (http://www.openweathermap.com/current), build a Weather
Dashboard webApp using AngularJS.
The App should have two pages :
● The “Home” page, displaying the list of the user’s weather widgets.
○ Each widget displays the name of the city, the current temperature in celsius and
an icon of the weather (http://erikflowers.github.io/weather-icons/)
● The “Settings” page, used to edit the content of the “Home” page.
○ The user can Add, Remove weather widgets.
You are free to increase the features and create the design.

Technologies utilisées :


  • AngularJs 1.5.1
  • Bootstrap 3.0
  • AngularUi
  • Openweather Map Api pour AngularJs

Résultat, après 3 heures de temps:

Tester ici : http://nicolash.org/weatherdashboard/#/accueil

Lire la suite

[AngularJs + Bootstrap 3.0 + Php-Sql] « Rdv Juristes » . Création d’une application avec un bon design normalisé Bootstrap 3.0 puis démarchage commercial !

rdvjuristes2

Introduction


Suivez en direct le développement de RdvJuristes, avec un tout nouveau design bootstrap totalement normalisé, passant sur les écrans 22 pouces ET sur les téléphones 5 pouces.

Suite à l’affreux et repoussant design  que j’ai fait avec material(Qui n’est pas forcément du à matérial), j’en ai eu marre, et je recode le tout en Bootstrap CSS 3.0 !

Mes futurs projets seront désormais toujours désignés en bootstrap 3.0 ou 4.0 pour gagner du temps sur le reste, en plus j’ai aussi une app en node.js sur le grill, mais je n’ai pas envie de monter un serveur chez moi en permanence donc je suis bloqué pour les démos !

rdv.jpg

Les fonctionnalités de L’application :


  • Visionner les caractéristiques des juristes et leurs pourcentages de résultats lors des procès.
  • Influencer les juristes en fonction de leurs résultats par le biais de graphiques manipulables.
  • Enregistrer un procès dans le calendrier, modifier à la volée dans le calendrier les rendez-vous, et pouvoir resizer et drag and dropper . Indiquer le résultat du procès. Affecter les juristes en fonction de leurs parties Défendeur ou Plaignant.
  • Spécifier les juristes du procès (Unitaires ou par groupes), leurs notes de frais , les documents du procès, éditer un résumé du procès, des modèles de documents officiels sont présents pour faciliter la tâche du juriste.
  • Relancer les juristes par Email lors d’un procès.
  • Relancer les personnes impliquées par Emailing
  • Utiliser un Chat spécifique pour parler des procès.
  • Visionner énormément de statistiques en D3.js à propos des notes de frais, des résultats des tribunaux, de la dispersion géographique par type de procès par exemple et j’en passe !.

 Technologie utilisée :


  • AngularJs 1.6.4
  • Angular Ui Calendar ( Surcouche de FullCalendar.js)
  • Google Map avec ng-map
  • Php en back end pour le CRUD en technologie PDO avec prise en compte du typage .
  • Mysql
  • Highcharts
  • D3.js
  • Css Bootstrap 3.0
  • OcLazyLoad pour charger les libs les plus lourdes en fonction de la vue dans ng-route
  • Classe Php Mailer pour faire de l’Emailing
  • Paparse.js pour parser les fichiers CSV, ainsi que le module angular-papa-promise

En projet, en cours de développement :


  1. Etude sommaire de l’ontologie des juristes.
  2. Concevoir tout le système de « Défendeur »(accusé), et « Plaignant », afin de récupérer le verdict, et/ou les amendes infligées, spécifier si il y a un recours.
  3. Import de RDV et de Juristes au format Excel : délai approximatif : 1 jour
  4. Envoi du résumé du rendez-Vous aux Juristes Concernés par Email: 1 jour
  5. Dans le graphique en barre, les points verts sont les buts à atteindre, ils peuvent influer sur le pourcentage de succès (Bref, faire quelque chose du style.), autrement dit, le responsable d’agence décide que la norme à atteindre est 8 étoiles par exemple, et le juriste qui n’a que 6 étoiles est prévenu par email qu’il ferait bien d’activer … : délai approximatif : 2 jours
  6. Dans le google map, indiquer tous les tribunaux français en scrappant avec l’api google. : délai approximatif : 1 jour + indiquer les trajets domicile – procès ?
  7. Création de la zone « MonCompte » ainsi que de la zone « paramêtres » avec seuil d’alertes, gestion groupée etc … : délai approximatif : 2 jours
  8. Possibilité de créer des groupes de juristes et de les ajouter au rendez vous : délai approximatif : 1/2 jour
  9. Réseau social sur les juristes + photo du juriste qui parle. délai approximatif : 1 jour
    Tri des rdv dans juriste par importance Délai : 1 heure
  10. Menu déroulant par juriste sur le calendrier Délai : 2 heures
  11. Alerte par Email Délai : 1 Jour
  12. Faire un fil d’ariane lors de la création d’un rdv, avec un beau design (une sorte de breadcrumb). Délai 2 Jours
  13. Synchroniser avec google calendar. Délai : 3 jours
  14. L’utilisateur doit pouvoir remplir des modèles de documents directement dans l’application et les chosir à partir de gros icones.
  15. Montrer les rendez vous dans une liste de panels.
  16. Cryptage Md5 des mots de passe.
  17. Démarchage sommaire national des cabinets de juristes (Emailing, Phoning), proposition de location à 4Euros90 le mois réelle.

Suivre l’avancée de l’app


Le but est de finaliser l’app aux fonctionnalités basiques pour la fin de semaine !

JOUR 1 Le 22-06-2017: 4 Heures de code :
. Remise en Place du nouveau calendrier, convert des dates en Moment.js lors de l’update d’un rendez vous …
.Je vais rajouter aussi un système d’identification et un chat, et, comme prévu, un ng-map et un autocomplete sur l’adresse, et en plus quelques graphiques, cela avant la fin de semaine. Ajouter aussi les procès par juristes et des appréciations par rendez-vous

JOUR 2 Le 23-06-2017:6 Heures de code

JOUR 3 Le 26-06-2017: 6 heures de codes

. Correction du Crud sur les RDV
. Ajout de Google Map avec ma clef google Map
. Correction des rdvs des juristes dans le CRUD des juristes.
. Mise en place sommaire du CHAT

JOUR 4 Le 27-06-2017: 6 heures de codes

. Mise en place de Ng-Map
. Refonte totale du CSS pour intégrer une barre des tâche responsive sur le côté (Sidebar), ça a pris du temps, surtout ce template est parti de zéro, donc sans licence (gratuit).

Note : il est possible de styliser les jours comme ceci :
https://stackoverflow.com/questions/41825303/how-to-change-fullcalendar-cell-color

JOUR 5 Le 29-06-2017: 5 heures de codes
. Mise en place des sliders (Pas encore fonctionnels).
. Avancée sur le chat (Pas encore temps réel).
.Si on se loggue comme admin, on est désormais reconnu par l’app et on peut éditer les juristes

JOUR 6 Le 03-07-2017: 5 heures de codes
. Ajout de wisiwig (Document) à un rdv
. En projet : webscrapping des emails des bureaux de juristes qui remonte automatiquement dans l’app

JOUR 7 Le 06-07-2017: 5 heures de codes
. Ajout de HTML dans les events du calendrier (C’est puissant), par exemple, là j’ai pu indiquer le nb de juristes par rdv, grâce à une rqt SQL à jointure
. Les sliders pour les juristes refusaient de marcher avec ui tabs, j’ai perdu 2 heures, du coup je mets des étoiles ratings.
. Il n’y a pas d’erreur CSS sur un téléphone 5 pouces, mais c’est désagréable à utiliser, par exemple la liste des juristes devrait devenir toute petite lrosque sur téléphone 5 pouces.

Je voudrais terminer le projet pour la fin de semaine mais ca va être chaud… Je ne voulais pas mettre de vues mais c’est fait exprès

JOUR 8 Le 11-07-2017: 6 heures de codes
. Les problèmes de format de date avec Moment.js sont résolus (avec le gmt)
. Le chat fonctionne, reste à ajouter le temps réel et un meilleur design. Les utilisateurs peuvent se répondre entre eux, façon Youtube.
. Toutes les dates sont correctes et normalisées.
. Les juristes sont catégorisés (20 min)
. Passage de tous les panels au format directive, c’est beaucoup plus pratique, du coup index.html ressemble à ça:

	<!-- LES DIRECTIVES -->
<div class="row padded ">
		<juristes></juristes>
		<chat></chat></div>
<div class="row padded " >
		<agenda></agenda>
		<rendezvous></rendezvous></div>
<div class="row padded " ng-cloak>
		<ngmap></ngmap>

Le code devient 1000 fois plus simple à entretenir et à modifier, pour info une directive basique dans ce cas est comme un include et ressemble à cela :

monApp.directive('ngmap', function() {
   return {
    templateUrl: 'directives/ngmap.html'
  };
});

Demain, le google map juristes et rendez vous.
.
JOUR 9,10,11,12 5*4 =20heures de code
. Passage des vues en mode individuel pour que cela soit exploitable dans un téléphone 5 pouces, la vue des juristes est très correcte sur un téléphone.
. Découverte du template LTEAdmin2, qui devrait améliorer le look à l’avenir.
. Début de la programmation du système notes de frais.
. Résolution du problème de refresh de la carte ng-map
. Quand on clique sur un jour, on ouvre le bon jour pour entrer un rdv.
. ON voit les photos des utilisateurs dans le CHAT
. Début de programmation du système de verdicts.
. Le système de comptes et de rôles est fait à 50 pour cent.
. Lorsque l’on clique sur « mon compte  » et qu’on est pas loggé, un throw est déclenché.
.Impression du résumé d’un rendez vous = fait à 40 %
. Ajout des catégories de Rendez-Vous et d’un filtre

Jour 13.
1200x630bb

. J’ai refais tous le code du controleur des stats, en effet, il fallait récupérer en BDD la longitude et la latitude dans les formulaires Juristes et rendez Vous pour éviter de surcharger ensuite l’api Google Map lors des lectures groupées , et pouvoir afficher tout dans les maps sans problèmes ensuite.

En effet, un champs auto complete Google de type adresse fait remonter un objet JSON très complet, qu’il faut picorer et réinjectant dans notre propre base MYSQL !

Par la même occasion, je récupère le département et la ville dans la BDD ce qui va permettre de faire des statistiques à fond !

Maintenant, c’est d’une simplicité déconcertante de filtrer, que ce soit en SQL ou en JS avec .filter() !!

Je vais améliorer l’interface des google maps avec des zones, et aussi des fenêtres. De même qu’il faut que lors du clic, on retrouve soit sa fenêtre rendez vous, soit sa fenêtre juriste .

Le controleur des statistiques est vraiment d’une clarté et d’une simplicité déconcertante , il permet d’afficher des marqueurs sur les cartes google map, avec les icones que l’on a choisi, et les filtres que l’on a choisi ! : Extrait :

monApp.controller('statsCtrl',['$scope','$timeout','$q','$log','$http','rdvFactory','juristesFactory','$compile','$timeout','Notification','utilisateursFactory','$uibModal','stockeUtilisateur','chatFactory','NgMap', '$rootScope','$interval','$filter',function($scope,$timeout,$q,$log,$http,rdvFactory,juristesFactory,$compile,$timeout,Notification,utilisateursFactory,$uibModal,stockeUtilisateur,chatFactory,NgMap,$rootScope,$interval,$filter) {

/* ------------------------------------------------------INITIALISATIONS--------------------------------------------- */

	/* INITIALISATION DES EVENTS (RENDEZ VOUS)*/
	getAllRendezVous();

	$scope.rdvIcon = {
			"scaledSize": [32, 32],
			"url": "img-app/advokat_set-15-256.png"
	};

	/* INITIALISATION DES JURISTES */
	getAllJuristes();

	$scope.juristesIcon = {
			"scaledSize": [32, 32],
			"url": "img-app/jr.png"
	};

	/* LIRE TOUS LES RENDEZ VOUS */
	$scope.getAllRendezVous = function(categorie){
		getAllRendezVous(categorie);
	}

	function getAllRendezVous(categorie){

		rdvFactory.get_rdvs(categorie).then(function(data){  // On récupère en Ajax tous les rendez-vous.

			var temp = data.data;

			angular.forEach(temp,function(value,index){
				temp[index]["start"] = moment(temp[index]["start"]);
				temp[index]["end"] 	= moment(temp[index]["end"]);
				temp[index]["longitude"] = parseFloat(temp[index]["longitude"]).toFixed(2);
				temp[index]["latitude"] = parseFloat(temp[index]["latitude"]).toFixed(2);
			}); 

			$scope.markerData = temp;

			if(temp.length<1){
				Notification.error('Pas de données avec ce filtre !');
			}
		})
	}

	/*  LIRE TOUS LES JURISTES  */

	$scope.getAllJuristes = function(categorie){
		getAllJuristes(categorie);
	}

  function getAllJuristes(categorie){

		juristesFactory.get_juristes(categorie).then(function(data){  // On récupère en Ajax tous les juristes.

			var temp = data.data;

			angular.forEach(temp,function(value,index){
				temp[index]["longitude"] = parseFloat(temp[index]["longitude"]).toFixed(2);
				temp[index]["latitude"] = parseFloat(temp[index]["latitude"]).toFixed(2);
			}); 

                       $scope.markersJuristes = temp;

			if(temp.length<1){
				Notification.error('Pas de données avec ce filtre !');
			}
		});
	}

Explication sommaire du code : On récupère les données longitude et latitude de chaque objet juriste{} ou objet rendez vous{}, avec une rqt ajax $http dans un tableau [], puis, on « fournit » le tableau à $scope.markers, ou variable apparentée, qui affiche en temps réel les points sur la carte google map. C’est très facile grâce au 2 ways binding! Ce qui est bien, c’est que la catégorie est passée en paramètres au back end, du coup, chaque requête se relance assez facilement, toujours avec le 2 ways binding qui s’occupe de tout..

AngularJs est tout simplement fantastique et le plus simple et flexible framework, surtout avec le format $scope(et pas controller as + .this). Remarquer que je parseFloat mais normalement, y’a pas besoin parce que dans mysql, je devrais être en Float, ce que je n’ai pas fait (par paresse, je reste souvent en varChar dans mysql, lors des LABOS, hi hi, c’est mal, mais je vais arrêter ! ).
.
A voir ce que cela ferait avec vue.js, qui a l’air pas mal aussi , je lorgne de plus en plus dessus vu qu’il impose une structure, encore bien plus que angularjs.
Par contre, j’ai envie de faire des components maintenant, mais bien sur, surtout pas autre chose que la version 1.6 de ANGULARJS !!

En projet :
. Conversion moment.js -> pour Mysql

Jour 14 : 3h de code :
. La conversion MomentJs -> Mysql Datetime est ok et fonctionne bien pour faire les stats à l’avenir. Exemple de conversion Objet moment.js -> Date acceptée par mysql dans un champs DATETIME:

rendezVous.startspe = moment(rendezVous.start.format('YYYY/MM/DD HH:mm:ss')).format("YYYY-MM-DD HH:mm:ss");

. Le problème est que je dois concevoir tout le système de « défendeur »(accusé), et « Plaignant », afin de récupérer le verdict, et/ou les amendes infligées, spécifier si il y a un recours etc .. De plus, le défendeur et le plaignant n’ont pas les mêmes juristes, de ce fait , il faut revoir un peu le système d’affectations.
. Un Formulaire ANGULARJS doit avoir un ID pour que les popups d’erreurs intégrés au navigateur s’affichent, de plus , il faut écrire form = »idDuFormulaire » dans le pour que cela fonctionne , j’ai mis un sacré bout de temps à enfin comprendre ça !

Notion Majeure

Le style Css d’une application est désormais facilement adaptable en fonction du matériel utilisé, à l’aide de ces lignes dans le fichier style.css :

@media(min-width:768px) {

/* SUR ORDI DE BUREAU */
}

et

@media(max-width:480px) {
/*
SUR TELEPHONE ANDROID 5POUCES */
}

C’est très pratique ! Firebug n’est plus utile, il suffit de taper sur F12 pour utiliser le mode DEV dans firefox y compris pour téléphone Android 5 pouces! Cela devient diaboliquement rapide de développer, et je préfère ne pas comparer à Eclipse …

Jour 15 : 4h de code :
. Programmation de l’enregistrement en BDD après glissé déposé et resizing d’un rendez vous.
. Programmation de l’update d’un compte
Jour 16 : 3h de code :
. Programmation de l’Emailing .
. En projet : utilisation de procédure stockées pour alertes Emails, Faire un graphique ‘Notes de Frais Globales par semaines etc …’ (Vite fait avec une rqt SQL à jointure et une lib de graphique !)
. Bientôt le gros morceau : Faire le système de verdicts ( C’est long quand même, même avec AngularJs, mais c’est surtout au niveau fonctionnel que c’est complexe. On simplifie.)
Jour 17 : 4 heures de code
. Passage de presque toutes les librairies au format BOWER
. Passage de l’édition du juriste au format Vue+Controlleur.
. Activation et début d’utilisation de D3.Js et de ng-knob.
. D3.Js et fullcalendar étant trop volumineux, je les charge désormais uniquement dans les vues concernées avec oclazyload. C’est facile une fois que l’on a compris .

D’abord, on paramètre les modules à lazy loader :


/* PARAMETRAGE DES LAZY LOADINGS  */
monApp.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
  $ocLazyLoadProvider.config({
	  modules: [{
			name: 'ui.knob',
			files: ['../bower_components/d3/d3.min.js','../bower_components/ng-knob/dist/ng-knob.min.js']
		  },
		  {
			name: 'ui.calendar',
			files: ['libs/angular-ui-calendar/src/calendar.js','libs/fullcalendar/dist/fullcalendar.min.js','libs/fullcalendar/dist/lang/fr.js','libs/fullcalendar/dist/gcal.js']
		  }
	  ]
	});
}]);

Ensuite, on les injecte dans le routing de vue AngularJs comme ceci, le resolve devant se finaliser avant le chargement de la vue, on est sur que la lib doit être chargée avant le chargement de la vue. :


.when('/agenda/:id_rdv', {
	  templateUrl: 'vues/agenda.html',
	  controller: 'agendaCtrl',
	  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
			loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
			  // ON lazy loade ici
					 return $ocLazyLoad.load('ui.calendar');
			}]
		  }
	})
<h2>

Jour 18 : 2h30 de code :
. Remise en place des cartes juristes avec ng-knob, resolution d’un problème sur l’édition d’un juriste.
. Activation des boutons facebook, twitter, qwant
. Demain , import de données avec papaparse

Jour 19 : 3h00 de code :
. Mise en Place de Papaparse
. L’import CSV de juristes fonctionne, par contre, il n’y a pas ENCORE de séquence de contrôle lors de l’import, de ce fait, si le CSV n’est pas bien constitué, des erreurs sérieuses d’imports peuvent survenir, nécessitant l’intervention sur la BDD.

Jour 20 :

Le grand jour est arrivé, voici ma tentative de modélisation très simplifiée d’un verdict, que je vais réaliser dans l’application RdvJuristes.

Tout d’abord, il faut prendre conscience de l’ontologie de cette organisation, dont je ne connais rien (Dans un véritable projet, il faut bien sur étudier l’ontologie en premier lieu, lol).

http://www.manitobacourts.mb.ca/fr/informations-generales/definitions-comprendre-le-vocabulaire-juridique/

 

LA PARTIE BASE DE DONNEE

Il y a plusieurs moyens de modéliser cela dans la base de données, c’est un premier jet, que je voudrais être évolutif et pas trop couteux en matière de requêtes SQL à l’avenir. Dans le cadre d’un simple labo, je ne pousse pas l’étude de l’ontologie plus loin que cela, désirant faire un phoning afin de savoir si pareille app serait susceptible d’intéresser quelqu’un auparavant, lol.

Ma conception (en cours) inclut des nouvelles tables SQL, voici ma première piste :

  • Table Personnes : La relation est pour m Rdv -> n personnes impliquées ( Donc, présence d’une table intermédiaire personnesRendezvous, car qui dit relation M-N, dit table SQL intermédiaire. En effet, une personne peut assister à plusieurs Rendez-Vous, et un Rendez Vous peut contenir plusieurs personnes).

Ajout d’une colonne ‘partie’ à la table SQL personnesRendezvous permettant de déterminer si une personne est plaignant(idplaignant=>1) ou défendeur(iddefendeur=>2) lors d’un rendez-vous unique, et une colonne ‘gagnantPerdant’ permettant de déterminer si une personne a été gagnante ou perdante lors d’un rendez vous-unique

  • Table Verdicts : Relation 1 Rdv – 1 Verdict ( Pour l’instant pas n verdicts …). Cette table permet d’indiquer la somme réclamée par le plaignant par exemple, ainsi que d’autres informations à determiner plus tard (Table évolutive).

Concernant la table Juristes, elle ne change pas, Mais Même logique que pour la table personnes : Ajout d’une colonne ‘partie’ à la table SQL juristesRendezvous permettant de déterminer si un juriste est plaignant(idplaignant=>1) ou défendeur(iddefendeur=>2) lors d’un rendez-vous unique, et une colonne ‘gagnantPerdant’ permettant de déterminer si un juriste a été gagnant ou perdant lors d’un rendez vous-unique.
(Présence d’une table intermédiaire juristesRendezvous, car qui dit relation M-N, dit table SQL intermédiaire. En effet, un juriste peut assister à plusieurs Rendez-Vous, et un Rendez Vous peut contenir plusieurs juristes).

 

LE FRONT END ANGULARJS

Cette conception tient compte du fait que dans le Front-end, il y aura présence de 2 menus déroulants (personnes+ juristes) du côté « Plaignant », et 2 menus déroulants (personnes+ juristes) du côté « défendant ».
La contrainte est que : lors de l’affectation d’un juriste du côté plaignant, il ne doit plus apparaitre du côté « défendant », ce qui devrait se résoudre par un filtrage AngularJS dans le Front End.
Entre les panels « Plaignant  » et panels « Défendeur » se trouvera un gros icône permettant à l’utilisateur d’indiquer quelle partie a gagné.
De ce fait, il sera ensuite possible de réaliser toutes les statistiques (simples) concernant le taux de succès des juristes et bien plus …Mais ça… C’est la partie ‘facile’

 

Pour parler techniquement à propos du Front End… un peu dans le style UML, 3 pistes de solutions Front End :
L’utilisateur arrive sur l’onglet  » Verdict » , il affecte le juriste du côté plaignant , alors, ‘partie:’plaignant’ est écrite dans l’objet JSON {} ‘juriste’ sur modèle de données Juristes qui est un tableau d’objets JSON [], dans le front end(Dans la mémoire vive), ensuite, le Back end écrira cela en BDD comme d’habitude, très simplement, avec une simple modification de la requête d’insertion SQL actuelle qui existe déjà.

OU ALORS , DEUXIEME SOLUTION ..
L’utilisateur arrive sur l’onglet  » Verdict » , il affecte le juriste du côté plaignant , ‘plaignants’ sera un modèle de données propre dans le Front End ( Un tableau d’objets JSON[]), qui sera enregistré globalement.

OU ALORS, TROISIEME SOLUTION :
En gros, je conserve les modèles de données actuels, conformes, mais je m’en sors avec uniquement les filtres ANGULARJS, mais ce n’est pas possible, parce que il faut écrire dans la base de données, si un juriste est défendeur ou plaignant, par exemple . Et ma requête SQL associant les juristes à un rendez-vous existe déjà…

Je ne sais pas encore … Je réflechis et vais faire des tests. Le problème étant de conserver un code facile à comprendre et bien structuré.

Jour 21 : 3h00 de code :
. Mise en place du Crud sur les personnes
. Début de prog du système de verdicts

Jour 22 : 8h00 de code :
Alerte ! L’ombre de l’enfer du code spaghetti plane !

. J’ai réussi à concevoir et à faire fonctionner mon projet sous l’onglet ‘Verdicts’ d’un rendez-vous, mais attention, le code est devenu un peu fatiguant à lire, je pense qu’il y a moyen d’arranger ça, mais le plus important est d’abord que cela fonctionne dans un premier temps, histoire d’avoir une bonne maquette.

Les Juristes et personnes peuvent désormais être catégorisées en PARTIES ‘plaignante’ et ‘défendante’.

La raison pour laquelle le code est un peu plus complexe? Les nouveaux Select html angular-chosen que j’ai ajouté ne manipulent que des IDS et pas des objets JSON {} complets, ils font office de filtre sur un modèle de données intégral (Un Tableau d’objets JSON []), non asynchrone(pour l’instant), devant être chargé dans l’app, dès le chargement de la vue . Qu’est ce que cela veut dire ?

1. Il faut créer une requête peu couteuse, et bien sur pas du ‘select *’ afin de se servir des nouveaux select html! Tant que j’ai pas trouvé le moyen de faire un appel Ajax directement dans angular-chosen

2. J’ai été obligé de jouer avec les filtres AngularJs et les watchers $watchCollection à cause

.Des notes de frais qui « s’auto ajoutent  » lors de l’ajout d’un juriste, ce qui n’est pas un mal, mais il y a des moyens de simplifier le code surement en faisant plutôt un requête HTTP à ce moment, à étudier…
.Du Contrôle de doublons dû à la contrainte qu’un plaignant ne peux pas être un défendant.

Bien sur le code est toujours ultra logique avec un back end crud en php pdo super structuré, mais on a pas droit à l’erreur !

. Reste le modèle de données ‘Personnes’ à gérer dans l’onglet Verdicts, ca va être rapide .
Puis créer un design sympa !