Building Beautiful High Performance Connected Car Applications

  • Published on
    13-Feb-2017

  • View
    411

  • Download
    1

Transcript

Building Beautiful High Performance Connected Car ApplicationsJason WienerCEO - Hyperdrive@jasonwienerBuilding Beautiful High Performance Connected Car ApplicationsSerial CTO since 1996 Part of the founding team or a first-hire Assist or lead fundraising (VC/Angel/Revenue) Build the POC & technical team Launch Grow to steady state Handoff Whats next?Open wheel racerGrand Prize Winner of 2015 Toyota Onramp Smart Mobility ChallengeCEO - HyperdriveAbout MeBuilding Beautiful High Performance Connected Car ApplicationsHyperdriveThink: part activity tracker, part driving coach, part social game. Hyperdrive makes you a better driver by making driving funLowest time with the highest MPG owns the section of roadProfitable & privately-held companyBuilding Beautiful High Performance Connected Car Applications MPG race @ Sonoma Raceway - March 3, 2017 20 Teams of 3-5 members Build strategies using a web-based telemetry editor Test strategies using simulations Race w/ real-time in-car feedback Team with the best avg MPG over 9 laps winsSIGN UP at http://toyotaonramp.comToyotaResearchInstituteToyota OnrampDriver Strategy Editor Use clips of captured vehicle data Edit like iMovie or Adobe Premiere to build your race strategy Playback on Race Day against real-time performance using an onboard iPadWhat well cover1. Getting car data2. Storing & retrieving data by use case3. Visualizing dataBuilding Beautiful High Performance Connected Car ApplicationsData CaptureBuilding Beautiful High Performance Connected Car ApplicationsData Capture> Where do we start? Adapters or APIs? Workflow Sample codeFirst things first What do you want to get your hands on? Telemetry Error/Trouble codes Location YES!Building Beautiful High Performance Connected Car ApplicationsData Capture> Where do we start? Adapters or APIs? Workflow Sample codeTelemetry Get the current operating values for the car Core to data-driven connected car apps PIDsA go to reference is the OBD-II PIDs page on Wikipediahttps://en.wikipedia.org/wiki/OBD-II_PIDsBuilding Beautiful High Performance Connected Car Applicationshttps://en.wikipedia.org/wiki/OBD-II_PIDshttps://en.wikipedia.org/wiki/OBD-II_PIDsData Capture> Where do we start? Adapters or APIs? Workflow Sample codeError/Trouble Codes Get warning indicators Useful for notifications Drive commerceBuilding Beautiful High Performance Connected Car ApplicationsData Capture> Where do we start? Adapters or APIs? Workflow Sample codeLocation Get where the car is right now Logging activity Routing/Directions Traffic Needs some thinking ahead of timeBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeNow the how Rely on hardware or software? Adapters High-end vs low-end Connectivity options Documentation APIs Platforms Availability on vehiclesBuilding Beautiful High Performance Connected Car ApplicationsAdapters High-end/Best of Breed Automatic GoPoint VinliData Capture Where do we start?> Adapters or APIs? Workflow Sample codeBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAdapters: High-end/Best of Breed Pros MFi + Android Location (kinda) Security Higher refresh rates Awesome documentation Example source Great technical supportBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAdapters: High-end/Best of Breed Cons Price Pairing Tied to an account elsewhere Adapter-specific integrations If you use it, will they come?Building Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAdapters Low-end Amazon eBay AlibabaBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAdapters: Low-End Pros Plug and play Cheap (as little as $3) Good adapter for $15 Low POC costs Standard chipset (ELM327) Open source communityBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAdapters: Low-End Cons Less secure Lower refresh rates No device documentation No technical support Spotty Quality Control BLE 5-10x 2.1 adpater costsBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAPIs Vehicle: Smart Device Link Cloud: Automatic Vinli MojioBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAPIs: Vehicle (SmartDeviceLink) Pros No adapter necessary Excellent APIs Location Backed by Ford & Toyota Supported by Mazda, Suzuki & more Great documentation Awesome support via SlackBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAPIs Cons Only Ford & Toyota right now Presentation limitations App store review processBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAPIs: Cloud Pros No hardware integration REST APIs Speed to market Minimal costs Great documentationBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeAPIs: Cloud Cons Only Vinli has a telemetry API Refresh rate is low Reliance on adapter usersBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start?> Adapters or APIs? Workflow Sample codeLocation How do we get it? Mobile device Laptop Some adapters SDL Why you have to consider your use caseBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start? Adapters or APIs?> Workflow Sample codeHow to approach it Start small Get something easy working Then add complexity Mercedes-Benz Hackathon 2015 MacBook Pro + Garmin 510 + ieGeek WIFI Moved to iOS + WIFI (POC) Moved to BLE, Automatic, Vinli, GoPointBuilding Beautiful High Performance Connected Car ApplicationsData Capture Where do we start? Adapters or APIs? Workflow> Sample codeSample code Python 2.7 + gevent Data: Mass Airflow Sensor (MAF) RPM Vehicle Speed (VSS) ieGeek OBD II WIFI adapter http://amzn.to/2jtHn5W code: /capture/Building Beautiful High Performance Connected Car ApplicationsData StorageBuilding Beautiful High Performance Connected Car ApplicationsData Storage> How will we use it? Real-time Trailing Session SnapshotsNow, we have data How will we be using it? Real-time Trailing Session SnapshotsBuilding Beautiful High Performance Connected Car ApplicationsData Storage> How will we use it? Real-time Trailing Session SnapshotsDo we need to know whats going on? Will our app update based whats happening in the vehicle? Will our users consume the data as it happens? What happens to the data after weve used it or our users have seen it?Building Beautiful High Performance Connected Car ApplicationsData Storage> How will we use it? Real-time Trailing Session SnapshotsDo we need to know whats happened recently? Will we be providing summary data for users? Week, month, year i.e. Last week you drove 45 miles at an average of 37 MPG Will real-time data interact with recent data?i.e. Youre currently driving at 37 MPG, +4 MPG over your last trailing 20-min averageBuilding Beautiful High Performance Connected Car ApplicationsData Storage> How will we use it? Real-time Trailing Session SnapshotsWere saving everything once the user finishes driving, right? We dont know what we dont know, yet. Persist for future use New features Trends Machine learning #becausedataBuilding Beautiful High Performance Connected Car ApplicationsData Storage> How will we use it? Real-time Trailing Session SnapshotsWill user need to browse and search their data? Trips Activities Cases when we dont need to whole session captureBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it?> Real-time Trailing Session SnapshotsReal-time Enter/exit geofences Major events Monitoring DiagnosticsBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it?> Real-time Trailing Session SnapshotsReal-time: 2 approaches Polling Make a request periodically Old-School Long-polling (socket.io) Open a connection, receive updates, close on quit Popularized by modern activity feeds and chat clientsBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it?> Real-time Trailing Session SnapshotsReal-time: Polling Pros Existing tool kit Easy to add Just a timer firing a REST request Cons Lots of overhead Adds latency to your app Can hammer your serversBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it?> Real-time Trailing Session SnapshotsReal-time: Socket.IO Pros Better memory management Can support more traffic Built in lifecycle/presence Cons Learning curve Different usage pattern over traditional network callsBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it?> Real-time Trailing Session SnapshotsReal-time: Sample codeuse with the Capture code Polling Python 2.7 + gevent Socket.IO Python 2.7 HTML+JS (Client) PubNubhttps://www.pubnub.com/socket.io/ code: /storage/real-time/Building Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time> Trailing Session SnapshotsTrailing Time spans rollups Time series Can also power real-time stats Common uses: Drives this week MPH between 10am - 11am Times you went through the Taco Bell drive in this monthBuilding Beautiful High Performance Connected Car ApplicationsTrailing: Graphite Best in class Created at Orbitz in 2006 Hardened/Bombproof Solid documentationhttp://graphite.readthedocs.org/ #awesomeData Storage How will we use it? Real-time> Trailing Session SnapshotsBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time> Trailing Session SnapshotsTrailing: Graphite Pros Easy to PUT/GET data Flexible ad hoc metrics Cons Django PITA to setup Solution: Hosted Graphite #ftwhttps://www.hostedgraphite.comBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time> Trailing Session SnapshotsTrailing: Sample code Python 2.7 code: /storage/trailing/Building Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time Trailing> Session SnapshotsSession Logs Text or BLOBs Dumping everything youve captured from the user and vehicle during the session @ Hyperdrive: Compartmentalized by time Vehicle OFF & no updates for > 5 mins Compressed JSON objectBuilding Beautiful High Performance Connected Car ApplicationsSession Logs Amazon S3 or Microsoft Azure Storage Quickest & easiest Write once/read forever Use it to create snapshots Dont need SQL or even NoSQL Just need a performant key/value storeData Storage How will we use it? Real-time Trailing> Session SnapshotsBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time Trailing> Session SnapshotsSession Logs: Sample code Python 2.7 boto code: /storage/session/Building Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time Trailing Session> SnapshotsSnapshots Indexed data for common use-cases You dont always need the whole log You only need the META Small, cacheable, easy-to-consume @ Hyperdrive: Drive summary Distance, MPG, time, etc. Avg 20x smaller than the logBuilding Beautiful High Performance Connected Car ApplicationsSnapshots: How to store them MySQL, PostgreSQL, MongoDB This way you can also query values The model is still write once/read forever, but who caresData Storage How will we use it? Real-time Trailing Session> SnapshotsBuilding Beautiful High Performance Connected Car ApplicationsData Storage How will we use it? Real-time Trailing Session> SnapshotsSnapshots: Sample code Python 2.7 MySQL code: /storage/snapshots/Building Beautiful High Performance Connected Car ApplicationsData VisualizationBuilding Beautiful High Performance Connected Car ApplicationsData Viz> Making data beautiful Maps Real-time HistoryNow, weve captured and stored the data Lets make it beautiful! Maps Real-time HistoryBuilding Beautiful High Performance Connected Car ApplicationsData Viz> Making data beautiful Maps Real-time HistoryApplying the decisions that lead up to this point. Depending on The data youve captured What you want your users to see How theyll interact with it Defines The metaphors youll leverage for data visualizationBuilding Beautiful High Performance Connected Car ApplicationsData Viz> Making data beautiful Maps Real-time HistoryMaps Theyre everywhere now All are simple to integrate for the most part Top picks: Mapbox Google Maps Apple Maps OpenStreetMap HereBuilding Beautiful High Performance Connected Car ApplicationsData Viz> Making data beautiful Maps Real-time HistoryMaps: deck.gl Gorgeous library Like d3.js for map data Designed for large data sets Maintained by Uberhttp://uber.github.io/deck.gl/#/Building Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful> Maps Real-time HistoryMaps @ Hyperdrive we use Mapbox Vector maps Killer theme editor Turf.jshttps://github.com/turfjs Ability to keep themes on static and dynamic mapsBuilding Beautiful High Performance Connected Car ApplicationsBuilding Beautiful High Performance Connected Car ApplicationsMapboxData Viz Making data beautiful> Maps Real-time HistoryMapbox Example: Sonoma Raceway MapBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful> Maps Real-time HistoryMaps: Sample code HTML + JS Mapbox library code: /dataviz/maps/Building Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps> Real-time HistoryReal-time Gauges Line graphsBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps> Real-time HistoryReal-time: Gauges Awesome for expressing a single channel of data Speed, RPM, MPG, etc @ Hyperdrive we use: Raphael.js (web)http://dmitrybaranovskiy.github.io/raphael/ RYO (native mobile)*Tons of OS libraries on GitHubBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps> Real-time HistoryReal-time: Gauges How we wire them to work: Shared method for polling, function or sockets updates Trigger an animated update of the value ease-in-out @ 0.25 sec = sweet spot for update durationsBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps> Real-time HistoryGauges ExampleBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps> Real-time HistoryReal-time: Line Graphs Gives a sense of trends and history Updates as it happens @ Hyperdrive we use d3.jsBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps> Real-time HistoryReal-time: Sample code HTML + JS d3.js RaphaelJS code: /dataviz/real-time/Building Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps Real-time> HistoryHistory Data Trailing TelemetryBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps Real-time> HistoryHistory: Trailing Line charts Multiplex data together @ Hyperdrive we use: d3.js (web)https://d3js.org/ RYO (native mobile)*Tons of OS libraries on GitHubBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps Real-time> HistoryHistory: Trailing - Approach Rolled-up queries from SQL, NoSQL and/or Graphite A single JSON response CacheableBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps Real-time> HistoryHistory: Telemetry Line charts Stack channels to add context Ability to sync cursor interactions @ Hyperdrive we use: d3.js (web)https://d3js.org/ RYO (native mobile)*Tons of OS libraries on GitHubBuilding Beautiful High Performance Connected Car ApplicationsData Viz Making data beautiful Maps Real-time> HistoryHistory: Telemetry - Approach Index data into arrays on time or distance depending on the use case On user interaction (ala mouseover): Handle the cursor position (very simple math) to get the array position Lookup the data in each channel Display & update readoutsBuilding Beautiful High Performance Connected Car ApplicationsToyota OnrampDriver Strategy Editor Use clips of captured vehicle data Edit like iMovie or Adobe Premiere to build your race strategy Playback on Race Day against real-time performance using an onboard iPadData Viz Making data beautiful Maps Real-time> HistoryHistory: Sample code HTML + JS d3.js RaphaelJS code: /dataviz/history/Building Beautiful High Performance Connected Car ApplicationsWhat weve covered1. Getting car data2. Storing & retrieving data by use case3. Visualizing dataBuilding Beautiful High Performance Connected Car Applicationshttps://github.com/hyperdrivemerepo: building-beautiful-connected-car-appsCodeBuilding Beautiful High Performance Connected Car Applicationshttp://hyperdrive.meThank you!

Recommended

View more >