![]() |
![]() |
TP 2013 - Nouveaux moyens d'interactionDe $1Table des matières
IntroductionDans 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 HTML5Travail à faire:
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 HTML5L'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-dessusVous 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. Installation du serveur NodeJS et premiers testsAvant 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 chat : TP WebSockets: écriture d'un programme de chat en HTML5 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éolocalisationNous 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).
Tester l'interaction avec une tablette ou un smartphoneNous 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 :
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.
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.
|
Powered by MindTouch Deki Open Source Edition v.8.08 |