TP HTML5 / Nouveaux moyens d'interaction

Introduction

Dans ce TP nous allons découvrir des applications de HTML5 mettant en oeuvre des devices mobiles (tablettes, smartphones) et des ordinateurs. Certains exercices montreront comment dans une même application on peut faire coopérer plusieurs tablettes avec un PC via les websockets de HTML5.

Dans un premier temps nous ferons des exercices ne mettant pas en oeuvre de serveur web ou de serveur de websockets, vous découvrirez au travers de tutoriaux les APIs JavaScript de HTML5 d'orientation et de géolocalisation. Dans un second temps vous intallerez un serveur NodeJS sur chacune de vos machines et interagirez via des websockets entre une tablette/smartphone et un le PC sur lequel le serveur tourne. Enfin, vous développerez une petite application multi-participants.

L'API d'orientation de HTML5

Travail à faire:

1. Découvrez en lisant cet article la manière dont fonctionnent les APIs d'orientation et de gestion des accéléromètres. Vous pourrez aussi lire cet article en français.
2. Muni d'un ipad, d'un mac portable récent ou d'un device android récent, vous  testerez les démonstrations proposées dansles articles cités mais également celle-ci : http://jsbin.com/uceciv/2/edit
   Nous vous conseillons de regarder ce dernier exemple en tenant le smartphone ou la tablette en position verticale, tenez le à bout de bras et tournez le autours d'un axe partant de votre poitrine, devant vous. Penchez le en avant et en arrière. Maintenant, imaginez que vous jouez à Mario Kart sur une Wii... vous voyez le topo ?

Nous laisserons de côté pour le moment la gestion de l'accéléromètre. Dans le TP nous nous contenterons de gérer l'orientation.

L'API de géolocalisation de HTML5

 L'API de géolocalisation de HTML5 utilise un des moyens disponibles (gps, wifi, 3G, IP), peut forcer l'utilisation du GPS, peut renvoyer à intervalle réguliers la position courante (utile pour faire du tracking), etc.

Vous commencerez par lire cet article en français puis vous executerez sur votre PC et / ou sur devices mobiles les exemples de ce tutorial HTML5. Regardez notamment le dernier exemple avec une carte interactive, il possède une fonction drawPosition(position) que vous réutiliserez par la suite.

Les curieux peuvent aller voir ce site qui est une référence sur l'utilisation de l'API de Google Maps : http://econym.org.uk/gmap/

L'API des WebSockets et les librairies de plus haut niveau bâties au-dessus

Vous allez utiliser des WebSockets dans la suite du TP, via un serveur web qui les supporte: le micro serveur NodeJS. Mais avant toute chose, vous allez lire dans cette présentation les principes des WebSockets ainsi qu'une rapide présentation des librairies socket.io et nowJS que nous allons utiliser. Ces dernières permettent une utilisation de plus haut niveau des WebSockets et assurent la compatibilité même avec des vieux navigateurs. Lire donc la partie "WebSockets" de cette présentation. Les plus curieux pourront lire dans le wikipedia anglais les articles sur les WebSockets, sur NodeJS, sur socket.io, sur NowJS.

Installation du serveur NodeJS et premiers tests

Avant toute chose, il vous faut installer le serveur nodeJS et faire des tests pour vérifier qu'il fonctionne mais aussi pour comprendre comment on peut utiliser les WebSockets à l'aide de la librairie NowJS qui facilite énormément le développement d'applications client-serveur en JavaScript.

Pour cela, vous allez suivre ce tutorial qui montre comment développer un programme de dessin multi-participant : HTML5 tutorial for WWW2012: a multi-participant Paint in HTML5  mais comme nous n'allons pas développer un programme de dessin, seule l'étape 7 nous intéresse pour le moment. Cette étape explique comment installer NodeJS et comment faire fonctionner un petit programme de chat multi-participant.

Si vous êtes sous windows, il se peut que vous rencontriez quelques problèmes. Lisez attentivement les instructions, sinon appelez votre professeur à l'aide ;-)

Prenez le temps de comprendre comment l'exemple du chat fonctionne. N'hésitez pas à demander des explications si nécessaire.

Faire en sort que NodeJS "serve" les pages HTML5 d'exemples de l'API d'orientation et de l'API de géolocalisation

Nous vous avons préparé un petit projet pour nodeJS qui contient l'exemple à peine modifié de l'API d'orientation, dans lequel nous avons intégré le chat de la section précédente, et aussi ajouté une fonction permettant d'envoyer depuis la tablette l'orientation au PC via un appel de méthode distance. Récupérez le fichier suivant (note : il contient un répertoire node_modules pour windows, si vous êtes sur mac ou linux, reprenez celui de la question précédente).

• Récupérez et dézippez cette archive : TP_interactions.zip (1.8Mo)
• Dans ce répertoire, lancez la commande "node Server.js", le serveur se lance sur le port 80 de votre machine. Pour vérifier que le serveur fonctionne correctement, ouvrez la page pointée par le lien "je suis un PC" dans un onglet de votre navigateur, entrez un nom. Puis ouvrez un autre onglet et entrez un autre nom, testez le chat. Cela doit fonctionner.

Tester l'interaction avec une tablette ou un smartphone

Nous abordons ici un point un peu délicat car pour qu'une tablette puisse parler à un serveur situé sur votre machine, dans les locaux de l'EPU c'est un peu compliqué, c'est pour cela que votre enseignant a apporté un routeur WIFI. Suivez les étapes suivantes :

1. Connectez vous au réseau local intitulé "DLINK", la clé est "61LeMoMagique07"
2. Ce réseau local donne des adresse en 10.0.0.xxx, regardez quelle est l'adresse IP qui vous a été allouée (ipconfig /all sous windows, etc.)
3. Depuis la tablette, invoquez le serveur depuis un navigateur web, par exemple lors des tests de ce TP j'ai invoqué http://10.0.0.101 et j'ai cliqué sur "je suis une tablette".
4. Entre la même adresse dans un onglet du navigateur web tournant sur le PC, et cliquez sur "je suis un PC".

Normalement vous devriez avoir le logo HTML5 qui s'affiche sur la tablette et sur le PC et lorsqu'on oriente la tablette, le logo doit bouger sur la tablette mais aussi sur le PC.

Ouvrez un autre onglet avec la même adresse, les logos des deux onglets bougent en même temps... Essayez d'ouvrir cette page depuis un autre onglet d'un navigateur tournant sur un autre PC de la salle, regardez le résultat !!! Oui, les évènements sont broadcastés à tout le monde sauf à l'émetteur. 

Maintenant essayez de connecter une seconde tablette. Que se passe-t-il ?

Pour terminer le TP : faire pareil avec la géolocalisation !

Reprenez l'exemple qui utilisait l'API de géolocalisation en début de TP.

1. Insérez dans la page Html pour tablette le code qui récupère la position géographique de la tablette. Juste cela.
2. Affichez cette position en texte dans la page pour vérifier que cela fonctionne.
3. Ajoutez dans le code serveur une fonction appelable depuis les clients, qui broadcaste la position recu, de la même manière qu'on a procédé avec l'orientation,
4. Dans la page pc.html, récupérez la position et affichez là, affichez aussi le nom de la personne emettrice.
5. Regardez les exemples en début de TP pour afficher la position sur une google map,
6. Essayez en connectant plusieurs tablettes de récupérer les différentes positions et de les afficher. Dommage qu'on ne puisse pas accèder au réseau local en se promenant dehors avec un tel + GPS n'est-ce pas ?

Si néanmoins cette matière vous a plus, vous pouvez heberger votre application chez un un des hébergeurs d'applis nodeJS comme nodester.com, no.de ou heroku.com. Ici un tutorial fait par un élève de l'an dernier pour héberger sur nodester L'application qu'il héberge est la suivante : http://mathieumiollan.nodester.com, un paint multi-participants.