Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Xebia WatchKit TechEvent

Xebia WatchKit TechEvent

3f309c992e2b1a5c3c014e63810a2f68?s=128

Simone Civetta

December 03, 2014
Tweet

More Decks by Simone Civetta

Other Decks in Programming

Transcript

  1. None
  2. Développeurs ?

  3.  Watch

  4. Le produit

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

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

  8. OS

  9. Apple Watch et iOS Compatible uniquement avec iOS 8.2+

  10. Interface

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

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

  13. Interface —Feedback haptique

  14. Interface graphique

  15. Interface graphique —Home screen —Glances —Applications

  16. Home screen

  17. Glances

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

  19.  Pay

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

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

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

    en mi-2015 (WWDC ?)
  24. Les fonctionnalités —Gérer notifications —Écrans glances —Applications non natives1 1

    La logique est exécutée sur l'iPhone
  25. Les fonctionnalités / 2 —Applications natives en V2

  26. WatchKit en détail

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

    iPhone —un écran secondaire
  28. Pour commencer : glossaire —Watch App : executé sur la

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

  30. Extension iOS / 1

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

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

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

    bundle contenant storyboard et ressources statiques
  34. Architecture / 2 —L'interaction de l'utilisateur déclenche l'exécution de code

    dans l'extension
  35. None
  36. Interface utilisateur

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

    —L'IHM est installée dans la Watch App
  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. Les composants

  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. Les composants / 2 —Une extension peut contrôler : —Taille

    (Height/Width) —Alpha —Visibilité (propriété hidden) —Hidden = Gone
  42. Les composants / 3 —WKInterfaceController —WKInterfaceGroup —WKInterfaceTable —WKInterfaceButton —WKInterfaceDate —WKInterfaceImage

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

    —WKInterfaceLabel —WKInterfaceMap —WKInterfaceSeparator —WKInterfaceSlider
  44. WKInterfaceController —Équivalent de UIViewController —Un controlleur par écran —Target/Action pattern

    —Peu modulaire —Context-based
  45. WKInterfaceController Context —init(context context: AnyObject!) — contextForSegueWithIdentifier(_ :) —pushControllerWithName(_ name:

    String!, context context: AnyObject!)
  46. Cycle de vie —WA : Create Storyboard —E : initWithContext:

    —E : willActivate —E : action methods —E : didDeactivate
  47. None
  48. WKInterfaceGroup —cf. Layout sur Android —Horizontaux/Verticaux —Taille paramétrable, qui peut

    dépendre du contenu/conteneur —Fit content —Relative to container
  49. WKInterfaceTable —Similaires aux tableaux de iOS —Pas de sections /

    footers / headers
  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. WKInterfaceTable Toutes les méthodes de délégation de la Table sont

    déclarées dans le Controller
  52. None
  53. WKInterfaceMap —Plan statique qui peut contenir max 5. annotations —Dessiné

    par l'extension et envoyé ensuite à la Watch App
  54. WKInterfaceDate —Libellé de date avec format paramétrable —La valeur est

    calculée directement par la Watch App
  55. Navigation

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

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

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

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

    est le launcher d'une application Watch App
  60. Storyboard —Le storyboard est l'outil de définition de l'interface utilisateur

    d'une Watch App
  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. Hands on !