Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BuildingfortheAppleWatch
Ryan Nystrom @_ryannystrom
Arnaud Coomans @acoomans
DESIGN
DESIGN
Personal
Holistic
Lightweight
DESIGN
•NewUIElements
•SimpleNavigation
•Glances
•Notifications
DESIGN
“Dothesimplethingfirst.”
DESIGN
DESIGN
Images
Buttons
Labels
ARCHITECTURE
•iOSApp
•WatchKitExtension
•WatchApp
ARCHITECTURE
Event
Event
Code
Executes
ARCHITECTURE
Code
Executes
UI Updated
ARCHITECTURE
ARCHITECTURE
DataTransfer&Latency
XCODE
XCODE
i18n
•NSLocalizedString
•Stringsfile
•Storyboards
i18n
Hello, world!
i18n
i18n
안녕하세요!
i18n
IMAGES
IMAGES
•PutinWatchApptarget
•Avoiddatatransfer
•LoadviaStoryboard
Local
IMAGES
•UseURLcaching
•Asyncfetching/decoding
Remote
EXISTINGAPP
ReusingCode
EXISTINGAPP
Rebuilding
EXISTINGAPP
SESSIONS
Please speak
your password.x
SESSIONS
SESSIONS
+
SESSIONS
+ =
HANDOFF
Context
HANDOFF
SmallScreen
LimitedInfo
BriefInteractions
HANDOFF
- (void)updateUserActivity:(NSString *)type

                  userInfo:(NSDictionary *)userInfo

                ...
NOTIFICATIONS
NOTIFICATIONS
NOTIFICATIONS
NOTIFICATIONS
•CustomActions
•WatchandiOS
•APNCategories
NOTIFICATIONS
FewpeopleuseAlerts
TESTING
TESTING
•Can’tinitializeWatchKitclasses
•NoStoryboardsintesttarget
TESTING
April24,2015
WKInterfaceTable
IGInterfaceDataTable
IGINTERFACEDATATABLE
- (NSInteger)numberOfRowsInTable:(WKInterfaceTable *)table section:(NSInteger)section {
return self.items.count;
}
IGINTER...
IGINTERFACEDATATABLE
- (void)table:(WKInterfaceTable *)table
configureRowController:(NSObject *)rowController
forIndexPath...
IGINTERFACEDATATABLE
- (void)table:(WKInterfaceTable *)table didSelectRowAtIndex:
(NSInteger)rowIndex {
NSIndexPath *index...
DEMO
IGInterfaceDataTable
Q+A
QUESTIONS?
THANKS
Upcoming SlideShare
Loading in …5
×

Instagram app for Apple Watch

2,795 views

Published on

Proud to announce the Instagram team will be on hand to present the story of working towards the announcement at the Spring Forward event.

"The best of Instagram is now on your Apple Watch. You can browse your feed, like your favorite photos, and even leave emoji comments. And you’ll stay up to date with interactive notifications sent directly to your wrist."

About the speakers

Arnaud Coomans is a software engineer at Instagram. He enjoys developing iOS and WatchKit apps, and flying a house with balloons over Paris.

Ryan Nystrom is a Software Engineer at Facebook and lead author on the WatchKit by Tutorials book. He is a passionate open source contributor where he builds UI controls and frameworks for others to use and learn from. In his spare time he enjoys flying planes as a private pilot.

About the host

Ben Morrow is a developer, author, and hackathon organizer. With the Apple Watch community, he's been teaching tools and techniques for the past six months to be ready to launch apps when the new device is released. Find more video and code at http://happy.watch­ →

About the group

We're community of designers and developers who use tools like Swift and Sketch to craft experiences for iOS and for the Apple Watch. We learn by doing. Our meetups offer an avenue to connect together and work on projects.

Published in: Technology

Instagram app for Apple Watch

  1. 1. BuildingfortheAppleWatch
  2. 2. Ryan Nystrom @_ryannystrom Arnaud Coomans @acoomans
  3. 3. DESIGN
  4. 4. DESIGN Personal Holistic Lightweight
  5. 5. DESIGN •NewUIElements •SimpleNavigation •Glances •Notifications
  6. 6. DESIGN “Dothesimplethingfirst.”
  7. 7. DESIGN
  8. 8. DESIGN Images Buttons Labels
  9. 9. ARCHITECTURE •iOSApp •WatchKitExtension •WatchApp
  10. 10. ARCHITECTURE Event
  11. 11. Event Code Executes ARCHITECTURE
  12. 12. Code Executes UI Updated ARCHITECTURE
  13. 13. ARCHITECTURE DataTransfer&Latency
  14. 14. XCODE
  15. 15. XCODE
  16. 16. i18n •NSLocalizedString •Stringsfile •Storyboards
  17. 17. i18n Hello, world!
  18. 18. i18n
  19. 19. i18n 안녕하세요!
  20. 20. i18n
  21. 21. IMAGES
  22. 22. IMAGES •PutinWatchApptarget •Avoiddatatransfer •LoadviaStoryboard Local
  23. 23. IMAGES •UseURLcaching •Asyncfetching/decoding Remote
  24. 24. EXISTINGAPP ReusingCode
  25. 25. EXISTINGAPP Rebuilding
  26. 26. EXISTINGAPP
  27. 27. SESSIONS Please speak your password.x
  28. 28. SESSIONS
  29. 29. SESSIONS +
  30. 30. SESSIONS + =
  31. 31. HANDOFF Context
  32. 32. HANDOFF SmallScreen LimitedInfo BriefInteractions
  33. 33. HANDOFF - (void)updateUserActivity:(NSString *)type
                   userInfo:(NSDictionary *)userInfo
                 webpageURL:(NSURL *)webpageURL
  34. 34. NOTIFICATIONS
  35. 35. NOTIFICATIONS
  36. 36. NOTIFICATIONS
  37. 37. NOTIFICATIONS •CustomActions •WatchandiOS •APNCategories
  38. 38. NOTIFICATIONS FewpeopleuseAlerts
  39. 39. TESTING
  40. 40. TESTING •Can’tinitializeWatchKitclasses •NoStoryboardsintesttarget
  41. 41. TESTING April24,2015
  42. 42. WKInterfaceTable
  43. 43. IGInterfaceDataTable
  44. 44. IGINTERFACEDATATABLE
  45. 45. - (NSInteger)numberOfRowsInTable:(WKInterfaceTable *)table section:(NSInteger)section { return self.items.count; } IGINTERFACEDATATABLE - (NSString *)table:(WKInterfaceTable *)table rowIdentifierAtIndexPath:(NSIndexPath *)indexPath { return @"RowIdentifier"; }
  46. 46. IGINTERFACEDATATABLE - (void)table:(WKInterfaceTable *)table configureRowController:(NSObject *)rowController forIndexPath:(NSIndexPath *)indexPath { MyController *controller = (MyController *)rowController; [controller.textLabel setText:@"Hello!"]; }
  47. 47. IGINTERFACEDATATABLE - (void)table:(WKInterfaceTable *)table didSelectRowAtIndex: (NSInteger)rowIndex { NSIndexPath *indexPath = [table indexPathFromRowIndex:rowIndex]; if (indexPath) { // do something with the index path or data } }
  48. 48. DEMO
  49. 49. IGInterfaceDataTable
  50. 50. Q+A QUESTIONS?
  51. 51. THANKS

×