1

Quels Frameworks pour quels usages ?Cédric PointelMathieu Hausherr

2

DEVELOPPEUR

MOBILE

iOSAndroidBlackberry Bada Windows Phone7

Te c h Lead

Mathieu Hausherrmha@octo.com@mhausherr

3

DEVELOPPEUR

MOBILE

iOSAndroidRobotique

Te c h Lead

Cédric Pointelcpo@octo.com@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

Des frameworks selon les usages

Les Google Glass et ses contraintes

Comment développer sur les Google Glass ?

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

Les Google Glass et ses contraintes

Des frameworks selon les usages

Comment développer sur les Google Glass ?

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

Comment gérer la voix ?

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

Comment gérer la voix ?

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é

Comment gérer la voix ?

24

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 :

25

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>

26

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

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

Comment s’authentifier ?

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é

Comment s’authentifier ?

37

Solution n°1 : Utiliser les APIs du GDK au moment de l’installation d’un Glassware

Comment s’authentifier ?

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

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

Comment scanner ou reconnaître un objet ?

41

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

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

42

Solution n°2 : Détection de formeOpenCV

Limites : pas de résultats simplement actionnables

Comment scanner ou reconnaître un objet ?

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

Comment proposer une navigation intuitive et dynamique ?

45

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

46

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_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/

Comment proposer une navigation intuitive et dynamique ?

48

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

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

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

50

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’

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 ?

52

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

53

Conclusion

54

Disponible dès demain sur :

Merci de votre attention.Questions ?

Mathieu Hausherrmha@octo.com @mhausherr

Cédric Pointelcpo@octo.com@cpointel