Xebia WatchKit TechEvent

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Développeurs ?

Slide 3

Slide 3 text

 Watch

Slide 4

Slide 4 text

Le produit

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Modèles —Sport (349$) —Classic —Edition Versions, 2 tailles : —42mm (312x390px ~335ppi) —38mm (272x340px ~335ppi)

Slide 7

Slide 7 text

Personnalisation

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Apple Watch et iOS Compatible uniquement avec iOS 8.2+

Slide 10

Slide 10 text

Interface

Slide 11

Slide 11 text

Interface —1 couronne (digital crown) —sélection —zoom in/out —1 bouton physique (conversation button) —favoris — Pay

Slide 12

Slide 12 text

Interface —Siri

Slide 13

Slide 13 text

Interface —Feedback haptique

Slide 14

Slide 14 text

Interface graphique

Slide 15

Slide 15 text

Interface graphique —Home screen —Glances —Applications

Slide 16

Slide 16 text

Home screen

Slide 17

Slide 17 text

Glances

Slide 18

Slide 18 text

Capteurs —Accéleromètre —Gyroscope —GPS —Moniteur cardiaque

Slide 19

Slide 19 text

 Pay

Slide 20

Slide 20 text

Batterie —~1 jour environ —rechargement avec connecteur magnétique

Slide 21

Slide 21 text

Date de sortie —Printemps 2015 —(St Valentin ?)

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Le SDK —Première release le 18 nov. 2014 —Deuxième version en mi-2015 (WWDC ?)

Slide 24

Slide 24 text

Les fonctionnalités —Gérer notiﬁcations —Écrans glances —Applications non natives1 1 La logique est exécutée sur l'iPhone

Slide 25

Slide 25 text

Les fonctionnalités / 2 —Applications natives en V2

Slide 26

Slide 26 text

WatchKit en détail

Slide 27

Slide 27 text

Aujourd'hui... Une application WatchKit est : —une extension d'une application iPhone —un écran secondaire

Slide 28

Slide 28 text

Pour commencer : glossaire —Watch App : executé sur la montre —Extension : executé sur iPhone

Slide 29

Slide 29 text

Extensions iOS

Slide 30

Slide 30 text

Extension iOS / 1

Slide 31

Slide 31 text

Extension iOS / 2 —L'extension est un applicatif indépendant contenu dans le bundle d'un .app iOS

Slide 32

Slide 32 text

Architecture

Slide 33

Slide 33 text

Architecture / 1 —La Watch App est lancée depuis un bundle contenant storyboard et ressources statiques

Slide 34

Slide 34 text

Architecture / 2 —L'interaction de l'utilisateur déclenche l'exécution de code dans l'extension

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Interface utilisateur

Slide 37

Slide 37 text

Interface utilisateur / 1 —L'interface est réalisable seulement via Storyboard —L'IHM est installée dans la Watch App

Slide 38

Slide 38 text

Interface utilisateur / 2 —Les Scenes du Storyboard ne peuvent pas être modiﬁées par l'extension iPhone à runtime —L'extension peut aﬃcher/cacher des éléments à l'intérieur de la Watch App

Slide 39

Slide 39 text

Les composants

Slide 40

Slide 40 text

Les composants / 1 —Les composants WatchKit (buttons, labels, etc) sont proxiﬁés —L'extension manipule un objet proxy (WKInterface*) —Il n'est pas possible de créer programmatiquement des éléments visuels

Slide 41

Slide 41 text

Les composants / 2 —Une extension peut contrôler : —Taille (Height/Width) —Alpha —Visibilité (propriété hidden) —Hidden = Gone

Slide 42

Slide 42 text

Les composants / 3 —WKInterfaceController —WKInterfaceGroup —WKInterfaceTable —WKInterfaceButton —WKInterfaceDate —WKInterfaceImage —WKInterfaceLabel —WKInterfaceMap —WKInterfaceSeparator —WKInterfaceSlider

Slide 43

Slide 43 text

Slide 44

Slide 44 text

WKInterfaceController —Équivalent de UIViewController —Un controlleur par écran —Target/Action pattern —Peu modulaire —Context-based

Slide 45

Slide 45 text

WKInterfaceController Context —init(context context: AnyObject!) — contextForSegueWithIdentifier(_ :) —pushControllerWithName(_ name: String!, context context: AnyObject!)

Slide 46

Slide 46 text

Cycle de vie —WA : Create Storyboard —E : initWithContext: —E : willActivate —E : action methods —E : didDeactivate

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

WKInterfaceGroup —cf. Layout sur Android —Horizontaux/Verticaux —Taille paramétrable, qui peut dépendre du contenu/conteneur —Fit content —Relative to container

Slide 49

Slide 49 text

WKInterfaceTable —Similaires aux tableaux de iOS —Pas de sections / footers / headers

Slide 50

Slide 50 text

WKInterfaceTable —Chaque row est associée à un type de row (rowType) —Chaque rowType est associé à un controller —setNumberOfRows(_:withRowType:) —setRowTypes(_ rowTypes: [AnyObject]!) —table(_ table: WKInterfaceTable!, didSelectRowAtIndex rowIndex:

Slide 51

Slide 51 text

WKInterfaceTable Toutes les méthodes de délégation de la Table sont déclarées dans le Controller

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

WKInterfaceMap —Plan statique qui peut contenir max 5. annotations —Dessiné par l'extension et envoyé ensuite à la Watch App

Slide 54

Slide 54 text

WKInterfaceDate —Libellé de date avec format paramétrable —La valeur est calculée directement par la Watch App

Slide 55

Slide 55 text

Navigation

Slide 56

Slide 56 text

Navigation —Pop/Push (cf. UINavigationController) —Page-based —Présentation modale

Slide 57

Slide 57 text

Navigation techniques —Segues —pushControllerWithName(_ name: String!, context context: AnyObject!) — presentControllerWithName(_:con text:) — presentControllerWithNames(_:co ntexts:)

Slide 58

Slide 58 text

Notes

Slide 59

Slide 59 text

Glances —Un écran Glance est une micro- application mono-page —Il est le launcher d'une application Watch App

Slide 60

Slide 60 text

Storyboard —Le storyboard est l'outil de déﬁnition de l'interface utilisateur d'une Watch App

Slide 61

Slide 61 text

Tips 'n Tricks —Utilisez les frameworks dynamiques —Modiﬁez les propriétés des Schemes —Activez le mode "External display -> Apple Watch" dans le menu du simulateur

Slide 62

Slide 62 text

Hands on !