Making A WatchKit App: A Step-By-Step Tutorial

Making apps for Apple Watch is something on the minds of every dedicated iOS developer across the world. Here is a stagewise, detailed description of how you can create a demo WatchKit application.

Any iOS app developer worth his/her salt would be aware that Xcode 6.3 beta has been released along with Swift 1.2. This is the framework to be used for making apps for Apple Watch – with WatchKit (released in mid-November). With all due respect to the ‘large’ iPhone 6 and 6 Plus, Watch is probably the most exciting gadget from the Cupertino company in recent times. With the launch of the much-hyped smartwatch looming in April 2015, here is a step-by-step guideline on how you should go about making a WatchKit application:

1. Know the basics – First, a bit of theory. Third-party app developers need to know that there are two separate things that need to be worked on together, for making a Watch application. The first of them is the WatchKit app itself, which has all the resource files (including storyboards) and documents for developers. The second is the WatchKit extension, which provides the coding support for customizing the UI of the apps. The former is present in Watch, while the extension resides in the paired iPhone. You must be aware that Watch HAS to be paired with an iPhone to be of any real use, right?
2. Get the latest version of Xcode – Many indie app developers are making the the mistake of working with outdated Xcode versions, while trying their hand at making WatchKit apps. Do not make the same folly, and head over to https://developer.apple.com/xcode/downloads/, to download Xcode 6.3 beta. It comes with 6D520o build, and has the entire OS X Yosemite and iOS 8.3 beta SDK support. If your Mac system is not updated, now is the time to move on to Yosemite. (Note: You can start off with Xcode 6.2 beta 5 as well, although that is not advisable).
3. Start a new project – Mobile app developers working with Xcode will be familiar with this stage. all that you have to do here is select a ‘Create A New Project’ option (File → New → Target) on the Xcode beta screen. You will find 5 alternative templates displayed – choose the ‘Single View Application’ option from them. Save the project in the usual manner.
4. Move over to Watch app – Any iOS app development project starts off with the previous step. From this stage, you will be focusing on making an app for Watch. When you select ‘Target’ (under ‘File → New’) a new window will appear, with the ‘Watch app’ icon. This is the template for creating WatchKit apps with the extension on the paired device. Select it, and you are good to go.
5. Fill up the required fields – On the next screen, you will find a short form, which needs to be filled up. Note that some of the fields (for instance, product name, are pre-entered and cannot be changed). Put in your organization name (if you are a freelance app developer, put something here that will be easy to remember). Make sure that you select Swift as the programming language. Once you are done with filling up the form, hit ‘Finish’. In case you find that the screen has become unresponsive, you might have to reinstall Xcode all over again.
6. To check or not to check? – Most early WatchKit app development experts are recommend unchecking the ‘Include Glance Scene’ and ‘Include Notifications scene’ options on the screen (which came up during the previous step). However, if you do wish to create an application with an active notification interface, you can leave that option checked. An extra file for bug-testing the interface will automatically created. In case you keep the option unchecked, the same file has to created manually later on. For developers working for the first-time with WatchKit, starting with no Notifications and Glances scene options should be the way to go. More elaborate projects can always be tackled later.
7. The bundle IDs will now be configured – If you have completed the earlier steps correctly, the bundle IDs of the WatchKit app as well as the WatchKit extension will be configured now. In your Xcode iOS project, separate files will be added by the framework to the different targets (app and extension). You will find that these two bundle IDs match with that of the related iOS application. If the three are not in sync, there must have been some errors in the earlier setup.
8. Make a new label – You had selected the ‘Watch App’ template under ‘Target’, right? Now, you will need to add a label to the playground. Doing so is simple enough: click on the ‘Interface.storyboard’ option in the BitWatch Watch App group. The storyboard will display a blank interface controller, on which label(s) have to be added (for starters, try out ‘Hello World’). You can drag and drop a label from the object library, and add button(s) above or below it. On the right-hand side, you will find options to specify the ‘Position’ of the label. Both the horizontal and the vertical fields should be set to ‘Center’.
9. No AutoLayout – This is a significant departure of WatchKit from generic iOS app development tools. While adding labels and buttons, you will find that the objects can be added/modified ONLY vertically (i.e., on top of one another), and not in any freestyle form – as is generally the case with the usual iOS dragging options. Instead, on Apple Watch, all objects have to be ‘pinned’ on something else (other objects, screen edges, etc.). Since the screen real estate on Watch is small, the absence of Auto Layout does make sense, and ‘pinning’ is good enough for giving your app a streamlined appearance.
10. Connect Outlets with Actions – This part might feel slightly confusing for first-time WatchKit app developers. After all, the storyboard is in the Watch (WatchKit app), while the codes are all stored in the paired iPhone (WatchKit extension) – so how are they supposed to connect with each other? Well, you need not worry too much over that, since this wireless connection between Actions and Outlets is established via Bluetooth (this is part of Apple’s setup for WatchKit). To make the connection, navigate to the ‘Assistant editor’ window, and check if ‘InterfaceController.swift’ is visible (if not, try refreshing the window). Make an outlet (in the InterfaceController class), click on ‘Connect’, drag a button to the class, choose ‘action’, and click ‘Connect’ once again. That’s it – the Actions and Outlets should now be in sync.
11. Test your WatchKit app – Just like regular mobile app testing, properly testing apps for Apple Watch is also of paramount importance. Once you have built and run the app, move it to the iOS Simulator. Enable ‘Apple Watch’ as the ‘External Display’ device. Under Hardware → External Displays, you will find two alternative Watch options (38 mm and 42 mm). Test the app for both. There should be two simulator windows (one for Watch, the other for the paired iPhone).
12. Next up, run your app – Okay, now you are almost done. iOS app developers only have to run their WatchKit applications at this stage. For the purpose, there is a full list of iOS device simulators under ‘WatchKitDemo Watch App’. Run the app on all the simulators – right from iPhone 6 and 6 Plus, to iPad Air and iPad Retina. You can test the app in different screen resolution levels as well.

For testing WatchKit apps, a notifications payload (e.g., a JSON payload) has to be specified to the interface. The scheme editor comes in handy for this purpose. The app interface can be customized further, by adding images and other objects. Invest some time on getting a proper feel of the WatchKit App architecture – once you have done that, you will find that creating apps for Watch is fairly simple!