42
Année 2014-2015 Rapport de projet - EI5 AGI – parcours IAIE Projet Application Web De Domotique Arduino Projet réalisé par : Nicolas ROULLEAU Adrien LIOTARD Projet encadré par : Serge TAHE ISTIA - Université d’Angers

Rapport Projet Application Web De Domotique Arduino - Liotard Roulleau

Embed Size (px)

Citation preview

Année 2014-2015Rapport de projet - EI5 AGI – parcours IAIE

Projet Application Web De Domotique Arduino

Projet réalisé par :Nicolas ROULLEAU

Adrien LIOTARD

Projet encadré par :Serge TAHE

ISTIA - Université d’Angers

2

ISTIA l Institut des sciences et techniques de l'ingénieur d'Angers www.istia.univ-angers.fr l [email protected] 62 avenue Notre-Dame du Lac l 49000 ANGERS l Tél. 02 44 68 75 00 l Fax 02 44 68 75 01

Angers,

Réf. 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 d’une partie d’un document publiés sur toutes formes de support, y compris l’internet, constitue une violation des droits d’auteur ainsi qu’une fraude caractérisée. En conséquence, je m’engage à citer toutes les sources que j’ai utilisées pour écrire ce rapport ou mémoire. 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 d’une 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 l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.2.1 La page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.2.2 Lecture de l’etat d’une pin . . . . . . . . . . . . . . . . . . . . . . . . . . 294.2.3 Ecriture sur une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.2.4 Clignotement d’une LED . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.2.5 Envoi d’une 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 d’amelioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 L’architecture du systeme domotique . . . . . . . . . . . . . . . . . . . . . . . . 10

2.1 L’architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.1 La structure de l’application 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 d’information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.10 barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.1 La structure de l’application ASP.NET MVC . . . . . . . . . . . . . . . . . . . . 244.2 La page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254.3 Aucune donnee entree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.4 Chaine rentree non conforme au format d’une adresse IP . . . . . . . . . . . . . 274.5 La reponse du serveur est apparue . . . . . . . . . . . . . . . . . . . . . . . . . . 294.6 Lecture de l’etat d’une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294.7 Ecriture sur une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304.8 Erreur de saisie indiquee par le serveur . . . . . . . . . . . . . . . . . . . . . . . 314.9 Clignotement d’une LED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.10 Envoi d’une commande au format JSON . . . . . . . . . . . . . . . . . . . . . . 324.11 L’apparence 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 d’un smartphone, il est tentant de pouvoir commander sesequipements domestiques (eclairage, chauffage, stores, etc) et de consulter l’etat de l’habitation(temperature, humidite, etc) via un ordinateur ou un appareil mobile. Meme s’il existe bien surdeja des solutions commerciales ”cles en main”, l’objectif 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 d’actionneurs 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 d’electronique pour leur grande polyvalence et leur faible cout. L’utilisation de cescartes rend le systeme 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 parla suite de nouveaux elements : autres capteurs, servomoteurs, relais ... Pour tester le systeme,nous etions equipes de deux cartes Arduino Uno, chacune pourvue d’un shield Ethernet surlequel est fixe une LED ainsi qu’un 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. C’est a ce serveur que viendront se connecter les utilisateurs, grace ades applications specialement ecrites pour cette occasion et compatibles aussi bien avec unordinateur classique qu’avec un smartphone ou une tablette.

9

Figure 1.2 – L’architecture 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 d’accedera 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, l’interface d’un client doit comporterles formulaires suivants :

– Connexion au serveur gerant les cartes Arduino– Lecture de la valeur d’une pin (analogique et binaire)

10

– Ecriture de la valeur d’une pin (analogique et binaire)– Clignotement d’une LED (specification du nombre de clignotements et de leur intervalle)– Envoi d’une commande au format JSON (JavaScript Object Notation) : en effet le ser-

veur permet d’envoyer n’importe 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 d’une pin,– cl (clignoter) pour faire clignoter une led ;

– pa : les parametres de l’action. Ils dependent de l’action.

1.2.2 Commande de plusieurs cartes en simultane

Chaque formulaire doit afficher une liste affichant toutes les cartes Arduino disponibles, afinque l’utilisateur puisse choisir la ou les cartes sur lesquelles il souhaite envoyer la commande.Lorsque plusieurs cartes sont selectionnees, elles executent l’action 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 d’une application MVC

2.1 Principe

MVC est un patron de conception qui vise a simplifier le developpement et la maintenanced’une application avec interface graphique. En effet, ce cadre normalise permet de bien separerla gestion des donnees, la presentation de l’interface et les traitements a effectuer. Ainsi parexemple, un developpeur specialise dans le Web Design pourra s’occuper de la mise en pagede l’application 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 l’application. A cet effet, ilcontient plusieurs methodes permettant de recuperer et de modifier la valeur de chaque variableassociee a une donnee. Si l’application utilise une base de donnees (ce qui n’est pas le cas ici),c’est 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 del’utilisateur. Cette page est dynamique, c’est-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 l’utilisateur 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 d’un 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 – L’architecture 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 l’extension 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 l’application finale AngularJS :

Figure 3.1 – La structure de l’application AngularJS

Dans ce schema, on distinguera :– Le module [angularduino.js] (en rouge)

Celui-ci definit les modules Angular utilises par l’application et s’occupe 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 l’appel 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 d’accueil.[menu.html] contient le code HTML du menu qui permet de naviguer entre les differentesfonctions de l’application.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, l’initialisation descomposants utilises (UI Grid, selectpicker, n3linechart), la fonction envoyant la requeteHTTP a l’Arduino et recuperant la reponse du serveur, ainsi que certaines specificationsliees a la page (gestion des Arduino disponibles, gestion des menus, astuce).

De l’utilisateur au serveur, explication d’une requete : Disons que l’utilisateur souhaitefaire clignoter une LED. Apres avoir affiche la vue en question, il selectionne un ou plusieursArduino, remplit le formulaire et clique sur le bouton d’execution. Voici le code HTML du bou-ton d’execution contenu dans [pageblinkled.html] : <a href=”” ng-click=”scopeblinkled.Blink()”type=”button”class=”btn btn-primary”>pageblinkled.actionlabel</a> Regardons de plus presl’argument « 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 l’application

[pagewelcome.html] la vue Welcome : cette vue est la page d’accueil de l’application. Ellepermet de configurer l’adresse IP du serveur domotique.

Figure 3.2 – la vue Welcome

[pageblinkled.html] la vue Blink : cette vue permet a l’utilisateur 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 l’utilisateur de lire la valeur d’unepin, 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 l’utilisateur de visualiser la valeur ana-logique d’un capteur de temperature sur un graphe, en selectionnant jusqu’a deux Arduino etla valeur d’une pin analogique.

17

Figure 3.5 – la vue Temp

[pagewritepin.html] la vue Writepin : cette vue permet a l’utilisateur d’ecrire la valeurd’une 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 l’utilisateur d’envoyer 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 l’utilisateur d’avoir unesimple liste des Arduino connectes.

Figure 3.8 – la vue MyArduinos

3.3 Design : Bootstrap

Twitter Bootstrap est une collection d’outils utile a la creation de sites et d’applicationsweb. C’est 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

C’est un projet tres populaire sur la plate-forme de gestion de developpement GitHub, ce quinous a permis de profiter d’une part de l’aide de la communaute, et d’autre part des nombreusesfonctionnalites developpees par ses membres.

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

1 <div class="alert alert -success" role="alert">...</div>

Figure 3.9 – message d’information

1 <form class="navbar -form navbar -left" role="search">

2 <div class="form -group">

3 <input type="text" class="form -control" placeholder="Search">

4 </div>

5 <button type="submit" class="btn btn -default">Submit </button >

6 </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-plateformeavec les technologies traditionnelles du web : HTML, CSS, JavaScript. Les applications mobilescreees a l’aide des technologies web sont appelees applications hybrides c’est a dire melangeantweb et technologies natives. Le code HTML, CSS et JavaScript reste tel quel et l’applicationPhoneGap utilise le navigateur web de l’appareil (webview) pour l’interpreter.

Apres quelques modifications du code source et quelques minutes d’attente, PhoneGap nousgenere un fichier applicatif Android (.apk).

Voici un apercu de la version mobile :

21

L’utilisation de PhoneGap n’est pas une solution adaptee a tous les types d’applicationsmobiles mais convient parfaitement aux applications simples dont le cout d’un 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 l’organisation de l’application selon lesstandards de programmation AngularJS, il nous a fallu analyser l’enchainement des evenements.En effet, certains composants comme l’UI Grid ne mettent a jour leurs donnees qu’une seulefois au chargement du modele de la vue. Il est donc necessaire de leur attribuer leurs donneesa ce moment-la.

L’utilisation d’une librairie en version beta : UI Grid est un tableau AngularJs permet-tant de manipuler, de trier et de filtrer des donnees. Nous l’avons utilise pour lister les Arduinodisponibles. Au cours du developpement, ce composant a ete mise a jour dans une nouvelleversion beta. L’implementation de ce composant s’est avere etre delicate etant donne la taillerestreinte de la communaute de beta-testeurs.

L’utilisation de variables externes dans la methode http : Afin d’afficher le nom del’Arduino 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 l’evenement .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 l’application 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 l’application dynamique, et notammentpour gerer l’aspect asynchrone des interactions avec le serveur (requetes et reponses AJAX).La structure generale de l’application est schematisee dans le diagramme ci-dessous. Elle estdetaillee par la suite.

Figure 4.1 – La structure de l’application ASP.NET MVC

4.1.1 La partie presentation

Tous les fichiers correspondant a l’interface graphique de l’application, autrement dit lesvues, sont regroupes dans le dossier ”Views”. Ce dernier est constitue de 6 sous-dossiers : 5

24

pour les 5 ”pages” de l’application, et portant le nom de l’action associee, ainsi qu’un autreappele ”Shared”. Dans ce dossier on trouve un fichier commun a toutes les vues. ” Layout”, estcomme son nom l’indique, charge de l’agencement general de la page affichee par le navigateur.C’est en effet dans ce fichier que sont geres les imports des differents scripts necessaires au bonfonctionnement de l’application, ainsi que des feuilles de styles servant a parametrer l’apparencevisuelle du programme. Le contenu des vues est encapsule dans le layout grace a la balise@RenderBody(). Le layout contient egalement le menu de l’interface, 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 l’action].cshtml correspond au codedu formulaire de l’action et enfin Reponse.cshtml contient le code de la <div> permettantd’afficher la reponse du serveur.

4.1.2 Le back-office

En plus des controleurs et des modeles, facilement identifiables car ils portent le nom del’action associee, il faut noter l’importance de deux fichiers. Le script ASPDuino.js contienttoutes 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 sontces fonctions qui sont appelees par les differents controleurs.

4.2 Les vues de l’application

Techniquement, ce client domotique est compose de 5 vues : une pour chaque formulaireindique dans le cahier des charges. La gestion des vues etant similaire d’une action a l’autre,seule la premiere sera completement detaillee, les autres etant decrites brievement par la suite.

4.2.1 La page d’accueil

Au lancement de l’application, l’utilisateur se retrouve devant la page suivante :

Figure 4.2 – La page d’accueil

Cette page comporte un formulaire qui se resume a un unique champ de texte permettanta l’utilisateur de rentrer l’adresse 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.ValidationMessageFor(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 reponse du serveur -->

33 <div id="reponse" />

34 }

Ce qu’il faut retenir de ce code, c’est que le formulaire est en fait compose d’un tableau (l17a l27) d’une ligne de trois cases. La premiere case contient le label du champ (l19), la deuxiemele textbox(l22) et la derniere un message d’erreur qui s’affiche 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 s’agit de”ConfigModel” (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 <ValidationResult > Validate(ValidationContext

validationContext)

14 {

15 List <ValidationResult > resultats = new List <ValidationResult >();

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 d’erreur a afficher si on valide le formulaire sans rien

avoir entre.– RegularExpression (l8) donne un autre message d’erreur si le texte tape n’est pas conforme

a l’expression reguliere indiquee (dans ce cas il s’agit du regex d’une 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 d’une adresse IP

Maintenant regardons ce qui se passe dans le cas normal, ou l’adresse IP donnee est correcte.La validation du formulaire va declencher l’action ”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 <div class="panel panel -primary">

4 <div class="panel -heading">Reponse 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. C’estla classe DAO qui s’est 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 l’ip dans l’application

7 applicationData.ipServer = ipServer;

8

9 // creation d’un WebClient

10 WebClient webClient = new WebClient ();

11 // on precise 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 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 l’adresse IP donnee par l’utilisateur (l4), on l’enregistre dansl’application (l7) afin de pouvoir y acceder depuis les autres vues. Ensuite on construit larequete HTTP (l14), puis on l’envoie au serveur (l19). On peut maintenant enregistrer la reponseobtenue dans le modele (l20). Dans ce cas particulier on copie egalement cette reponse dansl’application (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 l’etat d’une pin

Figure 4.6 – Lecture de l’etat d’une pin

29

Cette page permet a l’utilisateur de connaitre la valeur actuelle de n’importe quelle pin dechaque carte connectee. Il selectionne pour cela la ou les cartes desirees dans la liste, ensuiteil choisi le numero de pin qui l’interesse 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 qu’ici l’utilisateur specifie lavaleur qu’il souhaite ecrire sur la pin des cartes selectionnees. Dans cet exemple, si une LEDest branchee entre la pin GND et la pin 8, l’envoi de cette commande aura pour effet del’allumer. On peut noter que si la valeur specifiee n’est pas conforme (par exemple une valeurbinaire differente de 0 ou 1), la requete sera bien traitee par le serveur mais celui-ci renverraun message d’erreur dans sa reponse (voir ci-dessous).

30

Figure 4.8 – Erreur de saisie indiquee par le serveur

4.2.4 Clignotement d’une LED

Figure 4.9 – Clignotement d’une LED

Cette action suppose qu’une LED est presente sur la pin specifiee. Elle va alors clignoterautant de fois qu’indique dans ”Number” et avec l’intervalle donne pour ”Duration”. Danscet exemple elle va donc s’allumer brievement 10 fois, avec un delai de 100ms entre chaqueimpulsion. Ici, la reponse du serveur sert juste a indiquer qu’aucune erreur ne s’est produitelors de l’execution de la commande.

31

4.2.5 Envoi d’une commande au format JSON

Figure 4.10 – Envoi d’une commande au format JSON

Ce dernier formulaire donne la possibilite a l’utilisateur d’envoyer la commande de son choixau format JSON, comme indique dans le cahier des charges. La syntaxe de ces commandesn’etant pas evidente, un clic sur le bouton ”Need Help ?” affiche un exemple de commandevalide (en l’occurrence 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 l’apparence de base fourniepar Visual Studio pour une une application ASP.NET. Or cette derniere s’avere assez austereet tres figee.

Figure 4.11 – L’apparence 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 l’interface un style ”Material Design”. Material Design est le nom de la chartegraphique que Google a recemment mis en place afin d’uniformiser l’apparence des applicationsaccompagnant la derniere version de son systeme d’exploitation 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 l’experience utilisateur.

32

Dans la pratique, pour appliquer ce theme il suffit d’ajouter les classes CSS que l’on souhaiteaux elements HTML afin de changer leur apparence. Ainsi par exemple le code suivant permetd’appliquer le style au bouton de validation d’un formulaire :

1 <input class="btn btn -primary btn -raised" type="submit" value="Valider" id="

btn\_valider" />

La ou les choses se compliquent un peu, c’est lorsque l’on souhaite appliquer une classe CSSa un element qui n’est pas code en dur, comme c’est le cas pour les elements generes a partir desdonnees d’un modele. Au final la solution est tres simple : il suffit d’ajouter comme parametrenew { @class = ”nom de la classe” } lors de la declaration d’un 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 n’a globalement pas pose de problemes. Au final, le dernierpoint reste sans solution concerne la manipulation du JavaScript gerant la visibilite des elementsd’une vue via un controleur. Ce probleme s’est presente lorsqu’il a ete question de masquer lemenu de l’application lorsque l’adresse IP n’avait 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 <div> contenantla reponse du serveur par exemple). Malheureusement aucune methode satisfaisante n’a etetrouvee, ce qui peut donc causer des erreurs si l’utilisateur clique sur un des boutons du menuavant d’avoir enregistre l’IP 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

L’application AngularJS :Afin de decouvrir le monde d’AngularJS et d’en 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,)Lorsqu’il a fallu structurer l’application suivant le modele MVC, nous avons suivi la trame

du 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 d’un site dedie avec des exemplesd’application.

Client ASP.NET :La construction du projet a ete faite en suivant le cours ASP.NET de M.TAHE. Les quelques

details qui n’etaient pas vus dans ce cours (creation d’une requete HTTP, serialisation d’unechaine JSON, etc) se trouvent facilement dans la documentation en ligne de Microsoft, ainsique sur des forums d’entraide comme Stack Overflow. Globalement, la progression s’est faitedans cet ordre : creation d’une 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 l’application.

35

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 l’occasion d’approfondir 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 temoignel’interet des recruteurs rencontres lors de la Journee des Metiers. C’est un veritable beneficecar AngularJS n’est pas enseigne dans le tronc commun de l’ISTIA et constitue donc un plussur le CV. En ce qui concerne le client ASP.NET, cela a ete l’opportunite 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 l’etendue des possibilites offertes parles technologies du domaine du developpement web, et de decouvrir les interactions entre uneapplication web et du materiel electronique connecte. A l’heure ou l’on parle de plus en plusde l’Internet des objets, ce que nous avons vu au cours de ce projet nous a semble tout a faitpertinent en plus d’etre un excellent moyen de se former a ces technologies d’avenir.

6.3 Pistes d’amelioration

On peut imaginer des ameliorations sur 2 plans :Cote client, on pourrait par exemple ajouter une fonction de planification et de gestion de

taches. L’utilisateur pourrait ainsi creer des taches qui seraient executees a certains momentsde la journee.

Cote serveur, on pourrait ajouter des fonctions sur le modele de l’action 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 l’ordinateur, clic droit, puis « Proprietes ».

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

Etape 5 : Renseigner les parametres d’IP presents sur l’image.

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

Etape 7 : Une fenetre de commande s’ouvre, 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 l’architecture 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 l’architecture 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 l’application,ce qui est le cas lorsque l’on cree un nouveau projet ASP.NET MVC. Ensuite, il faut ra-jouter ceux correspondant au theme. L’archive recuperee sur le Github du theme (https://github.com/FezVrasta/bootstrap-material-design) contient de nombreux fichiers, maisseul quelques uns sont vraiment necessaires. Il s’agit 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 copierces fichiers dans les dossiers Content et Scripts de l’application, afin d’obtenir l’arborescencevisible 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 insere 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-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

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 d’unsysteme 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 l’utilisateur depuis un client, les envoie auxcartes Arduino puis renvoie les informations vers l’interface. Les commandes suivantes on eteintegrees : lire/ecrire une valeur sur une des pins d’un 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 Arduino’s 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