Follow Us on Twitter

Storing photos in the database through REST service from an Oracle JET 2.0 hybrid mobile app

by Herman Brunnekreef on March 22, 2016 · 4 comments

In my previous post I made a mobile hybrid application with Google Maps integration. Now let’s go a step further.

An insurance company want’s that their customers can submit a damage immediately in case of an accident. A customer can download an app and install it on their device. When the customer is involved in an accident, he or she can open the app, enter some data and take pictures of the accident. Then the customer can send the data to the insurance company.
The app is created in Oracle JET 2.0. The app sends the data to an OSB-process that is exposed as REST. The OSB sends the data to a SOA Suite process that inserts the data in a database.

I created a mobile hybrid application with Oracle JET 2.0. A screenshot is shown below:
img1

The customer can enter their licenseplate in the app. The date and time of the accident can be filled. The latitude and longitude is determined of the location where the customer enters the data. Then the customer can enter a damage description and take a picture of the damaged car. When everything is filled in correctly, the customer can send the data to the insurance company.

How to add the location I described in a previous post. To add the camera functionality, add the cordova camera plugin to your JET 2.0 project.

cordova plugin add cordova-plugin-camera

Then add the implementation of the plugin:

navigator.camera.cleanup(onSuccessClean, onFailClean);
            navigator.camera.getPicture(onSuccessCamera, onFailCamera, {
                quality: 100,
                destinationType: Camera.DestinationType.DATA_URL,
                correctOrientation: true
            });

First the images will be cleaned that are stored in the tempory storage location.
Then getPicture opens the devices camera and the user can take a picture.

When there is no error the function onSuccessCamera is called:

var onSuccessCamera = function (imageData) {
                            var image = document.getElementById('picture');
                            image.src = 'data:image/jpeg;base64,' + imageData;
                            image.style.margin = "10px";
                            image.style.display = "block";
                            self.image = imageData;
                        };

The variable imageData is of type base64binary.

So when the user pushes the “Send” Button a JSON string is generated:

var inputdata = {
                'LicensePlate': self.licenseplateValue,
                'DateTime': self.dateTimeValue,
                'Latitude': self.latitudeValue,
                'Longitude': self.longitudeValue,
                'DamageDescripition': self.descriptionValue,
                'Picture': self.image
                };

This JSON string is sent to the exposed REST service of the OSB-process.

To connect the JET application to the OSB Middleware I created a simple service. The exposed service is of type REST. This is the design view of the OSB-process:
img2

This is the designview of the SOA Suite process. In the BPEL-process there is an Assign with the mapping to the database adapter.
img3

So when a customer submit’s a car damage, then the data is sent from the device via the REST service to the OSB.
In the Enterprise Manager you can see the request and response of the instance:
img4

And when you open the Enterprise Manager for soa-infra, you see the flow instance:
img5

When opening the instance you see the flow details:
img6

And the final step is to query the database, and you see the submitted damage:
img7

Storing photos in the database through REST service from an Oracle JET 2.0 hybrid mobile app, 5.0 out of 5 based on 1 rating
Ratings:
VN:D [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

{ 4 comments… read them below or add one }

Mandy March 25, 2016 at 9:33 am

Hi Herman, Really like your sharing on Oracle Jet Hybrid. 🙂
I am new to Oracle Jet Hybrid. Trying to create some sample app, but i am stuck on the drop down list css. The component couldnt display properly. Could you please advice? Thanks

Hope to see more sharing from you 🙂

Reply

Herman Brunnekreef March 25, 2016 at 4:17 pm

Thank you.
Do you mean an ojselect component? Did you initialize the component, like this: SelectLocationValue = ko.observable();

This is the description of the ojSelect:
data-bind=”ojComponent: {component: ‘ojSelect’,
optionChange: optionChangedHandler,
value: SelectLocationValue}”>

Did you add option values to the ojSelect?

Reply

KC March 30, 2016 at 7:50 am

Hi Herman, thanks alot your Oracle Jet Hybrid sharing.

I have tried build Oracle Jet Hybrids, and i found that, the component like ojinputtext, ojselect, ojbutton display way are different with others browser. So i try decorate by add on the own css

But i stuck in ojselect text align css. The text align css is work fine in android apps and others browser, but for ios apps, the text align always in right site, how could make it to left same with others?

I have tried add in text-align: left; direction: “ltr”; into select option css
and add on dir=”ltr” to html, but unfortunely, its no work.

Do you has any idea on it?

Reply

Herman Brunnekreef March 31, 2016 at 9:18 am

Hi KC,

In Oracle JET 2.0 there are native themes for the three main mobile suppliers. Here is a description: https://community.oracle.com/community/development_tools/oracle-jet/blog/2016/03/01/whats-new-in-oracle-jet-200 (at native themes).
These themes have their own CSS.
Back to your question; I can’t help you. I have no idea. You can post your question at the Oracle JET forum: https://community.oracle.com/community/development_tools/oracle-jet
Maybe they can help you.

Herman

Reply

Leave a Comment

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter