DialogFlow Chatbot with NewBot Framework
Tags: chatbot, dialogflow, javascript, nlp
Published: 2019-08-20 14:52:32

The goal: to create a chatbot quickly in Javascript with the understanding of the natural language (DialogFlow).


# Prerequisites

- Have a Google Cloud and DialogFlow account
- 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.

# 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

# Retrieve the credentials of DialogFlow

Have a Google Cloud and DialogFlow account

![DialogFlow Account](https://newbot.io/images/shared/dialogflow1.jpeg)

Click on the service in Google Cloud

![DialogFlow Account 2](https://newbot.io/images/shared/dialogflow2.jpeg)

Create new Key

![Create Key](https://newbot.io/images/shared/dialogflow3.jpeg)

Download the private key and add it to the root of the project


# Add DialogFlow in our project

Install the `newbot-dialogflow` module :

```
npm install newbot-dialogflow
```

In the `main.js` file, add the DialogFlow skill :


```js
import dialogflowSkill from 'newbot-dialogflow'
import code from './main.converse'

export default {
    code,
    skills: {
        dialogflow: dialogflowSkill({
            projectId: 'newbot-fttkoh',
            credentials: 'newbot-fttkoh-69d17227a8b7.json'
        })
    }
}
```

- `projectId` : The project ID (in Chatbot Settings)
- `credentials`: Path to credentials file

## Input unknown

Add this code to the `main.converse` file : 

```ts
@Intent('input.unknown')
unknown() {
    > { :intent.response }
}
```

- An `input.unknow` intention is already present in DialogFlow, it is triggered when no other intention is triggered
- We then display the response received from DialogFlow

> `:intent.date.value` is a magic variable that retrieves the date entered by the user

> 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

# Add our own intention: we buy a pizza!

1. Create a new intent in DialogFlow
2. Put a name ("Buy Pizza" by example)
3. Add trainings phrases
4. Add action name. Here, this name is `input.buy`
5. You can add parameters. Here, we recover the date in the sentence
6. Add response(s)

![Create Intent](https://newbot.io/images/shared/dialogflow4.jpeg)
![Add responses](https://newbot.io/images/shared/dialogflow5.jpeg)

`main.converse` content contains a new intention!

```ts
@Intent('input.buy')
buy() {
    date = :intent.date.value
    > { :intent.response }
    callApi(date)
}


@Intent('input.unknown')
unknown() {
    > { :intent.response }
}

```

We retrieve the date entity and call a function that can trigger an API

`callApi()` is a function created by us, present in Javascript :

`main.js`
```js
import dialogflowSkill from 'newbot-dialogflow'
import code from './main.converse'

export default {
    code,
    skills: {
        dialogflow: dialogflowSkill({
            projectId: 'newbot-fttkoh',
            credentials: 'newbot-fttkoh-69d17227a8b7.json'
        })
    },
    functions: {
        callApi(date) {
            console.log(`Call your own API. date is ${date}`)
        }
    }
}

```

# 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

# Documentation

Here : https://newbot.io/en/docs