google glass droidcon - droidcon paris 2014

1

Quels Frameworks pour quels usages ?Cédric PointelMathieu Hausherr

2

DEVELOPPEUR

MOBILE

iOSAndroidBlackberry Bada Windows Phone7

Te c h Lead

Mathieu [email protected]@mhausherr

3

DEVELOPPEUR

MOBILE

iOSAndroidRobotique

Te c h Lead

Cédric [email protected]@cpointel

5

Des frameworks selon les usages

Comment développer sur les Google Glass ?

Les Google Glass et ses contraintes

6

Historique

2011

Lancem

ent du p

roje

t au se

in d

u Google

X

Lab

avril2012

Première apparition à la

“Foundatio

n Fightin

g Blindness

”

mai201

2

Présentatio

n officielle

lors

d’un show té

lévisé

juin201

2

Démonst

ratio

n à la

Google

I/O

février2013

Google recru

te des teste

urs

avril2013

Mirror A

PI disp

onible

mai2013

Premières applic

ations (

Face

book, Tw

itter,

CNN,

Evernote, …

.)

novembre

2013

Google a

nnonce le

GDK

avril2014

Vente sur u

ne journ

ée

mai2014

Open beta

7

Batterie5/6 hours

PrismeResolution: 640x360

CapturePhoto : 5mpx Video : 720p

Microphone

TouchpadTap one/two fingersSwipe one/two fingers

TransducteurBone conduction

Electronique16 GB 1,2 GHz1GB RAM Wifi / Bluetooth

Un petit bijou technologique …

8

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 …

9

… et des interactions équivalentes …

Par la voix« Ok, glass » + commande

Par le trackpadAvec différentes Gestures (taps, swipes, one finger, two fingers)

Par des boutons physiquesPour 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)

10

… possédant un petit écran …

11

… ainsi qu’une batterie limitée

12




13

1. La Mirror API

2. La Glass Developpement Kit

Deux options pour vos apps

14

Le code tourne sur le serveurRESTFull

Authentification avec OAuth2.0

Librairies en Java, PHP, .NET, Ruby, Python …

Mirror API

Your service

SyncHTTP (REST)

15

1. La Mirror API

2. La Glass Developpement Kit

Deux options pour vos apps

16

Glass Development Kit

17

Le code Android classique fonctionne sur les GlassLe GDK est en version Preview

Il est disponible directement dans le SDK manager

Il ajoute des fonctionnalités dédiéesLa gestion de la voie

La gestion des gestes du corps

Un nouveau type d’interface: les Cards

Glass Development Kit

18

Vous pouvez utiliser les deux !

Une notification (Card) poussée avec la Mirror API peut lancer une application native (GDK)

Mirror API ou GDK ?

19




20

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 ?

21


22

SituationsLancer une application

Transmettre de l’information à une application

Interagir avec l’application

Effectuer une recherche

…

Exemple : Effectuer un virement ou rechercher une information

ContraintesLes commandes sont « imposées »

Selon l’usage une connexion réseau est nécessaire


23

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é


24


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 :

25


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>

26


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, …)


<?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);

27

Comment afficher l’information à l’utilisateur ?

28

SituationsAfficher 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

ContraintesRespecter les guidelines Google

L’information doit être simple et pertinente

Comment afficher de l’information à l’utilisateur ?

29

La timeline

Une vision globale divisée en 4 partiesLe passé

Le future / présent

Les applications appelées « Glasswares »

Les paramètres pour configurer les Google Glass (WIFI, Bluetooth, …)

Home

30

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

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

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équemmentLow Frequency Livecards (de l’ordre de la seconde)

High Frequency Livecards

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

34

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

35


36

SituationsRéseau social

Banque

Assurance

…

Exemple : afficher le solde de mon compte

ContraintesPas de claviers sur les Glass

Dicter un mot de passe n’est pas sécurisé


37

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


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); } }

39

Comment scanner ou reconnaître un objet ?

40

SituationsG-Commerce

Evènementiel

Logistique

Intervention sur le terrain

…

Exemple : détecter une bouteille de vin

ContraintesPerformances

Détection en local


41

Solution n°1 : Ajouter un QRCode / Utiliser un code barreZbar


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); }

42

Solution n°2 : Détection de formeOpenCV

Limites : pas de résultats simplement actionnables


43

Comment proposer une navigation intuitive et dynamique ?

44

SituationsSalon / Soirée démonstration

Utilisateur privilégié / jeu concours

…

Exemple : rendre une navigation fluide lors de l’affichage de contenu

ContraintesL’utilisateur est face à un terminal qu’il connaît mal

Google propose déjà des guidelines


45

Solution n°1 : En mimant l’interface GoogleListe 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);

46

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_VECTORTYPE_ACCELEROMETERTYPE_GYROSCOPE

TYPE_LINEAR_ACCELERATIONTYPE_GRAVITYTYPE_MAGNETIC_FIELD

Exemples :

47

Solution n°3 : En utilisant la caméra

OnTheGo Platforms : https://www.otgplatforms.com/


48


49

SituationsRéseaux sociaux

Assistance à distance

Assurance

…

Exemple : afficher ce que je vois à un conseiller clientèle

ContraintesInternet partagé avec le téléphone

Capacité du processeur


50

Solution n°1 : Via des APIs

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’

51

Solution n°2 : En vidéo

En utilisant la solution de QuickBlox


52

Solution n°2 : En vidéo

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; } }

53

Conclusion

54

Disponible dès demain sur :

Merci de votre attention.Questions ?

Mathieu [email protected] @mhausherr

Cédric [email protected]@cpointel

google glass droidcon - droidcon paris 2014

Technology