Skip to Content
Technical Articles

Create a WebAR experience with ABAP and Ar.js

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%20index.html%20with%20less%20than%2020%20lines%20of%20HTML%20code

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%20secure%20tunnel%20redirecting%20to%20local%20ABAP%20server

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

 

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.