How to build an Apple Watch App?

sridivya

The “Apple Watch”, is a tiny programmable computer that sits on your wrist. Apple describes the Apple Watch as  “a new chapter in the relationship people have with technology”.

By using WatchKit framework, we can build watchOS apps. Writing code for Apple Watch apps also means writing code to iOS app.

Here this blog illustrates how to create a simple WatchKit app with following features:

1.A simple page based navigation application.

2.The home page having an animation of images.

3.Then navigating to the first page having a table view with data.

4.Then navigating to the second page showing speech recognition with suggested phrases.

The projects you create for Apple Watch consist of two related bundles: a Watch app bundle and a WatchKit extension bundle.

Create New Project:

WatchKit is being released as part of the iOS 8.2 and Xcode 6.2 beta, both of which have been made available to developers today.

Go to XCode, from XCode toolbar select File->New->Project->and select watchOS tab, choose iOS App with WatchKit App and Click on “Next”. Give product Name as BasicWatchKitApp. Choose Language as Swift and click Next.Then select where the project to be stored.

Now Open BasicWatchKitApp WatchkitApp\Interface.storyboard.Then go to following steps:

Step 1: Drag an Interface Controller from the Object Library onto the storyboard canvas. With the interface controller selected, open the Attributes Inspector, set Identifier to home, then set Title as Home.

Next, drag a Label onto the same interface controller from the Object Library. Use the Attributes Inspector to make the following changes:
Set the Horizontal Alignment to Center;
* Set the Vertical Alignment to Top;
* Set Text as Home

Next, drag an Image onto the same interface controller from the Object Library. Use the Attributes Inspector to make the following changes:
* Set the Horizontal Alignment to Center;
* Set the Vertical Alignment to Center;
* Set Mode as ScaleToFill

Your interface controller should now look like this:

Home_InterfaceController

Step 2:  Drag another Interface Controller from the Object Library onto the storyboard canvas. With the interface controller selected, open the Attributes Inspector, set Identifier to first, then set Title as First.

Next, drag a Label onto the same interface controller from the Object Library. Use the Attributes Inspector to make the following changes:
* Set the Horizontal Alignment to Center;
* Set the Vertical Alignment to Top;
* Set Text as First Screen

Next, drag a UITableView onto the same interface controller from the Object Library. Goto Table->TableRowController->Group, open the Attributes Inspector, set Height to 38,

Next, drag a Label onto the Group from the Object Library. Use the Attributes Inspector to make the following changes:

* Set the Horizontal Alignment to Left;
* Set the Vertical Alignment to Center;
* Set Text as Row Name

Next, drag an Image onto the Group from the Object Library. Use the Attributes Inspector to make the following changes:
* Set the Horizontal Alignment to Left;
* Set the Vertical Alignment to Top;
* Set Mode as ScaleToFill

Step 3: Drag another Interface Controller from the Object Library onto the storyboard canvas. With the interface controller selected, open the Attributes Inspector, set Identifier to second, then set Title as Second.

Next, drag a Label onto the same interface controller from the Object Library. Use the Attributes Inspector to make the following changes:
* Set the Horizontal Alignment to Center;
* Set the Vertical Alignment to Center;
* Set Text as Second Screen

Step 4: Repeat Step 3 For creating Third and Fourth Screens.Make Sure that Third and Fourth Scenes, set Identifier to third/fourth, then set Title as Third/Fourth. Label text as Third Screen / Fourth Screen.

Open BasicWatchKitApp WatchKitExtensions and right click on that folder, click on New File, In iOS Tab, Select Cocoa Touch Class, click on Next, Give the class Name as FirstInterfaceController which is subclass of WKInterfaceController.

Now Open BasicWatchKitApp WatchkitApp\Interface.storyboard select your Home Scene interface controller. In the Identity Inspector, change Custom Class\Class to InterfaceController:

Now Open BasicWatchKitApp WatchkitApp\Interface.storyboard select your First Scene interface controller. In the Identity Inspector, change Custom Class\Class to FirstInterfaceController.

Now Open BasicWatchKitApp WatchkitApp\Interface.storyboard select your Second Scene interface controller. In the Identity Inspector, change Custom Class\Class to SecondInterfaceController.(Create SecondInterfaceController same as FirstInterfaceController class.)

Open BasicWatchKitApp WatchKitExtensions and right click on that folder , click on New File, In iOS Tab, Select Cocoa Touch Class, click on Next, Give the class Name as CustomTableRowController which is a subclass of NSObject. Now Open Interface.storyboard select your First Scene interface controller.Select TableRowController -> In the Identity Inspector, change Custom Class\Class to CustomTableRowController.Also, set identifier as CustomTableRowController in attribute Inspector.

Now it’s time to connect Segues and Outlets:

For creating Page Based Navigation, you need to include a “next page” Segue between your interface controllers. You can do by the following steps:

  1. Hold down the Control key and drag from the home scene to the first scene.
  2. A menu containing possible segues will appear. Select “Next page” Segue from that menu

In BasicWatchKitApp WatchKitApp/Asserts.xcasserts add images of your choice, since for showing animated images in Home. Images to be added as shown below.

AssertsView

Now Interface StoryBoard look like this:

InterfaceStoryboard

Add following Code Snippet in the corresponding controller and connect corresponding outlets.

InterfaceController is associated With Home. It displayed images in Animation.

First Screen and its associated FirstInterfaceController displays list of table data with image view and row number.

Second Screen and its associated SecondInterfaceController recognizes speech among the list of suggested phrases.Please note that Speech recognition can be tested on a real device, not in the device.

InterfaceController_Code (1)

SecondInterfaceController_Code

FirstInterfaceController_CodeCustomTableRowController_Code

To run BasicWatchKitApp, select a scheme for BasicWatchKitApp WatchkitApp and then select simulator.

Here are the sample screenshots of this BasicWatchKitApp when you run in the simulator.

HomeScreenFirstScreenSpeechRecognisation

SecondScreenThirdScreenFourthScreen

Finally, the source code can be download from GitHub through this link:

https://github.com/sridivyaTechjini/BasicAppleWatchAp

 

about the author

sridivya