Build a Fiori ChatBot with SAP Conversational AI and SAP Open Connectors

[ferrygun18]

In this blog we'll learn how to build a simple chatbot with SAP Conversational AI and SAP Open Connectors. We will also build an SAPUI5 Fiori front-end as an UI for the chatbot.

Pre-requisites

You need to have an account created for  SAP HANA Trial OnDemand and SAP Conversational AI.

Setting Up SAP Conversational AI

• I created hello bot with @buy and @flower intents.


• @buy intent


• @flower intent


• I also created @flower_entity entity. 


• @flower_entity entity. 


• Setup the triggers.


• Under Actions tab, I defined the Requirements.

Once you have completed  the setup, we will use Dialog end points to test the bot with curl command:

• Select Train tab and get the authorization token information. Take note of this token information, we will use it later when we setup SAP Open Connectors.


• Use the SAP Conversational AI Dialog endpoints to communicate with bot.


• Run curl command to test:
  

  curl -H "Authorization: Token d54cc18944a6cc60ca94852d2fc8d8ce" -H "Content-Type: application/json" -d '{"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}' -X POST "https://api.cai.tools.sap/build/v1/dialog"​

  
  


• If no error, you will get the response message in JSON format:
  

  {
  
    "results": {
  
      "nlp": {
  
        "uuid": "6631abdd-73a8-4de2-ab98-249e3f0abee5",
  
        "intents": [
  
          {
  
            "slug": "buy",
  
            "confidence": 0.99,
  
            "description": null
  
          }
  
        ],
  
        "entities": {
  
          "pronoun": [
  
            {
  
              "person": 1,
  
              "number": "singular",
  
              "gender": "unknown",
  
              "raw": "I",
  
              "confidence": 0.99
  
            }
  
          ],
  
          "number": [
  
            {
  
              "scalar": 1,
  
              "raw": "an",
  
              "confidence": 0.99
  
            }
  
          ]
  
        },
  
        "language": "en",
  
        "processing_language": "en",
  
        "version": "1902.2.0",
  
        "timestamp": "2019-02-26T08:10:54.924465+00:00",
  
        "status": 200,
  
        "source": "I want flowers for my mom, an offer?",
  
        "act": "assert",
  
        "type": null,
  
        "sentiment": "neutral"
  
      },
  
      "qna": {
  
        
  
      },
  
      "messages": [
  
        {
  
          "type": "text",
  
          "content": "Rose, Tulip and Daisy, which one you like?",
  
          "delay": null
  
        }
  
      ],
  
      "conversation": {
  
        "id": "CONVERSATION_ID",
  
        "language": "en",
  
        "memory": {
  
          
  
        },
  
        "skill": "greetings",
  
        "skill_occurences": 2
  
      }
  
    },
  
    "message": "Dialog rendered with success"
  
  }​

  
  

Setting Up SAP Open Connectors

Enable Open Connectors service in SAP Cloud Platform.

• Logon to SAP HANA Trials On Demand and select Neo Trial.


• Select Services.


• Search for open and select Open Connectors.


• Select Enable.


• Select Go to Service.

Now you are at Open Connectors Service main page.

• Select Connectors to create new connection.


• Select Build a new connector.


• Click Create.


• Under Information tab, give the connector name cai and description, type of service REST API and authentication method Custom. Select Save & Next to continue.


• Under Setup tab, Properties section set the following properties:
  base URL: https://api.cai.tools.sap/build/v1/dialog
  Pagination type: page starts with 0
  Pagination Max: 100
  Content-Type Header: application/json
  Accept Header: application/jsonAuthentication section, authentication type: custom


• At Configuration section, set the following properties:
  Name: Authorization
  Key: Authorization
  Type: Text 128
  Default: Token d54cc18944a6cc60ca94852d2fc8d8ce
  Description: Authorization


• At Parameters section, set the following properties.


• Select Save & Next to continue.


• Under Resources tab, add a new resource, select Post and click Go.


• Complete the following parameters and click Save.


• Select Authenticate instance.


• Enter the name cai and select Create Instance.


• Select Test in the API docs.


• Select Try it out.


• Enter the following in body'section and click Execute.
  

  {"message": {"content":"I want flowers for my mom, an offer?","type":"text"}, "conversation_id": "CONVERSATION_ID"}​

  
  


• You will get the response message back in JSON format.


• Take note the authorization header information in curl command, we will use this information when we build the SAPUI5 chatbot front-end.
  

  curl -X POST "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/" -H  "accept: application/json" -H  "Authorization: User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=" -H  "Content-Type: application/json" -d "{\"message\": {\"content\":\"I want flowers for my mom, an offer?\",\"type\":\"text\"}, \"conversation_id\": \"CONVERSATION_ID\"}"​

  
  

  Authorization: User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=

  
  

SAPUI5 Front-End

I have created a simple front-end with a nice button Chat with me.Take a look at onSendPressed() method in App.controller.js Here I have defined the Ajax HTTP Post query with the following parameters:

• url: https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/


• headers: 'Authorization':'User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=',This is from curl command when we setup in SAP Open Connectors.


• data: '{"message": {"content":"' + question + '","type":"text"}, "conversation_id": "CONVERSATION_ID"}'

onSendPressed: function(oEvent) {



    var chatbot = this.getView().byId("botchat");

    var question = oEvent.getParameter("text");



    console.log(question);

    var data = '{"message": {"content":"' + question + '","type":"text"}, "conversation_id": "CONVERSATION_ID"}';





    var _id = localStorage.getItem("chatId");

    if (_id != undefined) {

        //payload.id = _id;

    }



    jQuery.ajax({

        url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/",

        cache: false,

        type: "POST",

        headers: {

            'Authorization': 'User CnRqeTAM/0Gam0mn0FC8THg41b1BfZhpNPUCGCd8pns=, Organization 7c864423133b0be7aa25ce19cbbc7aaf, Element w/8rxilrE8xEjCzWAmLSd1nVEZddmSQyycqzXpFkF08=',

            'Content-Type': 'application/json'

        },

        data: data,

        async: true,

        success: function(sData) {

            console.log('[POST] /discover-dialog', sData);



            chatbot.addChatItem(sData.results.messages[0].content, false);

            chatbot.botFinishTyping();

            localStorage.setItem("chatId", sData.id);



        },

        error: function(sError) {

            chatbot.addChatItem("Something error!", false);

        }

    });



}

Execute the Ajax call and we'll get the response back in JSON format. Parse it and send back to user. Simple!

Source code: https://github.com/ferrygun/SAPOpenConnectorsChatBot

That's all the required setup that we need to do.