General Assembly

Slack Bot Lab

Wilson Espina

Review

What did we do last lesson?

Slack Bot Lab

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Install and configure all utilities needed to build a bot using the Hubot framework
  • Write scripts that allow your bot to interact with users of the class Slack workspace

Slack Bot Lab

Agenda

  • Work with nested data structure
  • Install and configure Slack Bot utilities and accounts
  • Explore sample code for bots
  • Plan what you’d like your bot to do
  • Create a basic bot to verify that your setup works
  • Expand on your basic code to add your planned functionality

Slack Bot Lab

Classroom Resources

  1. Pull changes from the wilson-espina/jsd-9-resources repo to your computer:
    • Open the Terminal
    • cd to the Documents/JSD/jsd-9-resources directory
    • Type git pull origin master and press return
  2. In your editor, open the following folder: Documents/JSD/jsd-9-resources/07-slackbot-lab

Objects & JSON

Working with nested Data Structures

Objects & JSON

Using JSON Data


const course = '{"name":"JSD","weeks":
10,"location":"Remote","instructor":
"Wilson Espina","students":["Mr 
Motivator","Cathy Burke","Carl Cox",
"Steven King","Susie Dent"],"dates":
{"start":"2020-05-11","end":"2020-07-
20"}}'
							
What gif

Objects & JSON

Working with nested data structure

Working with data structures

Objects & JSON

Working with nested data structure

Working with data structures step 1 Working with data structures step 1 image

Objects & JSON

Working with nested data structure

Working with data structures step 2 Working with data structures step 2 image

Objects & JSON

Working with nested data structure

Working with data structures step 3 Working with data structures step 3 image

Objects & JSON

Working with nested data structure

Working with data structures step 4 Working with data structures step 4 image

Objects & JSON

Working with nested data structure

Working with data structures step 4 Working with data structures step 5 Working with data structures step 5 image

Objects & JSON

Working with nested data structure

Working with data structures step 4 Working with data structures step 5 Working with data structures step 6 image

Code along

Code Along

Open up: 1-cat-facts-json

Code Along

Slack Bot Lab

Slack Bots

Slack Bot Lab

Slack and Bots

  • A Bot is a script that is programmed to interact with users as if it's a person.
  • In Slack, these are called "bot users," or "bots" for short.
  • These bots will be members of our class Slack organisation.
  • We will use a framework to create our own bots with interactive behaviours that we specify with our code.
Slack logo Robot

Slack Bot Lab

Hubot

  • Hubot is a framework built by GitHub to speed up the process of developing bot users on a variety of platforms, including Slack.
  • It includes built-in functionality for performing common bot tasks (posting images, etc.).
  • We will use the Hubot framework to create our bots
  • It is built using Node.js and CoffeeScript.
Hubot logo Node logo Coffeescript logo

Slack Bot Lab

Tools

Slack Bot Lab

CoffeeScript

  • CoffeeScript is a variant of JavaScript intended to be more readable and faster to type.
  • Only JavaScript can run in browsers so CoffeeScript has to be compiled into JavaScript so that it can be run.
  • Many Hubot examples are written in CoffeeScript, but you can write Hubot code in vanilla JavaScript without any problem.
Coffeescript logo

Slack Bot Lab

Yeoman

  • Yeoman is a set of tools that provides a scaffolding (basic structure) for getting web apps up and running quickly.
  • We'll be using of a Yeoman tool called yo, which takes care of things like:
    1. dependencies
    2. build tasks
    3. configuration
Yeoman logo

Slack Bot Lab

Markdown

  • Markdown is a markup language used for creating formatted text documents.
  • Easier to use than HTML for basic tasks.
Markdown logo

Slack Bot Lab

Heroku

  • Heroku is a platform for hosting and running apps in the cloud.
  • We'll be using Heroku to host the code for our Hubot, so it can run independently of our machines.
Heroku logo

Slack Bot Lab

Architecture

Heroku Architecture

Activity - Configure Hubot

Exercise

Key Objective

  • Install and configure all utilities to run a Hubot

Location

Timing

20 mins

  1. Follow the instructions to install command line utilities for building Hubots.
  2. When you finish, start reading and exploring the sample code in Slack Bot Lab - Sample Code (second link in Resources on website for today’s class).

Slack Bot Lab

The Hubot Framework

Slack Bot Lab

Basic Structure


module.exports = function(robot) {
  // command 1
  robot.verb(parameter1, function(res) {
    return res.command();
  });
  // command 2
    robot.verb(parameter1, function(res) {
    return res.command();
  });
  ...
}

						

Interacting with Hubot

Basic verbs

  • hear: called anytime a text in the chat matches the text.

bot.hear(/Hello!/, function(res) {
  return res.send("Hi there!");
});
						

tim: Hello!
hubot: Hi there!
						

Interacting with Hubot

Basic verbs

  • respond: called for messages immediately preceded by the robot’s name or alias.

bot.respond(/What's your favourite food?/, function(res) {
  return res.send("I'm a robot--I don't eat food!");
});
							

tim: @hubot What's your favourite food?
hubot: I'm a robot--I don't eat food!
jon: What's your favourite food?
... [no response because Jon didn't tag Hubot in his message]
						

Interacting with Hubot

Sending replies

  • .send method allows your Hubot to send a message to the channel.
  • .reply method allows it to respond directly to a user with an @ reply.
  • (.*) wildcards allow us to accept user input in your script.

bot.respond(/Hi Hubot! My name is (.*)/i, function(msg) {
  let name;
  name = msg.match[1];
  if (name == "Hubot"){
	return msg.send("You're not Hubot--I'm Hubot!");
  } else {
	return msg.reply("Nice to meet you, " + name + "!");
  }
});
						

Interacting with Hubot

Advanced hubot Verbs

  • random: choose a random element from an array
  • topic set the topic of the current channel.
  • brain store and retrieve data.
  • http make an http request (API data, for instance)

Code along

Code Along
Code Along

Slack Bot Lab

Common Mistakes

Slack Bot Lab

Gotcha 1
  • ❌ Function parameter and argument does not match

module.exports = function(robot) {
  robot.hear(/Hello!/, function(res) {
    return res.send("Hi there!");
  })
}
							
  • ✅ Function parameter and argument match

Slack Bot Lab


module.exports = function(bot) {
  bot.respond(/Hello!/, function(res) {
    return res.send("Hi there!");
  })
}
								

bro-bot> Hello!
bro-bot>
								
  • ❌ No @alias used

bro-bot> @bro-bot Hello!
bro-bot> Hi there!
								
  • ✅ Hubot name has been called

Slack Bot Lab


module.exports = function(bot) {
  bot.hear(/Hello!/, function(res) {
    return res.send("Hi there!");
  });
};
module.exports = function(bot) {
  bot.hear(/Yo/, function(res) {
    return res.send("Heya");
  });
};
							

bro-bot> Hello!
bro-bot>
bro-bot> Yo
bro-bot> Heya
							

module.exports = function(bot) {
  bot.hear(/Hello!/, function(res) {
    return res.send("Hi there!");
  });
  bot.hear(/Yo/, function(res) {
    return res.send("Heya");
  });
};
							

bro-bot> Hello!
bro-bot> Hi there!
bro-bot> Yo
bro-bot> Heya
							

Slack Bot Lab

Bot is asleep if the status indicator is not green.

Sleeping Bot

$ heroku ps:restart
							

Code along

Code Along
Chris Whitty

Lab - Build A Slack bot

Exercise

Key Objective

  • Write scripts that allow your Hubot to interact with users of the class Slack organisation.

Location

  • JSD > myhubot > scripts > script.js

Timing

Until 20:45

  1. Uncomment portions of the sample code in script.js to explore how to code in the Hubot framework, and what a bot can do in Slack.
  2. Try out some of the code samples in today’s start code files.
  3. Create a plan for what you want your bot to be able to do, pseudocode it, and start building it!
  4. Test using the steps in Slack bot lab - Testing & Troubleshooting (third link on class resources on website).
  5. BONUS: Experiment with advanced commands documented at https://github.com/github/hubot/blob/master/docs/scripting.md

Slack Bot Lab

Creating a Github Repo

Slack Bot Lab

Heroku vs Github

  • Heroku is running your bot code in the cloud.
  • Github is saving your code to make you code available for review.
Heroku vs Github

Slack Bot Lab

Heroku vs Github

  • Push to completed code to Github for review from Wilson.
  • Push to Heroku regularly to test your bot.
Heroku vs Github 2

Code along

Code Along
Code Along

Slack Bot Lab

Learning Objective

Learning Objectives - Review

  • Install and configure all utilities needed to build a bot using the Hubot framework
  • Write scripts that allow your bot to interact with users of the class Slack workspace

Slack Bot Lab

Q&A

Slack Bot Lab

Homework

Slack Bot Lab

Exit Ticket

(Lesson #07)