Année 2014-2015
Rapport de projet - EI5 AGI – parcours IAIE
Projet Application Web De Domotique Arduino
Projet réalisé par...
2
ISTIA l Institut des sciences et techniques de l'ingénieur d'Angers
www.istia.univ-angers.fr l istia@univ-angers.fr
62 ave...
4
Table des mati`eres
1 Introduction 8
1.1 Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
6 Conclusion 36
6.1 Apports professionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
6.2 Apports ...
Table des figures
1.1 Le montage ´electronique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.2 L’archit...
Chapitre 1
Introduction
1.1 Contexte
Depuis quelques ann´ees, les solutions de domotique se d´emocratisent de plus en plus...
Figure 1.1 – Le montage ´electronique
1.1.2 Communication clients-serveur
Afin de pouvoir g´erer `a distance les diff´erents...
Figure 1.2 – L’architecture du syst`eme domotique
1.2 Cahier des charges
Ce projet est consacr´e au d´eveloppement de deux...
– ´Ecriture de la valeur d’une pin (analogique et binaire)
– Clignotement d’une LED (sp´ecification du nombre de clignoteme...
Chapitre 2
Structure d’une application MVC
2.1 Principe
MVC est un patron de conception qui vise `a simplifier le d´evelopp...
Figure 2.1 – L’architecture MVC
13
Chapitre 3
Client AngularJS
3.1 Impl´ementation du MVC avec AngularJS
AngularJS est un framework JavaScript libre et open-...
[angularduino.js] d´esigne pour chaque URL demand´e, la page HTML et le contrˆoleur
associ´es.
– Les contrˆoleurs (en oran...
3.2 Les vues de l’application
[pagewelcome.html] la vue Welcome : cette vue est la page d’accueil de l’application. Elle
p...
[pagereadpin.html] la vue Readpin : cette vue permet `a l’utilisateur de lire la valeur d’une
pin, en s´electionnant un ou...
Figure 3.5 – la vue Temp
[pagewritepin.html] la vue Writepin : cette vue permet `a l’utilisateur d’´ecrire la valeur
d’une...
Figure 3.6 – la vue Writepin
[pagecommand.html] la vue Command : cette vue permet `a l’utilisateur d’envoyer une
commande ...
Figure 3.7 – la vue Command
[pagemesarduinos.html] la vue MyArduinos : cette vue permet `a l’utilisateur d’avoir une
simpl...
C’est un projet tr`es populaire sur la plate-forme de gestion de d´eveloppement GitHub, ce qui
nous a permis de profiter d’...
L’utilisation de PhoneGap n’est pas une solution adapt´ee `a tous les types d’applications
mobiles mais convient parfaitem...
1 $http ({ method: ’GET ’, maDonn´ee: $scope.maDonn´ee , url: h t t p :// mon.url ’})
2 .success(function (thisdata , stat...
Chapitre 4
Client ASP.NET
4.1 Impl´ementation du MVC avec ASP.NET
ASP.NET est une technologie de d´eveloppement web cr´e´e...
pour les 5 ”pages” de l’application, et portant le nom de l’action associ´ee, ainsi qu’un autre
appel´e ”Shared”. Dans ce ...
3 @{
4 Layout = null;
5 AjaxOptions ajaxOpts = new AjaxOptions
6 {
7 UpdateTargetId = "reponse",
8 HttpMethod = "post",
9 ...
incorrecte")]
9 public String ipServer { get; set; }
10
11 public String json { get; set; }
12
13 public IEnumerable <Vali...
4 // mise `a jour du mod`ele
5 TryUpdateModel(model , postedData);
6
7 Dao.Dao dao = new Dao.Dao();
8 dao.getArduinos(mode...
En effet, apr`es avoir r´ecup´er´e l’adresse IP donn´ee par l’utilisateur (l4), on l’enregistre dans
l’application (l7) afin...
Cette page permet `a l’utilisateur de connaitre la valeur actuelle de n’importe quelle pin de
chaque carte connect´ee. Il ...
Figure 4.8 – Erreur de saisie indiqu´ee par le serveur
4.2.4 Clignotement d’une LED
Figure 4.9 – Clignotement d’une LED
Ce...
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...
Dans la pratique, pour appliquer ce th`eme il suffit d’ajouter les classes CSS que l’on souhaite
aux ´el´ements HTML afin de ...
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
L’application AngularJS :
Afin de d´ecouvrir l...
Chapitre 6
Conclusion
`A la fin du projet, les deux clients ont ´et´e termin´es et sont compl`etement fonctionnels.
On peut...
Chapitre 7
Annexes
7.1 Guide utilisateur
´Etape 1 : Dans le panneau de configuration, cliquer sur « Centre R´eseau et parta...
38
7.2 Int´egration du th`eme Bootstrap Material Design
Cette annexe d´etaille la proc´edure `a suivre afin de rajouter le th`...
Puis dans _Layout.cshtml, on importe les scripts dans le <head> :
1 <script type="text/javascript" src="~/ Scripts/materia...
Chapitre 8
Bibliographie
Tutoriaux et composants AngularJS : http://getbootstrap.com/
Tutoriel AngularJS / Spring 4 : http...
Projet r´ealis´e par : Nicolas ROULLEAU et Adrien LIOTARD
Projet encadr´e par : Serge TAHE
R´esum´e
Ce rapport relate le d...
Prochain SlideShare
Chargement dans…5
×

Rapport Projet Application Web De Domotique Arduino - Liotard Roulleau

5 054 vues

Publié le

Rapport du projet Application Web De Domotique Arduino réalisé par Adrien Liotard et Nicolas Roulleau dans le cadre de leur dernière année de cycle ingénieur à l'ISTIA (49).

Publié dans : Technologie
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 054
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
359
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rapport Projet Application Web De Domotique Arduino - Liotard Roulleau

  1. 1. 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
  2. 2. 2
  3. 3. ISTIA l Institut des sciences et techniques de l'ingénieur d'Angers www.istia.univ-angers.fr l istia@univ-angers.fr 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. 4. 4
  5. 5. Table des mati`eres 1 Introduction 8 1.1 Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 1.1.1 Syst`eme domotique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 1.1.2 Communication clients-serveur . . . . . . . . . . . . . . . . . . . . . . . . 9 1.2 Cahier des charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 1.2.1 Les diff´erentes actions possibles des clients . . . . . . . . . . . . . . . . . 10 1.2.2 Commande de plusieurs cartes en simultan´e . . . . . . . . . . . . . . . . 11 2 Structure d’une application MVC 12 2.1 Principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.1.1 Le rˆole de chaque partie . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.1.2 Les flux de donn´ees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3 Client AngularJS 14 3.1 Impl´ementation du MVC avec AngularJS . . . . . . . . . . . . . . . . . . . . . . 14 3.2 Les vues de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 3.3 Design : Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.4 Version mobile avec PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.5 Difficult´es rencontr´ees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 4 Client ASP.NET 24 4.1 Impl´ementation du MVC avec ASP.NET . . . . . . . . . . . . . . . . . . . . . . 24 4.1.1 La partie pr´esentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.1.2 Le back-office . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.2 Les vues de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.2.1 La page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.2.2 Lecture de l’´etat d’une pin . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.2.3 ´Ecriture sur une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4.2.4 Clignotement d’une LED . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 4.2.5 Envoi d’une commande au format JSON . . . . . . . . . . . . . . . . . . 32 4.3 Design : Bootstrap + th`eme Material Design . . . . . . . . . . . . . . . . . . . . 32 4.4 Difficult´es rencontr´ees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5 Gestion de projet 34 5.1 Gantt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 5.2 Diagrammes de r´epartition du temps par tˆaches . . . . . . . . . . . . . . . . . . 35 5.3 M´ethodes de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 5
  6. 6. 6 Conclusion 36 6.1 Apports professionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.2 Apports personnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 6.3 Pistes d’am´elioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 7 Annexes 37 7.1 Guide utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 7.2 Int´egration du th`eme Bootstrap Material Design . . . . . . . . . . . . . . . . . . 39 8 Bibliographie 41 6
  7. 7. Table des figures 1.1 Le montage ´electronique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.2 L’architecture du syst`eme domotique . . . . . . . . . . . . . . . . . . . . . . . . 10 2.1 L’architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.1 La structure de l’application AngularJS . . . . . . . . . . . . . . . . . . . . . . . 14 3.2 la vue Welcome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 3.3 la vue Blink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 3.4 la vue Readpin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.5 la vue Temp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 3.6 la vue Writepin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3.7 la vue Command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.8 la vue MyArduinos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.9 message d’information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.10 barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.1 La structure de l’application ASP.NET MVC . . . . . . . . . . . . . . . . . . . . 24 4.2 La page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4.3 Aucune donn´ee entr´ee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 4.4 Chaine rentr´ee non conforme au format d’une adresse IP . . . . . . . . . . . . . 27 4.5 La r´eponse du serveur est apparue . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.6 Lecture de l’´etat d’une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.7 ´Ecriture sur une pin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4.8 Erreur de saisie indiqu´ee par le serveur . . . . . . . . . . . . . . . . . . . . . . . 31 4.9 Clignotement d’une LED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 4.10 Envoi d’une commande au format JSON . . . . . . . . . . . . . . . . . . . . . . 32 4.11 L’apparence de d´epart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 7.1 Le contenu des dossiers Content et Scripts . . . . . . . . . . . . . . . . . . . . . 39 7
  8. 8. Chapitre 1 Introduction 1.1 Contexte Depuis quelques ann´ees, les solutions de domotique se d´emocratisent de plus en plus. En effet, `a une ´epoque o`u il devient important de maitriser sa consommation ´energ´etique et o`u presque tout le monde dispose d’un smartphone, il est tentant de pouvoir commander ses ´equipements domestiques (´eclairage, chauffage, stores, etc) et de consulter l’´etat de l’habitation (temp´erature, humidit´e, etc) via un ordinateur ou un appareil mobile. Mˆeme s’il existe bien sˆur d´ej`a des solutions commerciales ”cl´es en main”, l’objectif de ce projet est de cr´eer un syst`eme de ce type `a partir de z´ero. 1.1.1 Syst`eme domotique En principe, un syst`eme domotique est compos´e d’actionneurs et de capteurs reli´es `a un r´e- seau, afin de permettre leur gestion via une ou plusieurs interfaces homme/machine. En ce qui concerne la partie mat´erielle, nous avons utilis´e des cartes Arduino, tr`es connues chez les brico- leurs f´erus d’´electronique pour leur grande polyvalence et leur faible coˆut. L’utilisation de ces cartes rend le syst`eme extrˆemement modulable. Ainsi mˆeme si dans notre cas les ”´equipements” connect´es se limitent `a des LED et des capteurs de temp´erature, il serait ais´e de rajouter par la suite de nouveaux ´el´ements : autres capteurs, servomoteurs, relais ... Pour tester le syst`eme, nous ´etions ´equip´es de deux cartes Arduino Uno, chacune pourvue d’un shield Ethernet sur lequel est fix´e une LED ainsi qu’un capteur de temp´erature (voir figure ci-dessous). 8
  9. 9. Figure 1.1 – Le montage ´electronique 1.1.2 Communication clients-serveur Afin de pouvoir g´erer `a distance les diff´erents cartes Arduino composant la partie op´erative du syst`eme, ces derni`eres sont toutes reli´ees en Ethernet au mˆeme poste informatique, qui fait donc office de serveur. C’est `a ce serveur que viendront se connecter les utilisateurs, grˆace `a des applications sp´ecialement ´ecrites pour cette occasion et compatibles aussi bien avec un ordinateur classique qu’avec un smartphone ou une tablette. 9
  10. 10. Figure 1.2 – L’architecture du syst`eme domotique 1.2 Cahier des charges Ce projet est consacr´e au d´eveloppement de deux clients. Le premier bas´e 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-Contrˆoleur (MVC). 1.2.1 Les diff´erentes actions possibles des clients Chaque client se comporte comme un site web comportant un menu permettant d’acc´eder `a diff´erents formulaires. Chacun de ces formulaires est d´edi´e `a une commande particuli`ere, qui sera ensuite envoy´ee au serveur avec une requˆete HTTP. `A partir des donn´ees contenues dans la requˆete, le serveur enverra la commande correspondante vers les cartes Arduino connect´ees, qui `a leur tour ex´ecuteront la commande. Au minimum, l’interface d’un client doit comporter les formulaires suivants : – Connexion au serveur g´erant les cartes Arduino – Lecture de la valeur d’une pin (analogique et binaire) 10
  11. 11. – ´Ecriture de la valeur d’une pin (analogique et binaire) – Clignotement d’une LED (sp´ecification 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 requˆetes pr´ec´edentes 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 d’une pin, – cl (clignoter) pour faire clignoter une led ; – pa : les param`etres de l’action. Ils d´ependent de l’action. 1.2.2 Commande de plusieurs cartes en simultan´e Chaque formulaire doit afficher une liste affichant toutes les cartes Arduino disponibles, afin que l’utilisateur puisse choisir la ou les cartes sur lesquelles il souhaite envoyer la commande. Lorsque plusieurs cartes sont s´electionn´ees, elles ex´ecutent l’action demand´ee en simultan´e. Le serveur retournant une chaine JSON apr`es chaque requˆete, il faut ´egalement afficher cette r´eponse dans le formulaire, sans avoir `a recharger la page. 11
  12. 12. Chapitre 2 Structure d’une application MVC 2.1 Principe MVC est un patron de conception qui vise `a simplifier le d´eveloppement et la maintenance d’une application avec interface graphique. En effet, ce cadre normalis´e permet de bien s´eparer la gestion des donn´ees, la pr´esentation de l’interface et les traitements `a effectuer. Ainsi par exemple, un d´eveloppeur sp´ecialis´e dans le Web Design pourra s’occuper de la mise en page de l’application sans toucher aux fichiers correspondant aux traitements, r´ealis´es par un autre d´eveloppeur. 2.1.1 Le rˆole de chaque partie Le Mod`ele Le Mod`ele est charg´e du traitement des donn´ees de l’application. `A cet effet, il contient plusieurs m´ethodes permettant de r´ecup´erer et de modifier la valeur de chaque variable associ´ee `a une donn´ee. Si l’application utilise une base de donn´ees (ce qui n’est pas le cas ici), c’est ´egalement le rˆole du Mod`ele de g´erer les acc`es vers la base (insertion, suppression, mise `a jour de champs). La Vue La Vue correspond sp´ecifiquement `a ce qui est affich´e par le navigateur web de l’utilisateur. Cette page est dynamique, c’est-`a-dire que la valeur de certaines des informations affich´ees est obtenue `a partir des donn´ees du mod`ele. Dans la plupart des cas, une vue contient ´egalement un formulaire permettant `a l’utilisateur de rentrer des informations grˆace `a divers contrˆoles graphiques : champs de textes, cases `a cocher, sliders, etc. Le Contrˆoleur Le Contrˆoleur r´eagit aux ´ev`enements d´eclench´es par la vue (typiquement le clic sur un lien ou la validation d’un formulaire par exemple). Il peut ensuite mettre `a jour les donn´ees du Mod`ele avec les informations entr´ees 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 contrˆoleur est synth´etis´e dans le diagramme ci-dessous : 12
  13. 13. Figure 2.1 – L’architecture MVC 13
  14. 14. Chapitre 3 Client AngularJS 3.1 Impl´ementation du MVC avec AngularJS AngularJS est un framework JavaScript libre et open-source d´evelopp´e par Google. Celui-ci est fond´e sur l’extension du langage HTML par de nouveaux tags et attributs qui repr´esente alors la partie vue du mod`ele MVC. Les mod`eles sont appel´es « scopes » et les contrˆoleurs permettent de d´efinir des fonctions en JavaScript. Pr´ec´edemment, nous avons introduit le concept de mod`ele MVC. Le sch´ema ci-dessous illustre les interactions entres les diff´erents composants de l’application finale AngularJS : Figure 3.1 – La structure de l’application AngularJS Dans ce sch´ema, on distinguera : – Le module [angularduino.js] (en rouge) Celui-ci d´efinit les modules Angular utilis´es par l’application et s’occupe de la configura- tion des routes : grˆace au module [ngRoute] utilis´e pour le routage des URL, le module 14
  15. 15. [angularduino.js] d´esigne pour chaque URL demand´e, la page HTML et le contrˆoleur associ´es. – Les contrˆoleurs (en orange) Un contrˆoleur principal, [mainController.js], constitu´e des scopes enfants, des variables globales ainsi que des fonctions g´erant l’appel des diff´erentes pages. On remarquera que les mod`eles des vues sont d´eclar´es dans ce contrˆoleur. Un contrˆoleur 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] r´ef´erence les fichiers du projet et appelle le menu ainsi que la vue d’accueil. [menu.html] contient le code HTML du menu qui permet de naviguer entre les diff´erentes fonctions de l’application. Enfin, les pages [pageblinkled.html], [pagecommand.html], [pagemesarduinos.html], [pa- gereadpin.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 d´eclaration des variables du mod`ele de la vue, l’initialisation des composants utilis´es (UI Grid, selectpicker, n3linechart), la fonction envoyant la requˆete HTTP `a l’Arduino et r´ecup´erant la r´eponse du serveur, ainsi que certaines sp´ecifications li´ees `a la page (gestion des Arduino disponibles, gestion des menus, astuce). De l’utilisateur au serveur, explication d’une requˆete : Disons que l’utilisateur souhaite faire clignoter une LED. Apr`es avoir affich´e la vue en question, il s´electionne un ou plusieurs Arduino, remplit le formulaire et clique sur le bouton d’ex´ecution. Voici le code HTML du bou- ton d’ex´ecution contenu dans [pageblinkled.html] : <a href=””ng-click=”scopeblinkled.Blink()” type=”button”class=”btn btn-primary”>pageblinkled.actionlabel</a> Regardons de plus pr`es l’argument « ng-click ». Au clic, la page [pageblinkled.html] appelle la fonction Javascript « Blink() » contenu dans le contrˆoleur [pageblinkledController.js] en passant par le mod`ele de la vue « scopeblinkled ». Le contrˆoleur ex´ecute alors la fonction Javascript « Blink() » qui fera une requˆete http en GET au serveur web. 15
  16. 16. 3.2 Les vues de l’application [pagewelcome.html] la vue Welcome : cette vue est la page d’accueil de l’application. Elle permet 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 une LED en s´electionnant un ou plusieurs Arduino, un num´ero de pin, une dur´ee et un nombre de clignotement. Figure 3.3 – la vue Blink 16
  17. 17. [pagereadpin.html] la vue Readpin : cette vue permet `a l’utilisateur de lire la valeur d’une pin, en s´electionnant 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 temp´erature sur un graphe, en s´electionnant jusqu’`a deux Arduino et la valeur d’une pin analogique. 17
  18. 18. Figure 3.5 – la vue Temp [pagewritepin.html] la vue Writepin : cette vue permet `a l’utilisateur d’´ecrire la valeur d’une pin, en s´electionnant un ou plusieurs Arduino, un mode, une pin et la valeur `a ´ecrire. 18
  19. 19. Figure 3.6 – la vue Writepin [pagecommand.html] la vue Command : cette vue permet `a l’utilisateur d’envoyer une commande JSON, en s´electionnant un ou plusieurs Arduino et en saisissant une commande sous forme de chaine JSON. 19
  20. 20. Figure 3.7 – la vue Command [pagemesarduinos.html] la vue MyArduinos : cette vue permet `a l’utilisateur d’avoir une simple liste des Arduino connect´es. Figure 3.8 – la vue MyArduinos 3.3 Design : Bootstrap Twitter Bootstrap est une collection d’outils utile `a la cr´eation de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres ´el´ements interactifs, ainsi que des extensions JavaScript en option. 20
  21. 21. C’est un projet tr`es populaire sur la plate-forme de gestion de d´eveloppement GitHub, ce qui nous a permis de profiter d’une part de l’aide de la communaut´e, et d’autre part des nombreuses fonctionnalit´es d´evelopp´ees par ses membres. Les ´el´ements HTML sont stylis´es grˆace `a un syst`eme 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 cr´eer des applications mobiles multi-plateforme avec les technologies traditionnelles du web : HTML, CSS, JavaScript. Les applications mobiles cr´e´ees `a l’aide des technologies web sont appel´ees applications hybrides c’est `a dire m´elangeant web et technologies natives. Le code HTML, CSS et JavaScript reste tel quel et l’application PhoneGap utilise le navigateur web de l’appareil (webview) pour l’interpr´eter. Apr`es quelques modifications du code source et quelques minutes d’attente, PhoneGap nous g´en`ere un fichier applicatif Android (.apk). Voici un aper¸cu de la version mobile : 21
  22. 22. L’utilisation de PhoneGap n’est pas une solution adapt´ee `a tous les types d’applications mobiles mais convient parfaitement aux applications simples dont le coˆut d’un d´eveloppement natif est prohibitif. 3.5 Difficult´es rencontr´ees Lors de d´eveloppement du client AngularJS, nous avons rencontr´es quelques difficult´es et notamment : La gestion des vues et de leur mod`ele : Outre l’organisation de l’application selon les standards de programmation AngularJS, il nous a fallu analyser l’enchainement des ´ev`enements. En effet, certains composants comme l’UI Grid ne mettent `a jour leurs donn´ees qu’une seule fois au chargement du mod`ele de la vue. Il est donc n´ecessaire de leur attribuer leurs donn´ees `a ce moment-l`a. L’utilisation d’une librairie en version bˆeta : UI Grid est un tableau AngularJs permet- tant de manipuler, de trier et de filtrer des donn´ees. Nous l’avons utilis´e pour lister les Arduino disponibles. Au cours du d´eveloppement, ce composant a ´et´e mise `a jour dans une nouvelle version bˆeta. L’impl´ementation de ce composant s’est av´er´e ˆetre d´elicate ´etant donn´e la taille restreinte de la communaut´e de bˆeta-testeurs. L’utilisation de variables externes dans la m´ethode http : Afin d’afficher le nom de l’Arduino concern´e par la r´eponse du serveur apr`es une requˆete http, nous avons exploit´e les param`etres de la m´ethode http. Pour utiliser des donn´ees du mod`ele dans la fonction ex´ecut´ee lors de l’´ev`enement .success de la m´ethode http, nous avons dˆu passer en param`etre les donn´ees voulues, sans passer par le param`etre URL : 22
  23. 23. 1 $http ({ method: ’GET ’, maDonn´ee: $scope.maDonn´ee , url: h t t p :// mon.url ’}) 2 .success(function (thisdata , status , headers , config) {} 23
  24. 24. Chapitre 4 Client ASP.NET 4.1 Impl´ementation du MVC avec ASP.NET ASP.NET est une technologie de d´eveloppement web cr´e´ee par Microsoft, et qui permet de concevoir des applications web. Puisque nous avons d´ecid´e de d´evelopper nos clients avec une structure MVC, nous allons donc employer la version ASP.NET MVC. Le langage choisi pour d´evelopper la logique de l’application est le C#. Les vues sont quant `a elles au format CSHTML, qui est un des moteurs de rendu HTML utilis´e par ASP.NET. Plusieurs scripts en JavaScript sont ´egalement pr´esents afin de rendre l’application dynamique, et notamment pour g´erer l’aspect asynchrone des interactions avec le serveur (requˆetes et r´eponses AJAX). La structure g´en´erale de l’application est sch´ematis´ee dans le diagramme ci-dessous. Elle est d´etaill´ee par la suite. Figure 4.1 – La structure de l’application ASP.NET MVC 4.1.1 La partie pr´esentation Tous les fichiers correspondant `a l’interface graphique de l’application, autrement dit les vues, sont regroup´es dans le dossier ”Views”. Ce dernier est constitu´e de 6 sous-dossiers : 5 24
  25. 25. pour les 5 ”pages” de l’application, et portant le nom de l’action associ´ee, ainsi qu’un autre appel´e ”Shared”. Dans ce dossier on trouve un fichier commun `a toutes les vues. ” Layout”, est comme son nom l’indique, charg´e de l’agencement g´en´eral de la page affich´ee par le navigateur. C’est en effet dans ce fichier que sont g´er´es les imports des diff´erents scripts n´ecessaires au bon fonctionnement de l’application, ainsi que des feuilles de styles servant `a param´etrer l’apparence visuelle du programme. Le contenu des vues est encapsul´e dans le layout grˆace `a la balise @RenderBody(). Le layout contient ´egalement le menu de l’interface, qui consiste en une barre de quatre boutons renvoyant vers chacune des actions possibles. Pour chacune des autres vues, 3 fichiers sont pr´esents : Index.cshtml qui est charg´e par le contrˆoleur et qui encapsule le reste de la vue. [nom de l’action].cshtml correspond au code du formulaire de l’action et enfin Reponse.cshtml contient le code de la <div> permettant d’afficher la r´eponse du serveur. 4.1.2 Le back-office En plus des contrˆoleurs et des mod`eles, facilement identifiables car ils portent le nom de l’action associ´ee, il faut noter l’importance de deux fichiers. Le script ASPDuino.js contient toutes les fonctions permettant les appels asynchrones vers les contrˆoleurs. Le fichier Dao.cs contient quant `a lui toutes les fonction effectuant les requˆetes HTTP vers le serveur. Ce sont ces fonctions qui sont appel´ees par les diff´erents contrˆoleurs. 4.2 Les vues de l’application Techniquement, ce client domotique est compos´e de 5 vues : une pour chaque formulaire indiqu´e dans le cahier des charges. La gestion des vues ´etant similaire d’une action `a l’autre, seule la premi`ere sera compl`etement d´etaill´ee, les autres ´etant d´ecrites bri`evement 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 r´esume `a un unique champ de texte permettant `a l’utilisateur de rentrer l’adresse IP du serveur sur lequel sont connect´ees 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
  26. 26. 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 r´eponse du serveur --> 33 <div id="reponse" /> 34 } Ce qu’il faut retenir de ce code, c’est que le formulaire est en fait compos´e d’un tableau (l17 `a l27) d’une 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 d’erreur qui s’affiche si la validation du texte tap´e ´echoue (l25). On remarque que ces trois champs font appel au param`etre m.ipServer, qui fait r´ef´erence `a la propri´et´e ”ipServer” du mod`ele associ´e. Ce mod`ele est d´eclar´e l1, il s’agit 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´ees 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
  27. 27. 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 > r´esultats = new List <ValidationResult >(); 16 // on rend la liste des erreurs 17 return r´esultats; 18 } 19 } 20 } On retrouve l9 la d´eclaration de la propri´et´e ipServer. Cette d´eclaration est pr´ec´ed´ee de trois attributs : – Display (l6) indique le texte du label affich´e `a cot´e du textbox. – Required (l7) donne un message d’erreur `a afficher si on valide le formulaire sans rien avoir entr´e. – RegularExpression (l8) donne un autre message d’erreur si le texte tap´e n’est pas conforme `a l’expression r´eguli`ere indiqu´ee (dans ce cas il s’agit du regex d’une adresse IP). On obtient donc d´ej`a les deux comportements suivant de la page en cas de saisie incorrecte : Figure 4.3 – Aucune donn´ee entr´ee Figure 4.4 – Chaine rentr´ee non conforme au format d’une adresse IP Maintenant regardons ce qui se passe dans le cas normal, o`u l’adresse IP donn´ee est correcte. La validation du formulaire va d´eclencher l’action ”GetArduinos” du contrˆoleur, reproduite ci- dessous : 1 [HttpPost] 2 public PartialViewResult GetArduinos(ConfigModel model , FormCollection postedData , ApplicationModel applicationData ) 3 { 27
  28. 28. 4 // mise `a jour du mod`ele 5 TryUpdateModel(model , postedData); 6 7 Dao.Dao dao = new Dao.Dao(); 8 dao.getArduinos(model , applicationData ); 9 10 return PartialView("Reponse", model); 11 } Apr`es avoir mis `a jour la valeur de ipServer dans le mod`ele `a partir de la chaine entr´ee dans la vue (l5), on fait un appel `a la couche DAO en lui passant les donn´ees du mod`ele ainsi que les donn´ees de port´ee Application (l8). On retourne ensuite le fragment de vue ”Reponse” ainsi que le mod`ele associ´e (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´eponse du serveur </div > 5 <div class="panel -body"> 6 @Model.json 7 </div > 8 </div > On voit l6 la pr´esence de @Model.json, qui contient maintenant la r´eponse du serveur. C’est la classe DAO qui s’est charg´ee de cet enregistrement, comme on peut le voir en observant son code : 1 public void getArduinos(ConfigModel model , ApplicationModel applicationData) 2 { 3 // on r´ecup`ere les infos du mod`ele 4 string ipServer = model.ipServer; 5 6 //on enregistre l’ip dans l’application 7 applicationData .ipServer = ipServer; 8 9 // cr´eation d’un WebClient 10 WebClient webClient = new WebClient (); 11 // on pr´ecise 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´eponse = string.Empty; 16 try 17 { 18 // on envoie la requ^ete et on lit la r´eponse 19 r´eponse = webClient.DownloadString(uriString); 20 model.json = r´eponse; 21 applicationData.json = r´eponse; 22 } 23 catch (WebException ex) 24 { 25 model.json = "Error : " + ex.Message; 26 } 27 } 28
  29. 29. En effet, apr`es avoir r´ecup´er´e l’adresse IP donn´ee par l’utilisateur (l4), on l’enregistre dans l’application (l7) afin de pouvoir y acc´eder depuis les autres vues. Ensuite on construit la requˆete HTTP (l14), puis on l’envoie au serveur (l19). On peut maintenant enregistrer la r´eponse obtenue dans le mod`ele (l20). Dans ce cas particulier on copie ´egalement cette r´eponse dans l’application (l21) car elle contient la liste des cartes Arduino qui sera propos´ee dans les autres vues. Ce ne sera pas le cas pour les r´eponses re¸cues dans les autres vues. `A la suite de ces diff´erentes ´etapes, la page affiche maintenant la r´eponse du serveur : Figure 4.5 – La r´eponse 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
  30. 30. Cette page permet `a l’utilisateur de connaitre la valeur actuelle de n’importe quelle pin de chaque carte connect´ee. Il s´electionne pour cela la ou les cartes d´esir´ees dans la liste, ensuite il choisi le num´ero de pin qui l’int´eresse dans la liste d´eroulante, et enfin il pr´ecise le mode de lecture. En pratique, le mode analogique sera utile si le composant branch´e sur la pin renvoie une valeur proportionnelle `a son ´etat, par exemple une sonde de temp´erature ou un potentiom`etre. Le mode binaire est quand `a lui d´edi´e au composants bistables, comme un interrupteur par exemple. On remarque que la r´eponse du serveur est compos´ee de plusieurs donn´ees, celle qui nous int´eresse ici est la derni`ere : ”pin0 :317”indique que la valeur de la pin n˚0 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 pr´ec´edent, `a ceci pr`es qu’ici l’utilisateur sp´ecifie la valeur qu’il souhaite ´ecrire sur la pin des cartes s´electionn´ees. Dans cet exemple, si une LED est branch´ee entre la pin GND et la pin 8, l’envoi de cette commande aura pour effet de l’allumer. On peut noter que si la valeur sp´ecifi´ee n’est pas conforme (par exemple une valeur binaire diff´erente de 0 ou 1), la requˆete sera bien trait´ee par le serveur mais celui-ci renverra un message d’erreur dans sa r´eponse (voir ci-dessous). 30
  31. 31. Figure 4.8 – Erreur de saisie indiqu´ee par le serveur 4.2.4 Clignotement d’une LED Figure 4.9 – Clignotement d’une LED Cette action suppose qu’une LED est pr´esente sur la pin sp´ecifi´ee. Elle va alors clignoter autant de fois qu’indiqu´e dans ”Number” et avec l’intervalle donn´e pour ”Duration”. Dans cet exemple elle va donc s’allumer bri`evement 10 fois, avec un d´elai de 100ms entre chaque impulsion. Ici, la r´eponse du serveur sert juste `a indiquer qu’aucune erreur ne s’est produite lors de l’ex´ecution de la commande. 31
  32. 32. 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 possibilit´e `a l’utilisateur d’envoyer la commande de son choix au format JSON, comme indiqu´e dans le cahier des charges. La syntaxe de ces commandes n’´etant pas ´evidente, un clic sur le bouton ”Need Help ?” affiche un exemple de commande valide (en l’occurrence 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 d´eveloppement de ce client, nous avions conserv´e l’apparence de base fournie par Visual Studio pour une une application ASP.NET. Or cette derni`ere s’av`ere assez aust`ere et tr`es fig´ee. Figure 4.11 – L’apparence de d´epart Afin de tirer pleinement partie des possibilit´es offertes par Bootstrap (un framework CSS responsive cr´e´e par Twitter et tr`es r´epandu), nous avons d´ecid´e de lui ajouter un th`eme donnant aux ´el´ements de l’interface un style ”Material Design”. Material Design est le nom de la charte graphique que Google a r´ecemment mis en place afin d’uniformiser l’apparence des applications accompagnant la derni`ere version de son syst`eme d’exploitation mobile, Android. Ses points forts sont une bonne visibilit´e des contrˆoles grˆace `a des couleurs vives, ainsi que de nombreuses animations tr`es fluides qui visent `a am´eliorer l’exp´erience utilisateur. 32
  33. 33. Dans la pratique, pour appliquer ce th`eme il suffit d’ajouter les classes CSS que l’on souhaite aux ´el´ements HTML afin de changer leur apparence. Ainsi par exemple le code suivant permet d’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" /> L`a o`u les choses se compliquent un peu, c’est lorsque l’on souhaite appliquer une classe CSS `a un ´el´ement qui n’est pas cod´e en dur, comme c’est le cas pour les ´el´ements g´en´er´es `a partir des donn´ees d’un mod`ele. Au final la solution est tr`es simple : il suffit d’ajouter comme param`etre new { @class = ”nom de la classe” } lors de la d´eclaration d’un ´el´ement de formulaire. Ci-dessus un exemple avec une liste d´eroulante : 1 @Html.DropDownListFor(m => m.DropDownListField , new SelectList(@Model. DropDownListFieldItems , "Value", "Label"), new { @class = "form -control" }) 4.4 Difficult´es rencontr´ees Le d´eveloppement de ce client n’a globalement pas pos´e de probl`emes. Au final, le dernier point rest´e sans solution concerne la manipulation du JavaScript g´erant la visibilit´e des ´el´ements d’une vue via un contrˆoleur. Ce probl`eme s’est pr´esent´e lorsqu’il a ´et´e question de masquer le menu de l’application lorsque l’adresse IP n’avait pas ´et´e valid´ee. Deux approches on ´et´e tent´ees : communication entre le code ASP.NET et le JavaScript au moyen de variables globales ; et solution orient´ee vue, en r´eagissant `a certains ´ev`enements (apparition de la <div> contenant la r´eponse du serveur par exemple). Malheureusement aucune m´ethode satisfaisante n’a ´et´e trouv´ee, ce qui peut donc causer des erreurs si l’utilisateur clique sur un des boutons du menu avant d’avoir enregistr´e l’IP du serveur. 33
  34. 34. Chapitre 5 Gestion de projet 5.1 Gantt 34
  35. 35. 5.2 Diagrammes de r´epartition du temps par tˆaches 5.3 M´ethodes de travail L’application AngularJS : Afin de d´ecouvrir le monde d’AngularJS et d’en comprendre les ficelles, nous avons dans un premier temps suivi les tutoriaux pr´esents sur le site AngularJS https://angularjs.org/ (The Basics, Add Some Control,) Lorsqu’il a fallu structurer l’application suivant le mod`ele MVC, nous avons suivi la trame du TP AngularJS de Serge Tah´e http://tahe.developpez.com/angularjs-spring4/ afin de comprendre les interactions entre les diff´erents ´el´ements. Quant aux composants AngularJS, la plupart disposent d’un site d´edi´e avec des exemples d’application. Client ASP.NET : La construction du projet `a ´et´e faite en suivant le cours ASP.NET de M.TAHE. Les quelques d´etails qui n’´etaient pas vus dans ce cours (cr´eation d’une requˆete HTTP, s´erialisation d’une chaine JSON, etc) se trouvent facilement dans la documentation en ligne de Microsoft, ainsi que sur des forums d’entraide comme Stack Overflow. Globalement, la progression s’est faite dans cet ordre : cr´eation d’une premi`ere vue simplifi´ee, puis cr´eation des autres vues sur le mˆeme mod`ele, puis am´elioration de la premi`ere vue, et enfin r´epercussion de ces am´eliorations sur le reste de l’application. 35
  36. 36. Chapitre 6 Conclusion `A la fin du projet, les deux clients ont ´et´e termin´es et sont compl`etement fonctionnels. On peut en fait parler de trois clients, puisque grˆace `a PhoneGap nous avons pu cr´eer une application native Android directement `a partir des sources du client web AngularJS, qui a ´et´e test´e avec succ`es sur une tablette communiquant avec le serveur via un r´eseau wifi local. 6.1 Apports professionnels Ce projet a ´et´e l’occasion d’approfondir nos connaissances en programmation web. En effet, le client AngularJS nous a permis de d´ecouvrir ce framework JavaScript MVC tr`es puissant, qui est de plus tr`es appr´eci´e dans les Entreprises de Services Num´eriques, comme en t´emoigne l’int´erˆet des recruteurs rencontr´es lors de la Journ´ee des M´etiers. C’est un v´eritable b´en´efice car AngularJS n’est pas enseign´e dans le tronc commun de l’ISTIA et constitue donc un plus sur le CV. En ce qui concerne le client ASP.NET, cela a ´et´e l’opportunit´e de renforcer les connaissances vues en TD, tout en explorant la notion de communication par requˆetes HTTP, diff´erent des appels vers une base de donn´ees vus en cours. 6.2 Apports personnels Sur le plan personnel, ce projet nous a permis de saisir l’´etendue des possibilit´es offertes par les technologies du domaine du d´eveloppement web, et de d´ecouvrir les interactions entre une application web et du mat´eriel ´electronique connect´e. `A l’heure o`u l’on parle de plus en plus de l’Internet des objets, ce que nous avons vu au cours de ce projet nous a sembl´e tout `a fait pertinent en plus d’ˆetre un excellent moyen de se former `a ces technologies d’avenir. 6.3 Pistes d’am´elioration On peut imaginer des am´eliorations sur 2 plans : Cˆot´e client, on pourrait par exemple ajouter une fonction de planification et de gestion de tˆaches. L’utilisateur pourrait ainsi cr´eer des tˆaches qui seraient ex´ecut´ees `a certains moments de la journ´ee. Cot´e serveur, on pourrait ajouter des fonctions sur le mod`ele de l’action Blink, adapt´ees `a des capteurs ou actionneurs particuliers. On pourrait notamment exploiter les sorties digitales PWM pour contrˆoler des moteurs. 36
  37. 37. Chapitre 7 Annexes 7.1 Guide utilisateur ´Etape 1 : Dans le panneau de configuration, cliquer sur « Centre R´eseau et partage ». ´Etape 2 : Puis sur la gauche, « Modifier les param`etres de la carte ». ´Etape 3 : Choisir la carte r´eseau de l’ordinateur, clic droit, puis « Propri´et´es ». ´Etape 4 : Cliquer sur le protocole IPV4, puis « Propri´et´es ». ´Etape 5 : Renseigner les param`etres d’IP pr´esents sur l’image. ´Etape 6 : D´emarrer le serveur en ex´ecutant le fichier server.bat ´Etape 7 : Une fenˆetre de commande s’ouvre, attendre que le serveur soit lanc´e. ´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 Domotique ASP.NET ». ´Etape 9b : Voici l’architecture du projet. Un simple « Ctrl+F5 » ex´ecutera le projet. 37
  38. 38. 38
  39. 39. 7.2 Int´egration du th`eme Bootstrap Material Design Cette annexe d´etaille la proc´edure `a suivre afin de rajouter le th`eme Material Design au projet Visual Studio. Ce th`eme n´ecessite que Bootstrap soit d´ej`a pr´esent dans l’application, ce qui est le cas lorsque l’on cr´ee un nouveau projet ASP.NET MVC. Ensuite, il faut ra- jouter ceux correspondant au th`eme. L’archive r´ecup´er´ee sur le Github du th`eme (https: //github.com/FezVrasta/bootstrap-material-design) contient de nombreux fichiers, mais seul quelques uns sont vraiment n´ecessaires. Il s’agit des fichiers JavaScript material.min.js et ripples.min.js pr´esents dans dist/js, ainsi que des fichiers CSS material.min.css, material-wfont.min.css et ripples.min.css trouv´es dans dist/css. Il faut ensuite copier ces fichiers dans les dossiers Content et Scripts de l’application, afin d’obtenir l’arborescence 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
  40. 40. 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
  41. 41. 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/ Th`eme 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
  42. 42. Projet r´ealis´e par : Nicolas ROULLEAU et Adrien LIOTARD Projet encadr´e par : Serge TAHE R´esum´e Ce rapport relate le d´eveloppement de deux interfaces web destin´ees au contrˆole d’un syst`eme domotique fabriqu´e sur mesure : le premier ´ecrit en Javascript avec le framework AngularJS, le second utilisant Microsoft ASP.NET MVC. Pour nos tests de d´eveloppement, ce syst`eme ´etait compos´e de deux cartes Arduino (des cartes ´electroniques polyvalentes et bon march´e utilis´ees par les bricoleurs) pourvues de DEL et de capteurs de temp´erature. Ces cartes sont raccord´ees aux interfaces `a travers un r´eseau local, dans lequel un ordinateur joue le rˆole du serveur qui re¸coit les commandes de l’utilisateur depuis un client, les envoie aux cartes Arduino puis renvoie les informations vers l’interface. Les commandes suivantes on ´et´e int´egr´ees : lire/´ecrire une valeur sur une des pins d’un Arduino, faire clignoter une DEL avec un nombre de pulsations et un intervalle donn´e, et envoyer des commandes au format JSON. Comme ces fonctions on ´et´e test´ees avec succ`es, le syst`eme peut maintenant ˆetre am´elior´e pour ˆetre utilis´e comme un vrai syst`eme domotique. Mots cl´es : interfaces web, domotique, cartes Arduino, r´eseau 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 inter- faces 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 Arduino’s 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

×