Vous êtes sur la page 1sur 84

PROGRAMMEZ.

COM

Mensuel n191 - Dcembre 2015

Open Data

Choisir
son cole
dinformatique

O trouver les donnes ouvertes ?

Dvelopper et intgrer

Sport Geek

Montez et codez votre


rameur connect !

Focus sur : Xamarin.Mac, Xamarin.Forms,


Active Directory, Trucs & astuces

Kinect

Dvelopper avec le SDK Kinect 2

Navigateur

Dcouvrir les Web Worker

Printed in EU - Imprim en UE - BELGIQUE 6,45 SUISSE 12 FS - LUXEMBOURG 6,45 - DOM Surf 6,90 Canada 8,95 $ CAN - TOM 940 XPF - MAROC 50 DH

3:HIKONB=^UZ^Z]:?a@b@t@l@a";

1ere partie :
les microservices, Java

Dvelopper pour Android, iOS, Windows

M 04319 - 191 - F: 5,95 E - RD

Les nouvelles
architectures
logicielles

maxsattana

facilement les open data

Pub cahier couv 191_191 18/11/15 11:51 Page2

COMMANDEZ WINDEV 21
OU WEBDEV 21 OU WINDEV MOBILE 21

ET RECEVEZ
LE NOUVEL iPhosne 1
Prolongation exceptionnelle jusquau 18 Dcembre

Dautres matriels
sont proposs sur
le site
www.pcsoft.fr

Aucun
abonnement
souscrire.
Compatible
tous oprateurs

OPRATION

Elu
Langage
le plus productif
du march

003v2_191_191 18/11/15 21:51 Page3

CommitStrip

82

Un code, de multiples possibilits.

Nous vous parlons rgulirement des outils et plateformes de


dveloppement permettant de coder une fois, et de cibler plusieurs
environnements. Dans le mobile, cest un enjeu
important. Mais, il ne faut pas se dire quun tel
outil fera tout et tout seul. Absolument pas. Si le
code back-end sera largement compatible,
linterface et un x % de ce code seront
reprendre, adapter. Linterface nest pas
ngliger. Et dautre part, il faut aussi une certaine
ractivit de la plateforme de dveloppement pour
corriger les bugs, supporter les nouvelles
API et suivre les volutions des
systmes mobiles.

Mean.IO
3e partie

44

Nous parlerons aussi dun autre sujet chaud: les nouvelles


architectures logicielles, tout le moins, quelques-unes dentre elles.
Le sujet est important, car elles vont directement impacter
vos dveloppements et la manire de penser, de
structurer et de dployer vos applications. Nous aurons
Android
loccasion dy revenir dans les prochains
les tests
et
mois. Ce sujet ne fait que dbuter.

76

Autre sujet qui va intresser nos jeunes lecteurs et les


parents, le choix dune cole d'informatique. Le thme peut
paratre classique et cul, mais la rdaction nous
nous sommes pos la question sur les critres de
choix, et, finalement, comment sorienter
dans la multitude de filires, de
formations et de diplmes. Ce choix ne
doit pas tre fait la lgre, car il va
dfinir votre futur

C++

18

Avec quelques semaines davance, nous


vous souhaitons de bonnes ftes de fin danne (eh oui dj!).
Le boss
ftonic@programmez.com

Les
nouveauts
diOS 9 et de
Swift 2

69

Insights
de Senseo

Choisir
son cole
dinformatique

68

Xamarin est sans doute


lenvironnement le plus connu dans
ce domaine. Mme sil nest pas
parfait, et que les dfauts de certains
outils sont souvent voqus par les communauts, reconnaissons
le travail accompli par lditeur. Ce mois-ci, nous revenons sur
quelques fondamentaux de loutil.

Nous parlerons aussi,


concrtement, dOpen Data avec
un peu de thorie (il faut bien) et
surtout des exemples trs rels
pour bien comprendre lusage des
donnes ouvertes.

56

Essayer
Roslyn

InnerSourcing

17

Google
Maps

Dossier
Xamarin

21

2e partie

Les
nouvelles
architectures
logicielles

41

Amazon
& les IOT

1ere partie

46

73

Rameur
connect

53

Dossier
Open Data
30

Dveloppez
avec le SDK
Kinect 2
1ere partie

78

Web
Worker

64

Tableau
de bord &
agenda

Webmaker
de Mozilla

61

NodeJS

3e partie

58

lire dans le prochain numro n192 en kiosque le 31 dcembre 2015

Retour vers le pass

Atari ST, Amiga, Apple 2, Amstrad CPC.. cela vous dit quelque chose ? Non ?
Faisons un grand bond de 30 ans en arrire ! Un voyage surprenant dans la
programmation oldschool et la Dmoscne franaise !

Cahier spcial Drupal 8

La version finale de Drupal 8 est enfin


arrive. Un guide complet pour bien
dmarrer !
Programmez! a Dcembre 2015

004_005_191 18/11/15 22:35 Page4

1/10

Apple

SurfaceBook et Macbook mme combat


dans la rparation selon iFixit

ouvre des librairies de cryptos,


https://developer.apple.com/cryptography/

Les extensions
arriveront en 2016 dans

Cortana sur iOS,

Edge

une bta prive disponible

Google
va-t-il produire son propre processeur?

Qui investit le plus en


Recherche & Dveloppement* ?

+ 13

+ 10

+ 10

Windows 3.1 dpass?


Laroport dOrly lutilise toujours.

Firefox
sans plug-ins
en 2016

+8

milliards milliards milliards milliards


Samsung
Intel Microsoft Google
Longtemps trs loin derrire, Apple a renforc son budget de R&D: 8 milliards estims
cette anne
* donnes Fortune.com

Lart du pliage des

Nexus 6P

Tesla avait intgr par mise jour,


et quelques capteurs, la conduite autonome
pour la limiter quelques jours plus tard

Index Tiobe: Objective-C out, Java au top

agenda
Belgique

Dev Day:
1er dcembre
(Mons, Belgique)

Lvnement dveloppeur belge se


tiendra le 1er dcembre Mons.
Lvnement sera trs orient sur les
technologies Microsoft et Windows 10
mais aussi Raspberry Pi (+ Windows 10).
A cette occasion des speakers de renom
seront prsents: David Rousset,
Sbastien Warin, Samuel Blanchard
Pour les tudiants, lvnement est
gratuit.
Pour en savoir plus: http://www.devday.be

Les vnements
Zenika

Matinale Agile Wake Up / 01 dcembre


(Zenika Paris)
Pour ce lancement, nous vous proposons
de vous initier lAgilit et de vous
montrer qu'elle peut sadapter diffrents
contextes travers quatre confrences.
Programme et inscription :
http://www.zenika.com/agile-wake-up-1.html
Zenika organise le NG2 Tour au sein
de ses diffrentes agences et vous
propose de dcouvrir tous les secrets sur
Angular 2. Vous souhaitez commencer
une nouvelle application et vous hsitez
entre AngularJS et
Angular 2 ? Vous dsirez avoir un
aperu de la prochaine version du
framework ?Ou peut-tre faites-vous
partie des personnes qui ont des
interrogations par rapport ce qu'ils ont
dj entendu sur l'avenir d'Angular ?
Les dates:
Zenika Rennes : 03 dcembre
Zenika Nantes : 04 dcembre
Zenika Paris : 12 janvier 2016
Zenika Lyon : 21 janvier 2016
Zenika Lille : 26 janvier 2016
Programme et inscription :
http://www.zenika.com/Evenements/zenikang2-tour.html

Mobile Dev 10
dcembre
Objective-C est plus que jamais en dehors du top 10. Swift devrait dsormais trs rapidement
le dpasser et intgrer au printemps 2016, les dix premiers. Pour le reste, peu de changement:
Java, C et C++ Python, sur lequel nous avons fait rcemment un focus, est trs en forme (5e).

Programmez! a Dcembre 2015

Lcole ESGI organise une nouvelle


dition de sa journe dveloppement
mobile, sur le campus de Paris. La
journe sera ponctue de confrences et
de rencontres.

004_005_191 18/11/15 22:35 Page5

006_016_191 18/11/15 21:55 Page6



Choisir son cole d'informatique/de dveloppement


Depuis plusieurs annes, nous vous parlons rgulirement des coles, et de nombreux numros
spciaux sortent sur ce thme dans la presse. Une des questions qui revient rgulirement: comment
choisir? Mais cette question se rvle rapidement complexe: quels critres? Quel type dcole et de
cursus (et de diplme donc)? Programmez! apporte quelques rponses vos angoisses.
Franois Tonic
Programmez!

Que vous soyez encore au lyce, avec ou sans


bac, dj tudiant ou mme ventuellement
dj (jeune) dveloppeur, il existe des coles et
des cursus faits pour vous, mme en France.
La culture du diplme demeure trs importante,
au risque de dcourager des jeunes se lancer
dans laventure de linformatique, du
dveloppement, du numrique. Mme si les
mathmatiques ne vous passionnent pas, que
vous ayez un bac pro ou arrt les tudes
avant le bac, vous pouvez tout de mme faire
carrire dans le dveloppement, linformatique.
Il est certain qu court terme les mtiers du
numrique au sens large vont continuer
crotre et il y aura pour plusieurs annes des
pnuries, tout le moins, un manque de
comptences, notamment dans le
dveloppement. La pnurie ne va pas
dcrotre. notre dernier forum, nous avions
7000 propositions (de stages) pour 2000 lves.
Et 20% partent ltranger.
Prcise Jol Courtois
(directeur gnral EPITA).
Cependant, il ne faut pas
croire que tout le monde
deviendra informaticien,
ou dveloppeur. Il y a sans aucun doute parmi
les lves en chec, des ppites qui mritent
une chance et dtre aid.

Une grande diversit dcoles


et de filires
Il existe beaucoup dcoles, beaucoup de
modles diffrents et une grande diversit, telle
que lcole42. prcise Emmanuel Peter
(directeur ESGI). Les filires principales sont:
Filire/cole
BTS
IUT
Universit
cole dinformatique
Alternance
cole dingnieur
cole de type42

Dure
2 ans aprs le bac
bac+2/+3
jusquau doctorat et post-doc
de bac+2 bac+5
en gnral 2 ans, mais aussi en bac+5
bac+5
3 ans

Toutes les formations nexigent pas un bac ou

Programmez! a Dcembre 2015

un diplme comme pralable. En cole


dingnieur, en gnral, on accde aprs une
prpa. Pour plus dinformations, consultez le
tableau gnral disponible sur www.programmez.com.
Selon la filire, la formation et le diplme ne
seront pas identiques, que ce soit dans la
formation en elle-mme des fondamentaux du
dveloppement et de la technique, ou dans la
pratique (stages, projets).

sommes trs bien encadrs.


Des copains en IUT ou en fac le
sont bien moins. prcise
Bastien Robert (L2 promotion
2019, EFREI).
Votre niveau scolaire et votre
Bac (mention, type de bac), comme nous
lavons dit plus haut, seront dterminants pour
certaines coles (ex.: coles dingnieurs)
ncessitant souvent un bac scientifique et une
mention. Si votre rve est dintgrer une cole
Un choix multiple,
mais finalement un seul choix dingnieurs, il est parfois possible dtre admis
par des voies secondaires.
Les premiers critres de choix sont trs
Certaines coles misent aussi sur la flexibilit
simples:
a Si vous avez le bacou non : si oui, le type de des programmes et des technologies mme si
les fondamentaux changent peu. Parfois les
bac peut ventuellement jouer;
a Selon les prrequis ncessaires pour telle ou coles sont lentes se mettre jour. Nous, on
telle filire. Par exemple, pour luniversit, une peut changer nos technologies tous les 6 mois
cole dingnieur, une cole informatique, le si besoin., nous indique Corinne Combes
bac est ncessaire. Mais le bac nest pas (directrice Aston). Sans tre aussi rapide, il est
lunique condition. La mention, le type de bac important de bien comprendre les formations,
les cours, les stages proposs
(scientifique, pro, littraire)
et les technologies/langages
seront bloquants, ou du
On parle
que lcole propose. Dans le
moins, handicapants pour
monde Web, un apprentissage
certaines filires. cela peut
beaucoup des
du Flash naura plus dintrt
se rajouter une prpa. Pour
dcrocheurs. Il
par exemple ni du HTML avant
les grandes coles, coles
la v5.
dingnieur, la prpa est souy a des talents
vent conseille, mais chaque
cole a son mode de slecBac+5: ingnieur,
dcouvrir
tion.
niveau ingnieur
(Aston)
Un lment que lon oublie
Il faut tre honnte, il existe une
souvent: faire un travail sur soicertaine obsession du diplme
mme et se demander rellement la carrire
dingnieur, le fameux bac+5. Beaucoup
que lon veut faire: quels profils mintressent
dentreprises demandent, exigent ce diplme
le plus, suis-je motiv pour le dveloppement,
et les annonces lindiquent souvent. Mais
la technologie?
dexcellents dveloppeurs ou sysadmin nont
On utilise le terme trs gnral dinformaticien.
pas ce ssame et font de belles carrires. Un
Mais aujourdhui informaticien ne signifie plus
Bac+5, cest 5 ans dtudes aprs le bac. Cest
grand-chose, car il existe des dizaines de
long et les rythmes exigs sont levs. Il faut
profils trs diffrents (technique, non-technique, tenir et tre capable de financer 5 ans
dveloppeur, architecte logiciel, marketing web, dtudes. Aujourdhui, environ 210 coles
design, etc.). Si vous souhaitez tre rapidement dlivrent le diplme dingnieur. Ces coles
oprationnel et que vous naimez pas les
sont publiques ou prives (beaucoup sont
tudes, mieux vaut choisir une filire courte,
prives).
des coles de type42. Il sera ensuite possible
Il existe plusieurs filiresbac+5:
de complter votre formation initiale par une
a Les coles dingnieurs, par exemple les
formation ultrieure ou des certifications pour
coles des mines. Ce sont des coles dites
monter en comptence. Parfois il y a un choc
gnralistes avec une forte dominante sciende culture entre le lyce et lcole suprieure.
tifique.
Au dbut oui cest un peu le choc, mais nous
a Les colesbac+5, cole dingnieur en infor-

006_016_191 18/11/15 21:55 Page7


 
  
 
 

006_016_191 18/11/15 21:55 Page8

Inria

matique. Elles ne dlivrent pas forcment un


diplme dingnieur, mais de niveaubac+5.
Par exemple lcole Etna qui fournit un
titrebac+5 en alternance.
Il existe diffrents bac+5 et cursus
dingnieurs. Vous pouvez opter pour une
cole dingnieur gnraliste surtout si vous
tes bon en mathmatiques et en sciences.
Les Mines Nancy nest pas une cole
informatique, mais une cole dingnieur. Nous
avons des parcours trs varis et diffrents
dpartements. Les tudiants ne vont pas faire
30 heures de C++, 30 de Java, etc. Nous
sommes une cole gnraliste avec un bon
niveau scientifique, mais nous regardons aussi
les technologies comme le Big Data. Nous
proposons aussi des
spcialisations via plusieurs
masters en informatique,
scurit informatique.
recadre Bart Lamiroy (Mines
Nancy)
Les coles d'informatique
proposent souvent diffrents domaines de
comptences pour leurs formations et
diplmes. Par exemple en bac+5: SupInternet
se concentrera sur le Web (dveloppement,
marketing, design), Hetic sur le Web et la 3D,
ESILV se concentrera sur le big data, web,
mobile, embarqu, EFREI aura une approche
large (architecture SI, BI, scurit, imagerie,
dveloppement).

Ne pas sous-estimer le cot


des tudes

Comme nous lavons dit plus haut, le bac+5,


quelle que soit lcole choisie, est exigeant,
long et contraignant. Vous devez peser le pour
et le contre immdiatement. Et vous devez

tre conscient(e) du cot financier en cole


prive. Une solution en alternance permet de
mieux supporter les frais scolaires, mme si
toutes les formations en alternance ne
permettent pas dtre en entreprise ds la
1ere ou 2e anne.
La plupart des coles que nous avons
interroges durant cette enqute ont des
partenariats avec des banques pour faciliter
les prts tudiants, voire, parfois, avec des
rsidences ou des organismes spcialiss
pour aider ltudiant se loger. Le logement
est parfois un point dlicat (et qui pse
lourdement dans le budget annuel). De
nombreuses coles amnagent les frais de
scolarits en cas de difficults. Certaines
coles sont plus proactives que dautres sur
ces sujets.
Tous les tudiants que nous avons rencontrs
se sont pos la question un moment donn.
Oui japprhendais un peu. Mes parents
mont aid et ont dbloqu largent. Parfois, on
en discute entre tudiants et se pose aussi la
question de largent qui reste pour vivre,
sortir. prcise Thomas (1ere anne Epitech).
Ltudiant habite chez ses parents ou loue ou
co-loue un appartement.
Le financement doit tre pris trs au srieux
quand vous optez pour une cole prive, quel
que soit le cursus, court ou long. Que faire?
BTS? IUT? Cest bte de se fermer des
portes. Quest-ce que cela mapporte? Jai
calcul sur 5, 10, 15, 20 ans. Jai regard les
statistiques des salaires. Jai cherch un
logement, une banque. voque Bastien
Robert.
Il y a aussi celles et ceux qui ne souhaitent pas
prendre un prt tudiant ni demander aux
parents. Cest notamment le cas de Sarah

Non, il ny a pas que le bac+5 dans la vie!

Soyons honntes, aujourdhui, les entreprises demandent un niveaubac+5, tort ou raison.


Cependant, il ne faut pas que cela soit une obsession au risque de vous dcourager et de
vous faire abandonner les technologies et linformatique. Malgr tout, il faut tre conscient
des problmes potentiels que pose le niveau de formation auprs des entreprises. Je
ntais pas sr dtre embauch bac+2 et avec mon BTS. Je me suis pos la question sur le
bac+5. Jai vu lopportunit du titre dingnieur, mais je navais pas les finances pour le faire.
Une cole prive a un cot. Jai cherch une cole avec de lalternance. Jai eu la chance de
trouver lcole et une entreprise. prcise Florian Toix (ingnieur tude et dveloppement,
diplm EPSI Bordeaux).
Durant notre enqute, une des craintes souleves tait lembauche immdiate avec un BTS
ou toute autre formation courte bac+2/3 et parfois aussi, les possibilits dvolution de
carrire et le niveau de salaire. Mais ne soyez pas non plus obnubil par le diplme et le
bac+5. Car un bon dveloppeur doit tre agile, la fois autonome et communicant et
matriser les technologies et les langages. Prouvez vos comptences au quotidien, et
nhsitez jamais investir du temps sur la veille technologique et vous former constamment
de nouveaux langages et frameworks.

Hathat (tudiante 2e anne, Supinfo), qui


travaille le week-end pour financer lcole.
Cest une contrainte, mais cest un choix que
jai fait mme si cest parfois un peu dur. Cette
anne je nai pas cours le jeudi cela me permet
de sortir un peu ou de travailler mes cours.
Jaimerais bien un contrat de
professionnalisation lan
prochain pour payer lcole
(lalternance se fait partir de
la 3e anne Supinfo, NDLR).
prcise Sarah Hathat.

Ne pas hsiter
changer de filires, vous
remettre en question ou
plonger

Linformatique et le dveloppement peuvent


intresser tout le monde! Et comme nous
lavons vu, les filires sont nombreuses. Et
vous pouvez parfaitement rcuprer une
formation informatique/dveloppeur tout de
suite aprs le bac ou plus tard. Jai fait une
anne duniversit. Jai voulu changer. Jai
regard sur Internet et je suis all des salons
tudiants. Jai pu y voir des stands dcoles,
dont Supinfo. Cela ma plu. Je navais jamais
fait de technique ni de dveloppement. Javais
un peu peur au dpart et je me suis lance.
Raconte Sarah Hathat.
Il est difficile de savoir ce que lon va faire
comme mtier. Et quand on termine le lyce, il
faut bien choisir quelque chose. Aujourdhui, il
est plus facile de changer de filires. Il ne faut
pas hsiter se remettre en
question et tenter.
On peut hsiter entre
plusieurs filires. Par
exemple Florian Toix avait
hsit entre linformatique et
la biologie. Il a finalement opt pour
linformatique en discutant avec un ami qui
tait dj lEPSI.
Un ami mavait parl de lEpitech, o il tait
tudiant. Jai commenc regarder ce que
proposait lcole et jai fait plusieurs visites. Je
trouvais cela sympa et je me suis dit pourquoi
pas. Jaimais bien linformatique, mais pas
forcment pour en faire (un mtier). LEpitech
tait mon choix, lcole o je voulais aller.
prcise Thomas.
Ds le collge, je suivais les cours
dOpenclassroom. Le fondateur sortait de
lEFREI. Je me posais des questions sur laprs
bac. Jai fait des recherches, je suis all aux
forums, aux portes ouvertes. Jai discut avec
des anciens, des tudiants raconte Bastien
Robert. Le choix de lcole dpend beaucoup
de vous. Il faut chercher, aller aux salons

Programmez! a Dcembre 2015

pu

006_016_191 18/11/15 21:55 Page9

Plaisir

Convivialit Responsabilit

 Partage



Engagement

volution

Qualit
Crativit

eCitiz

Media



Transport

Ubiloop

Modelio

Expertise




Gestion de projet

Dveloppement
pub 210x142 2015-09-14 indd 1



Mobile

Digital

  
NoSQL   
UX

BigData

Responsive

Nantes
Rennes

nergie
Industrie

SI

Paris Toulouse

Digital

 

Nous avons dj voqu plusieurs reprises


la motivation et des lments qui peuvent
plaire aux coles. Il ny a pas de profils types
des nouveaux entrants, car selon lcole,
celui-ci change beaucoup. Lcole Aston
voque un ge moyen relativement lev
27/28 ans. Il nest pas introverti et il sait se
vendre, communiquer. Un bon quilibre de vie
est parfois encourag (sortie, dtente,
sport).

RECRUTE


dotnet@softeam.fr

Aix

Communaut

Passion

Challenge Formation

vous de vous
vendre!

Londres
Singapour

 

Agilit

PMP
BDD

XP
PMP-ACP


DDD

Togaf

Lcole42 est atypique dans le paysage. On


peut y entrer sans diplme et cest ouvert
tout le monde (avec limite dge tout de
mme). La slection nen demeure pas moins
trs stricte et svre: des tests en ligne puis
la fameuse piscine, une immersion totale
durant plus dun mois, en groupe. Mme si
effectivement, on na pas besoin dtre codeur
dans lme, si vous arrivez la piscine, vous
allez trs vite devoir apprendre, coder,
travailler en quipe pour dcrocher une place
parmi le millier de slectionns chaque anne.
La formation dure 3 ans et trs oriente
pratique, projets. Pas de diplme reconnu la
sortie, mais assurment une pratique du code.
Mais ce modle ne convient pas tout le
monde.

lentre en 1ere anne mme sil ne sait pas


encore ce quil va faire exactement, peut-tre
plus vers le web. La motivation et la volont
de russir sont l ! Sans faire du 42 100%,
aujourdhui, les coles dinformatique
imposent de nombreux projets dans lcole
ou des stages ou de lalternance en
entreprise, parfois ds la 1ere anne.
Ltudiant est mis en situation grce
lalternance. Il applique ce
quil apprend lcole. Mais il
est vrai que lalternance na
pas toujours bonne image.
prcise Samir Rinaz (Etna).

UML2.0

Un peu de 42et dalternance

Diversit

Sbastien, 24 ans, a dj
vcu plusieurs vies
(brancardier, dans la
ptisserie) mais linformatique
la toujours passionn. Un
ami ma parl de 42 quil
voulait intgrer. Je ne
connaissais pas du tout, il ma alors expliqu le
principe. Et jai voulu tent mme si je ny
connaissais rien la programmation mais je
sentais que ctait ce que je voulais faire
explique Sbastien. Il a pass avec succs les
tests de logiques puis le staff la contact. Puis
lpreuve redoute de la piscine tait arrive.
On se fait beaucoup dides sur la piscine. Je
pensais que je ny arriverais jamais. Jai alors
regard des vidos, discuter sur les forums.
Jtais un peu en panique. Mais ds les
premiers jours je nai pas trouv cela aussi
terrible mme si elle est exigeante. poursuit-il.
La piscine demande beaucoup de travail et de
rigueur. Lentraide entre les lves est trs
importante pour saider mutuellement et
avancer. Mme si le langage C ne parle pas
totalement Sbastien, il a fait le job. Les
premires semaines sont intenses, +10 heures
par jour Sbastien va vivre fin novembre

Web2.0

tudiants, venir aux portes ouvertes pour voir


les locaux, lambiance, discuter avec les
tudiants, les profs, consulter les cursus et
formations. Finalement, les orientations au
lyce voquent encore peu les coles
d'informatique et les nombreux mtiers du
numrique. Vous devez tre volontaire et ne
jamais hsiter aller voir par vous-mme.

Kanban

TDD

14/09/2015 10:29

006_016_191 18/11/15 21:56 Page10

Ne pas ngliger lAnglais

Ce nest pas une surprise: lAnglais est la


langue du numrique et du dveloppement.
Beaucoup de ressources sont uniquement
en Anglais. Et de nombreuses coles
(ingnieur/informatique) proposent des
cours en Anglais. On ne vous demande pas
dtre bilingue, mais de savoir vous
dbrouiller, de soutenir un projet et
dchanger. Certains sont plus laise que
dautres. Mon niveau dAnglais nest pas
mauvais, mais le niveau ( lcole) est
exigeant. Il faut taffer! indique Thomas.
Globalement, le niveau
est moyen. Prcise
Emmanuel Carli (directeur
gnral Epitech). Epitech
utilise, comme dautres
coles, les grilles
dvaluation. Et, par
exemple, lEpitech impose une anne
linternational (4e anne). Et cest
obligatoire.
L encore, il ne faut pas avoir peur de se
lancer et dapprendre mme si vous ntes
pas bon. Je connais des dveloppeurs qui
sont partis aux USA avec un niveau
moyen/mdiocre, mais ils ont saisi les
opportunits proposes

Des promos avec plus


de filles!

Autre constat, les filles sont toujours peu


nombreuses dans les filires informatiques.
Certaines affichent de bons pourcentages.
Nous avons au moins 20% de filles. Dans
la dernire promo, nous atteignons 22%.
Avant, elles sorientaient beaucoup vers le
design/marketing. Cette anne, par exemple,
20% dentre elles
choisissent loption
technique. Constate
Isabelle Clary (directrice
de SupInternet). Nous
avons pos la question
Sarah : Cela ne ma pas fait peur quil ny
ait pas beaucoup de filles. Cest vrai que
parfois cest un peu lourd, mais lambiance
est bonne.

Pour conclure

La russite dpendra de votre motivation. La


motivation est souvent prise en compte
dans les entretiens dadmission. Et lunivers
du numrique est vaste avec des dizaines
de mtiers trs diffrents. Il ny a pas que le
dveloppement ou la technique pure. Et tout
dpendra aussi de vos envies et ambitions
dans le mtier: trouver un job trs

10

Programmez! a Dcembre 2015

DES FORMATIONS ET CURSUS SANS


PRREQUIS OU SE FORMER RAPIDEMENT
Dans ce dossier, nous parlons beaucoup dcoles, de cursus aprs le bac, etc. Mais il ny a
pas que ces filires plus ou moins longues. Vous avez des structures telles que Simplon.co. Il
sagit dun rseau dans toute la France pour former en quelques mois des jeunes et moins
jeunes aux technologies du Web, la programmation mobile.
Simplon se destine plutt aux 20 ans, avec ou sans diplmes. Ces formations sont
intensives (6 mois) et trs denses, bases sur la pratique et les projets. Si les portes sont
ouvertes tout le monde, la motivation est un des critres essentiels. la cl, on peut
esprer devenir intgrateur web ou dveloppeur junior. Cette formation est une aide et une
base, mais il faut ensuite consolider et tendre ses comptences.
Un peu dans la mme veine, le ple Leonard de Vinci (Nanterre) lancera dbut2016 la
DevSchool. Nous avons des vellits d'aider les personnes en difficult et proposer une
autre faon dapprendre, notamment avec linitiative Grande cole du Numrique. voque
Jrme Da Rugna (directeur de la formation ESILV). Lobjectif est de
proposer des programmes de formation de 6 mois. La DevSchool va au-del
avec des cursus de 2 ans avec ou sans le bac avec de la programmation, du
dveloppement mobile, de la gestion de projet et de la culture digitale.
Rcemment, le gouvernement a lanc linitiative Grande Ecole du
Numrique dont les objets sont simples: former aux mtiers du numrique
10000 jeunes sans emploi et sans qualifications dici 2017 (dlai un peu court, mais bon).
Cette initiative doit sappuyer sur 200 fabriques numriques. Lambition mtier est importante,
car elle concerne le dveloppement, linfographie, le webmarketing, le rseau, la gestion des
communauts, le webdesign et la maintenance/support informatique.

VOUS ET VOS TUDES

Notre sondage express montre que vous


tes 46 % avoir une formation bac+5. Ce
qui est intressant, ce sont les 22 %
d'autodidacte du code qui n'a pas
forcment un diplme en informatique. Ce
rsultat nous a un peu surpris. Pour le reste,
vous tes 6 % en alternance et 26 % ayant
fait un bac+2, DUT, BTS.
Nombre de votants : 338
Diplme niveau bac+5

46%

BTS, bac+2, DUT

26%

Alternance
Autodidacte du code

6%
22%

rapidement, faire une vraie carrire dans le


dveloppement, etc. La France possde de
trs nombreuses coles
(ingnieur/informatique) et les diffrentes
filires sont en gnral accessibles dans votre
rgion. Il ny a pas que Paris et sa rgion
Ainsi Bordeaux, une nouvelle cole ouvrira en
septembre 2016: ESN / ESD. La formation sera
de 3 ans aprs le bac (le bac est obligatoire) et
des masters. La pdagogie sera assez
classique.
Nous remercions toutes les coles et les
tudiants qui ont rpondu notre enqute.
Nous navons pas pu citer tout le monde. u

Check-list

Impossible de proposer une liste de conseils


valable pour tout le monde. Voici quelques
pistes et ides pour vous aider : nhsitez
pas vous renseigner avant le bac sur les
filires, les coles, les carrires possibles;
a Quels mtiers mintressent ? Rpondre
cette question permettra de faire une
liste de filires et dcoles;
a Est-ce que je suis prt(e) des tudes
longues ? Ce choix est important pour
choisir la filire et le type de formation.
Cela vitera des perdre des annes et de
vous dcourager. Mme si le taux
dchec dans les coles d'informatique
est faible il existe;
a Si vous avez des amis dans une cole
dinformatique ou de la famille travaillant
dans linformatique, posez des questions;
a Allez aux portes ouvertes, dans les
forums, cherchez et informez-vous ! Les
collges et lyces sont encore trop
timides sur le numrique;
a Ne ngligez pas la partie financire. Une
cole prive cote cher et noubliez pas
dintgrer le logement, les transports et
tous les -cts (loisirs, sports, assurances, matriels, etc.)
vous de jouer maintenant.

006_016_191 18/11/15 21:56 Page11

DOMAINES | MAIL | HBERGEMENT | E-COMMERCE | SERVEURS

TESTEZ LE
MEILLEUR

T ES T E T APPROU V PAR

CLOUD
1&1 Serveur Cloud :
Easy to use ready to Cloud*
Les performances des nouveaux serveurs
Cloud sont imbattables en termes de
CPU, RAM et SSD.
Ralisez vos projets dans le Cloud
avec la combinaison parfaite entre
exibilit et performances.

Load balancing
Stockage SSD
Facturation la minute
Intel Xeon Processor
E5-2660 v2 et E5-2683 v3

1 mois gratuit !
Puis partir de 4,99 HT/mois (5,99 TTC)*

MOIS
POUR
ESSAYER

CLIC

POUR CHANGER
DE PACK

APPEL

UN EXPERT
VOUS RPOND

0970 808 911


(appel non surtax)

*Facile utiliser - prt pour le Cloud. 1&1 Serveur Cloud : 1 mois dessai gratuit, puis partir de 4,99 HT/mois (pour la conguration du serveur Cloud S). Facturation mensuelle
en fonction de la conguration choisie. Pas de dure minimum dengagement, ni de frais de mise en service. Conditions dtailles sur 1and1.fr. Intel et le logo Intel sont des
marques commerciales dIntel Corporation aux tats-Unis et/ou dans dautres pays. 1&1 Internet SARL, RCS Sarreguemines B 431 303 775.

1and1.fr

006_016_191 18/11/15 21:56 Page12

Ecole, diplme, travail


Tout ce que nous avons dcider, c'est ce que nous devons faire du temps qui nous est imparti.
Gandalf.
Frdric Fadel
Mathmaticien de formation,
autodidacte en informatique,
cofondateur de Winwise
(1993-2008) une socit de
service en informatique,
cofondateur dAspectize
(2007) un diteur de logiciel qui
mtamorphose lexprience de
dveloppement dapplications Web et Mobile.

Pourquoi un diplme?

Il y a le pass, ses habitudes, ses croyances,


ses craintes, ses dysfonctionnements, ses
mtiers, son incapacit imaginer le monde
autrement, sa mentalit.
Parmi les habitudes, il y a lcole: on va
lcole par habitude cest--dire quon le fait
spontanment, sans se poser de questions,
comme quelque chose qui doit tre fait,
quelque chose de normal.
On ne se pose pas la question pourquoi va-ton lcole? , parce que la rponse vidente
est quon veut un diplme, et les questions se
transforment en: quel diplme? De quelle
cole? En combien de temps, 2 ans, 3 ans, 5
ans ou plus? Quel est le prestige du diplme,
quelle est la supriorit de lcole qui le
dlivre? On ne se pose pas la question pourquoi veut-on un diplme? , parce que la
rponse flagrante est quon veut du travail, et
les questions se transforment en: quel
employeur? Quel salaire? Combien dheures
de travail par semaine? Quelles perspectives
dvolution? Quand est-ce quon devient
chef? Il y a de vieux mtiers, de vieilles
matires. Si on veut tre mdecin ou mathmaticien, il faut composer avec des milliers dannes dhistoire et de faons de faire, il faut pouvoir prouver quon est digne des anciens en
obtenant un diplme dlivr par le jugement
des autres, une sorte de label AOC. Mais il y a
aussi de nouveaux mtiers, de nouvelles faons
de faire. Linformatique aujourdhui est un
domaine naissant. On a la chance de pouvoir
contribuer, chacun sa manire, sa cration,
sa pratique et son dveloppement.

Nous nen sommes


quaux dbuts de
linformatique

Linformatique nen est qu ses dbuts, tout


est encore imaginer. Pour le moment nous
avons numris la faon de travailler du pass.
80 ans aprs la machine de Turing, 40 ans

12

Programmez! a Dcembre 2015

aprs le microprocesseur et 20 ans aprs le


Web, nous continuons dutiliser silicium et
fibres pour pourvoir limagination ancienne.
Mme en utilisant des programmes, on fait de
la comptabilit et du classement lancienne.
On a remplac la machine crire par le traitement de texte mais on crit les mmes textes.
On continue travailler pour un diplme ou un
salaire comme nos parents le faisaient au XXe
sicle. Linformatique cest lart de faire circuler
linformation entre les machines et les hommes.
Les machines, ordinateurs, tlphones, dtecteurs, rcepteurs et metteurs sont partout et
leur prolifration ne fait que commencer.
Linformatique du XXIe sicle, consiste inventer de nouveaux usages, imaginer de nouvelles
faons dutiliser les cbles et les octets.
Avec ses moyens de communication monodirectionnels- livre, presse, radio, tl -, le pass
nous a contraints adopter une posture de
diplm soumis.
Grce linformatique et la communication
rticulaire, nous adopterons - dans lavenir - la
posture de celui qui crit et qui parle, celui qui
fait et agit, depuis partout et nimporte quel
moment. Nous serons celui qui facilite, permet
et connecte, nous serons les inventeurs panouis du nouveau monde.
Quand Marc Andreessen explique que
Software is eating the world, il est en train
de parler de lmergence de ce monde nouveau, libr des contraintes matrielles imposes par lindustrie, lcole, la centralisation et
la hirarchisation. Un monde o les possibilits
et les valeurs se crent grce aux logiciels et
aux changes entre individus facilits par des
machines. Ce nouveau monde nest pas un
monde de consommateurs passifs mais un
monde de producteurs actifs qui schangent
leurs services, leurs savoirs, leurs comptences.

Quest-ce quon apprend


lcole?

Quest-ce qui peut tre enseign?


Certainement pas limagination, la crativit,
linventivit. Au mieux, vous aurez un prof comptent et un environnement sympa pour
apprendre linformatique du pass, celle quon
connait dj, celle qui simule le fonctionnement
du pass avec les processeurs et les disques
durs, celle qui exploite les vieilles ides.
Vous pourrez apprendre un ou plusieurs langages de programmation, vous serez assn

avec la mythologie de linformatique, des algorithmes, de lorient-objet, des design patterns, de lUML, du SQL, de TCP/IP, et de
NoSql pour faire moderne.
Vous aurez peut-tre un cours sur lagilit, mais
il sera dlivr magistralement, une heure donne, dans une salle donne; vous serez jug,
not et ventuellement diplm sur lagilit
mais vous ne laurez pas pratique. La bureaucratie, les feuilles de prsence, les excuses
dabsence, les devoirs et les dates de remises
seront sur le chemin de votre apprentissage.
Ce processus est tout sauf agile et il vous faudra beaucoup de confiance en vous pour ne
pas cder et ne pas vous faire imprgner par
cette ducation implicite. Education qui vous
prpare pour le monde du pass.
Vous napprendrez pas dvelopper et imaginer les logiciels de demain, ceux qui feraient de
vous un acteur du nouveau monde.
Cela, vous le ferez malgr vos diplmes, vous
le ferez dautant plus facilement que vous ne
serez pas abim par vos diplmes et les
besoins du pass, vous le ferez parce que vous
aurez hte de crer le futur, parce que a vous
amusera.
Pour prserver la motivation, pour prserver la
spontanit, pour prserver la confiance et le
fun, Peter Thiel a lanc en 2011 un programme
baptis 20 under 20 (http://thielfellowship.org).
Il slectionne sur dossier 20 jeunes de moins
de 20 ans dots d'un talent exceptionnel pour
les nouvelles technologies, et leur donne chacun 100 000 dollars sur deux ans pour les aider
monter une start-up, une ONG ou un projet
de recherche. A une condition : qu'ils abandonnent leurs tudes.
Nos amisGates, Jobs, Zuckerberg, Dell, Allen,
Dorsey, Williams, Koum, Niel ou encore Zola,
Guitry, Malraux, Brassens ont russi sans diplme. Dautres comme Bezos, Kalanick, Chesky,
Page, Brin ont russi avec diplme mais pas
grce leur diplme.
On peut croire que ces clbrits sont des
exceptions. Mais ce qui est exceptionnel, cest
leur russite. Il y a beaucoup dautodidactes,
passionns et comptents qui russissent leur
vie sans faire de bruit. Certes, aujourdhui et
particulirement en France, le pdigre scolaire
sert encore slectionner, trier et classer les
futurs employs - ce terme ne vous embarrasse-t-il pas? -, mais plus pour longtemps. Les
temps changent, les mtiers changent, les relations au travail changent, il est donc temps de

013_191 18/11/15 21:58 Page13

Un pack pour bien dmarrer avec Arduino


Programmez! vous propose un kit de dmarrage comprenant une carte Arduino Nano et les composants
essentiels (cran LCD souder, LED, rsistances, moteur, planche pain, etc.).

SEULEMENT
30 PACKS
DISPONIBLES!

35
+ 4 de frais
de logistique*

CE PACK COMPREND:
a
a
a
a
a
a
a

1 carte compatible Arduino Nano (version CH340 driver), avec cble USB**
1 cran LCD (headers non souds)
1 photorsistances
1 capteur de temprature DS18B20
3 boutons poussoirs
15 LED
18 fils

a
a
a
a
a
a
a
a

1 planche pain
1 capteur HC-SR04
1 buzzer
1 moteur SG-90
1 lot de rsistances (diffrentes valeurs)
1 lot de headers
2 LED infrarouge (1 metteur / 1 rcepteur)
1 clip pour pile 9V

Commandez ds aujourdhui sur le site internet : www.programmez.com


* Le pack est disponible uniquement pour la France.

** Cette version nest pas compatible avec OS X. Test avec Arduino IDE et Visual Micro ( installer sur Visual Studio) sur Windows 10.
Pas de documentation incluse. Vous trouverez facilement des tutoriels de dmarrage sur le web. Plusieurs livres Arduino disponibles chez ENI, Eyrolles,
Dunod. Des tutos seront proposs sur www.programmez.com courant dcembre 2015.
Les expditions se feront partir du 1er dcembre 2015.
Programmez! a Dcembre 2015

13

006_016_191 18/11/15 21:57 Page14

se prparer changer de mentalit et de contribuer au futur, et a cest une affaire prive,


aucune cole ne vous lapprendra.

Accessibilit des outils et de


linformation

Par ironie du sort, un des domaines les plus fortement mins par les nouvelles manires de
faire, cest le domaine de lducation.
La technologie, les MOOC, les Meetup, les ressources en ligne, les moteurs de recherche, les
communauts de techniciens comptents
comme stackoverflow, les confrences techniques en ligne, le Cloud, les outils de dveloppements gratuits, et mme les cours classiques
des universits du monde entier Ce dont on a
besoin pour apprendre, pratiquer et samliorer
en informatique est disponible en ligne.
Avec linformatique, nous pratiquons une activit
davenir, une activit qui dans un certain sens
nexiste mme pas clairement aujourdhui. Cest
une activit de crateurs, une activit pour ceux
qui se projettent dans linconnu pour imaginer le
monde de demain.
Linformatique est en train de changer la socit,
comme les routes et lindustrie lont fait leur

poque. Sauf quau lieu de contraindre et sparer, elle libre et connecte, au lieu de favoriser la
comptition et la proprit, elle favorise la collaboration et le partage. La plupart des mtiers de
demain nexistent pas aujourdhui, aucun des
diplmes daujourdhui naura de valeur demain.

March du travail

Quand on cherche en lignetravailler sans


diplmes, part les annonces de formations,
on tombe sur des articles qui parlent de travailler sans comptences ou travailler sans
qualification. Cela montre que le march du
travail est encore assez passiste, du moins en
France. Nanmoins, comme je lai soulign ici,
les temps sont en train de changer: le bouillonnement des startups, la prolifration des hackathons, les sites pour freelances prsentent des
opportunits nouvelles pour russir sans diplme en autodidacte. Etre autodidacte veut dire
que vous construirez vos comptences selon
vos envies, selon les opportunits que vous
rencontrerez, selon le rythme qui vous conviendra. La meilleure faon dapprendre cest de
faire, et il y a un march pour la ralisation
informatique en freelance pour tous les niveaux

de comptences. La question poser cest:


voulez- vous passer 2, 3, 5 ans de votre vie
dans une cole pour dcrocher un diplme
avant dtre autoris faire, ou vous voulez
commencer apprendre en faisant?
Dans le premier cas vous aurez un diplme,
peu dexprience et vous aurez subi les
contraintes de lcole. Dans le second cas vous
naurez pas de diplme, vous aurez plus
dexprience, vous aurez suivi vos envies et
probablement vous aurez gagn un peu
dargent en faisant.
La mentalit du pass, cest de vivre avec les
habitudes et les craintes du pass, cest penser
que demain sera comme hier, et rpter les
crmonies et incantations, en esprant que a
marchera encore. Bien sr que a marchera, a
marchera et a reproduira ce quon connait, le
pass et sa mentalit. Abandonnez-la, elle ne
mne nulle part! Choisissez ce qui vous plat et
commencez le faire. Faites-le pour vous ou
pour dautres, en faisant vous deviendrez de
plus en plus comptent, vous construirez petit
petit votre rputation. Vous aurez une attitude
agile envers vous-mme.

00101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10
110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00
110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111
110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001
0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101
0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110
011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110
10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110
00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001
0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101
0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110
011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110
10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110
00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001
0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101
0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110
00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10
110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00
110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111
110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001
0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101
0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110
011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110
10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110
00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001
0000111 110 00Cl
110USB
10 110
011000101
0001
0000111 110 Test
00 110sur
10 Linux,
110 011000101
2 Go.
Photo non
contractuelle.
OS X, 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101
0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110
* tarif pour l'Europe uniquement. Pour les autres pays, voir la boutique en ligne
Windows. Les magazines sont au format PDF.
011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110
10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110
00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001
0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101
0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 011000101 0001 0000111 110 00 110 10 110 0110 00101 0001 0000111 110 00 110 10 110

Tout PROgrammez!
sur une cl USB

29,90 *

Tous les numros de Programmez! depuis le n100.

Commandez directement sur notre site internet : www.programmez.com

14

Programmez! a Dcembre 2015

15 abov2-191_191 18/11/15 22:00 Page13

Tous les mois, faites le plein de codes

Abonnez-vous
Nos
classiques

Nos offres ftes


CPL Devolo dLAN 550

111 numros
an

49

222 numros
ans

79

..............................

cl USB

......................

+ Les anciens numros


disponibles
+ 1 numro vintage de
Programmez!

PDF
30 (*)
1 an - 11 numros
..................

(*) Souscription sur le site internet

1 anp 64,90 *
2 ansp94,90 *

Etudiant
39
1 an - 11 numros
......

Inclus 1 kit CPL Devolo dLAN 550, 1 cl USB contenat tous les
n de Programmez! depuis le n100, les anciens numros
encore disponibles et 1 numro vintage ! Quantit limite.
Cette offre peut s'arrter tout moment.

Tarifs France mtropolitaine

(*) Valeur du CPL 79,90 - Valeur cl USB 29,90 - Frais logistiques : 15,90

Vous souhaitez abonner vos quipes ? Demandez nos tarifs ddis* : redaction@programmez.com (* partir de 5 personnes)

Toutes nos offres sur www.programmez.com

Oui, je mabonne

ABONNEMENT retourner avec votre rglement :


Service Abonnements PROGRAMMEZ, 4 Rue de Mouchy, 60438 Noailles Cedex.

n Abonnement 1 an au magazine : 49

Offres ftes : Programmez + kit CPL dLAN 550


+ Cl USB+ anciens n + 1 n vintage

n Abonnement 2 ans au magazine : 79

n Abonnement 1 an : 64,90
n Abonnement 2 ans : 94,90
Entreprise : I___I___I___I___I___I___I___I___I

Prnom : I___I___I___I___I___I___I___I___I___I___I___I___I___I

Fonction : I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I

Nom :I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I

Adresse : I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I
Code postal : I___I___I___I___I___I Ville : I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I

email indispensable pour l'envoi d'informations relatives votre abonnement


E-mail : I___I___I___I___I___I___I___I___I___I___I___I___I___I___I
n Je joins mon rglement par chque lordre de Programmez !

@ I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I___I
n Je souhaite rgler rception de facture

* Tarifs France mtropolitaine

PROG 191

Photocopie de la carte d'tudiant joindre


Offre limite, valable jusquau 31 dcembre 2015

n M. n Mme n Mlle

n Abonnement tudiant 1 an au magazine : 39

006_016_191 18/11/15 21:57 Page16

De l'cole l'entreprise
Quand on fait des tudes, notre
principale proccupation est
notre orientation. Il faut choisir
une cole, quelle soit publique
ou prive, trouver un
appartement si elle est loin de
chez nous, vrifier que lon peut
y accder avec nos prcdents
diplmes, et ventuellement
passer les divers entretiens
et/ou concours pour pouvoir y
entrer. Et vous pouvez me croire
si vous ntes pas encore pass
par l: ce nest pas une tche
facile! Et le choix est encore
plus ardu (tout du moins cest
limpression que cela me
donne) dans le domaine de
linformatique.
Kvin Sibu
Mail: ksibue@gmail.com
Site web: http://www.kevinsibue.com
Contrairement beaucoup de mtiers, le
domaine de linformatique reste assez nouveau
dans lducation. Par consquent les coles ne
sont pas ncessairement nombreuses
notamment dans certaines rgions. Qui plus
est, il existe une multitude de mtiers dans
linformatique, chacun disposant de son propre
cursus. Jai t personnellement confront ce
problme, et a trs tt, ds mon entre en
1re. Comme vous le savez srement en fin de
seconde, les lves doivent choisir un BAC
parmi de nombreuses possibilits: S, ES, L,
STG, etc.
Mon plan au dpart tait de passer un BAC
scientifique, dans le but de continuer sur un
BTS informatique. Cependant il sest avr
quune telle orientation pouvait tre
dangereuse si je souhaitais continuer dans
ce domaine. Tout du moins suivant les tudes
suprieures que je souhaitais effectuer. Alors
aprs rflexion, jai choisi de faire une premire
STG, qui se trouvait tre prioritaire pour le BTS
que je souhaitais. Mon premier choix tait fait,
et sans le savoir, il allait dfinir une grande

Quentin Metzler, Thomas Jaussoin, Nicolas Dominati et Olivier Berni et Gregory Lussiana (non prsent sur la photo)
partie de mon avenir scolaire.
Mon second choix sest effectu en terminale,
o jai pu choisir le BTS SIO (Service
Informatique aux Organisations), puisqu
cause de mon prcdent choix, les DUT ne
mouvraient que difficilement leurs portes.
Aprs avoir eu mon BTS haut la main, un
troisime choix se prsentait moi: continuer
mes tudes ou chercher du travail. Jai choisi la
premire option, ce qui sous-entendait alors de
trouver une nouvelle cole pour faire ma
troisime anne (licence informatique).
Et cette fois-ci jai prfr morienter vers une
cole proposant lalternance dans une
entreprise pendant la formation. Je me suis
tourn vers Ecoris, une cole prive, implante
en Rhne-Alpes, proposant une multitude de
formations, dont la licence Concepteur de
Systme dInformation (pour la premire fois
cette anne). Mais qui dit alternance, dit
entreprise. Je me suis donc mis la recherche
dune socit susceptible de me prendre en
CDD durant la priode de ma formation. Aprs
quelques recherches, jai fini par trouver
Lunabee, une startup dune dizaine de
personnes, ditrice de ses propres logiciels
(oneSafe et Locky par exemple), proposant
aussi le dveloppement de logiciels sur mesure
pour ses clients.
Jai donc commenc cette nouvelle anne
scolaire la fois lcole, mais aussi en tant
quemploy chez Lunabee. Mais pourquoi ai-je
choisi ce type de cursus? Eh bien la rponse
est assez simple: je voulais travailler, faire
quelque chose de concret. Qui plus est,
lalternance possde un certain nombre
davantages non ngligeables notre poque,

comme notamment les annes dexprience.


On nous demande souvent plusieurs annes
dexprience pour intgrer une entreprise.
Mais difficile quand on sort tout juste de
lcole. Lalternance me permet de rpondre
cela. Mais galement dacqurir un mode de
travail que lon ne peut apprendre quen
entreprise. Et pour terminer, apprendre des
technologies que je ne pourrais jamais voir
lcole, par exemple le dveloppement pour
iOS avec Objective-C ou Swift.
Je suis donc une sorte de double formation
qui se complte. Chose qui aurait t difficile,
pour ne pas dire impossible sans lalternance.
Mais a me permet aussi de dcouvrir ce
quest vraiment le mtier de dveloppeur dans
une entreprise quand on est impliqu dans
celle-ci. Et pour tous ceux et celles qui nont
pas encore pu dcouvrir ce monde, je vous le
dis, cest trs diffrent de ce que lon nous
apprend lcole, et galement trs diffrent
des ides prconues que lon peut avoir.
Mais il me reste encore et toujours la mme
question qui va se poser moi: dois-je
continuer mes tudes aprs ma licence? Et si
je continue quelles sont mes options?
vrai dire, la rponse reste assez confuse pour
moi. Aprs tout, comme dit mon tuteur: Peu
importe ton niveau dtude, en tant que
dveloppeur, que tu casses du C# ou du Java
ou du Swift, a ne compte pas. Et je dois bien
avouer quil a raison. Alors je dois maintenant
me poser la question suivante: est-ce que je
veux rester dveloppeurou monter en grade
pour devenir chef de projet ou plus encore? Eh
bien pour ne rien vous cacher, je ne sais pas,
tout du moins pas encore
u

u La newsletter hebdo : Abonnez-vous, cest gratuit ! www.programmez.com


16

Programmez! a Dcembre 2015

017_191 18/11/15 22:02 Page17

Les bnfices de l'inner sourcing pour l'entreprise


Sophie Gautier,
spcialiste coordination et
animations communauts
chez inno3
Ce qui caractrise l'open source, ce ne sont
pas seulement les licences ou l'ouverture et
la mise disposition du code, mais
galement le mode de fonctionnement de ses
projets. Nous entendons par l, tant les
processus de dveloppement que la
gouvernance, tout autant que les processus
d'apprentissage et le partage. Si celui-ci n'est
pas uniforme selon les communauts, il
prsente cependant une base qui peut tre
modlise et adapte en fonction de
l'environnement dans lequel il est utilis.
L'inner sourcing reprend les points cls des
communauts open source, dans sa
dfinition et sa mthodologie, afin de les
appliquer en interne l'entreprise ou
l'organisation. travers la culture, les
pratiques et la mthodologie telles
qu'utilises et appliques dans les projets
open source, elle va donc s'appuyer surla
collaboration, la transparence, le mrite,
l'autonomie. Ce dernier point tant un des
points cruciaux qui rend l'application de
l'inner sourcing parfois complique tant il
demande une rforme complte de la culture
et de la pense du modle de l'entreprise.
On va tout d'abord s'appuyer sur la
collaboration entre les acteurs car elle permet
de gagner du temps entre chaque version de
dveloppement. En bnficiant du regard et
de l'change de plusieurs intervenants, cela
permet d'optimiser donc de rduire les cots
de dveloppement et d'amliorer la scurit.
Cette collaboration est rendue possible par la
transparence des processus, ceux-ci tant
accessibles l'ensemble des participants.
Toutes les dcisions, les discussions, ainsi
que les tapes de la vie du projet doivent tre
mises disposition de tous. Cela offre ceux
qui prennent le projet en cours d'avoir accs
au mme niveau d'information que ceux qui
sont dj prsents depuis le dbut. De mme
tous les outils doivent tre accessibles. Cela
permet de maintenir une culture et une cocration entre les quipes laissant place un
terrain fertile pour l'innovation au sein de
l'entreprise. Cela favorise galement un
recrutement qualitatif en tant plus attractif et
une fidlisation des talents en interne.

Ce partage permet une amlioration de la base


de connaissances des individus, une mise en
commun des mthodologies et une
modlisation des processus travers les
quipes ainsi qu'un brain storming permanent
appelant une plus grande crativit. Enfin
l'autonomisation des acteurs permet une
meilleure priorisation des travaux par les
quipes, le dveloppeur travaille sur ce qu'il
prfre, cela encourage la mritocratie; par
exemple, une reconnaissance par rapport aux
contributions relles, les tches de gestion s'en
trouvent donc allges. Cette
responsabilisation rend l'entreprise attractive
pour les employs prsents et futurs. Prendre
des responsabilits, c'est s'investir, rechercher
les meilleures opportunits, tre cratif,
performant et se sentir plus en prise avec la
tche accomplir, la rendant ainsi plus
intressante.
Si l'on reprend les points cls des projets open
source, la transparence est une des vertus
premires. travers des discussions ouvertes,
des dcisions accessibles, un code et une
documentation ouverts, elle permet d'installer
la confiance entre les participants, une
meilleure gestion des ressources internes, leur
rpartition tant plus aise et plus facile
monitorer, d'assurer une meilleure accessibilit
et donc d'abaisser le ticket d'entre du
dveloppement. En donnant aussi l'accs au
client la vie du projet, il peut ainsi valuer sa
qualit ainsi que celle du code.
Les mthodes de dveloppement Agile ont
revisit la faon dont les processus sont mis en
place pour les remettre en perspective. Mais
cela ne suffit pas, il faut aussi modifier la
culture d'entreprise. Certains environnements
de dveloppement ne ncessitent plus l'criture
de spcifications dtailles par exemple, le plus
souvent rendues inutiles une fois le code
implment. Garder des traces au sein de
releases notes, de blogs ou d'articles qui
donnent tout de mme accs l'information et
en mme temps valorisent leur auteur. L'ide
est d'abaisser au maximum les contraintes
quand elles ne sont pas ncessaires, cela va du
niveau de dtails d'un rapport d'activit la
possibilit d'installer les outils ncessaires
son travail sans passer par une srie
d'autorisations.
La simplification de la chane dcisionnelle
augmente au maximum la ractivit des
quipes. Les personnes les plus qualifies lors

de l'excution d'une tche sont en gnral


rapidement identifies au sein d'une quipe. Ce
sont elles qui seront les mieux mme de
dcider pour l'quipe et de requrir un
consensus au sein de celle-ci. Ce consensus
est important, mme si la justification est
diffrente pour chacun, il faut que la dcision
soit collgiale. De mme que cette
simplification dcisionnelle amne de la
flexibilit, elle permet l encore de
responsabiliser les acteurs, et par l, de les
valoriser. Enfin, elle permet tout un chacun de
se perfectionner, d'aller plus loin dans ses
connaissances en n'ayant recours au mentoring
que de faon sporadique.
Ceci est rendu possible en maintenant en
permanence les flux de communication. La
communication est cruciale dans tous projets,
c'est elle qui permet la coordination et garde la
cohsion du groupe ainsi que la confiance
entre les acteurs. Il n'y a rien qui doit venir par
surprise et personne ne doit se sentir isol
dans son projet. Du fait du niveau de
responsabilit endoss par chacun, la
confrontation et la mise en commun des ides,
dcisions, etc. sont trs importantes. Pour que
cette communication puisse garder sa fluidit, il
existe diffrents outils qui permettent de
communiquer soit en diffr soit en instantan.
D'autres outils permettent le partage de
l'information et sa mise jour collaborative.
Tous les processus, qu'ils soient de
management de projet, d'industrialisation du
produit, doivent tre documents, partags et
accessibles tous, quelle que soit sa place.
La difficult de l'inner sourcing rside dans le
fait qu'elle entrane un changement profond
dans la reprsentation du monde de
l'entreprise. L'un des points les plus importants
notamment porte sur le comportement social et
l'absence de hirarchie. La notion
d'galitarisme est centrale et c'est sur elle que
s'appuie l'ensemble des principes de
production.
La considration que tous les tres humains
sont gaux dans leur statut social gnre une
dcentralisation des pouvoirs. Les dcisions
sont alors bases sur un consensus et tout le
monde part sur un pied d'galit. Les retours
d'exprience sont valoriss et les diffrents
points de vue enrichissent la prise de dcision.
Enfin, cela permet de casser les barrires de
'classe' dans les contributions.

Programmez! a Dcembre 2015

17

018_020_191 18/11/15 22:03 Page18

Je pratique le C++

Partie 5/5

Nous vous proposons une srie darticles sur la pratique de C++ pour que vous puissiez tous vous
y mettre. Ce mois-ci on aborde la librairie Boost du site www.boost.org. Boost est une
communaut de programmeurs C++ dont le but est de pousser les librairies quils font vers la
standardisation C++. Boost est une librairie C++ portable. Vous pouvez lutiliser avec Visual C++
sur Windows et GCC ou CLang sur Linux.
Christophe PICHAUD | .NET Rangers by Sogeti
Consultant sur les technologies Microsoft
christophepichaud@hotmail.com | www.windowscpp.net

Comment obtenir Boost?

Trs simplement en allant dans la rubrique


download du site et vous tlchargez un zip
de 120 Mb ou un targz de 80 Mb. Vous dcompressez votre archive et vous
tes presque prt. La dcompression vous donne une arborescence de
430 Mb. Il y a normment de documentation HTML cest la raison pour
laquelle la taille du dossier est consquente.

Compilation de Boost

Malgr le fait que Boost soit en majorit un ensemble de templates et de


fonctions inline - donc juste les fichiers den-ttes suffisent - il y a des librairies quil faut compiler.
La premire chose faire est de lancer la compilation de la librairie. Cela se
fait en deux tapes. Premirement, il faut compiler le custom Make de
Boost qui se nomme Bjam. Il faut lancer bootstrap.bat. Maintenant que
Bjam est compil, on va builder la librairie avec notre chane de compilation
particulire une plateforme. Je travaille avec Visual Studio 2013 donc
voici ma ligne de commande:
bjam toolset=msvc-12.0 variant=debug,release threading=multi link=shared
Je fais une compilation en debug et en release et indiquant que je veux une
librairie multi-thread et en mode dynamique (DLL). La compilation prend un
peu de temps, mais disons quen 15 minutes cest termin.

sait srialiser et d-srialiser des classes en format binaire ou XML sans


forcer. Cette librairie permet de srialiser des containers, ce qui vitera de
parcourir nos diffrentes collections pour srialiser des lments simples.
Par contre, nous devons faire attention une collision de nom dans lespace de noms disponible. Je mexplique Boost srialise les boost::string,
les boost ::vector & co Ce qui veut dire quil va falloir transvaser nos
objets crits avec la STL standard dans des objets Boost compatibles
moins que notre application soit crite compltement avec Boost. Cest un
choix darchitecture! Nous allons partir sur une application que jai crite
pour ma fille en 2012. Il sagit dune application de dessin o lon dispose
des lments prdfinis sur une page comme des images, des rectangles,
des ronds, des triangles, etc. Cette application a permis ma fille de 8 ans
lpoque de savoir manier la souris et de jouer avec le Ribbon pour changer les caractristiques des objets (couleur, paisseur de traits, etc.).

Le rsultat de la srialisation XML

Commenons par la fin Le dessin est le suivant: Fig.1.


Le but du jeu est de sauvegarder ce dessin sous forme de document XML Fig.2.
Ouvrons la documentation de Boost.Serialization pour prendre la chose du
bon ct et pour arriver au rsultat ci-dessus. Si vous avez lil, vous verrez que lapplication que je vous propose est ralise avec les Microsoft
Foundation Classes (MFC) car elle me permet de faire un joli Ribbon et de
mettre en place le support du Document/Vue qui me permet de faire une
application qui charge/enregistre mes donnes. Bref, MFC rocks. Je crois
dailleurs quon va refaire une srie Je Pratique le C++ sous Windows en 5
pisodes pour que vous puissiez dvelopper vous aussi des applications
qui rockent! On verra revenons nos moutons. Le XML. Boost.Serialization fonctionne avec ce que lon appelle une Archive dans laquelle on a
accs des donnes. Il faut nourrir larchive avec des donnes. Jai donc
une classe dobjets dessiner et des objets. Le modle de donnes est
constitu de 2 classes: CSimpleShape et CShapeCollection.

Introduction Boost.Serialization

Maintenant que nous avons list lensemble des librairies disponibles dans
Boost, nous allons passer au code! Examinons une librairie trs utile qui

Fig.1
Fig.2

18

Programmez! a Dcembre 2015

018_020_191 18/11/15 22:03 Page19

La classe CSimpleShape

Cette classe contient les proprits suivantes:


public:
wstring m_name;
wstring m_id;
string m_rect;
long m_type;
long m_shapeType;
wstring m_caption;
wstring m_text;
long m_x1;
long m_y1;
long m_x2;
long m_y2;
int m_colorFillR;
int m_colorFillG;
int m_colorFillB;
int m_colorLineR;
int m_colorLineG;
int m_colorLineB;
bool m_bSolidColorFill;
bool m_bColorLine;
bool m_bColorFill;
};
BOOST_CLASS_VERSION(CSimpleShape, 1)

La classe CShapeCollection

Cette classe contient la liste des elements :


public:
vector<boost::shared_ptr<CSimpleShape> > m_shapes;
};
BOOST_CLASS_VERSION(CShapeCollection, 1)

Cest un vecteur de CSimpleShape tout simplement Pour que ces lments


soient stocks sous forme de fichier texte, binaire ou XML il faut prciser
quelques petites choses dans les classes. Il faut spcifier cela en private:
private:
friend class boost::serialization::access;
template<class Archive>
void save(Archive & ar, const unsigned int version) const
{
ar & BOOST_SERIALIZATION_NVP(m_shapes);
}
template<class Archive>
void load(Archive & ar, const unsigned int version)
{
ar & BOOST_SERIALIZATION_NVP(m_shapes);
}
BOOST_SERIALIZATION_SPLIT_MEMBER()
Cette partie de code nous montre le template dfinir. Il sagit dune fonction

template load et save qui travaille sur une Archive. La syntaxe pour enrler
une donne dans larchive se fait au travers de loprateur &. Cette partie de
code enregistre le vecteur dlments. Mais pour que cela fonctionne, il faut
aussi que le classe CSimpleShape enregistre ses lments dans larchive.
template<class Archive>
void save(Archive & ar, const unsigned int version) const
{
// ar & name;
// ar & id;
ar & BOOST_SERIALIZATION_NVP(m_name);
ar & BOOST_SERIALIZATION_NVP(m_id);
ar & BOOST_SERIALIZATION_NVP(m_rect);
ar & BOOST_SERIALIZATION_NVP(m_type);
ar & BOOST_SERIALIZATION_NVP(m_shapeType);
ar & BOOST_SERIALIZATION_NVP(m_caption);
ar & BOOST_SERIALIZATION_NVP(m_text);
ar & BOOST_SERIALIZATION_NVP(m_x1);
ar & BOOST_SERIALIZATION_NVP(m_y1);
ar & BOOST_SERIALIZATION_NVP(m_x2);
ar & BOOST_SERIALIZATION_NVP(m_y2);
ar & BOOST_SERIALIZATION_NVP(m_colorFillR);
ar & BOOST_SERIALIZATION_NVP(m_colorFillG);
ar & BOOST_SERIALIZATION_NVP(m_colorFillB);
ar & BOOST_SERIALIZATION_NVP(m_colorLineR);
ar & BOOST_SERIALIZATION_NVP(m_colorLineG);
ar & BOOST_SERIALIZATION_NVP(m_colorLineB);
ar & BOOST_SERIALIZATION_NVP(m_bSolidColorFill);
ar & BOOST_SERIALIZATION_NVP(m_bColorLine);
ar & BOOST_SERIALIZATION_NVP(m_bColorFill);
}
Le code du load et du save est le mme. Larchive sait dans quel sens on
travaille, soit en lecture, soit en criture. Il faut noter que les MFC fournissent une infrastructure similaire avec les oprateurs << et >>; je trouve que
cest plus lisible mon got, mais bon. Pour pouvoir compiler ce code, il
faut disposer des en-ttes suivantes:
#define BOOST_SERIALIZATION_DYN_LINK TRUE
#define BOOST_ALL_DYN_LINK TRUE
#include <boost/smart_ptr/shared_ptr.hpp>
#include <boost/archive/tmpdir.hpp>
#include <boost/serialization/nvp.hpp>
#include <boost/archive/xml_iarchive.hpp>
#include <boost/archive/xml_oarchive.hpp>
#include <boost/archive/text_iarchive.hpp>
#include <boost/archive/text_oarchive.hpp>
#include <boost/serialization/shared_ptr.hpp>
#include <boost/serialization/base_object.hpp>
#include <boost/serialization/string.hpp>
#include <boost/serialization/list.hpp>
#include <boost/serialization/vector.hpp>
#include <boost/serialization/map.hpp>
#include <boost/serialization/utility.hpp>
#include <boost/serialization/assume_abstract.hpp>
using namespace boost;

Programmez! a Dcembre 2015

19

018_020_191 18/11/15 22:03 Page20

Lcriture des donnes

Maintenant que nous avons nos classes qui savent utiliser une Archive,
voyons le code qui donne lordre de faire Load ou Save. Vous allez voir,
cest trs simple:
boost::shared_ptr<CShapeCollection> data(new CShapeCollection());
for( vector<std::shared_ptr<CElement>>::iterator i = m_objects.m_objects.begin() ; i!
=m_objects.m_objects.end() ; i++ )
{
std::shared_ptr<CElement> pElement = *i;
boost::shared_ptr<CSimpleShape> pNewElement(new CSimpleShape());
pNewElement->m_name = pElement->m_name;
pNewElement->m_id = pElement->m_objectId;
pNewElement->m_type = pElement->m_type;
pNewElement->m_shapeType = pElement->m_shapeType;
pNewElement->m_caption = pElement->m_caption;
pNewElement->m_text = pElement->m_text;

for( vector<boost::shared_ptr<CSimpleShape> >::iterator i = data->m_shapes.begin() ; i!


=data->m_shapes.end() ; i++ )
{
boost::shared_ptr<CSimpleShape> pElement = *i;
//AfxMessageBox(pElement->m_name + " " + pElement->m_id);
std::shared_ptr<CElement> pNewElement = CFactory::CreateElementOfType((Element
Type)pElement->m_type,
(ShapeType)pElement->m_shapeType);
pNewElement->m_name = pElement->m_name.c_str();
pNewElement->m_objectId = pElement->m_id.c_str();
pNewElement->m_caption = pElement->m_caption.c_str();
pNewElement->m_text = pElement->m_text.c_str();
pNewElement->m_pManager = this;
pNewElement->m_pView = pView;
CPoint p1;
CPoint p2;
p1.x = pElement->m_x1;
p1.y = pElement->m_y1;
p2.x = pElement->m_x2;
p2.y = pElement->m_y2;
pNewElement->m_rect = CRect(p1, p2);

CPoint p1 = pElement->m_rect.TopLeft();
CPoint p2 = pElement->m_rect.BottomRight();
pNewElement->m_x1 = p1.x;
pNewElement->m_y1 = p1.y;
pNewElement->m_x2 = p2.x;
pNewElement->m_y2 = p2.y;

int colorFillR = pElement->m_colorFillR;


int colorFillG = pElement->m_colorFillG;
int colorFillB = pElement->m_colorFillB;
pNewElement->m_colorFill = RGB(colorFillR, colorFillG, colorFillB);
int colorLineR = pElement->m_colorLineR;
int colorLineG = pElement->m_colorLineG;
int colorLineB = pElement->m_colorLineB;
pNewElement->m_colorLine = RGB(colorLineR, colorLineG, colorLineB);

pNewElement->m_colorFillR = GetRValue(pElement->m_colorFill);
pNewElement->m_colorFillG = GetGValue(pElement->m_colorFill);
pNewElement->m_colorFillB = GetBValue(pElement->m_colorFill);
pNewElement->m_colorLineR = GetRValue(pElement->m_colorLine);
pNewElement->m_colorLineG = GetGValue(pElement->m_colorLine);
pNewElement->m_colorLineB = GetBValue(pElement->m_colorLine);
pNewElement->m_bSolidColorFill = pElement->m_bSolidColorFill;
pNewElement->m_bColorLine = pElement->m_bColorLine;
pNewElement->m_bColorFill = pElement->m_bColorFill;

pNewElement->m_bSolidColorFill = pElement->m_bSolidColorFill;
pNewElement->m_bColorLine = pElement->m_bColorLine;
pNewElement->m_bColorFill = pElement->m_bColorFill;

data->m_shapes.push_back(pNewElement);
}
std::ofstream xofs(filename.c_str());
boost::archive::xml_oarchive xoa(xofs);
xoa << BOOST_SERIALIZATION_NVP(data);
La variable filename est remplie par louverture dune Common Dialog Windows SaveAs et toute la magie consiste dclarer une xml_archive et utiliser loprateur << pour sauver toutes nos donnes.

La lecture des donnes

La lecture des donnes est calque sur lcriture, on rcupre les donnes
et on les transvase dans la collection qui va safficher lcran:
boost::shared_ptr<CShapeCollection> data(new CShapeCollection());
// load an archive
std::ifstream xifs(filename.c_str());
assert(xifs.good());
boost::archive::xml_iarchive xia(xifs);
xia >> BOOST_SERIALIZATION_NVP(data);
// Clear existing shapes
m_objects.RemoveAll();

20

Programmez! a Dcembre 2015

m_objects.AddTail(pNewElement);
pView->LogDebug(_T("object created ->") + pNewElement->ToString());
}
// Redraw the view
Invalidate(pView);

Conclusion

Lutilisation de Boost et de Boost.Serialization est plutt simple apprhender. La documentation fournie est de bonne facture et les exemples
sont lgion dans la documentation. Lavantage de Boost.Serialization est
que les archives sont portables Donc pour faire du multiplateforme, cest
easy ! Le code complet de lapplication de dessin est disponible ici :
http://ultrafluid.codeplex.com .

Conclusion sur la srie Je pratique C++

Avec cet article, la srie Je pratique le C++ sarrte, mais je vais trouver un
deal avec Programmez pour que nous ayons toujours du C++ dans Programmez.
Tous les logiciels Microsoft sont faits en C/C++ 90% et il ne serait pas normal
de ne pas en parler. Le C++ nest pas mort, loin de l. Avec C++11, le C++ a rajeuni et les standards C++14 et C++17 apportent leurs lots de nouveauts. Stay
tuned comme dirait lautre et bientt pour de nouveaux articles.
u

021_029_191 18/11/15 22:03 Page21

Lunivers Xamarin
Si vous tes au fait du dveloppement mobile, le nom de Xamarin vous dit forcment quelque
chose. Xamarin est une plateforme complte pour faire du dveloppement multiplateforme, partir
dun mme code, crit en C#. Il est tout naturellement trs orient mobile et a rapidement su
devenir sans aucun doute lenvironnement multiplateforme de rfrence.
Xamarin nest pas un nouveau venu sur le march. Il hrite en ralit
dun projet cr en 2001, le projet Mono. Mono tait une alternative
ouverte la pile .Net / C# de Microsoft. Le leader du projet tait Miguel
de Icaza. Depuis Xamarin est n, de la volont de deux hommes:
Miguel de Icaza et Nat Friedman, de proposer des outils et des solutions packages, adressant le march mobile multiplateforme, aux
entreprises et dveloppeurs. La socit compte environ 250 employs.
Comme vu plus haut, Xamarin permet de crer des applications iOS,
Android, OS X partir dun seul code C#. La plateforme Windows tant
adresse par Microsoft, elle est toutefois concerne par Xamarin si vos
IHM sont dveloppes en Xamarin.Form pour, ainsi, avec un seul code,
adresser les trois plateformes. Lenvironnement transforme et gre les
appels et les API selon la plateforme cible avec 100% de code en C#.
100% des API mobiles sont accessibles laissant ainsi aucune infaisabilit. Toutefois certaines limites sont poses par Xamarin.Form. Limites qui
peuvent tre leves comme le dcrit un de nos articles plus loin. 100% de
code crit en C# ne signifie pas 100% de code rutilisable. Les spcificits de chacune des plateformes impactant naturellement ce niveau de
rutilisation; lditeur annonce environ 75 % du code pouvant tre partag
sur les diffrentes plateformes sans aucune limitation.
Ce niveau de rutilisation grimpe si vos IHM sont bties sous
Xamarin.Form acceptant ainsi certaines limitation. Xamarin gnre des
applications natives. A chaque fois, Xamarin dveloppe et fournit une
couche spcifique chaque environnement.
Enfin, en dehors du Framework Xamarin, ce qui semble indispensable
cest de disposer dune chane et dune filire de dveloppement complte. Les complments tels que TestCloud ou les offres de backend mobile
de Windows Azure, sont essentiellement des atouts pour vos dveloppements mobiles. Dans ce dossier Xamarin, nous allons parler de
Xamarin.Mac, Xamarin.Forms et de trucs et astuces connatre.

Les diffrents outils

Xamarin a beaucoup volu et propose dsormais de nombreux outils.


Les principaux sont:
Outils
Xamarin.iOS

Usages
Pour construire et gnrer des apps iOS. Supporte le SDK iOS,
WatchKit. iOS 9 en cours de support. Ncessite XCode et iOS SDK.
Xamarin.Android
Pour gnrer des apps Android.
Xamarin.Mac
Pour les applications OS X
Xamarin Studio
IDE maison disponible sur OS X et Windows. Permet de crer
et de grer les projets de dveloppement.
Xamarin for Visual Studio Intgration avec Visual Studio (uniquement Windows)
Xamarin Test Cloud
Environnement de tests la demande. Pour tester rapidement
ses Apps mobiles. Supporte +1800 terminaux.
Xamarin Insights
Monitoring temps rel des applications
Xamarin.Forms
Outil pour construire des interfaces natives pour les diffrentes
plateformes partir dun seul projet. Cette brique est gratuite
pour Windows car nous navons pas besoin de Xamarin
pour la filire Microsoft.
Xamarin Platform regroupe Xamarin.iOS / Xamarin.Android et Xamarin.Mac.

La question qui fche:


combien cote Xamarin?

Rgulirement, les dveloppeurs reprochent lditeur ses tarifs. Il faut


avouer que pour un dveloppeur indpendant, il y a intrt rentabiliser
les dveloppements. Actuellement, lditeur propose 3 souscriptions
diffrentes: Indie (pour les indpendants), Business (essentiellement
petits diteurs et petites structures), Entreprise.
Les tarifs sont par dveloppeur ET par plateforme.

Tarif
Xamarin Studio
Dploiement Stores
Xamarin.Forms
Xamarin Test Cloud Access
Intgration Visual Studio
Possibilit dinclure Xamarin.Mac
Xamarin Universit

Indie
25 $ / mois
inclus
oui
oui
oui
non
non
+ 1995 $ / anne

Business
999 $ / anne
inclus
oui
oui
oui
oui
oui
+ 1995 $ / anne

Enterprise
1899 $ / anne
inclus
oui
oui
oui
oui
oui
+ 1995 $ / anne

Cot pour 1 dveloppeur (en entreprise) incluant iOS et Android avec la


souscription business:
Cot
999 $
999 $
Soit 1 998 $ par 1 an.

Android (1 dv)
iOS (1 dv)

Vous pouvez commencer sur Xamarin avec la Starter Edition.

Et Test Cloud?

Par dfaut, les 3 souscriptions proposent un quota de tests sur Xamarin


Test Cloud. Vous avez droit 60 minutes, par mois et par dveloppeur.
Si vous avez besoin de tester plusieurs apps et dun temps plus
important, vous devrez choisir une souscription supplmentaire. La
facture peut rapidement tre lourde!

Tarif mensuel
Quotas

Xamarin Universit

Basic
1 000 $
2 apps
200 heures
support mail
1 cours

Professional
5 000 $
4 apps
1000 heures
support ddi
1 cours

Business
8 000 $
10 apps
1600 heures
support ddi
3 cours

Enterprise
12 000 $
20 apps
2400 heures
support ddi
5 cours

Programmez! a Dcembre 2015

21

021_029_191 18/11/15 22:03 Page22

Dmarrer avec Xamarin


La matrise du dveloppement mobile sur diffrentes plateformes est plus ou moins complexe
Vouloir offrir les mmes fonctionnalits aux utilisateurs nest pas en soit le plus difficile, ce sont les
technologies, les outils disponibles dans X ou Y plateforme et leurs SDK.
Andrs Talavera
Depuis larrive de Xamarin, le dveloppement dapplications natives avec
un seul code devient envisageable ! Qui plus est, avec les technologies
Microsoft.
Langage par dfaut
iOS
Android
Natif
Objective-C
Java
Xamarin
C#
C#
Les diffrents langages de dveloppement avec/sans Xamarin

Windows Phone
C#
C#

Prrequis

Xamarin permet donc de dvelopper des applications mobiles sur iOS et


Android depuis votre PC Windows ou de votre ordinateur Mac, avec Xamarin Studio ou Visual Studio.

Note: spcificit pour le dveloppement sur iOS, il est ncessaire de disposer dun Mac avec les
derniers outils de dveloppement installs au pralable
Xcode est disponible depuis lApp Store, le SDK et le simulateur iOS le
sont dans le longlet des tlchargements, disponible dans les paramtres
de lIDE. Pour dvelopper vos applications mobiles depuis Visual Studio,
Xamarin propose des extensions : Xamarin.Platform for Visual Studio.
Cette extension ne sintgre pas dans les ditions Express.
Poste de dveloppement Plateforme Windows Android
PC/Windows
SDK Windows Phone
SDK Windows8
SDK Android
SDK Windows10
JDK Android
mulateurs Android
Xamarin Studio
Mac/OS X
Xamarin.Android

iOS
Xamarin.iOS
Xamarin Build Host
Xamarin Studio
Mac OS X > 10.9.3
Xcode
SDK iOS
Xamarin Studio
Xamarin.iOS
Installations logicielles ncessaires au dveloppement multiplateforme sur Windows et/ou OS X.

Concernant les mulateurs Android, il faudra les tlcharger individuellement


partir dAndroid SDK Manager. Les mulateurs fournis par Google sont trs
lents. Il existe des solutions alternatives, Genymotion, Android Player, etc.

Mon conseil

Dans le but de suivre les bonnes pratiques et de maintenabilit pour vos


applications, il vaut mieux connatre les design patterns suivants: MVVM,
inversion de contrle (IoC), injection de dpendances

Xamarin.Platform

Si vous souhaitez dvelopper une application ne serait-ce que pour une


plateforme, je vous recommande de crer, dans un premier temps, une
PCL (Portable Class Library) qui contiendra le code mtier. Puis, dans un
deuxime temps, un projet par plateforme contenant le code UI et les bindings entre les vues et les ViewModels. MvvmCross ou MvvmLight sont
deux bibliothques tlchargeables dans le gestionnaire de packages
NuGet et permettent une implmentation simple du pattern MVVM. Le
code, comment et document est disponible ladresse Internet suivante: http://bit.ly/gihubAT-XamPlatform-MVVM.

Xamarin.Forms

Information: Les dernires versions de Visual Studio et de Xamarin fournissent des mulateurs
ncessaires.

Si le partage du code de lUI vous intresse, crez un nouveau projet


Xamarin.Forms et implmentez le pattern MVVM comme dans lexemple
prsent mon Github: http://bit.ly/githubAT-XamForm-MVVM.

Installation

Archivage et travail en quipe

Le tlchargement de Xamarin se fait depuis: http://xamarin.com/download.


Un compte Xamarin est ncessaire pour valider une licence valide ou dessai. Linstallateur universel de Xamarin va vous demander de configurer
lemplacement des installations existantes, tlcharger les composants
ncessaires et/ou manquants, puis copier les fichiers dans votre ordinateur.

Dmarrer un nouveau projet

Xamarin propose deux produits pour dvelopper vos applications: Xamarin.Platform et Xamarin.Forms. La principale diffrence entre les deux est
que Xamarin.Forms permet de partager le code de linterface utilisateur,
soit par code, soit de manire dclarative en XAML (juste le langage, ce ne

22

sont pas les mmes contrles que WPF, par exemple). Autre diffrence
notable, Xamarin.Platform ne compile pas dapplications pour les plateformes Windows. vous de faire en sorte de partager le code entre les plateformes mobiles.

Programmez! a
Programmez!
a Dcembre 2015

Si vous devez basculer entre PC et Mac pour dvelopper vos applications


mobiles, il existe un outil pris en charge par Xamarin Studio et Visual Studio : Git. Par habitude des produits et technologies Microsoft, jutilise
Visual Studio Online.

Publier vos applications

Depuis la version7 de Xcode, Apple permet aux dveloppeurs de dployer


leurs applications de test sur leurs priphriques sans avoir besoin dtre
enregistr dans un programme dveloppeurs Apple. Plus dinformations
propos de lenregistrement ladresse suivante: http://bit.ly/Xam-iOS-prov.

021_029_191 18/11/15 22:03 Page23

Dvelopper des applications en C# sur Mac


avec Xamarin.Mac
Lorsque lon souhaite dvelopper des applications sur OS X (Mac) et que lon fait des recherches sur
Internet, la plupart des rponses que lon trouve indiquent quil est ncessaire dutiliser Objective-C,
ou plus rcemment Swift, comme langage de programmation.
Stephane Cordonnier
MVP Office Development
http://blog.beecomedigital.com

Fig.1

Mais si lon est un dveloppeur .NET / C# et que lon


souhaite passer du ct obscur que reprsente le
monde Apple pour nombre dafficionados des technologies Microsoft, alors doit-on ncessairement abandonner son langage de
programmation prfr? Fort heureusement la rponse est non.
Trs en vogue depuis un certain temps pour permettre de dvelopper des
applications mobiles multiplateformes (iOS, Android, Windows), Xamarin
propose galement de pouvoir faire du dveloppement pour OS X grce
sa solution Xamarin.Mac.

Lenvironnement de dveloppement sur Mac

Comme sa dclinaison pour applications mobiles, Xamarin.Mac propose


un environnement de dveloppement sur Mac nomm Xamarin Studio, qui
permet de pouvoir crer diffrents types dapplications allant de la simple
application console (sexcutant dans une fentre terminal) une application native OS X capable dutiliser lensemble des frameworks proposs
par Apple (Foundation, AppKit, CoreData, SceneKit, etc.).
Pour crer une application, il ny a rien de plus simple puisque Xamarin Studio propose un ensemble de modles de projets permettant de rpondre
aux besoins les plus frquents des dveloppeurs Fig.1.
Une fois le projet cr et comme pour tout environnement de dveloppe-

ment qui se respecte, on retrouve une vue de la solution permettant de


retrouver lintgralit des fichiers composant lapplication Fig.2.
La structure cre au sein de Xamarin reprend les paradigmes et lments
tels quils existeraient si lon avait cr la mme application au sein de
Xcode, lenvironnement de dveloppement dApple:
a Utilisation de MVC (Model View Controller);
a Fichiers XIB : Interface graphique (menus, fentres)
a Fichiers CS : Logique application et mtier;
a Fichiers DESIGNER.CS : Gnrs automatiquement pour exposer au
sein de .NET les composants (menus, boutons, listes).
Si lon sattarde plus particulirement sur le fichier MainWindowController.cs (le contrleur principal de lapplication bas sur MVC) cr par lassistant de Xamarin Studio, on retrouve la structure classique dune
application .NET.
using System;
using Foundation;
using AppKit;
namespace Programmez
{
public partial class MainWindowController : NSWindowController
{
public MainWindowController(IntPtr handle) : base(handle)
{
}
[Export("initWithCoder:")]
public MainWindowController(NSCoder coder) : base(coder)
{
}

Fig.2
Programmez! a Dcembre 2015

23

021_029_191 18/11/15 22:03 Page24

public MainWindowController() : base("MainWindow")


{
}
public override void AwakeFromNib()
{
base.AwakeFromNib();
}
public new MainWindow Window
{
get { return (MainWindow)base.Window; }
}
}
}

revenir sous Xamarin Studio, ce dernier dtecte les modifications que vous
avez effectues et synchronise les fichiers *.DESIGNER.CS en consquence pour reflter vos modifications.
Ci-dessous, un exemple dans lequel un bouton a t ajout la fentre
avec interception du clic sur ce bouton:
using Foundation;
using System.CodeDom.Compiler;
namespace Programmez
{
[Register ("MainWindowController")]
partial class MainWindowController
{
[Outlet]
AppKit.NSButton MyButton { get; set; }

Les directives using nous permettent dinclure les namespaces utiliss par
lapplication et lon constate que les frameworks Apple (AppKit et Foundation) ont t encapsuls dans des wrappeurs .NET permettant de pouvoir
manipuler toutes les APIs disponibles sur OS X de manire totalement
transparente au sein du code C#.
Cest notamment le cas pour la classe MainWindowController qui hrite de
NSWindowController, qui reprsente la classe de base de tous les contrleurs de fentres utiliss dans les applications Cocoa.
On remarque galement lattribut [Export("initWithCoder:")] qui permet
dassurer la communication entre le monde .NET et le monde natif Apple
(Objective-C). Cet attribut permet dindiquer que le constructeur de la classe.NET est mapp sur la mthode initWithCoder qui existe en Objective-C.

Cration dune interface graphique

Comme voqu prcdemment, les fichiers XIB reprsentent les lments


dinterface graphique des applications Cocoa. Pour dfinir quoi ressemblera lapplication, il suffit de double cliquer sur un fichier pour basculer
vers lditeur graphique qui permettra dajouter boutons, listes droulantes
et autres zones de saisies dans lapplication.
Une subtilit existe toutefois si vous connaissez Xamarin pour iOS. Alors
quil est possible dditer les interfaces graphiques directement depuis
Xamarin Studio en utilisant des storyboard, ldition des fichiers XIB dune
application Cocoa nous bascule automatiquement sous Xcode. Il est donc
ncessaire davoir quelques connaissances sur le fonctionnement de
celui-ci, notamment pour connecter les contrles et les actions sur ceux-ci,
des lments (IBOutlet / IBAction) qui pourront ensuite tre manipuls au
sein du code Fig.3.
Mais si lon cre linterface graphique sous Xcode, un environnement fait
pour Objective-C et Swift, comment le lien se fait-il avec Xamarin Studio qui
utilise .NETvous demanderez-vous ?
Cest l toute la magie de Xamarin car lorsque vous quittez Xcode pour

Fig.3

24

Programmez! a Dcembre 2015

[Action ("ButtonClicked:")]
partial void ButtonClicked (Foundation.NSObject sender);
void ReleaseDesignerOutlets ()
{
if (MyButton != null) {
MyButton.Dispose ();
MyButton = null;
}
}
}
}
On voit que le bouton nomm MyButton est de type NSButton. Lattribut
[Outlet] permet de faire le lien avec ce qui a t fait dans Xcode (connexion
avec le contrle qui a t nomm MyButton dans lditeur graphique).
La mme chose a t faite concernant le clic sur le bouton avec la
connexion de laction nomme ButtonClicked dclare dans Xcode, sur la
mthode partielle ButtonClicked ct .NET.
Il ne reste dsormais plus qu diter le contrleur pour implmenter la
mthode partielle et effectuer le traitement ncessaire:
partial void ButtonClicked(NSObject sender)
{
MyButton.Title = "Hello World";
}

Partager du code avec ses applications


Windows et/ou mobiles ?

Ce qui fait tout lintrt dune solution comme Xamarin, cest notamment
de pouvoir dvelopper pour de multiples plateformes, aussi bien ordinateurs que mobiles, avec un seul et unique langage et de pouvoir rutiliser
un maximum de code entre ces diffrentes applications.
Xamarin.Mac ne droge pas cette rgle et lon retrouve les mmes mcanismes que sur Xamarin.iOS ou Xamarin.Android pour partager du code
avec son application OS X. Il est ainsi possible de crer et partager du
code via:
a Lutilisation de Class Library
a Lutilisation de Portable Class Library (PCL)
a Lutilisation de Shared Projects
Nous ne dbattrons pas ici des avantages / inconvnients de chacune des
solutions, de trs nombreux articles existent sur ce sujet, mais toutes sont

021_029_191 18/11/15 22:04 Page25

Fig.4

souci particulier avec la cl un norme gain de temps dans les dveloppements.

Aller plus loin

utilisables au sein de votre solution en fonction de vos besoins.


En revanche et en ce qui concerne les interfaces graphiques, pas de solution
miracle, ce qui parait logique tant les diffrences dergonomie et dusage
sont diffrentes entre Windows, les mobiles et OS X.
Il est galement bon de noter quil est possible dutiliser au sein de son
application OS X, les composants mis disposition par des diteurs tiers,
vu le dsormais trs clbre NuGET. Xamarin Studio propose en effet une
intgration native de celui-ci dans son interface et vous pouvez ajouter des
packages au sein de votre projet en quelques clics de souris Fig.4.
Bien videmment, tous les packages disponibles sur .NET ne pourront pas
tre utiliss dans une application OS X (ex: un package destin aux applications Silverlight) mais pour la majorit des rfrences du march (ex:
Json.NET, HttpClient) et qui simplifient la vie des dveloppeurs, aucun

Bien dautres possibilits sont galement offertes par Xamarin.Mac pour


aller au-del du simple dveloppement .NET sur OS X et la meilleure des
manires de les dcouvrir est de se rfrer au portail des dveloppeurs mis
disposition par lditeur:
http://developer.xamarin.com/guides/mac/getting_started/
Parmi les fonctionnalits quil est toutefois intressant de citer, on peut
commencer par la possibilit dintgrer des librairies lorigine crite en
Objective-C, au sein de son application .NET via la cration de wrappeurs
appels Binding Libraries. Si vous devez rutiliser un composant mtier
sans avoir le rcrire en totalit pour diverses raisons (ex: vous navez
plus le code source dorigine), alors cette solution est faite pour vous.
On peut ensuite parler du vaste chantier engag par Xamarin avec la cration de ce quils appellent les Unified APIs qui permettent de simplifier et
dassurer une meilleure compatibilit de partage de code entre iOS et OS X.
Cette dmarche sest notamment inscrite au moment du passage au 64
bits obligatoire pour les applications iOS dbut 2015. Outre le fait duniformiser le nom des classes/mthodes entre les plateformes, il sagit surtout
de sassurer que les types de donnes (32 u 64 bits) taient manipuls de
manire identique entre les plateformes.
Nous terminerons en voquant la possibilit de pouvoir dployer ses applications sur le Mac App Store. En effet, Xamarin Studio contient tous les
composants ncessaires ou capables de sinterfacer avec les outils
dApple, afin de signer son application en vue de la dployer sur la boutique dapplications ddies au Mac.
u

Dveloppement avanc Xamarin:


Les custom controls sous Xamarin.Forms
Xamarin.Forms est un acclrateur qui, au travers dune librairie graphique, vous permet de
construire des interfaces graphiques natives mobiles partir dun seul code de base. Elle
complte lcole classique Xamarin qui vous permet daccder en C# 100% des contrles UI.
Cette librairie vous propose actuellement plus de 40 composants: pages, contrles... Des
diteurs tiers comme Telerik ou encore Infragistics, pour citer les principaux, proposent de
complter cette librairie.
Abdelkader Benabdi
Leader technique chez RedFabriQ depuis 2008. Expert
Xamarin, Azure et plateformes .Net, Abdelkader a particip de
nombreux projets mobiles en passant par les technologies
natives, cordova et Xamarin. Il promeut avec RedFabriQ cette
technologie depuis 2011.

La philosophie initiale de XAMARIN, permettant daccder


en C# 100% de lAPI du terminal cible, est respect par Xamarin.Forms.
Cet avantage vous permet sans encombre dadopter les pratiques ergonomiques du ou des terminaux cibles. Il est par ailleurs galement possible
de dbrayer en sortant de lAPI de Xamarin.Forms pour adopter une stratgie de dveloppement Hybrid, toujours en C#, en mixant du
Xamarin.Forms et des appels aux contrles UI natifs des terminaux
mobiles cibls. Concrtement pour dvelopper sur un objet de type zone
texte de saisie, si vous restez sous Xamarin.form vous allez manipuler lob-

jet Entry. Si vous dbrayez et utilisez un contrle natif alors en C# vous


allez manipuler des UITextField sous iOS et EditText sous Android. Sachez
que, lors de la phase de compilation, Xamarin.Form convertit lobjet
Entry en UITextFild ou EditText.
Chez RedFabriQ nous utilisons la technologie Xamarin depuis 2011 (les
annes en informatique se comptent en anne chien, dont 5*7 = 35 ans
dexpriences;-). Nous confirmons quil ny a point de limitation pour dvelopper des applications UI mobile complexe ou simple avec Xamarin. Sil y
a une limitation cest quelle est chez le dveloppeur ou larchitecte !
Nous allons dans cet article expliquer comment dbrayer et dvelopper un
custom control permettant au dveloppeur de lever toutes les barrires.

Accs aux API natives

Laccs aux API natives en utilisant Xamarin.Forms se fait de trois faons:


en utilisant les dependency service, les rendus graphiques personnaliss
Programmez! a Dcembre 2015

25

021_029_191 18/11/15 22:04 Page26

public static readonly BindableProperty CustomFontProperty =


BindableProperty.Create<ExtendedButton, string>(
p => p.CustomFont, 0);

ou travers les plugins Xamarin. Les dependency services nous permettent de concevoir facilement des interfaces pour des implmentations spcifiques de sorte que vous pouvez accder facilement des
fonctionnalits spcifiques de la plateforme comme laccs la camra ou
bien lAPI de golocalisation dans votre projet commun ou portable.
Les interfaces graphiques cres avec Xamarin.Forms ont un rendu natif
parce quelles sont natives. Elles sont affiches sur lcran en utilisant le
contrle natif de chaque plateforme. Par exemple si vous utilisez un contrle Entry dans Xamarin.Forms, sur iOS il sera affich comme un contrle
UITextField, sur Android comme un contrle EditText et sur Windows
Phone comme un TextBox.
Les dveloppeurs peuvent facilement changer ces rendus natifs en crant
leurs rendus graphiques personnaliss qui peuvent consister crer un
simple contrle ou bien gnrer toute une page en natif.

Cration dun rendu graphique personnalis

Malgr le fait que les pages et les contrles fournis par Xamarin.Forms
soient nombreux, il arrive un moment o on est oblig de dfinir nos
propres rendus graphiques personnaliss. Regardons dans cet exemple
comment on va dfinir un contrle bouton avec une police de caractres
personnalise. Chaque rendu graphique personnalis est dfini par deux
parties, une sous-classe de llment quon veut personnaliser dfini dans
le projet commun Xamarin.Forms de notre solution et une implmentation
spcifique pour chaque plateforme pour dfinir lapparence spcifique.

Structuration dune solution Xamarin Forms

Comme vous pouvez le voir un projet Xamarin.Forms est structur en


gnral en 4 projets par dfaut:
a Projet portable : projet commun entre toutes les plateformes ou on dfinit les pages et les contrles Xamarin.Forms en plus des fonctionnalits
mtier, mais on peut aussi crer un autre projet portable pour sparer
les fonctionnalits mtier de la dfinition des crans.
a Projet Android : projet client pour Android, il est le point dentre de
notre application Android ou on peut implmenter tout ce qui est spcifique la plateforme comme les rendus graphiques personnaliss.
a Projet iOS : projet client pour iOS, il reprsente lentre de notre application iOS ou on va crer tout ce qui est spcifique la plateforme
a Projet Windows Phone : projet spcifique la plateforme Windows
Phone.

Cration de la sous-classe du contrle

public string CustomFont


{
get
{
return (string)base.GetValue(ExtendedButton.CustomFontProperty);
}
set
{
base.SetValue(ExtendedButton.CustomFontProperty, value);
}
}
}
Nous avons hrit de la classe Button de Xamarin.Forms pour redfinir le
rendu graphique du contrle bouton quon veut personnaliser. On a dfini
aussi une proprit CustomFont quon pourra dfinir dans notre projet
commun et rutiliser aprs dans la classe qui va dfinir le rendu graphique
de notre contrle bouton pour chaque plateforme.

Dfinir limplmentation spcifique

Pour personnaliser lapparence du contrle, nous devons crer un rendu


graphique sur chaque plateforme.
Chaque contrle Xamarin.Forms a une classe de rendu graphique quon
peut hriter comme la classe ButtonRenderer.
Ensuite, pour grer les changements, on doit surcharger la mthode OnElementChanged. Toutes les modifications quon va apporter au contrle
bouton seront dfinis dans cette mthode dans la proprit Control, qui est
juste une association linstance du contrle natif.
Par exemple dans iOS a correspond au contrle UIButton et dans
Android au contrle Button.
Limplmentation du rendu graphique pour Android correspond la classe
suivante:
[assembly: Xamarin.Forms.ExportRenderer(typeof(ExtendedButton), typeof(Extended
ButtonRenderer))]
namespace CustomRenderer.Droid.Renderers
{
public class ExtendedButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.
Forms.Button> e)
{
base.OnElementChanged(e);

if(Control!=null)
{
ExtendedButton element = e.NewElement as ExtendedButton;

Dans le projet partag ou bien le projet PCL ou vous avez dfini vos pages
Xamarin.Forms, nous allons crer une sous-classe du contrle quon veut
personnaliser, comme suit:

if(!string.IsNullOrEmpty(element.CustomFont))
Control.SetTypeface(Typeface.CreateFromAsset(this.Context.Assets,element.Custom
Font),

public class ExtendedButton : Button


{

26

Programmez! a Dcembre 2015

Android.Graphics.TypefaceStyle.Normal);
}

021_029_191 18/11/15 22:04 Page27

}
}

}
}
Nous avons hrit de la classe ButtonRenderer pour redfinir notre rendu
graphique pour le contrle bouton dans Android.
public class ExtendedButtonRenderer : ButtonRenderer
Ensuite dans la mthode OnElementChanged nous avons rcupr la
valeur de notre police de caractres depuis la proprit e.NewElement et
lavons affecte linstance Control qui correspond au contrle bouton
natif Android.
if(Control!=null)
{
ExtendedButton element = e.NewElement as ExtendedButton;
if(!string.IsNullOrEmpty(element.CustomFont))
Control.SetTypeface(Typeface.CreateFromAsset(this.Context.Assets,element.CustomFont),
Android.Graphics.TypefaceStyle.Normal);

Comme sur Android nous avons hrit de la classe ButtonRenderer pour


redfinir notre rendu graphique du bouton dans iOS comme suit:
public class ExtendedButtonRenderer : ButtonRenderer
Ensuite dans la mthode OnElementChanged nous avons rcupr la
valeur de notre police de caractres depuis la proprit e.NewElement et
lavons affecte linstance Control qui correspond au contrle bouton
native iOS.
if (this.Control != null)
{
var element = e.NewElement as ExtendedButton;
if (!string.IsNullOrEmpty(element.CustomFont))
{
this.Control.Font = UIFont.FromName(element.CustomFont, (nfloat)this.Element.FontSize);
}
}

}
Dans cet exemple on peut voir quon a accs toutes les fonctionnalits
natives dAndroid.
Enfin, pour permettre Xamarin.Forms de trouver correctement et dutiliser le rendu graphique de notre contrle personnalis, nous devons ajouter
lattribut [assembly] au-dessus du namespace.
Le premier paramtre rfrence le contrle Xamarin.Forms que vous souhaitez modifier, tandis que le second paramtre rfrence le rendu graphique spcifique la plateforme pour le contrle personnalis, voici dans
notre exemple quoi ressemble cet attribut:
[assembly: Xamarin.Forms.ExportRenderer(typeof(ExtendedButton), typeof(ExtendedButtonRenderer))]
Limplmentation du rendu graphique pour iOS correspond la classe suivante:
[assembly:Xamarin.Forms.ExportRenderer(typeof(CustomRenderer.Controls.ExtendedButton), typeof
(ExtendedButtonRenderer))]
namespace CustomRenderer.iOS.Renderers
{
public class ExtendedButtonRenderer : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (this.Control != null)
{
var element = e.NewElement as ExtendedButton;
if (!string.IsNullOrEmpty(element.CustomFont))
{
this.Control.Font = UIFont.FromName(element.CustomFont, (nfloat)this.Element.FontSize);
}
}
}

Comme vous pouvez le constater dans le code prcdent on a accs


toute les fonctionnalits fournies par iOS.
Et de la mme faon que sur Android, nous avons utilis lattribut [assembly] pour associer le nouveau rendu graphique au bouton utilis dans
Xamarin.Forms comme suit:
[assembly:Xamarin.Forms.ExportRenderer(typeof(CustomRenderer.Controls.ExtendedButton), typeof
(ExtendedButtonRenderer))]
Ce mcanisme dimplmentation des custom controls vous offre normment de libert pour apporter vos applications lexprience utilisateur
quils sont en droit dattendre. Nous vous conseillons dapprofondir ces
techniques car elles sont finalement loin dtre exotiques dans le dveloppement dapplications Xamarin.

Conclusion

Xamarin.Forms est une librairie trs puissante qui permet de crer des
interfaces graphiques partages entre les 3 plateformes mobiles Android,
iOS et Windows Phone; ceci est un avantage considrable de gain de productivit sur les trois plateformes mobiles phares.
En plus des contrles et des pages fournis
par Xamarin.Forms, la librairie reste
ouverte lextensibilit sans limite en
offrant un mcanisme de cration de
rendus graphiques personnaliss. Ce
dernier, comme nous avons pu le voir,
est facile et puissant. Et vous permet
donc denrichir les contrles
Xamarin.Forms existants. On peut dfinir de
simple personnalisations de contrles jusqu
crer des pages entire en natif. Ce qui nous permet de pouvoir crer des applications 100% natives avec le
mme code source. Autant au niveau de la couche logique mtier quau
niveau des crans de nos applications.

Programmez! a Dcembre 2015

27

021_029_191 18/11/15 22:04 Page28

Trucs et astuces
Andrs Talavera
dveloppeur et formateur
.NET, Web et Mobile

Performances

Les ressources de nos appareils mobiles sont


parfois limites. Entre autres, la batterie est souvent mise lpreuve. Les performances de notre
application, et par consquent lexprience utilisateur, peuvent alors tre dgrades. Les langages manags peuvent utiliser un gestionnaire
de mmoire, un GarbageCollector (GAC). On
peut alors optimiser lutilisation de la mmoire.
Mais attention, disposer et recrer des objets
chaque fois :
a Requiertplus dallocations,
a Du temps au GarbageCollector,
a Peut provoquer des fragmentations de la mmoire,
a Peut tre la source de fuites de mmoire.
Pour optimiser au maximum les performances
de vos applications, il est donc impratif que
vous connaissiez sur le bout des doigts le cot
en mmoire des objets que vous crez et utilisez. Les outils de dveloppement fournissent
des profilers.
Information: lexception de Xamarin.iOS avec les API
Classic, tous les produits Xamarin utilisent un GarbageCollector
de Mono, celui de SGEN.

Limiter lutilisation
de ressources dans le temps

Lorsque notre programme doit allouer un espace mmoire un nouvel objet, le GAC peut
dterminer si un besoin de mmoire supplmentaire est ncessaire ou si une simple libration
de mmoire suffit. Lutilisation du GargbageCollector nous vite la gestion dallocation des
objets, mais certains types dobjets ncessitent
une attention particulire. Il peut tre prfrable
de librer explicitement les ressources sans
attendre que le GarbageCollector intervienne,
par exemplepour :
a Les connexions rseau,
a Les grands blocs mmoire
a Les fichiers
Le Framework .NET dispose de linterface IDisposable qui permet de grer la vie de nos objets
et donc de les tuer ds lors que leur utilit
devient nulle. Exemple dutilisation dun objet
implmentant linterface IDisposable:
using (var hw = new HelloWorld())
{
hw.SayHello();
}

28

Programmez! a Dcembre 2015

Rduire lemprunte du
GarbageCollector

Lorsque le GarbageCollector de SGEN commence, il arrte les threads de lapplication pendant quil rcupre la mmoire. Linterface peut
donc tre fige pendant quelques secondes.
Cette pause dpend de deux facteurs:
a La frquence de nettoyage du GarbageCollector
a La dure dexcution de chaque nettoyage
Cela signifie que si de nombreux objets sont
allous et ne restent pas en vie, il y aura de nombreux nettoyages. Et vice-versa, lorsque les
objets sont allous et restent en vie, il y aura
moins de nettoyages (mais plus longs).
Sources: http://www.mono-project.com/
http://developer.xamarin.com/guides

Architecture MVVM dans vos


applications Xamarin

Cest devenu obsessionnel pour tout bon dveloppeur: rutiliser le code plusieurs fois, dans diffrents contextes. Mais comment faire lorsque
lon code sur trois plateformes distinctes?
Grce une PCL, on va partager notre code
mtier. Grce au pattern MVVM, on va pouvoir,
par exemple, grer de manire simple les interactions laide des ViewModelsdans notre PCL ; et
dfinir les vues dans chacune des plateformes. Il

existe diffrentes librairies permettant limplmentation simple du pattern MVVM, entre autres
MvvmCross et MvvmLight. Ces deux dernires
sont disponibles dans NuGet. La premire est
modulaire et complmentaire. Fonctionnant avec
notamment le pattern dinjection de dpendances
et dinversion de contrle, MvvmCross permet de
crer dautres librairies qui peuvent ltendre.

Partagez votre code UI aussi!

Source: http://msdn.microsoft.com/fr-fr/magazine/dn904669.aspx
Qui na jamais rv dcrire une application
mobile native pour plusieurs plateformes avec
un seul code? Xamarin apporte une rponse
cette problmatique avec Xamarin.Forms. Avec
Xamarin.Platform, pour partager un maximum
son code, il tait ncessaire de crer diffrents
projets dont une PCL qui contient le code mtier,
partag, et dautres projets qui contiennent le
code de linterface utilisateur pour chaque plateforme. Xamarin.Forms permet de dvelopper
des applications mobiles natives en partageant
le code de linterface utilisateur (par code ou de
manire dclarative avec le langage XAML). Il
est possible de rajouter ses propres composants dans une plateforme ddie avec des Custom Renderers par exemple (http://developer.
xamarin.com/guides/ cross-platform/xamarinforms/custom-renderer/renderers/).

RETOURS DEXPRIENCE
Equipe de dveloppement chez
Technology and Strategy Strasbourg

Ds 2010, nos collaborateurs se sont montrs intresss par le dveloppement mobile. Les premiers projets
iOS et Android ont t dvelopps nativement. Nos
clients rclamant souvent un dveloppement simultan pour iOS et Android, nous avons souhait proposer
une solution pour mutualiser le code et gagner du
temps. Nous recherchions une solution multiplateforme. En 2013 la branche "Web and
Mobility" est ne, renforant notre positionnement sur les solutions mobiles. De par
notre niveau Gold Partner avec Microsoft, nous avons tout naturellement choisi
Xamarin. Nous tions et sommes toujours sduits par la flexibilit de la solution et sa
communaut grandissante. Le dveloppement en C# sous Visual Studio facilite les
ralisations de nos quipes. Aprs plus dune dizaine de projets dj raliss (applications Smartphone et tablette pour le B to B), nos clients sont aujourd'hui convaincus
par les rsultats obtenus. Le nombre de projets ne fait que progresser.

Antony Canut, dveloppeur .NET chez SOAT

Jutilise Xamarin depuis un peu plus dun an. Il me permet de raliser


des POC (Proof of Concept) trs rapidement en cross-plateforme.
Toujours grce ce logiciel, jai pu acqurir des comptences en
Android et iOS, ce qui me permet de pouvoir aider ou de lire du code
natif de ces plateformes trs simplement. La solution Xamarin.Forms
quant elle, permet de ne pas me soucier des spcificits de chaque plateforme et
ainsi de maintenir tout mon code trs simplement.

021_029_191 18/11/15 22:04 Page29

Intgrer Azure Active Directory dans


votre application Xamarin
Microsoft propose Azure Active Directory pour bnficier dun AD en Cloud, synchronisable ou pas,
avec un AD classique. Par ailleurs, il met aussi disposition la possibilit dintgrer lauthentification
AD dans une application Xamarin : exemple dimplmentation.
Le package Nuget tant maintenant install, il faut utiliser les APIs
dADAL pour effectuer la connexion:

Thomas LEBRUN Consultant


tlebrun@infinitesquare.com
http://blogs.infinitesquare.com/b/tom
http://blog.thomaslebrun.net
@thomas_lebrun
Azure Active Directory est la brique propose par Microsoft dont le but
est de permettre de disposer dun annuaire Active Directory hberg
dans Azure. Et bien sr, si vous disposez dj dun annuaire AD, vous
pouvez le synchroniser avec la version cloud.
Dun autre ct, Microsoft met disposition des dveloppeurs le projet
ADAL (Active Directory Authentication Library, accessible en tlchargement via Nuget ou ici: https://github.com/AzureAD/azure-activedirectory-library-for-dotnet), dont lobjectif est de permettre dintgrer lauthentification
Azure Active Directory dans une application, que ce soit une application
.NET ou mme une application Xamarin, puisquil en existe une version
ddie! Si limplmentation et lutilisation dADAL au sein dune application .NET ont dj t couvertes sur Internet par diffrents articles de
blogs ou autres, cela nest pas le cas pour une application Xamarin, et
cest donc ce que nous allons voir par la suite.
La premire tape dans la mise en place dune authentification via Azure
Active Directory consiste crer une application, dans le portail Azure,
qui sera rattache votre annuaire: Fig.1.
Dans les proprits de cette application, vous devez prsent configurer
les accs qui seront accords aux utilisateurs lorsquils seront authentifis. Vous pouvez ainsi faire en sorte davoir accs aux profiles, aux informations des utilisateurs, etc. Si vous ne le faites pas, lutilisateur recevra
un message derreur lui indiquant quil nest pas autoris accder la
ressource demande Fig.2. Une fois la configuration termine, il est
temps de passer au code ! Pour utiliser ADAL dans une application
Xamarin (Xamarin.iOS ou Xamarin.Android), il faut dabord rajouter le
package Nuget ncessaire.
Il existe diffrentes versions des packages Nuget, certaines tant en tat
"Prerelease", indiquant quil sagit dune version Beta. Ces versions Beta
intgrent, la majorit du temps, des corrections de bugs ou de nouvelles
fonctionnalits.
Fig.1

Fig.2

public async Task<AuthenticationResult> Authenticate(string clientId, string returnUri)


{
string resource = https://graph.windows.net
string authority = https://login.windows.net/common
var authContext = new AuthenticationContext(authority);
if (authContext.TokenCache.ReadItems().Any())
{
authContext = new AuthenticationContext(authContext.TokenCache.ReadItems().First().Authority);
}
var uri = new Uri(returnUri);
var platformParams = new PlatformParameters((Activity)Forms.Context);
var authResult = await authContext.AcquireTokenAsync(resource, clientId, uri, platformParams);
return authResult;
}
Tout dabord, on commence par rcuprer un contexte dauthentification
en passant en paramtre lURL utilise pour la connexion (dans notre
cas, il sagit de https://login.windows.net/common).
La partie importante concerne lappel la mthode
AcquireTokenAsync : on passe en paramtre la ressource sur laquelle
on souhaite se connecter pour en rcuprer les informations (cela peut
tre le serveur de Microsoft pour rcuprer les informations de profil, le
serveur Sharepoint de lentreprise, etc.). En retour de lappel cette
mthode, on rcupre une structure qui contient diffrentes informations:
a Un AccessToken ;
a Une date dexpiration ;
a Lidentifiant du tenant Azure sur lequel lutilisateur sest authentifi au
travers de votre code ;
a Une classe (UserInfo) qui contient les informations de base de lutilisateur: le nom, lidentifiant, etc.
Sur ces diffrentes informations, cest lAccessToken qui est important, car
cest lui que vous allez devoir envoyer dans les headers de vos requtes
Web, lorsque vous interrogerez des ressources, pour faire en sorte de pouvoir y arriver de manire authentifie. En effet, une fois connect via la
mthode AcquireTokenAsync, cest en utilisant le jeton daccs que vous
pouvez accder vos ressources. En fonction des versions de la librairie
ADAL que vous utilisez, vous pouvez rencontrer des diffrences/nouveauts. Ainsi, dans la version dADAL pour Xamarin.Android, le renouvellement
du jeton daccs (tape normalement obligatoire lorsque vous souhaitez
utiliser le jeton, mais que celui-ci a expir, do lexistence de la proprit
ExpiresOn) est gr automatiquement par la librairie. Avec ADAL pour
Xamarin, vous tes donc en mesure de vous connecter, de manire extrmement simple, Microsoft Azure Active Directory afin, par la suite, daccder des ressources qui sont protges et utilisables uniquement
lorsque lutilisateur est authentifi!
u
Programmez! a Dcembre 2015

29

030_040_191 18/11/15 22:39 Page30

Quest-ce que lOpen Data et comment lutiliser?


Le mouvement Open Data ou donnes libres/ donnes ouvertes est une dmarche visant
publier des donnes numriques en ligne accessibles et utilisables par tous. Cette approche consiste
publier sur des plateformes ouvertes des jeux de donnes dtenus par les collectivits publiques,
les organismes publics, les associations, les entreprisesCes acteurs vont publier essentiellement
des donnes intressantes pour tous, par exemple des informations conomiques, des rapports sur
diverses pollutions, des cartes, des horaires, des agendas, etc.
Hugo
Carnicelli

Richard
Foucaud

Softfluent
Mais quon ne sy mprenne pas, cette avance est avant tout une obligation lgale et donc encadre strictement par la loi. En effet, un cadre juridique dfinit les informations qui peuvent tre rendues publiques et celles
qui ne le peuvent pas. Une donne sera mise la disposition du public que
si elle rpond aux critres suivants: Complte, Primaire, Opportune,
Accessible, Exploitable, Non discriminatoire, Non propritaire, Libre de
droits, Permanente et Gratuite. En revanche, les donnes sensibles et
caractre personnel sont exclues de la dmarche de lOpen Data.
Lobjectif de lopen data est donc de constituer et dentretenir une source
dinformations de qualit et surtout fiable pour les chercheurs, les journalistes, les citoyens et nous, dveloppeurs. Ces masses de donnes
ouvertes vont pouvoir permettre lmergence de nombreuses applications
pratiques. Lenjeu pour nous sera donc de tirer profit de ces informations
publiques et de mettre notre crativit au service de la socit. Des
besoins existent, il ne nous reste plus qu les trouver et transformer ces
donnes brutes pour les rendre accessibles tous et sur nimporte quel
support.

Open Data pour lexemple

Pour illustrer tout a, je vous propose


Fig.1
de nous pencher sur lexemple dune
CITYMAPPER - MAKING CITY USABLE
application utilisant lopen data de
manire dconcertante. Nous prenons le pari quaprs avoir lu ce petit
paragraphe vous vous empresserez de linstaller sur vos smartphones
Fig.1. CityMapper est une application disponible sur toutes les plateformes
destines aux calculs ditinraires golocaliss dans les transports
publics. Lquipe de dveloppement anglaise a tout compris sur lutilisation des donnes et les manie la perfection. Au lieu de rpartir les informations sous diffrentes applications, comme cest souvent le cas pour les
transports en le de France, CityMapper a russi le pari de runir les donnes dune multitude dapplications (comme RATP, Vlib, Autolib, etc.) en
une seule interface ludique et facile dutilisation.
De ce fait, Citymapper va proposer le trajet le plus rapide, mais galement
de nombreux itinraires alternatifs auxquels lusager naurait pas forcment pens (allant jusqu la marche pied).
Par exemple lapplication va vous conseiller de commencer votre trajet en
mtro puis de le terminer en Velib sans oublier de vous indiquer, bien videmment, le nombre de vlos disponibles lors de votre changement, et le
nombre de places libres pour le dposer lors de votre arrive destination.
Puissant non ? Ce produit nous prouve que la mutualisation et la bonne utilisation de lopen data peuvent donner naissance des produits de grande
qualit, prodiguant plus de services et une exprience utilisateur forte.

Quelques Statistiques sur lOpen Data

Chaque anne, Global Open Data Index nous propose un classement complet par pays en fonction de sources de donnes libres commeles transports, le budget et les dpenses de ltat, les rsultats aux lections, les
cartes nationales, les statistiques nationales, la lgislation du pays, les
codes postaux ou encore les missions polluantes. De par ces informations, Global Open Data Index nous fournit un tableau des pays modles
dans la libralisation des donnes. En 2014 la France tient une place prdominante dans ce classement en se plaant 3e (alors quen 2013 elle ntait
que 12e). Cette ascension vient principalement de la libralisation des
codes postaux. Ainsi, on peut donc comprendre que la 1re place ne tient
plus qu louverture des donnes relatives aux dpenses du pays.

O trouver des donnes?

Pour commencer, en France il est possible de trouver bien des donnes


sur des sujets varis sur le site http://data.gouv.fr. On remarquera que, par
convention, la plupart des sites officiels permettant daccder des donnes ouvertes sont gnralement mis en ligne sur des sous-domaines
nomms data . Il est donc relativement ais den trouver un certain
nombre grce une simple recherche Google : inurl:data . Cette
recherche nous permettra de faire remonter des rsultats tels que:
https://www.data.gouv.fr/ - https://data.sncf.com/ - http://data.lesechos.fr/
http://data.worldbank.org/ - https://www.data.gov/ - https://data.oecd.org/ Fig.2.

Comment coupler Google Maps une source


de donnes?

Nous allons dans cet exemple vous montrer comment lier une source de
donnes, trouve sur le site http://data.gouv.fr, Google Maps uniquement en
HTML et JavaScript. Premire tape, commenons par tlcharger le fichier
suivant, grce la recherche Liste des points de contact du rseau postal
franais : https://www.data.gouv.fr/fr/datasets/liste-des-points-de-contact-du-

Fig.2

30

Programmez! a Dcembre 2015

030_040_191 18/11/15 22:39 Page31

reseau-postal-francais. Fig.3. Nous allons ensuite nommer ce fichier


data.csv et crer un fichier index.html qui va contenir le code source
permettant dafficher la carte de Google Maps. Attention, ces fichiers doivent tre mis en ligne sur un serveur Web, mme local, afin de pouvoir
atteindre le fichier data.csv depuis le code JavaScript sans quoi notre
appel AJAX sera refus par le navigateur. Nous allons ajouter un lment qui
va servir contenir notre carte, en noubliant pas de lui donner une taille:
<div id="map-canvas" style="width: 500px; height: 400px;"></div>
Il nous faut ensuite ajouter comme rfrence la bibliothque JavaScript
suivanteafin dutiliser lAPI Google:
<script src="https://maps.googleapis.com/maps/api/js"></script>
Pour finir, voici le code source permettant danalyser le fichier data.csv
et dafficher les points de coordonnes quil contient sur la carte:
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(48.86, 2.34),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var request = new XMLHttpRequest();
request.open('GET', '/data.csv', true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
var lines = request.responseText.split('\n');
for (i = 1; i < lines.length; i++) {
var columns = lines[i].split(';');
// Point
var marker = new google.maps.Marker({
position: new google.maps.LatLng(columns[9], columns[10]),
map: map,
title: columns[2]
});
}
} else {
// error
}

};
request.onerror = function () {
// error
};
request.send();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Fig.4

Ce code va simplement initialiser


la carte puis lancer un appel asynchrone pour rcuprer le contenu
du fichier csv et enfin ajouter un
marqueur pour chacune de ses
lignes grce aux colonnes de
coordonnes. Et voici le rsultat
de notre dveloppement pour le
centre de la ville de Paris: Fig.4.

Pourquoi a-t-on besoinde donnes ?

Que ce soit dans lunivers des applications logicielles, mobiles ou encore


Web, les donnes ont aujourdhui une place prdominante dans la qualit
du service que lon propose un utilisateur.
Admettons que lon ait dvelopp une application mobile de quizz sur les
produits du terroir, il nous faut pour commencer une base de
questions/rponses. Jusqu un certain point, il est bien entendu possible
et gnralement conseill de construire cette base humainement. Mais
que pouvons-nous imaginer de plus quune application de jeu, potentiellement multijoueur au travers dun systme de mise en relation automatique
et de tableaux de scores?
Et bien imaginons que nous souhaitions ajouter un scanner de code barre
produit notre application. Cela permettrait un joueur de lancer un quizz
sur le thme du produit quil scanne, ou bien tout simplement davoir des
informations sur ce produit, autres que son prix et son nom qui sont trs
probablement inscrits sur ltiquette. Cest l que les sources de donnes,
fiables cela va sans dire, deviennent trs importantes. Approfondissons notre sujet de code barre
produit un moment Fig.5.
Les 3 premiers chiffres du code
Fig.5
servent identifier le pays (300379 pour la France, 400-440 pour lAllemagne, etc.). Jusque-l pas de difficult, cette codification ne variant pas souvent. Les 6 chiffres suivants
servent dsigner le fabricant, et l dj, cela se corse.
On trouvera facilement des applications Web permettant de retrouver cette
information la demande (http://www.gs1belu.org/ par exemple), mais rien
dautomatisable via une API gratuite. Quant aux 5 chiffres suivants, il sagit
du code produit, le tout dernier chiffre tant un chiffre de contrle. L encore, le code produit nest pas ou peu rfrenc de manire fiable dans les
banques de donnes gratuites ou payantes. Cest en cela que les sources
de donnes doivent progresser afin de permettre de proposer des services
toujours plus complexes. Pour des raisons budgtaires videntes, les
sources de donnes payantes sont parfois en avance de phase sur certains secteurs.

Fig.3
Programmez! a Dcembre 2015

31

030_040_191 18/11/15 22:39 Page32

Comment utiliser une source de


donnes payante?

Essayons maintenant dutiliser lAPI de la SNCF (http://data.scnf.com) en tant


que dveloppeur. Il vous faut tout dabord vous inscrire sur le site
https://data.sncf.com/api pour recevoir une cl daccs par mail Fig.6.
Pour utiliser cette API, dont lauthentification se base sur le protocole
HTTP, vous aurez besoin dajouter un header Authorization votre
requte. Voir cette documentation pour plus de prcisions :
http://tools.ietf.org/html/rfc2617#section-2.
Dans cette partie nous allons raliser un exemple au travers dune application Windows Universal. Notre programme devra:
a Rcuprer la liste des gares et les afficher dans deux listes droulantes
(une pour le dpart, une pour larrive)
a Lancer via un bouton la demande de trajet
a Afficher un tableau (gares et horaires) pour afficher le rsultat du trajet
(le premier trajet de la liste si plusieurs possibles)
Pour commencer, nous allons crer notre projet Windows Store: Fig.7. Il nous
faudra aussi installer le package NuGet de Newtonsoft pour la gestion du
JSON. Maintenant, nous allons prparer notre gestion des appels lAPI. La
classe JourneyHandler nous permettra de dsrialiser la liste des gares:

namespace OpenDataSample
{
public class ViewModel
{
public ViewModel()
{
}
private ObservableCollection<StopPoint> _stopPoints;
public ObservableCollection<StopPoint> StopPoints
{
get
{
if (_stopPoints == null)
{
_stopPoints = new ObservableCollection<StopPoint>();
}
return _stopPoints;
}
}
}

using System.Collections.Generic;

}
Notre premier appel sera donc lanc au dmarrage de lapplication, plus
prcisment dans linitialisation de lcran principal MainPage (noubliez pas dinitialiser votre ViewModel par la mme occasion) :

namespace OpenDataSample
{
public class StopPointsHandler
{
public List<StopPoint> places;
}
}

public MainPage()
{
this.InitializeComponent();
DataContext = new ViewModel();

La classe StopPoint quant elle, reprsentant une gare, sera dfinie comme ceci:
InitStopPoints();
namespace OpenDataSample
{
public class StopPoint
{
public string id { get; set; }
public string name { get; set; }
}
}

}
La fonction InitStopPoints va lancer la requte HTTP et alimenter un objet de
type ObservableCollection<StopPoint>(note: la variable APIKey contient
la valeur de la cl reue par mail suite notre inscription sur le site de la SNCF) :

Enfin, nous devons crer un ViewModel permettant de travailler en MVVM:


using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;

private async void InitStopPoints()


{
using (var httpFilter = new HttpBaseProtocolFilter())
{
using (var httpClient = new HttpClient())
{

Fig.6
Fig.7

32

Programmez! a Dcembre 2015

030_040_191 18/11/15 22:39 Page33

// la cl d'API que nous avons reu par mail encod en base64


byte[] byt = System.Text.Encoding.UTF8.GetBytes(string.Format("{0}:", APIKey));
string password = Convert.ToBase64String(byt);
// ajout du header
httpClient.DefaultRequestHeaders.Add("Authorization", string.Format("Basic {0}", password));
// endpoint de l'API
HttpResponseMessage response = await httpClient.GetAsync("https://api.sncf.com/
v1/coverage/sncf/places?q=gare");
if (response.StatusCode == HttpStatusCode.OK)
{
var responseAsString = await response.Content.ReadAsStringAsync();
// rcupration de la liste des gares
var handler = JsonConvert.DeserializeObject<StopPointsHandler>(responseAsString);
// mise jour du modle
((ViewModel)DataContext).StopPoints.Clear();
foreach (var item in handler.places)
{
((ViewModel)DataContext).StopPoints.Add(item);
}

A ce stade, vous devriez pouvoir lancer votre application et afficher le rsultat suivant: Fig.8. Et pouvoir slectionner une gare dans chacune des listes
droulantes: Fig.9. Maintenant, nous allons pouvoir ajouter la partie la plus
intressante de lapplication: la rcupration du trajet. Pour commencer,
nous allons ajouter un bouton permettant de lancer la recherchede trajet :
<Button x:Name="StartJourney" Content="Trajet" HorizontalAlignment="Left" Margin=
"1157,150,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.646,0.582" Click=
"StartJourney_Click"/>
Ainsi que lvnement Click correspondant:
private void StartJourney_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
GetJourney();
}
Avant de dtailler la mthode GetJourney, nous allons crer comme
pour le premier appel les classes nous permettant de dsrialiser le
second appel. La classe JourneyHandler nous permettra de dsrialiser
le trajet propos:
using System.Collections.Generic;
namespace OpenDataSample
{
public class JourneyHandler
{
public List<Journey> journeys;
}
}

}
}
}
}
Vous aurez besoin dajouter les Namespaces suivants:

La classe Journey, reprsentant le trajet, sera dfinie comme cela:

using Newtonsoft.Json;
using System.Net;
using System.Net.Http;
using Windows.Web.Http.Filters;

using System.Collections.Generic;

Ne nous manque plus que la vue implmenter pour afficher le rsultat de


lappel, simplement deux labels de type TextBlock et deux listes droulantes de type ComboBox:
<TextBlock x:Name="StartPointsLabel" HorizontalAlignment="Left" Margin="70,120,0,0"
TextWrapping="Wrap" Text="Gare de dpart" VerticalAlignment="Top" FontSize="16"/>
<ComboBox x:Name="StartPoints" HorizontalAlignment="Left" Margin="70,153,0,0"
VerticalAlignment="Top" Width="520" ItemsSource="{Binding StopPoints}" DisplayMember
Path="name" />
<TextBlock x:Name="EndPointsLabel" HorizontalAlignment="Left" Margin="620,120,0,0"
TextWrapping="Wrap" Text="Gare d'arrive" VerticalAlignment="Top" FontSize="16"/>
<ComboBox x:Name="EndPoints" HorizontalAlignment="Left" Margin="620,153,0,0"
VerticalAlignment="Top" Width="520" ItemsSource="{Binding StopPoints}" Display
MemberPath="name"/>

Fig.8

namespace OpenDataSample
{
public class Journey
{
public List<JourneySection> Sections;
}
}
Et enfin, la classe JourneySection , reprsentant une tape du trajet,
sera dfinie ainsi (les deux dernires proprits tant prsentes uniquement dans un but daffichage comme nous allons le voir par la suite) :
using System;
namespace OpenDataSample
{
public class JourneySection
{
public StopPoint from { get; set; }
public StopPoint to { get; set; }
public string arrival_date_time { get; set; }
public string departure_date_time { get; set; }
public string Arrival
{
get
{
return DateTime.ParseExact(arrival_date_time, "yyyyMMddTHHmmss", System.

Fig.9
Programmez! a Dcembre 2015

33

030_040_191 18/11/15 22:39 Page34

Globalization.CultureInfo.InvariantCulture).ToString("MM/dd/yy H:mm:ss");
}
}
public string Departure
{
get
{
return DateTime.ParseExact(departure_date_time, "yyyyMMddTHHmmss", System.
Globalization.CultureInfo.InvariantCulture).ToString("MM/dd/yy H:mm:ss");
}
}
}
}

// mise jour du modle


((ViewModel)DataContext).JourneySections.Clear();
// par dfaut, affichage du premier trajet possible
if (handler.journeys.Count > 0)
{
foreach (var item in handler.journeys[0].Sections)
{
((ViewModel)DataContext).JourneySections.Add(item);
}
}
}
}

Il nous faut aussi mettre jour le ViewModel pour lui ajouter une proprit:
private ObservableCollection<JourneySection> _journeySections;
public ObservableCollection<JourneySection> JourneySections
{
get
{
if (_journeySections == null)
{
_journeySections = new ObservableCollection<JourneySection>();
}
return _journeySections;
}
}
Maintenant que notre reprsentation objet est en place, nous allons
dtailler la mthode GetJourney:
private async void GetJourney()
{
using (var httpFilter = new HttpBaseProtocolFilter())
{
using (var httpClient = new HttpClient())
{
// la cl d'API que nous avons reue par mail encod en base64
byte[] byt = System.Text.Encoding.UTF8.GetBytes(string.Format("{0}:", APIKey));
string password = Convert.ToBase64String(byt);
// ajout du header
httpClient.DefaultRequestHeaders.Add("Authorization", string.Format("Basic {0}", password));
// endpoint de l'API
HttpResponseMessage response = await httpClient.GetAsync(
string.Format(
"https://api.sncf.com/v1/coverage/sncf/journeys?from={0}&to={1}&datetime={2}",
((StopPoint)StartPoints.SelectedValue).id,
((StopPoint)EndPoints.SelectedValue).id,
DateTime.Now.ToString("yyyyMMddTHHmmss")
)
);

}
}
Vous noterez qu la diffrence du premier appel, outre le changement
dURL, nous transmettons maintenant 3 paramtres:
a Lid de la gare de dpart
a Lid de la gare darrive
a La date de la demande
Enfin, comme le premier appel, nous allons alimenter un objet cette fois de
type ObservableCollection<JourneySection> rcupr depuis le premier
trajet trouv. Ne reste plus que la vue, nous allons donc utiliser une ListView pour afficher les diffrentes tapes du trajet: voir code complet sur le
site de Programmez !. Vous noterez que le template est relativement simple,
compos duniquement 4 TextBlock pour afficher respectivement les
gares de dpart et darrive ainsi que leurs horaires respectifs. Et voil !
Vous devriez maintenant pouvoir afficher le rsultat dun trajet: Fig.10.

Conclusion

Chaque jour, nous sommes confronts une multitude de donnes. Ces


donnes font partie de notre quotidien, et sont aussi source de revenus
pour lconomie. Lopen data est encore rcent et donc trs peu connu par
le grand public, mais deviendra un acteur incontournable du 21e sicle.
Cette dmarche de libralisation des donnes est une bonne chose de
nombreuses chelles. Tout dabord, nos administrations vont pouvoir
garantir la transparence de leurs actions publiques comme les projets,
dcisions, comptes publics et les rendre accessibles et comprhensibles
par tous sollicitant ainsi lengagement citoyen. Nous pouvons esprer
grce lopen data un renouveau des administrations qui vont pouvoir se
moderniser et diminuer les dlais de ractivit pour un futur meilleur. Enfin,
nous verrons sans doute merger de nouveaux services innovants et donc
de nouvelles opportunits conomiques, grce lOpen Data, qui est dj
considr comme lor noir du 21e sicle.
u

if (response.StatusCode == HttpStatusCode.OK)
{
var responseAsString = await response.Content.ReadAsStringAsync();
// rcupration de la liste des gares
var handler = JsonConvert.DeserializeObject<JourneyHandler>(responseAsString);

34

Programmez! a Dcembre 2015

Fig.10

030_040_191 18/11/15 22:39 Page35

Comment consommer des donnes OpenData


depuis une App Windows (Phone) 10
De nombreux organismes proposent depuis quelques annes des donnes ouvertes. Les plus
connus en France sont ceux du gouvernement sur http://data.gouv.fr ou https://data.sncf.com/.
Pour retrouver une liste bien fournie dAPI Open Data au niveau mondial je vous invite consulter
cette adresse : http://www.programmableweb.com/category/all/apis?keyword=opendata. Pour cet
exemple, jai dcid dtre chauvin et de choisir des donnes de la ville de
Bordeaux:http://opendata.bordeaux.fr/. Pour essayer de rester utile et ludique nous ne choisirons
pas les budgets 2005 par nomenclature mais plutt les emplacements des dfibrillateurs.

Certaines API demandent aux services et applications de sauthentifier


pour consommer leurs donnes. Cela permet de tracer la vritable utilisation de ces donnes mais galement de limiter leur modification quand
celle-ci est disponible. Dans lexemple que nous avons choisi et pour plus
de simplicit, aucune autorisation ne sera ncessaire. Les donnes sont
disponibles directement depuis une url. Vous pouvez vrifier cela en tapant
lurl du service directement dans votre navigateur:
http://odata.bordeaux.fr/v1/databordeaux/defibrillateurs/?format=json

un clic-droit sur votre projet, puis slectionnez Manage Nuget packages. Dans la fentre ouverte, choisissez dinstaller le package Fig.2.
Ensuite nous allons devoir manipuler des donnes. Pour cela en gnral,
nous crons nos classes afin de pouvoir dsrialiser les donnes et pouvoir les manipuler. Afin de gagner du temps nous allons utiliser une fonctionnalit peu connue de Visual Studio.
Ouvrez la page correspondante nos donnes dans votre navigateur:
http://odata.bordeaux.fr/v1/databordeaux/defibrillateurs/?format=json
Slectionnez ensuite tout le contenu Json et effectuez un clic-droit
copier. Dans votre projet Visual Studio, crez une nouvelle classe, appelons-la Data. Dans ce fichier, supprimez la classe Data cre et effectuez
un Edit > Paste Special > Paste JSON As Classes Fig.3.
Voil du temps de gagn et des erreurs vites. Bien sr cette technique a
des limitations et si votre Json est dynamique alors vous devrez mettre
jour vos classes vous-mme.

Les formats

Le code

Michal FERY
Consultant Infinite Square
Blog: http://blogs.infinitesquare.com/b/mfery

PARCOURIR ET RCUPRER
DES DONNES OUVERTES
Authentification et autorisations

Comme vous pouvez le constater dans lurl nous passons un paramtre


format avec la valeur Json. La plupart des API vont vous permettre de rcuprer leurs donnes sous diffrents formats selon vos affinits et les
usages que vous en aurez. Nous aurions ainsi pu saisir les url suivantes:
http://odata.bordeaux.fr/v1/databordeaux/defibrillateurs/?format=atom
http://odata.bordeaux.fr/v1/databordeaux/defibrillateurs/?format=kml
Encore une fois, pour plus de simplicit, nous utiliserons le format standard Json.

Dans le code-behind de notre Page principale, cest--dire dans le fichier


MainPage.xaml.cs nous allons commencer par crer une constante correspondante lurl du service OpenData:

LAPPLICATION UWP

Comme le titre lindique nous allons crer une application pour Windows
10, autrement appele UWP pour Universal Windows Platform. Le langage
utilis sera le C#.
Pour cela, dans Visual Studio nous ferons donc Fichier > Nouveau > Projet et choisirons Windows > Universal > Blank App Fig.1.

Fig.3

Parcourir et rcuprer des donnes ouvertes

Afin de pouvoir aisment manipuler les donnes Json rcupres nous


allons utiliser une bibliothque tierce appele Newtonsoft.Json. Effectuez
Fig.1

Fig.2
Programmez! a Dcembre 2015

35

030_040_191 18/11/15 22:39 Page36

private const string DEFIBRILLATEURS_API_URL =


"http://odata.bordeaux.fr/v1/databordeaux/defibrillateurs/?format=json";
Ensuite nous allons demander notre page de charger dynamiquement les
donnes des dfibrillateurs en ajoutant un appel une mthode asynchrone GetDefibrillateursAsync(); avant la fin du constructeur de la classe.
Ltape suivante est donc de crer cette mthode:

Voil nous avons nos donnes. Et maintenant? On les affiche.

Voil, il ne nous reste qu lancer notre application sur notre ordinateur


pour en vrifier le bon fonctionnement.
Nous voyons ainsi apparatre des pictogrammes pour
chacun des emplacements des dfibrillateurs.
Noublions tout de mme pas que notre application est
universelle. Cest--dire quelle pourra sexcuter aussi bien sur un tlphone que sur un PC avec un cran de trs grande taille.
Il nous faut penser responsive et pour cela le meilleur moyen serait dutiliser les VisualStateManager.
Dans notre exemple nous allons nous contenter dutiliser les ressources
fournies par le Framework pour les tailles de titre et de laisser la carte
prendre toute la place restante.

La reprsentation gographique

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

private async Task GetDefibrillateursAsync()


Dans cette mthode nous allons utiliser la classe HttpClient pour nous
connecter et rcuprer les donnes de la faon suivante:
var httpClient = new HttpClient();
var jsonResponse = await httpClient.GetStringAsync(DEFIBRILLATEURS_API_URL);
var result = await Task.Factory.StartNew(() => JsonConvert.DeserializeObject<Rootobject>
(jsonResponse));

Dans le code xaml de notre page nous allons positionner un contrle


MapControl de la manire suivante:
<maps:MapControl x:Name="myMap" />
Malheureusement le designer ne permet pas un rendu direct de ce contrle mais nous permet tout de mme de le positionner et den estimer la taille
lavance.
Si nous dmarrons lapplication maintenant nous nous apercevons que
notre carte nest pas du tout centre sur la ville de Bordeaux comme cela
semblerait logique, ni mme zoome correctement.
Pour effectuer le centrage et le zoom, nous allons modifier le constructeur
de notre page afin dy ajouter le code suivant:
myMap.Center =
new Geopoint(new BasicGeoposition()
{
// Coordones GPS de Bordeaux en degrs dcimaux
Latitude = 44.840,
Longitude = -0.580
});
myMap.ZoomLevel = 13;
Voil qui est mieux, mais cette carte est bien vide. Nous allons donc devoir
placer des lments de type MapIcon pour chacun des dfibrillateurs rcuprs auparavant. Retournons dans le code-behind et amliorons notre
mthode GetDefibrillateursAsync.
Pour cela nous allons boucler sur la liste des dfibrillateurs et pour chacun,
crer notre lment en lui affectant la latitude et la longitude correspondante. Nous ajouterons ensuite cet lment la liste MapElements de notre
MapControl:
foreach (var defib in result.d)
{
var mapIcon = new MapIcon();
var position = new BasicGeoposition
{
Longitude = double.Parse(defib.x_long),

36

Latitude = double.Parse(defib.y_lat)
};
mapIcon.Location = new Geopoint(position);
mapIcon.Title = defib.nom;
myMap.MapElements.Add(mapIcon);

Programmez! a Dcembre 2015

<Grid x:Name="RootGrid" Margin="12,20,12,14">


<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Margin="0,0,0,10" Grid.Row="0">
<TextBlock x:Name="description" Text="Defibrillez moi"
Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock TextWrapping="Wrap"
Style="{StaticResource SubtitleTextBlockStyle}">
Emplacements des dfibrillateurs de la ville de Bordeaux
</TextBlock>
</StackPanel>
<maps:MapControl x:Name="myMap"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</Grid>
Fig.4.

CONCLUSION

Nous avons vu ensemble quexploiter des donnes OpenData nest


pas trs compliqu et que leur mise
en application dans une application
Windows 10 responsive nest pas
beaucoup plus sorcier.
Alors, vous de lancer Visual Studio
et de crer vos premires applications.
u

Fig.4

030_040_191 18/11/15 22:39 Page37

Visualisation cartographique de donnes


ouvertes avec D3
Dans cet article, nous allons montrer comment exploiter diffrentes donnes ouvertes (ou open data)
afin de les visualiser sur une carte en mode Web.
Thierry Templier
Restlet
ttemplier@restlet.com

Les sources de donnes

Le site data.gouv.fr fournit un important ensemble de donnes publiques


utilisables librement. Il correspond la principale source de donnes,
mme si certaines collectivits fournissent galement des donnes de ce
type. Cest le cas notamment de la rgion Ile-de-France via le site
http://data.iledefrance.fr/.
Grgoire David met galement disposition librement un ensemble de ressources gographiques correspondant aux contours des entits administratives franaises (rgions, dpartements, communes) via le projet
france-geojson (https://github.com/gregoiredavid/france-geojson). Il ne faut
pas non plus oublier OpenStreetMap (http://www.openstreetmap.org/). Ce
dernier cre et fournit des donnes gographiques gratuites et libres du
monde entier. Il vise supprimer les restrictions techniques ou lgales
pour ce genre de donnes. Bien que loutil permette de visualiser des
cartes du monde en ligne, il fournit galement au tlchargement les donnes gographiques utilises par lintermdiaire de la socit Geofabrik. Il
est possible de slectionner une zone particulire. Pour notre article, nous
utiliserons France > Ile-de-France.

Les diffrents formats

Il existe plusieurs formats cartographiques utiliss pour mettre disposition des contours, des tracs ou des points:
a ESRI Shapefile. Format initialement dvelopp par la socit ESRI pour
ses logiciels commerciaux et devenu un standard de facto largement
utilis, notamment par un grand nombre de logiciels libres. Il contient
toute linformation lie la gomtrie des objets dcrits.
a GeoJSON. Format ouvert dencodage densemble de donnes gospatiales simples bas sur JSON.
Pour une visualisation Web, nous rencontrons bien videmment des problmatiques de poids de donnes, afin que leur chargement ne soit pas
trop long. cet effet, un autre format, TopoJSON, est disponible. Il correspond une extension de GeoJSON et encode les formes gomtriques en
segments de lignes afin dliminer les redondances et de fournir un contenu plus compact. Les fichiers de ce type sont 80% plus lgers que leurs
quivalents en GeoJSON.

Pour limiter des tracs, il est possible dutiliser les paramtres commenant par clip. Le paramtre clipsrc permet notamment de limiter
les formes une zone dcrite par quatre bords ou dans un fichier GeoJSON. Dans ce dernier cas, il peut sagir dun polygone complexe.

Lautre outil que nous allons utiliser est topojson. Il permet de convertir
des fichiers GeoJSON au format TopoJSON.

Maintenant que nous avons tout ce quil nous faut aussi bien au niveau de
loutillage que des donnes, nous pouvons attaquer limplmentation de la
visualisation sur carte en mode Web.

CAS DUTILISATION

Dans cet article, nous allons afficher sur une carte avec diffrents niveaux
de couleurs, la population de chaque commune du dpartement de Seineet-Marne. Cela permettra de rapidement visualiser les zones les plus habites du dpartement.

Sources de donnes utilises

Pour construire notre carte, nous agrgerons deux types de donnes :


a Les donnes cartographiques permettant de dfinir les bases de notre
carte comme les contours de dpartements et de communes ainsi que
les tracs des cours deau;
a Les donnes structures fournissant le nombre dhabitants par commune
ainsi que la localisation des principales communes du dpartement Fig.1.
La corrlation entre ces deux types de donnes se fera soit par lidentifiant
INSEE des communes ou par leurs localisations (longitude / latitude). Les
donnes gographiques contiennent en plus des contours des proprits

Outillage

Plusieurs outils sont disponibles gratuitement sur Internet afin de manipuler ces formats et de les transformer. Le premier, GDAL OGR, est le couteau suisse du gomaticien. Il supporte un grand nombre de formats tels
que ESRI Shapefile et GeoJSON.
Le module typiquement utilis de cet outil est ogr2ogr qui permet
notamment de convertir un format ESRI Shapefile en GeoJSON et de tronquer des tracs.
La commande suivante dcrit la manire de raliser cette transformation :

Fig.1
Programmez! a Dcembre 2015

37

030_040_191 18/11/15 22:39 Page38

dcrivant chaque forme. Dans le cas des contours des communes, les proprits que nous allons exploiter possdent la structure suivante :
Identifiant
C_CAINSEE
L_CAB
B_BOIS
L_BOIS

Description
Le code INSEE de la commune
Le nom de la commune
Sil sagit dun bois ou dune fort
Le nom du bois ou de la fort

Nous afficherons les contenus TopoJSON en nous basant sur le support


de SVG des navigateurs et de D3. cet effet, nous devons maintenant
crer un bloc SVG.

Concernant les donnes relatives au nombre dhabitants, nous allons tirer


parti des colonnes suivantes :
Identifiant
Code dpartement
Code commune
Population totale

Description
Le code du dpartement
Le code de la commune au sein du dpartement
Le nombre dhabitants pour une commune

Comme vous pouvez le voir, le code INSEE nest pas prsent explicitement
dans le second jeu de donnes, mais peut tre dduit en concatnant les
champs Code dpartement et Code commune . Une autre petite
adaptation raliser est la suppression des espaces dans le champ
Population totale afin de transformer ses valeurs en entier.

Prparation des donnes

Comme vous avez pu le constater, les donnes ouvertes rcupres sur


Internet sont brutes. Elles sont de plus beaucoup plus larges que ce dont
nous avons besoin et ne sont pas forcment dans un format utilisable
directement dans une application Web. Il y a donc une phase pralable de
prparation des donnes pour les rendre exploitables dans notre application, ainsi que dcrites dans la figure suivante Fig.2.

MISE EN UVRE DE NOTRE CARTE AVEC D3

D3 est un outil utilisable dans une page Web afin de visualiser des donnes
sous forme de graphiques ou de cartes. Bien quil reste assez bas niveau, il
offre nanmoins des facilits afin de les construire en peu de lignes de
code. Il permet galement dutiliser des donnes TopoJSON afin de les
convertir en des structures affichables par la technologie sous-jacente utilise (SVG ou canvas HTML 5).

Comme vous pouvez le voir, la carte a t structure en sous-ensembles


par lintermdiaire dlments SVG g.
Dans le contexte des cartes, il convient de spcifier une projection en fonction de laffichage souhait. Pour la France, la projection conique conforme
de Lambert, ou plus simplement, la projection de Lambert est communment utilise. Elle se configure simplement avec la fonction d3.geo.conicConformal.

La projection permet galement de dfinir le centre de la carte ainsi que


son chelle. La variable path configure avec la projection permet de
construire les constituants de la carte dans le SVG. Elle sera utilise par la
suite.

Affichage des contours des communes

Maintenant que nous avons les fondations de notre carte, affichons les
contours des communes de Seine-et-Marne. Nous sommes partis dun
fichier contenant les contours de toutes les communes de la rgion parisienne. Nous devons donc restreindre celles incluses dans le dpartement.
Les outils ogr2ogr et topojson vont nous servir ici.

Prliminaires

La premire chose faire est dinclure les bibliothques D3 et TopoJSON


dans notre page HTML qui va contenir la carte. Cela peut tre fait simplement en se basant sur le site d3.org, comme dcrit ci-dessous :

Fig.2

38

Programmez! a Dcembre 2015

Ne pas oublier le paramtre p pour linclusion des proprits dans le


fichier TopoJSON.
Nous avons maintenant uniquement les donnes souhaites. Nous pouvons les afficher avec D3. Une de ses forces est la possibilit dajouter des
lments et dappliquer des proprits sur un ensemble dlments avec
du chanage dappels de mthodes. Il fournit cet effet un mcanisme
puissant de slection dlments avec les mthodes selectAll, data et
enter. Dans le code suivant, nous ajoutons un lment path pour
chaque donne de notre fichier TopoJSON.

Cest un bon dbut, mais nous pouvons faire encore mieux ! Ajoutons un
contour en gras tout autour du dpartement. Pour ce genre de cas, TopoJSON fournit la fonction topojson.mesh. Cette dernire permet didentifier
les contours aux extrmits. Elle prend cet effet en paramtre une fonction. Si nous sommes dans ce cas, ses deux paramtres sont gaux. Nous

030_040_191 18/11/15 22:39 Page39

pouvons alors le slectionner en retournant true. Pour ces lments,


nous pouvons donc surcharger les proprits des bordures pour les faire
plus paisses.

Nous allons maintenant construire un objet JavaScript associant le code


INSEE des communes avec la population correspondante. De cette manire, la dtermination de la couleur pour la zone sur la carte sera plus simple.
Ajoutons galement un ombrage ainsi que les contours des dpartements
dIle-de-France dune manire similaire, mais sans les communes. Nous ne
surchargeons pas larticle avec ce code, mais vous pourrez le retrouver
dans le code source joint. Voici le rsultat ! Fig.3.
Dans le context de SVG, les styles suivants sont utiliss :
Style
fill
stroke
stroke-width
opacity

Description
La couleur de fond dune zone
La couleur du contour dune zone
Lpaisseur du contour dune zone
Le niveau de transparence

Nous navions dfini prcdemment aucune couleur dans lattribut fill


(valeur none) des lments path pour les contours des communes.
Une des forces de D3 est de permettre dutiliser aussi bien une valeur
quune fonction calculant dynamiquement cette valeur en fonction de llment courant. Cette dernire approche correspond typiquement notre
besoin puisque la couleur va dsormais dpendre de la population de la
commune.

Appliquons maintenant sur cette carte les informations relatives la population.

Visualisation de la population
par commune

La premire chose faire est de choisir la palette de couleurs


que nous souhaitons utiliser. Color Brewer (http://color
brewer2.org/) propose de telles palettes pour une utilisation
dans des cartes. Nous choisissons ici la palette YlOrBr avec
des nuances oranges.

Nous dduisons ensuite les intervalles correspondants directement partir des donnes. Plus le nombre est lev, plus la couleur sera fonce.
Les informations relatives la population des communes sont stockes
dans un fichier CSV quil est ncessaire de charger par lintermdiaire
dune requte AJAX linstar de ce qui a t fait pour les contours des
communes. Comme nous avons dsormais plusieurs requtes, il convient
dattendre le chargement de toutes les donnes avant de les traiter. D3
fournit un support cet effet par lintermdiaire du module queue
(https://github.com/mbostock/queue). Quand toutes les donnes ont t
reues, une fonction est appele avec celles-ci en paramtres.

Fig.3

Voyons maintenant le rsultat. La couleur de fond dune commune est


dsormais fonction de sa population Fig.4.

Ajout de titre et de lgende

Afin de rendre notre carte plus lisible, nous pouvons ajouter un titre ainsi
quune lgende pour les couleurs utilises. Il sagit simplement dajouter
en SVG avec D3 des rectangles et des zones de texte. Le code suivant
dcrit la construction de la zone de titre.

Fig.6

Fig.4

Fig.5
Programmez! a Dcembre 2015

39

030_040_191 18/11/15 22:39 Page40

ments sur les vnements mouseover et mouseout. Dans le premier


cas, nous affichons linfo bulle, la positionnons ct du curseur de la souris et affichons les bonnes informations. Dans le second cas, elle est
cache. Le code suivant met en uvre ce mcanisme.

Un code similaire peut tre mis en uvre pour la lgende en se fondant sur
les valeurs des paliers de nombre dhabitants.
Nous affichons ces deux zones sur la gauche de la carte de la Seine-etMarne pour la rendre plus agrable regarder Fig.5.

Villes principales

Afin dagrmenter un peu plus notre carte, nous pouvons galement ajouter les localisations et noms des villes principales. Ces dernires vont tre
positionnes en se basant sur leurs coordonnes trouves sur Internet. A
partir de ces dernires, nous construisons un fichier CSV avec la structure
suivante :

Colonne
commune
lat
lon

Description
Le nom de la commune
La latitude de la commune
La longitude de la commune

Laffichage de ces villes se ralise en deux phases: le positionnement dun


point et lajout dune zone de texte affichant son nom.
Ajoutons des cercles pour chaque localisation de commune, comme dcrit
ci-dessous :

Une info bulle est dsormais affiche dynamiquement en fonction de la


position de la souris sur la carte Fig.7.

Affichage de donnes additionnelles

Il est galement possible denrichir encore la carte en lui ajoutant par


exemple les cours deau issus de OpenStreetMap. Il suffit simplement
dappliquer le contenu du fichier TopoJSON waterways comme nous
lavons fait pour les contours des communes :

Le rsultat final : Fig.8.

CONCLUSION

Les rectangles et les zones de texte sont ajouts de la mme manire que
pour les titre et lgende. Nous ne les dtaillerons donc pas nouveau Fig.6.

Comme nous lavons montr, construire une carte pour un affichage en


mode Web consiste en lassemblage de diffrentes donnes afin de les
mettre en corrlation les unes avec les autres. D3 se positionne en coordinateur afin de charger les donnes puis de les transcrire en donnes visualisables dans un navigateur, avec la technologie SVG dans notre cas. Nous
avons utilis des donnes statiques et ouvertes dans notre exemple, mais
nimporte quelles donnes accessibles sur Internet pourraient tre utilises, notamment celles mises disposition par des services RESTful. u

Dtail pour une commune

D3 permet dajouter un aspect dynamique notre carte afin de visualiser


les informations relatives une commune en passant simplement la souris
sur la zone correspondante. Nous devons cet effet enregistrer des traite-

Fig.7
Fig.8

40

Programmez! a Dcembre 2015

041_043_191 18/11/15 22:05 Page41

Les tests Android dmystifis


Le dveloppement d'applications Android a vu son cosystme
voluer et gagner en qualit. Le nombre de bibliothques facilitant
et acclrant les temps de dveloppement a explos grce
notamment la communaut open source. Les diffrents outils
disposition des dveloppeurs ont aussi grandement volu,
l'image d'Android Studio, l'IDE officiel dvelopp par Google.
Florent Nol
Genymobile Ingnieur Expert Android
@heb_dtc

## Premier test

Dans un premier temps, testons que si aucun cookie n'a t sauvegard


alors le UserCookieHandler retourne une chane vide.
@Test
public void testThatIfNoCookieStoredReturnEmptyString() {
//init
userCookieHandler = new UserCookieHandler();
//test
String cookie = userCookieHanlder.getCookie();

2e partie
Configuration
a Android Studio v1.0 ou plus
a Android SDK v22 ou plus
a Android SDK Tools v22.0.0 ou plus
a Android Support Repository v15 ou plus
a Plugin gradle: v1.1.0 ou plus

public UserCookieHandler(Context context) {


this.sharedPreferences = context.getSharedPreferences(..., );
}
}
On passe le Context notre classe et celle-ci se charge de rcuprer les
SharedPreferences. Cette approche bien que valide pose un problme
pour mocker les SharedPreferences. En effet, impossible d'aller modifier une variable prive de lobjet, et, videmment, ajouter un setter public
n'est pas la bonne solution car cela exposerait le contenu de cette classe.
Une technique frquemment utilise est celle de l'injection de dpendances. Ainsi, au lieu de laisser la classe allouer lobjet, la responsabilit
est dlgue au crateur de cette classe.
class UserCookieHandler {

//success condition
assertTrue(cookie.isEmpty());

private SharedPreferences sharedPreferences;

}
Le test sexcute ensuite soit directement depuis Android Studio, soit en
ligne de commande.
En ligne de commande, la racine du projet, avec le wrapper gradle il
suffit de lancer la commande :
$ ./gradlew test
En cas de succs, BUILD SUCCESS s'affiche. En cas d'erreur, BUILD FAILED et un lien vers le rapport d'erreur est affich.

## De qui se mock t-on?

Le prcdent test tait relativement simple car aucun lment extrieur


n'tait impliqu. Seulement, la plupart du temps, les classes utilisent et
dpendent elles-mmes d'autres objets. Or, ce nest pas le comportement
de ces objets que l'on souhaite tester mais le comportement de la classe
qui les utilise. La solution serait donc de contrler leurs comportements
afin de tester si notre classe ragit correctement. On parle de mocking
et grce la bibliothque Mockito, il est possible de scripter intgralement
le comportement d'objets.
Imaginons donc que la classe UserCookieHandler enregistre le cookie
dans les SharedPreferences. Il faut donc modifier la classe afin qu'elle
puisse utiliser les SharedPreferences. Une option serait de modifier le
constructeur de la faon suivante:
class UserCookieHandler {
private SharedPreferences sharedPreferences;

public UserCookieHandler(SharedPreferences sharedPreferences) {


this.sharedPreferences = sharedPreferences;
}
}
De cette faon, rien n'est expos au monde extrieur et surtout, il est maintenant possible de mocker lobjet sharedPreference.
Le test utilisant le mock s'crit de la faon suivante:
class UserCookieHandlerTest {
@Mock
private SharedPreferences mockedPreferences;
@Before
public void init() {
MockitoAnnotations.initMocks(this);
}
@Test
public void testThatIfNoCookieStoredReturnEmptyString() {
//init
when(sharedPreferences.getString(UserCookieHandler.SP_COOKIE_KEY,""))
.thenReturn("NO_COOKIE");
userCookieHandler = new UserCookieHandler(mockedPreferences);
//test
Programmez! a Dcembre 2015

41

041_043_191 18/11/15 22:05 Page42

String cookie = userCookieHanlder.getCookie();


//success condition
assertEquals("NO_COOKIE", cookie);
}
On notera l'utilisation d'une nouvelle annotation@Mock.
Elle permet de marquer les mock. L'appel :
MockitoAnnotations.initMocks(this);
assure que tous les mocks sont bien initialiss.
Lobjet mock peut ensuite tre script et permet donc de vrifier le bon
fonctionnement de la classe envers ses dpendances.
A travers ce simple exemple, la mise en place et la rdaction de tests unitaires a t explique.
Cette approche est relativement souple et permet de couvrir normment
de cas. Le recours Mockito pour pouvoir mocker les objets rend leur
scripting simple et verbeux. Les assertions peuvent tre encore plus verbeuses et faciles interprter, avec l'aide de la bibliothque AssertJ par
exemple.
Autre point trs important abord ici, la ncessit de refondre le code afin
de le rendre testable. Cette ralit est souvent dure assimiler au dbut
mais est absolument obligatoire.

a Dsactivez Echelle animation transitions,


a Dsactivez Echelle dure animation.

# Premier test

Le premier test va vrifier la prsence d'une ToolBar dans une Activity. De la mme manire que pour les tests unitaires, une bonne faon
d'organiser les tests consiste les regrouper par classe. Ainsi, pour tester
la classe HomeActivity, il faut crer une classe HomeActivityTest.
Les classes de tests doivent hriter de ActivityInstrumentationTestCase2<T> . Attention ne pas hriter de ActivityInstrumentationTestCase
qui a t dprcie.
Il faut aussi fournir un constructeur par dfaut et bien penser crer une
mthode setUp() annote de @Before afin de faire lappel super.setUp()
et injectInstrumentation(). Il est capital davoir cette mthode sinon les
tests choueront tous.
Pour ce qui est des tests, il suffit de les annoter avec l'annotation @Test.
public class PreHomeActivityTest extends ActivityInstrumentationTestCase2<PreHomeActivity> {
private PreHomeActivity preHomeActivity;
public PreHomeActivityTest() {
super(PreHomeActivity.class);
}
@Before
public void setUp() {
super.setup();
injectInstrumentation(
InstrumentationRegistry.getInstrumentation());
preHomeActivity = getActivity();
}

# Un peu de caf?

Pour faire des tests d'intgration, il existe de nombreux frameworks. Cet


article s'attarde sur Espresso car il est officiellement support par Google
et fait maintenant partie de la Android Support library.
Espresso permet de lancer les tests directement sur un terminal et d'instrumenter un parcours utilisateur.
Ici aussi, il faudra mettre jour la liste des dpendances dans le build.gradle de l'application :
androidTestCompile 'com.android.support.test:rules:0.3'
androidTestCompile 'com.android.support.test:runner:0.3'
androidTestCompile 'com.android.support.test.espresso:espresso-core:2.2'
De la mme manire que pour les tests unitaires, les classes de tests ont
leur propre dossier: app/src/androidTest
La dernire tape sera de configurer le test runner. L'Android Support
Library propose l'AndroidJUnitRunner qui fera parfaitement l'affaire dans
un premier temps. Pour indiquer qu'il faut utiliser celui-l, dans le defaultConfig du fichier build.gradle, il suffit d'ajouter la ligne suivante :
android {
defaultConfig {
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
}
Il est aussi fortement recommand de dsactiver les animations sur les terminaux qui excutent les tests. Les animations peuvent en effet provoquer
des effets inattendus, voire mme lchec des tests.
Procdure:
a Allez dans Paramtres > Options dveloppeur,
a Dsactivez Echelle animation fentre,

42

Programmez! a Dcembre 2015

@Test
public void testToolBarIsShown() {
onView(withId(R.id.toolbar)).check(matches(isDisplayed()));
}
}
Espresso offre une API plutt verbeuse ce qui permet d'crire des tests
faciles comprendre. Un peu de la mme manire que pour les tests unitaires, les tests d'intgration se dcomposent en plusieurs tapes. Une
premire qui va crer le contexte souhait et une deuxime qui vient vrifier ou non une assertion.
Les trois composants utiliss pour l'criture d'un test sont les suivants :

ViewMatcher

La manipulation de la UI se fait de manire trs naturelle pour un dveloppeur Android puisqu'il est possible d'accder aux lments via leur ID. On
parle alors de ViewMatchers. Il existe diffrentes alternatives pour cibler
une vue, il est notamment possible de slectionner un groupe de vues via
les Matchers de la bibliothque Hamcrest (intgre Espresso). Il
est aussi possible de rfrencer une vue via ce qu'elle affiche, comme le
texte d'un bouton par exemple.

Action

Une fois la vue slectionne, il est possible dinteragir avec; que ce soit
pour simuler un clic, un scroll ou encore une entre utilisateur. Il est aussi
possible de chaner des actions. On pourra par exemple faire un scroll puis
un clic.

041_043_191 18/11/15 22:05 Page43

Assertion

private Instrumentation instrumentation;

Enfin les assertions servent valider le comportement. Il est possible de


les appliquer la vue slectionne grce la mthode check. Lassertion
la plus utilise est srement le match qui vient vrifier ltat de la vue. Mais
il est aussi tout fait possible dutiliser les mthodes assert.

public UserJourneyTest() {
super(PreHomeActivity.class);
}

QUELQUES EXEMPLES
DE TESTS FONCTIONNELS

@Before
public void setUp() throws Exception {
super.setUp();
injectInstrumentation(InstrumentationRegistry.getInstrumentation());
instrumentation = getInstrumentation();
preHomeActivity = getActivity();
}

Test : le bouton Journal est-il bien prsent?


@Test
public void testButtonJournalIsShown() {
final View decorView = homeActivity.getWindow().getDecorView();
Button journalButton = (Button) homeActivity.findViewById(R.id.gotoJournalBtn);
ViewAsserts.assertOnScreen(decorView, journalButton);
}

@Test
public void testClickOnButtonJournalStartJournalActivity() {
activityMonitor = new Instrumentation.ActivityMonitor(
JournalActivity.class.getName(),null, false);

Le test se fait ici via lutilisation de la classe ViewAssert au lieu de


onViewCheck du test prcdent.

instrumentation.addMonitor(activityMonitor);

Test : utilisation des Rules de JUnit

Une classe de test peut aussi ne pas hriter de ActivityInstrumentationTestCase2<T>. Il est alors possible davoir recours aux classes ActivityTestRule et ServiceTestRule afin dinstrumenter le lancement dun Service
ou dune Activity. Leur utilisation se fait via lannotation @Rule.
Cette approche rduit grandement la quantit de code crire. Si cette
mthode est prfre au fait de faire hriter la classe de test de ActivityInstrumentationTestCase2<T>, elle ne couvre cependant pas tous les
cas et ne marchera pas avec un IntentService par exemple. Il faut donc jongler entre ces deux mthodes et appliquer celle qui convient le mieux la
situation.
public class MyActivityTest {
@Rule
public final ActivityTestRule<MyActivity> activityTestRule = new ActivityTestRule<>(My
Activity.class);
@Test
public void testActivityMethod() {
Intent intent = new Intent();
activityTestRule.launchActivity(intent);

onView(withId(R.id.gotoJournalBtn)).perform(click());
JournalActivity journalActivity = (JournalActivity)
activityMonitor.waitForActivityWithTimeout(5000);
assertNotNull("ReceiverActivity is null", journalActivity);
}
}

Le lancement de lActivity JournalActivity est monitor grce la


classe Instrumentation.ActivityMonitor.
Enfin, il est aussi possible d'utiliser Espresso pour crire des tests unitaires
instruments. Dans certains cas, l'utilisation de mock n'est pas suffisante. Il
est alors possible d'crire des tests instruments qui ne vont pas tester l'interface ou le parcours utilisateur mais des blocs mtiers de l'application.
Pour cela, il faudra plutt que la classe de test hrite de ActivityUnitTestCase. C'est bien en combinant les diffrentes approches qu'il est possible de
couvrir la totalit, ou presque, d'une application.

# Pour aller plus loin


MyActivity activity = activityTestRule.getActivity();
assertEquals(activity.isEmpty(), true);
}
}
La rule qui lance lActivity est dclenche avant chaque test de la
classe. Il est ensuite possible de rcuprer linstance et de tester
ses mthodes publiques.

Test : monitorer le lancement dune Activity


@RunWith(AndroidJUnit4.class)
public class UserJourneyTest extends ActivityInstrumentationTestCase2<PreHomeActivity> {
private PreHomeActivity preHomeActivity;
private Instrumentation.ActivityMonitor activityMonitor;

Les tests unitaires et les tests d'intgration tant en place, lultime tape
est de faire en sorte d'avoir des mtriques sur la couverture des tests grce
un outil comme Jacoco.
Il est aussi possible d'aller encore plus loin dans la porte et l'automatisation des tests. Ainsi, dans certains cas de figure, il peut tre intressant de
tester linteraction de plusieurs applications entre elles. UiAutomator permet d'crire ce genre de tests et offre une trs grande libert quant aux
actions possibles qu'il est possible d'muler. Avec une touche plus oriente QA, UiAutomator peut s'intgrer dans le processus de validation de
l'application.
u

Liens

http://square.github.io/spoon/
http://developer.android.com/training/testing.html
http://robolectric.org/
http://developer.android.com/training/testing/ui-testing/uiautomator-testing.html
http://junit.sourceforge.net/javadoc/
Programmez! a Dcembre 2015

43

044_045_191 18/11/15 22:06 Page44

iOS 9, Swift 2, quest-ce qui a chang ?


Le 16 septembre, Apple a rendu disponible iOS 9 pour les iPhones partir du 4S et les iPad partir
du 2 ou du Mini. Comme laccoutume, une majorit des utilisateurs ont fait la mise jour et 3
semaines plus tard Apple annonait firement 57% du parc dj sous cette dernire mouture.
Pascal Batty,
expert iOS chez SOAT

cute dans un processus spar et intgre les fonctionnalits de Safari


comme le remplissage automatique des formulaires et les extensions. Une
autre nouveaut ct Web est lautorisation des Bloqueurs de contenus :
une app peut maintenant envoyer Safari une liste dlments masquer
ou mme ne pas rcuprer.

App Thinning

Spotlight

Comme Apple propose toujours des iPhones avec 16Go de stockage, la


taille des applications est un souci et iOS 9 apporte 3 axes damlioration
de ce ct Fig.2.
App Slicing rpond la prolifration dassets de tailles diffrentes (@1x,
@2x, @3x), au code compil pour plusieurs architectures diffrentes (32 et 64
bits). Lorsque lutilisateur tlcharge lapplication, lApp Store lui envoie une
version avec seulement les assets et le code correspondants son appareil.
On-Demand Resources est surtout utilis pour les jeux et permet de stocker certaines ressources (des niveaux, textures, sons) sur lAppStore et
de les tlcharger depuis lapp au moment o elle en a besoin.
Bitcode est un nouveau code intermdiaire que le dveloppeur envoie
Apple. Lorsque lutilisateur tlcharge depuis lApp Store, le code est automatiquement optimis pour le CPU cible.

Nouveauts Autolayout

La plupart des dveloppeurs entretiennent une relation damour-haine


avec Autolayout, le moteur de rsolution des contraintes qui permet de
situer les contrles lcran. Avec iOS 9, Stackview propose enfin de
rpartir ses lments la manire de la flexbox : une pile dynamique horizontale ou verticale Fig.3. Avec dautres fonctions plus avances comme
les Layout Guides qui agissent comme des rgles invisibles sur la vue, ou
Layout Anchor qui facilite la cration de contraintes dans le code source,
Autolayout commence devenir utilisable sans sarracher les cheveux.

Safari View Controller et les


Bloqueurs de Contenu

Si la WebView est trs utile pour afficher du contenu Web gnr par une
application ou une navigation bien contrle comme un processus
dachat, certaines apps comme les clients
Twitter, Facebook permettent daccder des
sites web arbitraires. Pour viter de recoder
un navigateur complet in-app, iOS 9 propose
maintenant Safari View Controller, qui sex-

Fig.2

44

Fig.1

Elle propose pourtant peu de nouvelles fonctionnalits majeures et certaines sont rserves aux derniers iPad comme le split-screen. Cest surtout, comme le nouvel OS X El Capitan, une mise--jour de consolidation
avec des amliorations de la stabilit, des performances et de lautonomie.
Mais derrire cette faade relativement inchange, quelles sont les nouveauts pour les dveloppeurs dapplications ? Fig.1.

Fig.3
Programmez! a Dcembre 2015

Le nouveau module de recherche diOS 9 peut prsent accder du


contenu que les applications ont index, laide des API CoreSpotlight
pour lindexation et NSUserActivity qui permet daccder directement au
contenu lintrieur de lapplication Fig.4. Mieux encore, certains contenus
peuvent tre indiqus comme publics et safficher dans le champ de
recherche des utilisateurs qui nont pas lapplication si suffisamment dutilisateurs sen servent.

GameKit

Aprs SpriteKit et Metal, Apple continue dapprovisionner les dveloppeurs de jeux avec une panoplie de nouveaux outils, comme des shaders
pour Metal, Model I/O qui permet de travailler au niveau systme avec les
modles en 3D, mais aussi GameplayKit qui permet de modliser lIA et les
mcaniques dun jeu et ReplayKit qui permet denregistrer des replays
facilement Fig.5.

App Transport Security

Afin de garantir une meilleure sret dans les accs rseau, une nouvelle
couche de scurit est pose sur les API standards comme NSURLSession : par dfaut, les requtes qui ne respectent pas les best practices
(HTTP, TLS 1.2) seront bloques par le systme. Le dveloppeur peut
dfinir des exceptions au niveau de lapplication, pour le moment.

Intgration continue et tests UI

LIDE Xcode 7 embarque aussi son lot damliorations comme une extension du systme existant dIntgration Continue Xcode Bots, mais galement un affichage de la couverture de code et surtout un framework de
Tests UI tout neuf en code natif (plutt que JavaScript, prcdemment). Un

Fig.4

044_045_191 18/11/15 22:06 Page45

do {_
try thisCanFail()
}
catch {
print("Oops !")
return false
}
try thisCanAlsoFail()
doSomethi_ngAfter()
return true

bouton Record permet dautomatiser lcriture du code de manipulation de


lUI en utilisant directement lapplication Fig.6.

Swift 2

Swift 2 a t annonc la WWDC de juin avec notamment la promesse de


le rendre Open Source pour Linux dici la fin de lanne. Apple mise beaucoup sur ce langage et semble vouloir en faire une rfrence et pour cause,
cette mise jour majeure son premier anniversaire apporte quelques
nouveauts bien attendues Fig.7.

Try/Catch et defer

Swift tait sorti sans la moindre gestion des erreurs, ce qui avait surpris
beaucoup de monde. Ce manque est maintenant combl avec une syntaxe
assez simple : try ne dfinit pas un bloc mais se place devant lappel dune
mthode qui peut chouer, il faut alors soit grer lerreur dans un catch,
soit signaler que la mthode peut chouer avec un throws.

Guard

Ruby a montr que les synonymes (comme lutilisation de if et unless) peut


apporter de la clart au code quand il est lu par des humains. Le mot-cl
guard est un conditionnel comme if qui garantit que lon sorte du scope sil
est rempli, par un return ou une erreur par exemple.
guard let name = json["name"] as? String else {
return .None("missing name")
}

func higherFunction() -> Bool {


do {
try thisCanFail()
}
catch {
print("Oops !")
return false
}
doSomethingAfter()
return true
}

a peut tre utile pour clarifier les cas limite en entre de mthode, plutt
que dimbriquer des if, surtout avec les tests des Optionals qui pouvaient
donner choses assez sales.

Availability Checking

Lerreur nest pas une classe mais un protocole ErrorType auquel il faut se
conformer. Il est important de noter au passage que dans le bridge avec les
fonctions Objective-C, la convention dutiliser une rfrence vers NSError
sera traduite avec ce nouveau systme en Swift, propre ! Plutt que de proposer un finally, Swift 2 apporte le mot-cl defer , que lon peut mettre o
lon veut dans le scope et qui dfinit un bloc de code qui sera excut la
sortie, quoi quil arrive.
func higherFunction() throws -> Bool {
defer { doSomethingAfterNoMatterWhat() }

Mme si la plupart des utilisateurs mettent docilement jour leur appareil,


ce nest pas forcment le cas de tout le monde et il peut parfois tre difficile
de supporter les anciennes versions de lOS tout en profitant des nouveauts allchantes Fig.8. Xcode 7 observe maintenant les API utilises par le
code et signale si elles ne sont pas disponibles dans toutes les versions
supportes par lapplication. Il est alors possible de les isoler derrire une
condition sur la version de lutilisateur, ou bien de signaler quune fonction
ou mme une classe ncessite une version spcifique pour fonctionner.

Protocol Extensions

Swift permet, comme Objective-C, les protocoles (similaires aux Interfaces


en Java ou en C#) et les extensions (possibilit de rajouter des fonctions
un objet). Swift 2 apporte la possibilit de dclarer des extensions de protocoles, en dautres termes dimplmenter du code dans ces derniers. On se
trouve alors dans un environnement qui permet une certaine forme dhritage multiple ! a peut faire un peu mal la tte mais les crateurs du langage
y voient un nouveau paradigme : la Programmation Oriente Protocole.

Beaucoup de choses, en fait

Fig.7

Ce nest pas tout : Swift 2 intgre de nouvelles faons dutiliser le Pattern


Matching et beaucoup de sucre syntaxique, 3D Touch implique galement
de nouvelles API, les Storyboards sont plus faciles utiliser Une mise
jour qui ne semble pas changer normment de choses pour les utilisateurs fourmille en fait de nouveauts
Fig.6
juteuses. Cette anne 2015 se montre
finalement trs riche du ct des dveloppeurs de lcosystme Apple, avec
deux nouveaux OS pour lesquelles crer
de nouveaux types dapplications : watchOS 2 et tvOS.
u
Fig.8

Fig.5
Programmez! a Dcembre 2015

45

046_052_191 19/11/15 09:01 Page46

Les nouvelles
architectures logicielles

1re partie

Linformatique repose sur des architectures matrielles et logicielles. Je ne vous apprends rien. Certaines
existent depuis quasiment les origines de linformatique moderne , dans les annes 1970, dautres sont
bien plus rcentes. On parle beaucoup du Cloud Computing, mais le Cloud nest finalement quune
volution darchitectures utilises depuis de nombreuses annes.
Les architectures voluent tout naturellement avec les volutions techniques,
les nouveaux langages, les nouvelles technologies. Ces volutions ont un impact direct sur les
applications et donc sur vous, les dveloppeurs. Ces changements sont parfois masqus, car vous
ntes pas toujours au contact direct.
Programmez ! vous propose un dossier en plusieurs parties pour explorer quelques architectures.
Nous aborderons, en vrac : le Cloud Computing, les architectures dites lambda, les microservices,
les conteneurs.
La rdaction.
Dans cette 1ere partie : nous parlerons de microservices et de Java.

Les architectures microservices


Larchitecture Microservices a fait couler beaucoup dencre dernirement : il est temps de faire le point.
Jrme
Doucet
Romain
Niveau
Consultants
Xebia
L'ide derrire ce terme est disoler chaque
fonctionnalit dans un composant qui lui est
propre. Les diffrents services dcoulant de ce
dcoupage communiquent au travers du
rseau plutt que par des appels de fonctions
dans un processus. Une application
microservices reprsente alors un systme
constitu dun certain nombre de petites units
indpendantes qui collaborent entre elles,
ayant chacune un cycle de vie et une
responsabilit propre.
Cette architecture rpond des problmes
rcurrents que posent les architectures
monolithiques traditionnelles.

LES CONCEPTS

Les Architectures monolithiques et leurs problmes

Larchitecture monolithique est lune des plus


rpandues dans les projets informatiques.

46

Programmez! a Dcembre 2015

Plusieurs raisons expliquent cela. Au dbut


dun projet, quand celui-ci est encore de petite
taille, elle reste trs simple comprendre
favorisant la maintenabilit et la testabilit. Le
dploiement, facile et rapide mettre en place,
permet de se concentrer sur les fonctionnalits
plutt que sur linfrastructure. Il permet
galement de faire de l'intgration continue
peu de frais. Cependant, au cours de l'volution
dun projet, cette architecture montre
frquemment ses limites.

Un autre effet pervers de larchitecture


monolithique est de rendre une application
dpendante certaines technologies,
obligatoirement compatibles entre elles. Choisir
Java limitera les volutions futures aux
technologies compatible avec la JVM, C# aux
technologies Microsoft, etc. Si un framework
utilis par lapplication devient obsolte, la
migration vers un nouveau peut ncessiter la
rcriture complte de lapplication avec les
risques que cela comporte.

Maintenabilit du code

Dploiement en continu

Si en dbut de projet, la simplicit du modle


monolithique favorise grandement la
comprhension du code, ceci devient de moins
en moins vrai au fur et mesure que le volume
de code augmente, et ce, mme avec une
organisation rigoureuse de ce dernier. Un
nouveau venu mettra davantage de temps
tre pleinement oprationnel.
Parce quil ny a pas de frontires fortes entre
les modules dune application monolithique,
elles auront tendance seffacer, affaiblissant
la modularit, complexifiant les relations de
dpendance. Le code devient de moins en
moins lisible et testable, la productivit et la
qualit baisse et enfin la dette technique
saccumule.

Une application monolithique semble simple


dployer. Puisque toute lapplication est
destine s'excuter sur un mme serveur,
celle-ci est trs souvent contenue dans une
archive dploye sur celui-ci. Une usine
logicielle pourra rapidement et facilement tre
configure avec les taches de dploiement
adquates. Cependant, dployer toute
lapplication, quelles que soient les
modifications rellement effectues, pose
divers problmes. Premirement, le temps de
dploiement sallonge, tendant limiter leur
nombre. En effet, la taille de lapplication
augmentant, le container prend plus de temps
pour effectuer les dmarrages applicatifs.
En consquence, le dploiement continu

046_052_191 19/11/15 09:01 Page47

devient plus complexe, ce qui engendre une


augmentation des risques associs chaque
dploiement et une perte de productivit.

Scalabilit

Lorsque la charge dune application augmente,


la scalabilit de lapplication devient un point
critique. Une application monolithique nayant
quune capacit assez limite (car celle-ci ne se
fait que dans une dimension), on ne peut avoir
que des copies de lapplication entire. Or les
diffrents composants de lapplication nont
vraisemblablement pas les mmes besoins en
ressource. Certains vont faire un usage intensif
du processeur, dautres de la mmoire,
dautres des entres / sorties. Scaler une
application monolithique peut entraner une
augmentation de la consommation des
ressources consquentes de manire inutile.

Les principes de
larchitecture microservices
Une nouvelle chelle

Ce qui est le plus visible de prime abord est le


changement d'chelle qui s'opre avec les
microservices. Lapplication devient un
systme dinformations, dont le microservice
constitue l'unit lmentaire. Ces units sont
strictement indpendantes les unes des autres.
Elles ont chacune leur propre base de code de
donne et pile technologique. Chaque service
peut ainsi utiliser les technologies les plus
adaptes son besoin. Il devient aussi possible
dallouer les ressources souhaites chaque
type de service. Il est galement envisageable
de choisir un nombre dinstances diffrent par
service, amliorant grandement l'efficacit de la
scalabilit. Un service devant supporter une
forte charge possde plus dinstances
d'excutions quun service faiblement sollicit.
Selon le mme principe, les donnes dun
service peuvent tre mises jour, migres,
traites sans risquer dimpacter les autres
fonctionnalits du systme. Dans une
architecture microservices, chaque service est
diffrent voluant selon son propre rythme.

volutivit et automatisation

Lorsquune fonctionnalit prcise du SI doit


tre modifie, lvolution en question ne porte
que sur le code dun service en particulier. Les
autres services ne seront pas impacts. Ainsi,
la modification du code ou des donnes dun
service provoque uniquement la mise jour et
le redploiement de celui-ci car il sexcute
dans un processus isol. Il ny a aucune
obligation dembarquer des mises jour
dautres fonctionnalits dveloppes en
parallle, celles-ci impactant dautres services

dont le code est spar. De la mme faon, la


prsence dune anomalie sur une fonctionnalit
ne bloque pas lvolution ou le dploiement
dune autre. Il est possible, grce ces
caractristiques, denvisager de prototyper,
dployer et tester une nouvelle fonctionnalit
sans remettre en cause lensemble des
services. Dans cette architecture, lchelle de la
modification est donc, non pas un ensemble de
fonctionnalits assembles dans une
application, mais la fonctionnalit, porte par
le service.

Services et communication

Pour que le systme fonctionne correctement, il


est donc ncessaire que les services
communiquent entre eux. Le vecteur de cette
communication a pour unique rle dassurer
une transmission fiable des messages. Le
systme suit la rgle suivante : Smart end
point, dumb pipe. Lintelligence du systme
est contenue dans les services, pas dans le
vecteur. Les deux modes de communication les
plus courants sont celles de type REST et bus.
Lorsquun service dpend de messages fournis
par dautres services en amont, la
communication est gnralement asynchrone et
une architecture microservices va tendre vers
une architecture ractive, base dvnements
dclenchs et couts par les services.

Tolrance et monitoring

Une des grandes forces des architectures


microservices est sa robustesse et sa tolrance
aux pannes. En effet, plutt que de se protger
tout prix de ce qui pourrait poser problme dans
le systme, lapproche adopte par les
microservices est ladaptation. Un service est
conu dans loptique que le reste du systme
puisse tre disponible, quune donne ncessaire
puisse tre absente ou au contraire quun
message puisse contenir des donnes
superflues. Le service est alors capable de
fonctionner la fois en mode nominal et en mode
dgrad. De plus, ses interfaces, suffisamment
souples, supporteront les carts.
Malgr cette tolrance, le systme doit tre
surveill en permanence. Les pannes peuvent
compromettre le fonctionnement du systme
global. Ainsi, il devient ncessaire dtre capable
de dtecter rapidement une panne pour pouvoir
intervenir. Il est galement important de surveiller
le systme et les services dun point de vue
fonctionnel. Son bon fonctionnement passe par la
surveillance dindicateurs mtiers : transactions
valides, en erreur, quantit de commandes,
envois de messages en erreur, nombre
dinscriptions, etc. Tous ces indicateurs mtiers
sont les premiers rvlateurs dun problme.

LA MISE EN OEUVRE
Quels outils ?
Cloud

Les architectures microservices ont besoin


dune infrastructure souple et robuste la fois.
Un nouveau serveur doit pouvoir tre
provisionn en quelques minutes pour
permettre un service de monter en charge
rapidement. Il doit galement pouvoir tre
dcommissionn facilement si celui-ci nest
plus utile. Le Cloud reprsente le candidat
privilgi pour rpondre ces besoins. Des
solutions de Cloud public comme AWS
dAmazon ou Azure de Microsoft permettent de
raliser ces oprations pour un cot moindre
par rapport une infrastructure prive. Ils
proposent de nombreux services allant du
provisionning de CDN aux solutions dAPI
management. Du cot des Clouds privs,
OpenStack se place comme la solution
permettant de construire son propre Cloud. La
solution est sponsorise par des socits
comme Google ou encore Red Hat.

Conteneurs

Issue de travaux anciens sur le systme


dexploitation Unix (les C-groups), la
conteneurisation arrive aujourdhui maturit,
le projet Docker en est l'exemple le plus
significatif. Cette technique consiste isoler
lutilisation des ressources de type processeur,
mmoire et disque par application sur une
mme machine. Lutilisation de ces
technologies dans une architecture
microservices offre un avantage indniable.
Chaque service correspond une image, livre
sur un catalogue dentreprise. Celle-ci peut
tre construite et mise disposition
directement par lusine logicielle. Ainsi, il nest
plus ncessaire de sadapter des principes
de dploiement propre chaque cosystme
logiciel (JEE, Play, Vert.x, Node.js, Python, etc.).
Le dploiement est uniformis et simplifi : il
sagit de dployer un conteneur par
microservices. La conteneurisation facilite
galement les tests dintgration, quils soient
raliss sur le poste du dveloppeur ou sur un
serveur ddi. En effet, il est beaucoup plus
facile de recrer de toutes pices des
environnements base de conteneurs que de
crer une infrastructure physique supportant un
monolithe et ses dpendances, limage de la
production. La boucle de feedback, ainsi
acclre, est porte directement par lusine
logicielle et ne ncessite plus de dploiement
sur un environnement identique la production
dcorrl du cycle de dveloppement.
On touche ici une problmatique la limite
Programmez! a Dcembre 2015

47

046_052_191 19/11/15 09:01 Page48

des mondes Dev et Ops. Le choix de cette


technologie, impactant toutes les couches du
SI, doit se faire de manire concerte.

Supervision

Les bases de donnes de type Time Series


permettent de stocker, avec une grande
fiabilit, des mtriques intervalles rguliers.
Les quipes oprationnelles ont lhabitude de
travailler avec ce type de bases qui permettent
de rcolter les informations minimales utiles
la dtection des pannes. Il sagit en gnral des
mtriques bien connues comme le CPU, la
mmoire, lespace disque, les entres / sorties,
etc. Les dveloppeurs y portent un intrt
croissant, en particulier pour stocker des
mtriques applicatives, techniques voire
mtiers. Graphite, trs populaire ces dernires
annes, a atteint ses limites en termes de
scalabilit. On lui prfrera donc des projets
plus rcents, embarquant nativement la notion
de clustering tels que InfluxDb, entirement
compatible avec Graphite, talonn de prs par
OpenTSDB. Le stockage des donnes est
important, lexploitation et la visualisation le
sont tout autant. Aucune des bases de
donnes nommes ci-dessus ne propose de
systme dalerte. En revanche, elles s'intgrent
trs facilement avec des outils classiques
dexploitation, comme Nagios, Shinken, Icinga
ou Sensu. Les outils de dashboarding bass
sur Graphite sont nombreux et leurs volutions
rcentes permettent de s'intgrer facilement
avec InfluxDb. Le projet le plus populaire est
Grafana.

Framework

Les services des architectures microservices


sont par dfinition lgers en code et en
fonctionnalits. Il doit donc en tre de mme
pour les frameworks utiliss au sein de ces
services. Par exemple, Vert.x apporte plusieurs
briques ncessaires dans la communication
entre services comme un bus de messages ou
un serveur de websocket. Lger, son cot
polyglotte permet de choisir le bon langage
pour le bon service tout en ayant la mme
base, ce qui est un plus en termes de
cohrence pour le systme. Spring Boot
permet quant lui de dvelopper rapidement
des services grce ses diffrents profils
dapplication prts lemploi. Lobjectif de
Spring Boot est de pouvoir dployer facilement
des applications standalone embarquant ellesmmes le serveur choisi (tomcat ou jetty), le
tout fournissant par dfaut des mtriques
permettant un suivi de lapplication en
production. Enfin, sans en tre un framework,
node.js reprsente un exemple type doutil

48

Programmez! a Dcembre 2015

utilis dans une architecture microservices. Sa


lgret, sa rapidit d'excution couple la
rapidit du dveloppement li au langage
Javascript en font un trs bon candidat pour
des microservices. Le modle i/o non bloquant
de node.js lui permet de tenir particulirement
bien la charge.

Quelle organisation ?

La mise en place dune architecture


microservices dans des quipes implique une
certaine rorganisation. Une architecture
microservices induit des micro-quipes, en
interaction constante, connaissant parfaitement
le mtier et la technique des quelques services
leur charge. Les services correspondent
une fonctionnalit issue dun besoin mtier
autour duquel sorganise une quipe (Feature
team) qui a la matrise du produit.
De la multiplicit des services dcoule le
besoin dautomatisation des dploiements. Il
nest plus envisageable lorsque les services se
comptent en dizaines de les dployer
manuellement. En consquence, les quipes
doivent accueillir de nouveaux processus
dautomatisation dans lesquels loutil occupe
une place importante. Le mouvement DevOps
est la continuit logique de la mise en place
dune architecture microservices, permettant
ractivit et souplesse en production.
Enfin, du point de vue des volutions, il est
important de garder un contrle et une vision
densemble, grce, par exemple, une
cartographie de son SI. Celle-ci permet de ne
pas dvelopper des fonctionnalits identiques
et de connatre le spectre technologique dont
est compos son SI. Ainsi, on veille appliquer
les correctifs de scurit sur lensemble de son
parc technologique et ne pas sexposer aux
attaques diriges vers des versions
vulnrables.

LES LIMITES

De nouveaux problmes ?

Les microservices proposent des solutions


des problmatiques connues et hrites
darchitectures orientes services dj en
place. Nanmoins, toute nouvelle solution
apporte des problmes quil est possible
d'identifier afin de sen prmunir.

Taille des services

Le plus grand principe des microservices


concerne la taille de ces services. Celle-ci nest
pas rgie par des rgles prcises du fait de
labsence (souhaitable) de norme ou de
spcification. Plusieurs piges sont toutefois
viter. Il est frquent lors du dveloppement de
services de vouloir regrouper plusieurs petits

services en un seul "macroservice" afin de faciliter


la communication entre celui-ci et le reste du SI.
Ceci va regrouper la complexit des services en
un seul qui va de facto, devenir plus difficilement
maintenable. Un autre cueil est la tentation du
nanoservice. Transformer chaque mthode
dune application monolithique en microservice
gnrera une quantit importante de services. La
communication de ses services nen sera que
plus complexe pour un apport limit en termes de
souplesse. Il est donc important de trouver un
juste milieu entre des services imposants et des
services trop petits. Une rgle communment
admise est: une personne qui dcouvre un
service doit pouvoir en comprendre le code et le
fonctionnel en une journe.

Manque dautomatisation

La philosophie des microservices est de


pouvoir ajouter rapidement et simplement des
services un systme. Si le temps de
dploiement ou le redmarrage dun service
ncessite une intervention humaine coteuse
en temps, alors le systme se confrontera un
problme. Pour lviter et permettre un systme
volutif et rsilient, il faut automatiser au
maximum les dploiements dapplications mais
galement lajout de nouveaux serveurs. Pour
cela, le Cloud permet de bnficier de
capacits machines quasiment illimites et des
outils, comme Docker, facilitent
lautomatisation des dploiements et la
rplication des services.

Systme de supervision dfaillant

La multiplicit des services entrane une


complexification de la supervision du systme.
Que la communication entre services se passe
par bus de messages ou par APIs, cette
supervision doit tre automatise au maximum.
En effet, le nombre de services crot
rgulirement au fur et mesure de la vie du
systme. Il devient vite impossible pour un
humain de suivre tous les services
manuellement. Pour pallier ce problme,
chaque service doit fournir ses propres
mtriques au systme de monitoring. Elles
doivent tre techniques mais galement
business afin de pouvoir mesurer en temps rel
lapport mtier dun service. Des rgles
dalertes automatiques doivent tre mises en
place afin de savoir lorsquun service
commence ne plus fonctionner correctement.
Lidal est de disposer dun systme autonome
capable de relancer un serveur dfaillant de
manire automatique, toujours sans
intervention humaine.
Un autre problme li cette multitude de
services est lexploitation des fichiers de logs.
Pour un service unique dploy sur plusieurs

046_052_191 19/11/15 09:01 Page49

serveurs, celle-ci peut s'avrer tre fastidieuse.


Une bonne solution consiste centraliser les
logs des services au mme endroit, dans le
systme lui-mme avec des solutions comme
Flume ou ELK ou bien grce des services
SaaS comme papertrail ou logmatic.

Profusion des technologies

Mme si les microservices permettent


lutilisation de diffrents langages, il est
important de veiller ne pas multiplier les
langages inutilement. Cette profusion de
technique rendra le passage dun service un
autre compliqu pour les dveloppeurs et
complexifiera le systme inutilement.
Le mme constat peut tre fait avec les bases
de donnes. Il est possible, et mme conseill,
de choisir un type de base de donnes
correspondant chaque service. Il faut
toutefois viter de multiplier le nombre de
bases diffrentes. Garder un type de base
relationnelle et un type de base NoSQL peut
tre un bon compromis.

Sur le chemin des


microservices

Avec lmergence des architectures


microservices, beaucoup de projets se sont
lancs dans laventure sans toujours rencontrer
le succs escompt. En effet, comme nous
lavons vu prcdemment, les microservices
rpondent trs bien aux problmatiques de
charge et de scalabilit mais peuvent
compliquer le systme dans son ensemble.
Fort de ce constat, Marin Fowler, un des
prcurseurs de ce type darchitecture propose
deux concepts permettant un cheminement
vers les microservices : Monolith First et
Sacrificial Architecture.

Monolith First

Deux observations simposent aux yeux de


Martin Folwer :
a La plupart des succs de ces projets
viennent dun monolithe devenu trop gros et
qui a clat en microservices;

a La plupart des projets ayant dmarr


directement en microservices ont connu de
srieux problmes en cours de route.
Plusieurs raisons expliquent ces observations.
Les microservices sont efficaces si leurs
domaines fonctionnels sont bien isols. Au
dbut dun projet, il est parfois complexe de
dlimiter prcisment chaque service. Ceci va
entraner plusieurs phases de refactoring quil
est bien plus facile dentreprendre dans un
monolithe que dans plusieurs services
communiquant via des APIs ou un bus.
Lors de linitialisation dun projet, une
architecture microservices sera plus longue
mettre en place. Pour une startup ou un projet
sans visibilit forte du march potentiel, ce cot
de dmarrage peut tre un problme quand le
but est d'arriver rapidement un produit fini.

Sacrificial Architecture

Le deuxime concept propos menant sur le


chemin des microservices est la Sacrificial
Architecture. Ce concept part du constat
suivant : le code crit aujourdhui pour un projet
ne sera plus adapt dans deux ans.
En effet, il est trs difficile voire impossible de
savoir comment va voluer un projet. Le
succs sera peut tre immdiat ncessitant
une volution rapide du code. A contrario, le
projet ne rencontrera peut tre pas son public
et un investissement trop lourd ds le dpart
aura des consquences nfastes pour
lentreprise. Au lieu de prvoir lvolution long
terme de larchitecture du projet, il est
prfrable dinitier une architecture jetable
permettant de sortir rapidement un produit.
Ensuite seulement, en fonction de lvolution
du projet, il sera possible de poser une
architecture plus solide, absorbant mieux la
charge et permettant une volutivit plus
simple. Le rapprochement avec le concept de
monotith first est vident. Suivant le projet, il
peut tre prfrable de partir sur une
architecture simple et rapidement
oprationnelle afin de sortir le plus tt possible
un produit puis dadapter (voire mme de jeter)

larchitecture pour voluer vers un systme


plus maintenable et robuste.

CONCLUSION

Les architectures orientes services ont pilot


la mise en place des SI de ces 10 dernires
annes. Le constat majoritaire est une capacit
voluer qui diminue avec le temps du fait de
la difficult disoler les volutions dans le
systme. En effet, les applications dont il est
compos sont en majorit des monolithes qui
runissent un assemblage htrogne de
fonctionnalits de plus en plus nombreuses
avec le temps. ces problmatiques, les
microservices proposent une rponse simple :
diminuer lchelle de larchitecture. Cette
chelle traduit une isolation ncessaire des
fonctionnalits diffrents niveaux : code,
donnes, dploiement et excution. Cette
rduction de la granularit a des revers et exige
un certain investissement au niveau
technologique, mthodologique
(Craftsmanship, DevOps) mais aussi et surtout
au niveau organisationnel (Agilit, Feature
Teams). Lmergence de nouveaux outils
facilite galement le passage aux
microservices. Le Cloud ou les technologies de
conteneurisation sont les instruments idaux
pour leur mise en place.
Toutefois, les microservices ne constituent pas
non plus une recette universelle. Un systme
peu complexe sans problmatique de charge
ou dont le rythme dvolution est faible ne
bnficiera pas de lapproche microservices. Ils
ne garantissent pas une simplification du
systme global mais permettent la
simplification de son volution. Certaines
briques du systme ne sont en effet pas
constamment bouscules par des besoins
dvolution. On peut donc tout fait envisager
de faire cohabiter le cur monolithique du
systme, plus constant, avec en priphrie des
briques conues en microservices pour les
besoins les plus mouvants.

PROGRAMMEZ ! sur mobile et desktop


ANDROID

WINDOWS PHONE

Programmez! a Dcembre 2015

49

046_052_191 19/11/15 09:01 Page50

Lart de larchitecture en Java


On va mettre laccent sur les tapes suivre pour aboutir une bonne architecture, solide, robuste et
maintenable. Pour commencer, on va voir comment bien choisir les technologies. Ensuite on va
examiner larchitecture en tudiant les diffrents outils utiliser dans un projet. Puis on va voir les
techniques et les stratgies mettre en place pour bien dvelopper. Enfin on va voir comment
maintenir le code travers les tests unitaires et les tests dintgrit.
Bouhanef Hamdi
Dveloppeur full-stack chez sfeir
https://fr.linkedin.com/in/bouhanef-hamdi-62386051

Dridi Manel
Freelance web
https://www.linkedin.com/in/manel-dridi-ep-bouhanef-908316105

Cest quoi une architecture logicielle

Il existe plusieurs dfinitions pour dire ce quest une architecture. Une


architecture peut tre vue comme un ensemble des techniques, rgles et
paradigmes qui devraient tre mis en uvre pour garantir le bon
droulement des processus du dveloppement dun logiciel. On peut
aussi le voir comme la dcomposition physique du systme et la
communication entre ses composants, notamment dans les architectures
employes par les quipes de l'infrastructure. Cela peut tre encore la
dcomposition logique du besoin en plusieurs sous-composants, qui
sont indpendants (pour la maintenabilit) et qui communiquent aussi
entre eux. Nous allons dans cet article mettre la lumire sur la premire
et la troisime architecture.

Diviser pour mieux rgner

Tout d'abord, il est prfrable d'tudier tous les besoins du projet (mme
les besoins prvisionnels) et d'essayer de les diviser en sous-modules
(surtout quand le projet est assez grand). Ces composants doivent pouvoir
exister indpendamment des autres composants, ils ont leur propre cycle
de vie et exposent une API pour communiquer, cette API peut tre soit du
REST, SOAP, RMI, RPC... Quelle que soit la norme utilise, le module doit
pouvoir communiquer avec l'extrieur ou avec les autres modules.

Le mdiateur

Les architectures 1 tiers

Vu la rvolution technologique laquelle on fait face, cette architecture a


tendance disparatre, on l'appelle aussi application stand alone. Ces
applications en gnral ne communiquent avec aucun composant sur le
rseau et sont contenues dans une seule unit physique (ordinateur ou
terminal). Par exemple les applications de ligne de commande ou une
application sur votre PC qui ne fait aucune interaction avec l'extrieur.

Les architectures deux tiers (Client-Serveur) Fig.1.

Les architectures deux tiers sont aussi appeles des architectures clientserveur. Dans ce type d'architecture, on a deux composants qui sont le
client, cest celui qui fait la demande, et le serveur qui la traitera et
renverra une rponse; par exemple cette architecture est utilise pour
communiquer entre une application et la base de donnes.

Les architectures n-tiers

Dans ce type d'architecture, on peut avoir n modules (aussi appels


composants ou services) qui sont spars d'une manire logique
(sparer les traitements et les donnes dans diffrents packages, mais
dans le mme ordinateur) ou physiquement (mettre les services dans des
machines diffrentes). Lavantage avec ce type darchitecture, cest quil
est ouvert tous les systmes. Quand on conoit que notre systme est
de type n-tiers, les services sont ouverts tout type de technologies
(REST, SOAP...) Fig.2.

Couche Prsentation

Cette couche dpend des technologies utilises, et dpend de la portabilit


de lapplication. On va voir dans cette section les diffrents types de
terminaux et les diffrentes structures mettre en uvre pour cette couche.

Fig.1

Ce composant est facultatif, cela dpend du choix fait au dbut. Les


modules peuvent avoir un cycle de vie indpendant et une API
indpendante (dans le cas des APIs Google par exemple), ou peuvent
tre grs au sein d'un conteneur, qui, lui, va grer le cycle de vie du
module ou composant; il grera aussi la communication entre les
composants (dans le cas de lIDE Eclipse par exemple, les plug-ins sont
les composants ou les modules et le core d'Eclipse est le mdiateur).

CHOIX TECHNOLOGIQUE

Avec l'explosion des technologies et des frameworks, il devient de plus


en plus difficile de choisir la ou les technologies mettre en uvre pour
russir le projet.

Les types darchitectures

Il existe plusieurs types d'architectures logicielles, suivant votre besoin,


vous pouvez choisir l'une ou l'autre.

50

Programmez! a Dcembre 2015

Fig.2

046_052_191 19/11/15 09:01 Page51

HTML gnr ct serveur

Dans ce type darchitecture, la couche prsentation est spcifique un


seul type de prsentation qui est le Web, en plus le HTML est gnr
ct serveur et envoy au client. Plusieurs technologies et frameworks
permettant de crer ce type darchitecture:
a JSP (Java server page), Servlets et JSTL (Java server page
Standard Tag Library) : Les JSP, les servlets et les JSTL sont les
composants Web de la spcification Java EE qui permettent dajouter
une touche dynamique ct serveur pour mettre jour une ressource
avant de lenvoyer au client.
a JSF (Java server face) : JSF est un framework spcifi par Oracle,
qui permet dimplmenter le patron de conception MVC. Avec JSF, la
gestion des objets est transparente en plus partir de sa version 2.
JSF a beaucoup facilit son utilisation avec les annotations.
a Struts : Cest un concurrent de JSF, chacun a ses avantages et ses
inconvnients.

HTML + AJAX

Aprs lintroduction de la technologie AJAX (Asynchronous JavaScript


and XML), la communication avec le serveur est devenue plus facile et
plus rapide. Avec cette technologie, le navigateur naura pas recharger
tout le HTML chaque demande. Le principe est denvoyer en arrireplan des demandes au serveur Web, puis de modifier le contenu de la
page actuellement affiche par le navigateur Web en fonction du rsultat
reu du serveur Fig.3. Il y a des frameworks qui permettent de combiner
les deux (JSF et STRUTS), puisque le HTML est gnr par le serveur et
contient le mcanisme AJAX.

grer une partie du front-end ou de la couche prsentation, mais aussi


permet dexposer des API REST avec des annotations et dune
manire transparente.
a Jersey (JAX-RS): Il permet de faciliter le dveloppement des services
Web en implmentant les JSR 311 et JSR 339 dOracle.
a Google Endpoint: Cette technologie est cre par Google, et utilise
exclusivement si lapplication est dans google Appengine. Elle permet
de crer les APIs et de grer sa scurit.

Web service SOAP

Les Web services Soap sont des services permettant de communiquer


entre les plateformes htrognes comme les Web services REST, la
diffrence de ce type de Web services qui sont plus scuriss
nativement, et sont plus structurs (la structure dchange est dfinie
ds le dbut par les WSDL (Web Service Description Language).
a JAX-WS : Cet ensemble dAPIs prsente plusieurs facilits pour
implmenter le service et le client.
a Spring Web Services: Cest un des modules Spring qui permet de
crer, grer et dployer facilement des services Web de type Soap.

Couche donnes

Dans cette partie on va voir plus en dtail la partie donnes, et comment


grer, modifier et supprimer les donnes. On va galement voir quelques
astuces pour augmenter la performance dune application.

Les bases de donnes relationnelles

Un troisime type de framework permettant de gnrer le code source du front


(JavaScript) avant le dploiement de lapplication, dans le processus de
compilation. Un exemple trs connu de ces frameworks: GWT (Google Web toolkit) qui est un framework permettant dcrire le code de lIHM en java, comparable
swing, et gnre le JavaScript correspondant, et cela avant le runtime.

Les bases de donnes relationnelles sont les bases de donnes dont les
objets lmentaires (ou tables) sont en relation.
a Oracle: Oracle est lun des gestionnaires de bases de donnes les plus
utiliss au monde, notamment pour les secteurs dlicats comme le secteur
de la finance, des banques Son avantage est quil peut supporter une
trs grande volumtrie de donnes, et grer efficacement la scurit.
a Postgresql : base de donnes open source et gratuite.
a MySql : Cette base de donnes peut grer efficacement les donnes.

Couche Mtier

Les bases de donnes No-SQL

Gnration JavaScript la compilation

Dans cette partie, on va voir en dtail comment choisir les technologies


pour la partie serveur, puis la diffrence entre chaque technologie.

Injection de dpendance et inversion de contrle

Linversion de contrle est un mcanisme puissant permettant de reporter


linitialisation des objets et linjection de leurs valeurs pour plus tard; il est
utilis par la plupart des frameworks pour prendre le contrle sur les
objets de lapplication sans que lapplication soit lorigine de cette
demande. Il y a plusieurs frameworks permettant de grer linversion de
contrle et linjection de dpendance, voici les plus connus:
a Guice : Google Guice est un framework cr par Google, permettant
dintroduire un mcanisme dinjection de dpendance.
a Spring core: Spring est un framework qui propose des solutions pour
la plupart des besoins (batch, scurit, Web service, injection de
dpendance, inversion de contrle, dynamique proxy. ) avec un
mcanisme robuste dont linjection de dpendance. La configuration
est facile mettre en place, surtout aprs la version 3 de Spring,
lutilisation des annotations est devenue possible.

Ces bases de donnes, linverse des bases de donnes relationnelles,


ne se fondent pas sur les relations entre les objets. Utilises par la
plupart des gants comme Google, Facebook Il y a plusieurs
reprsentations, suivant les besoins, des bases NoSQL:
a A base de cls-valeurs: Cest la plus simple mettre en uvre, mais
inefficace si la manipulation majeure de la base est effectue sur des
parties des valeurs. Exemple Oracle NoSQL, CouchDB

Web service REST

Plusieurs frameworks sont mis en place pour pouvoir faciliter et


normaliser lutilisation des APIs (REST). En voici quelques-uns:
a Spring MVC : Spring MVC est le module de Spring qui permet de

Fig.3
Programmez! a Dcembre 2015

51

046_052_191 19/11/15 09:01 Page52

a A base de colonnes: Elles ont t cres pour grer des donnes


rparties sur plusieurs machines, leur principe est de multiplier les
cls uniques pour pointer sur plusieurs colonnes. Les colonnes sont
disposes par famille. Exemple: Cassandra, HBase, BigTable
a A base de documents: Elle est le niveau succdant au modle clsvaleurs. Cest une collection qui peut contenir des cls-valeurs dont les
valeurs peuvent aussi tre des collections. Les donnes sont
enregistres dans des formats JSON. Cela permet une efficacit dans
la recherche l'intrieur des valeurs. Exemple: Lotus Notes, MongoDB
a A base de graphe: Pour faciliter lutilisation des relations (comme les
bases de donnes relationnelles), un systme de graphe est mis en
place. Cela dpend du fournisseur de base de donnes; il y a ceux qui
proposent une API REST et dautres qui proposent des APIs de
requtage (intgrant les diffrents langages de programmation). Mais
ce jour, il ny a pas de formalisme ou de normalisation pour les
requtes des bases de donnes NoSQL. Exemple: Allegro

La GED (Gestion lectronique des documents)

Accs aux donnes

Cela dpend des choix technologiques, plusieurs types de serveurs existent:

Plusieurs mcanismes permettent laccs aux donnes, cela dpend de


lapplication, la base de donnes et le besoin de structuration des donnes.
a JDBC (Java DataBase Connectivity) : Cest un ensemble dinterfaces
permettant de normaliser la communication avec les bases de
donnes relationnelles. Il existe des pilotes pour la plupart des
fournisseurs de bases de donnes.
a JPA (Java Persistance API) : Cest un ensemble dinterfaces
permettant de reprsenter des bases de donnes relationnelles sous
forme dobjets et classes Java.
a Hibernate : Cest un des frameworks les plus utiliss, il permet la
persistance des donnes avec une ou plusieurs bases de donnes
relationnelles.
a Spring data: Cest un des modules de Spring, il est constitu de
plusieurs sous-modules permettant tous, la gestion des donnes, NoSQL
et relationnelle. Exemples: Spring Data Mongo, Spring Data Hadoop...
a Objectify : Cest un framework permettant dutiliser les bases de
donnes Datastore dAppengine.

Les couches annexes

Ces couches peuvent tre reprsentes dans les services ou dans une
couche part. Ce sont les modules transverses comme limpression, la
gnration des documents (PDF, Excel. ), les batchs

Limpression

Ce module permettra de grer limpression des documents, il y a dans


java standard lAPI Java Print API, cette API est native, elle est facile
mettre en uvre pour les utilisations basiques mais difficile configurer.

Le reporting

Toute application gnrera des documents pour les reporting et la prise de dcision...
a Jasper: Cet outil permet de crer des templates PDF et de les gnrer
suivant les valeurs donnes. Cest un outil trs puissant qui permet de
crer presque tous les types de tableaux et de documents PDF.
a Birt (Business Intelligence and Reporting Tools) : Cest un plug-in
Eclipse, permettant de crer et de gnrer des documents de reporting.

La gnration des documents (Excel, Word, PDF...)

Un des besoins les plus frquents est la gnration des documents


Excel, PDF... LAPI la plus utilise pour ce service est apache POI; il
permet de crer et de manipuler des fichiers de la suite bureautique
Microsoft Office.

52

Programmez! a Dcembre 2015

Pour les rapports gnrs et plein dautres documents, on aura besoin de


les stocker, les manipuler, les mettre dans lhistorique Pour ce faire, il y
a plusieurs outils sur le march qui permettent de grer ces besoins, le
plus utilis entre tous est Alfresco, permettant la gestion des documents,
il est sous licence libre et assez robuste pour grer les documents.

Batch

Les batchs sont un enchanement automatique d'une suite de


commandes (processus) sur un ordinateur sans intervention d'un
utilisateur Il y a plusieurs outils permettant de faire des batchs:
a Spring batch: Cest un des modules de spring, permettant, avec une
simple configuration, de crer et manipuler des batchs.
a Quartz (scheduler): Facile mettre en place, mais il ne gre que les
batchs, tous les autres besoins (Reprise aprs erreur...) doivent tre
implments explicitement par le dveloppeur.

Les serveurs
Docker

Docker, linverse des machines virtuelles, il ne lance pas un systme


dexploitation virtuel, mais tourne dans un systme dexploitation et cre
un environnement pour dployer une application.

Les serveurs Web

Ce sont des serveurs lgers qui permettent d'excuter du code Java et


contenant un serveur http et un moteur de servlet. Les plus connus sur le
march sont Tomcat et Jetty.

Les serveurs dapplications

Ce sont des serveurs qui contiennent des serveurs Web, en plus ils ont
un contexte d'excution de composants (EJB...). Les plus connus sur le
march sont Jboss (ou WildFly), Glassfish, Websphere...

Les serveurs embarqus

On peut avoir des serveurs embarqus, ce sont des serveurs utiliss


gnralement pour la phase de dveloppement pour ne pas installer un
serveur dans la machine; en excutant un script on peut dployer
lapplication sur un serveur virtuel cr juste pour les tests. Avec Maven
ou Gradle, cela dpend de limplmentation. Voici un exemple avec
Maven dans lequel on peut crire un script permettant de crer un
serveur et dployer lapplication automatiquement dans ce serveur. Pour
le faire, dans le fichier pom.xml on ajoute le code suivant:

...
<build>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId> <version>2.1</version>
<configuration>
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>

Et puis dans la ligne de commande, on excute:


$mvn clean install
$mvn tomcat7:run

053_055_191 18/11/15 22:08 Page53

Connectez votre rameur


dappartement avec Chrome

1re partie

WiiFit, AppleHealt, Google Fit, tout a cest du pass ! Place SkiffSimulator !!


a va ramer dans les salons!
Jean-Franois Garreau
Dveloppeur depuis 10 ans. Responsable du Pole Internet Of Things chez
SQLI Nantes depuis 2012, Jean-Franois est passionn par les nouvelles
technologies. Il est galement co-fondateur du CDG
Nantes, organisateur du DevFest Nantes, co-crateur des Nantes Wit et organisateur de
Devoxx4Kids.
Nous allons voir travers cet article comment raliser un rameur connect
et ainsi vous permettre de vous amuser en faisant du sport !
La version prsente dans cet article est une V1 dpendant dun ordinateur. Il pourrait tre trs facile de faire voluer lapplication pour quelle soit
autonome sur un quipement de type Raspberry par la suite.

PRINCIPE

Grce lAPI serial de Google Chrome, nous allons relier directement notre
rameur notre navigateur pour crer un jeu qui nous permettra de jouer un
jeu 8 bits. Voici globalement un schma symbolisant le montage effectuer :
Nous allons faire communiquer 2 programmes entre eux : Fig.1.
a Un sketch Arduino qui va mesurer la distance du joueur sur le rameur;
a Une Application Chrome avec dun ct :
- La partie Chrome App qui va lire le port srie;
- La partie Jeux qui va lire les informations provenant de la Chrome App.
Comme tout ceci nest pas bien compliqu, jai dcid de tout coder from
scratch afin de me faire la main sur les possibilits offertes par cet cosystme. Ct application Web, nous avons un simple canvas afin de tirer parti
de lacclration matrielle. Ct matriel, jai opt pour une simple Arduino avec un capteur ultrason.

Le matriel
a
a
a
a
a
a
a

Un rameur (~20 sur Le Bon Coin)


Une Arduinio Nano (~trouv 6 sur tinyDeal)
Une breadboard (~2 sur tinyDeal)
Un capteur ultrason HC-SR04(~1,5 sur tinyDeal)
Un fil MiniUSB -> USB (fourni avec larduino)
Des fils pour notre montage
Un ordinateur avec Chrome

UN JEU EN HTML ?

chaque affichage ne doit pas dpasser les 13ms.


Afin de respecter au mieux cette contrainte, jai
dcoup mon programme :
a La brique qui soccupe de laffichage va lire
dans un modle partag ;
a La brique qui soccupe de lire les donnes de lArduino va alimenter ce
modle partag et faire les calculs ncessaires.
De cette faon, jai une sparation propre de mes interactions et des
actions provenant de lextrieur pouvant parfois bloquer mon interface. Il
est noter quavec ce fonctionnement, je tolre une dsynchronisation
entre ltat de mon modle et mon affichage. Je pars du principe que celleci sera de maximum 13ms, ce qui est acceptable.

SKETCH ARDUINO

Fig.2.

//Pour le capteur ultrasons


int TriggerPin = 8;
//Trig pin
int EchoPin = 5;
//Echo pin
long distance;
void setup() {
Serial.begin(9600);
//Mise en entres de Pins
//On initialise le capteur ultrasons
pinMode(TriggerPin, OUTPUT);
digitalWrite(TriggerPin, LOW);
pinMode(EchoPin, INPUT);
delay(100);
Serial.println("Fin SETUP capteurs");
}
void loop() {
distance = lire_distance();
Serial.print("D");
Serial.println(distance);
//Envoi des donnes en BT :

Fig.2

Avant de commencer, il ma fallu me renseigner sur le fonctionnement dun


jeu et voir comment jallais procder pour respecter au mieux les bonnes
pratiques en vigueur. Globalement, un jeu possde plusieurs briques qui
fonctionnent en parallle afin de minimiser le blocage de lUI. Pour rappel,
un jeu est considr comme fluide sil est 60fps ce qui veut dire que
Fig.1

Programmez! a Dcembre 2015

53

053_055_191 18/11/15 22:08 Page54

delay(50);
}
long lire_distance() {
long lecture_echo;
digitalWrite(TriggerPin, HIGH);
delayMicroseconds(10);
digitalWrite(TriggerPin, LOW);
lecture_echo = pulseIn(EchoPin, HIGH);
long cm = lecture_echo / 58;
return(cm);
}

Le fonctionnement est trs simple : il suffit de lire la mesure de distance ds


que lon en obtient une, puis on la retranscrit directement sur le port srie.

CHROMEAPP ?

Comme il sagit dune application Chrome, nous devons crer un fichier


manifest.json : Manifest de SkiffSumulator qui correspond au fichier de
configuration de lapplication Chrome.

Structure de lapplication

Lapplication possde donc plusieurs scripts qui vont tourner en parallle afin de
faire fonctionner le jeu. Voici la structure de mon projet ct application Web :
a assets : rpertoire possdant tous les fichiers de ressources du jeu
(Fonts, images, sons)
a Javascript : ensemble des scripts Javascript constituant lapplication
a scss : fichier sass qui vont servir gnrer le css
Nous allons nous attarder uniquement sur les scripts car cest dans cette
partie que se situe toute l'intelligence du jeu. En effet, le fichier html est trs
sommaire car il ne contient quun canvas :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skiff Almost Simulator</title>
<link rel="icon" type="image/png" href="./assets/images/icon48.png" />
<link rel="stylesheet"href="./css/app.css"/>
</head>
<body>
<canvas id="skiff"></canvas>
<input id="user" type="text" placeholder='Enter your name'/>
<script type="text/javascript" src="./javascript/resources.js"></script>
<script type="text/javascript" src="./javascript/audio.js"></script>
<script type="text/javascript" src="./javascript/const.js"></script>
<script type="text/javascript" src="./javascript/chrome_storage.js"></script>
<script type="text/javascript" src="./javascript/chrome_serial.js"></script>
<script type="text/javascript" src="./javascript/screen_accueil.js"></script>
<script type="text/javascript" src="./javascript/screen_action.js"></script>
<script type="text/javascript" src="./javascript/screen_end.js"></script>
<script type="text/javascript" src="./javascript/app.js"></script>
</body>
</html>

Scripts et rles

Voici les diffrents fichiers et leurs rles :


a app.js : coeur de lapplication, il sagit du point dentre de lapplication
et il agit comme un chef dorchestre. Cest dans un sens le contrleur de
notre application;

54

Programmez! a Dcembre 2015

a audio.js : fichier servant grer la lecture des fichiers audio;


a chrome_serial.js : fichier contenant le code spcifique Chrome qui va
nous permettre de lire directement depuis le port srie de lordinateur;
a chrome_storage.js : fichier utilitaire qui expose de faon uniforme une
API de localstorage au cas o lapplication devrait tourner en dehors de
Chrome (plus de dtails plus loin dans larticle);
a const.js : fichier regroupant toutes les constantes du jeu. Il peut sagir de
simples constantes ou de variables dajustement servant lors de la calibration du jeu;
a ressources.js : fichier permettant dexposer un mcanisme de chargement de ressources graphiques en vue de les exploiter par la suite dans
le programme;
a screen_acceuil.js : fichier contenant tout le code spcifique laffichage
de lcran daccueil;
a screen_action.js : fichier contenant tout le code spcifique laffichage
pendant le jeu;
a screen_end.js : fichier contenant tout le code spcifique laffichage de
lcran de fin.
Le Reveal Module Pattern a t choisi comme pattern car il permet de
fonctionner en module Javascript et doffrir un dcoupage propre du code
tout en matrisant les mthodes exposes.

DROULEMENT DU PROGRAMME :
Prenons les diffrents points mritant de lattention :

Dmarage (App.js)
//API
function init() {
window.addEventListener('load',
pageLoad);
}
return {
init : init, ... }
}
();
AppSAS.init();

On dmarre lapplication ds que la page est prte.


'use strict';
var AppSAS = AppSAS || function() {
function pageLoad() {
// On se connecte l'Arduino
try {
skiffSimulatorChrome.initArduino();
}
catch(err) {
console.error("Error : %s \n %s",
err.message, err.stack);
}

On doit faire appel au module qui va lire les donnes de lArduino.


// On initialise le canvas
ui.input = document.getElementById('user');
ui.canvas = document.getElementById('skiff');
ui.canvas.width = window.innerWidth;
ui.canvas.height = window.innerHeight;

053_055_191 18/11/15 22:08 Page55

ui.context = ui.canvas.getContext('2d');
ui.canvas.addEventListener('click', checkClick, false);
// On prcharge toutes les ressources ncessaires
ui.resources.loadSprites([ {
title : 'logo', url : 'assets/images/logo.png'}
,{
title : 'game_over', url : 'assets/images/gameover.png'}
,{
title : 'rive_gauche_portrait', url : 'assets/images/riviere_gauche_portrait.png'}
, ... ]) .then(function(value) {
paintSkiff();
}
).catch(function(err) {
console.error("Error : %s \n %s", err.message, err.stack); }
);
}

On initialise notre canvas ainsi que les ressources graphiques du projet. On


naffiche le jeu quune fois ces dernires charges.

En fonctionnement (app.js)

Une fois lapplication rellement dmarre avec la mthode paintSkiff.


Nous allons simplement dlguer laffichage aux mthodes appropries :
// Gre l'affichage de l'cran
function paintSkiff() {
try {
... // Affichage des dcors
paintBackground();
if (gameModel.stateGame === constState.STATE_ACCUEIL) {
ScreenSasAccueil.paintSkiffAccueil();
StorageSAS.manageGhost();
}
else if (gameModel.stateGame === constState.STATE_RUNNING) {
// On doit peindre le fantme du jeu en deuxime car son alpha nous indique o il est
ScreenSasAction.paintSkiffAction();
ScreenSasAction.paintSkiffGhost();
// On ajoute l'tat l'historique
gameModel.currentHistory.push( {
direction : gameModel.direction,
distanceSkiff : + gameModel.distanceSkiff,
distanceArduino : + gameModel.distanceArduino }
);
gameModel.step++;
}
if (gameModel.stateGame === constState.STATE_END) {
ScreenSasEnd.paintSkiffEnd();
}
window.requestAnimationFrame(paintSkiff);
}
catch (err) {
console.error("Error : %s \n %s",
err.message, err.stack);
}
}

Il est noter que lon utilise la mthode window.requestAnimtionFrame.


Cette dernire est trs importante car elle permet doptimiser laffichage
de nos crans en fonction de la puissance de la machine. En effet, la

mthode de callback ne sera appele qu'une fois le navigateur prt effectuer une nouvelle mise jour graphique. Il faut donc utiliser cette mthode
la place dun setInterval.

Affichage des crans

Laffichage des crans se fait toujours de la mme faon :


a On nettoie le canvas
a On dessine une ou des images sur le canvas
Laffichage dun cran se fait toujours de la faon suivante :
ui.context.drawImage(imgSource //Limage source
, sx //sx clipping de l'image originale
, sy //sy clipping de l'image originale
, sw // swidth clipping de l'image originale
, sh // sheight clipping de l'image originale
, dx // x Coordonnes dans le dessin du canvas
, dy // y Coordonnes dans le dessing du canvas
, dw // width taille du dessin
, dh // height taille du dessin
);

Les animations / constructions des crans ne sont en fait quune succession de drawImage ou fillText Fig.4.

Gestion
des interactions

Fig.4

Afin de pouvoir dmarrer lapplication, nous devons grer les clics


sur le canvas. Le problme est que
lorsque nous dessinons des
images, nous ne pouvons pas avoir
accs un quivalent de onClick
sur une zone graphique prcise.
Nous devons donc couter les
clicks sur le canvas et calculer si la
zone de clic correspond une
zone dinteraction de notre ihm.
// Gre les clics en fonction de l'tat du jeu
function checkClick(event) {
if (gameModel.stateGame != constState.STATE_RUNNING) {
var btnStart = ui.resources.images['btn_start'];
var finalHeight = btnStart.height * ui.ratio,
finalWidth = btnStart.width * ui.ratio;
var x = (ui.canvas.width / 2) - ((btnStart.width * ui.ratio) / 2), y = ui.canvas.height - finalHeight
- (isPortrait() ? 100 : 50);
var xClick = event.pageX,
yClick = event.pageY;
if (yClick > y && yClick < (y + finalHeight) && xClick > x && xClick < (x + finalWidth)) {
// On change l'tat du jeu
gameModel.stateGame = gameModel.stateGame === constState.STATE_ACCUEIL ? constState.
STATE_RUNNING : constState.STATE_ACCUEIL;
...
}
}
}

u
Suite et fin du projet rameur le mois prochain.
Programmez! a Dcembre 2015

55

056_057_190 18/11/15 22:08 Page56

Prenez vos repres avec Google Maps API V3


Initialement lanc aux USA en 2004, Google Maps dbarque en France le 27 Avril 2006 en
version bta, il est considr comme stable depuis septembre 2007.
Vincent Quadrelli,
Osaxis
Google Maps fait partie de la suite logicielle de Google qui propose des
services tels que le Street View, permettant dobserver un panorama
360 des zones urbaines et rurales. Il y a aussi Google Moon et Mars qui
sont respectivement des visualisations de la lune et de la plante Mars.
Enfin, Google Earth qui offre une visualisation de la plante Terre par le
biais de vues satellitaires et ariennes.
Nous nous attarderons uniquement sur le service Google Maps et plus particulirement sur limplmentation de ce service sur notre site Web, grce
lAPI JavaScript V3 fournie par Google dont la premire version V3.19 est
sortie en fvrier 2015.

Notre projet pratique

En dehors de son API et de ses nombreux services, Google, comme toute


multinationale de ce nom, est un gnreux mcne qui multiplie les partenariats avec les muses. Je vous propose donc travers ce projet de crer
une Google Map rfrenant les divers muses parisiens.

Hello Map

Nous nous retrouvons dans notre IDE favori avec une page HTML vierge
que nous allons un peu gayer en ajoutant la description du projet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La chasse aux muses</title>
</head>
<body>
<div id="description">
<h1>La chasse aux muses</h1>
<span>avec</span>
<h3>Google Maps JavaScript API</h3>
<p>Le but de cette page est de recenser les diffrents muses Parisiens !</p>
</div>
</body>
</html>
Alors, je vous ai promis une carte et elle arrive, mais avant cela une petite
explication du code ncessaire son affichage :
a Une div pour accueillir notre carte qui portera lid #map-canvas (videmment vous tes libre de le changer, mais il faudra rpercuter cela tout au
long du projet):
<div id="map-canvas"></div>
a Le CDN (Content Delivery Network) de Google Maps API V3 qui nous
permet dutiliser en une ligne lAPI:
<!-- CDN Google Map Api -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
a Et videmment un petit bout de JavaScript que nous dtaillerons par la suite,
a Nous ajouterons un soupon de CSS tout de mme pour la forme:

56

Programmez! a Dcembre 2015

<style type="text/css">
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
font-family: cursive;
}
#description {
text-align: center;
position: absolute;
font-size: 13px;
z-index: 9;
right: 20px;
top: 20px;
background-color: rgba(166, 166, 166, 0.88);
border-radius: 20px;
color: rgb(58, 57, 61);
}
</style>
LAPI nous propose dajouter des options, nous utiliserons les options
center et zoom qui nous permettent respectivement de choisir le
centre de la carte linitialisation, et le zoom souhait sur ce point.
<script type="text/javascript">
/* Dclaration de la Map */
var map;
/* Dclaration des options et initialisation de la carte */
function initialize() {
var mapOptions =
{
zoom: 13,
center: new google.maps.LatLng(48.859952,2.335068)
};
La carte est initialise en passant le DOM #map-canvas lAPI Google Map.
map = new google.maps.Map(
document.getElementById('map-canvas'),mapOptions);
}
Parfait: nous avons donc une fonction qui nous permet dafficher notre
super carte! Il ne nous reste plus qu appeler cette fonction. Nous ajoutons donc un Listener afin d'initialiser la carte au chargement de la page.
/* Listener de la fonction load pour lancer l'initialisation de la Map */
google.maps.event.addDomListener(window,'load', initialize);
</script>
Nous voil donc avec une carte certes trs jolie, mais o sont donc nos
muses ? On va essayer dviter le placement et le rfrencement la
main Pour cela nous utiliserons la source libre opendata.paris.fr qui nous
propose de nombreux sets de donnes de tous genres pour la ville de
Paris. Vous pouvez tlcharger le set utilis dans cet exemple cette URL :
http://opendata.paris.fr/explore/dataset/liste-musees-de-france-a-paris/?tab=export

056_057_190 18/11/15 22:08 Page57

Fig.A
Carte de muses parisiens au 5 juin 2015

Du JSON (JavaScript Object Notation)


au marqueur

Voil, nous avons notre fichier Json que nous intgrons notre projet sous
le nom de markers.json.
Et nous allons ajouter la librairie jQuery afin de parcourir simplement notre
JSON.

}); /*cration du marqueur*/


} /* vrification de la prsence de coordonnes */
} /* boucle sur les coordonnes des marqueurs */
}); /* lecture du fichier Json */
/* listener de la fonction load pour lancer l'initialisation de la Map */
google.maps.event.addDomListener(window, 'load', initial-ize);
</script>

<!--CDN Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Nous y voil, pour dclarer un marqueur et donc reprer nos muses, nous
navons besoin que dune paire de coordonnes et dune carte sur lesquels les afficher. Il nous suffit donc de parcourir le fichier Json par lintermdiaire de la fonction jQuery $.getJSON . Nous vrifions la prsence
de coordonnes au cas o le fichier Json serait erron (notre fichier en loccurrence pour le muse n39 lors de lcriture de cet article).
<script type="text/javascript">
/* Rcupration du Json, lecture du Json, vrification de la prsence de coordonnes et
ajout de markers */
$.getJSON('markers.json', function (data) {
for (var i in data) {
if (data[i].fields.hasOwnProperty("coordonnees_")) {
Puis chaque itration, nous instancions un marqueur et lui passons en
paramtre une position, forme grce aux champs coordonnes_ 0 et 1 de
lobjet Field de notre fichier JSON et de notre carte prcdemment instancie.
var myLatLng = new google.maps.LatLng(
data[i].fields.coordonnees_[0],
data[i].fields.coordonnees_[1]); /*creation de la position*/
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'museum_32.png'

Nous y sommes, notre carte des muses parisiens est prte, voyons le
rsultat. Dans cet exemple nous utiliserons les valeurs suivantes.
zoom = 13;
center = 48.859952 , 2.335068 (Paris)
image = museum_32.png (image ajoute au projet) Fig.A.

Conclusion et approfondissement

Google nous offre, par le biais de son API Google Maps, la possibilit de
mettre en place simplement et rapidement une carte personnalisable tant
esthtiquement que fonctionnellement.
Pour tous types de donnes de services et dutilisations, il nous sera possible de crer une carte sur mesure. De mme, le Json se marie trs bien
avec cet outil et apporte performance et compatibilit vos applications. A
noter quil existe un driv du Json, le GeoJson, spcification du Json
oriente pour les donnes gographiques.
Pour aller plus loin, il est mme possible de stocker en base de donnes les
coordonnes, de gnrer le Json lors dun appel Ajax, et garder ce principe
pour laffichage de fentres contenant les informations du marqueur. Il est
envisageable de stocker dans une autre table les informations lies
chaque marqueur afin de les afficher lors dun clic sur le marqueur donn.
Pour cela, Google met disposition les Info-Windows (pour plus dinformations, la documentation de Google se trouve ladresse suivante :
https://developers.google.com/maps/documentation/JavaScript/markers ).
En rsum, les possibilits sont quasiment illimites, contrairement cet
article qui touche sa fin. Bon dev tous avec Google Maps !

u
Programmez! a Dcembre 2015

57

058_060_191 18/11/15 22:09 Page58

Node.js de A Z

3e partie

Je ne vous apprends rien en vous disant que beaucoup de dveloppeurs Web utilisent JavaScript
pour crer des applications front. Node.js permet ce langage trs populaire dtre utilis dans
plusieurs autres contextes, par exemple sur un serveur Web. Il existe plusieurs fonctionnalits
notables offertes par Node.js ce qui le rend sans nul doute digne dun grand intrt.
Wassim Chegham (@manekinekko)
Expert en Nouvelles Technologies Web chez
Groupe SII
Google Developer Expert (GDE) en AngularJS

DBOGUER ET TESTER
Je me rappelle dun de mes collgues qui me rptait souvent que tester
cest douter !. Personnellement, je prfre douter maintenant tant quil est
encore temps que de le regretter plus tard, lorsquun bout de lapplication
tombe en pleine Prod.
Dans lcosystme Node, il existe une multitude de modules nous permettant de tester notre application diffrents niveaux. Ces modules
respectent la philosophie Node qui stipule quun module doit tre :
a Petit,
a Interchangeable,
a Spcialis dans une seule tche.
Ce kit doutils est donc une collection de petits modules Node organise
comme suit :
a Frameworks de Tests : Intern, Vows, Mocha.
a Librairies dassertions : Chai, Assert.
a Stubs : Sinon.
Fig.65

Nous nallons pas dtailler le fonctionnement de chaque module. Mais,


nous allons les prsenter brivement et parler de la philosophie de chacun.

Frameworks de Tests

Avant toute chose, avant mme de commencer crire vos tests, il va


vous falloir un framework de Tests. Ce framework va vous apporter toutes
les fondations ncessaires pour excuter et orchestrer vos tests. Sans surprise, il existe normment de frameworks, mais Mocha est le plus connu,
il est l depuis les dbuts de Node. Ce framework est trs flexible et trs
configurable. Voici comment se prsente un test avec Mocha : Fig 65
Explications :
a Le bloc before() est appel avant le dbut des tests dans la campagne
de test Programmez. Ce bloc permet dinitialiser la configuration de la
campagne.
a Le bloc beforeEach() est appel avant chaque test de cette campagne.
a Les blocs it() contiennent votre test
a Le bloc after() est appel aprs la fin de tous les tests. Ce bloc permet
de faire le mnage.

Librairies dassertions

Une fois que le framework est en place, vous tes prt(e)s crire vos
tests. Le plus simple est dutiliser une librairie dassertion. Node propose
un module Assert de base permettant dcrire des tests base dassertions. Il existe cependant plusieurs syntaxes possibles : TDD, BDD,
assert(), should()...etc.
Ce sera vous de choisir la syntaxe (et donc le module) qui vous convient,
mais sachez que BDD a le vent en poupe grce sa syntaxe ressemblant
au langage naturel. Le module Chai est un excellent module qui supporte
la plupart de ces syntaxes. Fig 66 et 67

Stubs

Fig.66

Faire de simples assertions nest malheureusement pas suffisant pour


tester des fonctions un peu trop complexes. Il peut arriver que lon veuille
influencer lexcution dune fonction pour tester des cas limites ou juste tordus. Le module Sinon nous permet de raliser cela. Fig 68 et 69
Sinon permet de faire beaucoup plus que cela. Il offre par exemple des
Spies qui permettent de surveiller quand une fonction a t invoque et
avec quels arguments. Il offre aussi des Mocks pour les bouchons, des
timers..etc. Je vous laisse essayer et exprimenter ce module. Vous risquez

Fig.67

58

Programmez! a Novembre 2015

058_060_191 18/11/15 22:09 Page59

certainement de ladopter. Ces modules font partie dun petit chantillon de


ce que nous offre la communaut Node en matire doutils de test. Si vous
souhaitez avoir un seul outil qui regroupe tous ces modules voire bien plus,
je vous recommande Intern.io. Une image vaut mieux quun long discours :
Fig 70. Mon collgue Vincent a crit un article expliquant comment dmarrer avec Intern.io, il est accessible cette adresse [15].

DPLOYER
EN PRODUCTION

Maintenant que votre application est prte, il est temps de la mettre en


production et de la mettre disposition de millions dutilisateurs.
Voici le diagramme de larchitecture cible que nous allons dcouvrir
ensemble dans cette section : Fig 71
Notre application Node tourne sur un serveur dans un rseau local (priv).
Cette application coute le port 3000 et nest pas accessible directement
par le Web. Nous utilisons un serveur Web en tant que Reverse Proxy. Ce
serveur lui coute sur le port 80.
Dans la suite de cette section, nous allons parcourir ensemble les diffrents points vrifier pour mettre en production une application Node.
Voyez cette section comme une sorte de Checklist de mise en production.
Fig.68

Configuration du serveur

videmment je ne devrais pas revenir sur cette partie, vous aurez besoin
de Node et de NPM pour faire tourner votre application en production.
Vous pouvez utiliser NVM pour grer les diffrentes versions de Node (voir
la premire partie de ce dossier). Vous aurez besoin de NPM pour rcuprer les dpendances dclares dans le fichier package.json. Une chose
trs importante : pensez bien figer les versions des dpendances. Pour
cela, je vous recommande dutiliser le module shrinkwrap [16] prvu cet
effet. Passons maintenant la gestion du dmarrage et darrt de votre
(vos) application(s) Node.

Installation de PM2

PM2 [17] est un gestionnaire de processus pour les applications Node.


PM2 offre une interface trs simple pour grer les applications facilement,
mais aussi en tant que services.
Une fois install, PM2 vous permet de lancer votre application comme ceci :
Fig 72
PM2 affecte directement un PID, il affiche aussi dautres informations
utiles telles que la consommation de la mmoire, le statut de lapplication,
etc. L'intrt de PM2 est que lorsque lapplication Node crashe, elle est
automatiquement redmarre. PM2 offre galement la possibilit de grer
lapplication au dmarrage du systme. Lorsque votre serveur reboote par
exemple, PM2 est capable de lancer automatiquement votre application
ce qui peut tre trs utile. Pour cela nous utilisons la sous-commande
startup de PM2 : Fig 73
Il existe dautres sous-commandes proposes par PM2, je vous laisse les
dcouvrir tte repose.

Fig.71

Fig.75

Fig.69

Fig.72

Fig.70

Fig.73
Programmez! a Novembre 2015

59

058_060_191 18/11/15 22:09 Page60

Configuration du Reverse Proxy

Maintenant que votre application est dmarre et quelle coute sur un


port du rseau priv. Nous allons ajouter un serveur Web qui va la rendre
accessible depuis le Web. Pour cela, nous allons utiliser nginx en tant que
Reverse Proxy. Fig 74
Grce cette configuration (trs minimale), nous allons pouvoir accder
notre application via ladresse http://my-application.com. Le serveur Web va
ainsi proxifier les requtes vers lapplication Node, dfinies dans le bloc
upstream.
Flicitations ! Votre application Node tourne en production !

Mise chelle de lapplication


Configuration de nginx

Grce cet exemple darchitecture, il sera possible de mettre simplement


(tout est relatif) votre application l'chelle. Il se trouve que nginx intgre
de base un Load Balancer. Mais sachez quil existe dautres solutions que
vous pouvez utiliser la place de nginx : HAProxy [18], Varnish [19] (en plus
de sa fonction premire qui est serveur de cache) et mme PM2 possde
une fonctionnalit de Load Balancing entre processus.
Voici le diagramme prcdent revu avec cette nouvelle contrainte : Fig 75
La diffrence par rapport au premier diagramme est que nous avons
ajout dautres instances de notre application, chacune coute sur un port
diffrent, 3000, 3001 et 3002, etc. Nous allons ensuite mettre jour le fichier de configuration de nginx : Fig 76
La directive ip_hash nous permet de nous assurer que les requtes
provenant du mme client seront passes au mme serveur (sauf sil est
indisponible). Pour raliser cela, nginx utilise lIP du client comme cl de
hash.

cest--dire huit. Mais je peux dire PM2 daugmenter ce nombre, avec la


sous-commande scale : Fig 77
Votre application tourne en production et en nombre !

CONCLUSION

Nous voil dj arrivs la fin de cette srie darticles consacre essentiellement la dcouverte de Node.js en mode vanilla cest-a-dire sans
framework. Bien videmment, dans la pratique, et pour des applications
mtiers relativement complexes, je vous recommande dutiliser un framework ou des librairies pour vous faciliter le travail. Le but du jeu est de profiter de tous les avantages de Node sans souffrance. Dites-vous toujours
que lorsque vous avez un problme rsoudre, il existe srement un module pour vous aider. Dailleurs voici en bonus, une liste jour des modules
Node les plus populaires et les plus intressants [21].
vos Nodes, prts, codez...
u

Remerciements

Je tiens remercier tout particulirement mes deux collgues Benoit


Colombani et Jaffar Boudad pour leur patience et leurs relectures la fois
orthographique et technique.

Icnes

Les icnes utilises dans les schmas proviennent du site : http://flaticons.net/

Aller plus loin avec PM2

En plus de dmarrer plusieurs instances de notre application, dont chacune va couter un port diffrent, nous pouvons utiliser PM2 pour lancer
notre application en mode cluster afin de profiter de tous les coeurs du
CPU de notre machine.
Avec PM2, nous allons lancer notre application avec un paramtre supplmentaire.
Grce ce mode, PM2 vient de lancer autant dinstances de mon application que de coeurs disponibles dans le CPU de mon Macbook Pro,
Fig.74

Fig.77

Fig.76

60

Programmez! a Novembre 2015

Rfrences

[15] https://blog.groupe-sii.com/the-intern-retour-sur-la-prochaine-generation-doutils-de-tests-javascript/
[16] https://github.com/joyent/node/wiki/projects,-applications,-and-companies-using-node
[17] https://docs.npmjs.com/cli/shrinkwrap
[18] https://github.com/Unitech/pm2
[19] http://www.haproxy.org/
[20] https://www.varnish-cache.org/
[21] https://github.com/sindresorhus/awesome-nodejs

061_063_191 18/11/15 22:45 Page61

Les outils Webmaker de Mozilla


En toute saison, il ne faut pas perdre la main avec le Web et surtout ne pas s'loigner de celui-ci.
Nous vous proposons de dcouvrir quelques outils libres de la fondation Mozilla, regroups sur un
portail Web appel 'webmaker'.
Christophe Villeneuve
Consultant IT pour Neuros, auteur du
livre "Drupal avanc" aux ditions
Eyrolles et auteur aux Editions ENI,
Rdacteur pour WebRIVER, membre
des Teams DrupalFR, AFUP, LeMug.fr
(MySQL/MariaDB User Group FR),
Drupagora, PHPTV.

LES OUTILS
Popcorn
Maker

Popcorn Maker va vous permettre de remixer


des vidos, des sons et des images travers
votre navigateur Firefox et se prsente sous la
forme d'un diteur vido. Ainsi, vous pouvez
intgrer diffrents types de mdias externes
Youtube, Vimeo, SoundCloud, d'un mdia
HTML5, des images ou des photos, etc.
Pour utiliser Popcorn Maker, vous restez dans
le navigateur car tout est gr avec votre
souris, et le glisser-dposer. Vous pouvez
slectionner et ajouter vos propres
commentaires, messages et liens dans votre
vido. L'application Popcorn Maker se prsente
en 3 parties Fig.1.
Tout d'abord, la partie centrale s'occupe
d'afficher le rendu de ce que vous avez
construit. Cette zone permet de dterminer les
Fig.1

Fig.3

Fig.4

dimensions de chaque objet que vous aurez


dfini. La partie basse de l'cran est une
gestion de calques, c'est dire que vous
pouvez obtenir diffrentes lignes pour afficher
plusieurs contenus en mme temps comme
l'affichage d'une image, d'un texte et d'une
musique ou d'une vido Fig.2.
La partie de droite propose les ressources
disponibles. Tout d'abord, vous pouvez
enregistrer les liens vido dans la bibliothque
pour tre utiliss ultrieurement. Ensuite, le
bouton 'vnements' affiche une liste de choix:
texte, bulle, image, boucle, modle 3D Fig.3.
Chaque vnement possde une srie
d'options et de configurations
Enfin, la sauvegarde est effectue en temps
rel et vos vidos seront hberges par la
fondation Mozilla gratuitement Fig.4.

En pratique

Tout d'abord, nous insrons dans diffrents


calques le logo Programmez et un texte qui
sera affich avec un effet de fondu. Il sera
ensuite affich une petite image, comme un
elePHPant.
La particularit de l'introduction, est l'image car
le logo sera une image et l'image de
l'lPHPant sera la dernire image tague
elePHPant venant du site Internet flickr, c'est
dire qu'elle changera chaque fois que ce site
sera mis jour.
L'tape suivante sera la vido, nous avons
retenu 2 vidos et nous utiliserons 2 calques
supplmentaires pour en afficher une partie.
Par ailleurs, nous ajoutons un petit lien qui sera
affich pendant une courte dure. Enfin, nous
ajoutons en bas gauche un slideshow avec
les images tagues #elePHPant de Flickr.
L'tape de fin sera l'apparition d'un logo et du
lien pour accder un site Web que nous
affichons quelques secondes.
Il est important d'enregistrer, et nous obtenons
un lien que nous pouvons partager :
https://hellosct1.makes.org/popcorn/2wyw

Plus

L'ensemble des fonctions ne peuvent pas tre


prsentes ici, mais il ne faut pas hsiter les
essayer. Par ailleurs une aide est disponible
pour vous aider obtenir plus d'informations.
Vous pouvez crer directement votre propre
version partir du code source mis
disposition sur GitHub
(https://github.com/mozilla/popcorn.webmaker.org).

X-ray

X-Ray est une application intressante car elle


va regarder en profondeur les diffrents
niveaux de vos pages Web sur le principe de
lunettes rayons X. Ainsi, vous pouvez remixer
un contenu en un simple clic, en y ajoutant vos
propres textes, images...
Vous allez pouvoir habiller votre manire la
page d'accueil d'un de vos sites favoris
comme un site d'actualit ou de mdia. De
plus, vous tes libre de l'habiller comme vous
en avez envie en modifiant les couleurs ou en le
transformant en site humoristique
Son rle n'est pas de hacker un site mais de
comprendre comment fonctionne un bloc ou
une partie d'une page Web. Le principe est de
cloner le site Internet vers votre espace
d'hbergement et en ajoutant vos
personnalisations.

En pratique

X-Ray s'utilise de diffrentes manires et


partir d'un addon de Firefox que l'on place dans
la barre de navigation
(https://webmaker.org/fr/goggles/install). Aprs
l'installation de celui-ci, il est tout de suite
oprationnel Fig.5.
Pour utiliser X-Ray, il vous suffit de naviguer sur
Internet et si une page d'accueil vous intresse,
vous pouvez l'utiliser. Nous prendrons pour
exemple le site du magazine Programmez que
vous connaissez Fig.6.
Nous allons dplacer le logo 'Programmez' sur
la droite la place de se connecter et ajouter
un autre logo. Pour raliser cette opration,
Fig.2

Programmez! a Dcembre 2015

61

061_063_191 18/11/15 22:45 Page62

nous activons X-ray et slectionnons le logo


de la page Fig.7.
Une nouvelle fentre apparat avec le
contenu de l'lment que nous avons
slectionn Fig.8.
A ce moment l, nous pouvons changer
l'image par une autre. Nous effectuons la
mme opration avec le mot de 'se
connecter' que nous remplaons par le logo
d'origine Fig.9.
Comme l'image n'est plus proportionne, il
est possible de modifier la feuille de style
avec X-Ray. Pour cela, nous slectionnons
l'objet et appuyons sur la touche C pour voir
les informations CSS de notre lment
Fig.10.
Pour modifier les valeurs, il faut appuyer sur
la touche 'espace'.
Lorsque les modifications ont t
effectues, nous sauvegardons.
La dernire tape dans les modifications du
bandeau, concerne le texte s'inscrire
dont nous modifions aussi bien la couleur
que le texte Fig.11.
Enfin, pour publier, il suffit d'appuyer sur la
touche P pour publier et nous obtenons le
rsultat final qui suit : Fig.12.
Enfin, une nouvelle URL est propose que
vous pouvez sauvegarder et rutiliser sans
problme.

Fig.5
Fig.6

Fig.7

Fig.8
Fig.9

Thimble

Thimble est une application pour crer et


partager votre propre page Web. Vous allez
pouvoir crire et modifier le code HTML et
CSS d'une page directement partir de
votre navigateur de prfrence Firefox en un
clin d'oeil. Par ailleurs, vous n'aurez aucun
soucis pour hberger vos sites Web car tout
peut se faire directement sur place, quel
que soit votre niveau de connaissance
(dbutant ou experts).
Les ralisations possibles sont varies car
vous pouvez crer une carte personnalise,
une affiche ou des pages dlirantes, tout en
tant l pour tre assist.

Fig.10
Fig.11

En pratique

Le remix est souvent la premire tape pour


apprendre le Web, car comme son nom
l'indique, il remixe les pages des autres pour
vous aider crer les vtres.
Pour excuter l'opration, nous prenons un
des sites disponibles sur Webmaker
(https://webmaker.org) et cliquons sur le
bouton 'remixer'
L'cran se divise en 2 parties:
a La partie de droite est l'aperu de la page
qui a t cre ;

62

Programmez! a Dcembre 2015

Fig.12

061_063_191 18/11/15 22:45 Page63

a La partie de gauche est le code HTML / CSS


et correspond l'assemblage de la partie de
droite (visuel) : Fig.13.
Nous choisissons de remplacer le mot
'description' et son texte Fig.14.
Le rsultat est instantan et affiche en temps
rel les modifications que vous apportez. Enfin,
il est important de sauvegarder les
modifications pour obtenir le nouveau lien.
Pour aller plus loin:
https://support.mozilla.org/fr/products/webmaker/thimble

Appmaker

Il s'agit du dernier outil de la famille de la


plateforme Webmaker. Il va vous aider crer
des applications mobiles, mme si vous ne
savez pas coder Fig.15.
De nombreux composants sont disponibles
pour crer et partager les applications mobiles
depuis votre navigateur. De nombreux groupes
d'objets sont disponibles comme des
composants mdia, fun, chat, numro, etc.
Ainsi, vous pouvez crer:
a Une application de tchat pour parler avec vos
amis ;
a Une application pour faire de la musique ;
a ...

Quand l'application est termine, nous


sauvegardons et publions l'application. Ainsi
diffrentes possibilits vous sont proposes:
a L'installation,
a L'excution,
a Envoyer un lien (Fig.17).
L'application est fonctionnelle et le chiffre
augmente de 1 quand on clique sur le bouton.
Fig.18.

source et voir le contenu de vos diffrents


projets : vous tes 100% propritaire de vos
applications et ralisations. Notez que de
nombreux vnements ont lieu en France pour
apprendre le Web facilement et qu'ici, cet
ensemble d'outils qui vous est propos pour
comprendre comment fonctionne une page
Web s'avre trs complmentaire, voire, peut
se substituer, tout du moins au dbut.
u

EN RSUM

Ressources :

Les outils Webmaker de la fondation Mozilla


sont gratuits. De plus, vous pouvez afficher la

https://webmaker.org/fr/tools
https://support.mozilla.org/fr/products/webmaker

Fig.15

En pratique

Nous allons vous proposer un compteur


automatique, c'est dire que nous choisissons
le composant 'nombre' et un bouton qui servira
de 'validation' Fig.16.
Chacun d'eux est modifiable.

Fig.16

Fig.13

Fig.17

Fig.14

Fig.18
Programmez! a Dcembre 2015

63

064_067_191 18/11/15 22:12 Page64

Web Workers:
le multithread dbarque dans le navigateur!
Proposant une exprience utilisateur toujours plus riche, les applications Web sont crites en
Javascript. Alors que leurs fonctionnalits les rapprochent des applications natives, elles souffrent
depuis toujours dune limite de taille lie au modle dexcution monothread du Javascript au sein du
navigateur. Ainsi, les oprations lourdes ralises ct client se traduisent souvent en message
davertissement du navigateur conseillant de tuer le script en question, ce qui est du plus mauvais
effet. Avec les Web Workers, HTML 5 embarque
une spcification apportant le multithread
directement au sein du navigateur. Dcouverte
dune technologie prometteuse qui va acclrer
encore un peu plus les applications Web.
Sylvain SAUREL
Ingnieur dEtudes Java / Java EE
sylvain.saurel@gmail.com
N au milieu des annes 90, le langage Javascript est rapidement devenu
le compagnon indispensable dHTML. A cette poque, les ordinateurs
taient dots de processeurs simple cur et son modle dexcution bas
sur un thread unique se prtait plutt bien ses usages. En effet, les sites
de lpoque taient des annes lumire de qui se fait aujourdhui avec
des possibilits restreintes compares aux applications natives.
Ainsi, lexcution dun script nengage quun seul thread au niveau du navigateur. Plus connu sous le nom dUI Thread, il est galement en charge de
laffichage et du rendu. Avec la complexification des applications Web, les
traitements Javascript nont cess de salourdir conduisant quelquefois
des IHM bloques. Les navigateurs disposent dun systme de protection
permettant davertir lutilisateur lorsque lexcution dun script est trop
longue lui proposant de le tuer (Fig.1) ce qui se rvle dsastreux en termes
dexprience utilisateur.
Nanmoins, jusqualors, les scnarios dutilisation o cela posait de rels
problmes taient limits, bien que les applications Web avec leurs contenus toujours plus riches commenaient tre pnalises. Pour dpasser
ces limitations historiques, les dveloppeurs avaient trouv des parades
permettant de simuler des traitements parallles. Elles taient bases sur
les fonctions setTimeout / setInterval, lutilisation de lobjet XMLHttpRequest pour les appels HTTP asynchrones ou encore le systme vnementiel du DOM; ces approches taient non bloquantes mais napportaient rien
au niveau de lacclration des traitements. Alors que la norme est aux
ordinateurs multi-curs et quHTML 5 propose des possibilits toujours
plus puissantes, la prsence du multithread dans Javascript est une ncessit indispensable aujourdhui, et plus encore pour les annes venir.

Un peu de thorie

Afin dadresser cette problmatique, le W3C a intgr au sein dHTML 5 la


spcification Web Worker qui propose une API pour excuter des scripts
Javascript en tche de fond. Il devient alors possible de crer des threads
spars partir de lUI Thread dune application Web. Pour viter les problmes inhrents aux partages de ressources entre threads, tels que les
locks ou les races conditions, le cadre dexcution des Web Workers est
une sandbox relativement stricte au niveau des ressources accessibles. Ils
ne peuvent ainsi pas accder aux objets Javascript standards comme

64

Programmez! a Dcembre 2015

Fig.1
Avertissement script trop long
document, window, console, parent et galement le DOM. Impossible de
ce fait daccder un lment via un getElementById ou dutiliser la fonction bloquante alert.
Ces restrictions risquent de frustrer les dveloppeurs habitus au multithreading sur des environnements natifs, mais elles permettent de prserver les dveloppeurs Web des nombreux cueils du monde parallle.
Malgr ces limitations, les possibilits sont nombreuses et le dveloppeur
peut interagir avec les lments suivants dans un Web Worker:
a Lobjet navigator ;
a Lobjet location en lecture seule ;
a La fonction importScripts() pour importer des scripts issus du mme
domaine ;
a Les objets Javascript de base: Object, Array, Date, Math et String ;
a Lobjet XMLHttpRequest pour les requtes HTTP ;
a Les fonctions setTimeout et setInterval ;
a La base de donnes Indexed DB ;
a Lobjet self reprsentant les objets dans le scope du worker courant.
La spcification introduit 3 types de Web Workers. Le Dedicated Worker
correspond un nouveau thread excut en arrire-plan ne bloquant donc
pas le travail de lUI Thread. Associ ce type, le Sub Worker est un Dedicated Worker un peu particulier puisque cr au sein dun autre worker.
Enfin, on retrouve le Shared Worker utilisable par plusieurs pages via des
connexions multiples sur le mme domaine dorigine.

Communication et gestion des erreurs

Pour conclure cette introduction thorique aux Web Workers, il est important de parler du mode de communication retenu entre les workers et le
thread principal. Implment sous la forme de messages, il est ralis via la
fonction postMessage sur un worker depuis lUI Thread ou directement
lintrieur du worker pour envoyer un message lUI Thread. La fonction
postMessage prend en entre nimporte lequel des objets primitifs du
Javascript, et galement des objets JSON. Au sein du script associ un
worker, il faut sabonner lvnement message avec un callback appel

064_067_191 18/11/15 22:12 Page65

lors des passages de messages depuis lUI Thread. Le travail du thread


dmarre ainsi au premier appel la fonction postMessage depuis la page
principale.
Une fois un worker termin, sa fermeture reste la charge du dveloppeur.
Compte tenu de la mmoire prise au sein du navigateur, il est important de
raliser cette opration. Pour cela, on peut appeler la mthode terminate
sur linstance de worker au sein de la page principale ou bien directement
clore le worker dans son script via un appel self.close().
Au niveau de la gestion des erreurs, le worker propose lvnement error
auquel il faudra sabonner pour rcuprer les informations dtailles associes une erreur du code dun worker. Lobjet ErrorEvent pass au callback de cet vnement propose le nom du worker, le message derreur
remont ainsi que la ligne correspondante au sein du script.

Cas dutilisation

Avec les applications Web actuelles ncessitant des interfaces utilisateurs


riches et ractives, les scnarios dutilisation pour la mise en place des
Web Workers sont nombreux. Bien que leurs restrictions rduisent leur
porte, on peut citer les cas suivants:
a Traitement de gros volumes de donnes. Remonts via XMLHttpRequest, ces volumes peuvent tre traits au sein de workers soulageant
par l-mme lUI Thread ;
a Traitement dimage. Les possibilits offertes par le Canvas ou la balise
video apportent de nouveaux cas dutilisation ncessitant une grande
puissance de calcul. La paralllisation de ces calculs est une option
avantageuse ;
a Traitements lourds. Que ce soit pour de lanalyse de texte au sein de
suites bureautiques en ligne, ou bien pour raliser des calculs financiers
pousss sur des sites boursiers, les workers auront leur mot dire ;
a Utilisation concurrente de la base de donnes Indexed DB. Si laccs
aux donnes du cache local nest pas autoris dans les workers, la base
de donnes Indexed DB est totalement oprationnelle ;
a Jeux. Les moteurs physiques ou bien les IA de jeux HTML 5 sont galement dexcellents candidats.
Aussi allchants que soient ces scnarios, il est bon de garder lesprit
que la programmation parallle est une problmatique complexe ncessitant du pragmatisme. Ainsi, tous les traitements ne pourront pas tirer parti
des Web Workers. En sus, la cration dun worker est une opration coteuse qui peut prendre plus de temps que le gain ralis lexcution du
traitement via un worker pour des calculs trop modestes. Toujours rayon
performance, le cot mmoire supplmentaire induit devra tre soigneusement quantifi.

Premier Worker

Pour mettre en uvre un premier Dedicated Worker, nous allons prendre


lexemple classique de la recherche de nombres premiers. Une telle
recherche est un traitement plutt lourd qui bloquerait lUI Thread et rendrait donc inutilisable lIHM pour lutilisateur. Lutilisation dun worker est
tout fait propos pour viter ce phnomne. Mieux encore, ce traitement
se prte parfaitement la paralllisation puisque chaque recherche de
nombre premier est indpendante de la prcdente. Nous pouvons donc
crer un script pour le worker nomm prime.js prenant en entre une plage
de nombres pour laquelle la primalit sera teste:
self.onmessage = function messageHandler(event) {
var wid = event.data.wid;
var n = event.data.start;
var threshold = event.data.end - event.data.start;
var total = 0;

var found = 0;
while (total < threshold) {
n += 1;
var max = Math.sqrt(n);
var ok = true;
for (var i = 2; i <= max && ok; i += 1) {
if (n % i == 0) {
ok = false;
}
}
if (ok) {
found++;
}
total++;
if (total % event.data.step == 0) {
this.postMessage({wid : wid, total : total, found : found});
}
}
}
On sabonne lvnement message en plaant un callback sur la proprit self.onmessage. Le nombre dentiers tester est dfini dans la variable
threshold en calculant la diffrence entre les bornes de dbut et de fin.
Enfin, on stocke le nombre dentiers premiers trouvs et le nombre dentiers
tests. Le paramtre step de lobjet JSON rcupr via event.data.step
dfinit la frquence laquelle on doit avertir lUI Thread de lavance de la
recherche. La communication des donnes vers ce thread principal seffectue via un appel la fonction postMessage avec en entre un objet
JSON proposant galement lid du worker ayant envoy le message.
Il reste maintenant crer les diffrents workers au sein de la page principale en passant en entre de chacun dentre eux les plages de valeurs
tester:
var width = 0;
var percentage = 0;
var total = 0;
var found = 0;
var t = [];
var f = [];
var sum = function(a, b) { return a + b;};
function messageHandler(event) {
t[event.data.wid] = event.data.total;
f[event.data.wid] = event.data.found;
total = t.reduce(sum);
found = f.reduce(sum);
// affichage UI
var prime = document.getElementById('prime');
prime.innerHTML = 'Premiers trouvs: ' + found;
percentage = Math.round(total * 100 / 1000000);
width = Math.round(310 * percentage / 100);
var progressbar = document.getElementById('progressbar');
progressbar.innerHTML = percentage + '%';
Programmez! a Dcembre 2015

65

064_067_191 18/11/15 22:12 Page66

progressbar.style.width = width + 'px';


}
function processFor(number, workers) {
var block = number / workers;
for (var i = 0; i < workers ; i += 1) {
var worker = new Worker('prime.js');
worker.onmessage = messageHandler;
worker.postMessage({wid : i, start : i * block, end : (i + 1) * block, step : block / 10});
}
}
La fonction processFor dmarre la recherche dentiers premiers avec un
seuil dfini en choisissant le nombre de workers utiliser.
Chaque worker est ensuite cr au sein dune boucle avant de lui passer
en entre la plage de valeurs.
La frquence de mise jour est primordiale ici puisquune mise jour
chaque entier test reviendrait bloquer lUI Thread! Pas cause du calcul des nombres premiers mais cause de la mise jour de laffichage de
lUI ralis au sein de la fonction messageHandler.
En effet, la recherche dlments de la page au sein du DOM pour leur mise
jour est une des oprations les plus coteuses en Javascript. Lexcution
du script sur 1 million dentiers met en lumire lefficacit des workers
puisque lUI reste parfaitement ractive (Fig.2).

Traitement dimage

Comme vu prcdemment, les Web Workers se prtent particulirement


bien au traitement dimages dans le navigateur, et cest un usage qui va se
rpandre avec larrive du composant Canvas et de llment video dans
HTML 5. Pour raliser un exemple de ce type, nous partons dune image
dessine au sein dun Canvas sur laquelle pourront tre effectus des traitements dimage simples tels quun effet Sepia ou un effet de niveaux de
gris. Travaillant pixel par pixel, ces traitements sont de fait de parfaits candidats la paralllisation. Il suffit de dcouper limage traiter en sous parties qui seront traites au sein de workers ddis.
Un worker nayant pas accs llment Canvas, il va tre ncessaire de
travailler directement sur les donnes binaires de limage charge, en
dcoupant limage en autant de rgions que de workers employer:
var canvas = document.getElementById("target");
canvas.width = source.clientWidth;
canvas.height = source.clientHeight;
var tempContext = canvas.getContext("2d");
var len = canvas.width * canvas.height * 4;
// img initiale
tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);
// paralllisation
var workersCount = 4;
var finished = 0;
var segmentLength = len / workersCount;
var blockSize = canvas.height / workersCount;
for (var index = 0; index < workersCount; index++) {
var worker = new Worker("pictureProcessor.js");
worker.onmessage = onWorkEnded;
var canvasData = tempContext.getImageData(0, blockSize * index, canvas.width, blockSize);
worker.postMessage({ data: canvasData, index: index, length: segmentLength });
}

66

Programmez! a Dcembre 2015

Suivant le nombre de workers paramtrs, les diffrentes rgions de limage traiter sont dfinies et envoyes ensuite chacun des workers via la
fonction postMessage. En entre de celle-ci, on retrouve ainsi les donnes
binaires de la rgion de limage traiter ainsi que la longueur de cette
rgion. Contenu dans le fichier pictureProcessor.js, le code du worker excute le traitement dimage souhait:
importScripts("tools.js");
self.onmessage = function (e) {
var canvasData = e.data.data;
var binaryData = canvasData.data;
var l = e.data.length;
var index = e.data.index;
processSepia(binaryData, l);
// processGrayscale(binaryData, l);
this.postMessage({ result: canvasData, index: index });
};
A la rception du message, le worker se met en route appliquant le traitement dimage sur les donnes passes en entre. On note ici lappel de la
fonction importScripts pour importer le script tools.js contenant les fonctions de traitement dimage en question. Une fois le traitement excut, le
worker envoie un message lUI Thread contenant les donnes binaires
transformes ainsi que lindex de la rgion concerne. Au niveau de la
page principale, la rception de ce message est faite au sein du callback
onWorkEnded:
var onWorkEnded = function (e) {
var canvasData = e.data.result;
var index = e.data.index;
// img resultat
tempContext.putImageData(canvasData, 0, blockSize * index);
finished++;
if (finished == workersCount) {
// fin traitement
}
};
Les donnes transformes sont affiches au sein du Canvas afin de prsenter le rsultat de la transformation lutilisateur. Un compteur permet

Fig.2
Calcul de nombres premiers via Worker

064_067_191 18/11/15 22:12 Page67

port.postMessage("Connexion #" + num);


num++;
port.onmessage = function (e) {
// rponse ...
port.postMessage("Rponse : " + e.data);
};
port.start();
};
Petite subtilit avec un Shared Worker, il est ncessaire de sabonner
lvnement de connexion connect pour ensuite se mettre en attente de
rception de messages.
Au niveau de la page appelante, le dmarrage du Shared Worker seffectue
aisment avec pour simple prcaution de bien utiliser le concept de port
lors des manipulations affrentes au worker:
Fig.3
Excution du script avec 4 Workers
de dterminer la fin dexcution du traitement et de proposer ventuellement un retour lutilisateur. Non dtaill ici, le recours la bibliothque
Javascript Modernizr et sa proprit Modernizr.webworkers offre la possibilit de proposer un traitement dgrad sans Web Workers dans le cas o
le navigateur cible ne supporterait pas cette nouvelle fonctionnalit HTML
5. Non dtailles ici car ntant pas lobjet premier de larticle, les fonctions
de traitement dimage utilises au sein de tools.js sont disponibles avec le
code source des exemples de cet article. Enfin, lexcution du script permet de constater que le navigateur utilise bien 4 threads pour traiter en
parallle limage dorigine (Fig.3).

Shared Worker

Second type de workers, les Shared Workers peuvent tre partags entre
pages issues dun mme domaine au sein du navigateur ce qui implique
quil nest pas rattach uniquement au script qui la lanc. Ainsi, il peut
recevoir plusieurs connexions. Outre cette diffrence dimplmentation
fondamentale, les Shared Workers utilisent galement le concept de port
partir duquel il faudra travailler. Le dmarrage de lcoute dun worker de
ce type se fait une fois lappel la mthode start de lobjet port ralis. Fort
logiquement, les variables globales dfinies au sein dun Shared Worker
sont accessibles lors des autres appels de ce worker. Enfin, la communication se fait galement via postMessage mais appel depuis lobjet port.
Un exemple simple illustrant le fonctionnement des Shared Workers
consiste mmoriser le nombre de pages sy connectant et renvoyer la
page appelante son numro de connexion:
var num = 0;
self.onconnect = function (e) {
var port = e.ports[0];

var w = new SharedWorker("shared.js");


w.port.onmessage = function(e){
// msg dans e.data
};
w.port.start();
w.port.postMessage("Bonjour");
Lexcution du script met en exergue le principe de fonctionnement du
Shared Worker puisque le numro de connexion est bien affich au sein de
la page appelante. Lexistence du Shared Worker nest pas lie la page
ou lUI Thread dont il est issu. En fait, il continue tourner tant quau
moins une page y tant connecte reste ouverte. Sa destruction seffectue
donc la fermeture de la dernire page connecte ou bien lors de lappel
explicite aux fonctions close ou terminate selon que lon soit au sein du
worker ou de lUI Thread.

Conclusion

Comblant un manque historique de Javascript li son modle dexcution monothread, les Web Workers vont rendre les applications Web
encore plus ractives. Les esprits le plus chagrins regretteront les limitations dues leur excution au sein dune sandbox, mais cest un choix
dimplmentation logique au vu des cueils induits par la programmation
parallle. Les possibilits demeurent cependant assez importantes pour
en tirer profit sur de nombreux cas dutilisation. La facilit de manipulation
de lAPI associe aux Web Workers ne doit nanmoins pas perdre de vue
que la paralllisation des traitements reste un domaine complexe pas forcment applicable tous les cas de figure. Enfin, compte tenu de leur
temps dmarrage et de leur consommation mmoire, il sera ncessaire
dvaluer correctement si les gains apports par leur emploi se rvlent
bien suprieurs ces temps de fonctionnement.

lire dans le prochain numro n192 en kiosque le 31 dcembre 2015


Retour vers le pass

Atari ST, Amiga, Apple 2, Amstrad CPC.. cela vous dit quelque chose ? Non ?
Faisons un grand bond de 30 ans en arrire ! Un voyage surprenant dans la
programmation oldschool et la Dmoscne franaise !

Cahier spcial Drupal 8

La version finale de Drupal 8 est enfin


arrive. Un guide complet pour bien
dmarrer !
Programmez! a Dcembre 2015

67

068_191 18/11/15 22:48 Page68

Essayez le compilateur Microsoft Roslyn en ligne


Microsoft Roslyn est un nouveau compilateur C# et VB open source de la plateforme .NET.
Il introduit ce que lon appellera Compiler-as-a-service . Pour la petite histoire, on voit souvent pas
mal de projets Microsoft qui portent de drles de dnominations. Et Roslyn est aussi un petit village
de 900 habitants 1h30 de Redmond. Peut-tre que linitiateur du projet y habite.
Christophe Peugnet
MVP Windows Plateform
Devlopment chez
SodeaSoft / EBLM
http://www.sodeasoft.com
Blog: http://www.peug.net
Twitter: @tossnet1
Habituellement on imagine un compilateur
comme une sorte de machine hermtique,
magique mme, dans laquelle on lui injecte du
code source qui est alors analys, transform
et traduit tandis qu'en sortie on obtient notre
applicatif quasi prt tre utilis par notre
client.
Cette machine, cette bote noire nest plus.
Grce la plateforme de compilation .NET
"Roslyn", les dveloppeurs ont maintenant
accs aux informations du compilateur et
linterprtation de leur code source par le
compilateur. Cela cre de nouvelles
opportunits pour linnovation dans des
domaines tels que Meta-programmation.
Roslyn offre donc au dveloppeur C# ou Visual
Basic un outil lui permettant danalyser son
code travers une API exposant les services
de compilation du Framework .NET
Pour les dveloppeurs plus expriments, il
existe, au sein de Visual Studio, un paquet
NuGet "Roslyn" qui permettra par exemple

Drupr al
son

Choisi
outil de tests

12 FS - LUXEMBOURG
6,45 SUISSE

6,45 - DOM Surf

Hacking
z vos

I
AP
partout ?

Scurise
sites PHP !

EyeX
Tobii vos
yeux
Traquez

M 04319 - 185 - F:

Les licences

libres

M 04319 - 186 - F:

XPF - MAROC 50

DH

Lhomm
moderne
linformatique

Printed in EU - Imprim

en UE - BELGIQUE

6,90
6,45 - DOM Surf
12 FS - LUXEMBOURG 940 XPF - MAROC 50 DH
6,45 SUISSE
- TOM
Canada 8,95 $ CAN

6,90 Canada 8,95

- Fotolia.com
fotograedk
istock

02-14-07 Inok

SensorSpot /

Les API OneDriv


DH

Printed in EU - Imprim

09-24-13 VasjaKoman

5,95 E - RD

M 04319 - 183 - F:

5,95 E - RD

M 04319 - 177 - F:

son outil de tests

XPF - MAROC 50

www.programmez.com

3:HIKONB=^UZ^Z]:?k@l@i@d@a";

3:HIKONB=^UZ^Z]:?k@b@h@h@k";

Choisir

5,95 E - RD

$ CAN - TOM 940

DH

Partout dans le monde

Les nouvea

nouv
nouveaux outils
nouveau store

Comprendre
les thmes sous
Drupal 8

Le plein
!
de confrences

:HIKONB=^UZ^Z]:?a@l@i@q@a";
6,45 - DOM Surf

XPF - MAROC 50

M
Android uts
dAndroid

Utiliser GitHub

Devoxx 2015

Du

12 FS - LUXEMBOURG
6,45 SUISSE

$ CAN - TOM 940

PHP se rinvente

La program
pour les enfants

soft Band
Micro
code et du sport

en UE - BELGIQUE

6,90 Canada 8,95

ows 10
Wind
elle architecture

Android

Printed in EU - Imprim

1001100
1001100
1001100
1001100 1001100
1001100 1001100
1001100
1001100
1001100
1001100 1001100

1001 1001100
1001100 10
1001100
1001 1001100
01100 1100

6,45 - DOM Surf

- Septembre 2015

Scratchmation

Apple Watcher des

vido !

nouveauts

12 FS - LUXEMBOURG
6,45 SUISSE

Carrire

Une

5,95 E - RD

:HIKONB=^UZ^Z]:?a@l@i@f@k";

Mensuel n188

en UE - BELGIQUE

PHP 7

migrer ?

du printemps

ire utile ?
Carr
certication est-elle

1001100
1001100 1001100
1001100
1001100 1001100
1001100 1001100
1001100
1001100
1001100
1001100 1001100

SDK Azure : les

Printed in EU - Imprim

s
erry Pi
Faites le plein dide
pour Arduino et Raspb

Comment dvelopp ?
apps avec le WatchKit

sont-elles
?
rellement libres
Un poste de
dveloppement
sous Linux pour
tout faire !

1001100
1001100 1001100
1001100
1001100 1001100
1001100
1001100 1001100
1001100
1001100 1001100
1001100
1001100 1001100

monter
Poppy : un robot
Automatiser
vos volets
Crer un cran
de contrle arien

dveloppeurs

Open Source

auts, comment

Il y a urgence !

Des
rvolutionnent age
la cabine dessay

PROGRAMMEZ.COM

10-18-13 FulopZsolt

5,95 E - RD

Le nouveau

confrences

- Juillet/Aot 2015

Drupal 8 : les nouve

dans les jeux

Accessibilit
des applications

Geek
tudiants

e
: coding la plag
Spcial t 2015

Go

Web visibles partout

Mensuel n187

les meilleurs

2015

Faites carrire

DH

ign

navigateur
de Microsoft

les
sont

5,95 E - RD

$ CAN - TOM 940

SDK
Microso
s : le nouveau
Kinect for Window

Osez le
langage

Programmez! a Dcembre 2015

M 04319 - 184 - F:

XPF - MAROC 50

Drupal &
Design :
Responsive
amis du monde

Le meilleur des

Pourquoi

:HIKONB=^UZ^Z]:?a@b@s@e@k";
6,90 Canada 8,95

PROGRAMMEZ.COM

Commitstrip

3:HIKONB=^UZ^Z]:?a@l@r@g@a";

$ CAN - TOM 940

- Juin 2015

Crer des sites

Spartan

g
Alan eTurin
qui cra

6,90 Canada 8,95

Responsive Des

les

Crer,
Dployer,
Utiliser des API

68

en UE - BELGIQUE

12 FS - LUXEMBOURG
6,45 SUISSE

6,45 - DOM Surf

Community

n - Geek
Codinftg4Fu
Band

Abonnez-vous directement sur :

Ksako le
?
Machine Learning

JavaScript
pour les Jedis

Je dbute (en douceur)


avec C++

en UE - BELGIQUE

12 FS - LUXEMBOURG
6,45 SUISSE

6,45 - DOM Surf

6,90 Canada 8,95

$ CAN - TOM 940

XPF - MAROC 50

DH

Babylon.js

Un moteur 3D pour

le Web

Maker / DIY

dows 210 IoT


Win
sur Raspberry Pi
Printed in EU - Imprim

en UE - BELGIQUE

fullstack
Le dveloppeur ent ?
existe-t-il rellem
Eliott,
14 ans,
en nale
Fair
de la Google Science

12 FS - LUXEMBOURG
6,45 SUISSE

6,45 - DOM Surf

6,90 Canada 8,95

$ CAN - TOM 940

XPF - MAROC 50

3:HIKONB=^UZ^Z]:?a@b@s@s@a";

Le premier
dveloppeur
tait une femme !

en UE - BELGIQUE

Mensuel n186

- Mai 2015

Maxiphoto

Xamarin Forms

Visual Studio 2013

Choisir son cole


dinformatique

Choisir son
frameworkt
JavaScrip

5,95 E - RD

de la donne

Fire dtre !
dveloppeuse

Printed in EU - Imprim

cript,
C++, C#, JavaS
PHP, Swiftaux modles
Les nouvemmation
de progra

NoSQL et la

Outils

DH

programmationn

arin
Unity 5.0 : Xam
Osez les
Les nouveauts

XPF - MAROC 50

avance

Les (meilleu
outils pour
dvelopper
vos apps
La nouvelle
interface
Material Design

M 04319 - 188 - F:

es
Bases de donn
rvolution

3D

Page

$ CAN - TOM 940

PROGRAMMEZ.COM

6,90 Canada 8,95

Intgrer

: savoir les utiliser


parallle
OpenMP, MPI
dans un code
avec Java
Traquer les bugs
ser son code
Comment optimi

Androidrs)

super
hduros

CommitStrip

1 an ?
Quel bilan aprstif 2016
Java 9 : objec
20 ans de Java

Printed in EU - Imprim

Utiliser le One

6,45 - DOM Surf

Windows
s minutes
Cortana en quelque

et fonctio

ABONNEMENT PDF : 30

- Mars 2015

Devenez un

3:HIKONB=^UZ^Z]:?a@b@i@r@k";

Mensuel n185

12 FS - LUXEMBOURG
6,45 SUISSE

Quels futurs pour


langages de

Java 8

Dvelo
ebook
avec un Chrom

en UE - BELGIQUE

Programmation

bagiuiani

Printed in EU - Imprim

Web Design

M 04319 - 180 - F:

M 04319 - 179 - F:

5,95 E - RD

3:HIKONB=^UZ^Z]:?k@b@r@j@a";

Testeur : un

- Avril 2015

D pper sur Linux

Microsoft
X et Xamarin
iOS, Linux, OS

Android

de Java
nnel au coeur

Mensuel n183

M 04319

- RD
- 178 - F: 5,95 E

3:HIKONB=^UZ^Z]:?k@b@h@s@a";

JavaScript

C#
2D / 3D

Android
est mort !
Studio : Eclipse

Monter
son PC 4K

- MAROC 50 DH

Pourquoi devenir
Les salaires
tmoignent !
Les dveloppeurs

Unity

un langage objet

Studio
,
.Net / Visual
supporte Android

Carriremtier davenir

temprature

- TOM 940 XPF

dveloppeur ?

Matriel

un capteur de

8,95 $ CAN
6,90 Canada

- Fvrier 2015

Crer des jeux

Stock vector

Mensuel n184

Magma Mobile

Occultez
votre code source

le nouveau
e
langage dAppl

PROGRAMMEZ.COM

Les mythiques
machines Amstrad

PROGRAMMEZ.COM

Success Story

Scurit Android

Antiquit

6,45
en UE - BELGIQUE
6,90
Printed in EU - Imprim
6,45 - DOM Surf
LUXEMBOURG
- MAROC 50 DH
SUISSE 12 FS - TOM 940 XPF
Canada 8,95 $ CAN

SWIFT

iBeacon
Les bornes
2 / Starter Kit IoT
votre porte
x kits Intel Galileo
Les nouveau
nouveaux mondes
alternatives : les
Les ralits

Facile comme

3:HIKONB=^UZ^Z]:?k@b@i@a@k";

frankpeters
nuage : 07-17-13

les

/ IoT
Objets connects

Les consquences
de linformatique
quantique
Protger
son code
Android

Dmarrer un
rry Pi
projet Raspbe
ou Arduino

le dveloppeur ?
DevOps va-t-il tuer
continu
Le dveloppement pratiques
es
Les outils, les bonn
dien
Le DevOps au quoti

e
s PhSDKon
ow
Nokia
ndunive
Wiapps
rselles, les

Lessentie

Coding
la neige

6,45 DOM Surf

peur :
Dvebeaulop
mtier C++
le plus
du monde !

dieu
demi-Con
14
Hackerl de: laniveau
confrence No Such

Des apps natives


iOS,
pour Android, avec
Windows Phone
!
un seul code

= Dveloppe
+ Exploitation

- intrieur : 07-25-13

Henrik5000

(re)dcouvrez
Wordpress

- Janvier 2015

Mensuel n182

12 FS - LUXEMBOURG
6,45 SUISSE

5,95 E - RD

Dveloppez rapide

Web

Mensuel n181

Xamarin

Cloud Computing DevOps


ment
/ Heroku DX
Microsoft Azure
Platform
Google Cloud Services
Amazon Web

6,45

en UE - BELGIQUE

M 04319 - 187 - F:

e du

12 FS - LUXEMBOURG
6,45 SUISSE

Je dbute ave

- Dcembre 2014

Facebook Parse ment vos applications mobiles

Toute la puissanc

en UE - BELGIQUE

DH

Printed in EU - Imprim

PROGRAMMEZ.COM

Printed in EU - Imprim

Laventure
du MSX

/ iStock

XPF - MAROC 50

Antiquit

11-05-14 Intense_Media

$ CAN - TOM 940

Introduction
AngularJS

6,45 - DOM

6,90 Canada 8,95

Optimiser la JVM

50 DH

6,45
en UE - BELGIQUE
6,90
Printed in EU - Imprim
6,45 - DOM Surf
LUXEMBOURG
- MAROC 50 DH
SUISSE 12 FS - TOM 940 XPF
Canada 8,95 $ CAN

pour Chrome
Crer des apps
a!
utiliser des lambd
JavaScript :
m Manager ?
Ksako un Progra

12 FS - LUXEMBOURG
6,45 SUISSE
50 DH
en UE - BELGIQUE
940 XPF - MAROC
Printed in EU - Imprim Canada 8,95 $ CAN - TOM
Surf 6,90

6,45 - DOM Surf

sseur
origines du proce
?
X-Files : les
dveloppeur
salaire pour le
Carrire : quel

5,95 E - RD

Mensuel n180

12 FS - LUXEMBOURG
6,45 SUISSE

cologique

Un code +
cace
= un code + ef

M 04319 - 182 - F:

- Novembre 2014

en UE - BELGIQUE

940 XPF - MAROC

PROGRAMMEZ.COM

PROGRAMMEZ.COM

PROGRAMMEZ.COM

Printed in EU - Imprim

- TOM
Canada 8,95 $ CAN
DOM Surf 6,90

09-25-14 frankpeters

5,95 E - RD

6,45
en UE - BELGIQUE
6,90
Printed in EU - Imprim
6,45 DOM Surf
LUXEMBOURG
- MAROC 50 DH
SUISSE 12 FS - TOM 940 XPF
Canada 8,95 $ CAN

La 3D FreeSculpt

09-18-12 DrAfter123

pour
nt, petit, WiFi inclus
ESP8266 : puissa
MicroView
Test de la carte

Mai 2014

M 04319 - 174 - F:

3:HIKONB=^UZ^Z]:?a@b@h@o@k";

Impression 3D

La rvolution

du maker faire

Et aussi :
Le langage SWIFT
Visual Studio 2014

5,95 E - RD

Mensuel n174 -

Prototyper
une application

Optimiser les
performances
de Google Maps

PROGRAMMEZ.COM

Design

Mensuel n179

Le futur
dAndroid
- Juillet-Aot 2014
Mensuel n176
5,95 E - RD
M 04319 - 176 - F:

le moteur 3D
dtonnant

3:HIKONB=^UZ^Z]:?k@l@i@b@g";

toujours vivant

Lhistoire dEclips

1 an de Programmez !

nc

programmation ava

Babylon.JS

Les nouveauts
de MariaDB

M 04319 - 181S - F:

Photos

Cobol,

Parade/Archive

(re)dcouvrez Grails

lcoconception
logicielle :
!
cest maintenant

PROGRAMMEZ.COM

Pour un code
de qualit
et bien
e
document !
un vieux langag

Photo by Pictorial

Web

cologie :

Mouvement
Craftsmanship

Drupal :e

- le futur du
langage
- Symfony
rk
- Zend Framewo
Cloud
- PHP dans le

Rains

ive-C

a dcouverte dObject

urs la fte !

Les dveloppe

- Octobre 2014

eurs
Les conten
Docker

PHP

12-23-13 Larry

Carrire

5,95 E - RD

ako ?

M 04319 - 190 - F:

a8

volution des lambdas

ngage fonctionnel

Mensuel n178

compilateur interprte notre code


http://tryroslyn.azurewebsites.net/
Comme vous pouvez le voir sur la capturecran, gauche vous pouvez saisir votre code
en C# ou en VB.NET. Diffrentes releases vous
sont aussi proposes. Et sur la droite de
lcran, vous pourrez lire le rsultat de Roslyn
en C#, VB.NET ou encore en IL (Intermediate
language) et ceux en mode Debug ou en mode
Release. Vous constaterez que cest trs
instructif !
u

g
Cloud Computin



Lapprentissage e :
du code lcol ?
une bonne ide

erry Pi,
Que faire de son Raspbt ?
cet
Arduino et Galileo

3:HIKONB=^UZ^Z]:?a@b@j@k@k";

Faut-il
passer

Antiquit

Cahier DRUPALsite / Drupal 8

App Storener:
qui veut gag
? Coding la plage
des millions

ppement idal

Source, Azure,
lles Windows
pplications Universe

- Septembre 2014


 


 
 

guration / Mon 1er


Installation / Con

LD 2014
frence //BUI
Visual Studio...

Mensuel n177

 
 

100
PAGES

3:HIKONB=^UZ^Z]:?k@b@s@c@a";

- Novembre 2015

PC de dvelo

PROGRAMMEZ.COM

PROGRAMMEZ

PROGRAMMEZ.COM

Mensuel n190

Linux
veloppez sur

danalyser le code directement sous forme


textuelle. Vous trouverez ce package NuGet via
ce lien :
http://www.nuget.org/packages/Microsoft.CodeAnalysis
Ce compilateur tant open source, jai
dcouvert il y a peu quun dveloppeur, Andrey
Shchekin (@ashmind), a cr un site Web o
vous pouvez tester Roslyn et attention on y
devient addict ! On peut donc y tester les
petites nouveauts du C#6, et se rendre
compte immdiatement comment le

DH

Option "archives" : 10 .

069_072_191 18/11/15 22:15 Page69

MEAN.IO (3/4)
Voici le troisime article de la srie consacre MEAN.IO, aprs la prsentation gnrale du framework
lors du premier et celles des concepts permettant de crer un nouveau module dans le second, nous
nous attarderons ici sur un cas d'application concret : celui de la visualisation de donnes
gographiques. Depuis le dpart, nous souhaitons en effet crer une application permettant de
visualiser un ou plusieurs itinraires GPS (type randonne VTT ou pdestre). Nous avons dfini
prcdemment le modle de donnes permettant de stocker l'information en base, ainsi que l'API REST
permettant de le manipuler. Ensuite, nous avons cr une partie cliente incluant des interfaces hommemachine (IHM) pour la prsentation et l'dition de ces donnes. Il ne nous reste donc maintenant qu'
ingrer et visualiser nos chemins sous formes de cartes la faon de "Google Maps" (objet du prsent
article) ou de vues 3D la faon de "Google Earth" (4e et dernier article de la srie).
Luc CLAUSTRES
Consultant indpendant
Crateur dApplications Numriques
http://www.digital-innovation.fr

MISE JOUR DE L'APPLICATION


Partie serveur (back-end)
Mise jour du modle

Nous avions dfini dans l'article prcdent le schma MongoDB de l'objet


unique manipul par notre application qui est un itinraire GPS ('track' en
anglais). Un tel chemin est simplement dcrit par une liste de positions
GPS acquises par le capteur. Chaque point est repr en coordonnes
gographiques : longitude, latitude et altitude. A part l'utilisateur qui l'a
cr, un titre et un descriptif, le chemin contenait donc un tableau de ces
coordonnes. Nanmoins, ce stade, nous n'avons aucun moyen d'ingrer dans notre application le chemin qui a t suivi et que l'on souhaite
reprsenter. Comme ce type de donnes est gnralement acquis de
faon automatise (via un GPS) et trop volumineux pour tre ingr
manuellement, nous allons crer diffrentes fonctions permettant de facilement remplir notre base de donnes avec ces informations.
Dans le domaine il existe de nombreux formats mais les plus usits concernant une trace GPS sont probablement ces deux-l (tous deux bass sur
XML) :
a GPX(GPS eXchange Format), un format ouvert permettant de dcrire
une collection de points utilisables sous forme de chemin (waypoint),
trace (track) ou itinraire (route).
a KML (Keyhole Markup Language), un format bas sur COLLADA et
popularis par Google mais qui est aujourd'hui devenu un standard
international.
Afin d'optimiser le stockage en base, de ces donnes, nous avons toutefois utilis un tableau de coordonnes brutes au sein de notre modle.
Pour simplifier le code de conversion nous passerons par un format pivot
vers lequel seront transformes les donnes d'entre GPX/KML. Afin de
disposer d'une API facilement utilisable par des librairies cartographiques,
nous souhaitons galement utiliser ce format pivot en sortie. Nous focaliserons ainsi nos efforts sur le code de conversion du format pivot
vers/depuis notre base de donnes.
Le format pivot qui s'impose de lui-mme pour un code JavaScript
est GeoJSON (de l'anglais Geographic JSON), qui est un format ouvert
d'encodage de donnes gographiques bas sur la norme JSON (JavaS-

cript Object Notation). Il permet de dcrire des donnes de type point,


ligne, polygone, ainsi que des ensembles de ces types de donnes et d'y
ajouter des attributs quelconques. Il est de plus support par la plupart des
librairies traitant l'information gographique. Enfin, il existe le module
Node.js togeojson qui permet de convertir un arbre XML au format
KML/GPX en GeoJSON. Il suffit donc de coupler ce module un module
de parsing de flux XML tel que jsdom pour obtenir trs simplement la
conversion de nos donnes d'entre. Etant donn que ces informations
sont volatiles, nous utilisons naturellement un attribut virtuel de Mongoose
(en criture seulement) pour ce faire. Ainsi, une fois rajoutes les deux
dpendances Node.js au package.json de notre module MEAN.IO nous
insrons le code suivant dans notre modle pour convertir les donnes
d'entre :
var togeojson = require('togeojson'),
jsdom = require('jsdom').jsdom;
// Setter permettant de remplir le chemin partir de donnes au format KML
TrackSchema.virtual('kml')
.set(function (data) {
if ( data ) {
var kml = jsdom(data);
var geojson = togeojson.kml(kml);
this.set( 'geojson', geojson );
}
});
// Code identique pour grer le format GPX
...
Le code de conversion repose lui-mme sur un attribut virtuel permettant
de stocker en base les donnes converties dans notre format pivot (i.e.
GeoJSON). Etant donn que nous utilisons ce format galement en sortie,
cet attribut est cette fois en lecture/criture. Si la conversion vers le
GeoJSON est triviale, celle depuis le GeoJSON est un peu plus complexe
selon les diffrents types de donnes d'entre, nous naborderons donc ici
que le cas le plus simple (voir le code de l'article pour l'exemple complet).
Trucs & Astuces : depuis la version 2.4 MongoDB supporte nativement le stockage de donnes au format GeoJSON (http://docs.mongodb.org/v2.6/reference/geojson/), il serait donc tout fait possible de
stocker directement l'objet GeoJSON pour simplifier la manipulation,
mais en complexifiant la structure de donnes
Programmez! a Dcembre 2015

69

069_072_191 18/11/15 22:15 Page70

Il ne nous reste plus qu' permettre l'utilisateur de fournir un fichier KML


ou GPX afin d'alimenter notre base de donnes. Dans une application relle, le fichier serait tout d'abord transfr sur le serveur puis trait ct serveur afin d'optimiser la bande passante et de s'affranchir des limites de
taille. En effet par dfaut Express configure une limite de 100 Kb pour la
charge utile des requtes JSON
(voir https://github.com/expressjs/body-parser).
Trucs & Astuces : Il est possible de configurer la taille par dfaut via
une instruction du typeapp.use(express.json({limit:'50mb'})); l'initialisation
d'Express, ce qui ncessite aujourdhui de modifier le code de
MEAN.IO pour se faire (voir https://github.com/linnovate/mean/issues/1169).
Vous pouvez galement utiliser des outils ddis tels que le package
MEAN.IOupload oung-file-upload coupls multer qui se basent sur
lesForm Data pour disposer d'un transfert de fichier fiable.
Nanmoins, dans l'optique de simplifier notre exemple, nous allons lire le
fichier ct client et envoyer directement les donnes lues avec la requte de cration ou d'dition du chemin. Ainsi, seule la conversion en
GeoJSON se ralisera ct serveur. Grce aux attributs virtuels de notre
modle il suffit de rajouter une proprit kml ou gpx au contenu de notre
requte pour que la magie opre ! Pour faire cela simplement j'ai cr une
directive AngularJS (voir le code complet de l'article) qui chaque changement dans le slecteur de fichier de notre formulaire va rcuprer le
nom et le contenu du fichier slectionn via la File API d'HTML5. Au niveau
du contrleur l'ajout du contenu du fichier dans la proprit adquate de
note modle (kml ougpx) se base sur l'extension du fichier lu :
...
var track = $scope.track;
// Ajout du contenu du fichier si prsent
if ( track.file.content ) {
track[track.file.extension] = track.file.content;
}
...
Afin de localiser plus simplement le chemin sur une carte nous allons galement rajouter un champ contenant l'tendue gographique, traditionnellement nomm BBox (Bounding Box), car mathmatiquement, il correspond la plus petite "bote" en deux dimensions qui englobe tous les
points du chemin. Concrtement ce rectangle est dfini par un point sudouest contenant la longitude et la latitude minimale, et un point nord-est
contenant la longitude et la latitude maximale ; nous stockerons ces 4
valeurs sous la forme d'un tableau. Ceci nous permettra de recentrer la
vue cartographique sur la zone concerne pour ne pas avoir rechercher
sur la carte. Au final le code du fichier TrackModel.js dans le
dossiermodels du module est modifi comme suit pour le schma et les
fonctions d'importation/exportation des donnes :
// Dclaration du schma du modle 'Track'
var TrackSchema = new mongoose.Schema({
...
// Bote englobante des points (coordonnes gographiques galement)
bbox : {
type : [Number], required : false
}
});
// Getter permettant de rcuprer le chemin au format GeoJSON
TrackSchema.virtual('geojson')

70

Programmez! a Dcembre 2015

.get(function () {
var coordinates = [];
// En GeoJSON chaque point est un tableau alors que nous stockons plat
for (var i = 0; i < this.waypoints.length / 3; i++) {
coordinates[i] = [ this.waypoints[3*i], this.waypoints[3*i+1], this.waypoints[3*i+2] ];
}
// Encapsulation des coordonnes dans le formalisme GeoJSON
var feature = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": coordinates
}
};
return feature;
})
// Setter permettant de remplir le chemin partir de donnes au format GeoJSON
.set(function (geojson) {
if ( geojson && geojson.type == 'LineString' ) {
// Rcupration des coordonnes
var coordinates = geojson.coordinates;
// Transformation dans le formalisme de la base de donnes
var waypoints = [];
// Calcul de la bote englobante
var minLon = 360; var maxLon = -360;
var minLat = 90; var maxLat = -90;
for (var i = 0; i < coordinates.length; i++) {
waypoints[3*i] = coordinates[i][0];
waypoints[3*i+1] = coordinates[i][1];
// Mise jour des valeurs min/max
minLon = Math.min(minLon, waypoints[3*i]);
minLat = Math.min(minLat, waypoints[3*i+1]);
maxLon = Math.max(maxLon, waypoints[3*i]);
maxLat = Math.max(maxLat, waypoints[3*i+1]);
// Nous nous assurons d'avoir des coordonnes 3D (pas requis en GeoJSON)
if ( coordinates[i].length >= 3 ) {
waypoints[3*i+2] = coordinates[i][2];
} else {
waypoints[3*i+2] = 0;
}
}
this.set( 'waypoints', waypoints );
this.set( 'bbox', [minLon, minLat, maxLon, maxLat] );
}
});

Partie cliente (front-end)


Mise jour des routes

Aux routes ct front-end, qui sont gres via l'AngularUI Router, nous en
ajoutons une nouvelle dans le fichier ApplicationRoutes.js du
dossierroutes de la partie publique, il s'agit de la dclaration permettant
d'accder la page pour afficher la carte d'un chemin :
// Page permettant de voir un chemin sur la carte
$stateProvider.state('track map', {
url: '/track/:trackId/map',
templateUrl: '/application/views/TrackMap.html',
controller: 'TrackMapController',
resolve: {

069_072_191 18/11/15 22:15 Page71

un affichage fluide est, en fonction de la zone visualise par l'utilisateur,


d'identifier et de tlcharger uniquement les tuiles visibles et dont la rsolution est la plus adapte l'cran. Les tuiles prsentent en gnral un
grand nombre de niveaux de zoom, de la vue mondiale au dtail de la rue,
mais leur nombre l'cran dpasse rarement quelques dizaines (Fig.2).

loggedin: function(MeanUser) {
return MeanUser.checkLoggedin();
}
}
});

Mise jour des vues

Pour la prsentation des chemins (sous forme de liste ou sous forme unitaire) nous avions utilis prcdemment des panels Bootstrap. L'en-tte
(classe CSS panel-heading) contenait notamment les actions ralisables
par l'utilisateur (e.g. diter ou effacer) sous forme d'icnes, auxquelles
nous rajoutons la possibilit d'ouvrir la vue cartographique (Fig.1)
danspublic/views/Track.html :
<!-- Actions associs au chemin (effacer, diter, vue 3D et vue carte) -->
<a data-ng-click="remove(track)"><i class="pull-right glyphicon glyphicon-trash">&nbsp;</i></a>
<a href="/track/{{track._id}}/edit"><i class="pull-right glyphicon glyphicon-edit">&nbsp;</i></a>
<a href="/track/{{track._id}}/map"><i class="pull-right glyphicon glyphicon-map-marker">&nbsp;</i></a>
</div>

VUE CARTOGRAPHIQUE

La gestion de donnes cartographiques est un domaine qui ncessite un


travail algorithmique important, afin d'assurer des temps d'accs rapides,
tant le volume de donnes peut tre consquent. Imaginez par exemple
que l'on couvre aujourd'hui la terre entire avec des images satellite une
rsolution de quelques dizaines de centimtres. Une telle image sur une
zone de 20 kilomtres carrs a une taille qui avoisine le milliard de pixels
et pse plusieurs giga-octets mme compresse. Accder une base de
donnes mondiale de ce type ncessite de pouvoir naviguer travers des
dizaines de traoctets de donnes. Heureusement, des services mettant
disposition de telles donnes sont aujourd'hui accessibles gratuitement
sur Internet, comme par exemple OpenStreetMap que nous utiliserons
pour nous fournir un fond de carte sur lequel nous viendrons afficher nos
tracs GPS.
Les fonds de carte de ce type sont gnralement dcoups en tuiles (i.e.
images) de petite taille et dcomposs sur plusieurs niveaux gographiques (chelles ou niveaux de rsolution). L'ide gnrale pour obtenir

Fig.1

Pour la visualisation de donnes cartographique, les deux librairies Open


Source les plus connues sont probablement ce jour OpenLayers
et Leaflet. David Rubert a eu la bonne ide d'initier des projets Open
Source (auxquels j'essaye de contribuer) pour encapsuler ces deux librairies via des directives AngularJS, il s'agit de :angular-openlayers-directive etangular-leaflet-directive. Nous allons utiliser cette dernire pour notre
application.

Directive

Pour ce faire, il faut rajouter "angular-leaflet-directive": "latest" dans le


fichierbower.json la racine de votre dossier applicatif et excuterbower install. Ensuite il faut modifier leapp.js du module applicatif pour rajouter les
fichiers ncessaires l'agrgation (voir article prcdent) :
// Dpendances AngularJS du module
Application.angularDependencies(['mean.system', 'mean.users', 'leaflet-directive']);
Application.aggregateAsset('css', '../../../../../../bower_components/leaflet/dist/leaflet.css');
// La priorit permet de s'assurer que la librairie est charge avant la directive
Application.aggregateAsset('js', '../../../../../../bower_components/leaflet/dist/leaflet.js', {weight: -1});
Application.aggregateAsset('js', '../../../../../../bower_components/angular-leaflet-directive/dist/
angular-leaflet-directive.js');

La directive se configure principalement via les attributs suivants :


a defaults : objet dfinissant la configuration de la carte (e.g. contrles
actifs) ;
a center : objet contenant les coordonnes du point central par dfaut
ainsi que le niveau de zoom ;
a layers : liste des couches disponibles pour le fond cartographique ;
a markers : liste de marqueurs (i.e. icnes) disposs sur la carte ;
a geojson : une couche de donnes au format GeoJSON affiche en surimpression sur la carte.
Notre configuration se contente d'autoriser le zoom avant/arrire via la
molette et d'afficher galement des boutons +/- pour se faire :
$scope.defaults = {
zoomControlPosition: 'topleft',
scrollWheelZoom: true
}
Chaque couche de donnes est caractrise par un nom, un type (i.e. format) et une URL d'accs. Les diffrentes couches de fond cartographique
sont slectionnables via un menu intgr la carte (en haut droite Fig.3).
Par exemple la couche de base propose par OpenStreetMap est configure comme suit :

Fig.2

$scope.layers = {
baselayers: [{
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: ' OpenStreetMap contributors',
Programmez! a Dcembre 2015

71

069_072_191 18/11/15 22:15 Page72

continuousWorld: true
}]
}
Nous utiliserons la couche des marqueurs pour ajouter un simple marqueur indiquant le point de dpart du chemin en indiquant ses coordonnes et un message apparaissant sous forme de bulle d'information :
$scope.markers.you = {
lat: track.waypoints[1],
lng: track.waypoints[0],
message: "You are here"
}

Contrleur

Le contrleur de la vue cartographique rcupre tout d'abord l'ID du chemin visualiser dans l'URL grce la fonctionfindOne(). Ensuite il configure
la couche de donnes au format GeoJSON partir du rsultat de la requte ddie sur notre API (voir article prcdent). La dernire instruction permet de recentrer la carte sur l'tendue gographique du chemin afin d'obtenir le rsultat de la Fig.3 :
// Contrleur utilis pour afficher un chemin sur une carte
angular.module('mean.application').controller('TrackMapController', ['$scope', '$http',
'$stateParams', 'TrackService', 'leafletData',
function($scope, $http, $stateParams, TrackService, leafletData) {
// Donnes charges de faon asynchrone
$scope.geoJSON = {};
$scope.markers = {};
//Rcupre un chemin via son ID
$scope.findOne = function() {
TrackService.get({
trackId: $stateParams.trackId
}, function(track) {
$scope.track = track;

// Rcupration des donnes au format GeoJSON


$http.get('/api/track.GeoJSON/' + track._id).success(function(data, status) {
angular.extend($scope, {
geoJSON: {
data: data,
style: { weight: 5, color: 'red' }
}
});
});
leafletData.getMap().then(function(map) {
// Zoom sur le chemin
map.fitBounds( [ [track.bbox[1], track.bbox[0]], [track.bbox[3], track.bbox[2]] ] );
});
});
};
}
]);

Vue

La vue se contente d'instancier la directive et de binder les variables


appropries du scope sur les attributs ddis :
<div data-ng-init="findOne()">
<!-- Ajout d'une carte Leaflet -->
<leaflet center="center" layers="layers" geojson="geoJSON" defaults="defaults" markers
="markers" width="100%" height="512px"/>
</div>

Conclusion

Cet article a t l'occasion de dcouvrir le domaine de la cartographie et


d'approfondir votre connaissance du framework MEAN.IO en le mettant en
pratique sur un cas concret dutilisation via lintgration de librairies
externes. Lors du prochain pisode nous terminerons en beaut avec la
visualisation de nos chemins en vue 3D la faon "Google Earth".

Fig.3

72

Programmez! a Dcembre 2015

073_075_191 18/11/15 22:16 Page73

Crez des objets connects avec le Cloud AWS !


Afin de rduire leurs cots oprationnels, de construire de nouvelles lignes mtiers, ainsi que
daugmenter la satisfaction et la fidlit de leurs clients, les entreprises parient aujourdhui sur des
applications reposant sur des objets connects. Cette tendance fait accrotre considrablement le
nombre de ces objets connects.
Michael Garcia
Amazon Web Services

Fig.1

Dans cet article, nous allons voir comment connecter des objets au Cloud
AWS afin de les rendre intelligents pour vos utilisateurs. Vous serez ainsi en
mesure de crer des applications forte valeur ajoute bases sur les donnes envoyes par les objets connects, tout en ayant la possibilit de les
commander distance.
Pour crer cette forte valeur ajoute vous pourrez bnficier de ltendue
de la plateforme AWS pour rajouter des composantes mobiles, analytiques
ou encore de machine learning votre application.

Objets connects et protocoles adapts

Un large choix dobjets connects existe que nous pouvons classer en


deux catgories:
a Les objets connects qui nont pas de limitation particulire; leurs ressources peuvent leur permettre de communiquer en HTTP(s) sans
considrations particulires vis vis de la bande passante et ils sont
capables dexcuter du code crit dans la plupart des langages de programmation actuels.
a Les objets dits contraints car ils possdent au moins une limitation
sur une de leurs ressources. Cela peut tre une limitation au niveau de la
puissance de calcul, de la bande passante, de lautonomie ou encore de
la mmoire disponible sur lobjet.
Pour rpondre aux limitations des objets dits contraints qui ne peuvent pas
se permettre de communiquer via HTTP(s), plusieurs protocoles ont t
crs. Parmi plusieurs candidats nous avons choisi, de manire arbitraire,
dutiliser dans cet article le protocole MQTT qui est adapt aux objets trs
contraints de classe 1: les objets de classe 1 possdent environ 100 Kb de
stockage, 10 Kb de RAM et une bande passante disponible faible. Le choix
du protocole doit seffectuer en fonction de votre cas dusage et du type
dobjet connect utilis.
Pour muler un objet contraint nous allons utiliser un Raspberry Pi en raison de sa popularit et de son accessibilit afin de faciliter le prototypage
pour les lecteurs. Dans un cas rel vous pourriez remplacer le Raspberry Pi
par un micro contrleur ou tout autre objet contraint.

Schma darchitecture de la solution

Voici les fonctionnalits du prototype prsent dans cet article:


a Envoi de donnes partir de lobjet connect ;
a Traitement de ces informations ;
a Envoi de commande lobjet connect.
Nous allons maintenant dtailler dans la suite de cet article chacune des
parties de cette architecture (Fig.1) afin de comprendre le rle de chacun
des services AWS utiliss.

Etape 1 : Envoi et rception de messages sur


un objet connect

Lobjet connect doit tre capable dmettre des messages et de recevoir


des commandes. Le protocole MQTT est un protocole bas sur un syst-

me de publication/notification qui est gr par un serveur (appel broker) auquel tous les clients doivent se connecter. Une fois connects les
clients peuvent publier des messages sur un topic, tous les clients qui
ont souscrit ce mme topic reoivent alors le message.
Nous allons utiliser le client open source Mosquitto, pour cela rendez-vous
sur la page http://mosquitto.org/download/ et choisissez le client qui correspond votre OS. Une fois install vous pouvez tester la configuration avec
un broker de test mis disposition par mosquitto.org, pour cela ouvrez
deux terminaux sur votre Raspberry Pi, dans la premire fentre abonnezvous au topic foo/msg sur le broker de test test.mosquitto.orget restez en attente :
//Abonnement au topic
mosquitto_sub -h test.mosquitto.org -q 1 -d -t foo/msg -i rapiSubscribe
Dans la deuxime fentre publiez un message sur le mme topic et le
mme serveur:
//Publication du message
mosquitto_pub -h test.mosquitto.org -q 1 -d -t foo/msg -i raspiPublish -m "{\"msg\" :
\"Hello, World\"}"
Vous devriez recevoir le message suivant sur la premire fentre:
//Reception du message
{"msg" : "Hello, World"}
Maintenant que nous avons test notre configuration nous avons besoin
denvoyer ce message vers le Cloud afin quil soit exploit par notre application. Le service le plus adapt pour faire cela est Amazon Kinesis, car
cest un service manag dingestion des donnes.
En plus dtre hautement disponible, ce service est galement extrmement lastique ce qui lui permet dtre adapt une utilisation relle et
trs grande chelle.
Nanmoins la communication avec Amazon Kinesis est tablie grce au
protocole HTTP(s), nous allons donc nous servir dun pont pour recevoir
les messages MQTT et les pousser en HTTPS vers Kinesis.
Programmez! a Dcembre 2015

73

073_075_191 18/11/15 22:16 Page74

Etape 2: Construction de la liaison entre


lobjet connect et Kinesis grce
un bridge MQTT

Etape 4: Exploitez les informations collectes


avec AWS Lambda

Un bridge MQTT Kinesis est disponible ladresse suivante:


https://github.com/awslabs/mqtt-kinesis-bridge
Vous pouvez suivre les instructions disponibles sur le fichier Readme.md
pour dployer le bridge sur une instance Amazon EC2. Lors du lancement
de votre instance EC2, pensez associer un rle IAM qui vous permettra
de poster des messages dans Amazon Kinesis, pour cela associez une
police IAM votre rle qui permettra minima les actions suivantes: CreateStream, DescribeStream, GetRecords, GetShardIterator, ListStreams &
PutRecord.
Pour linstant nous allons uniquement tester linstallation de votre broker
MQTT, vous pouvez le lancer laide de la commande:
//Lancement du broker mqtt
mosquitto
Rptez ensuite les tapes mentionnes prcdemment en remplaant
cette fois-ci le host par ladresse IP publique de votre instance EC2, par
exemple pour poster un message:
//Publication du message
mosquitto_pub -h XX.XX.XX.XX -q 1 -d -t foo/msg -i raspiPublish -m "{\"msg\" : \"Hello,
World\"}"
Passons maintenant ltape de configuration de Kinesis avant de lancer
le bridge MQTT laide de Python.

Etape 3 : Ingestion des messages lchelle


avec Kinesis

Kinesis peut collecter et stocker en permanence plusieurs traoctets de


donnes par heure partir de centaines de milliers de sources, il est donc
trs adapt pour ingrer le flux dinformations provenant de nos appareils
connects.
La premire tape consiste crer un Stream Kinesis qui vous permettra de collecter tous les messages provenant de votre objet connect. En
ralit les messages provenant de lobjet connect arriveront dune instance EC2 qui abrite un pont MQTT vers Kinesis.
Pour cela rendez-vous sur la console AWS du service Kinesis et lancez la
cration dun nouveau Stream, renseignez bridgemqtt pour le nom du
stream et 1 pour le nombre de Shards (Fig.2).
Les Shards reprsentent lunit dlasticit de votre flux Kinesis; dans cet
article nous navons besoin que dun seul Shard, ce qui nous assure dj
de pouvoir ingrer 1 Mo/s de donnes. Dans un usage rel, il faudra prvoir lutilisation de plusieurs Shards.

Fig.2

74

Programmez! a Dcembre 2015

Il ne nous reste donc plus qu exploiter les informations venant du flux


Kinesis : pour ce faire nous allons utiliser AWS Lambda.
Ce service permet dexcuter du code en rponse des vnements et
gre automatiquement les ressources de calcul; dans notre cas prcis les
vnements sont les messages envoys par notre objet connect.
Dirigez-vous vers la console AWS Lambda pour crer votre premire fonction Lambda en Node.js et slectionnez le template kinesis-processrecord.
Vient ensuite la configuration de la source dvnements que notre fonction AWS Lambda exploitera. Pour cela slectionnez Kinesis en tant que
type de source dvnements, bridgemqtt pour le nom du stream,
100 pour le Batch Size ce qui vous permettra de recevoir des vnements par paquet de 100 et Latest en tant que Starting Position, ce qui
aura pour effet denvoyer AWS Lambda les derniers messages prsents
dans le flux Kinesis (Fig.3).
Dans lcran suivant, donnez le nom processMessages votre fonction
lambda, et laissez les paramtres par dfaut lexception du rle de votre
fonction. Choisissez ici Kinesis execution role pour crer un nouveau
rle (Fig.4) qui donnera les permissions ncessaires votre fonction Lambda pour rcuprer les messages contenus dans le flux Kinesis. Suivez
ensuite les instructions lcran.
Pour la dernire tape de configuration choisissez dactiver la source
dvnements immdiatement.
Nous allons maintenant modifier ce template afin de pouvoir envoyer un
message notre objet connect. Pour cela installez Node.js (https://nodejs.org/ ) si cela nest pas dj fait et excutez la commande suivantesur
votre terminal :
//Creation dun nouveau dossier et installation du module MQTT pour Node.js
mkdir lambda && cd lambda && npm install mqtt
//Creation et dition de la function lambda
nano index.js
A laide de lditeur de fichier nano, copier/coller la fonction suivante en
changeant ladresse IP ci-dessous par celle de votre instance EC2 bridge
MQTT:
//Initialisation du service Amazon Mobile Analytics
//Librairie MQTT
var mqtt = require('mqtt');
exports.handler = function(event, context) {
event.Records.forEach(function(record) {
// Kinesis data is base64 encoded so decode here
var payload = new Buffer(record.kinesis.data, 'base64').toString('ascii');
console.log('Decoded payload:', payload);
});

Fig.3

073_075_191 18/11/15 22:16 Page75

Vous devriez voir apparatre le message suivant sur votre objet connect,
ce message est publi par la fonction lambda et vous confirme que le traitement sest bien effectu correctement :

//Connection au broker MQTT


//Remplacez ladresse IP par celle de votre instance bridge MQTT
var client = mqtt.connect('mqtt://XX.XX.XX.XX');
//Publication du message vers l'objet connect
client.on('connect', function () {
client.publish('foo/msg', "Successfully processed " + event.Records.length + " records.");
client.end();
context.succeed("Successfully processed " + event.Records.length + " records.");
});
};
Il ne vous reste plus qu crer une archive du contenu de votre dossier
grce la commande suivante, et luploader manuellement via la console
Web AWS lambda.
//Creation de larchive avec le contenu du repertoire
zip r lambda.zip .

Test de lensemble de la chane

Maintenant que tous les composants de la chane sont en place nous pouvons tester lensemble. Pour cela suivez les tapes ci-dessous en remplaant ladresse IP avec celle de votre instance EC2 bridge mqtt.
Lancez le broker mqtt sur votre instance EC2:
//Lancement du broker MQTT
mosquitto
Lancez le bridge mqtt sur votre instance EC2:

//Rception du message venant de la fonction lambda


Successfully processed 1 records.

Mise en pratique avec une maison connecte

Le champ des possibilits est maintenant compltement ouvert. Vous tes


ainsi libre dintgrer le code que vous souhaitez dans votre fonction Lambda. Nous avons envoy notre objet connect un message de confirmation du traitement, ce mme mcanisme vous permet denvoyer des
ordres votre objet connect pour le contrler distance.
De plus vous pouvez interagir avec dautres services AWS pour crer tout
type dapplication afin de pouvoir effectuer du machine learning, de lanalytique et encore bien dautres oprations.
Un premier exercice est de crer une application pour maison connecte.
En connectant des LEDs, un buzzer et un capteur de temprature au Raspberry Pi nous pouvons muler respectivement une lampe, une alarme et un
thermostat.
Il sera alors possible de consulter en temps rel ltat de la lampe ainsi que
la temprature dans une application Web serverless supporte par Amazon DynamoDB. Une application mobile pourra permettre au propritaire
de la maison de piloter sa lampe depuis lextrieur de sa maison tout en
recevant galement les informations du systme en temps rel. Enfin en
cas dincendie, la temprature releve par le capteur dpassera un certain
seuil tolr, la suite de quoi le propritaire de la maison sera alert par
une alarme (buzzer) et un appel tlphonique mis via une API tierce de
service VOIP (Fig.5)

Conclusion

//Lancement du bridge MQTT Amazon Kinesis


python bridge.py bridgemqtt
Abonnez-vous au topic MQTT sur lequel la fonction lambda publiera un
message depuis votre objet connect:
//Abonnement au topic MQTT foo/msg, renseignez ladresse IP de votre instance EC2
mosquitto_sub -h XX.XX.XX.XX -q 1 -d -t foo/msg -i rapiSubscribe
Publiez un message sur le topic du bridge mqtt depuis votre objet connect:
//Publication sur le topic MQTT mqttkb/msg, renseignez ladresse IP de votre instance EC2
mosquitto_pub -h XX.XX.XX.XX -q 1 -d -t mqttkb/msg -i raspiPublish -m "{\"msg\" :
\"Hello, World\"}"

Vous venez de faire vos premiers pas dans le monde des objets connects.
Maintenant, vous pouvez complter larchitecture prsente avec dautres
services de la plateforme AWS pour vous permettre de stocker vos donnes, de les analyser, de les rendre disponibles par API ou encore de vous
intgrer avec votre propre systme ainsi quavec des tiers.
Vous pouvez galement interagir avec le monde rel maintenant que vous
tes capables denvoyer des commandes vos objets connects. Cela
vous offre de nouvelles opportunits dinnover quel que soit votre secteur
dactivit grce ce nouveau type dapplication.
Pour en apprendre davantage et dmarrer votre premier projet avec des
objets connects rendez-vous ds prsent sur https://aws.amazon.com/iot/.

u
Fig.5

Fig.4

Programmez! a Dcembre 2015

75

076_077_191 18/11/15 22:16 Page76

Insight: le contrle qualit automatis


de vos projets PHP
Dveloppeurs dbutants ou initis,
architectes ou encore directeurs
techniques, nous sommes souvent la
recherche de guidelines, best
practices permettant de concevoir des
applications robustes et fiables dans le
temps respectant ltat de lart et
facilement maintenables.
Antoine PACAUD
Directeur technique,
WEBNET
Cest dans cet esprit que Sensio, diteur du framework Symfony2, a mis disposition un outil
nomm Insight permettant de contrler et
damliorer la qualit de projets utilisant le framework Symfony2, mais aussi dautres frameworks PHP comme Silex, Laravel ou encore des
modules Drupal.
Prsent en bta lors des Symfony Live 2013
Paris, il est dsormais disponible dans sa version stable et commerciale et fonctionne en
mode SaaS.
Il est uniquement disponible en ligne et ne
ncessite aucune installation.
Aprs l'avoir test durant plusieurs mois, c'est
donc l'occasion pour moi de vous le prsenter.

Plus dune centaine


dindicateurs

Lorsquon soumet un projet Symfony2 au


moteur dInsight, celui-ci va tenter de linstaller
grce Composer, puis de le lancer et dy appliquer plus dune centaine de tests divers et varis
couvrant plusieurs domaines. Lune des forces
du moteur est quil neffectue pas quune analyse statique du code mais galement une analyse
dynamique. Celle-ci excute lapplication
comme lorsquune requte arrive sur lapplication. Le moteur est galement capable danalyser des fichiers non PHP tels que des templates
TWIG ou encore des fichiers de configuration
YAML ou XML. Voici quelques exemples des
domaines couverts:
a La scurit:
- Utilisation de mthodes juges peu fiables
o prsentant un risque de scurit
- Dtection de failles SQL / XSS
- Dtection de la publication de donnes sensibles dans les sources
- Traces de debug oublies dans les sources
a Risque de bug

76

Programmez! a Dcembre 2015

Fig.A
- Dtection derreurs de syntaxe ;
- Dtection dune erreur dinstallation / de
compilation ;
- Utilisation de mthodes dprcies ;
- Utilisation danciennes versions de framework comportant des bugs et/ou non maintenues.
a Performance
- Complexit trop importante de mthodes ou
de portions de code ;
- Configuration non adapte la production.
a Architecture
- Non-respect des bonnes pratiques ;
- Utilisation de structures non optimises ;
- Duplication de code.
a Code mort
- Code non utilis ;
- Prsence de code comment.
a Lisibilit du code / Respect des normes et
bonnes pratiques
- Respect des normes de dveloppement
(principalement PSR-2) ;
- Longueurs des mthodes / classes.
En ce qui concerne la scurit, Insight analyse
les versions des librairies/bundles externes utilises par votre projet (au moyen du fichier composer.lock) et les compare sa base de donnes
de failles de scurit connues. Cela vous permet
dtre alert trs rapidement si jamais une des
librairies compromet la scurit de votre application, vous dlestant ainsi dune partie de votre
travail de veille.
Chaque anomalie dtecte est ensuite pondre
par son degr de gravit (critique, majeure,
mineure ou informative). Il en rsulte une note
globale sur 100 de la qualit de votre projet ainsi
quune mdaille la refltant (de bronze, dargent,

dor ou de platine si respectivement aucune anomalie critique, majeure, mineure ou informative


nest dtecte).
Pour vous aider la planification des corrections, chaque anomalie est galement accompagne dune estimation du temps ncessaire sa
correction. Chaque rsultat danalyse est prsent sous forme dun tableau de bord reprsentant lensemble de ses informations(fig. A). Il est
possible de consulter le dtail de chacune des
anomalies afin dobtenir les fichiers concerns,
lestimation du temps ncessaire la correction,
ainsi que la marche suivre (fig B).
On pourra regretter la faible pertinence de lestimation temporelle des corrections. En effet, le
temps minimal de correction dune anomalie est
estim 15min. Si cela peut sexpliquer par le
temps ncessaire ouvrir le projet, raliser la
correction, dployer ses modifications, etc,
cette estimation perd en revanche, de son sens
lorsque 10 anomalies du mme type sont remontes. En effet, loutil va estimer quil faudra 1h30
(150min) pour raliser la correction alors quen
pratique 20min suffiront dans la plupart des cas.
Il sagit donc dun indicateur prendre avec prcaution et qui devra tre tempr par lquipe
technique.

Implmentation au sein
dune solution dintgration
continue

Pour profiter pleinement de cet outil et matriser


la qualit de votre projet, il est souhaitable que
ces tests soient effectus trs rgulirement,
idalement chaque jour, ou mme aprs chaque
modification du code source.
Pour commencer, Insight va avoir besoin dacc-

076_077_191 18/11/15 22:16 Page77

der au code source de votre application. Plusieurs moyens sont proposs pour cela. Si votre
code source est hberg sur des plateformes
telles que GitHub ou Bitbucket, il vous est possible de donner la permission loutil dy accder directement afin de pouvoir y excuter ses
diffrents tests. Si vous hbergez vous-mme
votre propre dpt GIT, vous pouvez galement
y donner laccs Insight sous rserve de louvrir ses serveurs au moyen dune protection
par cls SSH. Enfin, si vous ne souhaitez pas
ouvrir laccs votre dpt ou que vous utilisez
un autre systme de versionning tel que SVN,
Insight propose de vous crer un dpt GIT sur
leur plateforme sur lequel envoyer vos sources
quand vous souhaitez les faire analyser. Une
option vous permet par ailleurs de demander
loutil de dtruire la copie de vos sources aprs
chaque analyse pour des problmatiques de
confidentialit.
Une fois laccs accord loutil, il va vous tre
possible de programmer les analyses de diffrentes manires. Dans le cas de GitHub ou de
Bitbucket, vous allez pouvoir exploiter la fonctionnalit de hook, et dclencher ainsi automatiquement les analyses aprs chaque
push . Une fois lanalyse effectue, il vous
sera galement possible douvrir des tickets
automatiquement via linterface et ainsi daffecter les corrections vos collaborateurs.
Insight prend galement sa place tout naturellement au sein dune solution dintgration continue telle que Jenkins, Hudson, Travis, pour ne
citer queux. Il propose ainsi un petit utilitaire en
ligne de commande qui va permettre ces outils
de piloter les analyses et den rcuprer les
rsultats. Il devient alors possible dafficher
directement les rsultats de lanalyse au sein du
dashboard de Jenkins par exemple.

Et en pratique ?

Aprs une premire analyse ncessitant


quelques minutes, le verdict et la premire note
tombe. Autant vous prvenir, il est rare d'obtenir
mieux que la mdaille de bronze ds le premier
essai ! C'est l o le ct "gamification" de l'outil
prend le pas (au moyen des mdailles et notes),
et on se surprend vite vouloir obtenir le niveau
suprieur quitte faire quelques heures supplmentaires !
On prend vite le pas et on apprcie que loutil
nous rappelle nos erreurs dinattention comme
la longueur (20 lignes maximum) et le nombre de
nos actions (10 max/contrleur), le respect des
normes PSR-2 ou simplement le bon dcoupage
de la configuration de notre projet.
Il en rsulte un code plus maintenable, plus lgant, sur lequel il est plaisant de travailler.
Loutil permet galement la personne en charge de la revue qualit de se concentrer sur lalgorithmique, larchitecture gnrale et le mtier,
plus que sur ces aspects qui sont dsormais
audits automatiquement.
Le tableau de bord est bien conu et le dtail de
chaque anomalie avec l'explication lie, et les
pistes de rsolution sont plutt efficaces. Si, au
dbut, l'outil remontait rgulirement des faux
positifs, l'quipe Sensio semble avoir pris en
compte les remontes des utilisateurs et, aujourd'hui, la pertinence des alertes est bonne. Il reste
d'ailleurs toujours possible d'ignorer une alerte
particulire (ou mme un groupe d'alertes), si
celle-ci vous semble inexacte ou inadapte
votre projet.

Quel niveau viser ?

Il est lgitime de se poser la question du niveau


de qualit minimal atteindre avec ce genre
doutil.

Il ny a pas de rgle absolue, cela dpend de lanciennet de votre projet, de lquipe qui y contribue et de leur niveau de comptence sur la
technologie utilise, mais une chose est sre: plus
haute sera la note, meilleur sera votre projet. On
pourrait rsumer les mdailles comme ceci:
a Pas de mdaille : votre projet comporte, au
minimum, un risque de scurit majeur et/ou
un problme de syntaxe dans un des fichiers.
Vous devriez corriger rapidement les anomalies remontes.
a Mdaille de bronze: La plupart des anomalies
remontes ce niveau rvlent des dfauts
importants de votre application (utilisation de
fonctions PHP dangereuses et mauvaise architecture de votre application dans la plupart des
cas). Votre application gagnerait beaucoup en
maintenabilit si vous passiez ce cap.
a Mdaille dargent : Les principales bestpractices sont respectes par votre projet.
Cest le niveau minimal pour un projet en
cours de dveloppement selon moi. En
revanche, les alertes remontes restent
importantes et peuvent traduire un manque
de rigueur dans le dveloppement. La plupart
dentre elles ne ncessitent pas un investissement lourd pour tre corriges alors pourquoi
sen priver?
a Mdaille dor: Bravo! Votre projet respecte la
grande majorit des best-practices et son
architecture semble trs correcte. Ce niveau
peut tout fait tre suffisant pour un projet en
cours de dveloppement mais aprs tout,
pourquoi sarrter en si bon chemin?
a Mdaille de platine: Kudos! Pour reprendre les
termes dInsight. Loutil na pas t capable de
trouver un seul point faible votre projet. Cest
la rcompense ultime et le stade idal dune
release en production de votre projet.

Conclusion

Fig.B

Sensio prsente donc un outil performant qui


vous aidera amliorer rapidement et de faon
certaine la qualit globale de vos projets. Cet
outil devrait tre idalement utilis ds le dbut
du chantier afin de pouvoir traiter au fur et
mesure les remontes. En effet, sur un gros projet dj dvelopp, la charge de travail de correction des alertes remontes pourrait tre vite
trop lourde et dcourageante.
Bien que stable, l'outil continue d'voluer
chaque mois via l'ajout de nouvelles rgles et de
nouvelles fonctionnalits. Il est propos gratuitement pour les projets open-source ou via des
plans payants ( partir de 6/mois) pour les particuliers ou professionnels.
Pour ma part, l'essayer fut l'adopter et lobjectif
fix est la mdaille de platine chaque fin de
projet!
u
Programmez! a Dcembre 2015

77

078_081_191 18/11/15 22:17 Page78

Dvelopper avec le SDK Kinect 2

1re partie

La Kinect 2 est le capteur de mouvements de deuxime gnration produit par Microsoft. La Kinect
intgre plusieurs capteurs dont une camra couleur full HD, un metteur et un rcepteur infrarouge
ainsi que quatre micros. De par la diversit et la nature de ses composants, exploits par le SDK de
dveloppement Kinect 2 pour Windows, la Kinect offre au dveloppeur toutes sortes de possibilits
dinteraction avec lhumain trs facilement exploitables par le SDK.
Thomas Ouvr
Consultant Infinite Square
Blog: http://blogs.infinitesquare.com/b/touvre
En dveloppant une application pour Kinect 2, le panel de plateformes
cibles est trs large. Cela peut aller dune application pour Xbox une
application Desktop Windows 8 en passant par les applications Windows
Store, ou Windows Embedded. Les plateformes tant varies, il en va de
mme pour les langages et technologies. Nimporte quel langage couramment utilis dans lenvironnement Microsoft, savoir C++, C# ou JavaScript (pour les applications WinRT). Il est mme possible dutiliser le SDK
au sein dune application Unity.
Le SDK est tlchargeable ladresse suivante: https://www.microsoft.com/
en-us/kinectforwindows/develop/. Pour fonctionner, il est recommand de disposer dune machine avec au moins 4 go de RAM et une carte graphique
compatible DirectX 11. Il est aussi ncessaire de disposer dun contrleur
USB 3 dont la bande passante soit suffisante pour la quantit de donnes
transitant entre la Kinect et la machine. Une fois le SDK install, il est possible dutiliser loutil Kinect Configuration Verifier accessible via lapplication SDK Browser v2.0 (Kinect for Windows) pour sassurer que la
configuration de la machine actuelle est suffisante: Fig.1.

SDK BROWSER ET OUTILS OU


COMMENT DVELOPPER POUR
KINECT SANS KINECT

Outre loutil Kinect Configuration Verifier, linstallation du SDK offre laccs


plusieurs outils trs pratiques pour le dveloppeur Kinect. Il est en effet
intressant de prendre connaissance des capacits de ces outils avant de
commencer dvelopper pour Kinect car ils sont en mesure de faciliter la
vie du dveloppeur, quitte mme permettre de dvelopper sans Kinect
physique pour lun dentre eux.

Kinect Studio

Loutil Kinect Studio a pour but premier de monitorer la Kinect. Ainsi, une
fois lanc, ds la connexion tablie entre la machine et le capteur, il permet

Fig.1
de visualiser un rendu possible des diffrentes camras. On peut y jouer
avec les diffrentes options permettant de choisir lune ou lautre des
camras, ou encore slectionner lun des flux sources exposs par le SDK,
et ce, de diffrentes manires. Voici un aperu de loutil et de longlet Monitor dont il est question: Fig.2.
Lautre aspect intressant de Kinect Studio est sa capacit enregistrer
les donnes transmises par le capteur. Cette opration se fait via longlet
Record. Cette option va nous tre utile car les fichiers issus de cet enregistrement (appels Clips) vont nous permettre de rejouer lensemble de la
scne enregistre dans un Clip; il sera ainsi possible danalyser trame par
trame une scne en utilisant la timeline et surtout de simuler la Kinect dans
notre application. En effet, Kinect Studio peut agir comme une sorte de
simulateur de la Kinect du point de vue du SDK et permettre de dvelopper, debugger et tester une application utilisant le SDK Kinect sans tre
ncessairement reli un capteur physique. Il sagit donc dune bonne
nouvelle pour tout dveloppeur souhaitant sinitier ce SDK (en lisant la
suite de cet article par exemple) sans pour autant disposer dune Kinect 2.
Des clips prt lemploi sont dailleurs disponibles sur la plateforme Microsoft Virtual Academy en suivant ce lien (http://www.microsoftvirtualacademy.
com/training-courses/introduction-au-developpement-kinect-v2, tlcharger le
code source de la premire vido). Dautres sont aussi disponibles partout
sur le Web.
Lautre intrt des clips produits par Kinect Studio est quils sont les
fichiers dentre ncessaires la cration de projets pour Visual Gesture
Builder.

Visual Gesture Builder

Fig.2

78

Programmez! a Dcembre 2015

Avant de se lancer dans un dveloppement trs compliqu visant effectuer de la reconnaissance de gestes, traquer des postures et des gestures, tout dveloppeur Kinect doit connatre lexistence de ce formidable
outil quest Visual Gesture Builder. En effet, le traitement des donnes
brutes accessibles via le SDK ncessite la mise en place dalgorithmes
complexes, de formules mathmatiques et autres. Or, ce nest pas nces-

078_081_191 18/11/15 22:17 Page79

sairement le genre de challenge que recherchent les dveloppeurs actuellement, moi le premier. Visual Gesture Builder permet au dveloppeur de
rduire drastiquement la complexit de mise en place de tels scnarios, et
mme den assurer une meilleure efficacit. En effet, plutt que de mesurer
des dplacements de points, de calculer des vitesses et deffectuer des
interpolations et autres algorithmes base de fonctions mathmatiques
imbuvables, le dveloppeur Kinect peut faire appel la puissance du
machine learning et crer des bases de donnes de gestures, laissant ainsi
les APIs du SDK faire le travail de dtection.
Dans un scnario dusage avec Visual Gesture Builder, les clips de Kinect
Studio servent dfinir les moments pendant lesquels une gesture est ralise par un utilisateur (le dveloppeur doit taguer des scnes). Le moteur
de machine learning est ensuite capable dingrer ces informations et de
dfinir des patterns de dtection de ces gestures. Bien entendu, plus le
nombre de clips fournis est important et plus le travail de dtection effectu par le dveloppeur est prcis et correct, plus les patterns gnrs
seront prcis et efficaces. Pour permettre VGB dapprendre dtecter
une gesture, le dveloppeur na qu apposer des tags sur chaque trame
dun clip pour dfinir si une gesture est effectue un instant t.
Bien entendu, ce scnario est volontairement simplifi car il nest pas le
sujet de cet article, mais en parler ds maintenant permettra peut-tre
certains de sorienter rapidement vers cette solution potentiellement bien
plus simple et efficace mettre en place que des calculs maison. Pour
se donner une ide de ce que VGB permet de raliser, un sample est livr
avec linstallation du SDK.

Samples

Tous les samples sont accessibles via loutil SDK Browser, dont les applications Discrete Gesture Basics WPF et Discrete Gesture XAML. Ces
dernires sont un exemple dapplication utilisant une base de donnes
produite par VGB pour la dtection dune gesture discrte: la position assise. Ces exemples vont de lusage des micros de la Kinect la dtection
dun squelette en passant par le rendu de la camra infrarouge, de profondeur ou de couleur... La reconnaissance vocale, la reconstruction 3D, la
dtection dexpressions et lapplication Kinect Evolution sont autant de
sources dinformations disponibles pour lapprentissage du SDK Kinect.
Nanmoins, la suite de cet article est aussi un point dentre dans lapprentissage du SDK puisquelle vise la cration dune application C# Windows Store manipulant les fonctionnalits de base du SDK.

APPLICATION C# / WINDOWS STORE


Rfrencer le SDK et autoriser la Kinect

Une application Windows Store peut rfrencer le SDK Kinect via linterface de gestion des rfrences. Longlet Windows 8.1 > Extensions permet
de lister tous les composants WinRT accessibles, dont
WindowsPreview.Kinect: Fig.3.
Ce composant dpendant directement de Microsoft Visual C++ Runtime
Package, ce dernier est normalement automatiquement ajout la liste
des rfrences.
Une chose rappeler: la Kinect, une fois branche, apparat entres autres
choses comme une webcam et un micro. Il ne faut donc pas oublier daller
sur le manifeste du projet, couramment appel Package.appxmanifest, et

Fig.3

de cocher dans longlet Capabilities les options Microphone et Webcam.


Toutes les classes ncessaires sont accessibles via le namespace WindowsPreview.Kinect. On y trouve notamment la classe KinectSensor correspondant au point dentre de lAPI Kinect. Une instance de cette classe
reprsente une connexion entre le capteur et la machine et permet daccder diffrentes sources de donnes. Voici tout dabord comment obtenir
une telle instance:

var _sensor = KinectSensor.GetDefault();


if (!_sensor.IsOpen)
_sensor.Open();
Cet objet permet de dterminer si le capteur est activ et de lactiver si ce
nest pas le cas grce la mthode Open si cest possible, une connexion
sera ouverte et des donnes pourront tre reues depuis la Kinect. De
plus, lappel de cette mthode permet dtablir automatiquement une
connexion un capteur lorsque celui-ci est physiquement disponible,
mme si cela se produit aprs cet appel. Le modle de dveloppement
suggr par lAPI fait que le dveloppeur na pas se soucier de cela tant
quil respecte certains patterns. Nanmoins, sil souhaite sassurer quun
capteur physique est bien disponible, il peut faire appel la proprit IsAvailable et lvnement IsAvailableChanged.
Linstance de KinectSensor expose ensuite plusieurs proprits dont les
noms se terminent par Source. Ces proprits sont les points dentres
vers des fonctionnalits prcises de lAPI que lon appellera sources de
donnes. Ces sources permettent entre autres daccder des flux,
comme celui des camras de la Kinect, ou des flux de plus haut niveau
issus de calculs effectus sur les premiers. Ainsi, les flux bruts et leurs
points dentre correspondants sont:
a Infrarouge InfraredFrameSource
a De profondeur DepthFrameSource
a De couleur ColorFrameSource
a Infrarouge surexpos LongExposureInfraredFrameSource
a Audio AudioSource
Dautres flux sont directement issus de calculs effectus sur les premiers
(et notamment celui de profondeur), ce qui nous vite pas mal defforts:
a Body index BodyIndexFrameSource
a Body BodyFrameSource
Dautres sont accessibles via des composants WinRT supplmentaires
comme un flux spcialis pour les scnarios dusage de VGB, ou un autre
pour le traitement du visage et des expressions: Face.
Quel que soit le flux que le dveloppeur souhaite manipuler, il le fera en utilisant une mthode OpenReader sur la source. Celle-ci va permettre dtablir une connexion avec une source prcise et de rcuprer les dernires
donnes (grce une mthode dont le nom commence par AcquireLatest)
ou de sabonner un vnement (FrameArrived) et tre notifi lorsque de
nouvelles donnes sont disponibles. Ce pattern est commun toutes les
sources.

Les camras

Camra Couleur

Le premier flux le plus simple afficher est celui de la camra couleur. En


effet, les trames que renvoie ce flux sont de simples bitmap formats. Or
les APIs Kinect permettent de dfinir un format de conversion dont le format BGRA. Ce format, extrmement simple manipuler, est directement
compatible avec celui attendu dun contrle <Image>. Un moyen simple
deffectuer un rendu temps rel du flux de la camra couleur consiste en la
mise en place dun contrle Image dont la source est un WriteableBitmap.
A chaque trame disponible, ce dernier sera modifi en consquence afin
Programmez! a Dcembre 2015

79

078_081_191 18/11/15 22:17 Page80

de mettre jour limage. Le taux de rafrachissement de la camra couleur


tant au maximum de 30 fps la fluidit est optimale. De plus, les trames
couleurs sont dans une rsolution suffisante pour que la qualit soit aussi
au rendez-vous: 1920x1080!
Bien entendu, ces derniers chiffres sont ncessaires dans le code, car ils
permettent dinitialiser le WriteableBitmap. Le dveloppeur doit donc faire
appel la description de la trame dans laquelle se trouvent les informations
ncessaires. Dans le cas du flux de la camra couleur, une mthode permet dobtenir la description des trames dans le format BGRA:
var source = _sensor.ColorFrameSource;
var description = source.CreateFrameDescription(ColorImageFormat.Bgra);
var width = description.Width;
var height = description.Height;
Il suffit ensuite dinitialiser un WriteableBitmap et lassigner un contrle
Image nomm myImage
_bitmap = new WriteableBitmap(width, height);
myImage.Source = _bitmap;
La suite consiste logiquement acqurir le reader du flux courant, louvrir
et sabonner lvnement FrameArrived comme suit:
_colorReader = source.OpenReader();
_colorReader.FrameArrived += Reader_FrameArrived;
Le handler Reader_FrameArrived associ lvnement FrameArrived
(lev ds quune nouvelle trame est disponible et exploitable) sera utilis
pour la mise jour du WriteableBitmap. Les arguments de lvnement
sont utiliss pour rcuprer la trame et copier les donnes dans le format
BGRA attendu par notre WriteableBitmap:
private void Reader_FrameArrived(ColorFrameReader sender, ColorFrameArrivedEventArgs args)
{
using (var frame = args.FrameReference.AcquireFrame())
{
if (frame == null) return;
frame.CopyConvertedFrameDataToBuffer(_bitmap.PixelBuffer, ColorImageFormat.Bgra);
_bitmap.Invalidate();
}
}
Reste ajouter le contrle Image dans le XAML si ce nest dj fait:

_bitmap = null;
}
Que ce soit avec une Kinect
branche ou avec Kinect Studio
en mode mulation, cet
exemple permet dafficher un
rendu trs fluide de la camra
couleur Fig.4.

Infrarouge et profondeur

Les flux infrarouges et de profondeur sont la base des capacits de reconnaissance de la


Kinect et du SDK. Cette dernire va permettre de mesurer les
distances se trouvant entre le
capteur et les objets qui lui font
face. La mesure de ces disFig.4
tances sur une scne permet
aux APIs aprs divers calculs
dexposer dautres sources de donnes de plus haut niveau. La camra
infrarouge quant elle permet principalement la mise en place de scnario
o lanalyse des textures est importante comme la reconnaissance faciale.
Lutilisation de ces deux flux se fait de la mme faon que la camra couleur. Ainsi, si le but est dafficher le rendu de la camra infrarouge, on peut
se contenter dadapter lexemple prcdent. Nanmoins, les donnes
recueillies, bien qutant aussi des tableaux de pixels pour chaque trame,
ne peuvent pas tre utilises telles quelles dans un bitmap. En effet, une
intensit du signal infrarouge na rien voir avec une couleur BGRA par
exemple. Il faut donc interprter la donne pour en faire une couleur,
comme un niveau de gris.
var source = _sensor.InfraredFrameSource;
var description = source.FrameDescription;
var width = description.Width;
var height = description.Height;
_bitmap = new WriteableBitmap(width, height);:
_infraredBuffer = new ushort[description.LengthInPixels];
On stockera le pixel sous forme de byte au format BGRA(o la constante
BGRA_BYTES_PER_PIXEL vaut 4) :
_bitmapIntermediateBuffer = new byte[width * height * BGRA_BYTES_PER_PIXEL];

<Image x:Name="myImage" />


Et ventuellement une mthode permettant de stopper le flux courant et
librer les ressources alloues:
private void StopCurrentDemo()
{
if (_colorReader != null)
{
_colorReader.FrameArrived -= Reader_FrameArrived;
_colorReader.Dispose();
_colorReader = null;
}
myImage.Source = null;

80

Programmez! a Dcembre 2015

Reste ensuite dfinir le bitmap en tant que source de limage et sabonner lvnement FrameArrived comme prcdemment :
myImage.Source = _bitmap;
_infraredReader = source.OpenReader();
_infraredReader.FrameArrived += Reader_FrameArrived;
Comme prcdemment nous rcuprons les informations depuis les arguments de la fonction. Ce qui change cette fois-ci est la recopie des donnes; cette fois, il ny a pas de transformation que lAPI peut effectuer pour
crer un tableau de pixels compatible avec le bitmap. Il faut donc obtenir
ce tableau sous un format brut avant deffectuer une transformation
manuellement:

078_081_191 18/11/15 22:17 Page81

private void Reader_FrameArrived(InfraredFrameReader sender, InfraredFrameArrivedEvent


Args args)
{
using (var frame = args.FrameReference.AcquireFrame())
{
if (frame == null) return;
frame.CopyFrameDataToArray(_infraredBuffer);
//suite ici...
_bitmap.Invalidate();
}
}
Chaque valeur du tableau _infraredBuffer correspondant une intensit du
signal infrarouge, que nous convertissons dans une valeur situe entre 0 et
255 (minimum et maximum dun byte) permet de remplir le tableau _bitmapIntermediateBuffer:
for (var i = 0; i < _infraredBuffer.Length; ++i)
{
var intensity = _infraredBuffer[i];
const float CONTRAST = 1.2F;
var color = (byte)((intensity + CONTRAST * intensity) * byte.MaxValue / short.MaxValue);
var j = i * BGRA_BYTES_PER_PIXEL;
_bitmapIntermediateBuffer[j + 0] = color; //blue
_bitmapIntermediateBuffer[j + 1] = color; //green
_bitmapIntermediateBuffer[j + 2] = color; //red
_bitmapIntermediateBuffer[j + 3] = byte.MaxValue; //alpha
}
Dans cet exemple, la constante CONTRAST permet dinfluer sur le niveau
de gris obtenu: plus la valeur est leve, plus limage obtenue est contraste et claire. En effet, si lon garde cette valeur 0, on se rend compte que
limage produite est trs sombre. La constante BGRA_BYTES_PER_PIXEL
reprsente le nombre doctets ncessaires lexpression dune couleur
sous le format BGRA. Elle permet de se placer correctement dans le
tableau _bitmapIntermediateBuffer qui sera compatible avec notre WritableBitmap.
Nous allons donc copier ce bitmapIntermediateBuffer dans lobjet _bitmap
qui sera la source de notre contrle image.

_bitmapIntermediateBuffer.CopyTo(_bitmap.PixelBuffer);
Dans un scnario complet, on noubliera pas de complter la mthode
StopCurrentDemo afin de permettre le relchement des ressources impliques. Voici un aperu du rendu produit par ce code: Fig.5.
Dans le cas du flux de la camra de profondeur, lutilisation de lAPI correspondante est dautant plus similaire que les donnes de la trame de profondeur sont une valeur correspondant la distance se trouvant entre
lobjet et le capteur, exprime en millimtres.
Finalement, pour en produire une reprsentation visuelle, lexemple prcdent peut entirement tre repris ceci prs quil faut y remplacer le terme
infrared par depth. On aura donc linitialisation :
var source = _sensor.DepthFrameSource;
var description = source.FrameDescription;
var width = description.Width;
var height = description.Height;
_bitmap = new WriteableBitmap(width, height);
_bitmapIntermediateBuffer = new byte[width * height * BGRA_BYTES_PER_PIXEL];
_depthBuffer = new ushort[description.LengthInPixels];
myImage.Source = _bitmap;
_depthReader = source.OpenReader();
_depthReader.FrameArrived += Reader_FrameArrived;
Puis le handler effectuant la copie:
private void Reader_FrameArrived(DepthFrameReader sender, DepthFrameArrivedEvent
Args args)
{
using (var frame = args.FrameReference.AcquireFrame())
{
if (frame == null) return;
frame.CopyFrameDataToArray(_depthBuffer);
for (var i = 0; i < _depthBuffer.Length; ++i)
{
var depth = _depthBuffer[i];
var color = (byte)(depth * byte.MaxValue / 8000);
var j = i * BGRA_BYTES_PER_PIXEL;
_bitmapIntermediateBuffer[j + 0] = color; // blue
_bitmapIntermediateBuffer[j + 1] = color; // green
_bitmapIntermediateBuffer[j + 2] = color; // red
_bitmapIntermediateBuffer[j + 3] = byte.MaxValue; //alpha
}
_bitmapIntermediateBuffer.CopyTo(_bitmap.PixelBuffer);
_bitmap.Invalidate();
}
}
La seule diffrence se trouve au niveau de linstanciation de la variable
color. Dans ce cas prcis, il nest pas utile dinfluer sur le contraste, mais
de modifier la valeur maximum soit 8000 (correspondant 8 mtres). Ainsi
limage est bien plus contraste: Fig.6.
u
Suite et fin dans le prochain numro.

Fig.5

Fig.6
Programmez! a Dcembre 2015

81

082_191 18/11/15 22:18 Page82

Comment gagner du temps de dv trs facilement ?

Abonnement : Service Abonnements PROGRAMMEZ, 4 Rue de Mouchy, 60438


Noailles Cedex. - Tl. : 01 55 56 70 55 - abonnements.programmez @groupe-gli.com - Fax :
01 55 56 70 91 - du lundi au jeudi de 9h30
12h30 et de 13h30 17h00, le vendredi de
9h00 12h00 et de 14h00 16h30. Tarifs
abonnement (magazine seul) : 1 an - 11 numros France mtropolitaine : 49 - Etudiant :
39 CEE et Suisse : 55,82 - Algrie,
Maroc, Tunisie : 59,89 Canada :
68,36 - Tom : 83,65 - Dom : 66,82
Autres pays : nous consulter.
PDF : 30 (Monde Entier) souscription
sur www.programmez.com

Une publication Nefer-IT


7 avenue Roger Chambonnet
91220 Brtigny sur Orge
redaction@programmez.com
Tl. : 01 60 85 39 96

Photos/illustrations : maxsattana
Maquette : Pierre Sandr

Directeur de la publication
& rdacteur en chef : Franois Tonic

Publicit : PC Presse,
Tl.: 01 74 70 16 30, Fax : 01 41 38 29 75
pub@programmez.com

Secrtaire de rdaction : Olivier Pavie

Imprimeur : S.A. Corelio Nevada Printing, 30 alle de la


recherche, 1070 Bruxelles, Belgique.

Ont collabor ce numro : S. Saurel


Experts : V. Quadrelli, C. Villeneuve, M. Garcia, A. Pacaud,
T. Ouvr, H. Carnicelli, R. Foucaud, T. Templier, M. Fery,
S. Cordonnier, A. Talavera, T. Lebru, C. Pichaud, K. Sibu, F. Fadel,
P. Batty, L. Claustres, C. Peugnet, J. Doucet, R. Niveau,
Bouhanef Hamdi, Dridi Manel, A. Benabdi, F. Nol, W. Chegham.

Marketing et promotion des ventes :


Agence BOCONSEIL - Analyse Media Etude
Directeur : Otto BORSCHA oborscha@boconseilame.fr
Responsable titre : Terry MATTARD
Tlphone : 09 67 32 09 34

Contacts
Rdacteur en chef :
ftonic@programmez.com
Rdaction : redaction@programmez.com
Webmaster : webmaster@programmez.com
Publicit : pub@programmez.com
Evenements / agenda :
redaction@programmez.com
Dpt lgal : parution - Commission paritaire :
1215 K 78366 - ISSN : 1627-0908
NEFER-IT / Programmez, novembre 2015
Toute reproduction intgrale ou partielle est
interdite sans accord des auteurs
et du directeur de la publication.

Pub cahier couv 191_191 18/11/15 11:52 Page83

Sur abonnement ou en kiosque

Le mag
m
magazine
gazine
g
d pros
des
p s de lIT
T
Mais aussi sur le web

Ou encore sur votre tablette

PUB INF PROGRAMMEZ-decembre


e indd 1

18/11//2015
/2
10:59

Pub cahier couv 191_191 18/11/15 11:53 Page84