instagram app for apple watch

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