Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
albanleong
Contributor
TL;DR: A fun and small proof-of-concept development in ABAP BSP with AR.js to display the PO's overall status in real-time on a browser through WebAR.

I've recently come across this awesome and cool JavaScript library called AR.js (Github link) which enables creation of WebAR application that works entirely on a browser. It is currently being maintained by Nicolò Carpignoli (Twitter: @nicolocarp) and he has written a couple of blogpost that inspired the build this small POC demo based on the same example in his blogpost. (Link: "How to deliver AR on the web only with a QR code")

My scenario


Imagine if you have either a physical printout or a PDF of a Purchase Order (or any document) and you'd like to get some real-time information on it but doesn't want to pick up the phone to call and talk to someone or run a report. So, how about just simply pointing your phone camera at it and get it's real-time status?

This setup is made possible with AR.js - by using less than 20 lines of HTML code on a BSP application and a QR code on the printout, I can display the status of a PO in WebAR. I've recorded a short video of this POC and you can watch it on YouTube (Duration: 3 mins 25 secs).



ABAP Server and the BSP Application


I've used the ABAP Developer Edition server to host a small BSP application and expose it to the Internet on a secure tunnel through ngrok (Website: "ngrok - secure introspectable tunnels to localhost").

First, a new BSP application called "ZARJS" with a single Index.html page is created. In the layout editor, enter the HTML code that will call the AR.js library and also detect the barcode marker which will then display the "PO Status text" value.


BSP Page index.html with less than 20 lines of HTML code


The "index.html" page has two page attributes:

  1. poNumber - also used as a URL query parameter so that the BSP page knows what PO number it has to go retrieve the status for.

  2. poStatus - a variable that will get the PO Status Text and display it in the HTML page (see HTML id: text-display on line 13)



And finally, in the "Event Handler" tab - add a few lines of ABAP code that will first, get the query URL parameter 'poNumber' and then retrieve the Status Text by doing a join on table SNWD_PO and DD07T.


That's it for the BSP application and then for the demo, I started the ngrok tunnel so that I can get the URL that's generated (it changes every time with the FREE plan).


ngrok secure tunnel redirecting to local ABAP server


For the QR Code - just like in Nicolò's blogpost, I used QRCode Monkey to manually generate a QR code with the following URL and also generated an image of the barcode marker with the value "18" and upload it to QRCode Monkey as a logo.

QRCode URL: https://cc77b5ac0f60.ngrok.io/sap/bc/bsp/sap/zarjs/index.html?poNumber=300000039

For the purpose of the POC, a PDF of the PO is manually created and the QRCode that was generated is embedded into it as an image. You can watch how it all works in the YouTube video above.

Conclusion


AR/VR is an emerging development space and the possibility of just using your web browser to get a WebAR experience with a small JavaScript library makes building AR apps a lot easier.

There are other capabilities within the AR.js framework that's really interesting such as location tracking, image tracking, events trigger and support of multiple markers.

Hope you've enjoyed this small little POC and the source code for the BSP application can be found on Github and you can get it using ABAPGit.

Github repo: https://github.com/albanleong/arjspoc

ABAPGit

 

 
1 Comment
Labels in this area