Let's start by talking about what is an Watch app...
How does a watch app work?
First thing to know about AppleWatch app is that is always come bundles with its companion iOS app. It's the same idea as the App extensions introduced in iOS8, where you have a main iOS app and you can add extensions. Those extensions are embedded into Today, Shared (depending on their type) component. Like Extension, for AppleWatch app, you create an app project which comes with several build targets.A Watch app consists of two separate bundles that work together.
- WatchKit App: contains the storyboards and resource files needed to display your interface.
- WatchKit Extension: contains the code needed for your native AppleWatch app. This is the part to get compiled and the binaries get transferred to your watch.
Side note: WatchOS vs watchOS2
As a side note, I think it's interesting to look back and know the differences between watchOS (the first version released in April 2015) and watchOS2 (released in September 2015). An image is worth a thousand worlds:
Now In watchOS 2, the extension runs on the user’s Apple Watch instead of on the user’s iPhone, as was the case in watchOS 1. This is the fundamental change for watchOS2: you can run watch native apps. The separation into Watch app / Watch Extension makes even more sense in the context of WatchOS1 as the binaries were deployed in different physical targets. In watchOS2, there is still the distinction of Watch app (storyboard, resources) and Watch extension (code binaries) although both are deployed natively to the AppleWatch.
The separation between WatchKit App and WatchKit Extension also means that the app's user interface is static and can't be changed at runtime. Adding or removing elements, for example, isn't possible. You can show and hide user interface elements though (I'll tell you more about that in Layout tutorial). This is done this way to save Watch resources so that it doesn't drain the battery.
Having the code binaries deployed natively makes your apps launch quicker, and be far more responsive as you remove the bluetooth latency. It also changes drastically the way you communicate/synchronize data between AppleWatch and its companion app. I tell you more about that in WatchConnectivity tutorial.
You now need to share a common business model between you iOS app and your Watch app. For that purpose, I like to separate the business model in a Shared group. This group is included in both iOS and Watch Extension target so it gets compiled and deployed on both.
Shared business model
Before you start coding,have a look at the shared business model. This model is used in the iOS app and will also be used in the Watch to represent a Task. Looking at the Task protocol:public protocol Task: CustomStringConvertible {
var name: String {get}
var duration: NSTimeInterval {get}
var startDate: NSDate? {get set}
var endDate: NSDate? {get set}
var timer: NSTimer? {get set}
var type: TaskType {get set}
func start()
func stop()
...
}
Ready for some code?
3, 2, 1... Go
Get starter project
In case you missed Watch tutorial 1: Which app?, here are the instructions how to get the starter project. Clone and get the initial project by running:git clone https://github.com/corinnekrych/DoItCoach.git
cd DoItCoach
git checkout step1
open DoItCoach.xcodeproj
Create your Watch targets
To add an AppleWatch deployment target, in Xcode:- Go to File -> New -> Target...
- Under watchOS, select Application tab and then choose WatchKit app
- In product name enter DoItCoach WatchKit App
- Untick all include scene, hit Finish button
- Click yes when Xcode prompts you to activate Apple Watch schema
You should now be able to see your the new target: DoItcoach Watch App, Xcode should have created its matching schema:
You've just created your first Watch app, but if you run the appleWatch screen is all black :(
Let's add a label
In Xcode:- Go to newly created Group named DoItCoach Watch App
- Select Interface.storyboard, in the bottom right hand side Object Library search for a Label UI control.
- Drag and drop the label onto your main screen
- In Attributes Inspector:
- in Alignment section, select Horizontal: center
- change Text Color to Blue
- in Font select System, UltraLight 17
Build and Run
To run in the simulator
Select DoItCoach WatchKit App schema with iPhone6sPlus + AppleWatch - 42 mm as targeted simulators.The command should start both simulators and launch the iOS app and the AppleWatch app. In Xcode, in the left hand side Debug Navigator, you can see debug information for each app.
Note: Sometimes, Xcode failed to attache the debug process of the iOS app, you can do it manually:
- either by selecting the schema that is not launched and run it again.
- or by manually attaching the iOS app debug process to Xcode. It quite simple and I think this blog post explained it well
To run on Watch
When you want to run your app on Watch, plug your phone to a USB port, and keep you watch close by. You can install the app on your phone:Get final project
If you want to check the final project, here are the instructions how to get it.cd DoItCoach
git checkout step2
open DoItCoach.xcodeproj
What's next?
With this first introduction tutorial, you saw how the Watch app is architectured:To sum up, an AppleWatch project is typically build three main parts: iOS app (iOS storyboard, iOS code), Watch app (watch storyboard), Watch extension (Watch code).
You also created you first AppleWatch target, see how to build and run the apps on simulators or iPhone/paired Watch. You are now ready to add more UI controls on your watch screen. See Watch tutorial 3: Layout.
Tweet
