devnet 1056 wit spark api and chat bot workshop

Intro to Sparkan introduction to REST APIs and Creating Spark Bots

Adrienne Moherek and Tessa MeroDEVNET-1056

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

• 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)

DEVNET-1056

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

• 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)

DEVNET-1056 4


Who Are We?

DEVNET-1056 5


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


What is an API?

7Presentation ID

© 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”


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)


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


Why APIs?

12Presentation ID


Why are API’s so important?


API Growth from 2000 to 2016

2000 2005 2007 2009 2011 2013 2015 20160

5000

10000

15000

20000

25000

30000

35000API's

API's

Source: 2016 data from nordicapis.com. 2005-2015 data from rubenverborgh.github.io and 2000-2004 data from blog.cutter.com


The API is the User Interface for software systems

15Presentation ID


APIs are sets of requirements that govern how one application can talk to another.

16Presentation ID


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.


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.


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

© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 20Presentation ID

-- Programmable Web

APIs are often referred to as “an engine of innovation.”


Web Pages, Requests, Response & REST APIs

21Presentation ID


View a Web Page

Presentation ID


View a Web Page

Presentation ID

Request GET /index.htm HTTP/1.1

ResponseHTTP 200 OK

<html>


Good• 200 OK• 201 Created• 204 No Content

Common HTTP Status CodesBad• 400 Bad Request• 403 Forbidden• 404 Not Found• 500 Internal Server

Error• 550 Permission

Denied


REST APIs use Request and Response to


Get Data using an API

Presentation ID


Get Data using an API

Presentation ID

Request GET /rooms

ResponseHTTP 200 OK

{json data}

API Consumer API Provider


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

© 2017 Cisco and/or its affiliates. All rights reserved. Cisco Public 29DEVNET-1056

Methods


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


Setup with Spark

31DEVNET-1056


Let’s get your computer setup1. Create an account with Spark - https://web.ciscospark.com

2. Login to the Spark app - https://web.ciscospark.com ORDownload 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)

DEVNET-1056

https://web.ciscospark.com/



https://www.ciscospark.com/downloads.html

https://www.ciscospark.com/downloads.html

https://developer.ciscospark.com/



Cisco Spark for DevelopersTour of Cisco Spark APIs

33DEVNET-1056


Cisco Spark

Secure & Open

Complete & Simple

Spark for DevelopersUser Integrations, APIs/SDKs, etc.

Spark Hybrid ServicesCloud + Prem

Partner ServicesInterconnect

Message Meeting Call

DEVNET-1056


‘Your App’ now with

Cisco Collab!

Spark APIs Extend Cisco Collaboration Cloud

GET

POST

DELETE

PUT /Rooms

/Memberships

/Messages

/Teams

/People

/Webhooks

DEVNET-1056


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


Demo: List Rooms


View your Spark roomsIf this is your first time using Spark, you will only see 1 Spark room

1. What is the name of the room?

DEVNET-1056





My Software System



List Spark Rooms

Presentation ID

Request GET /rooms

ResponseHTTP 200 OK

{json data}



1. Login to Spark Developer Docshttps://developer.ciscospark.com


2. Click on Documentationhttps://developer.ciscospark.com


3. Click on Rooms and then click on List Roomshttps://developer.ciscospark.com


4. Turn on Test Modehttps://developer.ciscospark.com


Method URL

Response


5. Click on runhttps://developer.ciscospark.com


Method URL

Response


Demo: Create a room


Create a Spark roomLet’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

DEVNET-1056





My Software System



Create a New Room

Presentation ID

Request POST /rooms

ResponseHTTP 200 OK

{json data}



MethodURL

Response


Did it work? Go to the Spark app and see!https://web.ciscospark.com


Add people to your room


Try to add yourself to your room What happened?

Add your neighbor to your roomWhat happened

Challenge: List memberships for room


Cisco Spark for DevelopersSpark API calls in Python


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


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


Using Postman to make API request

63DEVNET-1056


http://getpostman.com• Want to code along? Install POSTMAN now• Free tool to forge API requests, examine responses

DEVNET-1056


Same API Call in

POSTMAN


method

url

requestheaders

status code

response headers

content-type

responsebody

query parameters


Find your Spark Developer TokenLogin to developer.ciscospark.com

Copy Developer Token

Developer Token


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

http://www.jsonlint.com/


Q & A

DEVNET-1056 69


Build a Spark Bot


• 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)

DEVNET-1056 71


• 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



http://c9.io/

http://tiny.cc/json-viewer

http://tiny.cc/json-viewer


Objective

DEVNET-1056


What are Chat Bots?


Clippy!

DEVNET-1056


What are the Benefits?


Integrations vs Bots


An integration acts as YOU and can see and do

the things you can do.

DEVNET-1056 85


A bot appears as another member of the room, but can only see messages

that mention it.

DEVNET-1056 88


Getting Started with a Collaboration API


Have 2 things open in your browser:

1. web.ciscospark.com

2. Developer.ciscospark.com


Creating a Chat Bot

91DEVNET-1056


Click on “My Apps” and Add New (+)

DEVNET-1056 92


Select ”Create a Bot”

DEVNET-1056 93


Add a Bot Image

http://bit.ly/SparkBot-512x512

DEVNET-1056 94


Copy API Access Token

DEVNET-1056 96


Copy API Access Token

DEVNET-1056 97


Deploy a bot on Cloud9


c9.io/signup

DEVNET-1056 99


A closer look at the Github URL:

https://github.com/CiscoDevNet/node-sparkbot-samples.

DEVNET-1056 101

https://github.com/CiscoDevNet/node-sparkbot-samples

https://github.com/CiscoDevNet/node-sparkbot-samples


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


Create Variables• Click the ENV button at the bottom right of the Cloud9

Terminal

• Create two variables:NAME VALUE

DEBUG sparkbotSPARK_TOKEN yourtokenkeyhere

DEVNET-1056 104


Make Your Application Public to Share

DEVNET-1056 106


Create Webhook events

107DEVNET-1056


Create Cisco Spark Webhooks


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


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


Test your Cisco Spark Bot

112DEVNET-1056


Test Bots Response – type /hello

DEVNET-1056 113


Mention your bot in Group rooms


Type /hello to test Group chat with bot

DEVNET-1056 115


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


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

117DEVNET-1056

http://ciscolive.com/Online


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

Thank You


devnet 1056 wit spark api and chat bot workshop

Technology