Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add How to Create Stopwatch App for Watchkit to your Wishlist.

Add to Wishlist

How to Create Stopwatch App for Watchkit

This is a completed course to help you make a stopwatch application for IPhone and watchkit.
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
210 students enrolled
Created by Hieu Duc Pham
Last updated 3/2015
30-Day Money-Back Guarantee
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

Welcome to this class, I'm Hieu Pham, I started to work this IOS about 5 year ago.I start to work with Swift about 6 months ago and I very like this language and specially I'm very interested in apple Watch App. So I make this course to help you make applications for Apple Watch with Swift Language, whether you are a beginner or advanced developer, this course is for you!

The course covers the apple watch kit, help you to create a stopWatch on Apple Watch and iPhone using swift.

This course is suitable for any one who want to make an apple watch app. I'm similar like you and I only start to work with Apple Watch before you only few months so I will know how it is and I can give you my advises also my experiments to work with Apple Watch. I come from zero to learn how to make an app for IOS and apple watch and I know how to guide the student like you to make your apps with your idea. So don't worry. I will let you step by step from the beginning to the end of this course and will help you to fix your bugs and give you some advice to improve it. You will learn to prepare for you code environment and start your developer Carrier by making some easy app and I will guide you step by step to better apps.

At the end of this course , You can make this application (Absolutely YES!) and you can update some function and upload it to Apple Store if you want. The target of this course is help you to make your own app or you can make apps for everyone!!

It's very interesting isn't it? So let start with me and don't for get to take a look some video preview of my course. If you get this course you will get 50% off for my next courses.


The course consists of:

+ Hour video lectures with code from scratch

Application files and source code ready for download.

Who is the target audience?
  • This course is for everyone who want to make an app with Apple WatchKit with very basic of knowledge coding. All require for this course is you. I can lead you from the zero to the goal that you can make your own AppleWatch application.
Students Who Viewed This Course Also Viewed
What Will I Learn?
Learn to communicate between watchkit and IOS application
View Curriculum
  • You will using Xcode beta for coding
  • Basic knowledge about coding
  • Your time!
Curriculum For This Course
Expand All 32 Lectures Collapse All 32 Lectures 05:09:03
Intro watchkit And Prepare for Coding
5 Lectures 27:34

  • welcome to my course. I'm Hieu Pham, I'm a developer of IOS and this is my Third Course on UDEMY. This course is help you to make your own application for apaple watch. As you know Apple has announce about Apple Watch from last year and they said that apple watch will be sale early in 2015. At november of 2014 , apple released the Xcode beta with watch kit for developer all around the world to make their application and prepare for release of apple Watch. First of all if you don't know what apple watch is and how is is? i think this is the web site you should take a look

    as you can see from the address. you can take a look what apple watch look like and how it operate.

    The apple watch has three type and and to size of screen like 42mm and 38mm. But all of that has operate same.
    In this course we will learn how to make an application for apple watch and were going to use the swift language for coding. You can use Object C if you like by my advice is swift. Why? because swift is new language, encourage by Apple and easy to learn from my experiment. Right now apple still accept your code written by object C to apple Store but may be in the future, only Swift is accepted. So i think you should start by swift. Don't worry, i will go to step by step with you and lead you to the destination, help you as much as i can.

    So let's start!!
Preview 03:46

Welcome back, In this lecture, i will guide you to preparing for your coding and some tips for your code carrier.

First of all we have to use Xcode Beta to developer the apple watch application. At this time, only Xcode beta include the watch kit for you to code. IF you using Xcode, you only make an app for IOS or MACOS not for Watch App. So you have to download the Xcode Beta. Right now Xcode version is 6.2 beta 5

first go to the address:

in here you can see overview about watchKit and resource for your developing

Create WatchKit apps.

WatchKit apps have two parts: A WatchKit extension that runs on iPhone and a set of user interface resources that are installed on Apple Watch. When your app is launched on Apple Watch, the WatchKit extension on iPhone runs in the background to update the user interface and respond to user interactions. WatchKit provides three opportunities to extend your iPhone app to Apple Watch: WatchKit apps, Glances, and actionable notifications.

you should View the Getting Started

with WatchKit video in here. it's very useful for you.

and scroll down to the last end and you can download the xcode beta in here.

Apple require you have a developer account to download xcode beta but you can log in by your apple id and agree with term of Apple and download it!

Preview 03:40

Create your first Apple Watch Application - Hello world. You will learn to create your first application with apple watch kit on simulator. Learn to Work with label and group.

Preview 13:22

- Make a challenge

- Share some tips to help your coding

- if you have any question, please upload your code.


Let's test your self for first section. See what you learned and what you've got?

Test Your Self!!
3 questions
Introduce the Stopwatch Idea and Make a Design
2 Lectures 05:15

Let's see what will we got at the end of this course!!!

Introduce the Stopwatch Application

Why we have to make a design first?

Before you make any app. First of all you will come from your idea. after that you should draw out your idea, draw out how your app look like. how many interface and how many button, how many label…After that we will have a over view about our app and we can make an app very clearly. you can imagine that when we make a app like we are building a house. before we build a house we have to make a design for our house. And you know, you can reduce the time of making app from 2 or 3 times if you do this. So let start make our design first.

Make a Design for Our App
Make IOS Part
11 Lectures 01:53:17

First of all we will make an IOS part for our application. And let's start with make a new project and make interface for IOS part.

Create IOS Interface From Our Design

As you can see we have a little bug when we run our application on a different iPhone screen size. It's does not show up as we design. So in This lecture, i will help you use the auto layout to fix this bug using auto layout.

Auto Layout for Our Design P1

As you can see we have a little bug when we run our application on a different iPhone screen size. It's does not show up as we design. So in This lecture, i will help you use the auto layout to fix this bug using auto layout.

Auto Layout for Our Design P2

Now it's time for us to connect all the elements on the interface to our coce for controlling it.

First of all we have to determine which elements on the interface we will controll. because. we have to connect that elements to our code for controlling.

Hook All the Elements on Interface to Code for Controlling

Let's create a start function for start counting time for our stopwatch.- To make a watch in our app, we're using a timer to coun the time.

timer = NSTimer.scheduledTimerWithTimeInterval(0.01, target: self, selector: Selector("updateTimer"), userInfo: nil, repeats: true)

Make Start Function P1

- When we have a duration of timer, we need a function to format the duration to the format which we want:

func dateStringFromTimeInterVal(duration: NSTimeInterval, withTimeFormat:String) -> String {

// Create a dateformatter

var dateFormatter = NSDateFormatter()

dateFormatter.dateFormat = withTimeFormat

dateFormatter.timeZone = NSTimeZone(name: "GMT")

var date = NSDate(timeIntervalSince1970: duration)

return dateFormatter.stringFromDate(date)


Make Start Function P2

- We will make a stop function for our watch. When user press stop, we want to stop the timer and reset the timeLabel.

- Fix the bug when we press stop button before we start the timer.

- Fix bug when we press the play button again when our stopwatch is running.

Make Stop Function

- We will make a pause function for our watch. When user press pause, we want to stop the timer save the pausetime. When user press play, we will create a new timer and shift the timer to the rightime when user press play.

- similar like a play button, we will fix the bug when user press the pause button two times or user press the pause button brefore we press play.

Make Pause Function

- Set up a history table. When the user press the lap, we will got the lap and show up to the our history Lap table.

- setup a clear function for user clear the history table.

Setup a Lap History Table P1

- Set up a history table. When the user press the lap, we will got the lap and show up to the our history Lap table.

- setup a clear function for user clear the history table.

Setup a Lap History Table P2

As you can see, this function of our IOS App is good now but we need to decorate our application for better user interface. Could you do that?

Challenge, Can You Decorate Your App?

Test your self!
2 questions
Make Watch app Part
14 Lectures 02:42:57

we already add a watchkit extension to IOS app one time before, but we will do it again incase that you don't remember how to do that.

Add Watchkit Extension to Our App

- we will add a watchkit target to our application.

- Similar like IOS part we will make a interface for our watch app like our design.

- practice to work with group on watchkit Interface. In watchkit Interface, we don't have auto layout function, so we have to manage all the element by group and side, with on the interface.

Create WatchApp Interface From Our Design

Apple watchKit does not support add a video or gif image to our watch interface yet. So we have to use a severate of Images to create a animated Image to our App. Let's do that.

Create Animated StopWatch

- It's similar like we already did on IOS part. IT's time for us to hook all the element to out code for controlling.

- when we add a new watchkit extension to our app, the Xcode will help us create a interface with interfaceController.swift for controlling the element in the interface.

- apple WatchKit does not support the animate gif image so we have to create the animate image by several images.

Hook All the Elements on Interface to Code for Controlling

- Now we will make a connection between watchkit and IOS app. We're using openParentApplication function.

- In the Watchkit part:

we using requestInfor to send a request to IOS part:

var requestInfo = ["functionRequest":"hello"] and after that we will handle the reply from watchkit.

WKInterfaceController.openParentApplication(requestInfo, reply: { (reply:[NSObject : AnyObject]!, error:NSError!) -> Void in

if error == nil {

println("reply: \(reply)")



- In IOS Part:

we using a handlewatchkitExtensionRequest:

we will handle the request depend on the requestInfo (or userInfo)

func application(application: UIApplication!, handleWatchKitExtensionRequest userInfo: [NSObject : AnyObject]!, reply: (([NSObject : AnyObject]!) -> Void)!) {

if let infor = userInfo as? [String:String] {

if let functionRequest = infor["functionRequest"] {

if functionRequest == "hello" {

reply(["functionReply": "Hello Watchkit"])





Send a Request From Watchkit to IOS P1

We will finish to send the request for all of our Button on the interface. we will send a different Request Info depend on which button is pressed!

Send a Request From Watchkit to IOS P2

Test Your self!!
2 questions

we can send a request to IOS part and received a reply from IOS part but that is only reply from Appdelegate, incase we want to received the data and want to send back data to watchkit, for example, we want to send the lap history or the lap to our watchkit. How can we do that?

- we will make a swift file to save the info and reply and we will using a notification to send the info to IOS app for run a function for us. you can think it like this:

- now we will create a new swift file that can save the watchkit infor inclue the request and the reply to our watch

import Foundation

class WatchKitInfo {

let keyRequest = "functionRequest"

var replyBlock:([NSObject : AnyObject]!) -> Void

var FunctionRequest:String?

init(requestInfo:[NSObject : AnyObject]!, reply: ([NSObject : AnyObject]!) -> Void) {

if let requestInfoDictionary = requestInfo as? [String : String] {

FunctionRequest = requestInfoDictionary[keyRequest]

} else {

println("eror: no infomation!")


replyBlock = reply



-after that we will create a watchkitInfomation object and using a nofitication services to send it to our viewcontroller.

let watchkitInfomation = WatchKitInfo(requestInfo: userInfo, reply: reply)

NSNotificationCenter.defaultCenter().postNotificationName("watchKitMakeRequest", object: watchkitInfomation)

- Now we can handle this notifiaction on viewdidload on Viewcontroller


Add Notification to Run Function From WatchKit to IOS P1

Add Notification to Run Function From WatchKit to IOS P2

- Add a animated stopwatch image, and fix when user press twice times when running stopwatch

- similar like IOS part, we will add new variable to check the stopwatch is running or not.

Call a Play and Stop Function

- use a isStopWatchPausing variable.

-Use //mark : to arrange your function clearly.

- Using a delay function to delay code and make a animation

let delayTime = dispatch_time(DISPATCH_TIME_NOW,Int64(1 * Double(NSEC_PER_SEC))) dispatch_after(delayTime, dispatch_get_main_queue()) { println("test") }

but we will have a little bug because of function will running after we press more than two times in pause button.

Call a Pause Function

using stackOverFlow to ask a question and fix our bugs

Fix a Bug for Animated

We make a function for lap, clear and get the lap history button by sending a request to IOS part.

Finish other Buttons

Finish our LapHistory Table

This is a little Challenge for you

About the Instructor
4.3 Average rating
3 Reviews
623 Students
3 Courses
IOS Developer

I’m Hieu Pham, I started to know about IOS and work this IOS about 5 year ago.

I start to work with Swift about 6 month ago and I very like this language and specially I’m very interested in apple Watch App. I'm working at Taoviet-Apple-Services about nearly 5 year. I have a lot of applications on Apple store

I already join a lot of online courses from the beginning of my developer carrier, some courses are good, some courses are not good as I thought. So I know how to help the student work effective with their learning. After experimenting with various courses, learning styles, and teaching processes, I've adopted the best strategies and used them in my courses. Since the announcement of the new Swift programming language by Apple, I have work with Swift since that also for Apple watch too. You can check my application on Apple Store by search the and Hieu Pham.

Report Abuse