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)

1. 1
Quels Frameworks
pour quels usages
?Cédric Pointel
Mathieu Hausherr

2. 2
Te ch Lead
iOSAndroid
DEVELOPPEUR
BlackberryBada Windows Phone7
MOBILE
Mathieu Hausherr
mha@octo.com
@mhausherr

3. 3
Te ch Lead
iOSAndroidRobotique
DEVELOPPEUR
MOBILE
Cédric Pointel
cpo@octo.com
@cpointel

4. Les Google Glass et ses contraintes
Comment développer sur les Google Glass ?
Des frameworks selon les usages
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. 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. 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. 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. 10
… possédant un petit écran …

10. 11
… ainsi qu’une batterie limitée

11. Les Google Glass et ses contraintes
Comment développer sur les Google Glass ?
Des frameworks selon les usages
12

12. 13
1. La Mirror API
Deux options pour vos apps
1. La Glass Developpement Kit

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. 15
1. La Mirror API
Deux options pour vos apps
1. La Glass Developpement Kit

15. 16
Glass Development Kit

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. 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. Les Google Glass et ses contraintes
Comment développer sur les Google Glass ?
Des frameworks selon les usages
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. 21
Comment gérer la voix ?

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. 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. 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. 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. 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. 27
Comment afficher l’information à l’utilisateur ?

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. 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. 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. 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. 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. 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. 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. 35
Comment s’authentifier ?

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. 37
Comment s’authentifier ?
Solution n°1 : Utiliser les APIs du GDK au moment de l’installation
d’un Glassware

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. 39
Comment scanner ou reconnaître un objet ?

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. 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. 42
Comment scanner ou reconnaître un objet ?
Solution n°2 : Détection de forme
OpenCV
Limites : pas de résultats simplement actionnables

42. 43
Comment proposer une navigation
intuitive et dynamique ?

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. 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. 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. 47
Comment proposer une navigation intuitive et dynamique ?
Solution n°3 : En utilisant la caméra
OnTheGo Platforms : https://www.otgplatforms.com/

47. 48
Comment échanger avec votre SI et partager
du contenu avec d’autres utilisateurs ?

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. 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. 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. 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. Conclusion
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