Xebia WatchKit TechEvent

Transcript

1. 1.

   None
2. 2.

   Développeurs ?

3. 3.

    Watch

4. 4.

   Le produit

5. 5.

   None
6. 6.

   Modèles —Sport (349$) —Classic —Edition Versions, 2 tailles : —42mm

   (312x390px ~335ppi) —38mm (272x340px ~335ppi)
7. 7.

   Personnalisation

8. 8.

   OS

9. 9.

   Apple Watch et iOS Compatible uniquement avec iOS 8.2+

10. 10.

    Interface

11. 11.

    Interface —1 couronne (digital crown) —sélection —zoom in/out —1 bouton

    physique (conversation button) —favoris — Pay
12. 12.

    Interface —Siri

13. 13.

    Interface —Feedback haptique

14. 14.

    Interface graphique

15. 15.

    Interface graphique —Home screen —Glances —Applications

16. 16.

    Home screen

17. 17.

    Glances

18. 18.

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

19. 19.

     Pay

20. 20.

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

21. 21.

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

22. 22.

    None
23. 23.

    Le SDK —Première release le 18 nov. 2014 —Deuxième version

    en mi-2015 (WWDC ?)
24. 24.

    Les fonctionnalités —Gérer notifications —Écrans glances —Applications non natives1 1

    La logique est exécutée sur l'iPhone
25. 25.

    Les fonctionnalités / 2 —Applications natives en V2

26. 26.

    WatchKit en détail

27. 27.

    Aujourd'hui... Une application WatchKit est : —une extension d'une application

    iPhone —un écran secondaire
28. 28.

    Pour commencer : glossaire —Watch App : executé sur la

    montre —Extension : executé sur iPhone
29. 29.

    Extensions iOS

30. 30.

    Extension iOS / 1

31. 31.

    Extension iOS / 2 —L'extension est un applicatif indépendant contenu

    dans le bundle d'un .app iOS
32. 32.

    Architecture

33. 33.

    Architecture / 1 —La Watch App est lancée depuis un

    bundle contenant storyboard et ressources statiques
34. 34.

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

    dans l'extension
35. 35.

    None
36. 36.

    Interface utilisateur

37. 37.

    Interface utilisateur / 1 —L'interface est réalisable seulement via Storyboard

    —L'IHM est installée dans la Watch App
38. 38.

    Interface utilisateur / 2 —Les Scenes du Storyboard ne peuvent

    pas être modifiées par l'extension iPhone à runtime —L'extension peut afficher/cacher des éléments à l'intérieur de la Watch App
39. 39.

    Les composants

40. 40.

    Les composants / 1 —Les composants WatchKit (buttons, labels, etc)

    sont proxifiés —L'extension manipule un objet proxy (WKInterface*) —Il n'est pas possible de créer programmatiquement des éléments visuels
41. 41.

    Les composants / 2 —Une extension peut contrôler : —Taille

    (Height/Width) —Alpha —Visibilité (propriété hidden) —Hidden = Gone
42. 42.

    Les composants / 3 —WKInterfaceController —WKInterfaceGroup —WKInterfaceTable —WKInterfaceButton —WKInterfaceDate —WKInterfaceImage

    —WKInterfaceLabel —WKInterfaceMap —WKInterfaceSeparator —WKInterfaceSlider
43. 43.

    Les composants / 3 —WKInterfaceController —WKInterfaceGroup —WKInterfaceTable —WKInterfaceButton —WKInterfaceDate —WKInterfaceImage

    —WKInterfaceLabel —WKInterfaceMap —WKInterfaceSeparator —WKInterfaceSlider
44. 44.

    WKInterfaceController —Équivalent de UIViewController —Un controlleur par écran —Target/Action pattern

    —Peu modulaire —Context-based
45. 45.

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

    String!, context context: AnyObject!)
46. 46.

    Cycle de vie —WA : Create Storyboard —E : initWithContext:

    —E : willActivate —E : action methods —E : didDeactivate
47. 47.

    None
48. 48.

    WKInterfaceGroup —cf. Layout sur Android —Horizontaux/Verticaux —Taille paramétrable, qui peut

    dépendre du contenu/conteneur —Fit content —Relative to container
49. 49.

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

    footers / headers
50. 50.

    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:
51. 51.

    WKInterfaceTable Toutes les méthodes de délégation de la Table sont

    déclarées dans le Controller
52. 52.

    None
53. 53.

    WKInterfaceMap —Plan statique qui peut contenir max 5. annotations —Dessiné

    par l'extension et envoyé ensuite à la Watch App
54. 54.

    WKInterfaceDate —Libellé de date avec format paramétrable —La valeur est

    calculée directement par la Watch App
55. 55.

    Navigation

56. 56.

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

57. 57.

    Navigation techniques —Segues —pushControllerWithName(_ name: String!, context context: AnyObject!) —

    presentControllerWithName(_:con text:) — presentControllerWithNames(_:co ntexts:)
58. 58.

    Notes

59. 59.

    Glances —Un écran Glance est une micro- application mono-page —Il

    est le launcher d'une application Watch App
60. 60.

    Storyboard —Le storyboard est l'outil de définition de l'interface utilisateur

    d'une Watch App
61. 61.

    Tips 'n Tricks —Utilisez les frameworks dynamiques —Modifiez les propriétés

    des Schemes —Activez le mode "External display -> Apple Watch" dans le menu du simulateur
62. 62.

    Hands on !