Vous êtes sur la page 1sur 42

Anne 2014-2015

Rapport de projet - EI5 AGI parcours IAIE

Projet Application Web De Domotique Arduino

Projet ralis par :


Nicolas ROULLEAU
Adrien LIOTARD

Projet encadr par :


Serge TAHE

ISTIA - Universit dAngers

Angers,

Rf. Direction des enseignements


Et de la vie tudiante(DEVE)

ENGAGEMENT DE NON PLAGIAT

Objet : Engagement de non Plagiat

Je soussign(e) . , tre pleinement conscient(e) que le


plagiat de documents ou dune partie dun document publis sur toutes formes de support, y compris
linternet, constitue une violation des droits dauteur ainsi quune fraude caractrise. En consquence,
je mengage citer toutes les sources que jai utilises pour crire ce rapport ou mmoire.

Lu et approuv
Signature

ISTIA l Institut des sciences et techniques de l'ingnieur d'Angers


www.istia.univ-angers.fr l istia@univ-angers.fr
62 avenue Notre-Dame du Lac l 49000 ANGERS l Tl. 02 44 68 75 00 l Fax 02 44 68 75 01

Table des mati`


eres
1 Introduction
1.1 Contexte . . . . . . . . . . . . . . . . . . . . . . . .
1.1.1 Syst`eme domotique . . . . . . . . . . . . . .
1.1.2 Communication clients-serveur . . . . . . . .
1.2 Cahier des charges . . . . . . . . . . . . . . . . . .
1.2.1 Les differentes actions possibles des clients .
1.2.2 Commande de plusieurs cartes en simultane

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

8
8
8
9
10
10
11

2 Structure dune application MVC


12
2.1 Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.1.1 Le role de chaque partie . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.1.2 Les flux de donnees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3 Client AngularJS
3.1 Implementation du MVC avec AngularJS
3.2 Les vues de lapplication . . . . . . . . .
3.3 Design : Bootstrap . . . . . . . . . . . .
3.4 Version mobile avec PhoneGap . . . . .
3.5 Difficultes rencontrees . . . . . . . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

4 Client ASP.NET
4.1 Implementation du MVC avec ASP.NET . . . .
4.1.1 La partie presentation . . . . . . . . . .
4.1.2 Le back-office . . . . . . . . . . . . . . .
4.2 Les vues de lapplication . . . . . . . . . . . . .
4.2.1 La page daccueil . . . . . . . . . . . . .
4.2.2 Lecture de letat dune pin . . . . . . . .

4.2.3 Ecriture
sur une pin . . . . . . . . . . .
4.2.4 Clignotement dune LED . . . . . . . . .
4.2.5 Envoi dune commande au format JSON
4.3 Design : Bootstrap + th`eme Material Design . .
4.4 Difficultes rencontrees . . . . . . . . . . . . . .

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.

14
14
16
20
21
22

.
.
.
.
.
.
.
.
.
.
.

24
24
24
25
25
25
29
30
31
32
32
33

5 Gestion de projet
34
5.1 Gantt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.2 Diagrammes de repartition du temps par taches . . . . . . . . . . . . . . . . . . 35
5.3 Methodes de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

6 Conclusion
36
6.1 Apports professionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
6.2 Apports personnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
6.3 Pistes damelioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7 Annexes
37
7.1 Guide utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.2 Integration du th`eme Bootstrap Material Design . . . . . . . . . . . . . . . . . . 39
8 Bibliographie

41

Table des figures


1.1
1.2

Le montage electronique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Larchitecture du syst`eme domotique . . . . . . . . . . . . . . . . . . . . . . . .

9
10

2.1

Larchitecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10

La structure de lapplication AngularJS


la vue Welcome . . . . . . . . . . . . .
la vue Blink . . . . . . . . . . . . . . .
la vue Readpin . . . . . . . . . . . . .
la vue Temp . . . . . . . . . . . . . . .
la vue Writepin . . . . . . . . . . . . .
la vue Command . . . . . . . . . . . .
la vue MyArduinos . . . . . . . . . . .
message dinformation . . . . . . . . .
barre de navigation . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

14
16
16
17
18
19
20
20
21
21

4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11

La structure de lapplication ASP.NET MVC . . . . . . .


La page daccueil . . . . . . . . . . . . . . . . . . . . . .
Aucune donnee entree . . . . . . . . . . . . . . . . . . .
Chaine rentree non conforme au format dune adresse IP
La reponse du serveur est apparue . . . . . . . . . . . . .
Lecture de letat dune pin . . . . . . . . . . . . . . . . .

Ecriture
sur une pin . . . . . . . . . . . . . . . . . . . .
Erreur de saisie indiquee par le serveur . . . . . . . . . .
Clignotement dune LED . . . . . . . . . . . . . . . . . .
Envoi dune commande au format JSON . . . . . . . . .
Lapparence de depart . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

24
25
27
27
29
29
30
31
31
32
32

7.1

Le contenu des dossiers Content et Scripts . . . . . . . . . . . . . . . . . . . . .

39

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.

Chapitre 1
Introduction
1.1

Contexte

Depuis quelques annees, les solutions de domotique se democratisent de plus en plus. En


effet, a` une epoque o`
u il devient important de maitriser sa consommation energetique et o`
u
presque tout le monde dispose dun smartphone, il est tentant de pouvoir commander ses
equipements domestiques (eclairage, chauffage, stores, etc) et de consulter letat de lhabitation
(temperature, humidite, etc) via un ordinateur ou un appareil mobile. Meme sil existe bien s
ur
dej`a des solutions commerciales cles en main, lobjectif de ce projet est de creer un syst`eme
de ce type a` partir de zero.

1.1.1

Syst`
eme domotique

En principe, un syst`eme domotique est compose dactionneurs et de capteurs relies a` un reseau, afin de permettre leur gestion via une ou plusieurs interfaces homme/machine. En ce qui
concerne la partie materielle, nous avons utilise des cartes Arduino, tr`es connues chez les bricoleurs ferus delectronique pour leur grande polyvalence et leur faible co
ut. Lutilisation de ces
cartes rend le syst`eme extremement modulable. Ainsi meme si dans notre cas les equipements
connectes se limitent a` des LED et des capteurs de temperature, il serait aise de rajouter par
la suite de nouveaux elements : autres capteurs, servomoteurs, relais ... Pour tester le syst`eme,
nous etions equipes de deux cartes Arduino Uno, chacune pourvue dun shield Ethernet sur
lequel est fixe une LED ainsi quun capteur de temperature (voir figure ci-dessous).

Figure 1.1 Le montage electronique

1.1.2

Communication clients-serveur

Afin de pouvoir gerer a` distance les differents cartes Arduino composant la partie operative
du syst`eme, ces derni`eres sont toutes reliees en Ethernet au meme poste informatique, qui fait
donc office de serveur. Cest `a ce serveur que viendront se connecter les utilisateurs, grace `a
des applications specialement ecrites pour cette occasion et compatibles aussi bien avec un
ordinateur classique quavec un smartphone ou une tablette.

Figure 1.2 Larchitecture du syst`eme domotique

1.2

Cahier des charges

Ce projet est consacre au developpement de deux clients. Le premier base exclusivement sur
les langages web (HTML, CSS, JavaScript), et le second utilisant la technologie ASP.NET de
Microsoft. La structure de ces deux clients doit etre de type Mod`ele-Vue-Controleur (MVC).

1.2.1

Les diff
erentes actions possibles des clients

Chaque client se comporte comme un site web comportant un menu permettant dacceder
a` differents formulaires. Chacun de ces formulaires est dedie a` une commande particuli`ere, qui
` partir des donnees contenues dans
sera ensuite envoyee au serveur avec une requete HTTP. A
la requete, le serveur enverra la commande correspondante vers les cartes Arduino connectees,
qui a` leur tour executeront la commande. Au minimum, linterface dun client doit comporter
les formulaires suivants :
Connexion au serveur gerant les cartes Arduino
Lecture de la valeur dune pin (analogique et binaire)
10

Ecriture
de la valeur dune pin (analogique et binaire)
Clignotement dune LED (specification du nombre de clignotements et de leur intervalle)
Envoi dune commande au format JSON (JavaScript Object Notation) : en effet le serveur permet denvoyer nimporte laquelle des 3 requetes precedentes au format JSON, en
respectant cette forme :
{"id":"identifiant","ac":"une action","pa":{"param1":"valeur1","param2":
"valeur2",...}}.
Avec :
id : un identifiant de la commande. Peut etre quelconque ;
ac : une action. Il y en a trois :
pw (pin write) pour ecrire une valeur sur une pin,
pr (pin read) pour lire la valeur dune pin,
cl (clignoter) pour faire clignoter une led ;
pa : les param`etres de laction. Ils dependent de laction.

1.2.2

Commande de plusieurs cartes en simultan


e

Chaque formulaire doit afficher une liste affichant toutes les cartes Arduino disponibles, afin
que lutilisateur puisse choisir la ou les cartes sur lesquelles il souhaite envoyer la commande.
Lorsque plusieurs cartes sont selectionnees, elles executent laction demandee en simultane.
Le serveur retournant une chaine JSON apr`es chaque requete, il faut egalement afficher cette
reponse dans le formulaire, sans avoir `a recharger la page.

11

Chapitre 2
Structure dune application MVC
2.1

Principe

MVC est un patron de conception qui vise a` simplifier le developpement et la maintenance


dune application avec interface graphique. En effet, ce cadre normalise permet de bien separer
la gestion des donnees, la presentation de linterface et les traitements `a effectuer. Ainsi par
exemple, un developpeur specialise dans le Web Design pourra soccuper de la mise en page
de lapplication sans toucher aux fichiers correspondant aux traitements, realises par un autre
developpeur.

2.1.1

Le r
ole de chaque partie

` cet effet, il
Le Mod`
ele Le Mod`ele est charge du traitement des donnees de lapplication. A
contient plusieurs methodes permettant de recuperer et de modifier la valeur de chaque variable
associee `a une donnee. Si lapplication utilise une base de donnees (ce qui nest pas le cas ici),
cest egalement le role du Mod`ele de gerer les acc`es vers la base (insertion, suppression, mise a`
jour de champs).
La Vue La Vue correspond specifiquement a` ce qui est affiche par le navigateur web de
lutilisateur. Cette page est dynamique, cest-`a-dire que la valeur de certaines des informations
affichees est obtenue a` partir des donnees du mod`ele. Dans la plupart des cas, une vue contient
egalement un formulaire permettant a` lutilisateur de rentrer des informations grace `a divers
controles graphiques : champs de textes, cases a` cocher, sliders, etc.
Le Contr
oleur Le Controleur reagit aux ev`enements declenches par la vue (typiquement le
clic sur un lien ou la validation dun formulaire par exemple). Il peut ensuite mettre `a jour les
donnees du Mod`ele avec les informations entrees dans la Vue, et ensuite actualiser cette vue ou
en afficher une autre.

2.1.2

Les flux de donn


ees

Les interactions entre le mod`ele, la vue et le controleur est synthetise dans le diagramme
ci-dessous :

12

Figure 2.1 Larchitecture MVC

13

Chapitre 3
Client AngularJS
3.1

Impl
ementation du MVC avec AngularJS

AngularJS est un framework JavaScript libre et open-source developpe par Google. Celui-ci
est fonde sur lextension du langage HTML par de nouveaux tags et attributs qui represente
alors la partie vue du mod`ele MVC. Les mod`eles sont appeles scopes et les controleurs
permettent de definir des fonctions en JavaScript.
Precedemment, nous avons introduit le concept de mod`ele MVC. Le schema ci-dessous
illustre les interactions entres les differents composants de lapplication finale AngularJS :

Figure 3.1 La structure de lapplication AngularJS


Dans ce schema, on distinguera :
Le module [angularduino.js] (en rouge)
Celui-ci definit les modules Angular utilises par lapplication et soccupe de la configuration des routes : grace au module [ngRoute] utilise pour le routage des URL, le module

14

[angularduino.js] designe pour chaque URL demande, la page HTML et le controleur


associes.
Les controleurs (en orange)
Un controleur principal, [mainController.js], constitue des scopes enfants, des variables
globales ainsi que des fonctions gerant lappel des differentes pages. On remarquera que
les mod`eles des vues sont declares dans ce controleur.
Un controleur pour chacune des vues :
pageblinkledController.js
pagecommandController.js
pagemesarduinosController.js
pagereadpinController.js
pagetempController.js
pagewelcomeController.js
pagewritepinController.js
Les vues (en jaune)
La page principale [home.html] reference les fichiers du projet et appelle le menu ainsi
que la vue daccueil.
[menu.html] contient le code HTML du menu qui permet de naviguer entre les differentes
fonctions de lapplication.
Enfin, les pages [pageblinkled.html], [pagecommand.html], [pagemesarduinos.html], [pagereadpin.html], [pagetemp.html], [pagewelcome.html] et [pagewritepin.html] contiennent
le code HTML des formulaires et des appels JavaScript de leur fonction respective.
Chacune contient la declaration des variables du mod`ele de la vue, linitialisation des
composants utilises (UI Grid, selectpicker, n3linechart), la fonction envoyant la requete
HTTP `a lArduino et recuperant la reponse du serveur, ainsi que certaines specifications
liees a` la page (gestion des Arduino disponibles, gestion des menus, astuce).
De lutilisateur au serveur, explication dune requ
ete : Disons que lutilisateur souhaite
faire clignoter une LED. Apr`es avoir affiche la vue en question, il selectionne un ou plusieurs
Arduino, remplit le formulaire et clique sur le bouton dexecution. Voici le code HTML du bouton dexecution contenu dans [pageblinkled.html] : <a href= ng-click=scopeblinkled.Blink()
type=button class=btn btn-primary>pageblinkled.actionlabel</a> Regardons de plus pr`es
largument ng-click . Au clic, la page [pageblinkled.html] appelle la fonction Javascript
Blink() contenu dans le controleur [pageblinkledController.js] en passant par le mod`ele de
la vue scopeblinkled . Le controleur execute alors la fonction Javascript Blink() qui fera
une requete http en GET au serveur web.

15

3.2

Les vues de lapplication

[pagewelcome.html] la vue Welcome : cette vue est la page daccueil de lapplication. Elle
permet de configurer ladresse IP du serveur domotique.

Figure 3.2 la vue Welcome


[pageblinkled.html] la vue Blink : cette vue permet a` lutilisateur de faire clignoter une
LED en selectionnant un ou plusieurs Arduino, un numero de pin, une duree et un nombre de
clignotement.

Figure 3.3 la vue Blink


16

[pagereadpin.html] la vue Readpin : cette vue permet `a lutilisateur de lire la valeur dune
pin, en selectionnant un ou plusieurs Arduino, un mode et une pin.

Figure 3.4 la vue Readpin


[pagetemp.html] la vue Temp : cette vue permet a` lutilisateur de visualiser la valeur analogique dun capteur de temperature sur un graphe, en selectionnant jusqu`a deux Arduino et
la valeur dune pin analogique.

17

Figure 3.5 la vue Temp


[pagewritepin.html] la vue Writepin : cette vue permet `a lutilisateur decrire la valeur
dune pin, en selectionnant un ou plusieurs Arduino, un mode, une pin et la valeur a` ecrire.

18

Figure 3.6 la vue Writepin


[pagecommand.html] la vue Command : cette vue permet a` lutilisateur denvoyer une
commande JSON, en selectionnant un ou plusieurs Arduino et en saisissant une commande
sous forme de chaine JSON.

19

Figure 3.7 la vue Command


[pagemesarduinos.html] la vue MyArduinos : cette vue permet a` lutilisateur davoir une
simple liste des Arduino connectes.

Figure 3.8 la vue MyArduinos

3.3

Design : Bootstrap

Twitter Bootstrap est une collection doutils utile a` la creation de sites et dapplications
web. Cest un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils
de navigation et autres elements interactifs, ainsi que des extensions JavaScript en option.

20

Cest un projet tr`es populaire sur la plate-forme de gestion de developpement GitHub, ce qui
nous a permis de profiter dune part de laide de la communaute, et dautre part des nombreuses
fonctionnalites developpees par ses membres.
Les elements HTML sont stylises grace a` un syst`eme de classes extensibles.
Exemple :
1 < div class = " alert alert - success " role = " alert " > ... </ div >

Figure 3.9 message dinformation


1
2
3
4
5
6

< form class = " navbar - form navbar - left " role = " search " >
< div class = " form - group " >
< input type = " text " class = " form - control " placeholder = " Search " >
</ div >
< button type = " submit " class = " btn btn - default " > Submit </ button >
</ form >

Figure 3.10 barre de navigation

3.4

Version mobile avec PhoneGap

PhoneGap est un framework open source pour creer des applications mobiles multi-plateforme
avec les technologies traditionnelles du web : HTML, CSS, JavaScript. Les applications mobiles
creees a` laide des technologies web sont appelees applications hybrides cest `a dire melangeant
web et technologies natives. Le code HTML, CSS et JavaScript reste tel quel et lapplication
PhoneGap utilise le navigateur web de lappareil (webview) pour linterpreter.
Apr`es quelques modifications du code source et quelques minutes dattente, PhoneGap nous
gen`ere un fichier applicatif Android (.apk).
Voici un apercu de la version mobile :

21

Lutilisation de PhoneGap nest pas une solution adaptee `a tous les types dapplications
mobiles mais convient parfaitement aux applications simples dont le co
ut dun developpement
natif est prohibitif.

3.5

Difficult
es rencontr
ees

Lors de developpement du client AngularJS, nous avons rencontres quelques difficultes et


notamment :
La gestion des vues et de leur mod`
ele : Outre lorganisation de lapplication selon les
standards de programmation AngularJS, il nous a fallu analyser lenchainement des ev`enements.
En effet, certains composants comme lUI Grid ne mettent a` jour leurs donnees quune seule
fois au chargement du mod`ele de la vue. Il est donc necessaire de leur attribuer leurs donnees
a` ce moment-l`a.
Lutilisation dune librairie en version b
eta : UI Grid est un tableau AngularJs permettant de manipuler, de trier et de filtrer des donnees. Nous lavons utilise pour lister les Arduino
disponibles. Au cours du developpement, ce composant a ete mise `a jour dans une nouvelle
version beta. Limplementation de ce composant sest avere etre delicate etant donne la taille
restreinte de la communaute de beta-testeurs.
Lutilisation de variables externes dans la m
ethode http : Afin dafficher le nom de
lArduino concerne par la reponse du serveur apr`es une requete http, nous avons exploite les
param`etres de la methode http. Pour utiliser des donnees du mod`ele dans la fonction executee
lors de lev`enement .success de la methode http, nous avons d
u passer en param`etre les donnees
voulues, sans passer par le param`etre URL :
22

1 $http ({ method : GET , maDonn


e e : $scope . maDonn
e e , url : h t t p :// mon . url })
2
. success ( function ( thisdata , status , headers , config ) {}

23

Chapitre 4
Client ASP.NET
4.1

Impl
ementation du MVC avec ASP.NET

ASP.NET est une technologie de developpement web creee par Microsoft, et qui permet
de concevoir des applications web. Puisque nous avons decide de developper nos clients avec
une structure MVC, nous allons donc employer la version ASP.NET MVC. Le langage choisi
pour developper la logique de lapplication est le C#. Les vues sont quant a` elles au format
CSHTML, qui est un des moteurs de rendu HTML utilise par ASP.NET. Plusieurs scripts
en JavaScript sont egalement presents afin de rendre lapplication dynamique, et notamment
pour gerer laspect asynchrone des interactions avec le serveur (requetes et reponses AJAX).
La structure generale de lapplication est schematisee dans le diagramme ci-dessous. Elle est
detaillee par la suite.

Figure 4.1 La structure de lapplication ASP.NET MVC

4.1.1

La partie pr
esentation

Tous les fichiers correspondant a` linterface graphique de lapplication, autrement dit les
vues, sont regroupes dans le dossier Views. Ce dernier est constitue de 6 sous-dossiers : 5
24

pour les 5 pages de lapplication, et portant le nom de laction associee, ainsi quun autre
appele Shared. Dans ce dossier on trouve un fichier commun `a toutes les vues. Layout, est
comme son nom lindique, charge de lagencement general de la page affichee par le navigateur.
Cest en effet dans ce fichier que sont geres les imports des differents scripts necessaires au bon
fonctionnement de lapplication, ainsi que des feuilles de styles servant `a parametrer lapparence
visuelle du programme. Le contenu des vues est encapsule dans le layout grace a` la balise
@RenderBody(). Le layout contient egalement le menu de linterface, qui consiste en une barre
de quatre boutons renvoyant vers chacune des actions possibles.
Pour chacune des autres vues, 3 fichiers sont presents : Index.cshtml qui est charge par le
controleur et qui encapsule le reste de la vue. [nom de laction].cshtml correspond au code
du formulaire de laction et enfin Reponse.cshtml contient le code de la <div> permettant
dafficher la reponse du serveur.

4.1.2

Le back-office

En plus des controleurs et des mod`eles, facilement identifiables car ils portent le nom de
laction associee, il faut noter limportance de deux fichiers. Le script ASPDuino.js contient
toutes les fonctions permettant les appels asynchrones vers les controleurs. Le fichier Dao.cs
contient quant a` lui toutes les fonction effectuant les requetes HTTP vers le serveur. Ce sont
ces fonctions qui sont appelees par les differents controleurs.

4.2

Les vues de lapplication

Techniquement, ce client domotique est compose de 5 vues : une pour chaque formulaire
indique dans le cahier des charges. La gestion des vues etant similaire dune action `a lautre,
seule la premi`ere sera compl`etement detaillee, les autres etant decrites bri`evement par la suite.

4.2.1

La page daccueil

Au lancement de lapplication, lutilisateur se retrouve devant la page suivante :

Figure 4.2 La page daccueil


Cette page comporte un formulaire qui se resume a` un unique champ de texte permettant
a` lutilisateur de rentrer ladresse IP du serveur sur lequel sont connectees les cartes Arduino.
Ce formulaire correspond a` la vue ArduinosList.cshtml dont le code est visible ci-dessous :
1 @model client_v0 . Models . ConfigModel
2

25

3 @{
4
Layout = null ;
5
AjaxOptions ajaxOpts = new AjaxOptions
6
{
7
UpdateTargetId = " reponse " ,
8
HttpMethod = " post " ,
9
Url = Url . Action ( " GetArduinos " ) ,
10
};
11 }
12
13 @using ( Ajax . BeginForm ( " GetArduinos " , null , ajaxOpts , new { id = " formulaire
" }) )
14 {
15
< br / >
16
<! -- le champ de saisie de l ip du serveur -- >
17
< table >
18
< tr >
19
< td > @Html . LabelFor ( m = > m . ipServer , new { @class = " col - lg -12
control - label " }) </ td >
20
< td >
21
< div class = " form - group " >
22
@Html . TextBoxFor ( m = > m . ipServer , new { @class = " form control floating - label " , id = " focusedInput " , type = " text " , placeholder
= " Please enter the server IP " })
23
</ div >
24
</ td >
25
< td > < span class = " text - danger " > @Html . Va lid at ion Me ssa geF or ( m = > m .
ipServer ) </ span > </ td >
26
</ tr >
27
</ table >
28
<p >
29
< input class = " btn btn - primary btn - raised " type = " submit " value = "
Valider " id = " btn_valider " / >
30
</ p >
31
32
<! -- la r
e ponse du serveur -- >
33
< div id = " reponse " / >
34 }

Ce quil faut retenir de ce code, cest que le formulaire est en fait compose dun tableau (l17
a` l27) dune ligne de trois cases. La premi`ere case contient le label du champ (l19), la deuxi`eme
le textbox(l22) et la derni`ere un message derreur qui saffiche si la validation du texte tape
echoue (l25). On remarque que ces trois champs font appel au param`etre m.ipServer, qui fait
reference a` la propriete ipServer du mod`ele associe. Ce mod`ele est declare l1, il sagit de
ConfigModel (chaque vue dispose de son propre mod`ele). Regardons maintenant le code de
ce mod`ele :
1 namespace client_v0 . Models
2 {
3
public class ConfigModel : IValidatableObject
4
{
5
// valeurs post
e es
6
[ Display ( Name = " IP du Serveur : " ) ]
7
[ Required ( ErrorMessage = " Information requise " ) ]
8
[ RegularExpression ( @ " ^(25[0 -5]|2[0 -4][0 -9]|[01]?[0 -9][0 -9]?)
\.(25[0 -5]|2[0 -4][0 -9]|[01]?[0 -9][0 -9]?)
\.(25[0 -5]|2[0 -4][0 -9]|[01]?[0 -9][0 -9]?)
\.(25[0 -5]|2[0 -4][0 -9]|[01]?[0 -9][0 -9]?) $ " , ErrorMessage = " Information

26

incorrecte " ) ]
public String ipServer { get ; set ; }

9
10
11
12
13

public String json { get ; set ; }

14
15
16
17
18
19
}
20 }

public IEnumerable < ValidationResult > Validate ( ValidationContext


validationContext )
{
List < ValidationResult > r
e sultats = new List < ValidationResult >() ;
// on rend la liste des erreurs
return r
e sultats ;
}

On retrouve l9 la declaration de la propriete ipServer. Cette declaration est precedee de trois


attributs :
Display (l6) indique le texte du label affiche a` cote du textbox.
Required (l7) donne un message derreur `a afficher si on valide le formulaire sans rien
avoir entre.
RegularExpression (l8) donne un autre message derreur si le texte tape nest pas conforme
a` lexpression reguli`ere indiquee (dans ce cas il sagit du regex dune adresse IP).
On obtient donc dej`a les deux comportements suivant de la page en cas de saisie incorrecte :

Figure 4.3 Aucune donnee entree

Figure 4.4 Chaine rentree non conforme au format dune adresse IP


Maintenant regardons ce qui se passe dans le cas normal, o`
u ladresse IP donnee est correcte.
La validation du formulaire va declencher laction GetArduinos du controleur, reproduite cidessous :
1 [ HttpPost ]
2
public PartialViewResult GetArduinos ( ConfigModel model , FormCollection
postedData , ApplicationModel applicationData )
3
{

27

4
5
6
7
8
9
10
11

// mise `
a jour du mod`
e le
TryUpdateModel ( model , postedData ) ;
Dao . Dao dao = new Dao . Dao () ;
dao . getArduinos ( model , applicationData ) ;
return PartialView ( " Reponse " , model ) ;
}

Apr`es avoir mis `a jour la valeur de ipServer dans le mod`ele a` partir de la chaine entree dans
la vue (l5), on fait un appel `a la couche DAO en lui passant les donnees du mod`ele ainsi que
les donnees de portee Application (l8). On retourne ensuite le fragment de vue Reponse ainsi
que le mod`ele associe (l10). Ce fragment est visible ci-dessous :
1 @model client_v0 . Models . ConfigModel
2
3 < div class = " panel panel - primary " >
4
< div class = " panel - heading " > R
e ponse du serveur </ div >
5
< div class = " panel - body " >
6
@Model . json
7
</ div >
8 </ div >

On voit l6 la presence de @Model.json, qui contient maintenant la reponse du serveur. Cest


la classe DAO qui sest chargee de cet enregistrement, comme on peut le voir en observant son
code :
1 public void getArduinos ( ConfigModel model , ApplicationModel applicationData )
2
{
3
// on r
e cup`
e re les infos du mod`
e le
4
string ipServer = model . ipServer ;
5
6
// on enregistre l ip dans l application
7
applicationData . ipServer = ipServer ;
8
9
// cr
e ation d un WebClient
10
WebClient webClient = new WebClient () ;
11
// on pr
e cise qu on va envoyer du Json
12
webClient . Headers . Add ( " Content - Type " , " application / json " ) ;
13
// l URL
14
string uriString = " http :// " + ipServer + " :8080/ arduinos / " ;
15
string r
e ponse = string . Empty ;
16
try
17
{
18
// on envoie la requ^
e te et on lit la r
e ponse
19
r
e ponse = webClient . DownloadString ( uriString ) ;
20
model . json = r
e ponse ;
21
applicationData . json = r
e ponse ;
22
}
23
catch ( WebException ex )
24
{
25
model . json = " Error : " + ex . Message ;
26
}
27
}

28

En effet, apr`es avoir recupere ladresse IP donnee par lutilisateur (l4), on lenregistre dans
lapplication (l7) afin de pouvoir y acceder depuis les autres vues. Ensuite on construit la
requete HTTP (l14), puis on lenvoie au serveur (l19). On peut maintenant enregistrer la reponse
obtenue dans le mod`ele (l20). Dans ce cas particulier on copie egalement cette reponse dans
lapplication (l21) car elle contient la liste des cartes Arduino qui sera proposee dans les autres
vues. Ce ne sera pas le cas pour les reponses recues dans les autres vues.
` la suite de ces differentes etapes, la page affiche maintenant la reponse du serveur :
A

Figure 4.5 La reponse du serveur est apparue

4.2.2

Lecture de l
etat dune pin

Figure 4.6 Lecture de letat dune pin

29

Cette page permet `a lutilisateur de connaitre la valeur actuelle de nimporte quelle pin de
chaque carte connectee. Il selectionne pour cela la ou les cartes desirees dans la liste, ensuite
il choisi le numero de pin qui linteresse dans la liste deroulante, et enfin il precise le mode de
lecture. En pratique, le mode analogique sera utile si le composant branche sur la pin renvoie une
valeur proportionnelle a` son etat, par exemple une sonde de temperature ou un potentiom`etre.
Le mode binaire est quand a` lui dedie au composants bistables, comme un interrupteur par
exemple. On remarque que la reponse du serveur est composee de plusieurs donnees, celle qui
nous interesse ici est la derni`ere : pin0 :317 indique que la valeur de la pin n0 est actuellement
317 (sur 1023).

4.2.3

Ecriture
sur une pin

Figure 4.7 Ecriture


sur une pin
Ce formulaire est presque identique au precedent, `a ceci pr`es quici lutilisateur specifie la
valeur quil souhaite ecrire sur la pin des cartes selectionnees. Dans cet exemple, si une LED
est branchee entre la pin GND et la pin 8, lenvoi de cette commande aura pour effet de
lallumer. On peut noter que si la valeur specifiee nest pas conforme (par exemple une valeur
binaire differente de 0 ou 1), la requete sera bien traitee par le serveur mais celui-ci renverra
un message derreur dans sa reponse (voir ci-dessous).

30

Figure 4.8 Erreur de saisie indiquee par le serveur

4.2.4

Clignotement dune LED

Figure 4.9 Clignotement dune LED


Cette action suppose quune LED est presente sur la pin specifiee. Elle va alors clignoter
autant de fois quindique dans Number et avec lintervalle donne pour Duration. Dans
cet exemple elle va donc sallumer bri`evement 10 fois, avec un delai de 100ms entre chaque
impulsion. Ici, la reponse du serveur sert juste a` indiquer quaucune erreur ne sest produite
lors de lexecution de la commande.

31

4.2.5

Envoi dune commande au format JSON

Figure 4.10 Envoi dune commande au format JSON


Ce dernier formulaire donne la possibilite `a lutilisateur denvoyer la commande de son choix
au format JSON, comme indique dans le cahier des charges. La syntaxe de ces commandes
netant pas evidente, un clic sur le bouton Need Help ? affiche un exemple de commande
valide (en loccurrence pour faire clignoter une LED sur la pin 8 dix fois toutes les 100ms).

4.3

Design : Bootstrap + th`


eme Material Design

Au cours du developpement de ce client, nous avions conserve lapparence de base fournie


par Visual Studio pour une une application ASP.NET. Or cette derni`ere sav`ere assez aust`ere
et tr`es figee.

Figure 4.11 Lapparence de depart


Afin de tirer pleinement partie des possibilites offertes par Bootstrap (un framework CSS
responsive cree par Twitter et tr`es repandu), nous avons decide de lui ajouter un th`eme donnant
aux elements de linterface un style Material Design. Material Design est le nom de la charte
graphique que Google a recemment mis en place afin duniformiser lapparence des applications
accompagnant la derni`ere version de son syst`eme dexploitation mobile, Android. Ses points
forts sont une bonne visibilite des controles grace a` des couleurs vives, ainsi que de nombreuses
animations tr`es fluides qui visent `a ameliorer lexperience utilisateur.

32

Dans la pratique, pour appliquer ce th`eme il suffit dajouter les classes CSS que lon souhaite
aux elements HTML afin de changer leur apparence. Ainsi par exemple le code suivant permet
dappliquer le style au bouton de validation dun formulaire :
1 < input class = " btn btn - primary btn - raised " type = " submit " value = " Valider " id = "
btn \ _valider " / >

L`a o`
u les choses se compliquent un peu, cest lorsque lon souhaite appliquer une classe CSS
a` un element qui nest pas code en dur, comme cest le cas pour les elements generes `a partir des
donnees dun mod`ele. Au final la solution est tr`es simple : il suffit dajouter comme param`etre
new { @class = nom de la classe } lors de la declaration dun element de formulaire. Ci-dessus
un exemple avec une liste deroulante :
1 @Html . DropDownListFor ( m = > m . DropDownListField , new SelectList ( @Model .
DropDownListFieldItems , " Value " , " Label " ) , new { @class = " form - control "
})

4.4

Difficult
es rencontr
ees

Le developpement de ce client na globalement pas pose de probl`emes. Au final, le dernier


point reste sans solution concerne la manipulation du JavaScript gerant la visibilite des elements
dune vue via un controleur. Ce probl`eme sest presente lorsquil a ete question de masquer le
menu de lapplication lorsque ladresse IP navait pas ete validee. Deux approches on ete tentees :
communication entre le code ASP.NET et le JavaScript au moyen de variables globales ; et
solution orientee vue, en reagissant a` certains ev`enements (apparition de la <div> contenant
la reponse du serveur par exemple). Malheureusement aucune methode satisfaisante na ete
trouvee, ce qui peut donc causer des erreurs si lutilisateur clique sur un des boutons du menu
avant davoir enregistre lIP du serveur.

33

Chapitre 5
Gestion de projet
5.1

Gantt

34

5.2

Diagrammes de r
epartition du temps par t
aches

5.3

M
ethodes de travail

Lapplication AngularJS :
Afin de decouvrir le monde dAngularJS et den comprendre les ficelles, nous avons dans
un premier temps suivi les tutoriaux presents sur le site AngularJS https://angularjs.org/
(The Basics, Add Some Control,)
Lorsquil a fallu structurer lapplication suivant le mod`ele MVC, nous avons suivi la trame
du TP AngularJS de Serge Tahe http://tahe.developpez.com/angularjs-spring4/ afin de
comprendre les interactions entre les differents elements.
Quant aux composants AngularJS, la plupart disposent dun site dedie avec des exemples
dapplication.
Client ASP.NET :
La construction du projet a` ete faite en suivant le cours ASP.NET de M.TAHE. Les quelques
details qui netaient pas vus dans ce cours (creation dune requete HTTP, serialisation dune
chaine JSON, etc) se trouvent facilement dans la documentation en ligne de Microsoft, ainsi
que sur des forums dentraide comme Stack Overflow. Globalement, la progression sest faite
dans cet ordre : creation dune premi`ere vue simplifiee, puis creation des autres vues sur le
meme mod`ele, puis amelioration de la premi`ere vue, et enfin repercussion de ces ameliorations
sur le reste de lapplication.

35

Chapitre 6
Conclusion
` la fin du projet, les deux clients ont ete termines et sont compl`etement fonctionnels.
A
On peut en fait parler de trois clients, puisque grace a` PhoneGap nous avons pu creer une
application native Android directement a` partir des sources du client web AngularJS, qui a ete
teste avec succ`es sur une tablette communiquant avec le serveur via un reseau wifi local.

6.1

Apports professionnels

Ce projet a ete loccasion dapprofondir nos connaissances en programmation web. En effet,


le client AngularJS nous a permis de decouvrir ce framework JavaScript MVC tr`es puissant,
qui est de plus tr`es apprecie dans les Entreprises de Services Numeriques, comme en temoigne
linteret des recruteurs rencontres lors de la Journee des Metiers. Cest un veritable benefice
car AngularJS nest pas enseigne dans le tronc commun de lISTIA et constitue donc un plus
sur le CV. En ce qui concerne le client ASP.NET, cela a ete lopportunite de renforcer les
connaissances vues en TD, tout en explorant la notion de communication par requetes HTTP,
different des appels vers une base de donnees vus en cours.

6.2

Apports personnels

Sur le plan personnel, ce projet nous a permis de saisir letendue des possibilites offertes par
les technologies du domaine du developpement web, et de decouvrir les interactions entre une
` lheure o`
application web et du materiel electronique connecte. A
u lon parle de plus en plus
de lInternet des objets, ce que nous avons vu au cours de ce projet nous a semble tout a` fait
pertinent en plus detre un excellent moyen de se former a` ces technologies davenir.

6.3

Pistes dam
elioration

On peut imaginer des ameliorations sur 2 plans :


Cote client, on pourrait par exemple ajouter une fonction de planification et de gestion de
taches. Lutilisateur pourrait ainsi creer des taches qui seraient executees a` certains moments
de la journee.
Cote serveur, on pourrait ajouter des fonctions sur le mod`ele de laction Blink, adaptees a`
des capteurs ou actionneurs particuliers. On pourrait notamment exploiter les sorties digitales
PWM pour controler des moteurs.

36

Chapitre 7
Annexes
7.1

Guide utilisateur

Etape
1 : Dans le panneau de configuration, cliquer sur Centre Reseau et partage .

Etape
2 : Puis sur la gauche, Modifier les param`etres de la carte .

Etape
3 : Choisir la carte reseau de lordinateur, clic droit, puis Proprietes .

Etape
4 : Cliquer sur le protocole IPV4, puis Proprietes .

Etape
5 : Renseigner les param`etres dIP presents sur limage.

Etape
6 : Demarrer le serveur en executant le fichier server.bat

Etape
7 : Une fenetre de commande souvre, attendre que le serveur soit lance.

Etape
8a : Pour lancer le client AngularJS, ouvrir Webstorm puis cliquer sur Open Directory

Etape
9a : Choisir le fichier de projet Client Domotique AngularJS

Etape
10a : Dans larchitecture du projet, clic droit sur home.html

Etape
11a : Cliquer sur Open in Browser puis choisir un navigateur web.

Etape
8b : Pour lancer le client ASP.NET, ouvrir Visual Studio. Dans le menu Fichier ,
cliquer sur Ouvrir une solution/projet et choisir le fichier de projet Client Domotique
ASP.NET .

Etape
9b : Voici larchitecture du projet. Un simple Ctrl+F5 executera le projet.

37

38

7.2

Int
egration du th`
eme Bootstrap Material Design

Cette annexe detaille la procedure a` suivre afin de rajouter le th`eme Material Design au
projet Visual Studio. Ce th`eme necessite que Bootstrap soit dej`a present dans lapplication,
ce qui est le cas lorsque lon cree un nouveau projet ASP.NET MVC. Ensuite, il faut rajouter ceux correspondant au th`eme. Larchive recuperee sur le Github du th`eme (https:
//github.com/FezVrasta/bootstrap-material-design) contient de nombreux fichiers, mais
seul quelques uns sont vraiment necessaires. Il sagit des fichiers JavaScript material.min.js
et ripples.min.js presents dans dist/js, ainsi que des fichiers CSS material.min.css,
material-wfont.min.css et ripples.min.css trouves dans dist/css. Il faut ensuite copier
ces fichiers dans les dossiers Content et Scripts de lapplication, afin dobtenir larborescence
visible ci-dessous :

Figure 7.1 Le contenu des dossiers Content et Scripts


Il faut ensuite ajouter les lignes suivantes dans le fichier BundleConfig.cs :
1 bundles . Add ( new ScriptBundle ( " ~/ bundles / bootstrap " ) . Include (
2
" ~/ Scripts / bootstrap . js " ,
3
" ~/ Scripts / material . min . js " ,
4
" ~/ Scripts / ripples . min . js " ) ) ;
5
6
bundles . Add ( new StyleBundle ( " ~/ Content / css " ) . Include (
7
" ~/ Content / bootstrap . css " ,
8
" ~/ Content / site . css " ,
9
" ~/ Content / bootstrap - responsive . css " ,
10
" ~/ Content / material . min . css " ,
11
" ~/ Content / ripples . min . css " ,
12
" ~/ Content / material - wfont . min . css " ) ) ;

39

Puis dans _Layout.cshtml, on importe les scripts dans le <head> :


1 < script type = " text / javascript " src = " ~/ Scripts / material . min . js " > </ script >
2 < script type = " text / javascript " src = " ~/ Scripts / ripples . min . js " > </ script >

Pour finir, toujours dans _Layout.cshtml, on ins`ere les lignes suivantes juste avant la balise
</body> :
1 @Scripts . Render ( " ~/ bundles / jquery " )
2 @Scripts . Render ( " ~/ bundles / bootstrap " )
3 @RenderSection ( " scripts " , required : false )

40

Chapitre 8
Bibliographie
Tutoriaux et composants AngularJS : http://getbootstrap.com/
Tutoriel AngularJS / Spring 4 : http://tahe.developpez.com/angularjs-spring4/
Site Bootstrap : http://getbootstrap.com/
Introduction PhoneGap : http://www.alsacreations.com/tuto/lire/1646-introductionphonegap.html
Site PhoneGap : http://phonegap.com/
Th`eme Bootstrap Material Design : https://fezvrasta.github.io/bootstrap-materialdesign/
Composant UI Grid : http://ui-grid.info/
Composant n3-line-chart : http://n3-charts.github.io/line-chart/#/

41

Projet realise par : Nicolas ROULLEAU et Adrien LIOTARD


Projet encadre par : Serge TAHE

R
esum
e
Ce rapport relate le developpement de deux interfaces web destinees au controle dun
syst`eme domotique fabrique sur mesure : le premier ecrit en Javascript avec le framework
AngularJS, le second utilisant Microsoft ASP.NET MVC. Pour nos tests de developpement,
ce syst`eme etait compose de deux cartes Arduino (des cartes electroniques polyvalentes et
bon marche utilisees par les bricoleurs) pourvues de DEL et de capteurs de temperature. Ces
cartes sont raccordees aux interfaces a` travers un r
eseau local, dans lequel un ordinateur joue
le role du serveur qui recoit les commandes de lutilisateur depuis un client, les envoie aux
cartes Arduino puis renvoie les informations vers linterface. Les commandes suivantes on ete
integrees : lire/ecrire une valeur sur une des pins dun Arduino, faire clignoter une DEL avec
un nombre de pulsations et un intervalle donne, et envoyer des commandes au format JSON.
Comme ces fonctions on ete testees avec succ`es, le syst`eme peut maintenant etre ameliore pour
etre utilise comme un vrai syst`eme domotique.
Mots cles : interfaces web, domotique, cartes Arduino, reseau local, serveur

Abstract
This paper reports the development of two web interfaces aimed at the control of a custom
built home automation system : the first using JavaScript and the AngularJS framework, the
second using Microsoft ASP.NET MVC. For our development tests, this system was composed
of two Arduino boards (versatile and cheap electronic board used by hobbyists) with LED
and temperature sensors plugged on them. These electronic boards were linked to our interfaces through a local network, where one computer acts as a server which receive the user
commands from the client, send them to the Arduino and then send back some information
to the interface. The following commands were implemented : read/write a value on one of
the Arduinos pins, make a LED blinks with a given number of pulses and interval, and send
commands in JSON format. As these functions were successfully tested, the system can now be
further improved to be used as an actual home automation monitoring system.
Key words : web interface, home automation, Arduino board, local network, server

42