SlideShare a Scribd company logo
Find the content here: http://bit.do/spark-bot
Find the slides here: http://tiny.cc/sparkbot
Follow me on Twitter and/or tweet at me. @tessamero
By Tessa Mero
Building Chatbots with
JavaScript
SUMMARY
• Who Am I?
• 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!
What You Will Need
• 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
Objective
Who is Tessa?
* Developer Evangelist
* Teacher
* Open Source Contributor
* Community Leader
* Mother
What are Chat Bots?
Clippy!
Chatbots
Chatbots
Chatbots
Chatbots
What are the Benefits?
Chatbots
Chatbots
Chatbots
Integrations vs Bots
An integration acts as YOU
and can see and do
the things you can do.
Chatbots
Chatbots
A bot appears as another
member of the room, but
can only see messages
that mention it.
Getting Started with a
Collaboration API
Chatbots
In this case, we will use Cisco Spark
API:
https://developer.ciscospark.com/
Then Log In!
Create an Account on the API website
https://web.ciscospark.com/
Create an Account on the Spark website
Creating a Chat Bot
Click on “My Apps” and Add New (+)
Select ”Create a Bot”
Add a Bot Image
http://bit.ly/sparkicon
Chatbots
Copy API Access Token
Add Your Bot into a Chat Room
Deploy a bot on Cloud9
c9.io/signup
Chatbots
A closer look at the Github URL:
https://github.com/CiscoDevNet/node-
sparkbot-samples
Chatbots
Install Node.js in Cloud9
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
helloworld.js
Create Variables
• Click the ENV button at the bottom right of the Cloud9
Terminal
• Create two variables:
NAME VALUE
DEBUG sparkbot
SPARK_TOKEN yourtokenkeyhere
Variables!
Make Your Application Public to Share
Create Webhook events
Create Cisco Spark Webhooks
https://developer.ciscospark.com/endpoint-webhooks-post.html
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
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!
Test your Cisco Spark Bot
Test Bots Response – type /hello
Mention your bot in Group rooms
Type /hello to test Group chat with bot
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.
Thank You
@tessamero
Learning Lab: http://bit.do/spark-bot
Slides: http://tiny.cc/sparkbot

More Related Content

PPTX
Building Chatbots
PPTX
Let's Build a Chatbot
PPTX
DeveloperWeek2018 - Let's Build a Chatbot
PPTX
Nom Nom: Consuming REST APIs
PDF
Host Line Bot with Golang
PPT
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
PDF
Gopher Taiwan Gathering #16: Build a smart bot via Golang
PDF
SydJS.com
Building Chatbots
Let's Build a Chatbot
DeveloperWeek2018 - Let's Build a Chatbot
Nom Nom: Consuming REST APIs
Host Line Bot with Golang
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Gopher Taiwan Gathering #16: Build a smart bot via Golang
SydJS.com

What's hot (20)

PDF
Experiences building apps with React Native @UtrechtJS May 2016
PPTX
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
PDF
Succeeding with FOSS!
PDF
Introduction to Meteor - Worldwide Meteor Day
PDF
Intro to react native
PPTX
React Native
PDF
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
PDF
From zero to hero with React Native!
KEY
Natural Language UI Testing using Behavior Driven Development with Pavlov and...
PDF
Building mobile apps with PhoneGap and Backbone
PDF
Using the GitHub App to Connect to Bitbucket
PDF
Microservices for the Masses with Spring Boot, JHipster, and JWT - J-Spring 2017
PDF
Troubleshooting EC2- Linux Server Configuration
PDF
WordPress 4.4 and Beyond
PDF
Identifying and solving enterprise problems
PDF
Strategies for securing your banks & enterprises (from someone who robs bank...
PPTX
React Native - Why Designers should use React native. And everyone else too.
PPT
Opening the mobile web mozilla and firefox os-chit thiri maung
PDF
Improving Dashboards with open content sharing
PDF
An iOS Developer's Perspective on React Native
Experiences building apps with React Native @UtrechtJS May 2016
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
Succeeding with FOSS!
Introduction to Meteor - Worldwide Meteor Day
Intro to react native
React Native
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
From zero to hero with React Native!
Natural Language UI Testing using Behavior Driven Development with Pavlov and...
Building mobile apps with PhoneGap and Backbone
Using the GitHub App to Connect to Bitbucket
Microservices for the Masses with Spring Boot, JHipster, and JWT - J-Spring 2017
Troubleshooting EC2- Linux Server Configuration
WordPress 4.4 and Beyond
Identifying and solving enterprise problems
Strategies for securing your banks & enterprises (from someone who robs bank...
React Native - Why Designers should use React native. And everyone else too.
Opening the mobile web mozilla and firefox os-chit thiri maung
Improving Dashboards with open content sharing
An iOS Developer's Perspective on React Native
Ad

Similar to Chatbots (20)

PDF
Build advanced chat bots - Steve Sfartz - Codemotion Amsterdam 2017
PPTX
Chatbots Workshop SF JS Meetup May 2018
PPTX
Cisco Spark the Industry Challenge
PDF
Building advanced Chats Bots and Voice Interactive Assistants - Stève Sfartz ...
PPTX
Rome 2017: Building advanced voice assistants and chat bots
PPTX
Breizhcamp: Créer un bot, pas si simple. Faisons le point.
PDF
Future of the Web with Conversational Interface
PDF
Building a slackbot
PPTX
Embedding Messages and Video Calls in your apps
PPTX
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
PDF
How to Build a Serverless Chatbot for $0?
PDF
Chat Bots and how to build a Slack bot
PPTX
Cisco Connect 2018 Indonesia - Build a spark bot
PPTX
Build your first Chatbot
DOCX
Ct bot tutorial
PDF
[2019 Serverless Summit] Building Serverless Slack Chatbot on IBM Cloud Func...
PDF
Writing a slack chatbot mxlos
PDF
Building Enterprise Chat Bots
PDF
How to build a Chatbot with Google's Dialogflow
PPTX
How to build a slack bot
Build advanced chat bots - Steve Sfartz - Codemotion Amsterdam 2017
Chatbots Workshop SF JS Meetup May 2018
Cisco Spark the Industry Challenge
Building advanced Chats Bots and Voice Interactive Assistants - Stève Sfartz ...
Rome 2017: Building advanced voice assistants and chat bots
Breizhcamp: Créer un bot, pas si simple. Faisons le point.
Future of the Web with Conversational Interface
Building a slackbot
Embedding Messages and Video Calls in your apps
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
How to Build a Serverless Chatbot for $0?
Chat Bots and how to build a Slack bot
Cisco Connect 2018 Indonesia - Build a spark bot
Build your first Chatbot
Ct bot tutorial
[2019 Serverless Summit] Building Serverless Slack Chatbot on IBM Cloud Func...
Writing a slack chatbot mxlos
Building Enterprise Chat Bots
How to build a Chatbot with Google's Dialogflow
How to build a slack bot
Ad

More from Tessa Mero (20)

PDF
Developer relations KPIs
PDF
Getting into the tech field. what next
PDF
5 ways to simply add media accessibility (m16y) to your jamstack app
PDF
I'm Graduating Soon. Help! How Do I Get into the Tech Field?
PDF
Optimize media performance in wordpress with cloudinary
PDF
Joining a developer experts program to leverage your career
PDF
Finding the Jelly in the JAMstack
PDF
Building APIs the serverless way
PDF
Don't let FaaS do a BaaS job
PDF
Finding the jelly in the jam stack
PPTX
ChatOps Workshop
PPTX
Cisco CMX Location Services
PPTX
Learn to Code with JavaScript - Choose Your Own Adventures
PPTX
Revolutionize Your Workflow with ChatOps
PPTX
DevNet 1056 WIT Spark API and Chat Bot Workshop
PPTX
Understanding REST APIs in 5 Simple Steps
PPTX
Understanding REST APIs in 5 Simple Steps
PPTX
Nom Nom: Consuming REST APIs
PPT
Leading an open source project oscon2016
PPT
Leading anopensourceproject oscon2016
Developer relations KPIs
Getting into the tech field. what next
5 ways to simply add media accessibility (m16y) to your jamstack app
I'm Graduating Soon. Help! How Do I Get into the Tech Field?
Optimize media performance in wordpress with cloudinary
Joining a developer experts program to leverage your career
Finding the Jelly in the JAMstack
Building APIs the serverless way
Don't let FaaS do a BaaS job
Finding the jelly in the jam stack
ChatOps Workshop
Cisco CMX Location Services
Learn to Code with JavaScript - Choose Your Own Adventures
Revolutionize Your Workflow with ChatOps
DevNet 1056 WIT Spark API and Chat Bot Workshop
Understanding REST APIs in 5 Simple Steps
Understanding REST APIs in 5 Simple Steps
Nom Nom: Consuming REST APIs
Leading an open source project oscon2016
Leading anopensourceproject oscon2016

Recently uploaded (20)

PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Advanced IT Governance
PPTX
Cloud computing and distributed systems.
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
PPTX
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Modernizing your data center with Dell and AMD
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Network Security Unit 5.pdf for BCA BBA.
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
MYSQL Presentation for SQL database connectivity
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Advanced IT Governance
Cloud computing and distributed systems.
Understanding_Digital_Forensics_Presentation.pptx
Advanced methodologies resolving dimensionality complications for autism neur...
The Rise and Fall of 3GPP – Time for a Sabbatical?
Per capita expenditure prediction using model stacking based on satellite ima...
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
solutions_manual_-_materials___processing_in_manufacturing__demargo_.pdf
breach-and-attack-simulation-cybersecurity-india-chennai-defenderrabbit-2025....
Dropbox Q2 2025 Financial Results & Investor Presentation
Modernizing your data center with Dell and AMD
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows

Chatbots

Editor's Notes

  • #5: This will be the final of what we will see. The Hello World Bot. ToDo: switch out image to one that says Hello Tessa Mero
  • #8: Bot assistance preinstalled in Windows versions from 1997 to 2003.
  • #9: Talk about Siri as a bot
  • #10: Amazon echo as a bot
  • #11: Amazon Alexa integrating with the Tesla Model S. Make commands to make other things do things. Jason Geocke from Cisco doing this integration.
  • #12: Chat bots are becoming more popular and will become the future of technology. * Use Case: Customer service interactions. The bot is an AI to grab information and package it and put it in front of a human to finish the interaction.
  • #14: “I’ve analyzed the Silicon Valley Bot Startup trend and created a handy venn diagram to help explain it” Bots are designed to solve a problem you have in your work flow or business.
  • #15: You can create or use existing plugins to extend your chat bot to do things. Such as the SmartSheet (which is a competitor of google spreadsheets), to send notifications when there is a change in your spreadsheet. It also lists the commands you can make to trigger activities. Mention Spark Innovation Fund?
  • #16: In our company Spark Chats, we have a room with a MemeBot that one of my colleagues created. You type a few words, followed by the name of the meme to trigger it, and the bot will create a meme. (There’s an API for retrieving meme images and overlaying the text).
  • #18: A bot can do things as itself. It has its own account and authentication. If you do an integration, it’s going to complete tasks as YOU.
  • #19: For example, the Out of Office Assistant integration. It lists the requests you can do with it.
  • #20: In the Spark API scope, you can see the different levels of access that your integration can require. You can find all of this in the API documentation. We also have a collection of POSTMAN calls. Just ask us later for more information.
  • #21: In this way, it’s its own entity, which is an authentication on your account.
  • #23: Go to developer.ciscospark.com and click on Sign Up on the far right top corner.
  • #25: Make sure you have both tabs open since you’ll be alternating between the web application and your developer account.
  • #27: Log in at “Spark for Developers” and open the "My Apps" menu.
  • #28: You will access the “New Bot” creation form below. Fill in a name, a unique email identifier, and specify a publicly accessible image URL with a minimal resolution of 512x512 pixels. Feel free to pick this image example for the sake of this lab. (http://bit.ly/SparkBot-512x512) Note that you will not be authorized to pick the email "my-awesome-bot@sparkbot.io" as it is already reserved. Make sure to replace future mentions to the bot email you have chosen.
  • #29: Give people some time to type this URL in or find their own bot picture they want to use
  • #30: Click “Add Bot” to get your Cisco Spark Bot created. Your Bot's access token is displayed. Paste it in a safe place as it won’t show up again, and we will use it in steps 2 and 3 of this lab. Note that a Cisco Spark Bot access token lasts 100 years. If you ever loose or reveal it, you can come back to this Bot details page and regenerate an access token. The previously issued token will be automatically deprecated.
  • #31: Your bot can now be added to any Cisco Spark Room by specifying its email: my-awesome-bot@sparkbot.io in our example. Go to your Cisco Spark client, and create a new room with your Bot as a participant.
  • #32: Go into your Spark app. You can now add your bot to the chat. Even though you can chat with your bot, you won’t see him answer... as we haven’t connected it yet to any custom code logic. We’ll work on this in the next steps.
  • #34: For the sake of this lab, we will clone an existing code sample, and leverage the Cloud9 platform to deploy our own version of a Cisco Spark bot. Sign up at https://c9.io/signup. Create a new private Workspace. Make sure to create it as private so that the access token - we will set later - does not get disclosed. Fill in the "Clone from Git" field with the URL of our code sample: https://github.com/CiscoDevNet/node-sparkbot-samples. Make sure to pick the Node.js template, and click "Create worspace".
  • #35: Fill out the form to create your first workspace. Create your workspace name, description. Set it to private, and enter the Github URL. (Closer look at the URL on the next slide). Now click on “Create Workspace”
  • #37: After a minute, your workspace will be ready to use. Congrats, You now have at hand a fully functional nodejs development environment with your own copy of a Cisco Spark Bot!
  • #38: Go to the shell terminal at the bottom of the IDE, and type “npm install”. The nodejs libraries used by our code sample get downloaded to your Cloud9 workspace. Now click on Enter
  • #39: In the File Explorer, look for the “helloworld.js” file in the “examples” directory. Double click the file to make it the current editable source code in your workspace. Now click the "Run" button in the top menu to launch an instance of your code. The Cloud9 console displays an error, as we have not specified the Cisco Spark identity under which our code should run. Now comes time to configure our bot.
  • #40: In the File Explorer, look for the “helloworld.js” file in the “examples” directory. Double click the file to make it the current editable source code in your workspace. Now click the "Run" button in the top menu to launch an instance of your code. The Cloud9 console displays an error, as we have not specified the Cisco Spark identity under which our code should run. Now comes time to configure our bot.
  • #41: Click the ENV button at the bottom right of the Cloud9 terminal, and create two variables: DEBUG with "sparkbot*" as a value: this variable activates logs, SPARK_TOKEN with your bot’s token value: paste the token generated in step 1.
  • #42: Finally, click on the wheel to restart your bot, and check your logs look similar to the snapshot below.
  • #43: As we created our Cloud9 workspace as private, we will now need to take an extra step to make our bot accessible from Cisco Spark. Click on the "Share" link in the upper right corner, close to your avatar. As the popup shows up, click the "Public" checkbox facing the "Application" links to share. Click Yes when the pop up appears.
  • #44: In this section, we will create REST Webhooks so that our bot starts receiving traffic from Cisco Spark. 
  • #45: Every API has an API reference, and there you can find the Webhooks guide. Go to the developer portal and find the API reference to the left and click on Create a webhook.
  • #46: Open the list of Webhooks supported by Cisco Spark, and look for the event entries needed by your bot: Messages / Created: a new message got posted into a room Memberships / Created: someone joined a room that you are in Click on the Webhooks entry in the API Reference section on the left, and select the “Post” method. This will drive you to the Create a Webhook form. Fill in the fields as shown in the screenshot: Authorization header: change the access token to your bot’s, and do NOT remove the "Bearer " prefix, targetUrl: paste the public URL of your bot on Cloud9, resource and event: make sure to fill in the “messages” and “created” values, as it is only default placeholders you see in the form, last fields “Secret” and “Filter” are optional. Leave them blank.
  • #47: Then click “Run” and check the response in the right panel. As your Cisco Spark API call completes successfully, you will see a green “200/success” displayed, and your Webhook will be assigned a unique identifier (check the “id” field). This webhook is fired every time a new message is added to a Cisco Spark room your bot is a member of. Now, let's create our second Webhook, in order to receive an event every time our bot is added to a room. On the same form, modify the value of the "resource" field: replace “messages” with “memberships”. Click “Run” again, and check your second Webhook got successfully created, with the “200 / success” message. Then click “Run” and check the response in the right panel. As your Cisco Spark API call completes successfully, you will see a green “200/success” displayed, and your Webhook will be assigned a unique identifier (check the “id” field). This webhook is fired every time a new message is added to a Cisco Spark room your bot is a member of.
  • #48: Now, let's create our second Webhook, in order to receive an event every time our bot is added to a room. On the same form, modify the value of the "resource" field: replace “messages” with “memberships”. Click “Run” again, and check your second Webhook got successfully created, with the “200 / success” message.
  • #49: In the previous steps, you deployed a Cisco Spark bot sample on Cloud9, launched a new instance under the identity of the Bot Account you created, and created Webhooks to start receiving events at your bot public URL on Cloud9. Now comes time to chat with your bot.
  • #50: Reach to the Cisco Spark room you created in step 1. Enter /hello. Check your bot's response!
  • #51: As introduced in previous labs, Cisco Spark Bots MUST be mentioned in “Group” rooms in order to be notified. Open the “Create a Room” form. Fill in the form with a title. Do NOT modify the token in the Authorization header, so that the room gets created under your personal Cisco Spark identity. Check the result is a "200/success", and the room type is set to “Group”. As you're the only participant in the room for now, Cisco Spark created a "Group" room to let you add participants later.
  • #52: Now, open your favorite Cisco Spark client, and reach to the newly created room. Invite your bot to the conversation by adding it as a participant, with the email address you created in step 1. Type /hello. You do not get any answer as your bot is not mentioned. Now mention your bot... and what for its answer!
  • #53: What about extending your bot! If you have a fully functional development environment at your disposal, we suggest you start by adding a few breakpoints in your bot main file "helloworld.js", and restart your bot in debug mode. Then, you'll want to add some commands of your own. If you’re looking for some inspiration, take a look at these examples. For the sake of this lab, we leveraged a nodejs bot framework that hides most of the complexity of listening to messages and taking action as commands are fired. Note that several other nodejs Bot frameworks exist for Cisco Spark, from basic to advanced and in various languages. As an example, Nick Marus’s flint framework is a nodejs bot framework that embeds interesting features such as automated creation of the Webhooks required by your bot... certainly worth a try...
  • #54: Questions?