How to make your first Apple Watch App

ahmet yalcinkaya
swiftist
Published in
4 min readMar 5, 2015

--

In 5 Steps

Step 1: Install

First of all, we need an Xcode version with Watch Kit support. When I write this tutorial, latest version is Xcode 6.2 beta 5 with WatchKit. Developers can download this version from Member Center (here).

After you download Xcode, double click the Xcode_6.2_beta_5.dmg file to install.

Step 2: Create Project

Open the Xcode and click “Create a new Xcode project”.

Then select “Single View Application” to create an empty project.

Fill the Product Name, Organization Name and Organization Identifier as you like. Choose Swift or Objective-C for the language, and devices as you want. Click next, then select a directory for project and finish.

Now we have a project, and we want to develop some features to work on Apple Watch. We will add Apple Watch as a new target for the iOS Apps.

Step 3: Add Apple Watch Target

With WatchKit support of Xcode, there is a “Apple Watch” section in the Targets.

To add a new target, click File -> New -> Target.

Here you can see the Apple Watch section. Click it and chose the Watch App.

Fill the form as you want. Here you see Notification and Glance options. In this short tutorial I don’t explain what is Notification and Glance Scene. If you need them in your project, it is good to check this boxes. Xcode will add them for you. Don’t worry if you didn’t check them, you can add them manually whenever you want.

and click Finish.

Congratulations. You create your first watch app ☺

Step 4: Make some cool stuff

Now you have a project with Watch App. Your project structure should look like this.

You see 2 directory added to your project. WKExample WatchKit Extension and WKExample WatchKit App.

WKExample WatchKit App provides a storyboard where you can design your Watch App.

WKExample WatchKit Extension contains the classes you need to write Watch App. You can create new classes and write your code files here.

Have you seen the Interface.storyboard ? This is where you design your Watch App. It is almost the same as the iOS Storyboard files. You have an initial Interface created for you here.

Drag a Label and a Button from the Object Library(on the right side of the Xcode) to the Interface Controller.

Interface in Watch App is a little bit different from iOS Apps. In WatchKit there is no auto layout. Objects have Horizontal and Vertical Positions.

You can also see Size properties here. You need to set width and height properties of the object. You can give fix values with Fixed or make it the same size as its content with Size To Fit Content or make its value depends on the container with Relative to Container.

Click the label and play with the values here.

Step 5: Finish it and run

Now it is time to see what you have done here. Run the Watch App target of your project. (WKExample WatchKit App in here)

Here is the final version of this project.

If this is not cool enough for you, Download Bezel from here. Bezel copies the simulator screen to an Apple Watch screen. Looks like this:

Thank you for reading this article.

Please add a comment if I forgot something.

Recommend this to share your love and spread this tutorial. Follow me and Say Hi from Twitter @ayalcinkaya_

--

--