[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

[PouchDb][Cloudant] Gérer les droits utilisateurs (Post évolutif.).

monetablissement

cloudantpouch

Introduction


Les PME, de nos jours, sont intéressées par des applications multi utilisateurs .

Bien sur, il ne s’agit pas que de la présence du fameux ‘log in – password’ comme disent les anglophones, mais il faut aussi pouvoir gérer avec une granularité très fine les droits dans les petits recoins de l’application .

Ce post est évolutif, puisque je découvre en temps réel les fonctionnalités liés au login.

Pour l’instant, je n’active pas SSL (note : Les mots de passe des utilisateurs sont automatiquement haschés par cloudant, comme couchDb le fait aussi.).

Il faut ajouter le plug in pouchDb Authentication


Lire la suite

[Chart.js][Cloudant][Pouchdb] MonEtablissement : générer un graphe en barre en 15 min avec pour source le Map Reduce

monetablissement

charts

Introduction


Suite au post précédent, j’ai donc récupéré le nombre d’établissements français par régions, à l’aide d’un traitement MAP REDUCE.

Maintenant, ben, j’ai envie de visualiser cela dans un graphique en barre, très basique.

Comment faire ?


D’abord, j’ajoute la lib chart.js à mon fichier index.html  :

	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

On la récupère directement en ligne, c’est très rapide et toujours un bon plan pour faire des maquettes d’applications rapides !

Ensuite, je suis la doc en ligne de chart.js,

J’ajoute une DIV dans mon application ou va se générer le chart  :

Lire la suite

[Pouchdb][Cloudant][Big data] MonEtablissement : Faire un premier Map Reduce en 10 minutes dans l’app

monetablissement.jpg

pouch                    cloudant

Introduction


On fait un premier map reduce qui a pour but simple d’afficher le nombre d’établissements par régions.

Tester l’application updatée ici :


http://nicolas.huleux.free.fr/pouchdb3/

Comment faire ?


Deux solutions, soit on crée la requête de création de Map Reduce avec JS, qui ensuite la crée dans Cloudant , soit on crée directement la requête sur cloudant .

Dans les deux cas, on va ensuite quérir la requête map reduce dans notre front end JS, avec l’api pouchDb.

Il faut également utiliser la lib suivante : pouchdb.find.js

Je choisis de créer ma requête Map Reduce directement dans l’interface Cloudant à cet endroit (Design Document/ Create view ) :

etab.jpg

Lire la suite

#liste

[Jquery Google Map][Cloudant][PouchDb] MonEtablissement : Ajouter des markers en 15 minutes sur la map

monetablissement.jpg

map.jpg

Introduction


Maintenant qu’on a notre petite App, on veut afficher la carte des établissements, et le faire en 15 minutes maximum avec https://github.com/Tilotiti/jQuery-Google-Map

Comment faire ?


Le fichier que l’on avait récupéré sur le site Français gouvernemental comportait longitude et latitude, du coup, on fait une boucle FOR qui génère les markers pour chaque établissement. Autrement dit on parcoure la collection à la recherche des long et lat pour chacun de nos documents (qui sont des établissements).

BON A SAVOIR : Google ne limite pas les markers si on utilise long et lat, par contre si on spécifie des adresses alors on heurte la limitation , donc , les adresses sont à éviter si on a 300 markers par exemple !

Tester l’app avec la carte


http://nicolas.huleux.free.fr/pouchdb3/

Le Code

Lire la suite

[Pouchdb][Cloudant][Big data] MonEtablissement : Utilisation de filtres imbriqués dans une app cloudant pouchdb

monetablissement.jpg

Introduction


Utilisation de filtres imbriqués dans une app cloudant pouchdb

Tester l’app


http://nicolas.huleux.free.fr/pouchdb2

Le code

Lire la suite

[Js Es 6] [Cloudant][Big Data] MonEtablissement : Une application sans code serveur de type CRUD.

monetablissement.jpg

cloudant

Introduction


Je désire faire une application absolument sans code serveur, qui fasse du CRUD (Créer, lire, éditer, supprimer).

Et oui c’est désormais possible en activant CORS dans l’interface CLOUDANT et avec la super technologie couchDb !

Autant dire que c’est le top pour faire des maquettes rapides !

Ici, je vais faire une micro application BIG DATA qui permet de modifier un des 13989 organismes de formations français .

NOTE IMPORTANTE : POUCHDB propose une syntaxe incroyablement plus simple, qui cache tous les appels ajax, on va donc refaire la même micro app avec POUCHDB dans un post suivant. Ce post est réalisé à titre informatif, pour quelqu’un qui voudrait attaquer la base cloudant directement avec du jquery AJAX .

Photo de l’app :


app10.jpg

Notes


la Bdd couchDb dispose d’une super API $.couch qui permet de faire du CRUD, seulement, n’ayant pas réussi , pour l’instant, à la plugger avec CLOUDANT, je propose ici une app sans cette api.

Les données de l’app


La liste publique des organismes de formation est disponible à cet url :

https://www.data.gouv.fr/fr/datasets/liste-publique-des-organismes-de-formation-l-6351-7-1-du-code-du-travail/

On importe tout ces data JSON dans la base de données cloudant (Chercher la méthode d’import sur le WEB), puis on va élaborer un formulaire CRUD dessus .

Tester l’application en ligne :


L’app est à tester sur CE LIEN

Tout d’abord, notre formulaire index.html qui sera notre seule vue du coup  :


Lire la suite

[PouchDb] [Cloudant] [Vue.js]Un premier Formulaire avec la Technologie Cloud d’Ibm.

pouchcloudanttéléchargé

Introduction


Une base de données hébergée dans le cloud permet, entre autre, les avantages suivants : Synchro temps réel entre les navigateurs, réplication de bdd, bases de données gigantesques, Recherche avancée avec Elastic Search(indexation…), Map reduce … Bref, ici on va seulement déjà faire tourner une base de donnée CouchDb, avec la librairie additionnelle PushDb qui prends le relais en local au cas ou le matériel perde la connexion.

L’interface Homme Machine tourne en html 5  avec le framework Front-End vue.js et la librairie Bootstrap vue v4.0, du coup on a encore besoin d’un bon vieux serveur apache, sur free.fr, par exemple … Pour cet exo, pas de test tablette, seulement du  22 pouces.

lapin.jpg « Et pourquoi que tu fais un exercice comme ça, petit jojo ? « 

Parce que, selon la doc, PouchDb permet d’envisager la création d’applications complexes synchronisées, sur tablettes, qui résistent au mode offline, tout cela avec la syntaxe js, toujours relativement simple et cohérente, surtout avec le framework vue.js.

De plus, en 2016 J’avais déjà expérimenté AngularJs + Firebase et ç’était vraiment trop bon avec le 3 way binding, seulement le défaut de Firebase est qu’il est exclusivement hébergé online, alors que couchDb peut être installé sur des serveurs persos, et tourne avec jquery, node.js, et SURTOUT en mode no-serveur, avec pourtant une authentification, car c’est aussi un serveur web ! Ce qui signifie se passer de code serveur , et ça pour les pré-maquettes, c’est seulement génial, quoi , petit ! ( C’est l’activation de CORS sur cloudant qui va nous permettre cela (Cross site connection enabler)

lapin2.jpg « Ouf, ca va, je suis rassuré maintenant, grouinch, galop.. galop . »

Pourquoi IBM Cloudant ?


Aws et Google Cloud demandent la carte bleue, par contre Ibm Cloudant est gratuit pour l’instant, en tout cas ça marche bien, avec juste des limitations de connexion.

Pour la méthode, ben, ne pas prendre peur, créer son compte ibm cloudant, puis créer sa base noSql de type cloudant. Je n’ai pas le temps d’expliquer ça là. Il faut juste choisir une base de données couchDb bien sur.

cloudant.jpg

Ensuite il y a  choses importantes à faire pour cet exo :

  1. Générer les données d’identification, qui va permettre à notre app HTML de se connecter à la base couchDb :cloudant2.jpg

2. Activer CORS afin que l’on se serve de couchDb directement à partir du front end en JS  (Bien sur, ce n’est pas safe, pour l’instant,( hi hi )!

cors

 lapin4.jpg « Bon ça y est , c’est fini ?  groinch « 

La Micro App


On va élaborer un humble formulaire repris de ce post, qui nous permet d’entrer un email, une plaque d’immatriculation, et une marque, un peu à la manière de l’ANTS . bref c’est pour entrer un véhicule dans une bdd noSql couchDb

Le temps global de dev est approximativement de 30- 45 minutes , parce qu’on découvre, mais bien sur, ça se réduira ensuite.

Pour l’instant, pas d’authentification couchDb, on commence simple … L’update n’est pas là non plus …

PouchDb


pouchDb est vraiment trop intéressant, en effet c’est ,pour résumer au maximum et approximativement,  une réplique locale de la base de données couchDb, qui attends puis synchronise automatiquement en cas de coupure réseau. Autrement dit, quelque chose d’extrêmement intéressant  pour le matos mobile !

Tester le super formulaire… one Agaaain


Je l’ai mis sur free : http://nicolas.huleux.free.fr/pouchdb/indexvuepouch.html

puhhh

Le Manifest pour forcer la mise en cache


Se renseigner sur l’ajout de Manifest dans la balise HTML , qui force la mise en cache d’une app web … Je l’ai mise sans plus d’analyse pour l’instant.

Le fichier Index.html


Il charge les libs en début et fin de script.

Il charge donc également le fichier app.js qui contient notre code vue.js

Dans le HTML , on voit les champs input, et la liste des automobiles qui provient de couchDb .

<html manifest="example.appcache">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exo pouchdb</title>
        
		<!------------------------------------------------------------ CHARGEMENT DES LIBRAIRIES ------------------------------------------------>
		
		<!-- Bootstrap et Bootstrap vue. -->
		<link type="text/css" rel="stylesheet" href="bootstrapvue/bootstrap.min.css" />
		<link type="text/css" rel="stylesheet" href="bootstrapvue/bootstrap-vue.css" />
		<script src="bootstrapvue/vue.js"></script>
		<script src="bootstrapvue/polyfill.min.js"></script>
		<script src="bootstrapvue/bootstrap-vue.js"></script>
		
		<!-- JQuery. -->
		<script src="js/jquery.min.js"></script>
		<!-- PouchDb. -->
		<script src="js/pouchdb.min.js"></script>
		<!-- Vuepouch plug in.  https://github.com/sadick254/vuepouch -->
		<script src="js/vuepouch.js"></script>
		

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

<!-- La page HTML générale -->

<body style="background-color:tan" >
	<div id="app"  >
	<div class="row" style="margin:5%">
		<div class="card " style="width:50%;">
			<div class="card-header">
				<h5 class="card-title">Formulaire</h5>
			</div>
			<div class="card-body">
				<b-form @submit="onSubmit" @reset="onReset" v-if="show">
					<b-form-group id="exampleInputGroup1" label="Votre email:" label-for="exampleInput1" description="Nous ne partageons pas votre email avec quelqu'un.">
						<b-form-input id="exampleInput1" type="email" v-model="form.email" required placeholder="Entrez l'email"> </b-form-input>
					</b-form-group>
					<b-form-group id="exampleInputGroup2" label="La plaque de votre véhicule:" label-for="exampleInput2">
						<b-form-input id="exampleInput2" type="text" v-model="form.plaque" required placeholder="Entrez la plaque d'immatriculation"> </b-form-input>
					</b-form-group>
					<b-form-group id="exampleInputGroup3" label="La marque:" label-for="exampleInput3">
						<b-form-select id="exampleInput3" :options="marques" required v-model="form.marque"> </b-form-select>
					</b-form-group>
					<b-form-group id="exampleGroup4">
						<b-form-checkbox-group v-model="form.checked" id="exampleChecks">
							<b-form-checkbox value="email">Envoyez moi un email</b-form-checkbox>
							<b-form-checkbox value="sms">Envoyez moi un SMS</b-form-checkbox>
						</b-form-checkbox-group>
					</b-form-group>
					<div align="right">
						<b-button type="submit" variant="primary">Enregistrer</b-button>
						<b-button type="reset" variant="danger">Reset</b-button>
					</div>
				</b-form>
			</div>
			<div class="card-footer"></div>
		</div>
		<div class="card " style="width:50%;">
			<div class="card-header">
				<h5 class="card-title">Liste</h5>
			</div>
			<div class="card-body">
				<ul>
					<li v-for="a in  automobiles">{{a.email}}-{{a.plaque}}-{{a.marque}}</li>
				</ul>
			</div>
			<div class="card-footer"></div>
		</div>
	</div>
</body>

<!-- Chargement de l'app -->
<script src="js/app.js"></script>
<!-- Css perso -->
<link type="text/css" rel="stylesheet" href="style.css" />

Le fichier APP.JS


On instantie notre objet vue, et on peut voir qu’il y a un objet pouchDb qui permet de spécifier la base locale pouchDb et la base online couchDb.

C’est grâce à vuepouch (https://github.com/sadick254/vuepouch ), la petite librairie de sadick254 dédiée au pilotage de pouchdb par vue.js, qu’on peut faire ça facilement. Il existe une autre lib plus grosse à tester ces jours ci : https://github.com/QurateInc/vue-pouch-db — (Note : en effet, la synchro n’est pas globale pour l’instant avec cette petite lib, epxlication dans la conclusion.)

Dans la méthode ajouterAutomobile(), on voit qu’on se sert de $pouchdbRefs qui nous permet d’ajouter les automobiles à la base de données pouchDb Locale qui synchronise ensuite avec la base de données couchDb Online.

var app = new Vue({
	el: "#app",
	data() {
		return {
			form: {
				email: '',
				plaque: '',
				marque: null,
				checked: []
			},
			marques: [{
				text: 'Selectionnez',
				value: null
			}, 'Peugeot', 'Renault', 'Citroen', 'Ds'],
			show: true,
			personnes:[]
		}
	},
	pouchdb: {
		vehicules: {
		  localDB: "vehicules",
		  remoteURL: "https://xxxxxxxx-be6e-42d6-b914-d0ecae937981-bluemix:8eeedbe180c1ce90cdc3ae37b9e74af7368b21a37b531aae819929d3405c7d22@1c54473b-be6e-42d6-b914-d0ecae937981-bluemix.cloudant.com/vehicules"
		}
	},
	computed: {
		automobiles() {
		  return this.vehicules.automobiles
		},
		camions() {
		  return this.vehicules.camions
		}
	},
	methods: {
		onSubmit(evt) {
					evt.preventDefault();
					this.ajouterAutomobile(this.form);
				},
		onReset(evt) {
			evt.preventDefault();
			/* Reset our form values */
			this.form.email = ''; 
			this.form.plaque = '';
			this.form.marque = null;
			this.form.checked = [];
			/* Trick to reset/clear native browser form validation state */
			this.show = false;
			this.$nextTick(() => {
				this.show = true
			});
		},
		ajouterAutomobile(form) {
			this.$pouchdbRefs.vehicules.put('automobiles',form)
		},
		addPassenger () {
			this.$pouchdbRefs.vehicules.put('camions', /*your data*/)
		} 
	}
})

 Conclusion


On voit qu’on peut désormais, en activant CORS, écrire directement dans la base couchDb.

Si l’on perds l’accès à couchDb et qu’on continue à enregistrer des véhicules, mes petits essais sommaires ont montré que pouchDb attends la reconnexion, puis exécute une à une les requêtes sur la base online (Dans la console, on les voit passer).

Cependant, subsiste un problème, en effet, Contrairement à Firebase+AngularJs, la synchronisation n’est pas temps réelle, c’est à dire que si j’ouvre 2 navigateurs différents, et que j’entre une info dans l’un, je ne la vois pas apparaitre automatiquement dans l’autre (il faut alors appuyer sur F5), c’est donc ce que l’on va tenter de corriger avec l’utilisation du module https://github.com/QurateInc/vue-pouch-db qui semble corriger ce problème.

En effet, pas envie de mettre un timer qui recharge couchDb à intervalle régulière, je pense que le module vue-pouch-db doit le gérer automatiquement.