ramitsuri / duke2016-by-glance

Duke Bot Repo

Duke2016 Chatbot README.md

My name is Kameron Kales. I am a founder (along with Chris Comrie) of Glance. Glance is a chatbot company which helps students discover and view a day in the life working at startups. We work out of HQ Raleigh and live at Thinkhouse. In addition we were selected to be apart of the 2016 Innovators Program backed by Citrix and RedHat.

I can be reached at [email protected]. My cell phone number is 704-877-6219 or on facebook at facebook.com/kameron.kales

---

Things you will need for this talk:

1. NodeJS (install at https://nodejs.org/en/)
2. NPM (Should come with NodeJS)
3. Some sort of text editor (I'm partial to Sublime but to each their own.)
4. Localtunnel (install at https://localtunnel.github.io/www/)

---

Today we are going to build an extremely simple chatbot on facebook messenger. We are going to use a pretty good open source framework to handle a lot of the heavy lifting. Shout out to howdy.ai (https://github.com/howdyai/botkit) for the resource.

If you are confused about any steps please shoot me a message!

Please follow the tutorial via each step included.

Tools we are using & what they do:

1. NodeJS- to run our code. NodeJS is javascript on the backend. 

2. NPM- Node package manager. Think of this kind of like the app store on an iphone. 
It makes it really easy to pull in cool stuff to use in NodeJS.

3. Text Editor- This will be used to edit the code I provide 

4. LocalTunnel- this is used to get secure callbacks approved on Facebook. 
If that doesn't make any sense just know it makes it possible for your code on your computer 
to connect to facebook. If that doesn't make sense scream out loud bots suck and I will come help you!

5. Facebook Developer Account - You need this to link your bot from running on your computer
to hooking up to your facebook page you created. (developer.facebook.com)

6. Facebook page- You hook your chatbot up to this. 
So when you visit "DukeBot" you can get it to respond to you automatically.

---

Step 1:

To begin we must do the following!

• Install NodeJS: https://nodejs.org/en/download/

• Install NPM (Should come with NodeJS, so don't worry too much about this step.)

• Install a text editor (Sublime, vim, emacs -- anything works)

• Install LocalTunnel (https://localtunnel.github.io/www/). Don't run the command to start LocalTunnel, yet!

Step 2:

• Create the Facebook page you would like to have your bot live on. The "create page" option is on the left-hand side of your news feed.

Step 3:

• Head over to https://github.com/KameronKales/Duke2016, click "Star" & then click "Fork" on the upper right-hand side of the page. This makes your own copy of the repository, so that you have write access. Otherwise, you would have to request permission to add your changes to GitHub. If you don't have a GitHub account and don't want to make one, skip the above step.

• Once you've forked the repository, head over to the copy on your GitHub, located at github.com/[YOUR ACCOUNT USERNAME]/Duke2016. Press "Clone or Download" and copy the link given.

• Run the following command in the terminal:

git clone *YOUR LINK*

• Navigate into the cloned folder with cd Duke2016

• Run npm install in your current folder.

Step 4

• Go to https://developers.facebook.com/. Click "Products" in the upper navigation tab, then "Messenger Platform" which is listed under the "Growth and Engagement" tab.

• Then, press the "Start Building" button. You will be directed to a new page. In the top right, there's a dropdown menu called "My Apps." Hover or click and select "Add App" or "Create App" -- either works.

• A popup will appear. Fill in your app's name and category, then select Create App ID.

• You will be directed to a page called "Product Setup." Select "Messenger" from this list of products (note that "Messenger" and "Messenger Expression" are different -- select "Messenger"!)

• On the "Messenger" page, scroll down to generate a token for your page.

• Finally, add this generated token to your facebook_bot.js file via your text editor.

Step 5

• Back on the Product Setup page, add "Webhooks" to your app.

• In the popup, leave "Callback URL" blank for now. Your "Verify Token" may be anything you like (don't use any password you've ever used). As for "Subscription Fields," select every "Messenger"-related option.

• In your facebook_bot.js file, add the "Verify Token" you used to the "verify_token" field.

Step 6

• Open a new terminal. In your new terminal window, enter the command lt --port 5000

• Copy the resulting URL.

• Enter the URL back on the Webhooks Callback URL. NOTE that you need to modify the URL in two places: First, add an "s" to the "http://" so that it reads "https://". Second, add "/facebook/receive" to the end of the URL.

• Press "Verify and Save."

Step 7

• Return to your original terminal. Enter the command node facebook_bot.js

Step 8

• You're done! Go to the Facebook page you set up and send it the message, "Hello"!