In my previous post, I was able to connect my Amazon Echo Dot to an on-premise backend SAP system through SAP Cloud Platform and perform simple requests and get a response.

After interacting with Alexa on a few more occasion, I find myself lost or forgot what information that I’ve requested from Alexa/SAP. In my search for more Alexa + SAP type of demo, I came across two YouTube videos that has Alexa not only providing a verbal response back to the user but also at the same time interact with the screen that the user is looking at. Here are the links to those videos and they are definitely worth the time to check out.

There is also a short video of SAP CoPilot http://events.sap.com/teched/en/session/29456 that also drove a lot of the interest, ideas and inspiration behind my blog posts.

So, here’s my attempt at achieving a similar result with the same setup from the previous post while keeping to using the free tools/platform from SAP and developing the solution as much as possible in ABAP.

Here’s the video of the final result.

As usual, if you’re interested on how this was done, read on!

To keep things simple especially if you’re read the previous post, I’ll be interacting with the same data + intent. So, there will be no changes to our data, response and intent sent to Alexa.

What I’m going to need is to display the response from Alexa in a visual way that makes sense to the user – so, since we’re requesting for Total Supplier $ Spend by country, I came up with a simple SAPUI5 application that displays a bar chart with the values and the name of the country.

Let’s get started!

Speed matters

Before I start to think about the visual aspects of the UI5 application, I have to first decide how I’ll save the data that’s returned to Alexa in a quick and easy way so that I’m able to also access it again from the SAPUI5 bar chart application.

Writing it to a custom DB table seems to be a little too much especially given the nature that the data is only temporary and the overhead of committing/selecting the data from the DB might costs me a few more seconds. I needed the data to be saved across different user sessions, temporary in nature and saved on the application server (not on the DB).

Shared Objects to the rescue! Shared Objects seems like the perfect answer to my requirements above. – You can read more about Shared Objects here if you’re not familiar with them https://help.sap.com/saphelp_nw70/helpdata/en/c5/85634e53d422409f0975aa9a551297/frameset.htm

The function of the Root Class ZCL_SHMA_ALEXA_TSS would be to save the details of the response sent back to Alexa and also provide a method to retrieve that same data – to do that, I wrote two simple methods called SET_COUNTRY and GET_COUNTRY.

Then, in the previous methods that handles the intent from Alexa by selecting data from the DB to structure a response back to Alexa, I’ll add the call to save the data response into the Shared Memory Area. Here’s the sample from the TOP_THREE method below.

Run a quick test to make sure that this is working as expected.

(1) Used the ASK (Alexa Skills Kit) Service Simulator to send a request to the SAP server 

(2) Go to transaction SHMA and verify that we do indeed have the data saved in SAP. Perfect!

Getting it all back

To retrieve the data back from the Shared Memory Area and pass it onto the SAPUI5 application, I decided to (1) write a Function Module to get the data from the Shared Memory Area and (2) generate an OData service and (3) publish the OData service on SAP Gateway. This way, I’ll get a RESTful service that I can call using Javascript on the SAPUI5 application.

Create an OData service with an entity of Country and entity set of CountrySet. Then, implement the GetEntity and GetEntitySet and map it to the FM above.

Then, publish the service through /IWFND/MAINT_SERVICE and run another quick test!

Success! The service is now returning the results in a JSON format that I can consume in my SAPUI5 application.

To Cloud or not to Cloud…

I’ll need to design the SAPUI5 application – my options were either to do it on the SAP Cloud Platform, Web IDE or install a local copy of SAP Web IDE Personal Edition.

Since I’ll be testing this purely on my local machine and there is really no need to publish this service for consumption outside of my own personal computer, I chose to download a copy of the SAP Web IDE Personal Edition – https://tools.hana.ondemand.com/#sapui5, use it to create a quick SAPUI5 HTML template application and I’ll then deploy it over to my local SAP ABAP server.

 

* Got a warning that the SAPUI5 application that I have selected has a higher version than my SAP system. Since the versions are pretty close, I figured that I’ll deal with all the errors individually if I can’t get it to work – but I was glad that it all worked perfectly.

Once I’ve deployed the application to my SAP server, I have to update the path to sap-ui-core.js so that it points to the copy that’s on my SAP system. To find the path of sap-ui-core.js, simply navigate to http://vhcalnplci.dummy.nodomain:8000/sap/public/bc/ui5_ui5/index.html

Update the path of sap-ui-core.js in index.html

Development on the World Wide What???

DISCLAIMER: I’m now in a realm that I’m not usually comfortable in – the world of web development (I mean css, javascript, html). It is time to put my limited web development skills to work! Whenever I hit an issue, I find that Google is always there for me. 🙂

Anyway, I chose to use an open source HTML5 Chart script from http://www.chartjs.org although there other more popular options such as Google Charts, etc, but I find Chart.js simple enough for this requirement and it has good documentation with samples – it is also animated!

Add the chart canvas to the BaseView.view.html file

Wrote some javascript on index.html to add an ajax() call to the OData service that was published earlier every 3 seconds to get the data and update it on our HTML5 chart.

Run a test on the SAPUI5 application to make sure that it launches and it shows a blank chart right now as I do not have any data saved to the Shared Memory Area.

Finishing touches and thoughts

This is it… this POC is now complete. If you’ve seen the video at the start of the post, you should have a pretty good idea on how everything works.

I now have Alexa talking to the SAP server through SAP Cloud Platform, and in that request, when processing in ABAP, save the requested data into a Shared Memory Area. From the SAPUI5 Application, it calls an OData service that pulls data from the Shared Memory Area through a Function Module through an ajax() call and updates the bar chart every 3 seconds – if there are changes!

BONUS: To get to the SAPUI5 Application easily, I added an additional Tile to my Fiori Launchpad!

This little proof-of-concept development has definitely got me thinking about the future direction of user interaction and experience especially at the enterprise level.

Hope you have found this blog post interesting and fun because I’ve definitely had a lot of fun in building it.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Kirill Gorin

    Hello, Alban.

    Could you write on how you connected SAP Web IDE PE to your local ABAP instance. There should be some file created, and I don’t quite understand which port I should use.

    Best regards,

    Kirill

    (0) 
    1. Alban Leong Post author

      Hi Kirill,

      Sure and yes, you need to create a file that points to your local ABAP instance. I’ve uploaded my file here on GitHub for your reference (the IP Address is the only thing you need to change if you’re trying to use this file to connect to NPL) – https://github.com/albanleong/sap/blob/master/NPL 

      You’ve probably already found this link but this is the reference that I followed to get it to work – https://help.hana.ondemand.com/webide/frameset.htm?2cf47f37e34c428c97a51057733c0394.html

      Let me know if you still have issues connecting.

      Best regards,

      Alban

      (1) 
    2. Alban Leong Post author

      To see the port number of your server HTTP/HTTPS services, run transaction SMICM -> Goto -> Services and you should see those port numbers.

      To see the IP address of your server, run transaction SMGW -> Goto -> RFC Connections and there should be a column that says “Hosts Address” with your IP address number.

      (1) 

Leave a Reply