Apple Watch par Benoit Capallere et Joeffrey Bocquet
-
Upload
cocoaheads-france -
Category
Software
-
view
2.963 -
download
0
Transcript of Apple Watch par Benoit Capallere et Joeffrey Bocquet
![Page 1: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/1.jpg)
Ici, ajoutez un visuel à propos du client ou projet
Benoit CAPALLERE Joffrey BOCQUET
WatchKit
![Page 2: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/2.jpg)
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
![Page 3: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/3.jpg)
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
NouveauForce touch
Digital crown
![Page 4: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/4.jpg)
4
2.1. ARCHITECTURE
Ajout d’une nouvelle target
dans XCode 2 nouveaux
groupes
Watch Kit Extension : code
Watch Kit App : storyboard / ressources
![Page 5: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/5.jpg)
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
![Page 6: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/6.jpg)
6
2.3. CYCLE DE VIE
Plus court
Entry point
![Page 7: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/7.jpg)
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
![Page 8: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/8.jpg)
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
![Page 9: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/9.jpg)
9
3.1. XCODE
espace de travail
![Page 10: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/10.jpg)
10
3.2. XCODE
visualisation
XCode & Simulateur
![Page 11: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/11.jpg)
11
4. LES CLASSES
visualisation
WKInterfaceController
Classe WKInterfaceObject NSObject
11 éléments :
• Button, Date, Image, Label, Map, Slider, Switch, Timer
• Table
• Groupe, Separator
UI
![Page 12: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/12.jpg)
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
![Page 13: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/13.jpg)
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é
Auruntime
![Page 14: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/14.jpg)
14
6.1. NAVIGATION
Push
Page-Based par le code permet d’être dynamique sur le nombre de pages et l’ordre
Comment ? ModalPage-Based
![Page 15: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/15.jpg)
15
6.2. NAVIGATION Passage de données : les contextes
VC Départ
let detailIndex: Intinit(detailIndex: Int) {
self.detailIndex = detailIndex}
}override func contextForSegueWithIdentifier(segueIdentifier: 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.detailIndexprintln(detailIndex)self.myLabel.setText(toString(det
ailIndex))}
}
![Page 16: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/16.jpg)
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
![Page 17: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/17.jpg)
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.
![Page 18: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/18.jpg)
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
![Page 19: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/19.jpg)
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
![Page 20: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/20.jpg)
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"]; //writeNSNumber* age = [defaults valueForKey:@"userAge"]; //read
![Page 21: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/21.jpg)
21
9.4. PARTAGE DE DONNÉES
Directly communicate from Watch Extension to Companion App
- (void)application:(UIApplication *)applicationhandleWatchKitExtensionRequest:(NSDictionary *)userInfo
reply:(void (^)(NSDictionary *replyInfo))reply
+ (BOOL)openParentApplication:(NSDictionary *)userInforeply:(void (^)(NSDictionary *replyInfo, NSError *error))reply
![Page 22: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/22.jpg)
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.
![Page 23: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/23.jpg)
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
![Page 24: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/24.jpg)
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
![Page 25: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/25.jpg)
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
![Page 26: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/26.jpg)
26
13.2. NOTIFICATIONS
Diffusion d’une notification « Long Look ». Static ouDynamic.
Configurer des interfacesde notificationsdifférentes par Category
Custom
Long Look
![Page 27: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/27.jpg)
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"
}....
![Page 28: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/28.jpg)
www.useradgents.com
A USER INTERFACE ISLIKE A JOKE. IF YOUHAVE TO EXPLAIN IT,IT’S NOT THAT GOOD.
‘’
MERCI
Benoit CAPALLERE Joffrey BOCQUET
![Page 29: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/29.jpg)
8 rue de la Rochefoucauld75009 PARIS +33 1 77 75 65 90 [email protected] www.useradgents.com @useradgentswww.joshfire.com @joshfire
userADgents en chiffres :
Que faisons-nous ?
Accompagnement stratégiqueEtude de marché, benchmark, auditFormationRecherche et innovation
CONSEIL
Design ThinkingRecherche utilisateursAteliers d’idéationDesign graphique des interfacesTest & Learn
UX / DESIGN
Applications natives (iOS/Android/Windows Phone)Web responsive & adaptiveBack-endGestion des stores
DÉVELOPPEMENT
Publicité mobile (media & audience planning)App Store optimisation Campagnes Drive to storeInteraction in store
PROMOTION
6 ans d’existence
30 experts
14 awards
userADgents est une agenceconseil « mobile first » qui aideles marques à définir leurstratégie, leur design, àdévelopper & promouvoir leursservices et produits par le biaisd’applications & de sites poursmartphones, tablettes &objets connectés.
Nous sommes partenaires avecJoshfire, la 1ère agence d’iOTet nous dirigeons la MobileMarketing Association.
Qui sommes-nous ?
![Page 30: Apple Watch par Benoit Capallere et Joeffrey Bocquet](https://reader038.fdocuments.net/reader038/viewer/2022102723/55a686bc1a28abd9088b46e4/html5/thumbnails/30.jpg)
8 rue de la Rochefoucauld75009 PARIS +33 1 77 75 65 90 [email protected] www.useradgents.com @useradgentswww.joshfire.com @joshfire
Que faisons-nous ?
IDEATION
DESIGN
PROTOTYPAGE
INDUSTRIALISATION
Fondée en 2010, l’agenceJoshfire est spécialisée dans lacréation d’objets connectés etexpériences interactives surmesure.
Nos fondamentaux sontl’expérience utilisateur, ledesign et l’ergonomie.
Nous sommes obsédés parchaque détail et préférons laqualité à la quantité.
Nous sommes partenaires avecuserADgents, une agenceconseil « 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.