Build an independent watch app - PART I

Let’s just say that you woke up from the last glacial era and you discovered Xcode under a rock. The next day while the skulls of dinosaurs still floating on the melting ice you decide to buy an Apple Watch from Cave Store.
Now, because you are darn smart you decide I need an app in my life something that gives me some essential information about the dinosaur left on the planet. You know basic caveman situations, with an Apple Watch.
You pray the Gods to receive such knowledge on how to build an app and while you hunt a Mammoth to give away; I, God of the story. Clearly! I chisel knowledge into stones that will be delivered to you upon BBQing your upcoming elephant of the past.


image

Let’s get that done then. I will be using Xcode version 11.0 (11A420a) although this info with the proper adjustment will work with a lot of other versions.
Our app will have two screens.
Screen 1 list all dinos are known to man…okay the ones that I know, even Gods have limits, bro!
Screen 2 will have an image of the selected dino and what he does in the dino ecosystem.
Let’s start by creating a new Xcode project. Open Xcode and select “Create a new Xcode project”. Xcode will show you a list of templates for our new project. We’ll opt for “Watch App” which will not require an iPhone to run.


image

When Xcode prompts you for a project name. Key in ‘DinoBasics’. Make sure you choose ‘Swift’ for the language. Tick off the notification option as we won’t use it. Make sure that the combo box for the UI says STORYBOARD and not SwiftUI. Next, choose a folder on your Mac to save it and click ‘Create’.
Until watchOS 5.x apps actually, run on an iPhone and they are extended over the watch (not vice versa as was believed before the volcano exploded). With iOS 13 and Watch 6.x you can also create independent watch apps so that the phone isn’t required. And that is exactly what we’re going to do. We could be fancy and use SwiftUI instead the what will be soon known as the ancient way of doing UIs, STORYBOARD. But we’re not going to be that fancy. I haven’t seen the mammoth yet… haven’t I?!
Let’s add a couple of files that we will be using at some point.


image

Select WatchKit Class


image

in the next dialog make sure that subclass combo box says: WKInterfaceController and the class name is DetailInterfaceController
The next dialog is crucial to avoid any screaming of the type “why it is not working!?”. Make sure that when you are about to store the file, that the project that will have visibility of that file is the WatchKit Extension part of the project.


image

All we have just done is to add a class that allows us to write UI code for screen two. The details section of the app.
Now let’s do something very similar for Screen one. Go ahead and create a new file and this time used Swift type, call it DinoRow. Previously we used a Cocoa type. Once created it will be a blank swift file. Add the following code to it.


image

There should be no other code, besides comments, in that file. Otherwise, I am not responsible if your fire in the cave dies tonight. You have been warned, cave wo/man.
Once it is all done your project should look exactly like this.


image

Now let’s build the UI for screen one. Select Interface.storyboard.


image

using the + sign on the toolbar (top right) grab a table controller and drop it in the center of the watch screen.


image

repeat the same operation but this time for a label and drop that in the center of the table cell. The only one you can see at this time. From the outline of the UI select label and then using the inspector view from the right side of the screen change the followings:
Select the controller below Table View


image

Custom Class: DinoRow
Identifier: DinoRow
Select the label (below Group) and call it what you want or don’t change it at all. I called mine Dino name. You know, because it’s about dinos. Just sayin…
Once all done it will look like this. 


image

Now use the plus sign again on the toolbar (it’s called Library) and add an interface controller. That is screen two of our mega watch app.


image

Add to that screen the following UI components using the library.
  1. Label
  2. Image
  3. Label
  4. Label
In that order. Let’s configure it now. Via the inspector look for interface controller identifier and set its name to: showDetails. 


image

And then look for custom class and set that to: DetailInterfaceController - It’s the icon before the one in the blue circle as shown above.
You can set names for the labels and set an image as well if you want, it’s nice to see what looks like after while editing but it will have no effect at run time, so your call. If you do it, in the editor It will look like this at the end.


image

One last touch from the UI perspective. Head to Flaticon web site and download this package of dino images. You will have to register for free if you don’t have an account just yet. Be smart during the registration that they make it sound you have to pay but if you click and read carefully you don’t :-)
Unpack the zip file of images and copy all content of the PNG folder into the asset cassets.


image

We are done with the UI, now let’s write some code cave person!
Select the file DinoRow.swift from the project navigator and make sure the code looks like this:


image

Select the file IntefaceController.swift from the project navigator and make sure your code looks like this:


image

You will notice that you will be missing the rounded dot at line 15 don’t worry, we’re going to fix that for you shortly.
Now select the file DetailInterfaceController.swift and make sure your code looks like this:


image

You can add more sauros in the whats array if you want, as long as they match the names of the images you have in the casset. I was lazy and only added a few. If your code explodes like a volcano of the Mesozoic era while testing and on that line is very likely you misspelled a name. Cave in my man.
Now, let’s enable the assistant so we can see code and UI at the same time in a split-screen layout. To do that, select Interface.Storyboard file from the project navigator and then from the editor menu, Assistant.


image

If you have all the right things selected (critical) you will see this:


image

Every time you select a major control/ler (the yellow dot) you will see the code on the right refreshing for the equivalent file that controls that UI.
We have to hook three files:
  • dinorow.swift (label on screen 1)
  • interfacecontroller.swift (table on screen 1
  • detailInterfaceController.swift (screen 2)
It doesn’t matter from where you start as long as all the IBOutlets are connected or you are gonna see the volcano boom when you execute the code.
Example:
Drag the empty circle from the lines numbers in the code view over the first label on the storyboard. You can drop it over the label itself or the outline (2) which is more precise and less error-prone. Your call. 
Where’s my mammoth?! Chop chop. No fork intended.
Link the object correctly. For example, is the code says tableview you don’t link that to say a leg of gazelle. You know typical caveman mistakes…
Once all done, it will look like this:



If you want to see the source code, it’s in the usual place for this blog. Github.
I tried to make it as simple as possible for neophytes. I have taken liberties with terminology that tekkies would burn me in hell but hey for a mammoth anything those days!

Comments

Popular posts from this blog

Build an independent watch app - PART IV

Build an independent watch app - Part II

It's all matter of angles, in life