Getting Started with Apple Watch Development

Creating a Counter App

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

This video segment walks you through the steps to create a simple counter app with two buttons for an Apple Watch.

Keywords

  • counter
  • xcode
  • swift
  • apple watch
  • watchkit

About this video

Author(s)
Ravin Sardal
First online
06 April 2019
DOI
https://doi.org/10.1007/978-1-4842-4918-5_7
Online ISBN
978-1-4842-4918-5
Publisher
Apress
Copyright information
© Ravin Sardal 2019

Video Transcript

In this video, we’re going to be creating a basic counter app for the Apple Watch. And what this app does is that when you press a button, the counter increases by one point. And when you press another button, the counter decreases by one point.

So let’s start by creating a new Xcode project. And I am just going to call this app counter. Save it. Perfect. So the first thing we want to do is navigate to our interface.storyboard file. And as I’ve shown in previous videos, we can open the Objects pane. And let’s scroll down to Label. And click on Label and drag it over here.

So you gotta click on that item, you have to hold it, and drag it over. And I’m just going to increase the size using this right bar over here. And click on the label right here. Go over to the Attributes Inspector. Click on Alignment and click Center.

So now that we’ve added our labels– now let’s go back to our Objects pane. And add two buttons. So here’s our first button. And let’s click on that again and add our second button. So one button will be for Up. And one button will be for Down. Awesome.

Now when the user clicks the Up button, the counter increases. And when they click the Down button, the counter decreases. And let’s double-click on this and change the text to 0 because that’s where we want the count to start. Awesome.

Next, let’s click on the Assistant editor. And let’s link up the counter label to our code. So how we do that is I just made two blank lines here so we have some space. You have to open up the Assistant editor. You have to have the storyboard file on one side and the interface controller file on the other side. And you want to click on the label or button that you’re dealing with.

In this case, we’re going to deal with this label right here. I’m going to press Control. I’m going to hold down the Control key on my Mac, click on it, not let go, and drag over to the interface controller file. And once you drag the pointer over there, you’ll see an icon that says Insert Outlet right underneath the class.

Once I drag it over and let go, this pop-up shows up. And in the Name field, I’m just going to type in Counter Label. Great. That is the first piece of SWIFT code that we’ve wrote. So to test that everything is working out, I’m going to hit the Run button. And we are going to execute the counter watch kit app target.

So it should build everything, compile our code, and our awesome Apple Watch simulators should pop up because we’ve selected the iPhone XS Macs and the Apple Watch series 4 screen. So there we go.

Our simulator popped up. And we have our Apple Watch right here. And our iPhone right there. So let’s actually move the iPhone to the side. Get some space over here so you can view our Apple Watch app, as well as the code associated with it.

So, yeah. The first time that you launch this it might take a minute or two to build. But that’s fine. We can wait for it. Great. So the app is loading. And we can see that our label that says 0 has popped up, our two buttons– Up and Down– are here too. That’s great. So everything’s in order and everything’s working. Awesome.

Now, let’s go back to our source code. Let’s go back to Xcode. And let’s add an action. So there are two types of interface builder connections in Xcode. There are outlets, two basic types. There are outlets and their actions. So outlets are what allow you to control properties for the labels. And actions are what allow you to handle interactions that the user has with the objects on the interface.

So instead of talking about it, let’s actually do a demo. So I’m going to, again, repeat the similar process where I click on the Up button, I hold down the Control key, I click on Up, hold down my mouse, and drag over to the bottom of the code right above the last bracket. And it should give me a prompt that says Insert action or outlet.

So in this case, we want to insert an action. So let’s release everything once we’re over a code. And the connection of action should show right up. And I’m going to call this action Up button pressed. Great. So our second piece of SWIFT code has been written. So this is a function that is responsible for dealing with the code or dealing with the next action after a button doesn’t press.

So whenever the user presses the Up button, this piece of code will get executed. Awesome. And let’s repeat a similar process for the Down button where I control-click and say Down button pressed. And hit Connect. Great. So now we have our two functions.

Now let’s do something with our functions. At the top of our class, I’m going to create a variable that is responsible for keeping our count. Let’s call that variable Counter. So the way to declare a variable in SWIFT is say var counter is equal to 0. Right now our counter has a value of 0.

And when the Up button is pressed, we want to increase this by 1. So we say the counter variables should now be equal to the current value of the counter variable plus 1. And once we set the value– the new value of the counter variable– we want to make sure that it’s updated over here. So what we do is we tell our outlet that what we created up here– so we actually tell the counter label to change the text.

So counter label dot set text. And it needs to be a string. String is just a sequence of letters. And inside the string, you put counter. So let’s analyze this line of code.

We’re telling the counter label– which is the outlet up here, which deals with the counter label from our interface that we created– that we want to set it’s text to the value of the counter variable. So we’re telling the counter label to set the value of the variable. And the reason why I put string around this is because the set text function requires you to pass in a string. And this is a number.

And similarly, in the Down button pressed function, we have to tell the counter variable that we want the counter to be equal to whatever the previous value of the counter is minus 1. And again, we tell the counter label to set its text to a string of the counter variable. Great.

Now let’s test your code and run it on our simulator. So as you can see, the second time things are building much faster. And the app should open. So here we have our Up button and Down button. When you press Up, the counter goes up. And when you press Down, the counter goes back down. And that’s about it. This is your first basic SWIFT watch kit app. Congratulations.