Beginner Guide To Your First Apple Watch App

This will be a quick tutorial where I show you how to code a simple counter app. If you are new to iOS development you will have to install Xcode version 13 or higher.

Step 1

Install Xcode and create a new project Screen Shot 2022-02-24 at 6.51.58 PM.png

For this example we will be creating a stand alone Watch App opposed to a iOS App with Watch App Screen Shot 2022-02-24 at 6.00.17 PM.png

To finish setting up your project you will need add a Product Name, Team and Organization Identifier. The product name would be the name of your app. If this is your first time using Xcode you will have to sign in with an Apple ID to populate the Team. Organization Identifier usually starts with com.(your organization name). Screen Shot 2022-02-24 at 6.04.26 PM.png

It might take a few minutes for Xcode to set up your project. Once complete you will be left with a basic Hello World App. Screen Shot 2022-02-24 at 6.07.12 PM.png

Step 2

Erase the Hello World code and set up our main VStack with an HStack inside it.

Inside the body view, we will add a VStack (vertical stack) which will hold our text of the count and a HStack (horizontal stack) which holds our buttons. In my example I added some alignment and spacing but feel free to play around and make this your own. Screen Shot 2022-02-24 at 6.10.55 PM.png

Step 3

Add the text for number

I added Text with value of "0" to the VStack. I also added some font styling to achieve the size, font weight and alignment I was looking for. Screen Shot 2022-02-24 at 6.12.30 PM.png

Step 4

Add our buttons

We want to add buttons that will increment and decrement our counter. Here I added a print statements to each button which will print to the console based on which button is pressed. If you build the app by pressing the play button in the top left you will notice the print statements however the number isn't changing. Why? We haven't told the button to control that variable. On to the next step.

Screen Shot 2022-02-24 at 6.26.49 PM.png

Step 5

In our final step we will be adding functionality to our buttons using a state variable

The reason we must use a state variable is because SwiftUI will reload any component that depends on that state variable as it changes. After adding the State variable there are a couple lines that we will add and one we will change as depicted below. We change our Text to use count, now our view will update as count changes. we increment count by setting count = count +1 when the positive button is clicked and decrement by setting count = count -1 on the minus button.

Screen Shot 2022-02-24 at 7.55.37 PM.png

You did it!

Now you can build your app and test it out. This is your app so feel free to play around with colours, fonts and features. This is the first of a two part tutorial so keep an eye for my next post.

Cheers.