"Codice iPhone lavato a caldo: come "restringere" la tua app per Apple Watch" by Francesco Ingrassia, Marco Passariello, Salvatore Ferranti Il supporto ad Apple Watch rappresenta per lo sviluppatore iPhone un crocevia fondamentale per emergere dalla massa, nonché una sfida per i designer di tutto il mondo che devono rivoluzionare il modo con cui l'utente interagisce. Partendo da un'app iPhone di esempio avremo modo di toccare con mano quali sono gli approcci comuni ad iOS, le novità e le principali problematiche che il programmatore deve affrontare nello sviluppo di app per Apple Watch.

1. Codice iPhone lavato a caldo
come “restringere” la tua app per Apple Watch
S. Ferranti, F. Ingrassia, M. Passariello
ROME 18-19 MARCH 2016

2. LEI NON SA CHI SIAMO NOI
Francesco
Senior iOS Dev @ Freelance
Salvatore
Senior iOS Developer @
Marco
Senior iOS Consultant @

3. ESPERIENZA
5+ anni su progetti in ambito
Finanziario, Telco, Media, B2C
& Retail

4. LIBRO
Forse vi
ricorderete di
noi…

5. UN PO’ DI NUMERI
ricerca Juniper Research
ricerca IDC
21M di smartwatch venduti nel 2015
~ 13M sono Apple Watch
15k+ app per Apple Watch
App Annie Dicembre 2015
18M di smartwatch venduti nel 2015
~ 8.8M sono Apple Watch

6. IL PERCHÉ DI QUESTO TITOLO
Anonimo
Mobile Solution Architect

7. DI COSA PARLEREMO OGGI
• Utilizzo di Apple Watch
• Architettura
• Fruizione
dell’informazione
• Watch Connectivity

8. QUELLO CHE SI CHIEDONO UN PO’ TUTTI
RACCONTAMI DI NUOVO
A COSA SERVE APPLE WATCH?

9. A COSA SERVE APPLE WATCH
• Ti fornisce le informazioni che vuoi, dove e
quando ti servono
• Ti aiuta a sbrigare in pochi secondi le attività
di ogni giorno
• Ti mette subito in contatto con le persone a
cui tieni di più
Da Apple Store Italia
http://www.apple.com/it/watch/watch-reimagined/

10. PIÙ PRESENTI E ANCORA PIÙ CONNESSI
Vita reale Prendi il
telefono
Usa il
telefono
Più connessi alle persone intorno a voi e a quelle che non lo sono
Presa in prestito da Google

11. Architettura di
Apple Watch

12. EXTENSION
Extensions: rendere
disponibili all’esterno
dell’applicazione le
funzionalità
dell’applicazione stessa

13. ARCHITETTURA
Watch
Extension
Watch App
Applicazione contenitore
presente su iPhone
Extension Apple Watch
dell’applicazione iPhone,
contiene la logica applicativa
Contiene tutto ciò che
riguarda la UI. Assets e
Storyboard no XIB in Apple
Watch
iPhone App

14. ARCHITETTURA DI WATCHOS 1
Watch
App
Watch
Extension
iPhone
App

15. WATCHOS 1 Framework
WatchKit

16. ARCHITETTURA DI WATCHOS 2
Watch
App
Watch
Extension
iPhone
App

17. ARCHITETTURA DI WATCHOS 2
Watch
App
Watch
Extension
• Indipendenza, in termini di
esecuzione, dalla controparte
iPhone
• UI più reattiva (no overhead di
comunicazione)
• Le chiamate di rete vengono
effettuate direttamente
• Accesso ai sensori (battito
cardiaco, accelerometro e corona
digitale (limitato)

18. WATCHOS 2 Frameworks
• ClockKit
• Contacts
• Core Data
• Core Foundation
• Core Graphics
• Core Location
• Core Motion
• EventKit
• Foundation
• HealthKit
• HomeKit
• Image I/O
• MapKit
• Mobile Core Services
• PassKit
• Security
• Watch Connectivity
• WatchKit
Nati per watchOS
Ereditati da iOS

19. STRUTTURA
Watch App Watch Extension

20. WATCH APP
Risorse Storyboard

21. WATCH EXTENSION
ExtensionDelegate
active
inactive
not running
InterfaceController
init
awakeWithContext:
willActivate
didAppear
didDeactivate

22. WATCH EXTENSION
ExtensionDelegate
active
inactive
not running
InterfaceController
init
awakeWithContext:
willActivate
didAppear
didDeactivate
self.view.addSubview(..)

23. COME FUNZIONA (1/4)
Watch
Extension
Watch
App
Storyboard

24. COME FUNZIONA (2/4)
Watch
Extension
Watch
App
Storyboard
label.setText(“txt”)

25. COME FUNZIONA (3/4)
Watch
Extension
Watch
App
Storyboard
label.getText()

26. COME FUNZIONA (4/4)
L’InterfaceController è responsabile del
mantenimento dello stato dei componenti
dell’interfaccia

27. ALTRI VINCOLI
Ogni componente grafico è in realtà un
oggetto proxy che estende
WKInterfaceObject
Il controller può solo agire su un set
ristretto di parametri esposti, solo in
scrittura

28. ALTRI VINCOLI
Il controller agisce esclusivamente sui
componenti già presenti nello storyboard
Non è possibile aggiungere o rimuovere
componenti e runtime
Non è possibile sovrapporre componenti…

29. LAYOUT
Layout model completamente differente
da quello utilizzato su iOS
I componenti sono posizionati
consecutivamente in base a proprietà
dell’elemento stesso e del suo contenitore

30. LAYOUT

31. FLOW LAYOUT
InterfaceController

32. FLOW LAYOUT
InterfaceController
InterfaceObject
InterfaceObject

33. FLOW LAYOUT
InterfaceController
InterfaceGroup
InterfaceGroup

34. FLOW LAYOUT
InterfaceController

35. FLOW LAYOUT - DIRECTION
InterfaceController
321

36. FLOW LAYOUT - DIRECTION
InterfaceController
1
2

37. FLOW LAYOUT - DIRECTION
InterfaceController
1
2

38. NAVIGAZIONE - HIERARCHICAL
PUSH

39. NAVIGAZIONE - HIERARCHICAL
PUSH
BACK

40. NAVIGAZIONE – PAGE BASED
NEXT PAGE

41. NAVIGAZION - MODAL
PRESENT
DISMISS

42. NAVIGAZIONE - INTERAZIONE FRA LE MODALITÀ
Page-Based
ModalHierarchical

43. NAVIGAZIONE - INTERAZIONE FRA LE MODALITÀ

44. NAVIGAZIONE - INTERAZIONE FRA LE MODALITÀ
Page-Based
ModalHierarchical

45. NAVIGAZIONE - INTERAZIONE FRA LE MODALITÀ
Page-Based
ModalHierarchical

46. NAVIGAZIONE - INTERAZIONE FRA LE MODALITÀ
Page-Based
ModalHierarchical
PUSH
PRESENT
PRESENT
NEXT
PAGE
NEXT PAGE

47. PIÙ PRESENTI E ANCORA PIÙ CONNESSI
Vita reale Prendi il
telefono
Usa il
telefono
Più connessi alle persone intorno a voi e a quelle che non lo sono
Presa in prestito da Google

48. TEMPO DI INTERAZIONE
Dimensioni dello schermo
Tempodiinterazione

49. Fruizione
dell’informazione

50. Interazioni
FRUIZIONE DELL’INFORMAZIONE

51. INTERAZIONI - GESTURE

52. INTERAZIONI – CORONA DIGITALE

53. INTERAZIONI – FORCE TOUCH

54. INTERAZIONI – DETTATURA VOCALE

55. INTERAZIONI - ACCELEROMETRO

56. App, Glance, Notifiche e
Complication
FRUIZIONE DELL’INFORMAZIONE

57. GLANCE

58. NOTIFICHE
NEXT PAGE
short looks Long looks
static dynamic

59. • ClockKit
• Provider di dati
• Timeline
• Complication Template
• Famiglie di complication
COMPLICATION

60. LIMITE ATTUALE
Non può esistere
un’applicazione Apple
Watch senza
un’applicazione iPhone

61. FRAMEWORK
Watch Connectivity

62. WATCH CONNECTIVITY
Fornisce un canale bidirezionale di
comunicazione tra
un’iPhone App ed una Watch App
Note:
Compatibile solamente con iPhone

63. TIPOLOGIE DI COMUNICAZIONE
Application
Context
User Info
Transfer
File Transfer
Background Foreground
Live Messaging

64. INIZIALIZZAZIONE DI WATCH CONNECTIVITY
if (WCSession.isSupported()) {
let session = WCSession.defaultSession()
session.delegate = self
session.activateSession()
}
Note:
Sempre vero su Apple Watch
Note:
Metodo asincrono (da watchOS 2.1+ diventa sincrono)

65. SESSIONE DI COMUNICAZIONE
Watch
App
Watch
Extension
iPhone
App
2) session.reachability == true
optional func sessionReachabilityDidChange(_ session: WCSession)
1) session.paired == true
1
2
3) session.watchAppInstalled == true
session.watchDirectoryURL != nil
3

66. COMUNICAZIONE IN BACKGROUND
Overview
• Coda di contenuti
• Sistema intelligente di trasferimento dati
• Contenuti non trasferiti immediatamente
• Raccomandato se non è richiesta una comunicazione
istantanea

67. APPLICATION CONTEXT
Watch
App
Watch
Extension
iPhone
App
1
ABC
1) func updateApplicationContext(_ applicationContext: [String : AnyObject])
2) optional func session(_ session: WCSession,
didReceiveApplicationContext applicationContext: [String : AnyObject])
2
AC
applicationContext receivedApplicationContext

68. APPLICATION CONTEXT
Considerazioni
• L’informazione ricevuta sarà sempre la più recente e/o
rilevante
• Le informazioni sono inviate mediante una coda sequenziale
• L’ultima informazione sovrascriverà sempre quella
precedentemente ricevuta
• Le informazioni sono strutturate sotto forma di dizionari
chiave-valore
• Particolarmente consigliata per la maggior parte delle
applicazioni watchOS
• Ottimo per la gestione degli aggiornamenti nei Glance

69. USER INFO TRANSFER
Watch
App
Watch
Extension
iPhone
App
1
A B C
1) func transferUserInfo(_ userInfo: [String : AnyObject])
2) optional func session(_ session: WCSession,
didReceiveUserInfo userInfo: [String : AnyObject])
2
outstandingUserInfoTransfers

70. USER INFO TRANSFER
Considerazioni
• Le informazioni sono inserite in una coda d’invio
• La coda viene smaltita in maniera sequenziale
• È possibile sempre sapere lo stato della coda d’invio,
mediante la property outstandingUserInfoTransfers

71. FILE TRANSFER
Watch
App
Watch
Extension
iPhone
App
2
A B C
1) func transferFile(_ file: NSURL,
metadata metadata: [String : AnyObject]?)
2) optional func session(_ session: WCSession,
didReceiveFile file: WCSessionFile)
1
~/Documents/InboxoutstandingFileTransfers

72. FILE TRANSFER
Considerazioni
• Gli oggetti da trasferire sono organizzati in modo simile al
sistema User Info Trasfer
• L’invio dei file è strutturato con una coda d’invio
• È possibile accedere alle informazioni di ogni singolo oggetto
della coda
• È possibile includere delle informazioni extra sotto forma di
meta dati
• Il file ricevuto deve essere copiato in un’area di salvataggio
dell’applicazione poiché, dopo l’esecuzione del delegato,
esso sarà automaticamente rimosso dal dispositivo

73. COMUNICAZIONE IN FOREGROUND
Overview
• Permette lo scambio immediato d’informazioni fra due
dispositivi
• Le informazioni sono inviate mediante una coda sequenziale
• Permette di serializzare degli oggetti custom
• È consigliabile inviare delle informazioni di piccola
dimensione

74. LIVE MESSAGING
Watch
App
Watch
Extension
iPhone
App
1) Entrambe le applicazioni sono raggiungibili ed in Foreground
2) La Watch App può iniziare una comunicazione avviando la iPhone App in Background
rendendola quindi raggiungibile
1
2

75. LIVE MESSAGING
Watch
App
Watch
Extension
iPhone
App
1
A B
1) func sendMessage(_ message: [String : AnyObject],
replyHandler replyHandler: (([String : AnyObject]) -> Void)?,
errorHandler errorHandler: ((NSError) -> Void)?)
2) optional func session(_ session: WCSession, didReceiveMessage message:
[String : AnyObject], replyHandler replyHandler:
([String : AnyObject]) -> Void)
2
C D

76. LIVE MESSAGING
Considerazioni
• Permette lo scambio immediato d’informazioni fra due
dispositivi
• Le informazioni sono inviate mediante una coda sequenziale
• Permette di serializzare degli oggetti custom
• È consigliabile inviare delle informazioni di piccola
dimensione

77. TIPS
WatchKit Development Tips
Optimize your WatchKit apps with these tips and best practices.
Reference:
https://developer.apple.com/watchkit/tips/

78. WATCHKIT DEVELOPMENT TIPS (1/2)
Performance
• Ridurre al minimo il traffico
• Inizializzare i controllers velocemente
• Caricamento dei contenuti in modalità Lazy
• Aggiornare solo gli elementi che cambiano
• Semplificare le scene dei controllers
• Migliorare i tempi di caricamento, con un minor numero di
righe per le tabelle

79. WATCHKIT DEVELOPMENT TIPS (2/2)
Consigli generali
• Effettuare animazioni mediante sequenze di immagini
• Utilizzare i settings bundle
• Utilizzare il sistema di dettatura vocale
• Salvare le sequenze di immagini sull’Apple Watch
• Ripristino dello stato per l’applicazione
Comunicazione con iPhone
• L’iPhone App dovrebbe fare la maggior parte del lavoro
• Utilizzare le API Handoff
• Condividere i dati mediante App Groups
• Utilizzare Frameworks per condividere codice

80. DOMANDE?

81. Thanks!
ROME 18-19 MARCH 2016
All pictures belong
to their respective authors
@kajinka13
@effecomefra
@j4s0n13
Salvatore
Francesco
Marco