flare - tech-intro-for-paris-hackathon

46
Flare training November 2015 DevNet Hackathon Andrew Zamler-Carhart / Oliver Frebourg Senior Technology Manager/ Software Engineering, Cisco

Upload: cisco-devnet

Post on 15-Apr-2017

471 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Flare - tech-intro-for-paris-hackathon

Flare training

November 2015

DevNet Hackathon

Andrew Zamler-Carhart / Oliver Frebourg

Senior Technology Manager/ Software Engineering, Cisco

Page 2: Flare - tech-intro-for-paris-hackathon

Flare allows users with mobile devices

to discover and interact with things in an environment.

It combines multiple location technologies

with a realtime communications architecture,

to enable new kinds of user interactions.

What is Flare?

@CiscoFrance #DevNetHackathon

Page 3: Flare - tech-intro-for-paris-hackathon

• When the user enters an environment, their device can show the location of nearby things

• When they come near to a thing, they can interact with it by:

• getting information about its current state

• changing its state

• performing actions

Interaction modes

@CiscoFrance #DevNetHackathon

Page 4: Flare - tech-intro-for-paris-hackathon
Page 5: Flare - tech-intro-for-paris-hackathon
Page 6: Flare - tech-intro-for-paris-hackathon
Page 7: Flare - tech-intro-for-paris-hackathon

• Retail

• Museums

• Advertising

• Industrial

• Public transport

• and more!

Potential markets

@CiscoFrance #DevNetHackathon

Page 8: Flare - tech-intro-for-paris-hackathon

Retail concept

Page 9: Flare - tech-intro-for-paris-hackathon
Page 10: Flare - tech-intro-for-paris-hackathon
Page 11: Flare - tech-intro-for-paris-hackathon
Page 12: Flare - tech-intro-for-paris-hackathon
Page 13: Flare - tech-intro-for-paris-hackathon
Page 14: Flare - tech-intro-for-paris-hackathon
Page 15: Flare - tech-intro-for-paris-hackathon
Page 16: Flare - tech-intro-for-paris-hackathon
Page 17: Flare - tech-intro-for-paris-hackathon

Technical info

Page 18: Flare - tech-intro-for-paris-hackathon

• Open source

• Implemented in Node.js and MongoDB

• You can run it yourself

Flare server

@CiscoFrance #DevNetHackathon

Page 19: Flare - tech-intro-for-paris-hackathon

• Bluetooth beacons (iBeacon, AltBeacon)

• Wi-Fi + Cisco CMX (coming soon)

• technology agnostic, can work with other kinds of sensors

Location technologies

@CiscoFrance #DevNetHackathon

Page 20: Flare - tech-intro-for-paris-hackathon
Page 21: Flare - tech-intro-for-paris-hackathon

• Environment: a geographic location with a grid

• Zone: a rectangular division of an environment

• Thing: something interesting to the user

• Device: a user’s tablet, phone or watch

Flare model

@CiscoFrance #DevNetHackathon

Page 22: Flare - tech-intro-for-paris-hackathon

• REST: create, read, update, delete Flare objects

• Socket.IO: realtime commands and notifications

Flare API

@CiscoFrance #DevNetHackathon

Page 23: Flare - tech-intro-for-paris-hackathon
Page 24: Flare - tech-intro-for-paris-hackathon

• Subscribe

• Unsubscribe

• Get data value

• Set data value

• Get position

• Set position

• Perform action

Socket.IO commands

@CiscoFrance #DevNetHackathon

Page 25: Flare - tech-intro-for-paris-hackathon

• Data changed

• Position changed

• Device enters zone

• Device exits zone

• Device near to a thing

• Device far from a thing

• Handle action

Socket.IO notifications

@CiscoFrance #DevNetHackathon

Page 26: Flare - tech-intro-for-paris-hackathon

• User apps on tablet, phone and watch

• Interactive displays

• Connected things

• Admin tools

• Import scripts

• Logging scripts

Types of client

@CiscoFrance #DevNetHackathon

Page 27: Flare - tech-intro-for-paris-hackathon

• JavaScript

• Swift (iOS and Mac)

• Java (Android)

• Python

Sample code

@CiscoFrance #DevNetHackathon

Page 28: Flare - tech-intro-for-paris-hackathon
Page 29: Flare - tech-intro-for-paris-hackathon
Page 30: Flare - tech-intro-for-paris-hackathon
Page 31: Flare - tech-intro-for-paris-hackathon
Page 32: Flare - tech-intro-for-paris-hackathon

• Trilateral: shows map of environment on phone (iOS, Android)

• Explorer: create and modify Flare objects (web, Mac)

Sample apps

@CiscoFrance #DevNetHackathon

Page 33: Flare - tech-intro-for-paris-hackathon
Page 34: Flare - tech-intro-for-paris-hackathon
Page 35: Flare - tech-intro-for-paris-hackathon

• Importing data (JavaScript, Swift, Python)

• Location (Swift, Java)

• Socket.IO (JavaScript, Swift, Java)

Tutorials

@CiscoFrance #DevNetHackathon

Page 36: Flare - tech-intro-for-paris-hackathon
Page 37: Flare - tech-intro-for-paris-hackathon

• Importing data (JavaScript, Swift, Python)

• Location (Swift, Java)

• Socket.IO (JavaScript, Swift, Java)

Tutorials

@CiscoFrance #DevNetHackathon

Page 38: Flare - tech-intro-for-paris-hackathon

Code demo

Page 39: Flare - tech-intro-for-paris-hackathon
Page 40: Flare - tech-intro-for-paris-hackathon

Just a little Swift + JavaScript

@CiscoFrance #DevNetHackathon

Page 41: Flare - tech-intro-for-paris-hackathon

And the other way…

@CiscoFrance #DevNetHackathon

Page 42: Flare - tech-intro-for-paris-hackathon

• Documentation on DevNet: https://developer.cisco.com/site/flare

• Source code on GitHub: https://github.com/CiscoDevNet/flare

• Video on YouTube: https://youtu.be/HKBnqo9QlEk

• Hackathon: http://hackathon.cisco.com/event/PIRL-Hackathon-2015

Links

@CiscoFrance #DevNetHackathon

Page 43: Flare - tech-intro-for-paris-hackathon
Page 44: Flare - tech-intro-for-paris-hackathon
Page 45: Flare - tech-intro-for-paris-hackathon
Page 46: Flare - tech-intro-for-paris-hackathon

Merci !