Ici, ajoutez un visuel à
propos du client ou projet
Benoit CAPALLERE Joffrey BOCQUET
WatchKit
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
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
2.1. ARCHITECTURE
Ajout d’une nouvelle target
dans XCode
2 nouveaux
groupes
Watch Kit Extension : code
Watch Kit App : storyboard / ressources
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
2.3. CYCLE DE VIE
Plus court
Entry point
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
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
3.1. XCODE
espace de
travail
10
3.2. XCODE
visualisation
XCode & Simulateur
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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"
}
....
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
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 ?
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.

Apple Watch par Benoit Capallere et Joeffrey Bocquet

  • 1.
    Ici, ajoutez unvisuel à propos du client ou projet Benoit CAPALLERE Joffrey BOCQUET WatchKit
  • 2.
    1.1. LES GRANDESLIGNES 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’unenouvelle target dans XCode 2 nouveaux groupes Watch Kit Extension : code Watch Kit App : storyboard / ressources
  • 5.
    5 2.2. ARCHITECTURE Code pourgérer les interactions dans l’extension Toute tâche plus sophistiquée devra être faite dans l’application
  • 6.
    6 2.3. CYCLE DEVIE Plus court Entry point
  • 7.
    7 2.4. CYCLE DEVIE 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.
  • 10.
  • 11.
    11 4. LES CLASSES visualisation WKInterfaceController ClasseWKInterfaceObject NSObject 11 éléments : • Button, Date, Image, Label, Map, Slider, Switch, Timer • Table • Groupe, Separator UI
  • 12.
    12 5.1. POSITIONNEMENT Empilement verticaldes 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 peutcacher 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 parle code permet d’être dynamique sur le nombre de pages et l’ordre Comment ? Modal Page-Based
  • 15.
    15 6.2. NAVIGATION Passagede 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’affichageon 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 Appuilong 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 DEDONNÉ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 DEDONNÉ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 DEDONNÉ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 DEDONNÉ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’ajouterdes 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 pardé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’unenotification « 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 INTERFACEIS LIKE A JOKE. IF YOU HAVE TO EXPLAIN IT, IT’S NOT THAT GOOD. ‘ ’ MERCI Benoit CAPALLERE Joffrey BOCQUET
  • 29.
    8 rue dela 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 dela 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.