cisco spark & tropo api workshop

Cisco Spark & Tropo API WorkshopTour the DevNet Quiz AppDavid STAUDT, Developer Evangelist, [email protected]

Stève SFARTZ, API Evangelist, [email protected] DEVNET-3002

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 2DEVNET-3002

• Quiz App Tour• Workshop hands-on

• Pick a Tropo phone number and connect it to a Javascript IVR• Setup a SMS Bridge to onboard participants into a Spark room• Check Tropo real-time activity via a ChatOps room • Connect an interactive assistant to a Spark room as a Webhook (Bots)

• Pre-requisites :• Developers with programming background, and signup before the session to

https://developer.ciscospark.com/ and https://www.tropo.com.

Agenda

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public

Quizz App Tour

3DEVNET-3002


DevNet Quiz App

• Call +1 414-882-4782 to play the teaser

• Text your email to join the « DevNet Quiz » room

• Type /challenge in the Spark room take your chance to guess the names of DevNet most popular ressources

• Pre-requisite• Developers with programming background• Signup before the session to https://developer.ciscospark.com/ and

https://www.tropo.com

4DEVNET-3002 4

https://developer.ciscospark.com/

https://www.tropo.com/


dials #1

DevNet Quiz Overview+1 414-882-4782

« Welcome »

details via SMS

ack

texts email address

/challengeplays the challenge

calls

texts

« sparks »

Quizscript

Quiz Bot

Cisco Spark

POSTmembership

joins Quiz room

CiscoSpark Bridge

/emailtexted

CiscoSpark ChatOps

/newlogs

POSTmessage

« ChatOps »Room

« Quiz »Room

5


• call the IVR: +1 414-882-4782• text your email • launch Cisco Spark and enter the « DevNet Quiz » room• login to Tropo.com and paste your account number into the ‘Quiz’ room

Hands-on: join the ‘DevNet Quiz’ room

https://www.tropo.com

DEVNET-3002

https://www.tropo.com/


DevNet Quiz IVRInteractive Voice Response system

7DEVNET-3002


What is Tropo ?

8DEVNET-3002

Cloud APIs enabling developers to quickly and easily embed communication capabilities into their applications and business processes.

8


+• Ask • Call • Conference • Hangup

• Record • Reject • Say • Transfer

Tropo in a nutshell

DEVNET-3002


How to setup a custom IVR• The ‘DevNet Quiz’ IVR is composed of :

• a local phone number • a custom script executed by the Tropo Scripting platform

dials #1

+1 414-882-4782« Welcome »

« DEVNET3002 details »calls

Quizscript

DEVNET-3002

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 11

Hands-on: let’s setup the DevNet Quiz IVR

• Create a new Tropo application on http://tropo.com • Example: « DEVNET3002 -

CLVegas2016 »

• Point to the IVR script: http://bit.ly/DEVNET3002-1

• Save the application

DEVNET-3002

http://tropo.com/

http://bit.ly/DEVNET3002-1




Hands-on: setup the DevNet Quiz IVR

• Add a phone number• note : pick a SMS-enabled phone number as we’ll leverage SMS later

• Call your IVRDEVNET-3002


IVR highlights• Fork a new Tropo session to send a SMS

DEVNET-3002


To go further…• Personalize your IVR

• Modify the invites, play audio files• Pick international voices• Use SSML to enhance your User Experience

• Understand how the Tropo Scripting platform manages your files• For development, host your scripts on an external URL for changes to reflect instanlty

• As Tropo will fetch your script everytime it is invoked• Host on Github gist, edit your favorite IDE

• https://www.tropo.com/2016/06/gists-can-help-tropo-scripting-development/ • When going live, host your scripts on Tropo Production File Servers

DEVNET-3002

https://www.tropo.com/2016/06/gists-can-help-tropo-scripting-development/


CiscoSpark SMS Bridgeadd users to the Quiz room

15DEVNET-3002


‘Your App’ now with

Cisco Collab!

Spark APIs Extend Cisco Collaboration Cloud

GET

POST

DELETE

PUT/Rooms

/Memberships

/Messages

/Webhooks

/People

DEVNET-3002

/Teams

https://developer.ciscospark.com/


How to setup a SMS bridge

ack

texts email address

texts

Quizscript

Cisco Spark

POSTmembership

CiscoSpark client

/email texted

« Quiz »Room

17


Hands-on: setup the SMS bridge

1. Create a Cisco Spark room from the CiscoSpark Interactive Documentation• https://developer.ciscospark.com/endpoint-rooms-post.html • Example: « DEVNET3002 – SMS Bridge »

2. Copy the RoomID and put it in a safe place• If you forgot to copy your RoomID, list your rooms and copy• https://developer.ciscospark.com/endpoint-rooms-get.html

Prepare the on-boarding room

https://developer.ciscospark.com/endpoint-rooms-post.html


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

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


• Create a new Cisco Spark room from the CiscoSpark Developer Portal

DEVNET-3002





• go to https://gist.github.com/

• click « New Gist »

• name it « devnet3002-step2.js »

• paste contents from template: http://bit.ly/DEVNET3002-2

• replace SPARK_TOKEN and ROOM_ID

• click « Create SECRET » as the script contains your Spark token

• copy the URL of your Gist

Create the Tropo on-boarding script as a secret Gist

https://gist.github.com/



Hands-on: SECRET Gist from bit.ly/DEVNET3002-2

DEVNET-3002

https://gist.github.com






• edit the Tropo application

• point the Text script to your gist• append /raw/<script-name>.js

• save

• text your email address to your Tropo number

Configure Tropo to run the Gist for SMS interactions


Hands-on: run the Gist for SMS interactions


To go further..• Leverage the Cisco Spark Bot feature

• create a Bot account from the Cisco Spark Developer portal• replace the SPARK_TOKEN with your bot token• /!\ do not forget to add your bot to the Quiz room

DEVNET-3002


Cisco Spark ChatOps

25DEVNET-3002


What are ChatOps ?

• Step by step article to set this up• https://www.tropo.com/2016/06/devops-follow-tropo-spark/

“Follow your Tropo application real-time activity in Cisco Spark”

https://www.tropo.com/2016/06/devops-follow-tropo-spark/


How to setup Cisco Spark ChatOps

To stream logs into CiscoSpark and get instant view about Tropo activity:

1. Create a ChatOps room

2. Add an Incoming Integration

3. Post messages from Tropo

Quizscript

Spark

CiscoSpark ChatOps

/newlogs

POSTmessage

« ChatOps »Room

27

12

3


Hands-on: setup Tropo ChatOps

• Create a new ChatOps Room via Spark Interactive Documentation *• https://developer.ciscospark.com/endpoint-rooms-post.html

• Enter the room from the Cisco Spark Web client : https://web.ciscospark.com/

• Create an Incoming integration• Copy the integration identifier, we’ll inject it in our Trop script

• Security note • only the room is exposed to ChatOps, no Spark token is shared here which falicitates

scripts sharing among the devops team

Prepare the ChatOps room




https://web.ciscospark.com/




Step 1: ChatOps

• SNAPSHOT




Step 2 : add an Incoming integration

DEVNET-3002


• an incoming integration is a public URI on which you can POST a message,

• Messages are added to the room with the display name you specified (see next screen)



Integration URI suffix


Step 3: add Chatops to your Tropo application• Change your Voice script to http://bit.ly/DEVNET3002-3

• Inject your Integration URI suffix:

• Call your IVR and follow its activity in the ChatOps room

DEVNET-3002




To go further…

• Add this code to your script

• Invoke your Tropo script from the token_url

Easily check your Tropo script compiles


DevNet Quiz Botrun challenges from CiscoSpark

34DEVNET-3002


How to connect the ‘DevNet Quiz’ Bot

/challengeplays the challenge« sparks »

Quiz Bot

Cisco Spark

enters the Quiz room « Quiz »Room

35DEVNET-3002


Hands-on: Connect the bot1. Add the ‘DevNet’ bot to your Quiz room : [email protected]

2. Create a Webhook • Bot URI: http://bit.ly/DEVNET3002-4a • /!\ specify your Quiz room identifier as

a webhook filter: roomId=

36

https://developer.ciscospark.com/endpoint-webhooks-post.html

DEVNET-3002

mailto:[email protected]






bot listens here: http://bit.ly/DEVNET3002-4a

DEVNET-2002







To go further..• extend the DevNet Quiz bot source code

• https://github.com/ObjectIsAdvantag/DevNetZone-Bot

• test it locally with localtunnel or ngrok> npm install –g localtunnel> lt –s <subdomain> -p 8080 // ex: https://iloveapis.localtunnel.me/webhook your url is: https://<subdomain>.localtunnel.meÞ bot is now accessible at https://<subdomain>.localtunnel.me/webhook

• when ready, deploy on your prefered hosting infrastructure• CleverCloud, Heroku, Google App Engine, Microsoft Azure, Amazon

DEVNET-3002

https://github.com/ObjectIsAdvantag/DevNetZone-Bot

https://github.com/ObjectIsAdvantag/DevNetZone-Bot


Let’s wrap it up

39DEVNET-3002


dials #1

DevNet Quiz Overview+1 414-882-4782

« Welcome »

« DEVNET3002 details »

ack

subscribes via email

/challengeplays the challenge

calls

texts

« sparks »

Quizscript

Quiz Bot

Cisco Spark

POSTmembership

joins Quiz room

CiscoSpark Bridge

/emailtexted

CiscoSpark ChatOps

/newlogs

POSTmessage

« ChatOps »Room

« Quiz »Room

40

© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 41DEVNET3002

Key API Features and Use-Cases

• /rooms /people automate room creation and population

• /messages app-driven notifications and reports

• /teams self-service rooms

• /webhooks interactive assistants (chat bots)

• TTS/Speech Recognition voice driven interactive customer service

• SMS automated outbound notifications, inbound SMS apps

• Recording/Transcription voice messaging and voice notes/records

• Telephony/Conferencing notifications and team voice comms


Continue Your Education in the DevNet Zone• Try a Spark or Tropo DevNet Learning Lab

1. Create Spark Rooms, Add Participants and Post Messages 2. Learn to create a Spark Webhook that will subscribe to new messages in a room3. Register a new Spark app, and authenticate from a browser based app4. Quickly create a Tropo app with TTS, audio file playback and outbound calling

• Attend other Spark/Tropo API sessions or take an instructor-driven Workshop• DEVNET-2002: REST API Basics using Spark • DEVNET-2020: [Workshop] Working with Spark APIs • DEVNET-2021: Spark API Authentication - Bots and Oauth• DEVNET-2025: [Workshop] Build a Multi-Function iPaaS Application Using Python

• Meet the Experts at the Demo Pods


Complete Your Online Session Evaluation

Don’t forget: Cisco Live sessions will be available for viewing on-demand after the event at CiscoLive.com/Online

• Give us your feedback to be entered into a Daily Survey Drawing. A daily winner will receive a $750 Amazon gift card.

• Complete your session surveys through the Cisco Live mobile app or from the Session Catalog on CiscoLive.com/us.

43DEVNET-3002

http://ciscolive.com/Online

http://ciscolive.com/us


Please join us for the Service Provider Innovation Talk featuring:

Yvette Kanouff | Senior Vice President and General Manager, SP BusinessJoe Cozzolino | Senior Vice President, Cisco Services

Thursday, July 14th, 201611:30 am - 12:30 pm, In the Oceanside A room

What to expect from this innovation talk• Insights on market trends and forecasts• Preview of key technologies and capabilities • Innovative demonstrations of the latest and greatest products• Better understanding of how Cisco can help you succeed

Register to attend the session live now or watch the broadcast on cisco.com

DEVNET-3002 44

Thank you


@CiscoSparkDev

@CiscoDevNet

cisco spark & tropo api workshop

Technology