Create a universal chatbot with JavaScript and NewBot Framework

We will create a modular and fast chatbot. We take advantage of NLP without an external platform (like DialogFlow)

Prerequisites

• Have NodeJS and NPM installed on your machine
• Knowledge of Javascript

Why NewBot Framework?

• Universal, a single code to work everywhere
• Creation of conversational website
• Modular and structured
• Using the NLP (Natural Language Processing)
• Conversational script syntax to write user-chatbot conversations easily and quickly
• Internationalization
• Unit tests
• Emulator with NewBot CLI

Compatibility

All platforms, i.e.

• Facebook Messenger
• Google Assistant
• Amazon Alexa
• Slack
• Telegram
• Viber
• Skype
• etc.

and directly in your browser (offline)

Above all

Install NewBot CLI to take advantage of command lines

npm install -g newbot-cli

Create a project

newbot new <your directory name>

Go to the generated folder

You can test the chatbot with the command newbot serve. See below

Create main skill

main.converse is the conversational script of the main skill. It’s just the departure conversation

The language used is specific to NewBot. It is called ConverseScript and allows you to create conversational scripts with a syntax close to Javascript
More : https://newbot.io/docs/syntax/variables.html

@Event('start')
start() {
    > I am PizzaBot, and your name ?
}

Simple, isn't it? The chatbot gives its name from the first interaction with the user

• start() is a function representing a dialog
• @Event('start') is a decorator indicating how the function should be triggered. Here, the “start” event indicates that the function is triggered as soon as the first interaction with the chatbot occurs

Entering a text

Let's complete the main.converse file

$name = ''

@Event('start')
start() {
    > I am PizzaBot, and your name ?
    Prompt()
    $name = :text
    > Welcome, { $name }
}

• $name is a global variable specific to the user
• Prompt() is a native function waiting for the user to enter
• :text a magic variable. It was created by the system. It contains the user entry. We store the value in the global variable $name

The Javascript file

The main.js file contains an object representing the skill

import code from './main.converse'

export default {
    code
}

Create a skill to place an order

First, create a new skill

newbot generate skill order

An order folder has been created in the bot/skills folder

order.converse

@Intent('order', [
    'order a pizza',
    'get pizza',
    'buy pizza'
])
order() {
    date = :intent.date.value
    callApi(date)
    > I have noted an order for { date }
}

We use an @Intent decorator to use the NLP

• @Intent() is a decorator who defines an intention. First parameter: the name of the intention. Second parameter: the training phrase array
• :intent.date.value is a magic variable that retrieves the date entered by the user
• callApi() is a function created by us, present in Javascript

and JS skill

import code from './order.converse'

export default {
    code,
    functions: {
        callApi(date) {
            console.log(`call yout custom api, date is ${date}`)
        }
    }
}

The functions property allows you to declare functions that can be used in the conversational script

Link the created skill to the chatbot

Now that the skill order has been created, add it to the property skills in the main.js file

order.js

import code from './main.converse'
import orderSkill from './skills/order/order'

export default {
    code,
    skills: {
        orderSkill
    }
}

Full code

Test in Emulator

Type the following command at the root of your project

newbot serve

Go to localhost:3000 and test the project in the emulator

Go further in understanding

• Deploy in browser : https://newbot.io/en/docs/essential/browser.html
• Develop ExpressJS server and execute chatbot : https://newbot.io/en/docs/engine/express.html