 So, good afternoon guys. My name is Soop and today I am going to talk about Watchkit which was introduced by Apple, which was introduced to developers around two to three weeks ago. So, it's fairly new and there is a guide by Apple which provides very little information about Watchkit. So, a lot of time what we have to do is kind of reverse engineer what needs to be done and how you do things and also you go to Apple forums to find out how other developers are doing things. So, I have very few slides maybe eight to nine slides where I kind of talk about the architecture and various components of Watchkit, but then later I will show you how to build a Watch app with Swift. So, I currently work for PayPal and I also organize the iOS developer VTAPS in Singapore and the group name is iOS Dev Scout. So, if you are interested to know more about iOS development or learn about iOS development then you can come to one of our VTAPS. I also write on this site called raywindelige.com which is very famous for iOS tutorial sites. They have a lot of written tutorials and video tutorials. So, they talk about how to build apps using Objective-C and Swift both and if you are learning iOS you can you can go to raywindelige.com and find out more information. So, let's talk about Watchkit and how it works. So, basically if you are building a Watch app it works with your iPhone application. So, you cannot build at this point it cannot build a standalone Watch app that won't pair with iPhone. So, let's say you have an Android phone you can have a Watch app that will run. So, the things that is there on your Watch app is mostly views. So, you will be drawing the views on the Watch app and there is something called Watch extension that resides on your iPhone application and your code actually executes on the iPhone app. So, your view components or the static images or assets that resides on your Watch app. So, when you build your app when you use your tabs on certain buttons or certain you know other controls on the Watch app the code actually executes on the phone. And in order to create your Watch app you basically create a new extension. I'll show you in a while how to do that. And there are three ways you can present your contents. One is basically the Watch app which you can kind of launch from the home screen of the Watch which will probably where most of your focus will go into. And this will provide a UI to users to do various things which works with your iPhone application. But there is another interface which is a glance. This provides minimum information to the user. You can think about this as a today extension if you have kind of used iOS 8 and you have seen in the notification center you can drive the notification center you can see different things on the today extension. Things like how many tweets you have or how many messages you have or things like let's say if you are using a fitness kind of application can show how many calories you burn. So those kind of things you can show in glance but the main catch here is on glance you can't have any buttons. On the Watch app if you present a lot of contents the first one then it will scroll but the glance won't scroll. So whatever you need to present this needs to fit in the screen of the Watch. And you can't have any button on the glance. It's basically whatever minimum information you want to provide to your users. And there is a third type which is notification. Let's say if you have an iOS application and you don't have a Watch app yet your users will still receive the notification on Watch even though you don't have a Watch app yet but you can customize your notifications if you have a Watch app. I'll show you all the three types today and let's dive into Xcode to build stuff. So you need Xcode 6.2. You can go to... I think I need a Wi-Fi. While it's loading I can show you here. So 6.2 is in beta now. I have some application that I built yesterday that builds different types also you know what. But let's create a new one. As I mentioned it needs to work with your iPhone application or iOS application. You need to build an iPhone application or iOS application. Let's tell it hello or something. Let's call it... So this is my standard iPhone application without anything. If I run this pressing or playing the button it just launches the iPhone application. By default the Watch simulator won't be visible. You can... while your iPhone simulator is running you can go to hardware and underneath there is external display. This is where you can choose a different type of Watch simulator. They come in two different sizes. The bigger one is 42mm and the smaller one is 38mm. So you can choose the simulator of your choice for the Watch app. You can create a target. Let's say you can create a target going to the root folder and you tap on the plus button here. And that's where you can create various extensions. You can create extension for your iPhone application but you can also create a Watch app extension. This is where you select Watch app. And by default it won't allow you to edit the product name and you can choose whatever the default one is. I'll disable the notifications info now just to create a simple Watch app now. And I'll click on finish. But that will create two things. One is the Watch app and another one is the Watch Kit extension. The Watch Kit extension reside in your iPhone application or it works along with your iPhone application. This is where you write your code. And the Watch app itself is the storyboard basically. It's the view. If you're thinking about model view controller and only the view part resides inside your Watch app. And you have various libraries here. And these are the different controllers I'll come to in a while. But you have things like images. You have separators. Separate is a new control. You won't see it for iOS apps. Let me just drag a label. Let's say I just drag a label. And I'll change the texture to let's say hello world. I'll make it to center. And if I go to the interface control and I tap on this, I'll change the color to something else. Let's say this is my static screen for my Watch app. And now I need to change the target to Watch app here. And I'll run this application. And you see this is the Watch app that will be displayed here. There are various other controls that you can use. At this point on the iPhone application, if your app is on you can browse other apps. But on the Watch simulator you can't see other apps that are there. You can just see your application. The current one that's running. Let me go ahead and add some more things here. Let's say let me go ahead and add a separator. Here I'll just add a separator. I'll add an image. And let's say I'll add a button. I'll probably add a slider here. These are a few things I added. And for my image, let's say I want to add an image to my folder. Yes, I just used this one, the floppyboard icon. And I just used this one. So now if I build my application, you'll see some more controls are here. It fits to the screen, but it allows you to kind of scroll. And you can do things here. You can change these things. Let's hook it up with our code in the Watch Kit extension and see how it works. Let's say, for example, let's say I'll remove the image for now. And let's say I remove the button now. And I'll just link up this thing, the slider. And when the value of the slider changes, I just want to print something to the log. The same way you used to work with iPhone application, you just launch the assistant editor and you control drag to your class file, class implementation. Change it to an action because this is an action. Let's say my slider changed. Now on this beta version, it gives an error, it's a compiler error that this float is basically a struct. And when you're linking it with your storyboard, it doesn't recognize it. So you can just remove this IB action part. It will still work. This will kind of get rid of the error. But it's still linked with your code and it will work. Now let's say I just want to... This is Swift I'm using here instead of Objective-3. So if I run the app now, and this is my console basically and I'll change and it kind of gives me the values. And I can convert it or typecast it to an integer and I can display integer. But yeah, this is about control. Now I'll talk a little bit about the styling. How do you basically style your UI and watch app? In iOS, it was allowed for you to overlap components. Let's say if you have a label, you can overlap another label on top of that. Or you can overlap an image on top of another image or you can overlap a label on top of another label. But in WordKit, every view component needs to have its own space. You can't overlap things. And as you drag most stuffs, let me drag another image or something, if I move to this thing, it kind of asks me, okay, where you want to put it? On top or on bottom? It stacks vertically. But if you want to kind of put things side by side, then there is this thing called Group that you need to use. But for now, let's say I add two more buttons here. And it kind of increases. And this separated component you can use to kind of put a visual break in your UI. You can use this thing of switch, switch as a title and all the things. Now this kind of gives me more space to play with. But as I mentioned, how do you basically put things side by side? Let's say I get rid of all these things. I get rid of the separator as well. Let's say I have an image. I want to put a label beside an image. How do I do that? So there is this thing called Group. You drag a group. You can put a group inside a group. But let's just start with one group. And you can put an image inside a group. Let me change the image to, this is really big. And I will put a label. I will use two labels for now. In the group you have things like how you want your layout to be displayed. Whether horizontal or vertical. If you change it to vertical, it will align them vertically. If you change it to horizontal, it will put them side by side. And you have positioning. How you want an individual element to be positioned. Let's say you want it to be horizontally left and vertically center. You can do that. And then you have the separator. I want the separator to be horizontally center. And I want this text to be horizontally right, let's say. And I want it to be also vertically center. So this kind of creates a new interface or view for me. Where I can put things side by side. But let's say sometimes you want things to be equally spaced. How do you position them equally? Let's say I want this hello to be occupying the exact half of my view. And I want the other label to occupy the exact half of the other view. This is where the size will come in the picture. You can choose size fit content. That means it will occupy the full space. Or you can choose a size relative to your parent container. So let's say I can specify this thing will be 0.5. And the other one also has to be 0.5. Now if you see if I use both the thing at 0.5, the separator is gone. Because I'm using the full space of the container now. The separator is gone. So this is where I can make some adjustment. I can point a negative value. And the separator will appear. So even if I'm using the half space, I put a negative value to kind of adjust that. So this is about your view components, how you draw view components. So another demo that I had created yesterday. Over here I have one interface controller. And this is my main entry. And I have some things that it will go to once I click on certain buttons. This is my view. And as I change the slider, it changes the images. And it basically displays a mode. And if I change it to let's say the maximum, the guy is angry. It displays those text also. So how do we do that over here? In the controllers you have three different type of controllers. Interface controller, a glance controller, and notification controller. Glance as I mentioned, it will be displayed. It is used to display a very minimum content about your application. You shouldn't put any button over glance. Actually, the storyboard won't allow you to put any controls in the glance. And notification is where you will display notification. By default, everything else is interface controller. So let's say I have another interface controller. And I have a button. And when I press this button, I want the second one to be displayed. Let's say I change the color to something else, red. And when I press this button, I want the second one to be displayed. I can just control and drag to my second one and create a segue. Basically, you can say whether you want to push the new thing to the navigation or you want to present it from the bottom. If you choose push, it will just push to the stack. Now if I tap on the buttons, it displays a new screen over here. And you have a back button here. Now think what kind of apps you will build for the watch. So you think about a watch app as an extension to your main application. It stays with your user all the time. And one of the very interesting examples can be this application, which is the Lister application. Which is basically a to-do kind of or shopping cart kind of application where you have an iPhone application. You have things that you want to buy. Let's say you have groceries that you want to buy. Milk and bread and all those things. For guys, it's okay. We use our phone in our pocket most of the time. But for girls, they usually carry their phone in the bag. Or sometimes if you have the phone in the bag, you want to bring it out and check what are the things that you carry home. So this is a very good example of the type of applications you can build. And if I use Lister... This is still in beta, the 6.2. So if sometimes you have some issues in the simulator, you kind of aim the simulator and launch it again. So this is my main Lister application, the iPhone application. And this is the watch app. So if you see both of these things have the same kind of items. And let's say I go to groceries and uncheck this apple from here. So I have three items here. But again, because the screen of the watch app is too small, you probably don't want to show information that are not relevant. For example, on the iPhone you are showing what are completed. On the watch app, it might not make sense. You just want to show you what are the things that you need to buy. Or what are the things that are pending. So let's see what else you can do. I'll create a glance now. I'll just drag the glance interface controller here. The glance is two groups. I'll delete these groups. Maybe I'll just put stuffs in there. You need to have a title, horizontal center, number of lines you can increase. And these groups, you can also style a little bit if you want to. Although it's not necessary because groups are mostly being used to put things side by side or align other view components. But let's say if you want to change or put a background color for your group, you can do that as well. And if you want to put a background image also, you can do that. Let's say this is how my glance will look like. But by default you won't have glance here. Because when you create your watch app target, you will only have the watch app target there. That's why you need to manage your schemes and duplicate this one. Duplicate the scheme and change it to glance. The notification is also here if you want to choose a notification. But I'll just change the name to glance. Now I have a glance target along with my watch app target here. And if I run the glance target, I'll see the glance over here. And this is where the glance of all applications will come side by side in a page controller. If you want to use page controller in your application instead of this navigation that we saw initially for your watch app, then instead of pushing this thing, what you can do, you select your main interface controller and just choose its next page. Let me just use another interface controller so that we'll have three controllers side by side that you can show in a page view. Change the color of this one to something else. So now you see these dots are coming at the bottom and you can kind of swipe through to display different screens. But you cannot combine both. So if you are using a page-based navigation, you can't use the other type. You can't push. If you are using push, you can't use page-based navigation. There are a few other controllers, other controls which are available. One of them is map. You can display a map there. But map on watch is very limited. You can just show a point to user. It's basically you can't zoom the map or zoom in or zoom out. That's not possible. You can show the current location of the user if you want to. And if you are guiding user to certain directions, you can show the next point that the user needs to go to. It's basically you can provide them a walking trail or walking direction. It's mostly used for direction. Or if you are using some kind of application where you need to guide the user to an address, you can put a map there to help you to find the place. I'll show you an example of map also. There is a sample project that's provided by Apple which is called Watch Catalog. It has got all the different controls. You have all these different things. You have switch, buttons and everything. You have one of them is map. And this is where shows the map. And this is currently in Apple location. And by finger, you can't zoom in and zoom out. But you can put a button to zoom in and zoom out the map. If you want to take user to a different location, you put a button again to do that. And you also have tables, list view. And if you want to display certain things in a list view, you can do that. And on top of a row, you can take user to a more detailed view. There is another thing that I want to talk about which is called menus. For any particular screen, you know, whenever user is on any screen, let's say, user is on the first screen. I want to display user setup menus or setup actions that you can take on this page. One of them is, you know, you can put buttons on the screen. That is one way of doing things. Another way of doing things is you put a menu. There is a menu component here. You drag the menu to your controller. And you can have up to maximum four menu items, one to four. So let's say I just choose two for now. And you can have an image for that. And you can have a title for a menu item. Let's say I just want to choose a system item, which is like, okay, accept. And I change the title to accept. Another menu item can be, okay, decline. These are the two menu items that I have. How do I go to the menu? You basically hard press on the button to bring the menu. So this is where you can let user do certain things. And on top of the screen, let's say you want to present a different screen. On top of the button, you want to present a different screen to the user. It's useful for things like, okay, if you're having a music player application on your iPhone, and basically you have a bunch of controls here. On the main screen you show which is the current music that's being played. And you want to provide a next button or the previous button to the user to go to the next music in the playlist or the previous music in the playlist. You can do things like, okay, if I want to use another menu item, which is, let's say I have play, podge, supple. Now I have these buttons here, four buttons here. Based on that, whatever action user takes, I can make changes to my iPhone application. Is there any additional stuff to play this, playlist? Yeah, yeah, yeah. Like these are the custom ones that are available, the standard ones. But you can choose your custom one and you can play this, but then you need to provide your own image for this one. Let's say I choose this crappy word icon for now, but there is a style guide that you need to follow. I'm not sure if this is going to work, but let's see. This is really big. It needs to kind of, but you can see the playlist is coming out here. So a bunch of standard ones, but then you can use whatever you like. Again, while presenting different controllers or multiple controllers, we saw how to kind of push and we saw how to use a page-based navigation, but then we can use another one, which is the model transition. Model is something that will come from the bottom of the screen, and you can dismiss. It comes from the bottom of the screen, then you have a cancel button automatically. Yeah, dismiss. Again, on the menu, let's say you want more than four items, because the maximum you can have is four. In the menu, if you want more than four items, you can, on top of a button, you can present a model with more buttons in it, and you can take action on the model. So yeah, this is about the view components. Any questions so far? Now the question comes, how do you pass data from your watch app to your iPhone application? There are a few ways to do it. One of them is they share certain resources with each other, like database files or the file system. Also, they also have some saved storage like user defaults. So you can use those things to pass data from your watch app to the iPhone application. Also, there's another application that I usually saw, where this guy is using something interesting. Let me see. But then you can use the same technique that the game developers use, kind of peer connection. So if you establish a connection with your iPhone application all the time, although that's not the recommended way of doing things, but you can use a peer connection to change things on the iPhone application also. So that's about the presentation, what you can do with watch app. There are a few other controls which are like date and timer that you can use depending on if you want to show users a date and time. Instantly, I can think about certain applications that you'll be using watch app probably to start with. Let's say, thinking about Singapore, right? We have a SBS Transit mobile application where you can see when is the next bus coming, right? And you can have a companion app on watch which basically doesn't tell you anything other than when is the next bus coming. The next bus is in 10 minutes to your nearest MRT or whatever, the next bus is in 20 minutes. Those kind of apps I can think in Singapore's context that you can kind of start thinking about. But other than that, you can have apps like, let's say, Twitter. Currently, you don't have a text component where you can type things. Like in Android, I think they have a text field where you can type things. But on iPhone watch, it's more like a view component where the view is presented on your watch app but the actual code runs in your iPhone application. But you can display things like how many likes, how many tweets and all those kind of things you can display. But probably in 2015, when the watch kit is available to general public or general developers other than the end-old Apple developers, currently in beta version, we might have other options that will be added to the SDK. But at this point, you can present these controls to just maps, tables, labels and buttons, all those things. And your code will be done on the iPhone application. Any questions? If not, I'll be here throughout the hackathon. If you have any questions related to watch app or iOS in general, you can approach me and you can ask me questions. And where do you learn these things? Actually, there is a watch app programming guide by Apple. But this provides you basically the general information and doesn't provide you much. You have this watch app and then this glance and notification. There is very minimal code there. However, you can go to this side that I talked about, rayuindelige.com, and there is video tutorials. You can watch there. There are some written tutorials also. And the video tutorials, you have this watch kit series, which kind of touches upon many things that I talked today. Other than that, they are coming up with a book, watch kit book, which you can pre-order. And it's $44. But for this hackathon, I got a discount code for you guys, 10% discount for any books that you buy on the base site. It's called Hackathon. And if you buy any books today or tomorrow from the site, you can have 10% discount on that. It also has got game development books and books for sweep and other things. So a bunch of other books. You can get 10% discount on all the books. But this is valid until tomorrow. The discount code is Hackathon. Thank you guys.