Telerik blogs
apple_watch_hybrid_header

Article co-authored by: Michael Crump

The arrival of the Apple Watch has sent some developers scrambling to update Xcode and either create a new, watch-friendly app for distribution in this new ecosystem, or add a watch app as an extension to an existing iOS app to enhance a previously-developed project.

In our case, we wanted to use the arrival of WatchKit, Apple's new SDK for creating apps that can be used on your Apple Watch, to learn more about Swift, as well as to be an early entrant into this new part of the app store. In this article, we'll cover some tips and tricks that will help you write your own Apple Watch app - and avoid some of the pitfalls that we encountered along the way!

Designing for the Watch

The first thing you realize when you start working on a WatchKit app is that it is not a standalone app. WatchKit apps are nothing more than an extension to a standard iOS app that you may have already developed. If you already have a native iOS app and you want to create a WatchKit addition to it, then you just need to open Xcode, click Editor>Add Target, and add a WatchKit Extension, which can include the WatchKit app itself plus glimpses and actionable notifications:

1

If you want to create a completely new project, create it as you normally would in Xcode and then add the WatchKit Extension to it. While you don't have to build a complete app ecosystem -- full native iOS app plus WatchKit app attached to it -- the app store is not going to feature an app that is nothing but a WatchKit Extension app, and discoverability of your new app might prove to be difficult.

This 'add-on' architecture also impacts the way you need to design for the watch. Be aware that the watch is primarily a notification device. It works best when you need to do something quickly, like glance at a message, control your iPhone remotely to play a song or take a quick snapshot. The type of app you develop for the watch is severely limited by the amount of things we can currently do on this tiny screen. Maybe it's not worth it to create a watch extension for you iOS app. If your app is primarily video-based, for example, the answer is 'probably not'.

The short battery life of the watch has also dictated that the device 'sleeps' very frequently, and with no notice! This creates a problem for fitness apps that include timed workout intervals, in that the timer stops when the watch sleeps. Since there is currently no 'insomnia' plugin such as the one available for Cordova apps, some apps are trying workarounds such as essentially running on the iPhone, with the watch timer 'catching up' to the phone timer when it wakes up. As the watch evolves, it will be interesting to see how fitness apps evolve to adapt to this 'sleepy' proclivity.

Below are a few useful tips and code snippets that caused headaches in development, but are here ready-made for you to try!

Jen's Useful tip #1: Master-Detail Tables

One of the most useful sites to learn WatchKit development is Natasha the Robot's great website, full of tips and tutorials. I knew I needed to create a dynamically-generated master-detail screen with a list of the workout intervals along with the ability to tap a particular interval and perform just that part of the workout. Following this tutorial will help you build the initial table, but tapping on a table row should show just the interval along with a timer to complete the interval.

Build the visual elements of the table

To create a master-detail series of screens, you need to first build a table in your storyboard. Add elements like images and labels within table cells:

4

Populate the table

Now, populate the table dynamically by referencing an array of elements:

 

@IBOutlet weak var exerciseTable: WKInterfaceTable!

let exercises = ["Jumping_Jacks","Crunches","Wall_Sit","Lunges","Squats","Triceps_Dips","Plank","High_Knees","Pushups","Pushup_Rotation","Chair_Step","Side_Plank"]

override func awakeWithContext(context: AnyObject?) {
    super.awakeWithContext(context)
    // Configure interface objects here.
    loadTableData()
}

private func loadTableData() {

exerciseTable.setNumberOfRows(exercises.count, withRowType: "ExerciseTableRowController")

    for (index, exerciseName) in enumerate(exercises) {
        let row = exerciseTable.rowControllerAtIndex(index) as! ExerciseTableRowController

        row.interfaceLabel.setText(NSLocalizedString(exerciseName, comment:"translated exercise name"))
        row.interfaceImage.setImage( UIImage(named:exerciseName))
    }
}

 

Here, we have built a table that creates its rows by referencing images that are named the same name as the exercises in the exercises array, and by similarly showing labels that are a localized version of that exercise name (more on localization below).

Add the images

WatchKit requires that we add three versions of images to our watch app, so we create three versions of each of our workout images, sized appropriately for standard, @2x and @3x images, and drag them into the images.xcassets folder. Make sure to name them to match the elements of the array above so they can be placed into the table.

5

Add the segue

Ensure that the master scene has a 'push segue' from the master scene to the detail scene. Create a segue by right-clicking on the table of the master scene and control-clicking and dragging a push action to its subsequent outlet in the detail screen.

3

Create the detail screen

After building the detail screen in Storyboard, we need to ensure that when we tap a row on the master scene, the detail screen opens with the correct information displayed. To show the detail of the table row we tap, we simply override the awakeWithContext function to get the context of the row we just tapped, and show the image that is referenced:

 

override func awakeWithContext(context: AnyObject?) {
    super.awakeWithContext(context)

    if let exerciseName = context as? String {
        exerciseLabel.setText(NSLocalizedString(exerciseName, comment:"translated exercise name"))
        exerciseImage.setImage(UIImage(named:exerciseName))
    }


}

 

Jen's Useful tip #2: Localization

In my experience, the biggest driver of downloads is localizing, or translating, the text in your app. Luckily, I already had a spreadsheet prepared with the translations for the movements in this workout app, so I needed to just plug them in...but how?

To localize your watch app, click on the app project in Xcode, then the project name and go to Build Settings. Add a translation by clicking the '+' sign at the bottom. You may need to only translate elements in the WatchKit Extension area, so you can choose to add localizable files to only that area.

7

If it does not exist, add a file called Localizable.strings to your WatchKit Extension by choosing File>New>File and selecting Resource>Strings. The name of that file is important - ensure that it's called "Localizable.strings".

9

Your localizable strings files will be progressively added to your app as you add languages, and will look like name/value pairs:

 

Take_10 = "Pause 10 Secondes";
Get_Ready = "Préparez-vous!";
App_Name = "Sept Minutes";
Pushups = "Pompes";
Wall_Sit = "Chaise";
Side_Plank = "Planche Costale";
Jumping_Jacks = "Jumping Jacks";
Crunches = "Abdominaux";
Chair_Step = "Step sur Chaise";
Squats = "Squats";
Triceps_Dips = "Dips Triceps";
Plank = "Gainage";
High_Knees = "Montée de Genoux";
Lunges = "Fente Avant";
Pushup_Rotation = "Pompes Alternées";
Bravo = "Bravo!";

 

Finally, you need to ensure that your app will be able to load the various translations dynamically. Instead of hard-coding your labels, you use NSLocalizedString:

 

timerLabel.setText(NSLocalizedString("Get_Ready",comment:"get ready"))

 

Test your localizations by switching the language and reloading the watch simulator. Some languages are very verbose and might need to have wrapping of labels enabled.

10

View your localized WatchKit app in the simulator:

11

Michael's Useful tip #3: Apple Watch App Icon

You have just created a wonderful app that includes WatchKit. Your test are passing, it looks and feels great on both the simulator and on your device. It's time to ship it! But wait, you forgot about the App Icon. After you navigate to your WatchKit app and open Images.xcassets, you see the following screen :

appiconbefore

At a quick glance, that is eight different icons that you need to create. The good news is that if you have a 1024x1024 png, psd or jpg then you can use makeappicon.com.

Simply drag and drop your png, jpg or psd file into the "Toaster" and it provides a nice set of icons for not only your AppleWatch App, but Android and iOS apps!

iconsaftermakeappicon

Now all that you have to do is simply drag and drop them into your project and they will work regardless what size Apple Watch your user is using. Here is end result of my application using the generated icons:

appiconafter

Once the WatchKit app is deployed on your watch, your user has a nice rounded icon that they are greeted with.

icononmywatch

Michael's Useful tip #4: Deployment

The moment has come when you are ready to deploy your app to the App Store. Begin by selecting your iOS app and changing the device to iOS Device. Now select Product->Archive as shown below:

xcodearchive

This will bring you to a screen that allows you to Validate your application and submit it to the App Store.

archiveviewer

I usually begin by hitting the "Validate" button and, if Xcode detects an error, it is shown immediately with options to "Visit the Member Center" and so forth.

errormessage

In the case of submitting my first Apple Watch app, I had to actually go into the member center and create two provisioning profiles for both my iOS app and my WatchKit app as shown below.

iosprovisioningprofiles

Once that was complete, I was able to submit my application to the store.

successfulsubmission

After your app is uploaded to the store, all you need to do now is navigate to your iOS app and it will automatically detect that the app supports WatchKit and asks you to fill in the icon and upload up to 5 localized screenshots as shown below :

appsubmission

You already have an icon, so just drag and drop the icon into the placeholder. As far as the screenshots go, you can either use CMD-S from the Simulator or press and hold the side button on your Apple Watch, then immediately and, at the same time, press and release the digital crown. After you take a screenshot, you can find it in the Photos app on your iPhone.

Dear Apple...

We thought we'd conclude this article with a few items we'd like to add to our wish list for the Apple Watch. First, it would be great to have a way to make the watch stay awake - something in the settings, for example, that would make the device a little less 'sleepy'. Second, we currently can't control sounds or haptic feedback from our app's code. For a fitness app, it would be ideal to be able to mark intervals with a buzz or ping. Third, forcing developers to use Storyboards to define their app's content and flow make it very difficult to share your UI ideas and progress with a distributed team. Finally, we're on the prowl for more UI controls to use in our apps. Watch developers, what other things would you like to see as this new ecosystem matures and evolves? Add your comments below.


Jen Looper is a Developer Advocate at Telerik.
About the Author

Jen Looper

Jen Looper is a Developer Advocate for Telerik products at Progress. She is a web and mobile developer and founder of Ladeez First Media which is a small indie mobile development studio. In her spare time, she is a dancer, teacher and multiculturalist who is always learning.

Comments

Comments are disabled in preview mode.