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.
https://youtu.be/FXeFpnmO3UA
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!
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!
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.
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
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.
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.
Part one: Amazon Alexa + SAP ABAP AS 750 (Developer Edition) + SAP Cloud Platform (Trial) with API Management
Part two: Visualizing Amazon Alexa’s response with SAP ABAP AS 750 (Developer Edition) + SAPUI5 (This post)
Part three: Verifying Amazon Alexa requests with SAP Cloud Platform – Cloud Foundry + API Management
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.
- SAP + Alexa Innojam https://www.youtube.com/watch?v=gHUjGzWyr-c
- SAP BusinessObjects Design Studio and Amazon Echo by Visual BI Solutions https://www.youtube.com/watch?v=Z-oDzbc1RZY
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.
https://youtu.be/FXeFpnmO3UA
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.
----------------------------------------------------
Part one: Amazon Alexa + SAP ABAP AS 750 (Developer Edition) + SAP Cloud Platform (Trial) with API Management
Part two: Visualizing Amazon Alexa’s response with SAP ABAP AS 750 (Developer Edition) + SAPUI5 (This post)
Part three: Verifying Amazon Alexa requests with SAP Cloud Platform – Cloud Foundry + API Management
- SAP Managed Tags:
6 Comments
