Create a universal chatbot with JavaScript and NewBot Framework
Tags: javascript, chatbot, nlp, conversational
Published: 2019-08-19 13:20:27

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

```ts
@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

```ts
$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

```js
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`
```ts
@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


```ts
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`
```js
import code from './main.converse'
import orderSkill from './skills/order/order'

export default {
    code,
    skills: {
        orderSkill
    }
}
```

# Full code

{% codesandbox pizzabot-with-newbot-framework-tssc5 %}

# 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