Tour the DevNet Quiz App

1. Cisco Spark & Tropo API Workshop
Tour the DevNet Quiz App
David STAUDT, Developer Evangelist, dstaudt@cisco.com
Stève SFARTZ, API Evangelist, stsfartz@cisco.com
DEVNET-3002

2. • 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

3. Quizz App Tour

4. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
DEVNET-3002

5. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
dials #1
DevNet Quiz Overview
+1 414-882-4782
« Welcome »
details via SMS
ack
texts email address
/challenge
plays the challenge
calls
texts
« sparks »
Quiz
script
Quiz Bot
Cisco Spark
POST
membership
joins Quiz room
CiscoSpark
Bridge
/email
texted
CiscoSpark
ChatOps
/new
logs
POST
message
« ChatOps »
Room
« Quiz »
Room

6. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
• 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

7. DevNet Quiz IVR
Interactive Voice Response system

8. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
What is Tropo ?
DEVNET-3002
Cloud APIs enabling developers to quickly
and easily embed communication capabilities
into their applications and business processes.

9. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
+
• Ask
• Call
• Conference
• Hangup
• Record
• Reject
• Say
• Transfer
Tropo in a nutshell
DEVNET-3002

10. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
Quiz
script
DEVNET-3002

11. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
11DEVNET-3002

12. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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 IVR
12DEVNET-3002

13. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
IVR highlights
• Fork a new Tropo session to send a SMS
13DEVNET-3002

14. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
14DEVNET-3002

15. CiscoSpark SMS Bridge
add users to the Quiz room

16. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
‘Your App’
now with
Cisco Collab!
Spark APIs
Extend Cisco Collaboration Cloud
GET
POST
DELETE
PUT
/Rooms
/Memberships
/Messages
/Webhooks
/People
DEVNET-3002 16
/Teams
https://developer.ciscospark.com/

17. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
How to setup a SMS bridge
ack
texts email address
texts
Quiz
script
Cisco Spark
POST
membership
CiscoSpark
client
/email
texted
« Quiz »
Room

18. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 18DEVNET-3002
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

19. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
• Create a new Cisco Spark room from the CiscoSpark Developer Portal
19DEVNET-3002
https://developer.ciscospark.com/endpoint-rooms-post.html

20. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 20DEVNET-3002
Hands-on: setup the SMS bridge
• 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

21. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
Hands-on: SECRET Gist from bit.ly/DEVNET3002-2
21DEVNET-3002
https://gist.github.com

22. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 22DEVNET-3002
Hands-on: setup the SMS bridge
• 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

23. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 23DEVNET-2002
Hands-on: run the Gist for SMS interactions

24. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
24DEVNET-3002

25. Cisco Spark ChatOps

26. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
What are ChatOps ?
• Step by step article to set this up
• https://www.tropo.com/2016/06/devops-follow-tropo-spark/
26DEVNET-3002
“Follow your
Tropo application
real-time activity
in Cisco Spark”

27. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
Quiz
script
Spark
CiscoSpark
ChatOps
/new
logs
POST
message
« ChatOps »
Room
1
2
3

28. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 28DEVNET-3002
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

29. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 29DEVNET-2002
Step 1: ChatOps
• SNAPSHOT
https://developer.ciscospark.com/endpoint-rooms-post.html

30. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
Step 2 : add an Incoming integration
30DEVNET-3002
https://web.ciscospark.com/
• 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)

31. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 31DEVNET-2002
Integration URI suffix

32. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
32DEVNET-3002

33. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public 33DEVNET-3002
To go further…
• Add this code to your script
• Invoke your Tropo script from the token_url
Easily check your Tropo script compiles

34. DevNet Quiz Bot
run challenges from CiscoSpark

35. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
How to connect the ‘DevNet Quiz’ Bot
/challenge
plays the challenge« sparks »
Quiz Bot
Cisco Spark
enters the Quiz room « Quiz »
Room
DEVNET-3002

36. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
Hands-on: Connect the bot
1. Add the ‘DevNet’ bot to your Quiz
room : CiscoDevNet@sparkbot.io
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

37. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
bot listens here: http://bit.ly/DEVNET3002-4a
37DEVNET-2002
https://developer.ciscospark.com/endpoint-webhooks-post.html

38. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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
38DEVNET-3002

39. Let’s wrap it up

40. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
dials #1
DevNet Quiz Overview
+1 414-882-4782
« Welcome »
« DEVNET3002 details »
ack
subscribes via email
/challenge
plays the challenge
calls
texts
« sparks »
Quiz
script
Quiz Bot
Cisco Spark
POST
membership
joins Quiz room
CiscoSpark
Bridge
/email
texted
CiscoSpark
ChatOps
/new
logs
POST
message
« ChatOps »
Room
« Quiz »
Room

41. © 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

42. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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 room
3. Register a new Spark app, and authenticate from a browser based app
4. 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
42DEVNET-3002

43. © 2016 Cisco and/or its affiliates. All rights reserved. Cisco Public
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

44. Please join us for the Service Provider Innovation Talk featuring:
Yvette Kanouff | Senior Vice President and General Manager, SP Business
Joe Cozzolino | Senior Vice President, Cisco Services
Thursday, July 14th, 2016
11: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

45. Thank you
@CiscoSparkDev
@CiscoDevNet