Authored by Rayes Huang, Principal Sales Consultant, Oracle APAC Mobile Team

Pokemon Go surprised
the world with incredibly fast adoption rates as people stayed glued to their mobile devices and attempted to catch their favorite "pocket monsters." Although the app was consumer-focused, it raised interesting questions in the enterprise space about how a company might use Augmented Reality (AR) to “catch and retain more
customers,” increase learning and engagement, generate more revenue and better ROI, and improve productivity.

This post describes the steps to add AR effects to the Oracle Mobile Self Service app. With the addition of AR
in the Oracle Mobile Self Service app, new
employees will be able to find such content as an employee handbook in a
gamified way. For the purposes of this post, we will add an "onboard" function in the employee dashboard
and leverage AR in the "onboard" function.

Firts, watch the video on YouTube to preview the new AR function we
will build in this app.

To add AR effect to the app, follow the steps below:

Prepare your Oracle JET environment and make sure the Oracle
Mobile Self Service app is ready

Install AR plugin

Create WTC file

Create ARchitect World

Add an icon to launch ARchitect World from Oracle Mobile Self
Service

Build the app and test

Prepare
your environment

Before adding AR effects to the app, make sure your environment
has been set up to develop Oracle JET applications, and is able
build mobile applications. Refer to the steps to set up your Oracle JET
environment if you haven’t set up this yet.

The Mobile Self Service app is developed with Oracle JET. The
source code of the Oracle JET project can be retrieved from the tutorial of the app. You should
extract the project file and follow the "Mobile App Setup" section in the
tutorial to get your default project code ready. Make sure you can build the
mobile app with the default project code.

Install AR plugin

OracleJET leverages Cordova plugins to work
with device capabilities. To add AR effects to the app, the first thing you need
to do is to install AR plugin to the current Oracle JET project.

We will use Wikitude’s Cordova plugin in this guide.

At the command
line, change to the "hybrid" folder in your project. Run the following command
to add the plugin.

cordova plugin add
https://github.com/Wikitude/wikitude-cordova-plugin.git –save

If you are working
with the Android platform, update your Android platform to allow it working with
the AR plugin.

cordova platform update android@5.0.0

Go to the license
page in Wikitude, sign up and get your
license key for the Wikitude SDK.

Open the
downloaded Wikitude plugin under hybrid\plugins\com.wikitude.phonegap.WikitudePlugin,
and replace the text ENTER-YOUR-KEY-HERE for the property this._sdkKey in
WikitudePlugin.js in line 12.

Try to build the
mobile app files again to make sure the Wikitude plugin has been successfully
installed without any errors.

Create WTC file

A WTC file is a target
collection file that stores the digital footprint of your images that will be
recognized by the AR SDK. We will create the WTC file and add the target image
to the WTC file, and use the WTC file in our project in the next step.

Log into the
Wikitude Target Manager, create a new project and add the image to be
recognized by the AR SDK as a target in the project. In our case, we will add
the image in the employee welcome letter to the project. Download the WTC file
which we will use later in our Oracle JET project.

Create ARchitect World

We will leverage
the Client Recognition examples to create the ARchitect
world in our app. Source code of the examples can be found on GitHub.

Under the "src" folder
in the Oracle JET project, create a folder ‘ar’ and place the ade.js file from
the example code to the "ar" folder.

Create the "onboard" folder and place the assets related to this ARchitect world to the "onboard." The final structure should be like this:

The index.html
file is the page to be loaded in this ARchitect world. The following three JS files
will be loaded in the index.html:

architect://architect.js

../ade.js

js/onboard.js

We will show three
images in the AR layer when the camera recognizes the image in the welcome
letter. We will register the WTC file and implement the business logic to create
the AR layer in the onboard.js file.

In this demo, we
use the WTC file that is created in the previous step.

this.tracker = new
AR.ClientTracker("assets/onboard.wtc", {

onLoaded: this.worldLoaded

});

We will show three
images in the AR layer:

assets/employee-handbook.png

assets/company-logo.png

assets/employee-directory.png

For each of the
images to be shown, we need to create the image resource and pass it to the AR.ImageDrawable
object. The link of the employee handbook image points to the employee handbook
document in Oracle Document Cloud Service.

var imgOne = new
AR.ImageResource("assets/employee-handbook.png");

var overlayOne = new
AR.ImageDrawable(imgOne, 0.4, {

offsetX: -0.7,

offsetY: -0.3,

onClick: function () {

AR.context.openInBrowser("https://publicdocs-corp.documents.us2.oraclecloud.com/documents/link/LDB6545BEE605C2115586C5CF6C3FF17C1177E4725F3/fileview/D0338A5E2661188AF4D08AFCF6C3FF17C1177E4725F3/_Employee-Handbook-Example.docx");

}

});

var imgTwo = new
AR.ImageResource("assets/company-logo.png");

var overlayTwo = new
AR.ImageDrawable(imgTwo, 0.15, {

offsetX: 0.25,

offsetY: 0.35,

onClick: function () {

AR.context.openInBrowser("https://www.oracle.com/index.html");

}

});

var imgThree = new
AR.ImageResource("assets/employee-directory.png");

var overlayThree = new
AR.ImageDrawable(imgThree, 0.3, {

offsetX: -0.2,

offsetY: -0.3,

onClick: function () {

AR.context.openInBrowser("http://www.oracle.com/webfolder/technetwork/jet/public_samples/WorkBetter/public_html/index.html?root=people");

}

});

Finally, we pass
all the AR.ImageDrawable objects to the AR.Trackable2DObject and specify the
name of the image in the WTC file to be recognized.

var pageOne = new
AR.Trackable2DObject(this.tracker, "New-Employee-Welcome-Email", {

drawables: {

cam: [overlayOne, overlayTwo,
overlayThree]

}

});

The full
onboard.js file:

var World = {

loaded: false,

init: function initFn() {

this.createOverlays();

createOverlays: function createOverlaysFn() {

this.tracker = new AR.ClientTracker("assets/onboard.wtc", {

onLoaded: this.worldLoaded

});

var imgOne = new
AR.ImageResource("assets/employee-handbook.png");

var overlayOne = new AR.ImageDrawable(imgOne, 0.4, {

offsetX: -0.7,

offsetY: -0.3,

onClick: function () {

}

});

var imgTwo = new
AR.ImageResource("assets/company-logo.png");

var overlayTwo = new AR.ImageDrawable(imgTwo, 0.15, {

offsetX: 0.25,

offsetY: 0.35,

onClick: function () {

AR.context.openInBrowser("https://www.oracle.com/index.html");

}

});

var imgThree = new
AR.ImageResource("assets/employee-directory.png");

var overlayThree = new AR.ImageDrawable(imgThree, 0.3, {

offsetX: -0.2,

offsetY: -0.3,

onClick: function () {

AR.context.openInBrowser("http://www.oracle.com/webfolder/technetwork/jet/public_samples/WorkBetter/public_html/index.html?root=people");

}

});

var pageOne = new AR.Trackable2DObject(this.tracker,
"New-Employee-Welcome-Email", {

drawables: {

cam: [overlayOne, overlayTwo,
overlayThree]

}

});

worldLoaded: function worldLoadedFn() {

var cssDivLeft = " style='display: table-cell;vertical-align:
middle; text-align: right; width: 50%; padding-right: 15px;'";

var cssDivRight = " style='display: table-cell;vertical-align:
middle; text-align: left;'";

document.getElementById('loadingMessage').innerHTML =

"<div" +
cssDivLeft + ">Scan Target (welcome letter):</div>" +

"<div" +
cssDivRight + "><img src='assets/onboard-s.jpg'></img></div>";

// Remove Scan target message after 10 sec.

setTimeout(function () {

var e = document.getElementById('loadingMessage');

e.parentElement.removeChild(e);

}, 10000);

}

};

World.init();

Add an icon to launch ARchitect World

We will leverage
one of the unused icons in the employee dashboard to launch the ARchitect World
created in previous step.

In the ViewModel
file of the employee dashboard: src\app\pages\dashboard\dashboard.js, we will
create a new variable "app" and load the AR plugin inside the "app" variable.

var app = {

initialize:
function () {

this.bindEvents();

bindEvents:
function () {

document.addEventListener('deviceready',
this.onDeviceReady, false);

onDeviceReady:
function () {

app.wikitudePlugin
=
cordova.require("com.wikitude.phonegap.WikitudePlugin.WikitudePlugin");

}

Add new functions under "app" to load the ARchitect
World by URL

loadARchitectWorld: function
(architectWorld) {

app.wikitudePlugin.isDeviceSupported(function
() {

app.wikitudePlugin.setOnUrlInvokeCallback(app.onUrlInvoke);

if
(cordova.platformId == "android") {

app.wikitudePlugin.setBackButtonCallback(app.onBackButton);

}

app.wikitudePlugin.loadARchitectWorld(function
successFn(loadedURL) {

app.isArchitectWorldLoaded
= true;

if
(architectWorld.requiredExtension ===
"ObtainPoiDataFromApplicationModel") {

injectGeneratedPoiJsonData();

}

},
function errorFn(error) {

app.isArchitectWorldLoaded
= false;

alert('Loading
AR web view failed: ' + error);

architectWorld.path,
architectWorld.requiredFeatures, architectWorld.startupConfiguration

);

},
function (errorMessage) {

alert(errorMessage);

architectWorld.requiredFeatures

);

loadCustomARchitectWorldFromURL: function
(url) {

var
world = {

"path":
url,

"requiredFeatures":
["2d_tracking", "geo"],

"startupConfiguration":
{"camera_position": "back"}

};

app.isArchitectWorldLoaded
= false;

app.loadARchitectWorld(world);

Add another
function under "self" to call the above function to load the ARchitect World
when the icon on the dashboard is clicked.

self.clickOnboard = function (data, event)
{

app.loadCustomARchitectWorldFromURL("www/ar/onboard/index.html");

};

Add a variable to
hold the label value which will be shown in the html page.

self.lng_onBoard = "Onboard";

In the View file src\app\pages\dashboard\dashboard.html,
we will leverage the existing taxforms icon to trigger the "onboard" function.
Find the taxforms link in the employeeMenu, replace the existing line with
below

Build the app and test

Now we have completed
the changes to the code, let’s build the mobile app again and test.

Again, follow the
section "Mobile App Setup" in the tutorial of the Oracle Mobile Self Service Solution to build the mobile app files
from this Oracle JET project and install on your phone.

Here are the steps
for testing:

1) Launch
the app and sign in. If you don’t have Oracle Mobile Cloud Service fully
configured, check the "Simulate Offline" option in the login page.

2) After
login, click on the "Onboard" icon, the ARchitect world is loaded. Now you can
scan the image in the welcome letter, the three images you added in the AR
layer will be shown.

3) Click
on the employee handbook image, it will ask if you want to browse the
document in the Oracle Documents Cloud Mobile app or within the browser. If you
have the Oracle Documents Cloud Mobile app installed on your phone, you can choose
the first option. Otherwise, use the browser to view the document.

You are welcome to check the video we have on YouTube to verify the result. Cheers and enjoy the
AR magic!

Author

Dan Brooks

Mobile Self Service Apps & Augmented Reality

Prepare
your environment

Install AR plugin

Create WTC file

Create ARchitect World

Add an icon to launch ARchitect World

Build the app and test

Author

Forrester Wave: Mobile Development Platforms, Q4 2016

Mobile Challenge 2.0

Mobile Self Service Apps & Augmented Reality

Prepare your environment

Install AR plugin

Create WTC file

Create ARchitect World

Add an icon to launch ARchitect World

Build the app and test

Author

Authors

Forrester Wave: Mobile Development Platforms, Q4 2016

Mobile Challenge 2.0

Prepare
your environment