Apple Watch Development: A Step By Step Tutorial

Apple watch development has been an area of interest since the watch was released last year. If you are already familiar with writing iOS apps using Xcode with the Swift language, this will give you a very quick insight into building an application for the watch. If you are new to the Xcode interface, this tutorial will walk you through the process of building your first Apple Watch app.

Xcode has a very unique interface. If we were writing Java code for an Android application, you could literally copy code from one source and paste it into your project and it will work. However, Xcode doesn’t work like that. There is a considerable amount of linking that must take place in the background. It’s not enough just to write the code. It’s very important that the developer know the Xcode interface and how to connect objects on the storyboard to the appropriate Swift file. For that reason, the code for the application in this tutorial is relatively simple. This will allow you to focus on building the application in the Xcode interface.

Apple Watch Development: Create the Project

Just before starting, make sure that you have the latest version of Xcode. It is a free download from Apple. Open the App Store and search for Xcode. It is currently close to 4.5GB, so give yourself some time to download and install it.

Once Xcode is installed/updated, launch Xcode. If a dialog box does not open up, click on the File menu option and choose New and then choose Project. Figure 1 shows what the menu option would look like. If the dialog box does appear on your system, click the Create a New Project as shown in Figure 1.

new ProjectFigure 1 – Making a new Project

Xcode will display a dialog box asking you to select a template. Notice the category watchOS. Click on the Application under the watchOS category.

There is currently only one icon in that category. Click the iOS App with WatchKit App as shown in Figure 2. Then click the Next button.

Type of ProjectFigure 2 – Select the Type of Project

The next step is to fill in the options that you’ll need for the project. Figure 3 shows the selections used for this tutorial. Before setting your options and clicking Next, take time to read some of the options. For example, even though the Watch iOS App was selected, you’ll notice that the Devices pull-down menu is set to iPhone. It will either be iPhone or Universal. This option is here is because you can NOT create a watch app without having an iPhone or iPad or both (Universal) companion app to go along with it.

This app does not require a Glance view. A Glance view is what appears when you bring the watch up and look at some small details from your app. This is a little more complex and is outside the scope of this first tutorial.

The Complication option is an interface that covers the original face of the watch. It blurs the background of the watch and then displays information from the app you’re creating. This option is also beyond the scope of the project, so leave this option turned off.

Type in Tip Calculator in the Product Name. The Organization Identifier has to be unique so most developers use a reverse domain name. Feel free to change the Organization Name and the identifier as you see fit.

Fill in OptionsFigure 3 – Fill in Options for the Project

The Xcode interface can be a little overwhelming at first. However, as you navigate through it, it becomes very logical. This tutorial will guide you through the interface and explain the different sections as you work in that area.

The first thing to look at is the left panel that has a listing of folders and files. Figure 4 shows a few of the folders that are open. Like many other programs, clicking on the triangle to the left of the folder will expand or collapse the folder.

Files and FoldersFigure 4 – Files and Folders in a Project

Here are four important things to keep in mind:

  • Files ending with .swift is where you type your code
  • Files ending with .storyboard is where you design the interface
  • The top “Tip Calculator” folder is for the iPhone only
  • The “Tip Calculator WatchKit Extension” is for the Apple Watch

As was noted at the start of this apple watch development tutorial, the AppleWatch app requires a companion iPhone or iPad program. At the time of writing this tutorial, Apple does not let you create just a Watch App. This tutorial won’t deal too much with the iPhone code. We will focus on the Apple Watch interface and code.

Set the Devices

Before designing the interface for the watch app, you should setup Xcode to let it know that when you preview the app, you want to preview both the iPhone and the Apple Watch. At the top left of the interface, you should see the name of your application. Click on the Tip Calculator to open the pull-down menu as shown in Figure 5.

Add the WatchFigure 5 – Add the Watch as a Device

Once the pull-down menu is open, select Tip Calculator WatchKit App. From the fly out menu, choose iPhone 6s Plus + Apple Watch 42mm.

There are two different sizes of watches. The smaller one is 38mm and the larger one is 42mm. Apple highly recommends that when you design the interface for the Apple Watch, you keep both the 38 and 42mm interface the same. Once you start designing the layout of the watch, this tutorial will show how to select one size or the other or keep it set to Any Screen Size.

Designing the Interface

As you are aware, there is a limited amount of space on the Apple Watch compared with the iPhone. It would be a good habit to draw out, even on paper, what the Apple Watch interface would look like. There are typically two rules to keep in mind:

  • The watch interface can stack five rows of content without any scrolling
  • A row can store up to five buttons

If the interface design exceeds five rows, the interface will then automatically allow scrolling either through the watch dial or using a swipe gesture. While it is also possible to put more than five buttons in a row, it will be too small for most users’ fingers.

The interface that you are going to create will take all five rows. The rows are:

  • Row 1: Numbers 1-5 (five buttons)
  • Row 2: Numbers 6-9 and 0
  • Row 3: Label with the price of the bill
  • Row 4: Three buttons with check marks that determine the tip percent
  • Row 5: Label with the price of the bill and tip included

Many developers are familiar with a number of Adobe products such as Photoshop. With all Adobe products, the panels storing a variety of tools and settings can either be docked or floating. The Adobe interface can also be customized to suit the preference of the user. Xcode, however, is not like that. The interface is not as dynamic but it does allow some flexibility in the way of showing or hiding three three panels. Figure 6 shows where the buttons are located to show and hide panels.

Show/Hide panels buttonsFigure 6 – Show/Hide panels buttons

To save a bit of space in the Xcode interface, close the Debug (bottom) panel.

Interface Library Objects

If you have developed apps in Xcode for the iPhone or iPad, you’ll know there are about 19 objects in the Library pane that are included. However, when developing apps for the watch, there are fewer objects to use. Here is a current list of objects:

  • Group
  • Table
  • Image
  • Separator
  • Button
  • Switch
  • Slider
  • Label
  • Date
  • Timer
  • Map
  • Menu
  • Menu Item

While there are three different types of labels (default, date, time labels), they are still labels.

The tip calculator interface will use the group, button and default label objects.

Building the Interface

In Apple watch development, the first step in building the interface is to display the watch interface. In the Navigator panel on the left side, make sure that the Tip Calculator WatchKit App folder is open. Click on the file Interface.storyboard.

To build the interface, start by searching for the Group. At the bottom of the Library pane, type in Group in the Filter. Figure 7 illustrates what it will look like.

Search for Group ObjectFigure 7 – Search for Group Object

Drag the Group object from the pane to the watch Interface Controller. Your watch interface will look similar to Figure 8.

Group AddedFigure 8 – Group Added to Interface

In the Utilities panel (right hand side), locate the Height parameter. Change the parameter to Relative to Container as shown in Figure 9.

Adjusting the group heightFigure 9 – Adjusting the group height

The Group object now takes up the entire watch screen. Underneath the Adjustment pull-down menu is the Height. By default it is set to 1. It means that this group is set to the size of the watch. Change the Height to 0.2. This will allow you to put five groups on the watch. Notice how the Group is much smaller.

Now it’s time to add the number buttons. There are a number of steps you’ll need to do to configure the button. Below are the steps to configure the button:

  1. In the Filter input at the bottom of the Library pane, type Button. Drag a button inside the Group object.
  2. Double-click on the word Button. Change the value to 1. It will look like Figure 10.Button 1Figure 10 – Button 1 Inside the Group
  3. In the Utilities panel near the top, locate the Background section. Change the background Color to a dark blue.
  4. Locate the Size section. Change the width to 0.2. This will allow five buttons in one row. (5 x 0.2 = 1). Figure 11 shows what the Inspector pane will look like.ConfigurationFigure 11 – Configuration of the Button
  5. Copy the newly formatted button (Cmd+C) and paste the button in four times (Cmd+V). The interface should look like Figure 12.Five ButtonsFigure 12 – Five Buttons in the Group
  6. Double-click on the number inside the buttons and change their values so they range from 1 – 5.
  7. Select the Group from the Interface Controller Scene. Copy the Group (Cmd+C). Then paste the Group. The interface and the Interface Controller Scene will now look like Figure 13.Second Group AddedFigure 13 – Second Group Added
  8. Change the numbers in the second row so it reads 6, 7, 8, 9 and 0.
  9. Notice how all of the buttons have their text labels near the bottom of the group. To fix that, select the numbers from 1 to 5 in the Interface Controller Scene tree. In the Utilities pane, change the Height of the button to Relative to Container.
  10. Repeat step 9 for the second row of numbers.
  11. Clear the filter from the Library pane and type in Group. Drag another Group object and place it under the number.
  12. Change the Height of the Group to Relative to Container.
  13. Set the Height value to 0.2.
  14. Selecting the group either in the interface or in the Interface Controller Scene tree, make a copy of the Group object and paste it in two more times. The completed interface will look similar to Figure 14.Interface with all GroupsFigure 14 – Interface with all Groups
  15. In the filter in the Library pane, type button. Drag a button to Group 3.
  16. Double-click on the text Button and change it to “C”.
  17. Set the background color to an orange color.
  18. Set the width of the button to 0.4.
  19. Change the Height to Relative to Container.
  20. In the filter in the Library pane, type label. Drag a label to Group 3.
  21. Double-click on the Label text and change it to “$0.00”.
  22. Click on the left node on the label and stretch it to the right side of the watch interface.
  23. In the Utilities pane, select Right Align in the Alignment section.
  24. Set the Height to Relative to Container.
  25. Change the text color to a green color. Your interface should look like Figure 15.Completed Group 3Figure 15 – Completed Group 3
  26. At this point, we will skip Group 4 and address that later. Grab a Label and drag it to Group 5.
  27. Change the Label to “Tip Inc:”.
  28. Set the Width Size to Relative to Container.
  29. Change the width to 0.4.
  30. Change the Height to Relative to Container.
  31. Drag a second Label and drop it off on Group 5 to the right of the “Tip Inc”.
  32. Change the text in the label to read “$0.00”.
  33. Set the Width Size to Relative to Container.
  34. Change the width to 0.6.
  35. Change the Height to Relative to Container.
  36. Stretch the label so it touches the right side of the screen. Set the alignment to right justified.
  37. Change the color to light green. The completed interface should look like Figure 16.Completed InterfaceFigure 16 – Completed Interface

That is it. The interface is almost done. Just one more job and then you start coding the app.

Buttons with Pictures

With the Apple Watch, there is no keyboard to input text. You can incorporate the voice recognition in conjunction with Siri to input text. However, that cannot be tested in the simulator. Therefore, to input values for the percent of the tip, we will use three different buttons. Each button will have a graphic. The buttons look like this:

  • Button 1: check 1
  • Button 2: check 2
  • Button 3: check 3

These images were quickly made in Photoshop. They are about 39 x 27 in size. Notice that the button 2 graphic has a grey bar on both the left and right hand sides. Once the button is in place, you’ll see why.

Before making the buttons, the images have to be imported into the project. The easiest way to do this is to use Finder to drag the images into the project. Either download the images with this tutorial or create your own images. Figure 17 shows the process of dragging the images into Xcode. Typically, you will want to drag these files to an asset folder in the WatchKit App folder.

Dragging Images into the ProjectFigure 17 – Dragging Images into the Project

Once the images are dragged in, Xcode pops up a dialog box. It is very important that the radio button Copy Items if Needed is selected as shown in Figure 18.

Copy Items if Needed to ProjectFigure 18 – Copy Items if Needed to Project

It’s now time to add the final three buttons to the interface. To insert the buttons with graphics:

  1. In the Filter input field in the Library panel, type Button.
  2. Drag a button to Group 4.
  3. Double-click on the word Button and delete it.
  4. In the Utilities panel, change the background image for the button to “check1.png”. It should look similar to Figure 19.Setting the backgroundFigure 19 – Setting the background to an Image
  5. Change the width size of the button to Relative to Container.
  6. Set the size value to 0.33.
  7. Copy the button (Cmd+C) and paste it in two times (Cmd+V).
  8. Click on button 2 and change the background to check2.png.
  9. Click on button 3 and change the background to check3.png. The completed interface should now look like Figure 20.The Completed InterfaceFigure 20 – The Completed Interface

Notice how the grey bars in check2.png work as a separator for the buttons.

Starting the Coding

Now that the interface is built, it’s time to start coding. Keep in mind that at the start of this apple watch development tutorial, it was mentioned that you can’t just copy and paste code in Xcode and expect it to work. The code has to be linked to functions (or methods). We will start by linking the labels as an outlet.

Before starting, you can hide the Utilities panel. Click the far right button at the top of the tool bar to hide the Utilities panel. Figure 6 demonstrates where the button is located.

Next you want to open the Assistant Editor. This will open the Swift file that is associated with the active storyboard. Figure 21 shows the Assistant Editor Button.

Assistant Editor Toggle ButtonFigure 21 – Assistant Editor Toggle Button

The split screen of the Interface Storyboard and the InterfaceController.swift file should appear as shown in Figure 22.

 Assistant EditorFigure 22 – Assistant Editor opens File Associated with Storyboard

The first connection to make is the Label for the bill. Click once on the label $0.00 in Group (or row) 3. Once it is selected, hold the Ctrl key down and drag to a location under the class InterfaceController. Let go of the mouse. A Connection dialog box will appear. Type in txtBill and click Connect as shown in Figure 23.

Connecting the LabelFigure 23 – Connecting the Label as txtBill

You should notice the following code was written by Xcode.

Repeat this process with the other $0.00 label on the fifth row. Save the connection name as txtTip. The first part of the class now looks similar to this:

Before linking the buttons, there’s an import part to make note of. To the left of the outlets that were just made, there are radio buttons. These radio buttons are filled in. That means there is a connection made. If you copy and paste code, which will happen next, the radio buttons will remain empty. You can click and drag from the radio button to the element on the interface to link. Figure 24 shows the radio buttons.

Radio buttonsFigure 24 – Radio buttons showing a Connection

The next step is to connect a button. This is going to be a little different than the labels. The labels had an outlet connection which allows code to access and change parameters of that object. The buttons don’t need to change but you do need an action associated with the buttons. To create an action on the button, hold the Ctrl key down and click and drag the mouse to the same location as the label outlets. When you let go of the mouse, Xcode will show the Connection dialog box. Change the Connection to Action as shown in Figure 25. Type btn1 in the Name field. Click the Connect button.

Change the Connection to ActionFigure 25 – Change the Connection to Action

You need to repeat this step for all the numbers.

NOTE: Make sure to change from Outlet to Action or else that button will not work.

Your code will look like the following when it’s done. For the sake of space, the braces were all set to one line.

The next step is to instruct the button functions to call a specific function. You will also pass the value of the button pressed to the function. So the button btn1 will pass the value of 1 to a function called inputBill().

NOTE: If this app was for the iPhone or iPad, you could access the name of the button and the tag value or text value of the button. However, with the Apple Watch, the processing is significantly less than with the iPhone, so many features are removed. However, this can change as newer iOS versions of the watch are released.

To make sure that you don’t get any errors at the start, first add a function called inputBill(). It will look like this:

Next call the inputBill function and pass it a value for the button. All of the code will look like the following:

Next, connect the Clear button. Hold the Ctrl key down and click on the “C” button and drag it under the other actions that were made previously. Change the connection to Action and give this the name btnClearBill.

Within the braces of the btnClearBill action, call a function clearBill(). The code will look like the following:

At this point, you’ll get an error message. By clicking on the red dot to the left of the code, Xcode provides a brief explanation of the error. The error is because the code is calling a function that doesn’t exist yet. Locate some space under the inputBill() function and add the following code:

You can infer from this code that when the clear button is pressed, the labels will be reset back to their original states.

The next step is to add two variables. One will be for the value of the bill. The second variable will be for value of bill plus the tip. Just above the IBAction lines of code, add these two lines of code:

Now we will add some code to the inputBIll() that will insert the value of the bill as the user presses the number buttons. We will also put a limit on the value that the user enters. Here is the code for inputBill() function.

The interesting part of the code is calculating the value to show in the txtBill label. The code will take the inputNum and multiply it by 10. So if the user presses 5 and the inputNum has a value of 0, then you get 5 * 0 which equals 0. Once the multiplication is done, the variable num is divided by 100 and then added to inputNum. As a result, inputNum now has a value of 0.05. Now let’s say the user then presses the number 8. The inputNumber is multiplied by 10 so the value goes from 0.05 to 0.5. Then the num variable (8) is divided by 100 (0.08) and then added to the 0.5, giving you 0.58.

You can see how the label object is updated. Also, the if statement will prevent the value of the bill from exceeding $10,000.

An important thing to remember is that when the user clicks the clear button, the function should also reset the values of the two variables. The completed clearBill() function will look like the following:

At this point, you can test your app out in the emulators. This will take a while at the start. The computer will have to launch two emulators – one for the iPhone and one for the Watch. Occasionally on older Macs, Xcode may give you a launch error. If you get an error, just rebuild and preview the app again.

To preview the app, you can either press Cmd+R or press the Play button in the top left portion of the Xcode tool bar.

Final Steps

The last thing to do is write the code for the tips. Here is how the tips will break down:

  • One Check button: 5%
  • Two Check button: 10%
  • Three Check button: 20%

To start, the first thing to do is create the action connections between the check buttons and the swift file. This process is the same as what was done to connect the number and clear buttons to the swift file.

As a refresher, click on the button with one check mark. Hold the Ctrl key down and drag to a location within the class function. When you let go of the mouse, change the Connection from Outlet to Action. Give the connection the name btnTip1. Click the Connect button. Repeat for the other two buttons, giving them the names btnTip2 and btnTip3.

Within the btnTip connections, add a function calcTip and pass the value of the tip. Your code should look like this:

NOTE: If you put .05 as a value, Xcode will give you an error. You must put 0.05.

Next you need to write the code for the calcTip function. This function will also round off to 2 decimals.

Now you can run the app and see if it works. The following is the completed code including the functions automatically written by Xcode.

Conclusion

While the coding for this first Apple Watch development tutorial was not complex, it still takes a while. That’s because a lot of the work has to be done first with the interface. However, once the interface is created and connected to the Swift file, the coding goes fairly quickly.

New developers to Xcode often have issues with connections. One thing that you can do is to view your connection in the Utilities pane. Figure 26 shows the location of the Connection Inspector. When you have this view active, you can click on objects on your interface. If something is connected incorrectly, you can either delete it or click the Radio button and point to the function in the Swift code.

Connection InspectorFigure 26 – Connection Inspector

Once you get used to the Xcode interface, you will find it a very pleasant environment to build apps in. You may even find it “fun” to create apps in Xcode. Keep practicing and enjoy.










Be the first to comment

Leave a Reply

Your email address will not be published.


*