1 
Quels Frameworks 
pour quels usages 
?Cédric Pointel 
Mathieu Hausherr
2 
Te ch Lead 
iOSAndroid 
DEVELOPPEUR 
BlackberryBada Windows Phone7 
MOBILE 
Mathieu Hausherr 
mha@octo.com 
@mhausherr
3 
Te ch Lead 
iOSAndroidRobotique 
DEVELOPPEUR 
MOBILE 
Cédric Pointel 
cpo@octo.com 
@cpointel
Les Google Glass et ses contraintes 
Comment développer sur les Google Glass ? 
Des frameworks selon les usages 
5
6 
Historique 
2011 avril 
2012 
mai 
2012 
juin 
2012 
février 
2013 
avril 
2013 
mai 
2013 
novembre 
2013 
avril 
2014...
7 
Batterie 
5/6 hours 
Prisme 
Resolution: 
640x360 
Capture 
Photo : 5mpx 
Video : 720p 
Microphone 
Touchpad 
Tap one/t...
8 
… ayant les mêmes fonctionnalités qu’un smartphone … 
Prendre des photos 
Enregistrer des vidéos 
Rechercher sur Google...
9 
… et des interactions équivalentes … 
Par la voix 
« Ok, glass » + commande 
Par le trackpad 
Avec différentes Gestures...
10 
… possédant un petit écran …
11 
… ainsi qu’une batterie limitée
Les Google Glass et ses contraintes 
Comment développer sur les Google Glass ? 
Des frameworks selon les usages 
12
13 
1. La Mirror API 
Deux options pour vos apps 
1. La Glass Developpement Kit
14 
Le code tourne sur le serveur 
RESTFull 
Authentification avec OAuth2.0 
Librairies en Java, PHP, .NET, Ruby, Python …...
15 
1. La Mirror API 
Deux options pour vos apps 
1. La Glass Developpement Kit
16 
Glass Development Kit
17 
Le code Android classique fonctionne sur les Glass 
Le GDK est en version Preview 
Il est disponible directement dans ...
18 
Vous pouvez utiliser les deux ! 
Mirror API ou GDK ? 
Une notification (Card) poussée avec la Mirror API peut 
lancer ...
Les Google Glass et ses contraintes 
Comment développer sur les Google Glass ? 
Des frameworks selon les usages 
19
Comment gérer la voix ? 
Comment afficher de l’information à l’utilisateur ? 
Comment s’authentifier ? 
Comment scanner ou...
21 
Comment gérer la voix ?
22 
Situations 
Comment gérer la voix ? 
Lancer une application 
Transmettre de l’information à une application 
Interagir...
23 
Comment gérer la voix ? 
Solution : le GDK de base permet de gérer la voix de 3 façons 
différentes 
Les commandes voc...
24 
Comment gérer la voix ? 
Les commandes vocale via l’écran d’accueil  afin de lancer 
directement un Glassware depuis ...
25 
Comment gérer la voix ? 
Les commandes vocale via l’écran d’accueil  afin de lancer 
directement un Glassware depuis ...
26 
Comment gérer la voix ? 
Les commandes vocale via l’écran d’accueil  afin de lancer 
directement un Glassware depuis ...
27 
Comment afficher l’information à l’utilisateur ?
28 
Situations 
Comment afficher de l’information à l’utilisateur ? 
Afficher de l’information 
Rafraichir dynamiquement d...
29 
La timeline 
Une vision globale divisée en 4 parties 
Le passé 
Le future / présent 
Les applications appelées « Glass...
30 
3 types de carte 
Solution : le GDK de base fournit des types d’écran à utiliser afin 
d’afficher de l’information 
St...
31 
Les StaticCards 
Static cards 
De simple vue 
Pour afficher du texte, des images, des vidéos ou du 
HTML 
Utilisé pour...
32 
Les LiveCards 
Live cards 
Information Temps-réel 
Accès à certaines capacités des Google Glass (ex : 
accéléromètre, ...
33 
Les Immersions 
Immersion 
S’exécute en dehors de la TimeLine 
Développer votre propre interface ( Activity Android) ...
34 
Gérer l’interface selon le besoin 
Désormais une classe magique : CardBuilder  elle permet de 
générer un layout selo...
35 
Comment s’authentifier ?
36 
Situations 
Réseau social 
Banque 
Assurance 
… 
Exemple : afficher le solde de mon compte 
Contraintes 
Comment s’aut...
37 
Comment s’authentifier ? 
Solution n°1 : Utiliser les APIs du GDK au moment de l’installation 
d’un Glassware
38 
Solution n°2 : Utiliser un QRCode 
Depuis le site web ou le smartphone 
Contient un token de connexion unique 
Zbar 
C...
39 
Comment scanner ou reconnaître un objet ?
40 
Situations 
G-Commerce 
Evènementiel 
Logistique 
Intervention sur le terrain 
… 
Exemple : détecter une bouteille de ...
41 
Solution n°1 : Ajouter un QRCode / Utiliser un code barre 
Zbar 
Comment scanner ou reconnaître un objet ? 
compile fi...
42 
Comment scanner ou reconnaître un objet ? 
Solution n°2 : Détection de forme 
OpenCV 
Limites : pas de résultats simpl...
43 
Comment proposer une navigation 
intuitive et dynamique ?
44 
Situations 
Comment proposer une navigation intuitive et dynamique ? 
Salon / Soirée démonstration 
Utilisateur privil...
45 
Comment proposer une navigation intuitive et dynamique ? 
Solution n°1 : En mimant l’interface Google 
Liste de sélect...
46 
Comment proposer une navigation intuitive et dynamique ? 
Solution n°2 : Avec les mouvement du corps 
sensorManager = ...
47 
Comment proposer une navigation intuitive et dynamique ? 
Solution n°3 : En utilisant la caméra 
OnTheGo Platforms : h...
48 
Comment échanger avec votre SI et partager 
du contenu avec d’autres utilisateurs ?
49 
Situations 
Comment échanger avec votre SI et partager du 
Réseaux sociaux 
Assistance à distance 
Assurance 
… 
conte...
50 
Comment échanger avec votre SI et partager du 
Solution n°1 : Via des APIs 
contenu avec d’autres utilisateurs ? 
Util...
51 
Comment échanger avec votre SI et partager du 
Solution n°2 : En vidéo 
contenu avec d’autres utilisateurs ? 
En utili...
52 
Comment échanger avec votre SI et partager du 
Solution n°2 : En vidéo 
contenu avec d’autres utilisateurs ? 
En utili...
Conclusion 
53
Disponible dès demain sur : 
54 
Merci de votre attention. 
Questions ? 
Mathieu Hausherr 
mha@octo.com 
@mhausherr 
Cédri...
Prochain SlideShare
Chargement dans…5
×

Google glass droidcon - DroidCon Paris 2014

752 vues

Publié le

http://fr.droidcon.com/2014/agenda/
http://fr.droidcon.com/2014/agenda/detail?title=Google+Glass%3A+which+framework+depending+for+which+usage

Ready to develop your first Google Glass app? I guess that you will be asking yourself the same questions we had :

• How to sign in your users without keyboard?
• How to scan or detect an object just by looking at it?
• How to provide an intuitive and interactive UX?
• How to deal with your IT system and share information between users?

We will show you which dependencies to add to your build.gradle to satisfy your user's wildest dreams and provide them a full compatible app for connected glasses.

You're not ready? Don't panic, our ideas will convince you to buy glasses. And with our code you will discover that a Google Glass app is nothing else but an Android App.

Speaker : Mathieu Hausherr, OCTO Technology
Mathieu Hausherr is a native mobile app developer at Octo Technology. He develops iOS and Android apps. He believes in mobile development industrialization, unit testing and continuous integration. He loves testing new devices like glasses or watches.
Follow him on twitter (@mhausherr)

Speaker : Cédric Pointel, OCTO Technology
Cédric Pointel is as mobile developer at OCTO Technology since 4 years. He develops mobile apps, mostly on iOS, for bank, insurance, luxury or social media. He also helps companies to improve theirs skills on mobile knowledge, code quality and continuous integration. Interested in robotics and connected objects, he has started testing new devices like Google Glass since the beginning of the year.
Follow him on twitter (@cpointel)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
752
Sur SlideShare
0
Issues des intégrations
0
Intégrations
49
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 1- Un petit tour rapide pour re-présenter les Glass et contraintes
    2- Les deux façons de développer
    3- Comment utiliser la voix, faire de l’authentification, grâce à des retours d’expériences dans les transports, la banque, l’assurance, les réseaux sociaux et le luxe nous vous montrerons qu’avec le GDK de base ou des frameworks additionnels nous pouvons répondre à ces questions
  • Qu’est ce que je peut faire de base avec le GDK et où je vais avoir besoin d’une librairie ?
  • Google glass droidcon - DroidCon Paris 2014

    1. 1. 1 Quels Frameworks pour quels usages ?Cédric Pointel Mathieu Hausherr
    2. 2. 2 Te ch Lead iOSAndroid DEVELOPPEUR BlackberryBada Windows Phone7 MOBILE Mathieu Hausherr mha@octo.com @mhausherr
    3. 3. 3 Te ch Lead iOSAndroidRobotique DEVELOPPEUR MOBILE Cédric Pointel cpo@octo.com @cpointel
    4. 4. Les Google Glass et ses contraintes Comment développer sur les Google Glass ? Des frameworks selon les usages 5
    5. 5. 6 Historique 2011 avril 2012 mai 2012 juin 2012 février 2013 avril 2013 mai 2013 novembre 2013 avril 2014 mai 2014
    6. 6. 7 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. 8 … ayant les mêmes fonctionnalités qu’un smartphone … 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 …
    8. 8. 9 … 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. 10 … possédant un petit écran …
    10. 10. 11 … ainsi qu’une batterie limitée
    11. 11. Les Google Glass et ses contraintes Comment développer sur les Google Glass ? Des frameworks selon les usages 12
    12. 12. 13 1. La Mirror API Deux options pour vos apps 1. La Glass Developpement Kit
    13. 13. 14 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. 15 1. La Mirror API Deux options pour vos apps 1. La Glass Developpement Kit
    15. 15. 16 Glass Development Kit
    16. 16. 17 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. 18 Vous pouvez utiliser les deux ! Mirror API ou GDK ? Une notification (Card) poussée avec la Mirror API peut lancer une application native (GDK)
    18. 18. Les Google Glass et ses contraintes Comment développer sur les Google Glass ? Des frameworks selon les usages 19
    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. 20. 21 Comment gérer la voix ?
    21. 21. 22 Situations Comment gérer la voix ? 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
    22. 22. 23 Comment gérer la voix ? 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é
    23. 23. 24 Comment gérer la voix ? 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) 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. 25 Comment gérer la voix ? 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 <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. 26 Comment gérer la voix ? 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 <?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); 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, …)
    26. 26. 27 Comment afficher l’information à l’utilisateur ?
    27. 27. 28 Situations Comment afficher de l’information à l’utilisateur ? 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
    28. 28. 29 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. 30 3 types de carte Solution : le GDK de base fournit des types d’écran à utiliser afin d’afficher de l’information Static cards Live cards Immersion
    30. 30. 31 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. 32 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. 33 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. 34 Gérer l’interface selon le besoin Désormais une classe magique : CardBuilder  elle permet de générer un layout selon différent styles intégrés au GDK 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.AUTHOR .Layout.ALERT .Layout.COLUMN
    34. 34. 35 Comment s’authentifier ?
    35. 35. 36 Situations Réseau social Banque Assurance … Exemple : afficher le solde de mon compte Contraintes Comment s’authentifier ? Pas de claviers sur les Glass Dicter un mot de passe n’est pas sécurisé
    36. 36. 37 Comment s’authentifier ? Solution n°1 : Utiliser les APIs du GDK au moment de l’installation d’un Glassware
    37. 37. 38 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. 39 Comment scanner ou reconnaître un objet ?
    39. 39. 40 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. 41 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. 42 Comment scanner ou reconnaître un objet ? Solution n°2 : Détection de forme OpenCV Limites : pas de résultats simplement actionnables
    42. 42. 43 Comment proposer une navigation intuitive et dynamique ?
    43. 43. 44 Situations Comment proposer une navigation intuitive et dynamique ? 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
    44. 44. 45 Comment proposer une navigation intuitive et dynamique ? Solution n°1 : En mimant l’interface Google Liste de sélection sensorManager = (SensorManager) this.getSystemService(Context.SENSOR_SERVICE); sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ROTATION_VECTOR); sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_FASTEST);
    45. 45. 46 Comment proposer une navigation intuitive et dynamique ? Solution n°2 : Avec les mouvement du corps 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. 47 Comment proposer une navigation intuitive et dynamique ? Solution n°3 : En utilisant la caméra OnTheGo Platforms : https://www.otgplatforms.com/
    47. 47. 48 Comment échanger avec votre SI et partager du contenu avec d’autres utilisateurs ?
    48. 48. 49 Situations Comment échanger avec votre SI et partager du Réseaux sociaux Assistance à distance Assurance … contenu avec d’autres utilisateurs ? Exemple : afficher ce que je vois à un conseiller clientèle Contraintes Internet partagé avec le téléphone Capacité du processeur
    49. 49. 50 Comment échanger avec votre SI et partager du Solution n°1 : Via des APIs contenu avec d’autres utilisateurs ? Utilisez votre librairie réseau préférée! 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. 51 Comment échanger avec votre SI et partager du Solution n°2 : En vidéo contenu avec d’autres utilisateurs ? En utilisant la solution de QuickBlox
    51. 51. 52 Comment échanger avec votre SI et partager du Solution n°2 : En vidéo contenu avec d’autres utilisateurs ? En utilisant la solution de QuickBlox 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. 53. Disponible dès demain sur : 54 Merci de votre attention. Questions ? Mathieu Hausherr mha@octo.com @mhausherr Cédric Pointel cpo@octo.com @cpointel

    ×