Anne 2014-2015Rapport 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

2

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

Angers,

Rf. Direction des enseignements ENGAGEMENT DE NON PLAGIAT Et de la vie tudiante(DEVE) 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

4

Table des matieres

1 Introduction 81.1 Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.1.1 Systeme domotique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.1.2 Communication clients-serveur . . . . . . . . . . . . . . . . . . . . . . . . 9

1.2 Cahier des charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101.2.1 Les differentes actions possibles des clients . . . . . . . . . . . . . . . . . 101.2.2 Commande de plusieurs cartes en simultane . . . . . . . . . . . . . . . . 11

2 Structure dune application MVC 122.1 Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.1.1 Le role de chaque partie . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.1.2 Les flux de donnees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

3 Client AngularJS 143.1 Implementation du MVC avec AngularJS . . . . . . . . . . . . . . . . . . . . . . 143.2 Les vues de lapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.3 Design : Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.4 Version mobile avec PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.5 Difficultes rencontrees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4 Client ASP.NET 244.1 Implementation du MVC avec ASP.NET . . . . . . . . . . . . . . . . . . . . . . 24

4.1.1 La partie presentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.1.2 Le back-office . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4.2 Les vues de lapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.2.1 La page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.2.2 Lecture de letat dune pin . . . . . . . . . . . . . . . . . . . . . . . . . . 294.2.3 Ecriture sur une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.2.4 Clignotement dune LED . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.2.5 Envoi dune commande au format JSON . . . . . . . . . . . . . . . . . . 32

4.3 Design : Bootstrap + theme Material Design . . . . . . . . . . . . . . . . . . . . 324.4 Difficultes rencontrees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

5 Gestion de projet 345.1 Gantt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345.2 Diagrammes de repartition du temps par taches . . . . . . . . . . . . . . . . . . 355.3 Methodes de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

5

6 Conclusion 366.1 Apports professionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366.2 Apports personnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366.3 Pistes damelioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

7 Annexes 377.1 Guide utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377.2 Integration du theme Bootstrap Material Design . . . . . . . . . . . . . . . . . . 39

8 Bibliographie 41

6

Table des figures

1.1 Le montage electronique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.2 Larchitecture du systeme domotique . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1 Larchitecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.1 La structure de lapplication AngularJS . . . . . . . . . . . . . . . . . . . . . . . 143.2 la vue Welcome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.3 la vue Blink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.4 la vue Readpin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173.5 la vue Temp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.6 la vue Writepin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.7 la vue Command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.8 la vue MyArduinos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203.9 message dinformation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.10 barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.1 La structure de lapplication ASP.NET MVC . . . . . . . . . . . . . . . . . . . . 244.2 La page daccueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.3 Aucune donnee entree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.4 Chaine rentree non conforme au format dune adresse IP . . . . . . . . . . . . . 274.5 La reponse du serveur est apparue . . . . . . . . . . . . . . . . . . . . . . . . . . 294.6 Lecture de letat dune pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.7 Ecriture sur une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.8 Erreur de saisie indiquee par le serveur . . . . . . . . . . . . . . . . . . . . . . . 314.9 Clignotement dune LED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.10 Envoi dune commande au format JSON . . . . . . . . . . . . . . . . . . . . . . 324.11 Lapparence de depart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

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

7

Chapitre 1

Introduction

1.1 Contexte

Depuis quelques annees, les solutions de domotique se democratisent de plus en plus. Eneffet, a une epoque ou il devient important de maitriser sa consommation energetique et oupresque tout le monde dispose dun smartphone, il est tentant de pouvoir commander sesequipements 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 surdeja des solutions commerciales cles en main, lobjectif de ce projet est de creer un systemede ce type a partir de zero.

1.1.1 Systeme domotique

En principe, un systeme domotique est compose dactionneurs et de capteurs relies a un re-seau, afin de permettre leur gestion via une ou plusieurs interfaces homme/machine. En ce quiconcerne la partie materielle, nous avons utilise des cartes Arduino, tres connues chez les brico-leurs ferus delectronique pour leur grande polyvalence et leur faible cout. Lutilisation de cescartes rend le systeme extremement modulable. Ainsi meme si dans notre cas les equipementsconnectes se limitent a des LED et des capteurs de temperature, il serait aise de rajouter parla suite de nouveaux elements : autres capteurs, servomoteurs, relais ... Pour tester le systeme,nous etions equipes de deux cartes Arduino Uno, chacune pourvue dun shield Ethernet surlequel est fixe une LED ainsi quun capteur de temperature (voir figure ci-dessous).

8

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 operativedu systeme, ces dernieres sont toutes reliees en Ethernet au meme poste informatique, qui faitdonc office de serveur. Cest a ce serveur que viendront se connecter les utilisateurs, grace ades applications specialement ecrites pour cette occasion et compatibles aussi bien avec unordinateur classique quavec un smartphone ou une tablette.

9

Figure 1.2 Larchitecture du systeme domotique

1.2 Cahier des charges

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

1.2.1 Les differentes actions possibles des clients

Chaque client se comporte comme un site web comportant un menu permettant daccedera differents formulaires. Chacun de ces formulaires est dedie a une commande particuliere, quisera ensuite envoyee au serveur avec une requete HTTP. A partir des donnees contenues dansla 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 comporterles 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 ser-

veur permet denvoyer nimporte laquelle des 3 requetes precedentes au format JSON, enrespectant 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 parametres de laction. Ils dependent de laction.

1.2.2 Commande de plusieurs cartes en simultane

Chaque formulaire doit afficher une liste affichant toutes les cartes Arduino disponibles, afinque 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 apres chaque requete, il faut egalement afficher cettereponse 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 maintenancedune application avec interface graphique. En effet, ce cadre normalise permet de bien separerla gestion des donnees, la presentation de linterface et les traitements a effectuer. Ainsi parexemple, un developpeur specialise dans le Web Design pourra soccuper de la mise en pagede lapplication sans toucher aux fichiers correspondant aux traitements, realises par un autredeveloppeur.

2.1.1 Le role de chaque partie

Le Modele Le Modele est charge du traitement des donnees de lapplication. A cet effet, ilcontient plusieurs methodes permettant de recuperer et de modifier la valeur de chaque variableassociee a une donnee. Si lapplication utilise une base de donnees (ce qui nest pas le cas ici),cest egalement le role du Modele de gerer les acces vers la base (insertion, suppression, mise ajour de champs).

La Vue La Vue correspond specifiquement a ce qui est affiche par le navigateur web delutilisateur. Cette page est dynamique, cest-a-dire que la valeur de certaines des informationsaffichees est obtenue a partir des donnees du modele. Dans la plupart des cas, une vue contientegalement un formulaire permettant a lutilisateur de rentrer des informations grace a diverscontroles graphiques : champs de textes, cases a cocher, sliders, etc.

Le Controleur Le Controleur reagit aux evenements declenches par la vue (typiquement leclic sur un lien ou la validation dun formulaire par exemple). Il peut ensuite mettre a jour lesdonnees du Modele avec les informations entrees dans la Vue, et ensuite actualiser cette vue ouen afficher une autre.

2.1.2 Les flux de donnees

Les interactions entre le modele, la vue et le controleur est synthetise dans le diagrammeci-dessous :

12

Figure 2.1 Larchitecture MVC

13

Chapitre 3

Client AngularJS

3.1 Implementation du MVC avec AngularJS

AngularJS est un framework JavaScript libre et open-source developpe par Google. Celui-ciest fonde sur lextension du langage HTML par de nouveaux tags et attributs qui representealors la partie vue du modele MVC. Les modeles sont appeles scopes et les controleurspermettent de definir des fonctions en JavaScript.

Precedemment, nous avons introduit le concept de modele MVC. Le schema ci-dessousillustre 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 configura-tion 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 controleurassocies.

Les controleurs (en orange)Un controleur principal, [mainController.js], constitue des scopes enfants, des variablesglobales ainsi que des fonctions gerant lappel des differentes pages. On remarquera queles modeles des vues sont declares dans ce controleur.Un controleur pour chacune des vues :pageblinkledController.jspagecommandController.jspagemesarduinosController.jspagereadpinController.jspagetempController.jspagewelcomeController.jspagewritepinController.js

Les vues (en jaune)La page principale [home.html] reference les fichiers du projet et appelle le menu ainsique la vue daccueil.[menu.html] contient le code HTML du menu qui permet de naviguer entre les differentesfonctions de lapplication.Enfin, les pages [pageblinkled.html], [pagecommand.html], [pagemesarduinos.html], [pa-gereadpin.html], [pagetemp.html], [pagewelcome.html] et [pagewritepin.html] contiennentle code HTML des formulaires et des appels JavaScript de leur fonction respective.Chacune contient la declaration des variables du modele de la vue, linitialisation descomposants utilises (UI Grid, selectpicker, n3linechart), la fonction envoyant la requeteHTTP a lArduino et recuperant la reponse du serveur, ainsi que certaines specificationsliees a la page (gestion des Arduino disponibles, gestion des menus, astuce).

De lutilisateur au serveur, explication dune requete : Disons que lutilisateur souhaitefaire clignoter une LED. Apres avoir affiche la vue en question, il selectionne un ou plusieursArduino, remplit le formulaire et clique sur le bouton dexecution. Voici le code HTML du bou-ton dexecution contenu dans [pageblinkled.html] : pageblinkled.actionlabel Regardons de plus preslargument ng-click . Au clic, la page [pageblinkled.html] appelle la fonction Javascript Blink() contenu dans le controleur [pageblinkledController.js] en passant par le modele dela vue scopeblinkled . Le controleur execute alors la fonction Javascript Blink() qui feraune 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. Ellepermet 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 uneLED en selectionnant un ou plusieurs Arduino, un numero de pin, une duree et un nombre declignotement.

Figure 3.3 la vue Blink

16

[pagereadpin.html] la vue Readpin : cette vue permet a lutilisateur de lire la valeur dunepin, 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 ana-logique dun capteur de temperature sur un graphe, en selectionnant jusqua deux Arduino etla valeur dune pin analogique.

17

Figure 3.5 la vue Temp

[pagewritepin.html] la vue Writepin : cette vue permet a lutilisateur decrire la valeurdune 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 unecommande JSON, en selectionnant un ou plusieurs Arduino et en saisissant une commandesous forme de chaine JSON.

19

Figure 3.7 la vue Command

[pagemesarduinos.html] la vue MyArduinos : cette vue permet a lutilisateur davoir unesimple 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 dapplicationsweb. Cest un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outilsde navigation et autres elements interactifs, ainsi que des extensions JavaScript en option.

20

Cest un projet tres populaire sur la plate-forme de gestion de developpement GitHub, ce quinous a permis de profiter dune part de laide de la communaute, et dautre part des nombreusesfonctionnalites developpees par ses membres.

Les elements HTML sont stylises grace a un systeme de classes extensibles.Exemple :

1 ...

Figure 3.9 message dinformation

1

2

3

4

5 Submit

6

Figure 3.10 barre de navigation

3.4 Version mobile avec PhoneGap

PhoneGap est un framework open source pour creer des applications mobiles multi-plateformeavec les technologies traditionnelles du web : HTML, CSS, JavaScript. Les applications mobilescreees a laide des technologies web sont appelees applications hybrides cest a dire melangeantweb et technologies natives. Le code HTML, CSS et JavaScript reste tel quel et lapplicationPhoneGap utilise le navigateur web de lappareil (webview) pour linterpreter.

Apres quelques modifications du code source et quelques minutes dattente, PhoneGap nousgenere 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 dapplicationsmobiles mais convient parfaitement aux applications simples dont le cout dun developpementnatif est prohibitif.

3.5 Difficultes rencontrees

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

La gestion des vues et de leur modele : Outre lorganisation de lapplication selon lesstandards de programmation AngularJS, il nous a fallu analyser lenchainement des evenements.En effet, certains composants comme lUI Grid ne mettent a jour leurs donnees quune seulefois au chargement du modele de la vue. Il est donc necessaire de leur attribuer leurs donneesa ce moment-la.

Lutilisation dune librairie en version beta : UI Grid est un tableau AngularJs permet-tant de manipuler, de trier et de filtrer des donnees. Nous lavons utilise pour lister les Arduinodisponibles. Au cours du developpement, ce composant a ete mise a jour dans une nouvelleversion beta. Limplementation de ce composant sest avere etre delicate etant donne la taillerestreinte de la communaute de beta-testeurs.

Lutilisation de variables externes dans la methode http : Afin dafficher le nom delArduino concerne par la reponse du serveur apres une requete http, nous avons exploite lesparametres de la methode http. Pour utiliser des donnees du modele dans la fonction executeelors de levenement .success de la methode http, nous avons du passer en parametre les donneesvoulues, sans passer par le parametre URL :

22

1 $http({ method: GET , maDonnee: $scope.maDonnee , url: h t t p ://mon.url })

2 .success(function (thisdata , status , headers , config) {}

23

Chapitre 4

Client ASP.NET

4.1 Implementation du MVC avec ASP.NET

ASP.NET est une technologie de developpement web creee par Microsoft, et qui permetde concevoir des applications web. Puisque nous avons decide de developper nos clients avecune structure MVC, nous allons donc employer la version ASP.NET MVC. Le langage choisipour developper la logique de lapplication est le C#. Les vues sont quant a elles au formatCSHTML, qui est un des moteurs de rendu HTML utilise par ASP.NET. Plusieurs scriptsen JavaScript sont egalement presents afin de rendre lapplication dynamique, et notammentpour 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 estdetaillee par la suite.

Figure 4.1 La structure de lapplication ASP.NET MVC

4.1.1 La partie presentation

Tous les fichiers correspondant a linterface graphique de lapplication, autrement dit lesvues, 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 autreappele Shared. Dans ce dossier on trouve un fichier commun a toutes les vues. Layout, estcomme 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 bonfonctionnement de lapplication, ainsi que des feuilles de styles servant a parametrer lapparencevisuelle 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 barrede quatre boutons renvoyant vers chacune des actions possibles.

Pour chacune des autres vues, 3 fichiers sont presents : Index.cshtml qui est charge par lecontroleur et qui encapsule le reste de la vue. [nom de laction].cshtml correspond au codedu formulaire de laction et enfin Reponse.cshtml contient le code de la permettantdafficher la reponse du serveur.

4.1.2 Le back-office

En plus des controleurs et des modeles, facilement identifiables car ils portent le nom delaction associee, il faut noter limportance de deux fichiers. Le script ASPDuino.js contienttoutes les fonctions permettant les appels asynchrones vers les controleurs. Le fichier Dao.cscontient quant a lui toutes les fonction effectuant les requetes HTTP vers le serveur. Ce sontces 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 formulaireindique dans le cahier des charges. La gestion des vues etant similaire dune action a lautre,seule la premiere sera completement detaillee, les autres etant decrites brievement 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 permettanta 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

16

17

18

19 @Html.LabelFor(m => m.ipServer , new { @class = "col -lg -12

control -label" })

20

21

22 @Html.TextBoxFor(m => m.ipServer , new { @class = "form -

control floating -label", id = "focusedInput", type = "text", placeholder

= "Please enter the server IP" })

23

24

25 @Html.ValidationMessageFor(m => m.

ipServer)

26

27

28

29

30

31

32

33

34 }

Ce quil faut retenir de ce code, cest que le formulaire est en fait compose dun tableau (l17a l27) dune ligne de trois cases. La premiere case contient le label du champ (l19), la deuxiemele textbox(l22) et la derniere un message derreur qui saffiche si la validation du texte tapeechoue (l25). On remarque que ces trois champs font appel au parametre m.ipServer, qui faitreference a la propriete ipServer du modele associe. Ce modele est declare l1, il sagit deConfigModel (chaque vue dispose de son propre modele). Regardons maintenant le code dece modele :

1 namespace client_v0.Models

2 {

3 public class ConfigModel : IValidatableObject

4 {

5 // valeurs postees

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")]

9 public String ipServer { get; set; }

10

11 public String json { get; set; }

12

13 public IEnumerable Validate(ValidationContext

validationContext)

14 {

15 List resultats = new List ();

16 // on rend la liste des erreurs

17 return resultats;

18 }

19 }

20 }

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

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 reguliere indiquee (dans ce cas il sagit du regex dune adresse IP).On obtient donc deja 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, ou ladresse IP donnee est correcte.La validation du formulaire va declencher laction GetArduinos du controleur, reproduite ci-dessous :

1 [HttpPost]

2 public PartialViewResult GetArduinos(ConfigModel model , FormCollection

postedData , ApplicationModel applicationData)

3 {

27

4 // mise a jour du modele

5 TryUpdateModel(model , postedData);

6

7 Dao.Dao dao = new Dao.Dao();

8 dao.getArduinos(model , applicationData);

9

10 return PartialView("Reponse", model);

11 }

Apres avoir mis a jour la valeur de ipServer dans le modele a partir de la chaine entree dansla vue (l5), on fait un appel a la couche DAO en lui passant les donnees du modele ainsi queles donnees de portee Application (l8). On retourne ensuite le fragment de vue Reponse ainsique le modele associe (l10). Ce fragment est visible ci-dessous :

1 @model client_v0.Models.ConfigModel

2

3

4 Reponse du serveur

5

6 @Model.json

7

8

On voit l6 la presence de @Model.json, qui contient maintenant la reponse du serveur. Cestla classe DAO qui sest chargee de cet enregistrement, comme on peut le voir en observant soncode :

1 public void getArduinos(ConfigModel model , ApplicationModel applicationData)

2 {

3 // on recupere les infos du modele

4 string ipServer = model.ipServer;

5

6 //on enregistre lip dans lapplication

7 applicationData.ipServer = ipServer;

8

9 // creation dun WebClient

10 WebClient webClient = new WebClient ();

11 // on precise quon va envoyer du Json

12 webClient.Headers.Add("Content -Type", "application/json");

13 // lURL

14 string uriString = "http ://" + ipServer + ":8080/ arduinos/";

15 string reponse = string.Empty;

16 try

17 {

18 // on envoie la requete et on lit la reponse

19 reponse = webClient.DownloadString(uriString);

20 model.json = reponse;

21 applicationData.json = reponse;

22 }

23 catch (WebException ex)

24 {

25 model.json = "Error : " + ex.Message;

26 }

27 }

28

En effet, apres avoir recupere ladresse IP donnee par lutilisateur (l4), on lenregistre danslapplication (l7) afin de pouvoir y acceder depuis les autres vues. Ensuite on construit larequete HTTP (l14), puis on lenvoie au serveur (l19). On peut maintenant enregistrer la reponseobtenue dans le modele (l20). Dans ce cas particulier on copie egalement cette reponse danslapplication (l21) car elle contient la liste des cartes Arduino qui sera proposee dans les autresvues. Ce ne sera pas le cas pour les reponses recues dans les autres vues.

A la suite de ces differentes etapes, la page affiche maintenant la reponse du serveur :

Figure 4.5 La reponse du serveur est apparue

4.2.2 Lecture de letat 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 dechaque carte connectee. Il selectionne pour cela la ou les cartes desirees dans la liste, ensuiteil choisi le numero de pin qui linteresse dans la liste deroulante, et enfin il precise le mode delecture. En pratique, le mode analogique sera utile si le composant branche sur la pin renvoie unevaleur proportionnelle a son etat, par exemple une sonde de temperature ou un potentiometre.Le mode binaire est quand a lui dedie au composants bistables, comme un interrupteur parexemple. On remarque que la reponse du serveur est composee de plusieurs donnees, celle quinous interesse ici est la derniere : pin0 :317 indique que la valeur de la pin n 0 est actuellement317 (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 pres quici lutilisateur specifie lavaleur quil souhaite ecrire sur la pin des cartes selectionnees. Dans cet exemple, si une LEDest branchee entre la pin GND et la pin 8, lenvoi de cette commande aura pour effet delallumer. On peut noter que si la valeur specifiee nest pas conforme (par exemple une valeurbinaire differente de 0 ou 1), la requete sera bien traitee par le serveur mais celui-ci renverraun 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 clignoterautant de fois quindique dans Number et avec lintervalle donne pour Duration. Danscet exemple elle va donc sallumer brievement 10 fois, avec un delai de 100ms entre chaqueimpulsion. Ici, la reponse du serveur sert juste a indiquer quaucune erreur ne sest produitelors 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 choixau format JSON, comme indique dans le cahier des charges. La syntaxe de ces commandesnetant pas evidente, un clic sur le bouton Need Help ? affiche un exemple de commandevalide (en loccurrence pour faire clignoter une LED sur la pin 8 dix fois toutes les 100ms).

4.3 Design : Bootstrap + theme Material Design

Au cours du developpement de ce client, nous avions conserve lapparence de base fourniepar Visual Studio pour une une application ASP.NET. Or cette derniere savere assez austereet tres figee.

Figure 4.11 Lapparence de depart

Afin de tirer pleinement partie des possibilites offertes par Bootstrap (un framework CSSresponsive cree par Twitter et tres repandu), nous avons decide de lui ajouter un theme donnantaux elements de linterface un style Material Design. Material Design est le nom de la chartegraphique que Google a recemment mis en place afin duniformiser lapparence des applicationsaccompagnant la derniere version de son systeme dexploitation mobile, Android. Ses pointsforts sont une bonne visibilite des controles grace a des couleurs vives, ainsi que de nombreusesanimations tres fluides qui visent a ameliorer lexperience utilisateur.

32

Dans la pratique, pour appliquer ce theme il suffit dajouter les classes CSS que lon souhaiteaux elements HTML afin de changer leur apparence. Ainsi par exemple le code suivant permetdappliquer le style au bouton de validation dun formulaire :

1

La ou les choses se compliquent un peu, cest lorsque lon souhaite appliquer une classe CSSa un element qui nest pas code en dur, comme cest le cas pour les elements generes a partir desdonnees dun modele. Au final la solution est tres simple : il suffit dajouter comme parametrenew { @class = nom de la classe } lors de la declaration dun element de formulaire. Ci-dessusun exemple avec une liste deroulante :

1 @Html.DropDownListFor(m => m.DropDownListField , new SelectList(@Model.

DropDownListFieldItems , "Value", "Label"), new { @class = "form -control"

})

4.4 Difficultes rencontrees

Le developpement de ce client na globalement pas pose de problemes. Au final, le dernierpoint reste sans solution concerne la manipulation du JavaScript gerant la visibilite des elementsdune vue via un controleur. Ce probleme sest presente lorsquil a ete question de masquer lemenu 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 ; etsolution orientee vue, en reagissant a certains evenements (apparition de la contenantla reponse du serveur par exemple). Malheureusement aucune methode satisfaisante na etetrouvee, ce qui peut donc causer des erreurs si lutilisateur clique sur un des boutons du menuavant davoir enregistre lIP du serveur.

33

Chapitre 5

Gestion de projet

5.1 Gantt

34

5.2 Diagrammes de repartition du temps par taches

5.3 Methodes 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 modele MVC, nous avons suivi la tramedu TP AngularJS de Serge Tahe http://tahe.developpez.com/angularjs-spring4/ afin decomprendre les interactions entre les differents elements.

Quant aux composants AngularJS, la plupart disposent dun site dedie avec des exemplesdapplication.

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 dunechaine JSON, etc) se trouvent facilement dans la documentation en ligne de Microsoft, ainsique sur des forums dentraide comme Stack Overflow. Globalement, la progression sest faitedans cet ordre : creation dune premiere vue simplifiee, puis creation des autres vues sur lememe modele, puis amelioration de la premiere vue, et enfin repercussion de ces ameliorationssur le reste de lapplication.

35

https://angularjs.org/http://tahe.developpez.com/angularjs-spring4/

Chapitre 6

Conclusion

A la fin du projet, les deux clients ont ete termines et sont completement fonctionnels.On peut en fait parler de trois clients, puisque grace a PhoneGap nous avons pu creer uneapplication native Android directement a partir des sources du client web AngularJS, qui a eteteste avec succes 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 tres puissant,qui est de plus tres apprecie dans les Entreprises de Services Numeriques, comme en temoignelinteret des recruteurs rencontres lors de la Journee des Metiers. Cest un veritable beneficecar AngularJS nest pas enseigne dans le tronc commun de lISTIA et constitue donc un plussur le CV. En ce qui concerne le client ASP.NET, cela a ete lopportunite de renforcer lesconnaissances 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 parles technologies du domaine du developpement web, et de decouvrir les interactions entre uneapplication web et du materiel electronique connecte. A lheure ou lon parle de plus en plusde lInternet des objets, ce que nous avons vu au cours de ce projet nous a semble tout a faitpertinent en plus detre un excellent moyen de se former a ces technologies davenir.

6.3 Pistes damelioration

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 momentsde la journee.

Cote serveur, on pourrait ajouter des fonctions sur le modele de laction Blink, adaptees ades capteurs ou actionneurs particuliers. On pourrait notamment exploiter les sorties digitalesPWM 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 parametres 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 parametres 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 DomotiqueASP.NET .

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

37

38

7.2 Integration du theme Bootstrap Material Design

Cette annexe detaille la procedure a suivre afin de rajouter le theme Material Design auprojet Visual Studio. Ce theme necessite que Bootstrap soit deja present dans lapplication,ce qui est le cas lorsque lon cree un nouveau projet ASP.NET MVC. Ensuite, il faut ra-jouter ceux correspondant au theme. Larchive recuperee sur le Github du theme (https://github.com/FezVrasta/bootstrap-material-design) contient de nombreux fichiers, maisseul quelques uns sont vraiment necessaires. Il sagit des fichiers JavaScript material.min.jset 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 copierces fichiers dans les dossiers Content et Scripts de lapplication, afin dobtenir larborescencevisible 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

https://github.com/FezVrasta/bootstrap-material-designhttps://github.com/FezVrasta/bootstrap-material-design

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

1

2

Pour finir, toujours dans _Layout.cshtml, on insere les lignes suivantes juste avant la balise :

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-introduction-

phonegap.html

Site PhoneGap : http://phonegap.com/Theme Bootstrap Material Design : https://fezvrasta.github.io/bootstrap-material-

design/

Composant UI Grid : http://ui-grid.info/Composant n3-line-chart : http://n3-charts.github.io/line-chart/#/

41

http://getbootstrap.com/http://tahe.developpez.com/angularjs-spring4/http://getbootstrap.com/http://www.alsacreations.com/tuto/lire/1646-introduction-phonegap.htmlhttp://www.alsacreations.com/tuto/lire/1646-introduction-phonegap.htmlhttp://phonegap.com/https://fezvrasta.github.io/bootstrap-material-design/https://fezvrasta.github.io/bootstrap-material-design/http://ui-grid.info/http://n3-charts.github.io/line-chart/#/

Projet realise par : Nicolas ROULLEAU et Adrien LIOTARDProjet encadre par : Serge TAHE

Resume

Ce rapport relate le developpement de deux interfaces web destinees au controle dunsysteme domotique fabrique sur mesure : le premier ecrit en Javascript avec le frameworkAngularJS, le second utilisant Microsoft ASP.NET MVC. Pour nos tests de developpement,ce systeme etait compose de deux cartes Arduino (des cartes electroniques polyvalentes etbon marche utilisees par les bricoleurs) pourvues de DEL et de capteurs de temperature. Cescartes sont raccordees aux interfaces a travers un reseau local, dans lequel un ordinateur jouele role du serveur qui recoit les commandes de lutilisateur depuis un client, les envoie auxcartes Arduino puis renvoie les informations vers linterface. Les commandes suivantes on eteintegrees : lire/ecrire une valeur sur une des pins dun Arduino, faire clignoter une DEL avecun nombre de pulsations et un intervalle donne, et envoyer des commandes au format JSON.Comme ces fonctions on ete testees avec succes, le systeme peut maintenant etre ameliore pouretre utilise comme un vrai systeme 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 custombuilt home automation system : the first using JavaScript and the AngularJS framework, thesecond using Microsoft ASP.NET MVC. For our development tests, this system was composedof two Arduino boards (versatile and cheap electronic board used by hobbyists) with LEDand temperature sensors plugged on them. These electronic boards were linked to our inter-faces through a local network, where one computer acts as a server which receive the usercommands from the client, send them to the Arduino and then send back some informationto the interface. The following commands were implemented : read/write a value on one ofthe Arduinos pins, make a LED blinks with a given number of pulses and interval, and sendcommands in JSON format. As these functions were successfully tested, the system can now befurther improved to be used as an actual home automation monitoring system.

Key words : web interface, home automation, Arduino board, local network, server

42

IntroductionContexteSystme domotiqueCommunication clients-serveurCahier des chargesLes diffrentes actions possibles des clientsCommande de plusieurs cartes en simultanStructure d'une application MVCPrincipeLe rle de chaque partieLes flux de donnesClient AngularJSImplmentation du MVC avec AngularJSLes vues de l'applicationDesign : BootstrapVersion mobile avec PhoneGapDifficults rencontresClient ASP.NETImplmentation du MVC avec ASP.NETLa partie prsentationLe back-officeLes vues de l'applicationLa page d'accueilLecture de l'tat d'une pincriture sur une pinClignotement d'une LEDEnvoi d'une commande au format JSONDesign : Bootstrap + thme Material DesignDifficults rencontresGestion de projetGanttDiagrammes de rpartition du temps par tchesMthodes de travailConclusionApports professionnelsApports personnelsPistes d'amliorationAnnexesGuide utilisateurIntgration du thme Bootstrap Material DesignBibliographie