My first App
  • Updated on 17 Aug 2019
  • 2 minutes to read
  • Contributors
  • Print
  • Share
  • Dark
    Light

My first App

  • Print
  • Share
  • Dark
    Light

'Hello World!' App

A FrontM.js App is a JavaScript function that receives a State as its input parameter and returns an array of Intents:

const App = state => {

  let main = new Intent('main');
  main.onResolution = async () => {
    state.addStringResponse('Hello World!');
  };

  return [main];
};

This App is a very basic example and returns only one Intent: saying 'Hello World!' to the user on the chat screen.

main Intent

An object of the Intent Class, called main, is created during runtime:

let main = new Intent('main');

main is not a mandatory Intent but, when present, will always run when the user starts a conversation.

Allowing interaction

The 'Hello World' App does nothing i.e. it won’t respond to a user question. Therefore, we must create an App that does:

const App = state => {

  let main = new Intent('main');
  main.nlpId = 'FMApp';
  main.onResolution = async () => {
      state.runFunctionOnceAnHour(() => {
      state.addStringResponse('Hello World! How are you?');
    });
  };

  return [main];
};

The runFunctionOnceAnHour method

Since the main Intent object is always created when a user starts a conversation, it doesn’t need to say "Hello" more than once if the user leaves the conversation and then re-enters it within the hour. This is why we add the runFunctionOnceAnHour method.

Natural Language Processor (NLP)

If the main Intent is to respond to user requests, we must connect it to an NLP engine:

main.nlpId = 'FMApp';

The current FrontM architecture uses Dialogflow as its NLP engine; we will, however, soon be using an internal solution.

In other words, ‘FMApp’ (for now) references Dialogflow – the above line indicating that this Intent will be identified as the NLP.

Smart suggestions

Next, we can offer the user a couple of suggestions on what to ask the App:

const App = state => {

  let main = new Intent('main');
  main.nlpId = 'FMApp';
  main.onResolution = async () => {
    state.runFunctionOnceAnHour(() => {
      state.addStringResponse('Hello World! How are you?');
    });
    state.addEnglishSmartSuggestions(['Hello', 'How can you help me?']);
  };

  return [main];
};

We have added the following line to the script:

state.addEnglishSmartSuggestions(['Hello', 'How can you help me?']);

So instead of the user typing a response, the App will display two suggestions they can select from. It will then act exactly as if the user has typed them.

Here is another way of adding smart suggestions:

const App = state => {

  let main = new Intent('main');
  main.nlpId = 'FMApp';
  main.suggestionsArray = [
    {
      lang: 'en',
      list: ['Hello', 'How can you help me?'],
    },
  ];
  main.onResolution = async () => {
    state.runFunctionOnceAnHour(() => {
      state.addStringResponse('Hello World! How are you?');
    });
  };

  return [main];
};

The difference between the two methods is that, in the second one, the suggestions are displayed all the time and not just after the code has executed.

Was this article helpful?