WhatsApp Chat Interface with SAP Open Connectors, ...

ferrygun18 · ‎03-18-2019

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/MMb588109c418...

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/MMb588109c418...

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