Top Banner

of 93

Smartwatch Landscape

Jan 21, 2018

ReportDownload

Technology

wajug

  1. 1. @sarbogast @eloudsa#Devoxx #smartvoxx Smartwatch Landscape Sbastien Arbogast Said Eloudrhiri
  2. 2. #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 Nights Watch? Survey
  3. 3. #Devoxx #smartvoxx @sarbogast @eloudsa Sbastien 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
  4. 4. #Devoxx #smartvoxx @sarbogast @eloudsa 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
  5. 5. #Devoxx #smartvoxx @sarbogast @eloudsa 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?
  6. 6. #Devoxx #smartvoxx @sarbogast @eloudsa Why develop for smartwatches?
  7. 7. #Devoxx #smartvoxx @sarbogast @eloudsa Glanceable
  8. 8. #Devoxx #smartvoxx @sarbogast @eloudsa Sensors
  9. 9. #Devoxx #smartvoxx @sarbogast @eloudsa Internet of Things
  10. 10. #Devoxx #smartvoxx @sarbogast @eloudsa Notification-driven
  11. 11. #Devoxx #smartvoxx @sarbogast @eloudsa Small screen
  12. 12. #Devoxx #smartvoxx @sarbogast @eloudsa Interactions
  13. 13. #Devoxx #smartvoxx @sarbogast @eloudsa Personal use
  14. 14. #Devoxx #smartvoxx @sarbogast @eloudsa Landscape Apple Watch Android Wear Pebble Tizen
  15. 15. #Devoxx #smartvoxx @sarbogast @eloudsa IDE
  16. 16. #Devoxx #smartvoxx @sarbogast @eloudsa XCode
  17. 17. #Devoxx #smartvoxx @sarbogast @eloudsa Android Studio
  18. 18. #Devoxx #smartvoxx @sarbogast @eloudsa Debugging with Emulator USB Bridge adb -d forward tcp:5601 tcp:5601
  19. 19. #Devoxx #smartvoxx @sarbogast @eloudsa 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
  20. 20. #Devoxx #smartvoxx @sarbogast @eloudsa CloudPebble
  21. 21. #Devoxx #smartvoxx @sarbogast @eloudsa Development cycle
  22. 22. #Devoxx #smartvoxx @sarbogast @eloudsa Apple Watch Select the Watch App scheme Select your emulator conguration Run You can debug both emulators at the same time
  23. 23. #Devoxx #smartvoxx @sarbogast @eloudsa Android Install Android Wear on your Phone Create Wear emulator Run Wear emulator Open ports to let emulator communicate with physical phone Pair the Phone and the Wear Emulator Deploy application on Wear and/or Mobile
  24. 24. #Devoxx #smartvoxx @sarbogast @eloudsa Pebble Connect Pebble app with CloudPebble Enable Developer Connections Run in CloudPebble
  25. 25. #Devoxx #smartvoxx @sarbogast @eloudsa Available Watches
  26. 26. #Devoxx #smartvoxx @sarbogast @eloudsa Apple Watch 272x340312x390
  27. 27. #Devoxx #smartvoxx @sarbogast @eloudsa Android Wear
  28. 28. #Devoxx #smartvoxx @sarbogast @eloudsa Square Round Round Chin Form factors
  29. 29. #Devoxx #smartvoxx @sarbogast @eloudsa Pebble Classic Steel Time Time Steel Time Round 144x168
  30. 30. #Devoxx #smartvoxx @sarbogast @eloudsa Compatibility Android Wear:Android phones + iPhone (with some limitations) Apple Watch: iPhones only Pebble:Android phones + iPhones (with SDKs to integrate with apps on both platforms)
  31. 31. #Devoxx #smartvoxx @sarbogast @eloudsa Inputs and Outputs
  32. 32. #Devoxx #smartvoxx @sarbogast @eloudsa Apple Watch Gestures Force Touch Digital Crown Side Button Taptic Engine Microphone and speaker Accelerometer Heart rate monitor (NFC)
  33. 33. #Devoxx #smartvoxx @sarbogast @eloudsa Touch screen Shake moves Button Ambiant mode Microphone (Voice control) Heart rate monitor (PPG) Gyro,Accelerometer, Compass Barometer NFC GPS Android Wear
  34. 34. #Devoxx #smartvoxx @sarbogast @eloudsa Pebble Non-touch (color) e-ink screen 4 buttons Vibration Microphone
  35. 35. #Devoxx #smartvoxx @sarbogast @eloudsa Design Principles
  36. 36. #Devoxx #smartvoxx @sarbogast @eloudsa Human Interface Guidelines Lightweight interactions Holistic design Personal communication
  37. 37. #Devoxx #smartvoxx @sarbogast @eloudsa Creative vision for Android Wear Suggest: Context Stream Demand: Cue Cards Glanceable Zero or Low interaction Beam me up!
  38. 38. #Devoxx #smartvoxx @sarbogast @eloudsa Guidelines and patterns Cards List options with Menus Execute actions with action bars Prompting User Action on the Phone Show Time and Data with the Status Bar Show Alerts and Get Decisions with Modal Windows UsingVibrations and Haptic Feedback Handling Connection Problems
  39. 39. #Devoxx #smartvoxx @sarbogast @eloudsa Different kinds of apps
  40. 40. #Devoxx #smartvoxx @sarbogast @eloudsa Apple Watch Apps Notications Glances Complications
  41. 41. #Devoxx #smartvoxx @sarbogast @eloudsa Android Wear Full-screen apps Notications Custom notications Watch face 4 If you don't have a Rolex by the time you reach 50, then you have clearly failed in your life. Jacques Sgula
  42. 42. #Devoxx #smartvoxx @sarbogast @eloudsa Pebble Apps Timeline integration
  43. 43. #Devoxx #smartvoxx @sarbogast @eloudsa Languages Apple Watch: Swift or Objective-C Android Wear: Java (or Kotlin or Groovy or ) Pebble: C or Javascript (Pebble.js)
  44. 44. #Devoxx #smartvoxx @sarbogast @eloudsa self.table.setNumberOfRows(self.schedules!.count, withRowType: "schedule") for (index,schedule) in self.schedules!.enumerate() { if let row = self.table.rowControllerAtIndex(index) as? ScheduleRowController { row.label.setText( schedule.title!.stringByReplacingOccurrencesOfString( NSLocalizedString("Schedule for ", comment:""), withString: "" ) ) } } Apple Watch
  45. 45. Demo #Devoxx #smartvoxx @sarbogast @eloudsa
  46. 46. #Devoxx #smartvoxx @sarbogast @eloudsa Layout: Round / Square
  47. 47. #Devoxx #smartvoxx @sarbogast @eloudsa Layout: Main res/layout/talk_fragment.xml
  48. 48. #Devoxx #smartvoxx @sarbogast @eloudsa 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 { return } var schedules = [Schedule]() for scheduleDict in schedulesArray { let scheduleDict = scheduleDict as? NSDictionary let schedule = self.getOrCreateScheduleForHref(scheduleDict["href"] as! String, inContext: context)! 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) self.saveContext(context) } } catch let jsonError as NSError { print(jsonError) } } } } Core Data on Apple Watch
  49. 75. Demo #Devoxx #smartvoxx @sarbogast @eloudsa
  50. 76. #Devoxx #smartvoxx @sarbogast @eloudsa Wear Data Item (Cache) .getInt() DataMap .getDataIetms() DataApi wear://path_to_data 1 2 Data caching MessageApi sendMessage() 3 4
  51. 77. Demo #Devoxx #smartvoxx @sarbogast @eloudsa
  52. 78. #Devoxx #smartvoxx @sarbogast @eloudsa App structure and distribution
  53. 79. #Devoxx #smartvoxx @sarbogast @eloudsa Apple Watch Package the Apple Watch app with the iPhone app Release the iPhone app like any other Wait for review Wait again Wait some more
  54. 80. #Devoxx #smartvoxx @sarbogast @eloudsa Android Wear
  55. 81. #Devoxx #smartvoxx @sarbogast @eloudsa Prepare the build Include permissions required by Wear into Phone (Manifest) Use same package name and version number (build.gradle)
  56. 82. #Devoxx #smartvoxx @sarbogast @eloudsa Generate signed APK
  57. 83. #Devoxx #smartvoxx @sarbogast @eloudsa Mobile APK embeds Wearable Mobile App Module Code Resources Wearable App Wear App Module Code Resources
  58. 84. #Devoxx #smartvoxx @sarbogast @eloudsa Publishing: Select Android Wear
  59. 85. #Devoxx #smartvoxx @sarbogast @eloudsa Distribution Companion App Wearable App Bluetooth Companion App Play Services Android Wear Wearable App Smartvoxx
  60. 86. #Devoxx #smartvoxx @sarbogast @eloudsa Pebble Pebble App JS module
  61. 87. #Devoxx #smartvoxx @sarbogast @eloudsa Smartvoxx smartvoxx.com
  62. 88. Demo #Devoxx #smartvoxx @sarbogast @eloudsa
  63. 89. #Devoxx #smartvoxx @sarbogast @eloudsa 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
  64. 90. #Devoxx #smartvoxx @sarbogast @eloudsa Apps that work on smartwatches countdowns and timers status checks: whats the temperature? whats my next session? whats the score of the game? remote controls: switch off the light, change the music, open my hotel room, pay for my shopping notication responders: invitation to a meeting -> whats the meeting about, somebody sent me a message -> what does it say? data track