Download to read offline
![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](https://image.slidesharecdn.com/buildingchatbotswithjs-170206214012/75/Building-Chatbots-3-2048.jpg)
Uploaded byTessa Mero
Building Chatbots
- This document provides instructions for building a basic chat bot using the Cisco Spark API and deploying it on Cloud9. It discusses what chat bots are and their benefits. It then walks through setting up a Cisco Spark account, creating a bot profile, deploying the bot code to Cloud9, adding webhook events to trigger the bot, and testing the bot responses.
More Related Content
![[2019 Serverless Summit] Building Serverless Slack Chatbot on IBM Cloud Func...](https://cdn.slidesharecdn.com/ss_thumbnails/2019ibmserverlesschatbot-190726190247-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Building Chatbots
- 1. January 2017 –NYC Ports & Logistics Hackathon Find the content here: http://bit.do/spark-bot Follow us on Twitter and/or tweet at me. @tessamero and @auhyland By Tessa Mero and Austin Hyland Building Chat Bots Made Easy
- 2. SUMMARY • Who AreWe? • 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!
- 3. What You WillNeed • 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
- 4.
- 5. Who is Tessa? *Developer Evangelist * Teacher * Open Source Contributor * Community Leader * Mother
- 6. Who is Austin? *Developer Evangelist * Technologist * Problem Solver * Teacher * Connector
- 7. What are ChatBots?
- 8.
- 13. What are theBenefits?
- 17.
- 18. An integration actsas YOU and can see and do the things you can do.
- 21. A bot appearsas another member of the room, but can only see messages that mention it.
- 22. Getting Started witha Collaboration API
- 24. In this case,we will use Cisco Spark API: https://developer.ciscospark.com/ Then Log In! Create an Account on the API website
- 25.
- 26.
- 27. Click on “MyApps” and Add New (+)
- 28. Select ”Create aBot”
- 29. Add a BotImage http://bit.ly/SparkBot-512x512
- 31. Copy API AccessToken
- 32. Copy API AccessToken
- 33. Deploy a boton Cloud9
- 34.
- 36. A closer lookat the Github URL: https://github.com/CiscoDevNet/node- sparkbot-samples.
- 38. Install Node.js inCloud9 • 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
- 39. Create Variables • Clickthe ENV button at the bottom right of the Cloud9 Terminal • Create two variables: • DEBUG || sparkbot • SPARK_TOKEN || yourtokenkey
- 41. Make Your ApplicationPublic to Share
- 42.
- 44. Create Cisco SparkWebhooks
- 45. 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
- 46. 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!
- 47. Test your CiscoSpark Bot
- 48. Test Bots Response– type /hello
- 49. Mention your botin Group rooms
- 50. Type /hello totest Group chat with bot
- 51. Go Further? • Adda 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.
- 52.
Editor's Notes
- #2 We will build a hello world bot using Node.js and the Cisco Spark API
- #3 Other Notes: Removed “Create on localhost and make available on the internet” to “use cloud 9”
- #4 To Do: add link to install node.js, create short link for JSON Viewer Other Notes: removed “Install LocalTunnel or Ngrok: http://localtunnel.me/ http://ngrok.com” and added cloud 9 account
- #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
- #9 Bot assistance preinstalled in Windows versions from 1997 to 2003.
- #10 Talk about Siri as a bot
- #11 Amazon echo as a bot
- #12 Amazon Alexa integrating with the Tesla Model S. Make commands to make other things do things. Jason Geocke from Cisco doing this integration.
- #13 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.
- #15 “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.
- #16 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?
- #17 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).
- #19 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.
- #20 For example, the Out of Office Assistant integration. It lists the requests you can do with it.
- #21 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.
- #22 In this way, it’s its own entity, which is an authentication on your account.
- #24 Go to developer.ciscospark.com and click on Sign Up on the far right top corner.
- #25 ToDo: Confirm if you need to log in after creating an account
- #26 Add another slide here. Explain webhook architectural
- #28 Log in at “Spark for Developers” and open the "My Apps" menu.
- #29 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.
- #30 Give people some time to type this URL in or find their own bot picture they want to use
- #31 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.
- #32 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.
- #33 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.
- #35 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".
- #36 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”
- #38 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!
- #39 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. 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 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.
- #41 Finally, click on the wheel to restart your bot, and check your logs look similar to the snapshot below.
- #42 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.
- #43 In this section, we will create REST Webhooks so that our bot starts receiving traffic from Cisco Spark.
- #44 Look for your bot public URL in the Cloud9 terminal. It appears run after the mention "Your code is running at ", and is formatted as: https://replace-with-your-cloud9-project-name.c9users.io/. Open your bot public URL. Note that the snapshot you see leverages the Chrome plugin “JSON viewer” as mentioned in the pre-requisites. If you look attentively to the JSON data above, you will see your bot is running under the Cisco Spark Identity of the Bot Account you created earlier. Moreover, the “listeners” section lists the events your bot can take action on.
- #45 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.
- #46 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.
- #47 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.
- #48 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.
- #49 Reach to the Cisco Spark room you created in step 1. Enter /hello. Check your bot's response!
- #50 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.
- #51 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!
- #52 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...
- #53 Questions?