Creating a Messenger Bot: Part 1

-
At the start of this university term, I moved in with one of my classmates,. Like any reasonable human beings, we began a 3D printing service, Wat2Print. Shameless plug: we'll offer high-quality 3D prints as well as consultation services for your projects and models! Our goal is to provide some education and training resources towards 3D printing as well, but, one step at a time.

Being based in Waterloo, ON, there's a number of challenges surrounding sourcing 3D printer parts, building miscellaneous components, and travelling. Travelling around a city such as Waterloo without a car and a mediocre public transit system (it is getting better, mind you) is a pain.

But, that's part of another project. For this, after two months of working on improving our 3D printers (dual extrusion upgrade!), we've started to really work on the customer-side of things.

One challenge, for example, is having customers order prints. We haven't set up a proper website yet (and there's no time for it right now), so we're using Facebook for all our needs. While some people might choose to simply handle orders by hand each time, being in class for half the day and working on university projects in the other half doesn't leave much time to handle these kinds of problems.

Plus, it's cool to try and learn some Javascript and Natural Language Processing (NLP, sometimes NLU).

So, part 1, the very basics, is probably not all that interesting. Essentially, by following Facebook's own quick start guide on making a Messenger Bot, or any of the hundreds of guides on making a bot will get you to a fairly advanced stage.

But, here's what I did, while my roommate continues to test our dual extrusion setup.

Creating a Facebook Bot

First, to create a bot, you'll need a Facebook page. For us, we needed one for our users, and this was set up a while back. We created icons and a cover photo, set some settings, and arrived at the point where we are now:


Not bad. There's not much else to do here. After this, we head over to Facebook's developer site, developers.facebook.com, and create a new app. Here, we'll need to add Messenger to our app, and configure its settings later.

Now, renting a place with a landlord who knows his way around technology means we can't simply hack our way into the router and set up port-forwarding. We'll need a way around this. Some options are Glitch (Facebook's own quick start provides a Glitch project that you can remix to quickly get started), or ngrok. At first, I used Glitch, but, having to copy-paste code between Glitch and Sublime Text grew old pretty quick, so I set up ngrok later in the development process.

A quick note on ngrok: it seems that sometimes, somewhere, the HTTP requests are getting lost between Facebook and ngrok server. Not sure why this is, since it hasn't been a huge issue, but it is just a note. One possibility for it is that I frequently start and restart the server with changes. Maybe the port forwarding that ngrok does gets disconnected somehow? At any rate, should this happen, it's fairly straightforward to deal with:
  1. Ctrl+C to close ngrok (in the ngrok console window): IMO, I needed to press this twice.
  2. Restart ngrok on the same port
  3. In Facebook for developers, add the Webhooks product if you haven't already, and then, in the dropdown, select "Page", then "Edit Subscription". Put the new ngrok URL and the verification token in. Hit "Verify and Save".
  4. Sometimes, changes will take time to occur. One way to handle is to "force" the Messenger API to reset and use the new URL for the Webhook. To do this, go to the Messenger settings in Facebook for developers, unsubscribe your page, change the Webhook Events (add one/remove one), generate an access token for your page (it'll stay the same), then, re-subscribe your page to the webhooks.
If you're working in Glitch, making changes is pretty easy. Glitch automatically refreshes the project when changes are made, so, no effort needs to be done on your part when you make changes. Keep in mind that the Glitch environment and your personal Node.js environment are slightly different: in Node.js, you might use the dotenv npm package for processing environment variables. In Glitch, this is already handled for you.

I won't go into depth with setting up the boilerplate functions for verifying webhooks or sending messages. This is fairly simple, and is explained in guides to creating a Messenger bot. What we're actually interested in here is making Dialogflow work with our bot. 

For now, however, we're content with having our bot respond to a message with "You sent the message "...". Now send me an image!", or show a postback with "Yes!" or "No!" as options (following the Facebook guide).


Popular posts from this blog

Java - Snowflake Animation

-
One of my classmates recently introduced me to Processing, and the first project I attempted was animating snowflakes. Though admittedly, they're just white circles. Here's a preview of what it looks like: Either way, it was interesting to play around with Processing and learn a bit of Java while I'm at it. Some things to note about scalability, though. Each snowflake has individual properties and there's no instances or anything to speed up processing, so having larger amounts of snowflakes tends not to be a great idea while running on CPU. One of Processing's renderers, FX2D, can be used to allow for more ridiculous numbers of snowflakes at higher resolutions, however. For now, there's no interaction built into it, however, I'm considering implementing some functions that allow the user to create wind and blow snowflakes around using their mouse. I'm fairly certain this was done once on YouTube. Below's the source for anyone who's...
Read more

Lego EV3 Project - Software

-
Image
While I was mostly responsible for the mechanical aspects of the project, I wrote the code that allowed moves to be entered into the EV3. Some components of the software that were were originally planning on implementing weren't implemented due to some significant platform limitations, such as file transfer between a PC and the EV3 brick. Let me explain. The checkers "AI" that we wrote was very primitive, but it was capable of generating moves based on what it thought was optimal, with some scoring mechanisms. This was written in C as we had hoped to port it over to the EV3, which was running RobotC. However, should the EV3 be unable to run the code (spoiler alert, declaring an 8 by 8 array in RobotC causes a memory allocation error), we had hoped to run the program on a computer, generate files of the moves, and then read the files into the EV3, where the moves would be then executed. File transfer using the EV3 and RobotC meant very finicky (for lack of a better...
Read more