Apple’s New Watch in a Nutshell Part 2 (Developer’s Overview)

Welcome to Apple’s New Watch in a Nutshell – Part 2 (Developer’s Overview)!

In the previous part of this series we gave on overview of Apple’s new watch from the wearer’s point of view.

In this part of the series we are going to analyse Apple’s new watch from the developer’s point of view.

If you have not read part 1, I suggest you do so before reading part 2.

 

Introduction

Before you can begin coding Apple watch apps, you first need to have an Apple developer license which costs $99 per year. You can register here.

Then all you have to do is download XCode beta 6.2 here and you are all set. XCode is the development environment you will be using to create your watch apps, and includes all you need to debug and test your app, and also provides the latest version of iOS to run your Apple watch apps.

 

The Apple watch app is composed of two pieces;

  1. The Watch Kit Extension, which runs on your iPhone and executes code based on user interactions on the Apple watch.
  2. The Apple Watch Apps & Their UI Elements, which are loaded from a bundle containing your storyboard and static resources such as images.

 

features

 

User Interface Elements

Most user interface elements are similar to those present in iOS apps.

 

New UI Elements

In addition to usual buttons, images, switches and sliders watch kit provides a few specialised elements;

  • A specialised separator object for showing visual breaks between UI elements.
  • Date & Timers are special types of labels that update their labels appropriately once instantiated, will run synchronously on their own and do not require any further developer intervention.

 

Groups

Groups are used for laying out elements.

  • Objects automatically flow downward from the top of the screen to fill all the available space.
  • Groups can be horizontal or vertical and can use margins or spacing.
  • Groups can use background images or colours to to design how they look.
  • Nested groups allow for sophisticated interfaces to be organised.

 

Tables

Tables in Watch Kit which are very similar to those in iOS apps.

  • Several different types of rows are available such as header, footer and content rows.
  • Each type of row can have a different design in interface builder.

 

Maps

A map object displays a non-interactive version of a map interface.

  • It is basically a snapshop of a map, which has been rendered using Watch Kit.
  • The map does not pan or zoom but tapping the map will take the wearer to the maps app on the Apple watch.

 

Side Note

  • All UI elements height and width can be set to fixed or relative values, based on the available screen space.
  • UI elements alpha values can also be used to show and hide elements.

 

apple-watch-selling-points

 

WatchKit Framework

WKInterfaceController

  • This is the main subclass for your Apple watch app and each WKInterfaceController subclass manages the UI elements for a single screen of content.
  • This class sets the initial values for UI elements, responds to user interactions and updates UI as appropriate.

 

  • Outlets may be added to each UI element and control the transfer of information between your Apple watch and and your Watch Kit extension.
  • In addition to outlets, you can set up action methods for the interactive elements of your storyboard.
  • As with outlets, you connect each action method to a UI element and when the wearer interacts with that UI element, the action calls the code that was placed by the developer inside of that action method.

 

WKInterfaceDevice

  • The WKInterfaceDevice provides device specific information for configuring your Apple Watch  app.
  • [[WKInterfaceDevice currentDevice] screenBounds] will dynamically size your apps interface to fit either of the screen sizes (38mm & 42mm) on which the Apple watch will be available.
  • Current Locale: allows you to format strings, numbers and other user facing content appropriately.
  • preferredContentSizeCategory ensures screen text can be adjusted dynamically to make sure all text takes full advantage of the watch’s built in text styles.

 

 Notifications

  • Notifications can either be local or remote & you can use callbacks in the interface controller subclass class to respond to each type.
  • Notification category types are used to provide a different customised UI for each type of notification. You set the category on each notification entry point in your storyboard.
  • With each custom notification you provide, you will also have to provide a static version of the UI.

 

  • Each notification can provide action buttons which will launch your watch app & direct the user to the appropriate location within your watch app.
  • The iOS simulator in XCode supports testing and debugging custom notifications.
  • Through the simulator, you can test your custom notifications through the use of push notification payload JSON file you can provide data to display in the simulator.

 

apps, glances, notifications

 

Advanced

Handoff API in WKInterfaceController

  • This is used in glance & notification interfaces to create deep links into your main app (on your iPhone).
  • You use this API to package up relevant information about what the users is currently doing on your Apple watch interface and pass this info to your apps main interface controller, which can use info to present diff interface upon launch.
  • This allows wearer to move between the Apple watch and their iPhone to engage in your app for a longer period of time.

 

Animation

  • Animation is done by displaying sequential images.
  • Each image is a separately named image resource.
  • The animation will be displayed through the system looping these images repeatedly.
  • You can also specify a range of images to animate over a specific duration with a defined repeat count.

 

Image Cache

  • Images can be cached before you may need them using WKInterface device cache.
  • You can store up to 20MB of images on the watch app.
  • This is a great way to dynamically generate content and have it display in you watch app before you actually need it.

 

Settings Bundle

  • If you have watch app settings you would like to provide for wearers, you can use a settings bundle similar to IOS, which is exposed in the watch app on iPhone.

 

Sharing Data

  • You should leverage your existing iOS app for your data needs on your Apple watch app wherever possible.
  • Using app groups and NSUserDefaults you can share information between your iPhone app and your Watch Kit extension.
  • For access for other resources, such as a core data store, use a shared container between your iWatch app and your Watch Kit extension.
  • This makes data access simple and ensures data is always up to date between your iWatch app and your iOS app.

 

Frameworks

  • If you wish to share code between both your watch app and your iOS app, this can be done through the use of frameworks.
  • This is a also a great way to make sure bug fixes need only be fixed in one place.

 

Conclusion

There you have it!

An overview, from the developers point of view, of Apple’s new watch & the Watch Kit extension.

If you liked this post, please don’t forget to share it! It really helps :)

Next: How to create a simple Apple watch app in XCode with Sample Data.