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 "servent" 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.