Git Product home page Git Product logo

node-js-slackbot-nyc-web-082718's Introduction

Slackbot Lab

Objectives

  1. Explain how Express helps structure server-side applications
  2. Describe how to use ngrok to test remote connections
  3. Send and receive requests to/from a remote server

Overview

In this lab, we will implement a chat bot slash command for the popular team communication tool Slack.

Introduction

So here's the scenario: In our daily work as programmers, we find that we frequently want to grab information about other coders from GitHub. What if we could just ask for a GitHub user's basic info directly in a slack chat?

Well, we can! Slack makes available an "integration" called "slash commands" that allow us to achieve this. You'll need to pull together all the tools you've learned about Node servers, asynchrony and Promises in order to complete this lab.

Getting Setup

To get started, you'll need to install the necessary modules. As before, we've included some tests that specify the required modules. Install those now.

Express.js

You may have noticed while installing the Node Modules that we are using a new module: express. Express is a popular module that assists us in designing and building Node web servers. Essentially, it provides a very thin layer on top of the basic Node web server methods with which you are familiar that can make implementing a server much easier.

The basic syntax for setting up routes (which you used in the Basic Web Server Lab) is the same in Express. If you open up the slack_bot.js file where you'll build out your Express-based Slack bot server, you'll see one basic GET route already present:

// Just an example request to get you started..
app.get('/', (req, res) => {
  res.ok();
});

One of the other reasons it is helpful to use Express is that it has a gigantic community of users. So as we work on this lab, we'll find our google results are bountiful as we search for answers. And there is always the Express documentation.

Let's move on.

Make Your Local Server Public with Ngrok

In order for our slash command to work, we'll need to make our server publicly accessible in some way. Now, normally you'd do this by deploying a server to some service, like Amazon Web Services or Digital Ocean, but since we are just experimenting here what we'll do is use a tool called Ngrok to make our local server publicy accessible.

What Ngrok does is establish a tunnel between a dynamically generated public domain (e.g. https://5fea2c02.ngrok.io) and our local server. That way we can just spin up our server locally, and point Slack's slash command configuration to the dynamically generated ngrok domain as our services "webhook". More about webhooks and the Slack configuraiton in a bit. Let's get Ngrok setup.

In order to setup Ngrok, you'll need to get it on your computer. The easiest way to do this is just to download it from here. Once you've downloaded the zip file that it provides, you'll need to unzip the file, and place it somewhere in your path so that you can execute it on the command line. Once you've done this, you should be able to run ./ngrok --help and see ngrok instructions.

Now, in order to get this all working, we need to take two steps that we'll do over and over again as we work on this lab. By the way, you should do each of these steps in a different window because you'll want to see output as you write and test:

  1. Run our server with a node run-server.sh command in our lab directory.
  2. Run ngrok to generate a publicly accessible link (i.e. our webhook): ngrok http 3000.

After we've run the ngrok command we should see a window that looks like this containing our dynamically generated webhook link:

Ngrok Screenshot

Now, if you go to the link displayed in your Ngrok window, you should see the familiar "Hello, World!". Great, we're almost fully geared up.

Configure our Slack Slash Command

The last step we need to take is to configure our slash command on Slack itself. Basically what we are doing here is naming our command (what will you call it?), and, also very important, we are registering our webhook with Slack so that it knows which server process to notify when a slash command is executed by a user.

Note: Webhooks themselves are very interesting! They are used all over the web. Essentially, they are like callbacks for the web. A webhook is just a callback to some web service that occurs when a process has completed on a server. If you want to find out more, you can explore here.

In order to configure our webhook, go to a Slack account and create a test channel somewhere. Once you've done that, go to the dashboard for building a custom integration. The url for that should be the following: http://<yourteamname>.slack.com/apps/build/custom-integration. Once there you should see the following:

Slack Custom Integration Page Screenshot

From here, click on the "Slash Commands" option. You'll then be presented with a screen where you can choose the name of your command. You can call the command whatever you like. Once you've chosen your command name, proceed. You'll be presented with a much longer page with a mixture of useful documentation and final configuration.

The main thing that we MUST do here is to register our ngrok webhook url. Otherwise, the slash command won't know which server to notify. Keep in mind that every time you re-run ngrok it generates a new url, so if we restart ngrok, we'll need to update our configuration here with the new url. You'll also want to take note of the Validation token because we'll need to implement a mechanism to validate this token for each incoming POST event to our server.

Alrighty. At this point, we should be ready to go.

The Task

Okay, now that we're done with the prep, here's the specification that you need to meet:

  1. Every request that comes into your server must be validated. What does that mean? Well, it means that the token string sent by Slack with each slash command webhook POST request, should match the one in your configuration. So just check that that's the case.

  2. The slash command you build should be able to look up a user using the Github API when supplied with a username, like so: /<yourcommand> flatiron-school.

  3. The answer supplied to the Slack channel should provide some basic "default" information about the user. We'll leave the definition of what constitutes "default" information up to you. But the repsonse should be nicely formatted using Slack's Message Formatting, and should at the very least include the username and their github profile link.

  4. In addition to providing the user name, the user should also be able to specify an explicit piece of information that they would like to retrieve from the list that is generally supplied, which you can see here. E.g. /<yourcommand> flatiron-school type shoudl return a nicely formatted message informing the user that the flatiron-school is of the type Organization.

  5. Finally, if there is some sort of error, your slash command server, should "fail gracefully", providing a message to the user that something went wrong, and encouraging them to try again!

As usual, we have supplied tests that are designed to guide you through the process and provide further specifications. And as usual, they are in the tests directory. Finally, be sure to you documentation and Google heavily as you seek a solution. Reading docs and engaging with the community is, after all, a big part of the job. Below you'll find a list of resources that should be helpful.

Good luck, and enjoy!

Resources

node-js-slackbot-nyc-web-082718's People

Contributors

ezmiller avatar pletcher avatar

Watchers

Kevin McAlear avatar  avatar Victoria Thevenot avatar Belinda Black avatar  avatar Joe Cardarelli avatar Sam Birk avatar Sara Tibbetts avatar The Learn Team avatar Sophie DeBenedetto avatar  avatar Jaichitra (JC) Balakrishnan avatar Antoin avatar Alex Griffith avatar  avatar Amanda D'Avria avatar  avatar Nicole Kroese  avatar  avatar Lore Dirick avatar Nicolas Marcora avatar Lisa Jiang avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.