TP 5 : Device APi

Objectifs pédagogiques du TP

• Utiliser les capteurs et actionneurs d'un dispositif mobile à travers un navigateur

Outils

Pour ce TP, vous devez disposer d'un téléphone ou d'une tablette disposant de capteurs (batterie, accéléromètre, boussole, GPS...) et d'un navigateur récent.

Ressources

• jQuery, Underscore, Backbone, React : cf. TPs précédents
• Spécification device API : voir références dans le cours
• Modernizr (inclus dans le source de ce TP ; vous pouvez en voir l'effet dans la console de développement de votre navigateur)
• ...Plus tout ce que vous pourrez trouver par vous-mêmes

Préambule

Ce TP sera réutilisé dans le TP 5bis. Il est donc impératif de l'avoir terminé avant la prochaine séance de TP.

Créez un projet MIF38-TP5 sur la forge, ajoutez-y votre binôme et vos encadrants (comme reporters). N'oubliez pas de mettre vos noms dans la description du projet.

Vous devrez être capable de déployer votre application sur votre téléphone / tablette afin de tester votre code. Vous pouvez faire cela :

• à partir d'une connexion USB
• à partir d'un serveur HTTP (vous n'aurez à servir que des pages statiques).
  Remarque : le wifi du campus ne vous permet pas d'accéder à une machine en wifi depuis une autre ; si vous utilisez cette solution, vous devrez vous servir soit d'une VM sur l'infra de cloud, soit de votre téléphone comme gateway (tethering wifi) et accéder à votre serveur sur votre machine en 192.168.X.X,
• à l'aide d'un tunnel SSH (exemple : ngrok).

Structure de l'application

Créez une single-page application Backbone ou React (ou les 2) vide, et ajoutez-y les routes suivantes :

• home
• battery
• camera
• location
• compass
• vibration

La route home présentera un menu permettant d'accéder aux autres vues. Chacune des autres routes permettra d'utiliser l'une des API présentées en cours.

Device API

Générez une version de Modernizr conforme aux besoins de votre application et intégrez-la dans la page d'accueil. Dans les vues correspondantes, vous vous en servirez pour tester les fonctionnalités correspondantes et appeler les modèles appropriés.

Battery API

Utilisez les événements de la Battery API pour faire en sorte que la vue correspondant à cette route affiche :

• Si l'appareil est en charge ou non
• Le pourcentage de batterie restant
• Le temps de chargement estimé

Remarque : cette API est disponible sur un ordinateur portable. Vous pouvez vous en servir pour tester le bon fonctionnement de votre application sans utiliser de téléphone.

Media capture and streams API

À l'aide de l'API Media capture and streams, faites en sorte que la vue correspondant à la route "camera" permette :

• d'afficher le flux vidéo capté par la caméra
• de prendre une photo
• de l'afficher à l'écran (dans un canvas)

Remarque : cette API est également disponible sur un ordinateur portable. Son implémentation est variable selon les navigateurs. Faites en sorte de couvrir le maximum de versions pour qu'elle fonctionne sur différents dispositifs et testez avec plusieurs navigateurs.

Geolocation API

À l'aide de l'API Geolocation, faites en sorte que la vue correspondant à la route "location" affiche la position de l'appareil en haute précision (enableHighAccuracy). Vous pouvez également afficher cette position sur une carte mais il vous faudra du réseau pour cela.

Remarque : cette API est disponible sur un ordinateur portable (sans la haute précision).

DeviceOrientation events API

Utilisez cette API pour que la vue correspondant à la route "compass" permette :

• de visualiser la direction dans laquelle le téléphone est orienté (vous pouvez dessiner une boussole)
• d'afficher le type d'orientation de l'écran (portrait / paysage)
• d'afficher l'accélération maximale à laquelle a été soumis votre appareil depuis l'arrivée sur cette vue

Vibration API

Placez un bouton "Toggle vibration" sur la vue correspondant à la route "vibration" pour que l'appareil effectue, de façon continue l'action suivante :

• vibrer pendant 300ms
• ne pas vibrer pendant 200ms

Chaque appui sur le bouton déclenchera ou arrêtera cette boucle.

Rendu du TP

Important : n'oubliez pas de mettre un readme à la racine de votre projet pour indiquer vos noms et quelles APIs / outils (polyfills, bibliothèques) vous avez utilisés.

Vous rendrez une seule version de ce TP (et répondrez au questionnaire 5 sur Spiral), avec :

1. une version Web utilisant la device API
2. une version en application native (cf. TP 5bis)

Le rendu du TP s'effectue sur la forge. Le dernier commit devra avoir été fait avant le début de la séance de TP suivante.