La montre sera disponible en précommande le 10 avril (soit le lendemain de cette édition CocoaHeads Paris) mais Benoit et Joeffrey sont déjà sur le coup pour nous présenter ce que l’on peut faire avec une Apple Watch, son architecture logicielle et les différences avec le développement d’une application iOS. Nous aurons aussi un retour d’expérience sur la phase de test qui a eu lieu chez Apple à Londres.

1. Ici, ajoutez un visuel à
propos du client ou projet
Benoit CAPALLERE Joffrey BOCQUET
WatchKit

2. 1.1. LES GRANDES LIGNES
XCode 6.2 &
iOS 8.2
Utilisation couplée à un iPhone
2
swift ou obj c
Un nouveau SDK
Développement couplé à une application
2 tailles

3. 3
Action & Outlets : pas de différence
Gestures : existent mais plus limitées
Internationalisation : pas de différence
Storyboard obligatoire
1.2. LES GRANDES LIGNES
Nouveau
Force touch
Digital crown

4. 4
2.1. ARCHITECTURE
Ajout d’une nouvelle target
dans XCode
2 nouveaux
groupes
Watch Kit Extension : code
Watch Kit App : storyboard / ressources

5. 5
2.2. ARCHITECTURE
Code pour gérer les interactions dans l’extension
Toute tâche plus sophistiquée devra être faite dans l’application

6. 6
2.3. CYCLE DE VIE
Plus court
Entry point

7. 7
2.4. CYCLE DE VIE
Les méthodes
awakeWithContext :
chargement des données
willActivate : à utiliser pour des changements
de dernière minute
didDeactive : invalider les timers ou stopper
une animation par exemple

8. 8
App
Delegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- (void)applicationWillResignActive:
(UIApplication *)application
- (void)applicationDidEnterBackground:
(UIApplication *)application
- (void)applicationWillEnterForeground:
(UIApplication *)application
2.5. CYCLE DE VIE

9. 9
3.1. XCODE
espace de
travail

10. 10
3.2. XCODE
visualisation
XCode & Simulateur

11. 11
4. LES CLASSES
visualisation
WKInterfaceController
Classe WKInterfaceObject NSObject
11 éléments :
• Button, Date, Image, Label, Map, Slider, Switch, Timer
• Table
• Groupe, Separator
UI

12. 12
5.1. POSITIONNEMENT
Empilement vertical des composants par défaut
Possible en horizontal avec un « Container Group »
Pas d’ordre
Pas de superposition
Top, center, bottom
Left, center, right

13. 13
5.2. POSITIONNEMENT
On peut cacher ou montrer un objet
On ne peut pas ajouter un objet ou changer son ordre
On peut aussi changer :
• L’alpha
• La taille
• L’accessibilité
Au
runtime

14. 14
6.1. NAVIGATION
Push
Page-Based par le code permet d’être dynamique sur le
nombre de pages et l’ordre
Comment ? Modal
Page-Based

15. 15
6.2. NAVIGATION Passage de données : les contextes
VC Départ
let detailIndex: Int
init(detailIndex: Int) {
self.detailIndex = detailIndex
}
}
override func
contextForSegueWithIdentifier(segueId
entifier: String) -> AnyObject? {
if segueIdentifier == "segueDetail" {
return
DetailContextData(detailIndex: 2)
}
return nil
}
VC arrivée
override func
awakeWithContext(context:
AnyObject?) {
super.awakeWithContext(context)
if let detailContextData = context
as? DetailContextData {
detailIndex =
detailContextData.detailIndex
println(detailIndex)
self.myLabel.setText(toString(det
ailIndex))
}
}

16. 16
7. TABLEVIEW
Avant l’affichage on donne :
• Le nombre de lignes
• Le contenu de chaque ligne
Une classe pour un type de Cell
Pas de section
Lors de la sélection (segue ou par programmation) d’une
« row » on passe les données avec le contexte

17. 17
8. CONTEXT MENU
Appui long sur l’écran
On le définit pour un contrôleur
4 maximum
1 menu : un titre, une image, une action contextualisé
pour une View.

18. 18
9.1. PARTAGE DE DONNÉES
- Share NSUserDefault
- Share files inside a container
- Share Keychain
- Common Framework
- Directly communicate from Watch Extension to
Companion App

19. 19
9.2. PARTAGE DE DONNÉES
Entre l’iOS App et l’extension WatchKit
Activation de « App Group » dans Capabilities et
création d’un groupe
Share files inside a container

20. 20
9.3. PARTAGE DE DONNÉES
Share NSUserDefault
NSString *container = @"group.com.society.groupname.sharing";
NSUserDefaults *defaults = [[NSUserDefaults alloc] initWithSuiteName:container];
//classic access to userdefault values ...
[defaults setValue:@42 forKey:@"userAge"]; //write
NSNumber* age = [defaults valueForKey:@"userAge"]; //read

21. 21
9.4. PARTAGE DE DONNÉES
Directly communicate from Watch Extension to Companion App
- (void)application:(UIApplication *)application
handleWatchKitExtensionRequest:(NSDictionary *)userInfo
reply:(void (^)(NSDictionary *replyInfo))reply
+ (BOOL)openParentApplication:(NSDictionary *)userInfo
reply:(void (^)(NSDictionary *replyInfo, NSError *error))reply

22. 22
10.1. GLANCES
Les Glances (« coup d’oeil »)
• Lançable manuellement par l’utilisateur depuis la home
de la montre
• Un par application
• La seule interaction possible est le clic
• Non scrollable
• Utilisation possible de handoff pour gérer le clic sur la
glance. Lance l’App Watch par défaut.

23. 23
10.2. GLANCES
Création :
• À la création de l’App Watch
• En ajoutant un « Glance Interface Controller »
2 groupes (upper/lower) :
• Chaque partie est customizable depuis un ensemble de
templates
• Label/Image, pas de bouton/switch
• Création de sa classe
Besoin de créer un « scheme » avec le simulateur

24. 24
11. MAPS
Possibilité d’ajouter des annotations (5 maximum)
pas d’interactivité Pour le mettre en place :
• Ajout du composant d’UI
• Définition de la région

25. 25
13.1. NOTIFICATIONS
Notification par défaut si
rien de configuré avec une
interface « Short Look »
Diffusion d’une notification « Long Look » si
on l’a ajouté à l’app watch :
• Static notification
• Dynamic notification
Short Look

26. 26
13.2. NOTIFICATIONS
Diffusion d’une notification
« Long Look ». Static ou
Dynamic.
Configurer des interfaces
de notifications
différentes par Category
Custom
Long Look

27. 27
13.3. NOTIFICATIONS
Tests {
"aps": {
"alert": {
"body": "Your Booking is Available",
"title": "Optional title"
},
"category": "watch_booking_checkin"
},
"WatchKit Simulator Actions": [
{
"title": "Open App",
"identifier": "openAppButtonAction"
}
....

28. www.useradgents.com
A USER INTERFACE IS
LIKE A JOKE. IF YOU
HAVE TO EXPLAIN IT,
IT’S NOT THAT GOOD.
‘
’
MERCI
Benoit CAPALLERE Joffrey BOCQUET

29. 8 rue de la Rochefoucauld
75009 PARIS
+33 1 77 75 65 90 uainfo@useradgents.com www.useradgents.com @useradgentswww.joshfire.com @joshfire
userADgents
en chiffres :
Que faisons-nous ?
Accompagnement stratégique
Etude de marché, benchmark, audit
Formation
Recherche et innovation
CONSEIL
Design Thinking
Recherche utilisateurs
Ateliers d’idéation
Design graphique des interfaces
Test & Learn
UX / DESIGN
Applications natives (iOS/Android/Windows Phone)
Web responsive & adaptive
Back-end
Gestion des stores
DÉVELOPPEMENT
Publicité mobile (media & audience planning)
App Store optimisation
Campagnes Drive to store
Interaction in store
PROMOTION
6 ans d’existence
30 experts
14 awards
userADgents est une agence
conseil « mobile first » qui aide
les marques à définir leur
stratégie, leur design, à
développer & promouvoir leurs
services et produits par le biais
d’applications & de sites pour
smartphones, tablettes &
objets connectés.
Nous sommes partenaires avec
Joshfire, la 1ère agence d’iOT
et nous dirigeons la Mobile
Marketing Association.
Qui sommes-nous ?

30. 8 rue de la Rochefoucauld
75009 PARIS
+33 1 77 75 65 90 uainfo@useradgents.com www.useradgents.com @useradgentswww.joshfire.com @joshfire
Que faisons-nous ?
IDEATION
DESIGN
PROTOTYPAGE
INDUSTRIALISATION
Fondée en 2010, l’agence
Joshfire est spécialisée dans la
création d’objets connectés et
expériences interactives sur
mesure.
Nos fondamentaux sont
l’expérience utilisateur, le
design et l’ergonomie.
Nous sommes obsédés par
chaque détail et préférons la
qualité à la quantité.
Nous sommes partenaires avec
userADgents, une agence
conseil « mobile first ».
Qui sommes-nous ?
Nous mêlons notre expérience et expertise à votre
connaissance et vision du métier pour créer des
concepts innovants.
Assistés par de vrais designers industriels &
spécialistes dans les objets connectés, nous
savons évaluer les solutions les plus pertinentes.
Pour valider les idées, nous les prototypes avec
nos experts en électrotechniques.
L’accomplissement d’un processus créatif agile
c’est de voir votre produit en magasin. c’est aussi
notre satisfaction.