instagram app for apple watch
TRANSCRIPT
Building for the Apple Watch
Ryan Nystrom @_ryannystrom
Arnaud Coomans @acoomans
DESIGN
DESIGN
Personal Holistic Lightweight
DESIGN
•New UI Elements •Simple Navigation •Glances •Notifications
DESIGN
“Do the simple thing first.”
DESIGN
DESIGN
Images
Buttons
Labels
ARCHITECTURE
•iOS App •WatchKit Extension •Watch App
ARCHITECTURE
Event
EventCode Executes
ARCHITECTURE
Code ExecutesUI Updated
ARCHITECTURE
ARCHITECTURE
Data Transfer & Latency
XCODE
XCODE
i18n
•NSLocalizedString •Strings file •Storyboards
i18n
Hello, world!
i18n
i18n
안녕하세요!
i18n
IMAGES
IMAGES
•Put in Watch App target •Avoid data transfer •Load via Storyboard
Local
IMAGES
•Use URL caching •Async fetching/decoding
Remote
EXISTING APP
Reusing Code
EXISTING APP
Rebuilding
EXISTING APP
SESSIONS
Please speak your password.x
SESSIONS
SESSIONS
+
SESSIONS
+ =
HANDOFF
Context
HANDOFF
Small Screen Limited Info Brief Interactions
HANDOFF
- (void)updateUserActivity:(NSString *)type userInfo:(NSDictionary *)userInfo webpageURL:(NSURL *)webpageURL
NOTIFICATIONS
NOTIFICATIONS
NOTIFICATIONS
NOTIFICATIONS
•Custom Actions •Watch and iOS •APN Categories
NOTIFICATIONS
Few people use Alerts
TESTING
TESTING
•Can’t initialize WatchKit classes •No Storyboards in test target
TESTING
April 24, 2015
WKInterfaceTable
IGInterfaceDataTable
IGINTERFACEDATATABLE
- (NSInteger)numberOfRowsInTable:(WKInterfaceTable *)table section:(NSInteger)section { return self.items.count; }
IGINTERFACEDATATABLE
- (NSString *)table:(WKInterfaceTable *)table rowIdentifierAtIndexPath:(NSIndexPath *)indexPath { return @"RowIdentifier"; }
IGINTERFACEDATATABLE
- (void)table:(WKInterfaceTable *)table configureRowController:(NSObject *)rowController forIndexPath:(NSIndexPath *)indexPath { MyController *controller = (MyController *)rowController; [controller.textLabel setText:@"Hello!"]; }
IGINTERFACEDATATABLE
- (void)table:(WKInterfaceTable *)table didSelectRowAtIndex:(NSInteger)rowIndex { NSIndexPath *indexPath = [table indexPathFromRowIndex:rowIndex]; if (indexPath) { // do something with the index path or data } }
DEMO
IGInterfaceDataTable
Q+A
QUESTIONS?
THANKS