Presentation for - install hubot in OSX - script with js

1. Hubot scripting in Slack
Juneyoung Oh
I-ON Communications
2015.08.01

2. Index of Contents
Purpose of this Presentation
Install Hubot on OSX
Invite Hubot in Slack room
Writing custom script for Hubot (js)
Tips from personal experiences
CAUTION : I will do all this on OSX with Slack, Heroku.

3. Purpose of this presentation
This presentation for you :
- Want to make fun bot in your slack community
- Who knows little about javascript
- Want to try something fun with js, but do not want to much time
on it
This presentation NOT for you :
- Hardcore programmer who ought know everything running in
background
- Who never heard of javascript (I am not going to talk about js basic
:<)
- Want to write custom script for Hubot in coffee script. (There are
many examples for coffee on web, so go for it :D)

4. Installing Hubot on OSX
CAUTION : Things NOT going to mention in here, but you need to prepare for
further steps.
- Install node.js on your system
- Install nvm (node version mananger) on your system
Official Hubot installation guide can be found here :
https://hubot.github.com/docs/
This link could be more accurate but I am going to talk about errors I have met while following those
steps.

5. Installing Hubot on OSX
First, Install `hubot-generator` with `yo`.
Could get following errors. it just need some authority on your system.
Fix this with `sudo` command like :

6. Installing Hubot on OSX
Now, make a directory for the bot
Move into project directory
Calling hubot!
You could see following on your screen

7. Installing Hubot on OSX
In Terminal, you should fill some fields to proceed.
[ Fields list ]
- Owner : Bot Owner name, nothing special.
- Bot name : Going to use this name to call this bot. i.e. If your bot name is
‘testbot’, than `testbot what is your name?`
- Description : Nothing special.
- Adapter : Adapters which could use this bot. default is ‘campfire’. However,
you can change this anytime by editing a file named ‘Procfile’
This are sample which I wrote for this
presentation :D

8. Installing Hubot on OSX
Now, talk about directories & Files.
Can check with `ls` command. It should shows like follow :D
[File List]
- Procfile : can edit ‘Adapter’ options here.
- external-scripts.js : Additional hubot script. User Custom Script Name can be
found here.
- READ.md : This file for git. If you using a service like ‘github’, This document
will be shows at first.
- hubot-scripts.json : Additional hubot script. But these are specific. Details
could be found : https://www.npmjs.com/browse/keyword/hubot-scripts
- scripts(d) : Put your custom script this directory. To use this script, you have to
specify the name on external-script.js
- bin(d) : A directory which has hubot execution file.

9. Installing Hubot on OSX
Let’s run this :D
For now, a prompt is all. However still hubot can do serveral commands.
Type following command.
remember, this space for your ‘Botname’.
Simple command sample for you.
Now, Let’s connect this with Slack!

10. Invite Hubot in Slack room
Let’s make this bot work in slack :D
Before start …
- I assume that you already have a slack account
- I assume that you already install heroku tool-belt.
- Official tutorial can be found : https://github.com/slackhq/hubot-slack
1. Let the bot knows our adapter is ‘slack’.
Go to hubot project folder, and open this with `vi` command.
It looks like this.
We need to edit this file. so press ‘a’ or ‘I’ key to switch to ‘insert mode’. check
the left bottom of terminal and you will see…

11. Invite Hubot in Slack room
2. Replace that line with follow.
If you want to keep the original one, add ‘#’ to the front of the line, so computer
consider that as a comment, not a command.
Than, press ‘esc’ key to manage mode and type ‘:wq’.
‘w’ means ‘write’ and ‘q’ means ‘quit’.
TIPS. In normal mode type ‘:set nu’. now, vi shows line number for you. This
function is quite useful when handling long script.

12. Invite Hubot in Slack room
3. Deploy this to Heroku.
For further information for Heroku, visit the link : http://www.heroku.com
You will get following as result.
As you can see in the last line, Heroku internally uses git.
So our further jobs should upload and synchronized with that git URL.
In this case,
https://git.heroku.com/testbotapp.git is my heroku git address.

13. Invite Hubot in Slack room
4. Install Heroku redistogo addon.
Hubot uses redis DB as its brain, so need to install this to Heroku.(do not need to
install redis on your local.)
heroku addons:create (addon name) –app (your app name in Heroku)
green : Heroku command.
orange : variables
purple : which could be skipped (If you have bunch of Heroku apps like me, need
to point specific target application)
* You need to register ACCOUNT INFORMATION to use heroku addons, even
though it is free. It is necessary.

14. Invite Hubot in Slack room
5-1. Add configurations to Heroku.
To service Slack, it needs to know HEROKU URL and HEROKU_SLACK_TOKEN.
Let’s add.
Go to below URL:
https://{your room}.slack.com/services/new/hubot
After input your bot’s name, get TOKEN from the page.(It is on the top of the
page. Can not be missed)

15. Invite Hubot in Slack room
5-2. Add configurations to Heroku.
Add information from the Terminal.
HEROKU_URL can be found heroku.com page.
In [Setting] tab, middle of the page [info] section.

16. Invite Hubot in Slack room
6. Run your bot and meet it in your Slack.
First, need to push our code to heroku. Than, run it!
If you already have other heroku app, need to some extra process.
Move to top folder of your Project. Than type follow before push.
Now run our bot.
As a result, can find bot in slack. See [DIRECT MESSAGES] section.

17. Writing custom bot script (js)
This pages for custom hubot scripting for javascript, NOT coffee script.
Basic : Write custom script under ‘scripts’ folder .

18. Writing custom bot script (js)
After, writing script. Edit ‘hubot-scripts.json’ in top folder.
Add your script name without extension.
Left side is my folder structure, and right is contents of hubot-scripts.json.

19. Writing custom bot script (js)
Finally, use ‘add’, ‘commit’ and ‘push’ command.
Than, ‘heroku open’.
And go to slack, what you can see …

20. Tips from personal exp
Tips from my experiences.
1. Checking heroku logs.
This will be quite useful, since there are no scripting guides for javascript. By
doing this, can find more information about internal object like message, robot or
adapter.
2. Could not use DOM Elements.
Hubot script can not use ‘document’ Object. (XMLHttpRequest Object also could
not found).

21. Tips from personal exp
Tips from my experiences.
3. Use ajax with internal API.
For instance, it looks like…
4. In slack, some of APIs are forbidden to bot.
i.e. kick API can not be called by a bot. For more information, refer following
URL : https://api.slack.com/methods

22. Tips from personal exp
Tips from my experiences.
5. Refer coffee script codes.
There are no documents for javascript. So if you use js, you have to look what
original structure(coffee) is. Refer ‘src’ directory of hubot github.
URL : https://github.com/github/hubot/tree/master/src
Just like coffee, some objects will be found in js version.
i.e. message, brain, robot, user … Can check if you print those in console and read
heroku logs.

23. Thanks!