Download - Chatbots
![Page 1: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/1.jpg)
February 2017 – Seattle JS MeetupFind the content here: http://bit.do/spark-bot
Follow me on Twitter and/or tweet at me. @tessamero
By Tessa Mero
Building Chatbots using JavaScript
![Page 2: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/2.jpg)
2© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
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!
![Page 3: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/3.jpg)
3© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
What You Will Need• Cisco Spark API Account: https://developer.ciscospark.com/• Create Cloud9 Account: http://c9.io• [optional] JSON Viewer: https://
chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
![Page 4: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/4.jpg)
4© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Objective
![Page 5: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/5.jpg)
5© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Who is Tessa?
* Developer Evangelist* Teacher* Open Source Contributor* Community Leader* Mother
![Page 6: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/6.jpg)
6© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
What are Chat Bots?
![Page 7: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/7.jpg)
7© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Clippy!
![Page 8: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/8.jpg)
8© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 9: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/9.jpg)
9© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 10: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/10.jpg)
10© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 11: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/11.jpg)
11© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 12: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/12.jpg)
12© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
What are the Benefits?
![Page 13: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/13.jpg)
13© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 14: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/14.jpg)
14© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 15: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/15.jpg)
15© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 16: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/16.jpg)
16© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Integrations vs Bots
![Page 17: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/17.jpg)
17© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
An integration acts as YOU and can see and do
the things you can do.
![Page 18: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/18.jpg)
18© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 19: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/19.jpg)
19© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 20: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/20.jpg)
20© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
A bot appears as another member of the room, but can only see messages
that mention it.
![Page 21: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/21.jpg)
21© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Getting Started with a Collaboration API
![Page 22: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/22.jpg)
22© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 23: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/23.jpg)
23© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
In this case, we will use Cisco Spark API:https://developer.ciscospark.com/
Then Log In!
Create an Account on the API website
![Page 24: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/24.jpg)
24© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
https://web.ciscospark.com/
Create an Account on the Spark website
![Page 25: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/25.jpg)
25© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Creating a Chat Bot
![Page 26: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/26.jpg)
26© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Click on “My Apps” and Add New (+)
![Page 27: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/27.jpg)
27© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Select ”Create a Bot”
![Page 28: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/28.jpg)
28© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Add a Bot Image
http://bit.ly/SparkBot-512x512
![Page 29: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/29.jpg)
29© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 30: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/30.jpg)
30© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Copy API Access Token
![Page 31: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/31.jpg)
31© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Copy API Access Token
![Page 32: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/32.jpg)
32© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Deploy a bot on Cloud9
![Page 33: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/33.jpg)
33© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
c9.io/signup
![Page 34: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/34.jpg)
34© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 35: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/35.jpg)
35© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
A closer look at the Github URL:
https://github.com/CiscoDevNet/node-sparkbot-samples.
![Page 36: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/36.jpg)
36© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 37: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/37.jpg)
37© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
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
![Page 38: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/38.jpg)
38© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Create Variables• Click the ENV button at the bottom right of the Cloud9
Terminal
• Create two variables:NAME VALUE
DEBUG sparkbotSPARK_TOKEN yourtokenkeyhere
![Page 39: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/39.jpg)
39© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 40: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/40.jpg)
40© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Make Your Application Public to Share
![Page 41: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/41.jpg)
41© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Create Webhook events
![Page 42: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/42.jpg)
42© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
![Page 43: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/43.jpg)
43© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Create Cisco Spark Webhooks
![Page 44: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/44.jpg)
44© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
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
![Page 45: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/45.jpg)
45© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
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!
![Page 46: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/46.jpg)
46© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Test your Cisco Spark Bot
![Page 47: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/47.jpg)
47© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Test Bots Response – type /hello
![Page 48: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/48.jpg)
48© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Mention your bot in Group rooms
![Page 49: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/49.jpg)
49© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Type /hello to test Group chat with bot
![Page 50: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/50.jpg)
50© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
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.
![Page 51: Chatbots](https://reader036.vdocuments.us/reader036/viewer/2022070523/58ed86511a28ab587f8b465d/html5/thumbnails/51.jpg)
51© 2016 Cisco and/or its affiliates. All rights reserved. Cisco Confidential
Thank You
@tessamero@auhyland
http://bit.do/spark-bot