Oursky Code
  • AI
  • Auth
  • More from Oursky
    • Oursky Business Blog
    • GitHub
    • About Us
  • AI
  • Auth
  • More from Oursky
0
Subscribe
Oursky Code
Oursky Code
  • AI
  • Auth
  • More from Oursky
    • Oursky Business Blog
    • GitHub
    • About Us
  • iOS

Spentable (Expense Tracker): How we built our first app for watchOS 2

  • September 24, 2015
  • 5 comments
  • 5 minute read
  • David Ng
Spentable: How we built our first app for watchOS 2
Total
0
Shares
0
0
0

In WWDC2015, Apple announced iOS 9 for iPhone and watchOS 2 for iWatch. It has been a huge revamp for watchOS. Not until now, a watch app finally runs natively on the watch.

That means the code is now executing on your watch instead of the phone. By reducing multiple times of data transfer between devices, this is going to make the app loads a lot quicker and responds in a shorter period of waiting time.

watchOS 1
WatchKit Extension runs on the phone and the Watch App is more like a display console for your app.

watchOS 1
watchOS 1

watchOS 2
WatchKit Extension now runs on the watch, you don’t have to run a watch app with the phone connected actively.

watchOS 2
watchOS 2

 Spentable: our first app on the watch

Spentable Watch FaceOursky has recently built Spentable 2.0 , it’s also available on the Apple Watch.

Spentable is a handy, in-your-pocket app that helps you to track your expenses and make purchasing decisions. Now you can even track you daily expense via the watch App without taking out your phone.

In this post, we will talk about the experience on building an app for watchOS 2.

Since the watch app is now running on the watch as a native extension, there are situation we need to handle data sync between the phone and the watch. For example, we wish expense input via the watch will be reflected on the phone instantly.


wireless

Get connected to the phone: Watch Connectivity Framework

In watchOS 1, the watch app must be connected to the iPhone app (we call it the main app) to work. We often call to send a message to the iPhone app. However, now the connections in watchOS2 are handled by the Watch Connectivity Framework.

The Watch Connectivity Framework provides a seamless background connection between iPhone and iWatch. It helps doing all the synchronization work between the main app and the watch app. When the watch app handles a user input say, a new expense item, it has to notify the main app and get the record updated. The could be easily done via the Watch Connectivity Framework.

This allows Device-to-device communication more freely (such as transferring files, user infos and application context around ). There are serval APIs to transfer particular data for different use cases.

So how do we choose between them?

Update Application Context

updateApplicationContext:error: is good for a small amount of volatile data in background. Most of the cases we send state changes and view content, as the later dictionary data sent will replace the previous. In Spentable, we make use of this API to update the Monthly/ Daily total on app’s glance and complication interface.

You can call updateApplicationContext even when the watch app is currently unreachable (and even not installed). The main app can update all the preferences and states as the watch is always there. This brings a huge advantage on the User Experience : Preferences data will be received upon the Watch App is launched for the first time. Hence the app is ready to be used instantly on the watch without asking users to open the main app for initial synchronization.

Here’s what we did to update daily and monthly amount:

- (void)updateApplicationContextExpenseTotal
{
    GetMonthlyExpenseInteractor *monthlyExpenseInteractor =  init];
    GetDailyExpenseInteractor *dailyExpenseInteractor =  init];
    
    NSMutableDictionary *updateDict = ;
    
    NSMutableDictionary *monthlyAmounts = ;
    for (NSDictionary *expense in )
    {
        monthlyAmounts uuid]] = expense;
    }

    updateDict[@"watch:expense:month"] = @{ @"amounts" : monthlyAmounts,
                                            @"date" :  };
    
    updateDict[@"watch:expense:day"] = @{ @"amount" :,
                                          @"date" :  };
    
    ;
}

- (void)updateApplicationContextWithDictionary:(NSDictionary*)dictionary
{
    NSMutableDictionary *ac = ;
    for (id key in dictionary.allKeys)
    {
        ac = dictionary;
    }
    ;
    [ initWithSuiteName:kAppGroupName] setObject:ac forKey:@"applicationContext"];
    [ initWithSuiteName:kAppGroupName] synchronize];
}

Transfer UserInfo

transferUserInfo:
transferCurrentComplicationUserInfo:

As the name suggested, we can transfer UserInfo and Complication info between paired devices. It differs from updaterApplicationContext:error: with its data queued on the recipient device in order. This is critical for consistency, as in Spentable, we have to handle all the expense records in a sequential order.

Transfer File

transferFile:userInfo: does the file transferring job in background. This API is useful for displaying received images/files on the watch if you are writing a social / messenger application.

Send Message

sendMessage:replyHandler:errorHandler:
sendMessageData:replyHandler:errorHandler:

This is the only API that requires active connection with the phone. Upon calling the method, data is sent immediately to the receiving app. This might remind us of the legacy API in watch OS 1, which also requires active connection between devices.

You can also specify a reply handler to handle the response. This is great if you need a immediate response from the counter app, however if it is unreachable (not launched or in the background), the errorHandler block will be executed instead. So this is not really suitable to send data you wish to persist.


Fit you app in the tiny watch face : Layout on Watch App

Design layout on a tiny watch face can be challenging. Despite Apple has officially provided guidelines for watch app design.

Meanwhile, during development there are also points regarding the interface good to note:

Storyboard only for watch

Developers MUST use Storyboard to define layout

  • Mind that there are constraints:
    • Views cannot overlap each other
    • Element position can only set using Vertical / horizontal alignment, you should not Hard code thier absolute position

Best to bear in mind – there are different sizes.

  • There are two kind of watch size (38mm and 42mm) available from Apple. For some layouts, we have to customize for layout for both sizes, for example difference image size and margin settings.

Handle TableView for the watch

TableViews are handled differently than we often do in an iPhone app. Instead of getting an UITableViewCell from -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath , on watchOS we make use of a MainRowType Object.

A MainRowType object is just an NSObject that holds the icon and row description itself. Then we can config each row according to the the properties in each MainRowType. For example, we have defined WatchMonthlyExpenseRowType as such:

WatchMonthlyExpenseRowType
WatchMonthlyExpenseRowType
#import <WatchKit/WatchKit.h>

@interface WatchMonthlyExpenseRowType : NSObject

@property (weak, nonatomic) IBOutlet WKInterfaceGroup *backgroundView;
@property (weak, nonatomic) IBOutlet WKInterfaceImage *imageIcon;
@property (weak, nonatomic) IBOutlet WKInterfaceLabel *labelName;
@property (weak, nonatomic) IBOutlet WKInterfaceLabel *labelAmount;

@end

Developers can build more powerful apps with the new APIs on watchOS 2. We hope this experience will help anyone there who wish to create watch apps.

Please let us know your thoughts via comment below or our Twitter.


Get Spentable. Get the love of your life.

Spentable at AppStore

Spentable is now available on the AppStore. Please give it a try!
Give us any valuable feedback, this would help us make Spentable better for you.

 


Futher Readings

About Designing Apple Watch Apps
https://developer.apple.com/videos/wwdc/2015/?id=802

Introducing WatchKit for watchOS 2
https://developer.apple.com/videos/wwdc/2015/?id=105

More about watchOS 2
https://speakerdeck.com/oursky/watchos2


Tell us what you think and subscribe to our blog if you find this helpful.


 

Follow us on twitter to get updated.

 

Read more from Oursky

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Related Topics
  • app
  • Dev
  • iOS
  • spentable
  • watch
  • watchOS
David Ng

Previous Article
Slack dSYM bot for Sentry
  • iOS

Better StackTrace for iOS crash report from Sentry on Slack

  • September 11, 2015
  • Rick Mak
View Post
Next Article
  • iOS

Manage your AppStore Preview Images in one place – make your life easier with ShotBot

  • November 9, 2015
  • David Ng
View Post
You May Also Like
iphone X ios 11
View Post
  • iOS

Preparations you may have missed before submitting an iOS 11 app

  • October 9, 2017
  • David Ng
View Post
  • Android
  • iOS
  • UX/UI Design

Offline-First: No More Network Connection Error

  • August 12, 2016
  • May Yeung
View Post
  • Android
  • iOS
  • Software Testing

Journey Through Agile Test Automation

  • May 6, 2016
  • Joyz Ng
Top 10 Mobile App UX Design Mistakes
View Post
  • Android
  • iOS
  • UX/UI Design

Top 10 Mobile App UX Design Mistakes

  • November 24, 2015
  • Joyz Ng
View Post
  • iOS

Manage your AppStore Preview Images in one place – make your life easier with ShotBot

  • November 9, 2015
  • David Ng
Slack dSYM bot for Sentry
View Post
  • iOS

Better StackTrace for iOS crash report from Sentry on Slack

  • September 11, 2015
  • Rick Mak
View Post
  • iOS

VIPER – iOS App Architecture Beyond MVC (Mega-ViewController)

  • May 19, 2015
  • Percy Lam
View Post
  • iOS
  • Opensource

Continuously Delivering iOS Beta Builds Automated with Travis CI

  • March 26, 2015
  • David Ng
5 comments
  1. Tyrone Hamilton says:
    September 25, 2016 at 8:12 am

    Wow, thank you very much for sharing. I’m not an iOS dev but I sure learned something from this.

    Reply
    1. Athena Lam says:
      September 26, 2016 at 6:43 am

      Thanks Tyrone! Do you have any plans to make anything for iOS?

      Reply
  2. Lucas @ Pro Lead Soft says:
    February 3, 2017 at 3:08 pm

    Wow, thank you very much for sharing. I’m not an iOS dev but I sure learned something from this.

    Reply
  3. Luca says:
    July 16, 2017 at 1:38 pm

    Looks amazing! It seems a lot of work went into building this app for WatchOS.

    Reply
  4. Lisa @ Logo Venture says:
    June 13, 2018 at 6:06 pm

    I have been looking this information for a while because I am learning iOs language and this will definitely help me in future.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe Us

Join our mailing list to never miss an update!

Oursky Code Blog
A team of Developers, Designers and Geeks. All about hacking and building things.

Input your search keywords and press Enter.