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

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:

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:

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

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:

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

When opening the instance you see the flow details:

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