Google Glass: Quels Frameworks pour quels usages?

Mathieu Hausherr
Cédric Pointel

Droidcon Paris 2014

Transcript

1. 1 Quels Frameworks pour quels usages ? Cédric Pointel Mathieu Hausherr
2. 2 DEVELOPPEUR MOBILE iOS Android Blackberry Bada Windows Phone7 Te c h Lead Mathieu Hausherr mha@octo.com @mhausherr
3. 3 DEVELOPPEUR MOBILE iOS Android Robotique Te c h Lead Cédric Pointel cpo@octo.com @cpointel
4. 4 Des frameworks selon les usages Comment développer sur les Google Glass ? Les Google Glass et ses contraintes
5. 5 Historique 2011 avril 2012 mai 2012 juin 2012 février 2013 avril 2013 mai 2013 novembre 2013 avril 2014 mai 2014
6. 6 Batterie 5/6 hours Prisme Resolution: 640x360 Capture Photo : 5mpx Video : 720p Microphone Touchpad Tap one/two fingers Swipe one/two fingers Transducteur Bone conduction Electronique 16 GB 1,2 GHz 1GB RAM Wifi / Bluetooth Un petit bijou technologique …
7. 7 ! Prendre des photos ! Enregistrer des vidéos ! Rechercher sur Google ! Jouer de la musique ! Envoyer des messages ! Effectuer des appels ! Utiliser la navigation ! Recevoir des notifications ! Prendre des notes ! … … ayant les mêmes fonctionnalités qu’un smartphone …
8. 8 … et des interactions équivalentes … ! Par la voix !   « Ok, glass » + commande ! Par le trackpad !   Avec différentes Gestures (taps, swipes, one finger, two fingers) ! Par des boutons physiques !   Pour prendre un photo ou enregistrer une vidéo !   Pour allumer/éteindre les Google Glass ! Avec son corps (tête, yeux, …) !   La détection de mouvement (grâce aux capteurs, accéléromètre, gyroscope, …) !   Le clin d’oeil droit ! Les applications “My Glass” !   Sur smartphone (iOS / Android) !   Sur le web (https://glass.google.com/u/0/myglass)
9. 9 … possédant un petit écran …
10. 10 … ainsi qu’une batterie limitée
11. 11 Des frameworks selon les usages Les Google Glass et ses contraintes Comment développer sur les Google Glass ?
12. 12 1.  La Mirror API 2.  La Glass Developpement Kit Deux options pour vos apps
13. 13 ! Le code tourne sur le serveur ! RESTFull !   Authentification avec OAuth2.0 !   Librairies en Java, PHP, .NET, Ruby, Python … Mirror API Your service Sync HTTP (REST)
14. 14 1.  La Mirror API 2.  La Glass Developpement Kit Deux options pour vos apps
15. 15 Glass Development Kit
16. 16 ! Le code Android classique fonctionne sur les Glass !   Le GDK est en version Preview !   Il est disponible directement dans le SDK manager !   Il ajoute des fonctionnalités dédiées !   La gestion de la voie !   La gestion des gestes du corps !   Un nouveau type d’interface: les Cards Glass Development Kit
17. 17 Vous pouvez utiliser les deux ! Une notification (Card) poussée avec la Mirror API peut lancer une application native (GDK) Mirror API ou GDK ?
18. 18 Les Google Glass et ses contraintes Des frameworks selon les usages Comment développer sur les Google Glass ?
19. 19 Comment gérer la voix ? Comment afficher de l’information à l’utilisateur ? Comment s’authentifier ? Comment scanner ou reconnaître des objets ? Comment proposer une navigation intuitive ? Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ?
20. 20 Comment gérer la voix ?
21. 21 Situations !   Lancer une application !   Transmettre de l’information à une application !   Interagir avec l’application !   Effectuer une recherche !   … Exemple : Effectuer un virement ou rechercher une information Contraintes !   Les commandes sont « imposées » !   Selon l’usage une connexion réseau est nécessaire Comment gérer la voix ?
22. 22 ! Solution : le GDK de base permet de gérer la voix de 3 façons différentes !   Les commandes vocale via l’écran d’accueil è afin de lancer directement un Glassware depuis l’écran d’accueil !   Les commandes vocale contextuelles è afin de lancer les items d’un menu directement par la voix !   La reconnaissance vocale è afin de transmettre ce que l’utilisateur dit au sein de son activité Comment gérer la voix ?
23. 23 ! Les commandes vocale via l’écran d’accueil è afin de lancer directement un Glassware depuis l’écran d’accueil !   Une ressource XML pour la commande vocale selon une liste définie par Google (è VoiceTriggers.Command) Comment gérer la voix ? res/xml/voice_trigger.xml <?xml version="1.0" encoding="utf-8"?>! <trigger keyword="SEND_MONEY" /> "SEND_MONEY"! "FIND_A_PLACE"! "FIND_A_HOSPITAL"! "FIND_PARKING"! "SHOW_ME_MY_SPEED"! "SHOW_ME_THE_NEWS"! "SHOW_ME_THE_WEATHER"! "START_A_RUN"! "START_A_STOPWATCH"! "START_A_TIMER"! "TAKE_A_PICTURE"! "TAKE_A_NOTE"! "TRANSLATE_THIS"! "PLAY_A_GAME"! Exemple de commandes :
24. 24 ! Les commandes vocale via l’écran d’accueil è afin de lancer directement un Glassware depuis l’écran d’accueil !   Déclarer un Intent Filter au sein du Manifest de l’application avec également la possibilité de fournir un icône à la commande vocale Comment gérer la voix ? <activity! android:name=".ui.activity.MainActivity"! android:icon="@drawable/ic_launcher"! android:label="@string/app_name"! android:keepScreenOn="true"! android:immersive="true">! <intent-filter>! <action android:name="com.google.android.glass.action.VOICE_TRIGGER" />! </intent-filter>! ! <meta-data! android:name="com.google.android.glass.VoiceTrigger"! android:resource="@xml/voice_trigger" />! </activity>
25. 25 ! Les commandes vocale via l’écran d’accueil è afin de lancer directement un Glassware depuis l’écran d’accueil !   Possibilité d’ajouter un prompt afin d’offrir la possibilité à l’utilisateur d’ajouter un message supplémentaire !   Il est également possible de restreindre l’utilisation de la voix selon la disponibilité de certains services au sein des Google Glass (ex : camera, réseau, …) Comment gérer la voix ? <?xml version="1.0" encoding="utf-8"?>! <trigger keyword="SEND_MONEY">! <input prompt="@string/how_much_prompt" /> </trigger> ArrayList<String> voiceResults = getIntent().getExtras().getStringArrayList(RecognizerIntent.EXTRA_RESULTS);
26. 26 Comment afficher l’information à l’utilisateur ?
27. 27 Situations !   Afficher de l’information !   Rafraichir dynamiquement du contenu !   Offrir la possibilité d’interagir avec le contenu (afficher plus de détail, le partager, …) Exemple : lors d’un événement ou la visite d’un musée Contraintes !   Respecter les guidelines Google !   L’information doit être simple et pertinente Comment afficher de l’information à l’utilisateur ?
28. 28 La timeline ! Une vision globale divisée en 4 parties ! Le passé ! Le future / présent ! Les applications appelées « Glasswares » ! Les paramètres pour configurer les Google Glass (WIFI, Bluetooth, …) Home
29. 29 3 types de carte Live cards Static cards Immersion ! Solution : le GDK de base fournit des types d’écran à utiliser afin d’afficher de l’information
30. 30 Les StaticCards Static cards ! De simple vue ! Pour afficher du texte, des images, des vidéos ou du HTML ! Utilisé pour afficher des notifications (è Mirror API) ! Possibilité d’y invoquer des LiveCards ou de l’Immersion ! Ne peut pas être rafraichie fréquemment
31. 31 Les LiveCards Live cards ! Information Temps-réel ! Accès à certaines capacités des Google Glass (ex : accéléromètre, gyroscope, camera, …) ! S’exécute au sein de la timeline ! Peut être mis à jour fréquemment ! Low Frequency Livecards (de l’ordre de la seconde) ! High Frequency Livecards
32. 32 Les Immersions Immersion ! S’exécute en dehors de la TimeLine ! Développer votre propre interface (è Activity Android) ! Accès à l’ensemble des capacités des Google Glass (ex : les capteurs, la voix, les gestures, …) ! Attention à respecter les contraintes Google (taille de l’écran, les interactions, gestures) ! Spécifier dans le Manifest android:immersive="true" pour éviter que les Glass se mettent en veille
33. 33 ! Désormais une classe magique : CardBuilder è elle permet de générer un layout selon différent styles intégrés au GDK Gérer l’interface selon le besoin View view = new CardBuilder(context, CardBuilder.Layout.COLUMNS) .setText(”Bonjour, bienvenue à la Droidcon Paris") .setFootnote(”Session Google Glass à 15h55") .addImage(R.drawable.image) .getView(); .Layout.CAPTION .Layout.TITLE .Layout.ALERT .Layout.ALERT .Layout.AUTHOR .Layout.COLUMN
34. 34 Comment s’authentifier ?
35. 35 Situations !   Réseau social !   Banque !   Assurance !   … Exemple : afficher le solde de mon compte Contraintes !   Pas de claviers sur les Glass !   Dicter un mot de passe n’est pas sécurisé Comment s’authentifier ?
36. 36 ! Solution n°1 : Utiliser les APIs du GDK au moment de l’installation d’un Glassware Comment s’authentifier ?
37. 37 ! Solution n°2 : Utiliser un QRCode !   Depuis le site web ou le smartphone !   Contient un token de connexion unique ! Zbar Comment s’authentifier ? compile files('libs/zbar.jar’)! ! ! imageScanner = new ImageScanner();! imageScanner.setConfig(0, Config.X_DENSITY, 3);! imageScanner.setConfig(0, Config.Y_DENSITY, 3);! int[] symbols = getIntent().getIntArrayExtra(SCAN_MODES);! if (symbols != null) {! imageScanner.setConfig(Symbol.NONE, Config.ENABLE, 0);! for (int symbol : symbols) {! imageScanner.setConfig(symbol, Config.ENABLE, 1);! }! }
38. 38 Comment scanner ou reconnaître un objet ?
39. 39 Situations ! G-Commerce !   Evènementiel !   Logistique !   Intervention sur le terrain !   … Exemple : détecter une bouteille de vin Contraintes !   Performances !   Détection en local Comment scanner ou reconnaître un objet ?
40. 40 ! Solution n°1 : Ajouter un QRCode / Utiliser un code barre ! Zbar Comment scanner ou reconnaître un objet ? compile files('libs/zbar.jar') ! ! cameraPreview = (CameraPreview) findViewById(R.id.camerapreview);! cameraPreview.setAutoFocusCallback(new Camera.AutoFocusCallback() {! public void onAutoFocus(boolean success, Camera camera) {! autoFocusHandler.postDelayed(doAutoFocus, 1000);! }! });! cameraPreview.setPreviewCallback(this);! ! ! ! public void onPreviewFrame(byte[] data, Camera camera) {! int result = imageScanner.scanImage(barcode);! }
41. 41 ! Solution n°2 : Détection de forme ! OpenCV !   Limites : pas de résultats simplement actionnables Comment scanner ou reconnaître un objet ?
42. 42 Comment proposer une navigation intuitive et dynamique ?
43. 43 Situations !   Salon / Soirée démonstration !   Utilisateur privilégié / jeu concours !   … Exemple : rendre une navigation fluide lors de l’affichage de contenu Contraintes !   L’utilisateur est face à un terminal qu’il connaît mal !   Google propose déjà des guidelines Comment proposer une navigation intuitive et dynamique ?
44. 44 ! Solution n°1 : En mimant l’interface Google !   Liste de sélection Comment proposer une navigation intuitive et dynamique ? ! sensorManager = (SensorManager) this.getSystemService(Context.SENSOR_SERVICE);! sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ROTATION_VECTOR);! sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_FASTEST);! !
45. 45 ! Solution n°2 : Avec les mouvement du corps Comment proposer une navigation intuitive et dynamique ? ! sensorManager = (SensorManager) this.getSystemService(Context.SENSOR_SERVICE);! sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ROTATION_VECTOR);! sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_FASTEST);! ! TYPE_ROTATION_VECTOR! TYPE_ACCELEROMETER! TYPE_GYROSCOPE TYPE_LINEAR_ACCELERATION! TYPE_GRAVITY! TYPE_MAGNETIC_FIELD Exemples :
46. 46 ! Solution n°3 : En utilisant la caméra ! OnTheGo Platforms : https://www.otgplatforms.com/ Comment proposer une navigation intuitive et dynamique ?
47. 47 Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ?
48. 48 Situations !   Réseaux sociaux !   Assistance à distance !   Assurance !   … Exemple : afficher ce que je vois à un conseiller clientèle Contraintes !   Internet partagé avec le téléphone !   Capacité du processeur Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ?
49. 49 ! Solution n°1 : Via des APIs !   Utilisez votre librairie réseau préférée! Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ? compile 'com.mcxiaoke.volley:library:1.0.4@aar’ compile 'com.octo.android.robospice:robospice:1.4.14’ compile 'com.squareup.retrofit:retrofit:1.6.1’
50. 50 ! Solution n°2 : En vidéo !   En utilisant la solution de QuickBlox Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ?
51. 51 ! Solution n°2 : En vidéo !   En utilisant la solution de QuickBlox Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ? public Camera getCamera() {! try {! Field privateCameraField = com.quickblox.module.videochat.views.CameraView.class.getDeclaredField("camera");! privateCameraField.setAccessible(true);! return (Camera) privateCameraField.get(this);! } catch (NoSuchFieldException e) {! return null;! } catch (IllegalAccessException e) {! return null;! }! }
52. 52 Conclusion
53. 53 Disponible dès demain sur : Merci de votre attention. Questions ? Mathieu Hausherr mha@octo.com @mhausherr Cédric Pointel cpo@octo.com @cpointel