Creating Your First Apple Watch Application

(5 votes, average: 5.00 out of 5)

Pham Van Hoang, hoangk55cd@gmail.com, is the author of this article and he contributes to RobustTechHouse Blog

Introduction

At WWDC 2015, watchOS2 for apple watch was made public and it came with a lot of new features and capabilities, including a new ability to write native apps that run right on the watch.

In this article we will show you how to create your first watchOS application named “Stopwatch” using Objective-C. Hooray!

Let’s Get Started

1. Go to Xcode and create new application. Select watchOS -> Application

2. Name the app as “Stopwatch”. In this project we don’t need notification so just deselect the option “Include Notification Scene”

3. Create user interface.

In this Stopwatch app, we will have a label to display our time; a start button to trigger (or stop) the timing; a lap button that allows us to record our last lap time; and a label to display it. To do this, head over to the “Interface.storyboard” in your Watch Kit App and add attributes as below.

“The projects you create for Apple Watch consist of two separate bundles: a Watch app and a WatchKit extension. The Watch app bundle contains the storyboards and resource files associated with all of your app’s user interfaces. The WatchKit extension bundle contains the extension delegate and the controllers for managing those interfaces and for responding to user interactions. While these bundles are distributed inside an iOS app, they are then installed on the user’s Apple Watch and run locally on the watch” – Apple docs

To have buttons that sit side-by-side of each other, we need to add them into a Group and configure them as below.

4. Outlets and Actions

The next step we have to take is to link these elements within our app. Go to “InterfaceController.h” class and create outlets and actions as below:

#import <WatchKit/WatchKit.h>
#import <Foundation/Foundation.h>

@interface InterfaceController : WKInterfaceController {
    NSTimer *timer; // we use timer to call function update UI every seconds
    NSDate  *startTime; // time that we press start stop watch
    NSString *currentTimeString; // save current time 
    BOOL isStarted; // check whether the timer is currently running
}

@property (strong, nonatomic) IBOutlet WKInterfaceLabel  *currentTimeLabel;
@property (strong, nonatomic) IBOutlet WKInterfaceLabel  *lapTimeLabel;
@property (strong, nonatomic) IBOutlet WKInterfaceButton *startButton;
@property (strong, nonatomic) IBOutlet WKInterfaceButton *lapButton;

- (IBAction)lapTimeButtonPress;
- (IBAction)startTimeButtonPress;

@end

5. Implement the function.

Now head over to file “InterfaceController.m” to implement codes that actually update time in our watch application.

First we want to add function that update timer every time we call and reset when user press button stop.

- (void) updateTimer {
    NSDate *dateNow = [NSDate date];
    NSTimeInterval interval = [dateNow timeIntervalSinceDate:startTime];
    NSDate *timeDate = [NSDate dateWithTimeIntervalSince1970:interval];
    NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
    [dateFormat setDateFormat:@"HH:mm:ss"];
    [dateFormat setTimeZone:[NSTimeZone timeZoneForSecondsFromGMT:0.0]];

    currentTimeString = [dateFormat stringFromDate:timeDate]; // save current time in stop watch
    [self.currentTimeLabel setText:currentTimeString]; // update UI 
}

- (void) resetTimer{ // reset timer when user click stop
    [timer invalidate];
    [self.currentTimeLabel setText:@"00:00:00"];
    [self.lapTimeLabel setHidden:YES];

}

Next, we need to trigger “update timer” function which update every second using NSTimer. We also need to check whether the timer is currently running or not, so we can disable/enable “lap” button and change the button start title to “stop/start”.

- (IBAction)startTimeButtonPress {
    isStarted = !isStarted;
    if (isStarted == YES) {
        [self.lapButton setEnabled:YES];
        [self.startButton setTitle:@"Stop"];

        startTime = [NSDate date];
        timer = [NSTimer scheduledTimerWithTimeInterval:1.0
                                                 target:self
                                               selector:@selector(updateTimer)
                                               userInfo:nil
                                                repeats:YES];
    }
    else {
        [self.lapButton setEnabled:NO];
        [self.startButton setTitle:@"Start"];
        [self resetTimer];
    }

}

Lastly, we just need to update “lap” label each time user presses on the “lap” button.

- (IBAction)lapTimeButtonPress {
    [self.lapTimeLabel setHidden:NO];
    self.lapTimeLabel.text = currentTimeString;
}

We have now completed a basic stopwatch application. Let’s run the project and enjoy your new apple watch app.

You can find the full example here. Hope you will find this post useful. If you have any questions, please leave the comments below. Thanks for reading.