Apps on your Wrist

@sarbogast @eloudsa#Devoxx #smartvoxx
Apps On Your Wrist
Sébastien Arbogast
Said Eloudrhiri

#Devoxx #smartvoxx @sarbogast @eloudsa
• Who owns a smartwatch?
• Who is an Android developer?
• Who is an iOS developer?
• Who is a Pebble developer?
• Who is a Rolex developer?
• Who has already written a smartwatch app?
• Who is a member of the Night’s Watch?
Survey

Sébastien Arbogast 
@sarbogast
• Java developer for 10 years
• iOS developers for 5 years (developer of the ﬁrst Devoxx schedule
app)
• Pebble developer for 2 years
• Owner of TikTok Lunatik with iPod Nano
• VP of engineering for Take Eat Easy

Said Eloudrhiri 
@eloudsa
• Developer since 1992
• Agile Coach and trainer
• Devoxx4Kids helper (Sphero, MindStorms, CodeCombat)
• Side Projects: mobile development
• Husband and father of Nora, Rayane and Djenna
• No kitten but a dog

Disclaimer
We are not related to Google,Apple or Pebble.
We are just curious developers sharing our experience.
Materials used in this presentation remains the property of their
owners.
Any questions?

Once upon a time …

Polex (1000 BC)

Pulsar P1 (70’s)

Casio Databank (80’s)

Linux wristwatch (90’s)

TikTok Lunatik (2011)

Pebble (2012)

Samsung Galaxy Gear (2013)

Moto 360 (2014)

Apple Watch (2015)

Why develop for smartwatches?

Glanceable

Sensors

Notification-driven

Small screen

Interactions

Personal use

Landscape
Apple  
Watch
Android  
Wear
Pebble Tizen

• Form factor: 38 mm and 42 mm (Square)
• Four kinds of applications: apps, notiﬁcations, glances,
complications
• Design guidelines: personal communication, holistic design,
lightweight interaction
Design constraints on Apple Watch

• Form factors
• Kinds of applications
• Design guidelines
Design constraints on Android Wear

Fragmentation: Welcome!

Square Round Round Chin
Design constraints on Android Wear

• Suggest: Context Stream
UI/UX Principles
The right information at
the right time.

• Demand: Cue Cards
UI/UX Principles
No suggestions?
Just ask!

• Contextually aware and smart
UI/UX Principles

• Cards
Applications: Notifications

• Bridged notiﬁcations: natively supported

4
• Custom notiﬁcations

Applications: Full-screen

Applications: Watch faces

Smartvoxx
• smartvoxx.com

Smartvoxx

Step 1: Hello Devoxx!

Step 1: Hello Devoxx!
• Check the requirements
• Android Studio
• Android SDK Libraries
• Create the project (Mobile + Wear)
• Create Wear emulators (Square, Round, Round Chin)
• Change resources
• Run the application

• Mobile running Android 4.3 (API 18) or higher
• Watch running Android 5.0 (API 20) or higher
Requirements

Requirements
g.co/WearCheck

http://tools.android.com/download/studio/stable
Android Studio

Android SDK Manager

• Tools:
• Android SDK Tools
• Android SDK Platform-Tools
• Android SDK Build-Tools
• Android from API 18 (4.3.1) to API 22 (5.1.1) and higher
• SDK Platform
• Google APIs
• Android Wear Intel x86 System Image
• Google APIs Intel x86 Atom System Image
Required libs

• Extras:
• Android Support Repository
• Android Support Library
• Google Play Services
• Google Repository
Required libs

Android Studio or Eclipse?
• Android Development Tools (ADT)
• Andmore - Eclipse Android Tooling (Incubation Project)
https://projects.eclipse.org/projects/tools.andmore
http://developer.android.com/tools/sdk/eclipse-adt.html

Demo

Create the projet

Two modules: mobile + wear

Step 1: Development environment

Create wear emulators

Emulator per form factor

• Run the Wear module:
• Choose an emulator:
Run on Wear Emulator

Square Round Round Chin
Step 1: Done!

Step 1: Development environment
• XCode 7
• Swift or Objective-C
• WatchKit and WatchOS
• Either create iOS+Watchkit project from scratch
• Or add Watch extension to existing iOS app
• No standalone Watch app
• iOS + WatchOS simulator

Step 1: Done!

Step 2: Devoxx CFP API
• Schedules
• Slots
• BreakSlot
• TalkSlot
• Speakers

{ 
"links": [ 
{ 
"href": "http://cfp.devoxx.be/api/conferences/DV15/schedules/monday/", 
"rel": "http://cfp.devoxx.be/api/profile/schedule", 
"title": "Monday, 9th November 2015 
}, 
… 
] 
}
Schedules
http://cfp.devoxx.be/api/conferences/DV15/schedules/

{"slots": [
{
"roomId": "a_hall",
"notAllocated": false,
"fromTimeMillis": 1447052400000,
"break": {
"id": "reg",
"nameEN": "Registration, Welcome and Breakfast",
"nameFR": "Accueil",
"room": {
"id": "a_hall",
"name": "Exhibition floor",
"capacity": 1500,
"setup": "special"
}
},
…
}
]}
Slot
http://cfp.devoxx.be/api/conferences/DV15/schedules/monday/

API for Devoxx sessions
• http://cfp.devoxx.be/api
• http://cfp.devoxx.fr/api
• http://cfp.devoxx.co.uk/api
• http://cfp.devoxx.ma/api
• http://cfp.devoxx.pl/api

Step 2: Done!

Step 3: Get Schedules
… monday - Monday, 9th November 2015
… tuesday - Tuesday, 10th November 2015
… wednesday - Wednesday, 11th November 2015
… thursday - Thursday, 12th November 2015
… friday - Friday, 13th November 2015

• Google Play Services and the Data Layer API:
• Node API, Message API
• The watch sends a request to the phone
• The phone accesses the network to fetch the schedules
• The phone logs the schedules

Google Play Services

Data Layer API
Data Layer
Message API
Data API
Node API

Google API Client
Device
Google Play
Services
Your App
Google API Client
Google Play
services library
Message API
Data API
Node API

Node API
• Learn more about local or connected Nodes
• Display name
• Id to identify the node in the Android Wear network
• Nearby the local node

Message API
• One-way communication
• Message (Data Item) sent to the connected device
• path -> identiﬁes the message
• payload -> small message payload

Data Item
Path Payload
/path/to/your/data
Byte array
max: 100 Kb
Asset (Binary Blob) can go beyond this limitation of 100Kb. 
Requires the Data API.

Watch
MessageApi
sendMessage()
Data Layer
Phone
WearableListenerService
onMessageReceived()
Data Layer
Bluetooth/Wi-Fi
MessageEvent
getData()
getPath()
Data Item
Message API

Wi-Fi
Fallback solution when Bluetooth not
available.
Unable to connect on remote servers.

Watch part
• Declare the Google API Client
• Connect-Disconnect to-from Google Play Services
• Deﬁne the message path
• Add a button listener
• Send the message to the phone to get the schedules

Phone part
• WearableListenerService: receive events from the Data Layer
• Process message path “/schedules” (onMessageReceived)
• Retrieves schedules with Retroﬁt (REST API Client)
• Logs schedules on the console

<Button 
android:id="@+id/getSchedules" 
style="?android:attr/buttonStyleSmall" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:text="Get Schedules" />
Layout: Add a button

public class ScheduleActivity extends Activity {
private GoogleApiClient mApiClient;
…
@Override 
protected void onStart() { 
super.onStart(); 
 
mApiClient = new GoogleApiClient.Builder(this) 
.addApi(Wearable.API) 
.build(); 
 
mApiClient.connect(); 
} 
 
 
@Override 
protected void onStop() { 
if ((mApiClient != null) && (mApiClient.isConnected())) { 
mApiClient.disconnect(); 
} 
 
super.onStop(); 
}
Activity: Google API Client

private final String SCHEDULES_PATH = "/schedules";
…
@Override 
protected void onCreate(Bundle savedInstanceState) {
…
stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() { 
@Override 
public void onLayoutInflated(WatchViewStub stub) { 
mTextView = (TextView) stub.findViewById(R.id.text); 
 
stub.findViewById(R.id.getSchedules).setOnClickListener(new View.OnClickListener() { 
@Override 
public void onClick(View v) { 
sendMessage(SCHEDULES_PATH, "dummy"); 
} 
}); 
} 
});
} 
Activity: Button Listener

…
private void sendMessage(final String path, final String message) { 
new Thread(new Runnable() { 
@Override 
public void run() { 
// broadcast the message to all connected devices 
final NodeApi.GetConnectedNodesResult nodes = Wearable.NodeApi.getConnectedNodes(mApiClient).await(); 
for (Node node : nodes.getNodes()) { 
Wearable.MessageApi.sendMessage(mApiClient, node.getId(), path, message.getBytes()).await(); 
 
} 
} 
}).start(); 
}
Activity: Send Message

…
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar']) 
wearApp project(':wear') 
compile 'com.android.support:appcompat-v7:22.2.1'
compile ‘com.google.android.gms:play-services:8.1.0’

// Rest API Client 
compile ‘com.squareup.retrofit:retrofit:1.9.0’
}
REST API Client library: Retrofit
build.gradle

package net.noratek.smartvoxxwear.rest.model; 
 
import java.util.List; 
 
 
public class Schedules { 
 
private List<Link> links; 
 
public List<Link> getLinks() { 
return links; 
} 
} 
Model: Schedules

package net.noratek.smartvoxxwear.rest.model; 
 
/** 
* Created by eloudsa on 06/09/15. 
*/ 
public class Link { 
 
private String href; 
private String rel; 
private String title; 
 
 
public Link(String href, String rel, String title) { 
this.href = href; 
this.rel = rel; 
this.title = title; 
} 
 
// Getters and Setters 
…
} 
Model: Link

package net.noratek.smartvoxxwear.rest.service; 
 
import net.noratek.smartvoxxwear.rest.model.Schedules; 
 
import retrofit.Callback; 
import retrofit.http.GET; 
import retrofit.http.Path; 
 
/** 
* Created by eloudsa on 30/10/15. 
*/ 
public interface DevoxxApi { 
 
 
@GET("/conferences/{conference}/schedules") 
void getSchedules(@Path("conference") String conference, Callback<Schedules> callback); 
} 
REST Endpoint for Schedules

• New class WearService extended from

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="net.noratek.smartvoxxwear" >
<uses-permission android:name="android.permission.INTERNET"/>
 
<application 
… 
 
<service android:name=".service.WearService"> 
<intent-filter> 
<action android:name="com.google.android.gms.wearable.BIND_LISTENER" /> 
</intent-filter> 
</service> 
 
 
</application> 
 
</manifest> 
Service: Adapt the manifest

public class WearService extends WearableListenerService {
…
@Override 
public void onMessageReceived(MessageEvent messageEvent) { 
 
// Processing the incoming message 
String path = messageEvent.getPath(); 
String data = new String(messageEvent.getData()); 
 
if (path.equalsIgnoreCase(SCHEDULES_PATH)) { 
retrieveSchedules(); 
return; 
} 
} 
Process “/schedules”

public class WearService extends WearableListenerService { 
… 
// Retrieve schedules from Devoxx 
private void retrieveSchedules() { 
// retrieve the schedules list from the server 
Callback callback = new Callback() { 
@Override 
public void success(Object o, Response response) { 
// retrieve schedule from REST 
Schedules scheduleList = (Schedules) o; 
if (scheduleList == null) { 
Log.d(TAG, "No schedules!"); 
return; 
} 
 
List<Link> links = scheduleList.getLinks(); 
 
for (Link link : links) { 
Log.d(TAG, Utils.getLastPartUrl(link.getHref()) + " - " + link.getTitle()); 
} 
} 
 
@Override 
public void failure(RetrofitError retrofitError) { 
Log.d(TAG, retrofitError.getMessage()); 
} 
}; 
mMethods.getSchedules(mConferenceName, callback); 
}
Retrieve Schedules

Run on Phone
• Build and deploy on Phone and Watch
• Forwarding ports (adb forward tcp:…):
• Link Phone to Wear Emulator
• On the Watch, tap on “GET SCHEDULES” button
• Check the log output of the phone

• Start the emulator
• Start a virtual device
Start Wear Emulator

Debugging with Emulator
USB
Bridge
adb -d forward tcp:5601 tcp:5601

• Select the top right menu
• Select “Pair with emulator”
Pairing the emulator

… monday - Monday, 9th November 2015
… tuesday - Tuesday, 10th November 2015
… wednesday - Wednesday, 11th November 2015
… thursday - Thursday, 12th November 2015
… friday - Friday, 13th November 2015
Step 3: Done!

• If phone is connected, go through phone
• Otherwise access the network directly
• Transparent for the developer
• Access to the same network SDK as on the iPhone
(NSURLSession)

• Bypass App Transport Security
• Create Devoxx singleton to handle API client stuff in watch
extension
• Initialize session conﬁguration
• Initialize session
• Call the API
• Parse JSON into dictionaries
• Log dictionaries to the console

Bypass transport security

import WatchKit
class Devoxx: NSObject {
static var sharedInstance = Devoxx()
func loadSchedulesForConference(conference:String, callback: ([NSDictionary]) -> (Void)) {
let configuration = NSURLSessionConfiguration.defaultSessionConfiguration()
configuration.requestCachePolicy = NSURLRequestCachePolicy.ReloadIgnoringLocalCacheData
let session = NSURLSession(configuration: configuration)
guard let schedulesURL = NSURL(string: "http://cfp.devoxx.be/api/conferences/(conference)/
schedules/")!
let task = session.dataTaskWithURL(schedulesURL) { (data: NSData?, response:NSURLResponse?,
error:NSError?) -> Void in
//Process data
}
task.resume()
}
}
Data singleton

guard let data = data else {
print(error)
return
}
do {
//Parse data
let schedulesDict = try NSJSONSerialization.JSONObjectWithData(data, options: .AllowFragments)
guard let schedulesArray = schedulesDict["links"] as? [NSDictionary] else {
print("No links array in parsed schedules")
return
}
callback(schedulesArray)
} catch let jsonError {
print(jsonError)
}
API response processing

class ExtensionDelegate: NSObject, WKExtensionDelegate {
func applicationDidBecomeActive() {
Devoxx.sharedInstance.loadSchedulesForConference("DV15") { (schedules:[NSDictionary]) ->
(Void) in
for schedule in schedules {
print(schedule)
}
}
}
}
Logging schedules to the console

Step 3: Done!

Step 4: Show Schedules

• The phone sends the schedules to the watch (Data API)
• The watch receives the schedules
• The watch displays the schedules on a list view

Data API
• Support one-way or two-way data communication
• Sending Binary Blog (Asset)
• Synchronise data between connected devices
• Synchronise data when connection is re-established
• Data caching

Phone
Data Layer
Watch
Data Layer
.create(“/path”)
PutDataMapRequest
.putInt(KEY, data)
DataMap
.asPutDataRequest()
PutDataRequest
.putDataItem()
Wearable.DataApi
Data Item
(Shared)
.getInt()
DataMap
.getDataItem()
DataEvent
.fromDataItem(DataItem)
DataMapItem
onDataChanged()
DataApi.DataListenerBluetooth/Wi-Fi
Data API

@Override 
protected void onResume() { 
super.onResume(); 
 
// Retrieve the list of schedules 
sendMessage(SCHEDULES_PATH, "get list of schedules");
} 
Display schedules

// send Schedules to the watch 
private void sendSchedules(List<Link> schedules) { 
final PutDataMapRequest putDataMapRequest = PutDataMapRequest.create(SCHEDULES_PATH); 
 
ArrayList<DataMap> schedulesDataMap = new ArrayList<>(); 
 
// process each schedule 
for (Link schedule : schedules) { 
 
final DataMap scheduleDataMap = new DataMap(); 
 
// process and push schedule's data

// We need to add a timestamp to force a onDataChanged event on the remote device. 
scheduleDataMap.putString("timestamp", new Date().toString());
scheduleDataMap.putString("day", Utils.getLastPartUrl(schedule.getHref())); 
scheduleDataMap.putString("title", schedule.getTitle()); 
 
schedulesDataMap.add(scheduleDataMap); 
} 
 
// store the list in the datamap to send it to the watch 
putDataMapRequest.getDataMap().putDataMapArrayList("/list", schedulesDataMap); 
 
// send the list 
if (mApiClient.isConnected()) { 
Wearable.DataApi.putDataItem(mApiClient, putDataMapRequest.asPutDataRequest()); 
} 
}
Send Schedules
1
2
3
5
6
4

public class ScheduleActivity extends Activity implements
GoogleApiClient.ConnectionCallbacks,
DataApi.DataListener {
@Override 
super.onStart(); 
 
mApiClient = new GoogleApiClient.Builder(this) 
.addApi(Wearable.API) 
.addConnectionCallbacks(this) 
.build(); 
 
mApiClient.connect(); 
} 
}
Add Listeners

@Override 
public void onConnected(Bundle bundle) { 
Wearable.DataApi.addListener(mApiClient, this); 
} 
}
Add Listeners

@Override 
public void onDataChanged(DataEventBuffer dataEventBuffer) { 
 
for (DataEvent event : dataEventBuffer) { 
 
// Check if we have received our schedules 
if (event.getType() == DataEvent.TYPE_CHANGED &&
event.getDataItem().getUri().getPath().startsWith(SCHEDULES_PATH)) { 
 
SchedulesListWrapper schedulesListWrapper = new SchedulesListWrapper(); 
 
final List<Schedule> schedulesList = schedulesListWrapper.getSchedulesList(event); 
 
runOnUiThread(new Runnable() { 
@Override 
// hide the progress bar 
findViewById(R.id.progressBar).setVisibility(View.GONE); 
 
listViewAdapter.refresh(schedulesList); 
} 
}); 
 
return; 
} 
} 
 
}
1
2
3
4
Add Listeners

Layout: Rect

@Override 
protected void onCreate(Bundle savedInstanceState) { 
… 
// Listview component 
listView = (WearableListView) findViewById(R.id.wearable_list); 
 
// Assign the adapter 
listViewAdapter = new ListViewAdapter(ScheduleActivity.this, new
ArrayList<Schedule>()); 
listView.setAdapter(listViewAdapter); 
…
} 
ListViewAdapter

WearableListView

// Inner class providing the WearableListview's adapter 
public class ListViewAdapter extends WearableListView.Adapter { 
…
// Create new views for list items 
// (invoked by the WearableListView's layout manager) 
@Override 
public WearableListView.ViewHolder onCreateViewHolder(ViewGroup parent, 
int viewType) { 
// Inflate our custom layout for list items 
return new ItemViewHolder(new SettingsItemView(mContext)); 
}
…
Animation

public final class SettingsItemView extends FrameLayout implements
WearableListView.OnCenterProximityListener { 
 
private TextView description; 
 
public SettingsItemView(Context context) { 
super(context); 
View.inflate(context, R.layout.schedule_row_activity, this); 
 
description = (TextView) findViewById(R.id.description); 
} 
 
@Override 
public void onCenterPosition(boolean b) { 
description.animate().scaleX(1f).scaleY(1f).alpha(1); 
} 
 
@Override 
public void onNonCenterPosition(boolean b) { 
description.animate().scaleX(0.8f).scaleY(0.8f).alpha(0.6f); 
} 
}
Animation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
…> 
 
<TextView 
android:id="@+id/title" 
…/> 
 
 
<RelativeLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent"> 
 
<android.support.wearable.view.WearableListView 
android:id="@+id/wearable_list" 
…> 
</android.support.wearable.view.WearableListView> 
 
<ProgressBar 
android:id="@+id/progressBar" 
… /> 
 
</RelativeLayout> 
</LinearLayout>
Layout: schedule_rect_activity
1
2
3
4

<merge xmlns:android="http://schemas.android.com/apk/res/android"> 
 
 
<TextView 
android:id="@+id/description" 
…/> 
 
</merge> 
 
Layout: schedule_row_activity

Run the app
• Build and deploy on Phone and Watch
• Data are retrieved and displayed from Phone

Step 4: Done!

• Model classes to store data (Model)
• Storyboard to layout screens (View)
• InterfaceControllers to conﬁgure and react (Controllers)

• Create Schedule class: initializer and overridden description
• Replace dictionary by class in callback
• Remove label and add table to layout
• Specify identiﬁer for row controller
• Create ScheduleRowController class
• Link ScheduleRowController in storyboard
• Label outlet in ScheduleRowController
• Table outlet in interface controller

• Call Devoxx loading method in willActivate and initialize table
• Remove Devoxx call from ExtensionDelegate
• RUN!

class Schedule: NSObject {
var title:String?
var href:NSURL?
init(fromDictionary dictionary:NSDictionary){
guard let title = dictionary["title"] as? String else {
print("Cannot find title")
return
}
guard let href = dictionary["href"] as? String else {
print("Cannot find href")
return
}
self.title = title
self.href = NSURL(string: href)
}
override var description:String {
return self.title!
}
}
Schedule model class

func loadSchedulesForConference(conference:String, callback: ([Schedule]) -> (Void)) {
do {
let schedulesDict=try NSJSONSerialization.JSONObjectWithData(data, options:.AllowFragments)
guard let schedulesArray = schedulesDict["links"] as? [NSDictionary] else {
print("No links array in parsed schedules")
return
}
var schedules = [Schedule]()
for scheduleDict in schedulesArray {
schedules.append(Schedule(fromDictionary: scheduleDict))
}
callback(schedules)
} catch let jsonError { print(jsonError) }
}
task.resume()
}
Replace dictionary by model

Add WKInterfaceTable to view

Identify row controller

import WatchKit
class ScheduleRowController: NSObject {
}
ScheduleRowController class

Label outlet in row controller

Table outlet in interface controller

override func willActivate() {
super.willActivate()
Devoxx.sharedInstance.loadSchedulesForConference("DV15") { (schedules:[Schedule]) -> (Void) in
self.table.setNumberOfRows(schedules.count, withRowType: "Schedule")
for (index, schedule) in schedules.enumerate() {
guard let scheduleRowController = self.table.rowControllerAtIndex(index) as?
ScheduleRowController else {
print("Error in table configuration")
return
}
scheduleRowController.titleLabel.setText(schedule.title)
}
}
}
Call Devoxx API and init table

Step 5: Select a Schedule

• Store Schedule’s data on Tag
• Add ClickListener on WearableListView
• Attach the listener
• Retrieve Schedule’s data from Tag
• Display the selected item

@Override 
public void onBindViewHolder(WearableListView.ViewHolder holder, 
int position) { 
 
// retrieve the text view 
ItemViewHolder itemHolder = (ItemViewHolder) holder; 
TextView view = itemHolder.textView; 
 
// retrieve, transform and display the schedule's day 
Schedule schedule = mDataset.get(position); 
String scheduleDay = schedule.getTitle().replace(",", "n"); 
view.setText(scheduleDay); 
 
// replace list item's metadata 
holder.itemView.setTag(schedule); 
} 
Store Schedule’s data
1
2

WearableListView.ClickListener,
@Override 
public void onClick(WearableListView.ViewHolder
viewHolder) { 
 
} 
}
Add ClickListener

@Override 
protected void onCreate(Bundle savedInstanceState) { 
…
// Assign the adapter 
listViewAdapter = new ListViewAdapter(ScheduleActivity.this, new
ArrayList<Schedule>()); 
listView.setAdapter(listViewAdapter); 
 
// Set the click listener 
listView.setClickListener(ScheduleActivity.this);
}
Attach the ClickListener

@Override 
public void onClick(WearableListView.ViewHolder viewHolder) { 
Schedule schedule = (Schedule) viewHolder.itemView.getTag(); 
if (schedule == null) { 
return; 
} 
 
Toast.makeText(ScheduleActivity.this, "You tap on: " +
schedule.getDay(), Toast.LENGTH_SHORT).show(); 
}
Retrieve and display schedule
1
2

Run the app
• Build and deploy on the Watch
• Tap on a schedule

Step 5: Done!

• Add title to interface controller
• New interface controller in storyboard
• Push segue from ﬁrst to second interface controller
• Create ScheduleInterfaceController class
• Link it to storyboard
• Add schedule member variable
• Override contextForSegueWithIdentiﬁer
• Catch context in ScheduleInterfaceController
• Set title in willActivate

Add ScheduleInterfaceController

Give identifier to push segue

class InterfaceController: WKInterfaceController {
@IBOutlet var table: WKInterfaceTable!
var schedules:[Schedule]?
[…]
override func contextForSegueWithIdentifier(segueIdentifier: String,
inTable table: WKInterfaceTable,
rowIndex: Int) -> AnyObject? {
return self.schedules![rowIndex]
}
}
contextForSegue

class ScheduleInterfaceController: WKInterfaceController {
var schedule:Schedule?
override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)
if let schedule = context as? Schedule {
self.schedule = schedule
}
}
if let schedule = self.schedule, title = schedule.title {
self.setTitle(title.componentsSeparatedByString(",")[0])
}
}
}
Catch context

Step 6: Get Slots

Retrieve Slots
Get back on the Network.
Seriously???

Phone
Data Layer
Watch
Data Layer
.create(“/path”)
PutDataMapRequest
.putInt(KEY, data)
DataMap
.asPutDataRequest()
PutDataRequest
.putDataItem()
Wearable.DataApi
Data Item
(Shared)
.getInt()
DataMap
.getDataItem()
DataEvent
.fromDataItem(DataItem)
DataMapItem
onDataChanged()
DataApi.DataListener
Data API

Wear
Data Item
(Cache)
.getInt()
DataMap
.getDataIetms()
DataApi
wear://path_to_data
1
2
Fetch from local cache
MessageApi
sendMessage()
3
4

// send Schedules to the watch 
private void sendSchedules(List<Link> schedules) { 
final PutDataMapRequest putDataMapRequest = PutDataMapRequest.create(SCHEDULES_PATH); 
 
ArrayList<DataMap> schedulesDataMap = new ArrayList<>(); 
 
// process each schedule 
for (Link schedule : schedules) { 
 
final DataMap scheduleDataMap = new DataMap(); 
 
// process and push schedule's data 
scheduleDataMap.putString("day", Utils.getLastPartUrl(schedule.getHref())); 
scheduleDataMap.putString("title", schedule.getTitle()); 
 
schedulesDataMap.add(scheduleDataMap); 
} 
 
// store the list in the datamap to send it to the watch 
putDataMapRequest.getDataMap().putDataMapArrayList("/list", schedulesDataMap); 
 
// send the list 
if (mApiClient.isConnected()) { 
Wearable.DataApi.putDataItem(mApiClient, putDataMapRequest.asPutDataRequest()); 
} 
}
Changes on Phone: No timestamp
1

@Override 
protected void onResume() { 
super.onResume(); 
 
// Retrieve and display the list of schedules 
getSchedules(SCHEDULES_PATH); 
} 
Display data items

private void getSchedules(final String pathToContent) { 
Uri uri = new Uri.Builder() 
.scheme(PutDataRequest.WEAR_URI_SCHEME) 
.path(pathToContent) 
.build(); 
 
Wearable.DataApi.getDataItems(mApiClient, uri) 
.setResultCallback( 
new ResultCallback<DataItemBuffer>() { 
@Override 
public void onResult(DataItemBuffer dataItems) { 
 
if (dataItems.getCount() == 0) { 
// refresh the list of schedules from Mobile 
sendMessage(SCHEDULES_PATH, "get list of schedules"); 
return; 
} 
… 
// retrieve and display the schedule from the cache 
SchedulesListWrapper schedulesListWrapper = new SchedulesListWrapper(); 
 
final List<Schedule> schedulesList = schedulesListWrapper.getSchedulesList(dataMap); 
 
runOnUiThread(new Runnable() { 
@Override 
// hide the progress bar 
findViewById(R.id.progressBar).setVisibility(View.GONE); 
listViewAdapter.refresh(schedulesList); 
} 
}); 
} 
} 
); 
}
Retrieve data: mobile or cache?
1
2
3
4

Step 6: Done!

Step 6: Get and Cache Schedules
• Create activity indicator animation
• Link with CoreData framework
• Create object model
• Create DevoxxCache class
• Setup Core Data stack in DevoxxCache
• Model Schedule and Conference in object model
• Delete Schedule Model class
• Generate NSManagedObject subclasses

Step 6: Get and Cache Schedules
• Add empty getSchedules() method to DevoxxCache
• Add empty saveSchedules() method to DevoxxCache
• Modify loadSchedules in Devoxx class

Create activity indicator animation
https://github.com/mikeswanson/JBWatchActivityIndicator
• Add image to interface controller
• Scale mode: center
• Height and width relative to
container
• Hidden
• activityIndicator outlet in interface
controller

class InterfaceController: WKInterfaceController {
@IBOutlet var activityIndicator: WKInterfaceImage!
var schedules:[Schedule]?
self.activityIndicator.setImageNamed("Activity")
}
self.activityIndicator.setHidden(false)
self.activityIndicator.startAnimating()
Devoxx.sharedInstance.loadSchedulesForConference("DV15") { (schedules:[Schedule]) -> (Void) in
self.schedules = schedules
[…]
self.activityIndicator.setHidden(true)
}
}
}
Activity indicator

Link with CoreData framework

Create object model

import CoreData
class DevoxxCache: NSObject {
lazy var applicationDocumentsDirectory: NSURL = {
let urls = NSFileManager.defaultManager().URLsForDirectory(.DocumentDirectory,
inDomains: .UserDomainMask)
return urls[urls.count - 1]
}()
lazy var managedObjectModel: NSManagedObjectModel = {
let modelURL = NSBundle.mainBundle().URLForResource("Smartvoxx", withExtension: "momd")!
return NSManagedObjectModel(contentsOfURL: modelURL)!
}()
}
Set up Core Data stack

import CoreData
[…]
lazy var persistentStoreCoordinator: NSPersistentStoreCoordinator = {
let coordinator = NSPersistentStoreCoordinator(managedObjectModel: self.managedObjectModel)
let url = self.applicationDocumentsDirectory.URLByAppendingPathComponent("Smartvoxx.sqlite")
do {
print(url)
try coordinator.addPersistentStoreWithType(NSSQLiteStoreType, configuration: nil, URL:
url, options: nil)
} catch {
print(error)
}
return coordinator
}()
}

import CoreData
[…]
lazy var mainObjectContext: NSManagedObjectContext = {
var managedObjectContext = NSManagedObjectContext(concurrencyType: .MainQueueConcurrencyType)
managedObjectContext.persistentStoreCoordinator = self.persistentStoreCoordinator
return managedObjectContext
}()
lazy var privateObjectContext: NSManagedObjectContext = {
var privateContext = NSManagedObjectContext(concurrencyType: .PrivateQueueConcurrencyType)
privateContext.parentContext = self.mainObjectContext
return privateContext
}()
}

import CoreData
[…]
override init() {}
func saveContext(context: NSManagedObjectContext) {
do {
try context.save()
if let parentContext = context.parentContext {
try parentContext.save()
}
} catch {
print(error)
abort()
}
}}

Model Conference and Schedule

Generate NSManagedObject subs

func loadSchedulesForConference(conference:String, callback: ([Schedule]) -> (Void)) {
let schedules = cache.getSchedules()
if schedules.count > 0 {
dispatch_async(dispatch_get_main_queue(), { () -> Void in
callback(schedules)
})
}
let schedulesURL = NSURL(string: "http://cfp.devoxx.be/api/conferences/(conference)/schedules/")!
guard let data = data else {
print(error)
return
}
self.cache.saveSchedulesFromData(data)
dispatch_async(dispatch_get_main_queue(), { () -> Void in
callback(self.cache.getSchedules())
})
}
task.resume()
}
In Devoxx…

func getSchedules() -> [Schedule] {
return self.getSchedules(fromContext: self.mainObjectContext)
}
private func getSchedules(fromContext context: NSManagedObjectContext) -> [Schedule] {
context.performBlockAndWait { () -> Void in
let request = NSFetchRequest(entityName: "Conference")
request.predicate = NSPredicate(format: "eventCode=%@", "DV15")
do {
let results = try context.executeFetchRequest(request)
if results.count > 0 {
guard let devoxx15 = results[0] as? Conference, scheduleSet = devoxx15.schedules, scheduleArray =
scheduleSet.array as? [Schedule] else {
schedules = [Schedule]()
return
}
schedules = scheduleArray
}
} catch let error as NSError {
print(error)
}
}
return schedules
}
Back in DevoxxCache…

private func saveSchedulesFromData(data: NSData, inContext context: NSManagedObjectContext) {
if data.length > 0 {
do {
let schedulesDict = try NSJSONSerialization.JSONObjectWithData(data, options: .AllowFragments)
if let schedulesDict = schedulesDict as? NSDictionary, schedulesArray = schedulesDict["links"] as? NSArray {
guard let devoxx15 = self.getOrCreateDevoxx15(inContext: context) else {
print("Could not retrieve Devoxx15 conference")
return
}
for scheduleDict in schedulesArray {
if let scheduleDict = scheduleDict as? NSDictionary {
guard let schedule = self.getOrCreateScheduleForHref(scheduleDict["href"] as! String, inContext: context) else {
print("Could not retrieve or create schedule")
return
}
schedule.title = scheduleDict["title"] as? String
schedule.href = scheduleDict["href"] as? String
schedule.conference = devoxx15
self.saveContext(context)
schedules.append(schedule)
}
}
devoxx15.schedules = NSOrderedSet(array: schedules)
}
} catch let jsonError as NSError {
print(jsonError)
}
}
}
}

private func getOrCreateDevoxx15(inContext context: NSManagedObjectContext) -> Conference? {
let request = NSFetchRequest(entityName: "Conference")
request.predicate = NSPredicate(format: "eventCode=%@", "DV15")
var devoxx15: Conference?
do {
devoxx15 = results[0] as? Conference
} else {
devoxx15 = NSEntityDescription.insertNewObjectForEntityForName("Conference",
inManagedObjectContext: context) as? Conference
devoxx15!.eventCode = "DV15"
devoxx15!.label = "Devoxx 2015"
devoxx15!.localisation = "Antwerp, Belgium"
}
print(error)
}
}
return devoxx15
}

private func getOrCreateScheduleForHref(href: String, inContext context: NSManagedObjectContext) ->
Schedule? {
var schedule: Schedule?
let request = NSFetchRequest(entityName: "Schedule")
request.predicate = NSPredicate(format: "href=%@", href)
do {
schedule = results[0] as? Schedule
} else {
schedule = NSEntityDescription.insertNewObjectForEntityForName("Schedule",
inManagedObjectContext: context) as? Schedule
schedule!.href = href
}
print(error)
}
}
return schedule
}

Step 7: Get Talk

Step 7: Get Talk
• Create the Activity
• Layouts: GridView, Card, Custom
• GridViewPagerAdapter
• Create the Fragments
• EventBus
• Retrieve Talks and Speakers from Data Api
• Requests sent through the Message Api
• Bonus: Follow on Twitter (Conﬁrmation Activity)

GridViewPager
Row 1:
• Column 1: Talk information
• Column 2: Summary
Row 2:
• Column 1: Speaker 1
• Column 2: Speaker 2
• …
• Column n: Speaker n

Fragment Fragment
Fragment Fragment
• TalkFragment
• TalkSummaryFragment
• TalkSpeakerFragment
FragmentGridPagerAdapter
TalkActivity

• Deﬁne the layout
• Create the fragments
• Create the Adapter
• Link the Adapter
Create the GridViewPager

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@color/black"> 
 
<android.support.wearable.view.GridViewPager xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/pager" 
android:keepScreenOn="false" /> 
 
<android.support.wearable.view.DotsPageIndicator 
android:id="@+id/page_indicator" 
android:layout_gravity="center_horizontal|top" 
app:dotFadeOutDelay="10000"> 
</android.support.wearable.view.DotsPageIndicator> 
 
</FrameLayout> 
Layout res/layout/talk_activity.xml

Talk detail: Custom layout

<android.support.wearable.view.WatchViewStub 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/watch_talk_stub" 
app:rectLayout="@layout/talk_rect_fragment" 
app:roundLayout="@layout/talk_round_fragment" 
tools:context=".TalkActivity" 
tools:deviceIds="wear"> 
 
</android.support.wearable.view.WatchViewStub>
Layout res/layout/talk_fragment.xml

<RelativeLayout 
android:layout_height="fill_parent" 
android:paddingTop="15dp"> 
 
<TextView 

….
Layout res/layout/talk_rect_fragment.xml

<android.support.wearable.view.BoxInsetLayout
android:padding="15dp"> 
 
<RelativeLayout 
android:layout_height="match_parent"> 
 
<TextView 
Layout res/layout/talk_round_fragment.xml

Summary: Card

<android.support.wearable.view.CardScrollView
android:id="@+id/card_scroll_view" 
android:layout_height="match_parent"> 
 
<android.support.wearable.view.CardFrame 
android:id="@+id/card_frame" 
…> 
 
<LinearLayout 
android:orientation="vertical"> 
 
<TextView 
Summary: Layout

Summary: Expand content

public class TalkSummaryFragment extends Fragment {
…
description.setOnClickListener(new View.OnClickListener() { 
@Override 
if (mTalkSummary == null) { 
return; 
} 
 
if (mEllipsize) { 
description.setText(mTalkSummary); 
} else { 
description.setText(StringUtils.abbreviate(mTalkSummary, ELLIPSIS_SIZE)); 
} 
mEllipsize = !mEllipsize;
 
// Force the CardScrollView to reset to its initial position 
mainView.findViewById(R.id.card_scroll_view).setScrollX(0); 
mainView.findViewById(R.id.card_scroll_view).setScrollY(0); 
 
} 
}); 
Summary: Expand content

TalkActivity
Events
Fragments
Events

EventBus (BusWear)

dependencies { 
compile fileTree(dir: 'libs', include: ['*.jar']) 
compile 'com.google.android.support:wearable:1.3.0' 
compile 'com.google.android.gms:play-services-wearable:8.1.0' 
 
// Event Bus: BusWear 
compile 'pl.tajchert:buswear:0.9.5' 
 
… 
}
EventBus
build.grade

EventBus.getDefault().postLocal(new TalkEvent(mTalk));
EventBus - Sending events

public void onEvent(AddFavoriteEvent addFavoritesEvent) { 
…
}
EventBus - Receive events
Required to register/unregister to the bus

public class TalkActivity extends Activity … {
@Override 
… 
EventBus.getDefault().register(this); 
} 
 
@Override 
protected void onStop() { 
EventBus.getDefault().unregister(this); 
…
}
EventBus - (Un)Register

Twitter: Confirmation animation

package="net.noratek.smartvoxxwear">
…
<activity android:name="android.support.wearable.activity.ConfirmationActivity" />
…
Confirmation animation
Update the manifest of the watch

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
Bundle savedInstanceState) {
mainView.findViewById(R.id.twitterIcon).setOnClickListener(new View.OnClickListener()
{ 
@Override 
startConfirmationActivity(ConfirmationActivity.OPEN_ON_PHONE_ANIMATION,
getString(R.string.confirmation_open_on_phone));
 
EventBus.getDefault().postLocal(new ConfirmationEvent(TWITTER_PATH, (String)
mainView.findViewById(R.id.twitterIcon).getTag())); 
} 
});
Confirmation animation (Listener)
1
2

private void startConfirmationActivity(int animationType, String message) {
 
Intent confirmationActivity = new Intent(getActivity(), ConfirmationActivity.class) 
.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_NO_ANIMATION) 
.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, animationType) 
.putExtra(ConfirmationActivity.EXTRA_MESSAGE, message); 
 
getActivity().startActivity(confirmationActivity); 
}
Animation type

…
private void followOnTwitter(String inputData) { 
String twitterName = inputData == null ? "" : inputData.trim().toLowerCase(); 
twitterName = twitterName.replaceFirst("@", ""); 
if (twitterName.isEmpty()) { 
return; 
} 
 
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://twitter.com/" + twitterName)); 
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); 
this.startActivity(intent); 
}
}
Open Twitter on Phone

Step 7: Square GridViewPager
CardCustom
Custom Custom
WearableListView
Step 7: Done!

Step 7: Round
CardCustom
Custom Custom
WearableListView
GridViewPager

Step 7: Get, Cache and Show Talk
• Time travel

Step 7: Done!

Step 8: Favorites

Step 8: Set Favorites
• Retrieve, add, remove favorites on the calendar
• Add CalendarHelper on the phone
• Favorite messages sent over DataApi (retrieved, added, removed)
• Add reminders using AlarmManager
• Manage a manual delete from the Calendar with a synchronisation of
the SlotsActivity or TalkActivity
• Send a message when required (retrieve) or when the favorite has
changed (add or remove)
• Use the EventBus to synchronise the components (Activity, Fragments)
• ConﬁrmationActivity on favorite’s action

Step 8: Favorites
Phone Watch
1
2
3
4
eventId
remove
read
add
Calendar
remove
read
add

Step 8: Reminders
Phone
1
Calendar
add
AlarmManager
2
10 minutes
before

Step 8: Alarm Service
Phone
1
Calendar
add
AlarmManager
2
10 minutes
before
AlarmService
talkId, title,
eventId,
schedule, …
3

Step 8: Wake-up
Phone
AlarmManager
AlarmService
talkId, title,
eventId,
schedule, …1
AlarmReceiver
talkId, title,
eventId,
schedule, …
.broadcast()
2

package="net.noratek.smartvoxxwear" > 
 
 
<uses-permission android:name="android.permission.READ_CALENDAR" /> 
<uses-permission android:name="android.permission.WRITE_CALENDAR" /> 
Calendar: Add permissions
Update the manifest of the phone

<application>
…
<service android:name=".alarm.AlarmService"/> 
 
<receiver android:name=".alarm.AlarmReceiver"> 
<intent-filter> 
<action
android:name="net.noratek.smartvoxxwear.AlarmService.BROADCAST" /> 
</intent-filter> 
</receiver>
</application
Alarm: Service, Receiver

Add: Tap on favorite icon

Mobile: event on Calendar
• Title
• Room
• Summary
• Schedule

Watch: Confirmation received

Remove: Tap on favorite icon

Event removed from Calendar

Stop 8: Done!

Step 8: Managing Favorites
• Add a force touch menu to SlotController
• Handle menu actions
• Add scheduleNotiﬁcations() method to talk to the phone
• Import WatchConnectivity framework
• Start WatchConnectivity session
• Receive messages in AppDelegate on iPhone

class SlotController: WKInterfaceController {
self.updateMenu()
}
func updateMenu() {
self.clearAllMenuItems()
if let talkSlot = self.slot as? TalkSlot {
if let favorite = talkSlot.favorite?.boolValue where favorite {
self.addMenuItemWithImageNamed("FavoriteOffMenu", title: NSLocalizedString("Remove
from Favorites", comment: ""), action: "favoriteMenuSelected")
self.favoriteImage.setImageNamed("FavoriteOn")
} else {
self.addMenuItemWithImageNamed("FavoriteOnMenu", title: NSLocalizedString("Add to
Favorites", comment: ""), action: "favoriteMenuSelected")
self.favoriteImage.setImageNamed("FavoriteOff")
}
self.addMenuItemWithItemIcon(WKMenuItemIcon.Decline, title: NSLocalizedString("Cancel",
comment: ""), action: "cancelMenuSelected")
}
}
}
Add force touch menu

[…]
@IBAction func favoriteMenuSelected() {
DataController.sharedInstance.swapFavoriteStatusForTalkSlot(talkSlot, callback:
{ (talkSlot:TalkSlot) -> Void in
self.slot = talkSlot
self.updateMenu()
})
}
}
@IBAction func cancelMenuSelected() {}
}
Handle menu actions

[…]
@IBAction func favoriteMenuSelected() {
DataController.sharedInstance.swapFavoriteStatusForTalkSlot(talkSlot, callback:
{ (talkSlot:TalkSlot) -> Void in
self.slot = talkSlot
self.updateMenu()
self.scheduleNotification()
})
}
}
@IBAction func cancelMenuSelected() {}
}
Handle menu actions

import WatchConnectivity
class SlotController: WKInterfaceController, WCSessionDelegate {
var session:WCSession?
[…]
self.updateMenu()
startSession()
}
private func startSession() {
if WCSession.isSupported() {
session = WCSession.defaultSession()
session?.delegate = self
session?.activateSession()
}
}
}
Start WCSession

private func scheduleNotification() {
let talkSlotMessage = [
"title":talkSlot.title!,
"room":talkSlot.roomName!,
"talkId":talkSlot.talkId!,
"track":talkSlot.track!.name!,
"favorite":talkSlot.favorite!,
"fromTimeMillis":talkSlot.fromTimeMillis!,
"fromTime":talkSlot.fromTime!,
"toTime":talkSlot.toTime!
]
if let session = self.session where session.reachable {
session.sendMessage(["talkSlot" : talkSlotMessage as NSDictionary], replyHandler: nil,
errorHandler: { (error:NSError) -> Void in print(error) })
} else {
session?.transferUserInfo(["talkSlot" : talkSlotMessage as NSDictionary])
}
}
}
}
Schedule notification

import WatchConnectivity
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, WCSessionDelegate {
var session: WCSession?
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject:
AnyObject]?) -> Bool {
session = WCSession.defaultSession()
session?.delegate = self
session?.activateSession()
}
return true
}
func session(session: WCSession, didReceiveMessage message: [String : AnyObject], replyHandler: ([String :
AnyObject]) -> Void) {
self.updateLocalNotificationWithMessage(message)
}
func session(session: WCSession, didReceiveUserInfo userInfo: [String : AnyObject]) {
self.updateLocalNotificationWithMessage(userInfo)
}
}
Back in iPhone's AppDelegate…

Step 8: Done!

Step 9: Custom notifications

Phone: Prepare and Send
Phone
AlarmManager
AlarmReceiver
Custom notification
Action EventService
3
4
AlarmService
talkId, title,
eventId,
schedule, …1
.broadcast()
2

// Create an intent for the reply action 
Intent actionIntent = new Intent(context, EventService.class); 
actionIntent.putExtras(bundle); 
PendingIntent actionPendingIntent = 
PendingIntent.getService(context, 0, actionIntent, 
PendingIntent.FLAG_UPDATE_CURRENT); 
 
// Create the action 
NotificationCompat.Action action = 
new NotificationCompat.Action.Builder(R.drawable.ic_calendar, 
context.getText(R.string.remove_event), actionPendingIntent) 
.build();
Notification: Action to Service

// Add a notification with the same action on mobile and watch 
NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context) 
.setSmallIcon(R.drawable.ic_logo) 
.setContentTitle(talk.getTitle()) 
.setContentText(information) 
.setAutoCancel(true) 
.setVibrate(new long[]{1000, 1000, 1000, 1000, 1000, 1000}) 
.setDefaults(Notification.DEFAULT_ALL) 
.addAction(action); 
NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender(mBuilder.build()); 
 
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_black); 
wearableExtender.setBackground(bitmap); 
 
wearableExtender.extend(mBuilder); 
 
NotificationManagerCompat manager = NotificationManagerCompat.from(context); 
manager.notify(notificationId, mBuilder.build());
Notification: Builder

Receiving notification

// Add a notification with an action only visible on the watch 
NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context) 
.setSmallIcon(R.drawable.ic_logo) 
.setContentTitle(talk.getTitle()) 
.setContentText(information) 
.setAutoCancel(true) 
.setVibrate(new long[]{1000, 1000, 1000, 1000, 1000, 1000}) 
.setDefaults(Notification.DEFAULT_ALL) 
.extend(new NotificationCompat.WearableExtender().addAction(action));
NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender(mBuilder.build()); 
 
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_black); 
wearableExtender.setBackground(bitmap); 
 
wearableExtender.extend(mBuilder); 
 
NotificationManagerCompat manager = NotificationManagerCompat.from(context); 
manager.notify(notificationId, mBuilder.build());
Wearable-only action

Wearable-only
Wearable-only action

Watch: Action Remove
Phone-> EventService

Phone: EventService
Phone
Calendar
EventService
remove Event
2
1
3
Event removed

<application>
…
<service android:name=".service.EventService"/>
</application
Alarm: EventService

public class EventService extends Service {
@Override 
public int onStartCommand(Intent intent, int flags, int startId) {
…
// remove the event from the calendar 
CalendarHelper calendarHelper = new CalendarHelper(this); 
calendarHelper.removeEvent(eventId);
…
sendFavorite(talkId, 0L);
..
}
Phone: EventService

Step 9: Done!

Step 9: Notifications
• Schedule notiﬁcations on the iPhone
• Custom notiﬁcation controller

private func updateLocalNotificationWithMessage(message:[String:AnyObject]){
if let talkSlot = message["talkSlot"] as? NSDictionary {
let id = talkSlot["talkId"] as? String
for notification in UIApplication.sharedApplication().scheduledLocalNotifications! {
if let userInfo = notification.userInfo {
if let talkId = userInfo["id"] as? String {
if talkId == id {
UIApplication.sharedApplication().cancelLocalNotification(notification)
}
}
}
}
let favorite = talkSlot["favorite"] as? NSNumber
if let fav = favorite?.boolValue where fav {
let title = talkSlot["title"] as? String
let room = talkSlot["room"] as? String
let fromTimeMillis = talkSlot["fromTimeMillis"] as? NSNumber
let fromTime = talkSlot["fromTime"] as? String
let toTime = talkSlot["toTime"] as? String
let date = NSDate(timeIntervalSince1970: fromTimeMillis!.doubleValue / 1000)
let notification = UILocalNotification()
notification.fireDate = date.dateByAddingTimeInterval(-10*60)
notification.timeZone = NSTimeZone.localTimeZone()
notification.userInfo = talkSlot as [NSObject : AnyObject]
notification.alertTitle = title
notification.alertBody = String(format: NSLocalizedString("From %@ to %@ in %@", comment: ""), arguments: [fromTime!, toTime!, room!])
UIApplication.sharedApplication().scheduleLocalNotification(notification)
}
}
}
Actually schedule notifications

Custom notification controller

class NotificationController: WKUserNotificationInterfaceController {
@IBOutlet var titleLabel: WKInterfaceLabel!
@IBOutlet var trackLabel: WKInterfaceLabel!
@IBOutlet var roomLabel: WKInterfaceLabel!
@IBOutlet var timesLabel: WKInterfaceLabel!
[…]
override func didReceiveLocalNotification(localNotification: UILocalNotification, withCompletion
completionHandler: ((WKUserNotificationInterfaceType) -> Void)) {
if let userInfo = localNotification.userInfo {
self.titleLabel.setText(userInfo["title"] as? String)
self.trackLabel.setText(userInfo["track"] as? String)
self.roomLabel.setText(userInfo["room"] as? String)
let fromTime = userInfo["fromTime"] as? String
let toTime = userInfo["toTime"] as? String
self.timesLabel.setText("(fromTime!) - (toTime!)")
}
completionHandler(.Custom)
}
Custom notification controller

Step 10:Glances and Complications
• Glance controller
• Complication controller

Glance controller

class GlanceController: WKInterfaceController {
@IBOutlet var headerLabel: WKInterfaceLabel!
@IBOutlet var subtitleLabel: WKInterfaceLabel!
@IBOutlet var titleLabel: WKInterfaceLabel!
@IBOutlet var roomLabel: WKInterfaceLabel!
@IBOutlet var dateLabel: WKInterfaceLabel!
var nextFavoriteSlots:[TalkSlot]?
self.headerLabel.setText(NSLocalizedString("Next", comment: ""))
self.subtitleLabel.setText(NSLocalizedString("in Devoxx 2015", comment: ""))
}
}
Glance controller code

self.nextFavoriteSlots = DataController.sharedInstance.getFavoriteTalksAfterDate(NSDate())
if let nextFavoriteSlots = self.nextFavoriteSlots where nextFavoriteSlots.count > 0 {
let now = NSDate()
var nextFavoriteSlot:TalkSlot?
for talkSlot in nextFavoriteSlots {
if talkSlot.fromTimeMillis?.doubleValue > now.timeIntervalSince1970 * 1000 {
nextFavoriteSlot = talkSlot
break
}
}
if let nextFavoriteSlot = nextFavoriteSlot {
self.titleLabel.setText(nextFavoriteSlot.title)
self.roomLabel.setHidden(false)
self.dateLabel.setHidden(false)
self.roomLabel.setText(nextFavoriteSlot.roomName)
let startDate = NSDate(timeIntervalSince1970: nextFavoriteSlot.fromTimeMillis!.doubleValue / 1000)
let formatter = NSDateFormatter()
formatter.dateStyle = NSDateFormatterStyle.LongStyle
formatter.timeStyle = NSDateFormatterStyle.NoStyle
let day = formatter.stringFromDate(startDate)
self.dateLabel.setText("(day), (nextFavoriteSlot.fromTime!) - (nextFavoriteSlot.toTime!)")
} else {
self.titleLabel.setText(NSLocalizedString("No more upcoming favorite talk.", comment: ""))
self.roomLabel.setHidden(true)
self.dateLabel.setHidden(true)
}
} else {
self.titleLabel.setText(NSLocalizedString("No more upcoming favorite talk.", comment: ""))
self.roomLabel.setHidden(true)
self.dateLabel.setHidden(true)
}
}
Update glance data

import ClockKit
class ComplicationController: NSObject, CLKComplicationDataSource {
func getSupportedTimeTravelDirectionsForComplication(complication: CLKComplication, withHandler handler:
(CLKComplicationTimeTravelDirections) -> Void) {
handler([.None])
}
func getCurrentTimelineEntryForComplication(complication: CLKComplication, withHandler handler:
((CLKComplicationTimelineEntry?) -> Void)) {
handler(self.timelineEntryForNextFavoriteTalk())
}
private func timelineEntryForNextFavoriteTalk() -> CLKComplicationTimelineEntry? {
let template = CLKComplicationTemplateModularLargeStandardBody()
let now = NSDate()
if let firstTalk = DataController.sharedInstance.getFirstTalk() {
if now.timeIntervalSince1970 * 1000 < firstTalk.fromTimeMillis!.doubleValue {
template.headerTextProvider = CLKRelativeDateTextProvider(date: NSDate(timeIntervalSince1970:
firstTalk.fromTimeMillis!.doubleValue / 1000), style: .Natural, units: [.Day, .Hour])
template.body1TextProvider = CLKSimpleTextProvider(text: NSLocalizedString("until Devoxx 2015", comment:""))
}
}
return CLKComplicationTimelineEntry(date: now.dateByAddingTimeInterval(-60), complicationTemplate: template)
}
}
Complication controller

Step 10: Done!

Step 11: Release the App

Prepare the build
• Include all permissions of wearable into Phone
• Same package name and version number

Generate signed APK
Mobile embeds Wear

Mobile APK embeds Wearable
Phone App Module
Code
Resources
Wearable App
Watch App Module
Code
Resources

Publishing: Select Android Wear

Distribution
Companion App
Wearable App
Bluetooth
Companion
App
Play Services
Android Wear
Wearable App
Smartvoxx

Step 11: Done!

Step 11: Release the App
• Package the Apple Watch app with the iPhone app
• Release the iPhone app like any other
• Wait for review…
• Wait again…
• Wait some more…

A word about Pebble
• Language: either C or Javascript
• Development environment: either text editor or CloudPebble
• Platform support: both iOS and Android (+SDKs)
• Devices: Pebble Classic, Pebble Time, Pebble Time Round
• Distribution: via the Pebble app

static bool load_shutter_group_list() {
if(accessToken && sizeof(accessToken) > 0) {
DictionaryIterator *iter;
app_message_outbox_begin(&iter);
if (iter == NULL) {
APP_LOG(APP_LOG_LEVEL_DEBUG, "null iter");
return false;
}
Tuplet message_type_tuple = TupletInteger(MESSAGE_TYPE, LOAD_SHUTTER_GROUP_LIST);
dict_write_tuplet(iter, &message_type_tuple);
Tuplet access_token_tuple = TupletCString(ACCESS_TOKEN, accessToken);
dict_write_tuplet(iter, &access_token_tuple);
Tuplet refresh_token_tuple = TupletCString(REFRESH_TOKEN, refreshToken);
dict_write_tuplet(iter, &refresh_token_tuple);
Tuplet site_id_tuple = TupletInteger(SITE_ID, selected_site_id);
dict_write_tuplet(iter, &site_id_tuple);
dict_write_end(iter);
app_message_outbox_send();
return true;
} else {
return false;
}
}
Pebble code

Summary
• Huge inequalities in terms of development platform ease-of-
use
• Apple obviously took time to add abstraction layers that make
development more expressive
• Short learning curve on Android Wear compared to Apple
Watch
• Tooling support not up-to-date on Android
• Documentation is not really ﬁnished for both platforms
• Not all apps make sense on smartwatches

Apps that work on smartwatches
• countdowns and timers
• status checks: what’s the temperature? what’s my next
session? what’s the score of the game?
• remote controls: switch off the light, change the music, open
my hotel room, pay for my shopping
• notiﬁcation responders: invitation to a meeting -> what’s the
meeting about, somebody sent me a message -> what does it
say?
• data trackers: where am I? how many calories am I burning?
what’s my speed?)

Apps that don’t make sense
• games of any kind
• any long reading (news, books, etc.)
• ecommerce
• video or image viewing
• anything that requires text input

One more thing …

Smartvoxx on Github
Available in Black … … and White
Coming soon…

Apps on your Wrist

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (12)

Similaire à Apps on your Wrist

Similaire à Apps on your Wrist (20)

Plus de Sebastien Arbogast

Plus de Sebastien Arbogast (15)

Dernier

Dernier (20)

Apps on your Wrist