{"id":911,"date":"2015-03-19T17:58:23","date_gmt":"2015-03-19T21:58:23","guid":{"rendered":"http:\/\/www.peteonsoftware.com\/?p=911"},"modified":"2024-03-02T15:59:24","modified_gmt":"2024-03-02T20:59:24","slug":"our-first-watchkit-app-watchcounter","status":"publish","type":"post","link":"https:\/\/www.peteonsoftware.com\/index.php\/2015\/03\/19\/our-first-watchkit-app-watchcounter\/","title":{"rendered":"Our First WatchKit App – WatchCounter"},"content":{"rendered":"

In my last podcast episode<\/a>, I talked about the Apple Watch Event and also a bit about what developing for the watch is like. WatchKit isn’t something that you can just create as a standalone application. Every WatchKit application must have a phone application. No processing happens on the watch, it is just a “dumb screen” for the application on the phone. So even if the entirety of what you are building is for the watch, the phone component must still be installed. The phone component is the “brains of the operation”.<\/p>\n

Here is a diagram of WatchKit architecture from Apple
\n\"WatchKit<\/p>\n

And, here is one that I created to expound on it a little bit:
\n\"WatchKit<\/p>\n

Let’s walk through making a very simple application. The source for this application is available on GitHub<\/a>, or you can follow along.<\/p>\n

First, we need to make a phone application. You see that WatchKit isn’t any of our options, so I’m choosing to make a Single View application.
\n\"YouNew WatchKit” title=”You cannot File->New WatchKit” \/><\/p>\n

Next, I name it WatchCounter, make sure the language is Swift and the device is the iPhone and click Next.
\n\"Naming<\/p>\n

At this point, we just have a standard iOS application and XCode appears as it always does.
\n\"Xcode<\/p>\n

With the project selected in the explorer pane, make sure that your Target window is visible. If not, click this button to show it.
\n\"Show<\/p>\n

Next, click the plus sign indicated here to bring up the Add Target window.
\n\"Xcode<\/p>\n

We are going to choose an Apple Watch -> WatchKit App Target Template
\n\"WatchKit<\/p>\n

For the options, we are just making a simple application, so leave most of the defaults. We are going to make sure that the checkboxes are cleared next to “Include Notification Scene” and “Include Glance Screen”. If you forget, it won’t be the end of the world. Our Watch Storyboard will just be a little cluttered. Because we wouldn’t be using those screens for this sample, they wouldn’t affect what we’re doing right now.
\n\"Xcode<\/p>\n

After you are done and click “Finish”, you are presented with this dialog (if you haven’t previously told it to never show again). Click “Activate” so we can continue.
\n\"Activate<\/p>\n

At this point, your project will be changed. Added to our project are two new folders: WatchCounter WatchKit Extension, and WatchCounter WatchKit App. For this project, the only thing we care about in the “App” folder is the Interface.storyboard and the only thing in the Extension folder we need is InterfaceController.swift.
\n\"Our<\/p>\n

If we click the storyboard, we’ll see this:
\n\"WatchKit<\/p>\n

Go to the controls (bottom right of Xcode by default) and find the Button and Label controls.
\n\"Button<\/p>\n

Drag the label onto the watch storyboard, followed by the button. The watch has a “flow” layout and will just stack the controls on top of each other with no overlap. You don’t have access to auto-layout or precise positioning. There are ways to group some controls horizontally, but for now we can be fine with stacking the controls.
\n\"Button<\/p>\n

Select the label on the storyboard and go over to the properties window and change the values to the ones that you see here. The label’s text will change when the app starts up, so I just have some text in there so it is easy to see and select while we are working with it visually.
\n\"Setting<\/p>\n

Next, select the button on the storyboard and then set its properties.
\n\"Setting<\/p>\n

Now, if you click the assistant editor button while on the storyboard, it will bring up the code for the view controller side by side.
\n\"Assistant<\/p>\n

Click on the label to select it and then hold down control, click on the label, and drag over to the code window and let go right above the awakeWithContext method. A dialog will come up to create an outlet. Name it displayLabel and click to accept.<\/p>\n

Next, control click the button and drag over to the code window right below the awakeWitContext method. It will again ask you to create an IBOutlet, but use the dropdown to change to an IBAction, name it buttonWasPressed and accept.<\/p>\n

Next, type in the rest of the code shown here. All we are doing is creating a counter variable and then updating the label, keeping track of how many times we clicked. It should be fairly straightforward.<\/p>\n

\r\nimport WatchKit\r\nimport Foundation\r\n\r\n\r\nclass InterfaceController: WKInterfaceController {\r\n    @IBOutlet var displayLabel: WKInterfaceLabel!\r\n    var counter = 0\r\n\r\n    override func awakeWithContext(context: AnyObject?) {\r\n        super.awakeWithContext(context)\r\n        \r\n        \/\/ Configure interface objects here.\r\n        updateMessage()\r\n    }\r\n\r\n    @IBAction func buttonWasPressed() {\r\n        counter++;\r\n        updateMessage()\r\n    }\r\n    \r\n    func updateMessage() {\r\n        var message = \"Pressed:\\(counter) time(s)\"\r\n        displayLabel.setText(message)\r\n    }\r\n}\r\n<\/pre>\n
Now, make sure that the WatchCounter WatchKit App is still the active schema and you are targeting the iPhone 6 simulator.
\n\"Run<\/p>\n
When you run it, should should launch the phone and watch simulator and get a watch app up that runs like this:
\n\"WatchCounter<\/p>\n
That’s it.  If you have any questions, let me know.  Again, if you want to check this out and poke around rather than follow along, the code for this application is available on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In my last podcast episode, I talked about the Apple Watch Event and also a bit about what developing for the watch is like. WatchKit isn’t something that you can just create as a standalone …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75,84],"tags":[129,85],"class_list":["post-911","post","type-post","status-publish","format-standard","hentry","category-ios","category-watchkit","tag-ios","tag-watchkit"],"_links":{"self":[{"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/posts\/911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/comments?post=911"}],"version-history":[{"count":0,"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/posts\/911\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/media?parent=911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/categories?post=911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.peteonsoftware.com\/index.php\/wp-json\/wp\/v2\/tags?post=911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}