WhatsApp Chat Interface with SAP Open Connectors, Twilio and SAPUI5

Do you want to send and receive a WhatsApp messages from UI5 ? In this tutorial, we will create a simple WhatsApp chat interface with SAP Open Connectors, Twilio and SAPUI5 to send and receive WhatsApp messages.

Pre-requisities

Create an account for the following:

• Twilio
• SAP HANA Trials

Twilio Setup

• Register an account with Twilio and go to the console https://www.twilio.com/console.
• Select Templates and SMS Chabot.
  

• Name a project UI5Whatsapp and click Continue.
  
• Once the project is successfully created, go to project dashboard.Take note the account SID and auth. token.
• Select Programmable SMS and WhatsApp to setup the testing sandbox.
  
• From your mobile send a WhatsApp message with the code to the designated number.
• Upon success, you will receive the following messages:
  
• Select Sandbox and verify if the number is correct.
  
• Empty the When a message comes in and Status callback URL and select Save.
  

SAP Open Connectors Setup

• Logon to SAP Open Connectors and select Connectors. Search for “twilio” and select Twilio.
  
• Select Authenticate.
  
• Enter the following information:
  Name: UI5Whatsapp
  Phone Number – from Twilio setup.
  Create the instance using Test Credentials: false
  Account SID – from Twilio setup.
  Auth. Token – from Twilio setup.
  Select Create Instance to continue.
  
• Select Test in the API docs to test the API.
  

Send WhatsApp Message

• Select messages and Post.
  
• Select UI5Whatsapp and Try it out.
  
• Fill in the information in the body section:

  {
    "Body": "Hello World!",
    "From": "whatsapp:+14155238886",
    "MediaUrl": "https://demo.twilio.com/owl.png",
    "To": "whatsapp:+6512345678"
  }​

  Twilio API now can support images, video, PDF and other media contents, refer to this link for more details. In this example, we are going to send the image attachment with text “Hello World!”.
  Select Execute to continue.

• If there is no error, you will see similar message:
  
• And you will receive the WhatsApp message on your phone:
  

Receive WhatsApp Message

• Select messages and Get.
  
• Select UI5Whatsapp and enter 1 for number of items per page.
  
• Select Execute to continue. If no error, you will get the similar response message.
  

Retrieve Media Image

• Get the response from the receive WhatsApp message steps above.

  [
    {
      "subresource_uris": {
        "media": "/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896/Media.json"
      },
      "date_updated": "Mon, 18 Mar 2019 09:35:57 +0000",
      "date_sent": "Mon, 18 Mar 2019 09:35:38 +0000",
      "date_created": "Mon, 18 Mar 2019 09:35:28 +0000",
      "body": "Hello World!",
      "api_version": "2010-04-01",
      "num_segments": "1",
      "uri": "/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896.json",
      "sid": "MMb588109c418c40a28b3b3f18116aa896",
      "num_media": "1",
      "price_unit": "USD",
      "price": "0.00000",
      "account_sid": "AC7301a81fd79cdac6741a7c04904f6b42",
      "from": "whatsapp:+14155238886",
      "to": "whatsapp:+6512345678",
      "status": "delivered",
      "direction": "outbound-api"
    }
  ]​

• Open url: https://api.twilio.com + /2010-04-01/Accounts/ACxxxx/Messages/sid/Media.json
  

  https://api.twilio.com/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896/Media.json

• Get the sid from media_list. If you have more than one image attachment, you will get multiple sids.
  
• Now open url: https://api.twilio.com + /2010-04-01/Accounts/ACxxxx/Media/sid:

  https://api.twilio.com/2010-04-01/Accounts/AC7301a81fd79cdac6741a7c04904f6b42/Messages/MMb588109c418c40a28b3b3f18116aa896/Media/ME8a32401d2ff8eeeac0c8e55f0c0cf574​

• And you will get the Owl image:
  

SAPUI5 

With the information we gathered in the earlier steps, we can build a simple chat interface in UI5. I am referring to this blog to build one!

The reason I didn’t do any webhook calls to get the incoming messages because I want to make it simple. Instead I am using the ‘loop’ function to check the new message every 2 seconds. Feel free to enhance it!

onSendPressed: function(oEvent) {
    var chatbot = this.getView().byId("botchat");
    var question = oEvent.getParameter("text");
    var this_ = this;

    console.log(question);
    //var data = '{"Body": "' + question + '", "From": "whatsapp:+14155238886", "MediaUrl": "https://demo.twilio.com/owl.png", "To": "whatsapp:+6512345678"}';
    var data = '{"Body": "' + question + '", "From": "whatsapp:+14155238886", "To": "whatsapp:+6512345678"}';
    var headers = {
        'Authorization': 'User kDyXgv7DF2IjZ4eFpK/8qQMfLpaQGJ3f39U5FAkKnWg=, Organization f589b65c85a32fc5c3b35ec8c882f063, Element +5Wvb+VXjtbKj5xW0fEKh+XYUnR5N9epUizO/KKoX6o=',
        'Content-Type': 'application/json'
    };

    jQuery.ajax({
        //Post Message
        url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/messages",
        cache: false,
        type: "POST",
        headers: headers,
        data: data,
        async: true,
        success: function(sData) {
            localStorage.setItem("chatId", sData.date_created);
            //console.log('[POST] /discover-dialog', sData);

            chatbot.botFinishTyping();
        },
        error: function(sError) {
            chatbot.addChatItem("Something error!", false);
        }
    });


    var ajax_get_response = function() {
        jQuery.ajax({
            url: "https://api.openconnectors.ext.hanatrial.ondemand.com/elements/api-v2/messages?pageSize=1",
            cache: false,
            type: "GET",
            headers: headers,
            async: true,
            success: function(sData) {
                //console.log('[GET] /discover-dialog', sData);
                localStorage.setItem("chatId", sData[0].date_created);

                if (sData[0].direction == 'inbound') {
                    if (localStorage.getItem("chatId") != this_._id) {
                        this_._id = localStorage.getItem("chatId");
                        chatbot.addChatItem(sData[0].body, false);
                        chatbot.botFinishTyping();
                    }
                }
            },
            error: function(sError) {
                chatbot.addChatItem("Something error!", false);
            }
        });
    };

    var interval = 2000;
    setInterval(ajax_get_response, interval);
}

https://github.com/ferrygun/UI5Whatsapp