Telerik blogs
The Apple Watch has been a long rumored device that finally appeared in September, followed by a Watch SDK, called WatchKit, in November. The introduction of the SDK maybe raised more questions than it answered, and like everybody else, we're looking into the future for answers from Apple. One question is: how can I send data, larger than what is allowed for a push notification, from the iPhone to the Watch? Well, there are several ways to do it:

  • NSUserDefaults
  • Files
  • Core Data
There isn’t a single recommended approach by Apple, so all these methods are legit. However, NSUserDefaults is more appropriate for user preferences, rather than real data, and files may not be a good solution for all data scenarios. Therefore, if we have to choose, we will bet on Core Data, and today I am going to show you how you can send your Telerik Chart for iOS to the Apple Watch in the form of an image and a string stored in Core Data.

AppleWatch-CoreData

The most common scenario is to have an existing iPhone app project, using Telerik Chart for iOS, which you want to compliment with an Apple Watch app. So, this tutorial assumes that you already have such a project, and it’s called AppleWatchWithTelerikChart. Don’t worry if you didn’t check the Use Core Data checkbox back then when you created your iPhone app. We will assume that Core Data is not enabled initially, and will show you how to enable it in the existing app. Last but not least, this tutorial assumes that you are using Swift as your primary language.

The complete project structure will consist of an iPhone app, a WatchKit app and a framework that directly communicates with Core Data. We will use Xcode 6.2 Beta 4 to do all this. So, let’s get started.

Creating the WatchKit app

  1. With your iPhone app project opened in Xcode, go to File >> Target >> iOS >> Apple Watch >> WatchKit App and click Next
  2. Check the Include Notification Scene and Include Glance Scene checkboxes as you may need them at some point during your future development. In this tutorial we will focus on the main WatchKit app. The Product Name field will be filled in automatically for you, so just click Finish
    GlanceNotification
  3. You will be asked whether to activate the AppleWatchWithTelerikChart WatchKit App scheme. Click Activate.
  4. Open the Interface.storyboard from the AppleWatchWithTelerikChart WatchKit App folder and add Image and Label components to the Interface Controller Scene.
  5. Using Ctrl+drag, create IBOutlets and name them chartImageView and titleLabel. AppleWatch-InterfaceStoryboard



Creating the data proxy library

  1. With your iPhone app project opened in Xcode, go to File >> Target >> iOS >> Framework & Library >> Cocoa Touch Framework and click Next.
  2. Name the library WatchCoreDataProxy and select Swift from the Language drop-down. Click Finish.
  3. Right-click the WatchCoreDataProxy folder from the project structure panel and select New File >> iOS >> Core Data >> Data Model.
  4. Name the model WatchModel and click Create. This will create your model file and will open the Model editor for you.
  5. Create a new entity called ChartDataEntity and add two fields to the entity:
    • imageBinaryData of type Binary Data
    • stringData of type String
    DataModelChart

Now it’s time to implement the code needed to talk to the SQLite db behind the Core Data. The core logic of this implementation is the boilerplate code that you get in the AppDelegate.swift file when you create a project clicking the Use Core Data checkbox. Basically, this core logic consists of the applicationDocumentsDirectory, managedObjectModel, persistentStoreCoordinator and managedObjectContext properties and the saveContext method.

So, let’s add these to the WatchCoreDataProxy.swift the following way:
  1. Right-click the WatchCoreDataProxy folder >> New File >> iOS >> Source >> Swift File to create a new Swift file and name the file WatchCoreDataProxy.
  2. Add the following code:
  3. Next are the methods you have to implement in the WatchCoreDataProxy class to send data (image and text) from the iPhone app to the SQLite DB through Core Data, and the methods to fetch the saved data and expose it to the WatchKit app:

 

App Groups

Now that we have the iPhone app, the proxy library and the WatchKit app, it’s time to make sure that the iPhone app and the WatchKit app can actually share data. The thing that enables sharing data in whatever form between applications (Files, NSUserDefaults, CoreData) is called App Groups; both applications should be part of the same App Group. To enable the App Groups feature for both apps:
  1. Select the AppleWatchWithTelerikChart project from the project structure panel.
  2. Select the AppleWatchWithTelerikChart app target.
  3. Go to Capabilities >> App Groups and turn that feature ON. You will be asked to select your Development Team/Account.
  4. Check the group.watch.sample group. Of course, you can create your own group name, but for our demo purposes, we will use the default one. 
    AppGroupsiPhone
  5. Select the AppleWatchWithTelerikChart WatchKit Extension target.
  6. Go to Capabilities >> App Groups and turn that feature ON.
  7. Check the group.watch.sample group. It is important for the name of that group to be the same as the name of the AppleWatchWithTelerikChart’s App Group. 
    AppGroupsWatch

Sending and Getting the Data Using the Proxy Library

With the CoreData proxy, the App Groups enabled and the overall project structure built, let’s send the data from the iPhone through Core Data to the Apple Watch. We will send an image of our chart and a string.
  1. Take a screenshot of the chart. You can do it the following way, assuming that our TKChart instance is called chart:
  2. Import WatchCoreDataProxy
  3. Set the sharedAppGroup property of the Core Data proxy to the name of the App Group:
  4. Send the image and the string to the SQLite DB:
This is it from the iPhone app side. Now, let’s get the data from the SQLite DB and set it to the image and label objects on the Watch.
  1. Import WatchCoreDataProxy.
  2. Set the sharedAppGroup of the Core Data proxy to the App Group name:
  3. Get the image and the string from the SQLite thought the Core Data proxy:
  4. Set the image and string to the chartImageView and titleLabel:
This is one way to send data from iPhone to Apple Watch. We are looking forward to seeing if Apple will introduce another API for this data transfer between devices, but until that time comes, you can use this approach. The complete Swift project following the steps above can be found at GitHub.

Happy coding!
UIiOS-Banner

iOS, UI
About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Comments

Comments are disabled in preview mode.