Create a Facebook Messenger chatbot with Claudia.js Bot Builder and AWS Lambda in 7 steps

In a world where connectivity is at the tip of our fingers, we are constantly surrounded by conversational chat interfaces and it has become a part of our daily lives.

Instant messaging is not a new concept, my first encounter was back in 1997, when I used to go to my primary school friend’s home and we would log into her ICQ account. That was over 20 years ago! Since then, Yahoo Messenger, MSN Messenger, SMS, Skype, Viber, Whatsapp, Facebook Messenger, Google Talk and Slack have appeared, just to name a few.

As technology advances, we are constantly developing automated programs to save us time and to help us become more efficient. When we have a question, we want the answers almost instantly. Thankfully, we have google. Time is of the essence and our patience threshold is becoming shorter and shorter. In the last 12–18 months, the notion of artificially intelligent chatbots has steadily increased in popularity amongst technology news and there are more and more AI machine learning programs and third-party tools and domains being integrated and developed. AI chatbots can help with getting faster customer support responses. Is this the way of our future?

As a side project for work, I had fun developing a simple Facebook Messenger chatbot mid last year. Here are a few tips to help you get started.

Designing your chatbot

Have you thought about how people would interact with your bot? Would your bot be leading the conversation and prompting users for all the information required to do their task or would it be artificially intelligent enough to understand the needs of what the consumer is asking or saying? This requires natural language processing (NLP); understanding human language to enhance the user’s experience. It’s important to take into account recursive neural networks and combinatorics. It is ideal to design a UML diagram of your bot. This could help define all the possibilities of how the conversations with your bot could flow.

Picking your tools

One of the biggest factors of developing a chatbot on your own platform as opposed to an existing platform, is your reach. On Facebook’s Messenger platform, your bot can “reach 1 billion people around the world”. Does it make more sense to use a platform which has an established user base already?

The next consideration is whether you would be leveraging machine learning services like wit.ai, Houndify, motion.ai or api.ai. You could also build your own text classifier and plug your chatbot to it. At hipages, we built our own text classifier with MetaMind.


Getting started with Facebook Messenger and Claudia.js

What you will need:
– Set up claudia.js deployment tool (Node.JS 4.3.2 AWS Lambda installation)
– Use Claudia.JS Bot Builder
– Set up a Facebook page
– Set up a Facebook app

1. Setting up the claudia.js deployment tool

npm install claudia -g
npm init
npm install claudia-bot-builder -S

2. Code your bot
Create a javascript file app.js.
Example:

const botBuilder = require('claudia-bot-builder');
const fbTemplate = botBuilder.fbTemplate;

module.exports = botBuilder(message => {
  if (message.type === 'facebook') {
    const list = new fbTemplate.List();

    return list
      .addBubble('hipages.com.au', 'Australia\'s #1 site to hire trade professionals')
        .addImage('https://assets.homeimprovementpages.com.au/images/hui/hipages-logo-full.png')
        .addDefaultAction('http://www.homeimprovementpages.com.au')
        .addButton('Get Quotes', 'http://www.homeimprovementpages.com.au/get_quotes_simple')
      .addBubble('Meet our team')
        .addImage('https://hipagesgroup.com.au/wp-content/uploads/2017/01/hero-fall-back-img.jpg')
        .addButton('View job openings', 'https://hipagesgroup.com.au/careers/')
      .addListButton('Our Story', 'https://hipagesgroup.com.au/our-story/')
      .get();
  }
});

3. Create a Facebook app and page.

4. Configure your app
In the dashboard of your app, under ‘Product Settings’, add a product and click on “Get started” for Messenger.

Under “Webhooks”, click on Setup Webhooks.

5. Deploy the bot

claudia create — region us-east-1 — api-module bot — configure-fb-bot

Copy the webhook url and verification token into the screen from Step 4. Select all subscription fields.
Click ‘Verify and save’.

6. Generate access token
Under ‘Token Generation’ in Settings, select your Facebook page and copy the access token back to Claudia.

7. Try out your Messenger bot!
Go to your Facebook page, click on ‘Message’, then ‘Copy Messenger Link’ and ‘Done’. Go to a new tab in your browser, paste your link in and hit ‘Enter’. Type your message and see your bot come to life!

Would love to your thoughts on chatbots or AI voice assistants, feel free to reach out 🙂

Advertisements

Digging Angular

After diving into backbone last month, I thought it’s time to have a look at AngularJS. What’s the hype with AngularJS? Why is it a popular choice for large scale websites? I often ask people at meet-ups whether their company uses Backbone, Ember and/or Angular and quite a few people usually reply with ‘Angular’. My next question usually would be why they have decided to choose AngularJS and majority of the responses is that AngularJS is backed by Google and that there is a wider support and documentation.

AngularJS is considered a new paradigm for web development. Why? Well, here are some Angular vocabulary and examples to show you just how powerful Angular can be…

Directives

One of the first observations I made when I first started looking into Angular was the statement on the AngularJS website; “AngularJS is what HTML would have been” – that’s a pretty strong and bold statement! AngularJS allows you to ‘extend’ the HTML vocabulary. You can set your own ‘directives‘; custom attributes and elements.

<html ng-app="ngApp">

The ng-app attribute in the html tag above is an example of a directive which is used to auto-boostrap the application. This is commonly forgotten by beginners.

Data Binding

The two way data binding in Angular is extremely powerful and simple – it’s automatic synchronisation! When the model changes, so does the view.

<input type="text" ng-model="firstName" />
hi {{firstName}}!

Filters

AngularJS comes with many handy filters built-in. Filters allow you to manipulate and filter the presentation of your views. You can apply Angular filters directly by extending the bindings in your HTML views

{{ 12 | currency }}

The Code School “AngularJS Tutorial for Beginners” is also a great way to get an insight of what it’s like to code in Angular.

There are still lots to learn in AngularJS – will definitely write more as I dive deeper… stay tuned!

My very first backbone app

At work, we thought we would try to integrate a mini backbone app into the main site. We chose to take the out log in status on the header into a backbone app.

So what is Backbone.js?

Backbone.js is a JavaScript frontend framework that provides structure for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface. Simply put, Backbone.js allows us to develop applications much easier and better (more scalable, reusable, and modular code).

What stood out to me straight away is the structure of setting up a Backbone app. As I have been writing php for some time, I am familiar with MVC structure and so I was immediately intrigued. There are many different ways you can design and make your own decisions with the architecture for your app in Backbone.js.

Great reads to get started