Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DevNet 1056 WIT Spark API and Chat Bot Workshop

406 views

Published on

As the title says.

Published in: Technology
  • Be the first to comment

DevNet 1056 WIT Spark API and Chat Bot Workshop

  1. 1. Intro to Spark an introduction to REST APIs and Creating Spark Bots Adrienne Moherek and Tessa Mero DEVNET-1056
  2. 2. • REST API Basics: • What is an API? • Why APIs? • How does it work? • Tour of Cisco Spark API • Interactive Documentation Hands-on • Postman Hands-on • Python examples Agenda Part 1 (REST Basics and Spark)
  3. 3. • What are Chat Bots? • What are the Benefits? • Integrations vs Bots • Getting Started with a Collaboration API • Create a Chat Bot • Using Cloud9 (c9.io) • Create Webhook Events • Test Your Bot! Agenda Part 2 (Build a Spark Bot)
  4. 4. Who Are We?
  5. 5. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Cisco DevNet • What is Cisco DevNet? • What is the Purpose? • Why do we go to events? • We’re on Facebook and Twitter @CiscoDevNet • Free tools and sandboxes
  6. 6. What is an API?
  7. 7. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 8Presentation ID Application Programming Interface ”It’s a way for two pieces of software to talk to each other”
  8. 8. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public For a long time.. Humans were the only users
  9. 9. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public For a long time.. Humans were the only users 1. User asks for data or takes action by interacting with UI 2. Software displays results in User Interface (UI)
  10. 10. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public But what about when the user is another software system…. 1. Software asks for data or takes action by interacting with API 2. Software returns results via API My Software System Your Software System
  11. 11. Why APIs?
  12. 12. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Why are API’s so important?
  13. 13. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public API Growth from 2000 to 2016 0 5000 10000 15000 20000 25000 30000 35000 2000 2005 2007 2009 2011 2013 2015 2016 API's API's Source: 2016 data from nordicapis.com. 2005-2015 data from rubenverborgh.github.io and 2000-2004 data from blog.cutter.com
  14. 14. The API is the User Interface for software systems
  15. 15. APIs are sets of requirements that govern how one application can talk to another.
  16. 16. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public An API is like an electrical outlet. What would it be like to power a hair dryer without an outlet? - Open wall - Unsheath wires - Splice wires together - Understand all the wires in the wall The outlet is a service that conforms to specifications. - sockets deliver 120 volts of alternating current (AC) operating at 60Hz - Sets expectation on behalf of consuming devices and provider.
  17. 17. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public An API is like … An API (Application Programming Interface) is best thought of as a contract provided by one piece of computer software to another.
  18. 18. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public APIs help developers create apps that benefit the end user. 1. Yelp asks for Map Data 2. Google Maps returns map data via API Users sees list of restaurants close to them
  19. 19. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicPresentation ID -- Programmable Web APIs are often referred to as “an engine of innovation.”
  20. 20. Web Pages, Requests, Response & REST APIs
  21. 21. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public View a Web Page 22Presentation ID
  22. 22. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public View a Web Page 23Presentation ID Request GET /index.htm HTTP/1.1 Response HTTP 200 OK <html>
  23. 23. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Good • 200 OK • 201 Created • 204 No Content Common HTTP Status Codes Bad • 400 Bad Request • 403 Forbidden • 404 Not Found • 500 Internal Server Error • 550 Permission Denied
  24. 24. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public REST APIs use Request and Response to
  25. 25. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Get Data using an API 26Presentation ID
  26. 26. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Get Data using an API 27Presentation ID Request GET /rooms Response HTTP 200 OK {json data} API Consumer API Provider
  27. 27. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Example Spark API Flow 1. My App asks Spark for members in a room 2. Spark returns member data via API 4. Users sees diff of users on team and in room Cisco Spark 3. My App Compares members of a room with team members
  28. 28. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 29DEVNET-1056 Methods
  29. 29. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public What is so great about REST? 30 • Rooms • People • Memberships • Messages Easy to use: • In mobile apps • In console apps • In web apps Spark REST APIs
  30. 30. Setup with Spark
  31. 31. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Let’s get your computer setup 1. Create an account with Spark - https://web.ciscospark.com 2. Login to the Spark app - https://web.ciscospark.com OR Download the Spark app - https://www.ciscospark.com/downloads.html 3. Bookmark the Spark developer documentation - https://developer.ciscospark.com (You will need to login to use the interactive documents) 32DEVNET-1056
  32. 32. Cisco Spark for Developers Tour of Cisco Spark APIs
  33. 33. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Cisco Spark Secure & Open Complete & Simple Spark for Developers User Integrations, APIs/SDKs, etc. Spark Hybrid Services Cloud + Prem Partner Services Interconnect Message Meeting Call DEVNET-1056 34
  34. 34. © 2017 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 /Teams /People /Webhooks DEVNET-1056 35
  35. 35. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Cisco Spark API v1 /People /Rooms /Membership /Messages /Teams /Webhooks List People List Rooms List Memberships List Messages List Teams List Webhooks Create a Room Create a Membership Create a Message Create a Team Create a Webhook Get Person Details Get Room details Get Membership details Get Message details Get Team details Get Webhook details Update a Room Update a Membership Update a Team Update a Webhook Delete a Room Delete a Membership Delete a Message Delete a Team Delete a Webhook GET POST DELETE PUT DELETE DELETE DELETE PUT PUT POST POST POST GET GET GET GET GET GET GET GETGET DELETE PUT POST GET GET DEVNET-1056 36
  36. 36. Demo: List Rooms
  37. 37. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public For a long time.. Humans were the only users 1. User asks for data or takes action by interacting with UI 2. Software displays results in User Interface (UI)
  38. 38. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public View your Spark rooms If this is your first time using Spark, you will only see 1 Spark room 1. What is the name of the room? 39DEVNET-1056
  39. 39. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public But what about when the user is another software system…. 1. Software asks for data or takes action by interacting with API 2. Software returns results via API My Software System Your Software System
  40. 40. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public List Spark Rooms 41Presentation ID Request GET /rooms Response HTTP 200 OK {json data} API Consumer API Provider
  41. 41. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 42DEVNET-1056 1. Login to Spark Developer Docs https://developer.ciscospark.com
  42. 42. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 43DEVNET-1056 2. Click on Documentation https://developer.ciscospark.com
  43. 43. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 44DEVNET-1056 3. Click on Rooms and then click on List Rooms https://developer.ciscospark.com
  44. 44. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 45DEVNET-1056 4. Turn on Test Mode https://developer.ciscospark.com
  45. 45. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Method URL Response
  46. 46. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 47DEVNET-1056 5. Click on run https://developer.ciscospark.com
  47. 47. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Method URL Response
  48. 48. Demo: Create a room
  49. 49. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public For a long time.. Humans were the only users 1. User asks for data or takes action by interacting with UI 2. Software displays results in User Interface (UI)
  50. 50. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Create a Spark room Let’s create a new Spark room 1. Ask 2 people next to you for the email addresses they used for Spark 2. Click on the “+” and enter in their email addresses 3. Then type them a message 52DEVNET-1056
  51. 51. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public But what about when the user is another software system…. 1. Software asks for data or takes action by interacting with API 2. Software returns results via API My Software System Your Software System
  52. 52. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Create a New Room 54Presentation ID Request POST /rooms Response HTTP 200 OK {json data} API Consumer API Provider
  53. 53. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Method URL Response
  54. 54. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 56DEVNET-1056 Did it work? Go to the Spark app and see! https://web.ciscospark.com
  55. 55. Add people to your room
  56. 56. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
  57. 57. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Try to add yourself to your room  What happened? Add your neighbor to your room What happened Challenge: List memberships for room
  58. 58. Cisco Spark for Developers Spark API calls in Python
  59. 59. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Using Python to Make Requests • A benefit of REST is that you can invoke Spark from any language • Code it yourself • Or generate code from Postman • OAuth 2 to inject user API token Do It Yourself … with Postman code assistants DEVNET-1056 61
  60. 60. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Using Python to Make Requests 1. Generate a python skeleton from Postman, 2. Run from the command line Do It Yourself … with Postman code assistants DEVNET-1056 62
  61. 61. Using Postman to make API request
  62. 62. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public http://getpostman.com • Want to code along? Install POSTMAN now • Free tool to forge API requests, examine responses DEVNET-1056 64
  63. 63. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Same API Call in POSTMAN
  64. 64. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public method url request headers status code response headers content-type response body query parameters
  65. 65. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Find your Spark Developer Token Login to developer.ciscospark.com Copy Developer Token Developer Token
  66. 66. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public JSON syntax • square brackets for lists • curly braces for objects • name/value pairs for properties, separated by commas • pick an online editor • http://www.jsonlint.com DEVNET-1056 68
  67. 67. Q & A
  68. 68. Build a Spark Bot
  69. 69. • What are Chat Bots? • What are the Benefits? • Integrations vs Bots • Getting Started with a Collaboration API • Create a Chat Bot • Using Cloud9 (c9.io) • Create Webhook Events • Test Your Bot! Agenda (Build a Spark Bot)
  70. 70. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public • Cisco Spark API Account: https://developer.ciscospark.com/ • Create Cloud9 Account: http://c9.io • JSON Viewer: http://tiny.cc/json-viewer • C9 Alternative (local tunnels): Localtunnel.me or ngrok.com What You Will Need: DEVNET-1056 72
  71. 71. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Objective DEVNET-1056 73
  72. 72. What are Chat Bots?
  73. 73. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Clippy! DEVNET-1056 75
  74. 74. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
  75. 75. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
  76. 76. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
  77. 77. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 79
  78. 78. What are the Benefits?
  79. 79. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 81
  80. 80. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 82
  81. 81. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 83
  82. 82. Integrations vs Bots
  83. 83. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public An integration acts as YOU and can see and do the things you can do. DEVNET-1056 85
  84. 84. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 86
  85. 85. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 87
  86. 86. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public A bot appears as another member of the room, but can only see messages that mention it. DEVNET-1056 88
  87. 87. Getting Started with a Collaboration API
  88. 88. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Have 2 things open in your browser: 1. web.ciscospark.com 2. Developer.ciscospark.com
  89. 89. Creating a Chat Bot
  90. 90. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Click on “My Apps” and Add New (+) DEVNET-1056 92
  91. 91. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Select ”Create a Bot” DEVNET-1056 93
  92. 92. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Add a Bot Image http://bit.ly/SparkBot-512x512 DEVNET-1056 94
  93. 93. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 95
  94. 94. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Copy API Access Token DEVNET-1056 96
  95. 95. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Copy API Access Token DEVNET-1056 97
  96. 96. Deploy a bot on Cloud9
  97. 97. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public c9.io/signup DEVNET-1056 99
  98. 98. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 100
  99. 99. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public A closer look at the Github URL: https://github.com/CiscoDevNet/node-sparkbot- samples. DEVNET-1056 101
  100. 100. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
  101. 101. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Install Node.js in Cloud9 • In Cloud9, look at the shell terminal at the bottom. • Type: “npm install” – The nodejs libraries used by our code sample get downloaded to your Cloud9 Workspace • Now go to helloworld.js under “examples” • Click “Run” at the top DEVNET-1056 103
  102. 102. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Create Variables • Click the ENV button at the bottom right of the Cloud9 Terminal • Create two variables: NAME VALUE DEBUG sparkbot SPARK_TOKEN yourtokenkeyhere DEVNET-1056 104
  103. 103. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public
  104. 104. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Make Your Application Public to Share DEVNET-1056 106
  105. 105. Create Webhook events
  106. 106. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco PublicDEVNET-1056 108
  107. 107. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Create Cisco Spark Webhooks
  108. 108. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 200 Success! • Click “Run” • See a “200/success” displayed – webhook assigned to unique identifier • Fired off every time a new message is added to a room your bot is a member of DEVNET-1056 110
  109. 109. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Create Another Webhook • Receive an event every time our bot is added to a room • Modify “resource” field: replace “messages” with “memberships” • Click “Run” again • See a ”200 / success” message! DEVNET-1056 111
  110. 110. Test your Cisco Spark Bot
  111. 111. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Test Bots Response – type /hello DEVNET-1056 113
  112. 112. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Mention your bot in Group rooms
  113. 113. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Type /hello to test Group chat with bot DEVNET-1056 115
  114. 114. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Go Further? • Add a few breakpoints in helloworld.js, restart in debug mode • Add some commands. Find samples here: https://github.com/CiscoDevNet/node-sparkbot-samples • Note: Lots of nodejs bot frameworks exist for Cisco Spark, from basic to advanced in various languages. DEVNET-1056 116
  115. 115. © 2017 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 • Please complete your Online Session Evaluations after each session • Complete 4 Session Evaluations & the Overall Conference Evaluation (available from Thursday) to receive your Cisco Live T-shirt • All surveys can be completed via the Cisco Live Mobile App or the Communication Stations DEVNET-1056 117
  116. 116. © 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public Continue Your Education • Demos in the Cisco campus • Walk-in Self-Paced Labs • Lunch & Learn • Meet the Engineer 1:1 meetings • Related sessions DEVNET-1056 118
  117. 117. Thank You

×