In this article, we will help you create your first\u00a0Apple Watch<\/a> app through the\u00a0WatchKit SDK<\/a>. We will assume that you come primarily from a design background and are a beginner as far as app development goes.\u00a0But fear not, we will make this tutorial as simple as possible and explain each step, as we guide you through the process from start-to-finish.<\/p>\n (For more on Apple Watch design and development<\/a>, check out these key design principles<\/a>,\u00a0popular mobile apps reimagined<\/a>, and\u00a0prototypes of HealthKit-enabled Watch apps<\/a>.)<\/p>\n We won’t teach Objective-C or Swift, which is beyond the scope of this article, but rather allow you to observe and follow how an Apple Watch<\/span> app is created.\u00a0<\/span><\/p>\n Ready? Great, let’s get started.<\/p>\n The first step is to download\u00a0a sample iOS project.\u00a0As you may or may not know, Apple Watch apps need to be paired and bundled with an iPhone app; there’s no way to create a complete standalone Watch app at this stage.<\/span><\/p>\n As we are focusing on extending an iPhone app to become an Apple Watch app, we won’t spend time on understanding the iPhone app code \u2014\u00a0we’ll leave that as an exercise for later on.\u00a0<\/span><\/p>\n We will work through Apple’s sample WatchKit project files, which are available here<\/a>.\u00a0<\/span><\/span>The sample project contains both an iPhone and WatchKit component, for your convenience, and will demonstrate a\u00a0wide array\u00a0of UI elements available on Apple Watch<\/span>.<\/p>\n You will need Xcode 6.2, which you can download here<\/span><\/a>. Open the project file in Xcode 6, and you will see the following:<\/span><\/p>\n Go ahead and run the project, by first making sure the target at the top shows WatchKit Catalog<\/span><\/a>, then perform \u2318<\/span>R<\/b>.<\/span><\/p>\n You can now see the project run on your iPhone simulator, but you will get a simple screen, as illustrated below:<\/span><\/p>\n We also have a similar simulator for Apple Watch, which we will look at later. For now, we just have a simple iPhone app so we can use it as a vessel for demonstrating our Apple Watch app. <\/span><\/p>\n So how does this all work? Well, since we won\u2019t be coding anything from scratch, I will help you navigate the project and explain how all the pieces fit together.<\/span><\/p>\n As I mentioned previously, we need an iPhone app with which to bundle and associate the Apple Watch app, which you would eventually release concurrently. That\u2019s why we have a shell iPhone app.<\/span><\/p>\n The iPhone component of this project consists of the <\/span>Main.storyboard<\/span><\/em> (shown above), which contains just the sample View Controller<\/em> with the text we saw in the simulator previously. That\u2019s all there is to the iPhone app component.<\/span><\/p>\n Going back to understanding the architecture of an Apple Watch app, it\u00a0consists of two parts: the WatchKit app<\/i> and WatchKit extension<\/i>. <\/span><\/p>\n So what gets loaded onto the Watch itself is the app, which is just the static resources and storyboard, but no code \u2014\u00a0nothing that\u2019s compiling at runtime. <\/span><\/p>\n WatchKit acts as the conduit that connects to\u00a0the WatchKit extension, which resides on the iPhone side and contains the code and orchestrates the Watch app interface.<\/span><\/p>\n When the user interacts with the Watch interface, WatchKit signals to the paired iPhone and WatchKit extension then creates the objects at runtime needed to manage the appropriate screen the user interacted with.<\/span><\/p>\n I\u2019ve given you a brief overview of the architecture, but if you’re interested in learning\u00a0more about the lifecycle and other aspects, you can dive deeper into\u00a0Apple<\/span>\u2019<\/span>s documentation<\/span><\/a>. <\/span><\/p>\n Now we will go through the WatchKit App <\/i>component, looking at how the static interfaces are wired up.<\/span><\/p>\n For this tutorial, we won\u2019t need to create the WatchKit app components as they have already been provided for us. But in case you already have an existing iPhone app and want to create the components, we will go through the steps:<\/span><\/p>\n In Xcode, with your iPhone project open, select File > New > Target and then select Apple Watch.<\/span><\/p>\n You are then presented with a screen allowing you to set the properties of the Watch app. You will also be asked whether you plan on supporting custom notification interface or glance screens (we have that in our sample project).\u00a0<\/span><\/p>\n Understanding how targets work in Xcode is beyond the scope of this article. But suffice to say, you essentially have multiple executables, including an executable target for the iPhone app and an executable target for the Watch extension, plus glance and notifications.<\/span><\/p>\n Let\u2019s start by opening up the Interface.storyboard<\/i> file within the WatchKit app folder in Xcode.<\/span><\/p>\n Remember, this is the WatchKit App <\/i>component, and this gets side-loaded onto the Watch. The storyboard we see above contains all of the UI screens we would have on the app. You can explore the various\u00a0UI elements in the storyboard: select a button or a label, try changing the text, position, etc.<\/span><\/p>\n The image above shows the screen elements, where you can interact with, add, update or\u00a0delete UI elements such as labels and buttons. You can drag in new UI elements into the screen from <\/span>3<\/b><\/span> and change the individual element properties such as label, color, etc. through <\/span>2<\/b><\/span>.<\/span><\/p>\n The WatchKit Extension<\/i> component is the logical part of your Watch app allowing you to compile runtime<\/span><\/a> code, update and set data values, and toggle visual appearances of UI elements, such as changing its alpha setting. Note that you are not able to remove UI objects, so most would simply change the element\u2019s alpha to 0 or toggle the element to hide it, which would then force other objects to fill the void.<\/span><\/p>\n In Xcode, in the storyboard you were exploring just now, select the Button<\/i> view controller, by clicking the top title once. Don\u2019t click on an individual UI element.\u00a0<\/span><\/p>\n On the right, where we have the identity inspector (third icon), we have the Custom Class<\/i>, which is where we associate a particular scene with a view controller class in our code. In this case, the Button<\/i> scene is associated with AAPLButtonDetailController<\/i>.\u00a0<\/span><\/p>\n If you press the little circle with an arrow inside, by the AAPLButtonDetailController <\/i>text, you will be navigated to the AAPLButtonDetailController.h<\/i> class file, but you can also reach that file from the left-hand file navigation pane.<\/span><\/p>\n We won\u2019t get into too much more\u00a0detail with the code, but essentially an Objective-C view controller is composed of a header file (<\/span>AAPLButtonDetailController.h<\/i><\/span>) and an implementation file (<\/span>AAPLButtonDetailController.m<\/i><\/span>). The header files generally just expose the intentions of the class, whereas the implementation file is where the meat of the class resides.<\/span><\/p>\n Even without extensive programming experience, by merely observing the implementation class, you can pick up a few things. We have declared some variables\u00a0<\/span>such as defaultButton<\/em> and hiddenButton <\/em>that are buttons\u00a0that map to\u00a0the UI elements we saw in the storyboard. We need to declare and associate any UI elements, such as buttons, if we need to interact with them in-code. <\/span><\/p>\n Scrolling down the class we can see various other interesting bits of code that we infer just by their names. Any IBAction<\/i> methods are functions that react when you select a UI element like a button, and if you further inspected the storyboard element, you can see that method name linked to a button.\u00a0<\/span>The hideAndShow<\/i> method in the code toggles whether to show or hide an element based on its previous state.<\/p>\n Go ahead and explore some of the other classes and how they are associated with the storyboard.<\/span><\/p>\n A glance is a supplemental way for the user to view important information from your app \u2026 A glance should provide immediately relevant information in a timely manner. For example, the glance for a calendar app might show information about the user\u2019s next meeting, while the glance for an airline app might display gate information for an upcoming flight.<\/i><\/span><\/p>\n So in Xcode, let\u2019s go back to the\u00a0<\/span>WatchKit App component <\/i>interface file and find the Glance Interface Controller scene<\/i>.\u00a0<\/span><\/p>\n Two noteworthy things to observe in the glance<\/i> interface scene. First, the image has an outlet pointing to glanceImage,<\/i> which would be found in the corresponding code class allowing the latter class to access and modify the image at runtime. <\/span><\/p>\n Second, as we did before, we can work out what class this storyboard scene is referring to in the Identity Inspector<\/i>, which happens to be AAPLGlanceController<\/i>. Once again, selecting the little arrow in the circle will navigate you to that class.<\/span><\/p>\n Glancing at the AAPLGlanceController.m<\/em> implementation class, you can see a method called willActivate<\/i>, a WKInterfaceController <\/i>method that gets called whenever glance is about to be activated, allowing you to intercept the flow. In this case, we want to choose an appropriate image to load at runtime, depending on whether we have the larger 42mm Watch screen or smaller 38mm size.<\/span><\/p>\n We also make use of Handoff<\/a>, to pass control to a view controller, called <\/span>imgeDetailController<\/span><\/em>, along with some meta-information:<\/span><\/p>\n \/\/ Use Handoff to route the wearer to the image detail controller when the glance is tapped.<\/i><\/span><\/p>\n \u00a0 \u00a0 <\/span>[self updateUserActivity:@”com.example.apple-samplecode.WatchKit-Catalog” userInfo:@{<\/i><\/span><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 <\/span>@”controllerName”: @”imageDetailController”,<\/i><\/span><\/p>\n \u00a0 \u00a0 \u00a0 \u00a0 <\/span>@”detailInfo”: @”This is some more detailed information to pass.”<\/i><\/span><\/p>\n \u00a0 \u00a0 <\/span>}];<\/i><\/span><\/p>\n We deal with determining whether the screen size of the Apple Watch is the larger one using the following code:<\/span><\/p>\n ([[WKInterfaceDevice currentDevice] screenBounds].size.width > 136.0)<\/i><\/span><\/p>\n You get local and remote notifications for free if your iPhone app already supports that, as any notification on your phone will also come to your Apple Watch. You have two types of notifications: a more subtle, abbreviated notification and a long-look notification, if the user decides to further view the notification. You can\u00a0create customized notifications with custom graphics, content, and branding. <\/span><\/p>\n Going back to the storyboard, we find the Static Notification Interface Controller. <\/i>As with glance, the implementation class takes advantage of the\u00a0willActivate<\/i> method, but you also get access to two important protocol methods:<\/span><\/p>\n – (void)didReceiveLocalNotification:(UILocalNotification *)localNotification withCompletion:(void (^)(WKUserNotificationInterfaceType))completionHandler<\/i><\/span><\/p>\n The method above\u00a0is used when you want to show local notifications and need to use a dynamic interface, or you can fall back to the static notification.<\/span><\/p>\n![\"Apple](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/Screen-Shot-2015-01-28-at-9.36.57-PM.png\")
<\/a><\/p>\n1.\u00a0Setting Up Your Environment<\/span><\/h2>\n
![\"Xcode](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/1.png\")
<\/a><\/p>\n![\"WatchKit](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/2.png\")
<\/a><\/p>\n![\"WatchKit](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/3-copy.png\")
<\/a><\/p>\n2. iPhone App Component<\/span><\/h2>\n
![\"Main.storyboard\"](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/4.png\")
<\/a><\/p>\n3. WatchKit Architecture<\/span><\/h2>\n
![\"WatchKit](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/5.png\")
<\/a><\/p>\n4. Creating the WatchKit App from an Existing iPhone App<\/span><\/h2>\n
Step 1<\/h3>\n
![\"Xcode](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/7.png\")
<\/a><\/p>\nStep 2<\/span><\/h3>\n
![\"Properties](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/8.png\")
<\/a><\/p>\n5. WatchKit App Component<\/span><\/h2>\n
![\"Interface.storyboard\"](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/6.png\")
<\/a><\/p>\n![\"UI](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/9.png\")
<\/a><\/p>\n6. WatchKit Extension Component<\/span><\/h2>\n
![\"Apple](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/Screen-Shot-2015-01-29-at-12.47.25-PM.png\")
<\/a><\/p>\n![\"Left-Hand](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/14.png\")
<\/a><\/p>\n![\"AAPLButtonDetailController.h\"](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/13.png\")
<\/a><\/p>\n7. Glances and Notifications<\/span><\/h2>\n
![\"Glance](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/15.png\")
<\/a><\/p>\n
![\"Static](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/16.png\")
<\/a><\/p>\n![\"Apple](\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/29180000\/Screen-Shot-2015-01-29-at-12.51.11-PM.png\")
<\/a><\/p>\n