steve sfartz - how to embed messaging and video in your apps - codemotion milan 2017

How to embed

Messaging and Video

in your apps

API Evangelist @CiscoDevNet

@SteveSfartz

Stève Sfartz

DEMOS AND CODEINTENSE

/Cisco/DevNet/SteveSfartz

API Evangelist @CiscoDevNet

Cisco Spark & Tropo APIs

NodeJS mainly, a bit of #golang

France and all around Europe

hosted @PIRL – Paris Innovation Center & Research Lab

twitter://@SteveSfartz

github://ObjectIsAdvantag

“vision without execution is

hallucination”

-- Thomas Edison

stsfartz@cisco.com@SteveSfartz

so what’s on the menu

• Tour the potential of Video Calls

• Messaging from code

• Calling from code

• Demos & tech details

EN

GA

GE

ME

NT

TIME

Ad HocMeetings

FuriousChat

OccasionalMessaging

REALTIME

ScheduledMeetings

Current Workstyles Use Multiple Modes

EN

GA

GE

ME

NT

TIME

Optimizing the Space between the Spaces

REALTIME

OccasionalMessaging

ScheduledMeetings

Ad HocMeetings

FuriousChat

How do I escalate from chat to a live meeting without killing our momentum?

We’re on a roll in this meeting, if only I had a little more time to finish my thoughts.

I need a few more answers before I can assign the action items

Where did that list of important reference articles end up?

EN

GA

GE

ME

NT

TIME

Continuous Collaboration

REALTIME

OccasionalMessaging

Ad HocMeetings

FuriousChat

ScheduledMeetings

Secure, scalable, continuous collaboration

Cisco Spark Platform

Apps and Endpoints

On Premise Services Cloud Based Services

Single Experience Across Devices & Applications

Apps and Endpoints

Every Pocket , Desk, Room

Demo Cisco Spark Clients DX80

?! Now what if your app could getthese Messages, Audio/Video

super powers ?!

Cisco Spark ‘Free’ plan

Web, Desktop, Mobile clients

Illimited messaging & spaces

Up to 3 participants in a Call

Developer access to Cisco Spark APIs

https://developer.ciscospark.com

Cisco Spark REST API

14

GET

POST

DELETE

PUT

/Rooms

/Memberships

/Messages

/Webhooks

/People

/Teams

developer.ciscospark.com/

Cisco Spark for Developers

APItoken

Cisco Spark for Developers

APIdeveloper

botoauth

jwt

token

Demo REST API Automation, ChatOps

Cisco SparkCloud Service

1. interacts in spacesvia a Cisco Spark client

Cisco Spark User

Your Bot code runningOn-premise or on a Public Coud

2. posts notifications to registered WebHooks

Publicly accessible APIs

3. posts messages as notifications fly in

Bot Architecture: Webhooks

Register events your bot is interested to listened to Messages / created

Memberships / created

As events happen in spaces, receive notifications

Demo REST API Bot (on Glitch)

‘What is takes to code a bot’

Cisco Spark for Developers

APIdeveloper

botoauth

jwt

token

Cisco Spark for Developers

developerbot

oauthguest

token REST API

SDKs

Browsers, iOS, Android

all Sparkfeatures

Demo OAuth grant flow

Step 3 – App Requests Access Token

duittenb

With the received Auth Code, app.html does a HTTPS POST to sparkwith the client ID & secret to request the Access Token.

HTTPS POST send :https://api.ciscospark.com/v1/access_token

grant_type = authorization_code

redirect_uri = http://myserver.com/app.html

code = auth code…

client_id = oif8we28382u398u2938u

client_secret = hf33we28382uf8we2838Zx

http://myserver.com

Step 4 – Spark Response

HTTP POST response{

"access_token" :"ZDI3MGEyYzQtNmFlN0NDNhLWFlN",

"expires_in” :1209600, //seconds

"refresh_token":"MDEyMzQ1Njc4OTAxMjM0NTY3ODkw",

"refresh_token_expires_in":7776000 //seconds

}

duittenb

Spark returns the Access Token to the Application

Some applications may store this access token in a secure way so it can be re-used when a user logs into the Application

http://myserver.com

Cisco Spark for Developers

developerbot

oauthjwt

token REST API

SDKs

Browsers, iOS, Android

all Sparkfeatures

Spark SDKs

Calling

• Calling

• Call Events

Specs

iOS SDK - swift

• iOS 9 and 10

Browsers SDK - WebRTC

• Chrome - current• Firefox - current

CODECS

• H264• Opus

Call &Media Controls

• Call Control

• Audio Control

• Video Control

Other Functions

• Persistent registration

• Feedback

• Push notifications

Use Case: Retail

https://developer.ciscospark.com/sdk-for-browsers.html

https://ciscospark.github.io/spark-js-sdk/api

Demo OAuth with Spark SDK

Web Dialer from FireFoxhttps://webdialer.chhab.rocks

Each space also has a SIP address

https://developer.ciscospark.com/endpoint-rooms-roomId-get.html

Cisco Spark Client to Widget

Recents

Space

Space Widget

• Audio & video 1:1 calling

• Space & 1:1 messaging

• Markdown support

• File sharing

• Message flags and ability to delete messages

• Read receipts

• Persistent chat

Demo Space Widget

Embedding the Space React component

Cisco Spark for Developers

developerbot

oauthjwt

token REST API

SDKs

Browsers, iOS, Android

all Sparkfeatures

What if my users are not on Spark ?

Cisco Spark

Anyone Everywhere- spark user- guest

- spark user, spaces, devices

- SIP addresses

Guest mode

• Create a Developer Guest organisation

• Get issued a OrgId & Secret

• Dynamically register users

• Get JWT tokens for these users

• Access Cisco Spark APIs & SDKs

Gest mode deep dive

https://jwt.io/

Create a user JWT token from code

API access token from the user JWT token

POST https://api.ciscospark.com/v1/jwt/login

Authorization: <jwt-user-token>

{

"token": "eyJhbGci.eyNlX3R5cGU.I4zgVxATOH9Y"

"expiresIn": 21599

}

Demo Guest mode

Secure, scalable, extensible Conversations

• Desktop, Mobile, Web clients

• APIs & SDKs to extend the platform• API tokens, Oauth, JWT

• Key Management Server for end to end security

• WebRTC, Voice over IP• SIP addresses

Cisco Spark Resources

developer.ciscospark.com

awesome-ciscospark

DevNet learning labs

https://learninglabs.cisco.com/tracks/collab-cloud

Get empowered at

Learnings labs

Fog computing

Sandboxes

ready to use Kubernetes cluster

for DevNet members

Other talks at CodeMotion

today 14:10: Embedding Cisco Spark and Location applications (ESRI) into business processes

saturday 12:30: Microservices and containers networking: Contiv, deep dive and demo

Thank you