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
$20
Take This Course
  • Lectures 32
  • Contents Video: 5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 English

Course Description

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.

What are the requirements?

  • You will using Xcode beta for coding
  • Basic knowledge about coding
  • Your time!

What am I going to get from this course?

  • Learn to communicate between watchkit and IOS application

What 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Intro watchkit And Prepare for Coding
Before Started
Preview
01:11
03:46
  • 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
    http://www.demoapplewatch.com

    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!!
03:40

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:

developer.apple.com/watchkit/

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!

13:22

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.

05:35

- Make a challenge

- Share some tips to help your coding

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

3 questions

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

Section 2: Introduce the Stopwatch Idea and Make a Design
01:01

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

04:14

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.


Section 3: Make IOS Part
14:03

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.

06:49

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.

10:42

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.

15:24

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.

10:16

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)

10:41

- 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)

}

12:51

- 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.

11:05

- 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.

09:20

- 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.

08:51

- 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.

03:15

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?

Test your self!
2 questions
Section 4: Make Watch app Part
05:59

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.


18:22

- 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.


10:50

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.

11:08

- 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.

12:50

- 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"])

}

}

}

}



09:06

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!

Test Your self!!
2 questions
02:58

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 P2
15:12
13:55

- 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.

19:11

- 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.

10:45

using stackOverFlow to ask a question and fix our bugs

11:05

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

Finish our LapHistory Table
19:35
02:01

This is a little Challenge for you

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hieu Duc Pham, 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 taoviet.vn and Hieu Pham.

Ready to start learning?
Take This Course