How To Develop A Simple Apple Watch Application Via The WatchKit

Apple has recently unveiled the beta version of WatchKit that possesses the proficient app development tools. With this, it has enabled developers to dive into the Apple Watch app development. And, the Xcode 6.2 beta that has been also released alongside has offered a more enhanced and improved environment for development using the latest Swift language.

For the folks who are interested in developing an application for the Apple Watch, getting your hands on the WatchKit is paramount. Here is an ultimate guide to create a simple application while implementing the efficient tools provided in the WatchKit.

How to configure a WatchKit application.

Presently, the app development by implementing the WatchKit is primarily performing on the iPhone, you will need to follow all the usual steps that one pursues for setting up an iOS application with a “Single View Application”. Simply, integrate a WatchKit app into an existing iOS app, and insert the targets of your app project. Here, the application is named as AppExample.

Under the iOS tab, go to the Apple Watch section and tap on the Watch Apple tab. As we are developing a simple application, only the Watch Apple option is turned ON on the New Target page, no other capability like notification is integrated into this app. With this the AppExample Watch App and the AppExample WatchKit Extension will be added to the target list. This WatchKit Extension is ideal for managing the code will execute on iOS devices only.

All the four targets will be now available under the Project Navigator, the code is executed on Extension part. The InterfaceController Swift file is available in the Extension section and the Interface.storyboard is in the Watch App section.

How to design the Apple Watch App Interface.

Since, the best conventions to create an Apple Watch application are still vague, it is advisable to go through the WatchKit Programing Guide and more guidelines offered by reputed Apple experts.

Here in this simple application, integrating the two groups will be fine. For this, first navigate to the Object Library and drag two groups (which are basically containers) onto the screen. Insert two buttons in a group (placed at the bottom) and a label to another group (placed on the top).

How to set the application layout.

Currently, the Apple Watch applications do not possess the Auto Layout function, and the most probable reason could be its simpler layout system. In this application, we are assigning a larger screen space to the upper group and the rest of the space will be provided to the two buttons in the lower group.

For this, you will need to make certain tweaks under the attributes inspector section for the group.

Set the width of the groups as “Relative to Container” and the constant value to 1. And since we want to make the height of upper group a bit larger than the other group.

Set the height of both the groups “Relative to Container” and the constant value for the upper group to 0.75 and the lower group to 0.25.

Set the size of the label as “Size to Fit Content”. To make it appear in the center position, set the Horizontal and Vertical positions in the position section as the center.

For buttons, set the constant value to 0.5 and by default it is set as “Relative to Container”. Leave it as it is without making any changes.

How and what to code in the InterfaceController.

The InterfaceController is located in the Extension target of the WatchKit. To begin the coding, simply navigate to an Assistant Editor. Here we will need to input a value into the Label and define actions for the two buttons used.

a) For this first drag and drop the elements of the interface component to the assistant editor. Let’s name the label as “Counter” and the two buttons as Increment and Decrement.

b) Set the “Connection” as Outlet to Action.

c) To create a property for the InterfaceController that holds the counter value with a zero default value.

Code Snippet:

  
    @IBOutlet var counter: WKInterfaceLabel!
    var ctr = 0

    @IBAction func dec(){
      updateCtrByAddingNum(-1)
    }

    @IBAction func inc(){
      updateCtrByAddingNum(1)
    }

    func updateCtrByAddingNumr(num: Int){
      ctr += num
      updateTally()
    }

    func updateCounter(){
      tally.setText("\(ctr)")
    }

    override init(context: AnyObject?){
      super.init(context: context)
      updateCounter()
    }
  

In the aforementioned code snippet, the updateCounter() method is just to keep the ctr and counter in sync with each other. The function UpdateCterByAddingNum() possesses an int type parameter and is coded to add an appropriate value to the ctr variable. This simple swift code is quite easy to understand and implement.

Points to be noted: The counter is a WKInterfaceLabel, not a UILabel. the “WKInterface” corresponds to the WatchKit components and behaves in a much different fashion.

How to execute this Apple Watch app.

With all these steps, your application is complete, and thus it is ready to be executed. Choose an appropriate iOS simulator to test this application. In the settings area, set to run the Apple Watch Application instead of iOS application. Just tap on the play button and wait for its response. Once the device will be all set to test your Watch application, navigate to the External Display menu under the Hardware tab and select a Watch display and initiate the testing process.

To test the application functioning, just tap on “+” and “-” buttons and watch the corresponding change in the value of counter.

Whether you are an amateur developer or well-versed developer, this simple is perfectly fine to check the interface design and other facets related to the Apple Watch and its recently released WatchKit beta and Xcode 6.2 beta. You will enjoy the coding in Swift with the enhanced Xcode 6.2 beta version. Creating an Apple Watch application while deploying the tools of WatchKit may get better with the stable release of the WatchKit and the latest Swift programming language. Currently, this approach covers all the introductory methods that brief the functioning of the WatchKit and offers a view of the Apple Watch app development at a glance.

Share your opinion

About the author

Author of this post
Victoria Brinsley is a Android app programmer with Appsted Ltd – a leading enterprise of mobile application development. If you want to explore Android app development cost, get in touch with her for best advices or assistance.

Follow our latest hunts

Facebook Twitter Google+ Instagram Pinterest

Loading...