On the 9th of December, Apple announced its ‘Best Of App Store’ list for 2015. ‘Dark Sky’ – a weather based application – bagged the ‘app of the year’ award for Apple Watch (for iPhone, ‘Periscope’ was the winner). The Cupertino company has also already released the watchOS 2.1 update – and initial reviews of it from developers worldwide have been positive. The spurt in interest in making apps for Apple Watch is pretty much evident from the fact that, the total number of WatchKit apps developed by third-party developers is closing in on 12000 at present – a big jump from the 1500-odd figure in June. In what follows, we will provide a basic outline about making apps on the watchOS 2 platform:
- Download the latest version of Xcode – Many iPhone app developers have reported that Xcode 7 does not have the Watch simulator for applications – and hence, getting the upgraded Xcode 7.1 version would be advisable. Check whether the project wizard has a dedicated watchOS section in the left panel – between the iOS and the OS X sections. Click on watchOS → Application, and then choose ‘iOS App with WatchKit App’. This is the template you will be working with.
- Understand the ‘peer-to-peer’ architecture – Before getting down to actual coding, it is vital for WatchKit developers to understand the underlying system architecture of watchOS 2. Unlike its predecessor, the new Apple Watch OS allows the WatchKit extension of applications to remain and operate in a native manner within the smartwatch (earlier, WatchKit extensions used to reside inside the paired main iPhone app). In other words, with watchOS 2, the logic of WatchKit apps can now be present in the Watch itself.
- Enter the first set of details – On the screen that appears after you have selected ‘WatchKit App’, enter the information required. Apart from the ‘Product Name’ (choose something simple, like ‘My First Watch App’) and the ‘Organization Name’, you will have to select the ‘Project’ and the ‘Embed In Companion Application’, from the respective drop-down options. Most new watchOS 2 app development projects will be done in Swift – so choose that as the ‘Language’. For a basic Watch app, the boxes below ‘Language’ are not required…uncheck them all. The setup for making your Watch app is now ready.
- iCloud support will no longer be present – watchOS 1 had full support of iCloud technologies, but Apple has changed things up with the latest iteration of the watchOS. The paired iOS companion application is now in charge of performing the same tasks. What’s more – this information/results are transferred wirelessly to the WatchKit extension. On the other hand, managing files on Watch and its paired iPhone separately and locally is important, if a WatchKit app is heavily dependent on the connected iPhone application for data. Keep in mind that there is no automatic data backup feature in Apple Watch yet, and backups have to be taken from the iPhone.
- Know the folders in Project Navigator – Okay then, after setting up the app project in Xcode 7.1, you will need to get familiar with the revamped ‘Project Navigator’ screen of the IDE. In particular, those who make mobile apps should have in-depth knowledge about the purpose of three folders here: I) Demo WatchKit App, where all the main resources, as well as the storyboard files of the application are stored, II) Demo WatchKit Extension, which is the location for the ‘logic’ of the app, i.e., the source files of the app extension, and III) Demo, which houses all the resources and information about the iOS companion application.
- Playing video files in Watch app – watchOS 2 has come with an impressive array of new UI elements, and among them, WKInterfaceMovie has come in for particular praise from the contingent of iOS app developers. This component helps in integrating audio and video within the WatchKit application. All that you have to do is connect the IBOutlet in the app code with the new audio-video UI component in the Object Library (after dragging it to the main storyboard interface). Within your project, WKInterfaceMovie must reside inside the WatchKit extension, since the former supports only the URLs of local files. Add movie to the component by the command line setMovieURL:. Practically every feature of the videos in Watch apps can be customized – right from loops and gravity, to poster images.
- Configure Xcode and run your app – Before moving on to other interesting tidbits about developing apps for the watchOS 2 platform, let us build and run the basic application that you have already created. From the active scheme (Demo), select ‘iPhone 6 + Apple Watch – 38 mm’ and hit ‘Play’. Both the Apple Watch simulator as well as the iOS simulator should simultaneously appear in the Xcode dock. In case the Watch simulator is not visible, you will have to activate it from the iOS Simulator and click on ‘Show App on Apple Watch’.
- Real property animation arrives on watchOS 2 – All that the first version of watchOS had in the way of animations were lengthy sequences of static images. On the updated version of the OS, WatchKit app developers finally get the chance to include property animations in their applications. Within the IBOutlets of the code, you will need to add the WKInterfaceButtons (3) and the WKInterfaceImage. Values can be easily set for all the animation attributes, like background colour, alignment (horizontal vs vertical), alpha, and insets of group content. There is still a lot of room for improvement in the animation features on watchOS – but professional animators working on the Apple platform at least have been given a chance to get creative with their Watch apps.
- Use the new APIs – One of the best features of watchOS 2 for developers is the slew of new, usable APIs it has come with. It’s time to check out a few of them. Navigate to Demo WatchKit App → Interface.storyboard, and include the ‘slider’ and the ‘button’ components to your project. ‘Pickers’ are handled by ‘WKInterfacePicker’, in the same manner as they are managed by ‘UIPickerView’ in iOS projects. With the help of the Digital Crown of Apple Watch, you can browse through the objects of ‘WKPickerItem’. Stacked, List and Image Sequence are the three different ways in which items can be viewed in ‘WKPickerItem’. For the ‘button’ component, you only have to drag-and-drop it to the ‘InterfaceController’ and name the Action correctly (showAlertPressed). You can play around with the ‘sliders’ component as well.
- Alerts and Actions – Experts from the field of iPhone and Watch app development have liked the new system for generating message alerts on watchOS 2. The platform has 2 separate options – ‘WKControllerAlertStyleSideBySideButtonsAlert’ and ‘WKAlertControllerStyleAlert’. As its name suggests, a maximum of two buttons can be horizontally placed with the first one, while the second option is for placing buttons vertically. There is yet another style, named ‘WKControllerStyleActionSheet’, which defines the features of the action sheet. There can also be three styles of buttons – Default, Cancel and Destructive (the first is present in most cases, while the last is shown when users are about perform a critical action, like data deletion). These buttons are created with ‘WKActionStyleDefault’, ‘WKActionStyleCancel’ and ‘WKActionStyleDestructive’ respectively.
- Make a Controller and connect the Outlets – Let us now get things organized and sorted out. WatchKit app developers need to click ‘watchOS → Source → WatchKit Class → Next’ (in the dialog box that pops up after ‘New File’ is chosen from ‘WatchKit extension’). The controller class has to be named, along with the name of the subclass this controller will be a part of. Outlets can then be added to the controller, with the help of the ‘Identity Inspector’. Simply select ‘Watch → Interface.Storyboard’, and add a ‘Custom Class’ to the Controller you have just created. You should now be good to connect the outlets and pass information to them.
- Including customized sketches and drawings – Native apps for Apple Watch can finally have custom drawings and figures – although there is no ‘UIView’ for the watchOS platform yet. App UI/UX designers can use tools like UIBizerPath and Core Graphics (for this, a prior knowledge of 2D Quartz programming will come in handy). After the ‘WKInterfaceImage’ component is brought inside the main storyboard interface and connected to ‘IBOutlets’, drawings can be made – including charts and graphics. If you wish the app image(s) to cover the entire screen real estate of Apple Watch, select the ‘Relative’ file size option in ‘Container’.
- Add and populate tables – For this, developers have to go to the ‘Attributes Inspector’ in the ‘Interface Controller’, and set the ‘Identifier’ and ‘Title’ first. Once that is done, a new table can be imported from the Object Library (to, of course, the interface controller). The ‘Table Row Controller’ is present in the drop-down navigation menu. Adjust the color and alignment of the table, along with its spacing properties. To populate this table, you will now have to drag from the ‘Table’ to the ‘ScheduleInterfaceController’. This creates an outlet, which populates the table. ‘Row Controllers’ can also be added.
- Migrating from watchOS 1 – Several indie developers as well as mobile app companies already have portfolios of Watch apps – which need to be ported to the watchOS 2 platform (just like how older iPhone apps are made compatible with new versions of iOS). To migrate an existing app for Apple Watch, open it in the latest Xcode version. A notification will flash at the bottom of the ‘Issue Navigator’ screen. There is a ‘Perform Changes’ button under that – and when it is clicked, the existing project is migrated to watchOS 2.
Note: In case you wish your WatchKit app to serve both the versions of watchOS, creating separate executables and targets will be necessary. Code-sharing, in particular, might be an issue, since the app development principles and architecture differ significantly between the two.
Since the launch of Apple Watch, there has been an increase of around 280% in the number of native apps for the smartwatch, developed by third-party app agencies. While the first set of these applications were nothing to write home about, WatchKit app developers are gradually managing to come up with better concepts and ideas. The arrival of a separate app store for Watch apps has been a boost, and watchOS 2 is a lot more developer-friendly than the earlier version as well. Making apps for Apple Watch can be challenging and a lot of fun – you need to invest some time to learn the basics, and then get into it.
Hussain Fakhruddin
CEO at Teknowledge Software
Hussain Fakhruddin is the founder/CEO of Teknowledge mobile apps company. He heads a large team of app developers, and has overseen the creation of nearly 600 applications. Apart from app development, his interests include reading, traveling and online blogging.
Latest posts by Hussain Fakhruddin (see all)
- How do mobile apps help small businesses? - October 10, 2019
- Top 15 Mobile App Ideas For 2020 - October 1, 2019
- Top 15 Software Development Trends To Watch Out For In 2020 - September 18, 2019