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

• 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

• 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

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

35000API'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

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

4. Users sees diff of users on

team and in room

Cisco Spark

3. My App Compares

members of a room with team

members

Methods

What is so great about REST?

• 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

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

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

DELETE

DELETE DELETE DELETE

PUT PUT

POST POST POST

GET GET GET

GET GET

GET GETGET

DELETE

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

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

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

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

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

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

DEVNET-1106Upcoming Services in OpenStack

DEVNET-1191BGP Enabled Application Development

World Expo 2010 - Devnet

DEVNET-1165Intercloud Federation Model

Primicias 1056

Introduction to the DevNet Sandbox

DEVNET-1166Open SDN Controller APIs

DEVNET-1130Cisco Finesse API's

DEVNET-1114Automated Management Using SDN/NFV

DEVNET-1139Microservices Case Study

Devnet hospital management system

DEVNET-1163Data in Motion APIs

DevNet UX Creative Design 101 workshop

System Administration Guide, v10.3 - Logi DevNet

DEVNET-1180Security from the Cloud

WIT.3001.001.0938 Rrcfv.archive.royalcommission.vic.gov.au/CustomData/...WIT.3001.001.0946_R WIT.3001.001.0947_R WIT.3001.001.0948_R WIT.3001.001.0949_R WIT.3001.001.0950_R human services

DEVNET-1151DevNet Sandbox 101

EDICION 1056

DevNet 2016 - Victoria University of Wellington · 2016-12-04 · DevNet Conference Pacific Currents, Global Tides DevNet 2016 W1A – ‘West Papua Panel’ Convenors: Pala Molisa

DEVNET-1155Branch Virtualization