Last week I entered the Oracle Social Network Challenge that was held at Oracle Open World. Unfortunately I couldn’t attend the event this year but that didn’t stop me from entering.
The goal of the Challenge was to build something that solves a business problem using Oracle Social Network; its Public API and another service or application.
Fishbowls Mobile GeoTagging Solution.
My proposed solution was to design and simplify GeoLocation mapping, and automate updates for users and teams on the move; who don’t have access to a laptop or want to take their ipads out – but allow them to make quick updates to OSN and upload photos taken from their mobile device – there and then.
As part of this; the plan was to include a rules engine that could be configured by the user to allow the device to automatically update and post messages when they arrived at a set location(s). Inspiration for this came from on{x} – automate your life.
For more info on how I built the app plus access to the viewlet and more screenshots read on..
Break down of actions I wanted to provide::
Login Screen
Ability to allow user to login, logout.
I setup 4 demo users – realistically you would only need 1 user but this option provided me with quick access to change the user for demonstration purposes.
Home/Actions Screen
A springboard page where the user would be redirected to after login to access main functionality of the application.
Checkin Screen
Enable the user to checkin at their current location Latitude/Longitude.
Very much like fourSquare, facebook, twitter.
Locate Team Members
View location of your team members around the world based on the last place they checked in.
Message Stream
Show a list of messages from OSN, provide the ability to post a message and tag a location for quick access.
Capture Photo
Use the device to capture a photo and check in to Oracles Social Network.
Rules Engine
A configurable rules engine that would allow users to setup multiple rules to automate and update OSN on the fly – initally around GPS position and provide the option to enable or disable the rule.
Quick Nav
Allow users to access any action screen from their current screen without needing to go to the home/actions springboard screen.
How was it built; what technology did you use?
WireFraming
After writing an inital plan of actions (functionality I wanted to provide) – listed above. I sketched out a basic wireframe of each screen and prepared a quick flow (persona) of how I saw myself using a device like this.
Design
I then took that wireframe and created a mockup of the user interface from within photoshop.
HTML templating + Mobile screen support
Next I created a set of html 5 templates, as I was creating a hybrid web app that I only wanted to target for mobile devices – I set the viewport as follows –
<meta name=”viewport” content=”width=322, user-scalable=no”>
This means the resolution would always be 322px on any mobile device unless the resolution was less then it would default to 320px.
Unfortunately I could not set the viewport width to 320 as modern android devices ignore <=320px setting.
If I was creating a responsive app then the above viewport setting would be different.
Retina Screen Support
To support retina screens I doubled the image size and set the images as backgrounds within DOM tags and and set the background size to cover or 100%. If you want to know more about designing for retina and mobile devices I highly recommend retinafy.me
This approach allows the image to scale down and look crisp and not blured on the retina and none devices.
Javascript libraries
I integrated the following javascript libraries – cordova-2.1.0.js, Zepto.js and iScroll, mapsV3.
The best way I can describe Zepto is a jquery syntax library optimised and designed for mobile devices
iScroll is used to provide scrolling within the application.
Cordova used to call device (phonegap/cordova) functionality ie GPS, Camera.
MapsV3 – google maps API
Javascript Templating
I migrated the html templates to my own javascript templating library and applied neccessary mobile tweaks ie replaced all A Tags with span tags with onclick events instead of href=”javascript:function” a tags are aweful for mobile development!.
More Info..
The whole application sits on 1 html page with functionality all handled by javascript, even back button is handled by a stored JS array.
Integration with the OSN
I used the REST API JSON stream provided by OSN to handle all interaction, using AJAX calls to authenticate and update, delete upload and create.
PhoneGap/Cordova 2.1
I decided to use phonegap instead of ADF Mobile although this was a tempting thought!..
The reason.. My phonegap app ended up being 2mb.. If I had packaged it with ADF Mobile it would of been more in the region of 50mb. For older devices still running Android 2.x 50mb is half of the available resources most of the devices have.. Plus I wasn’t really going to get any additional benefit.. Just a talking point 🙂 may have given me bonus points..
Testing
I have 3 Android phones HTC Desire 2.3.x, Nexus S 4.x, and Galaxy S3 4.x this allowed me to test on Old devices and OS as well as test retina support.
Finally package and deploy on google
When I was happy I package the app and posted in on Google if your quick you may still see it here
https://play.google.com/store/apps/details?id=com.osn.fishbowl
Here is a screenshot if I have removed it from google play.
DO NOT INSTALL ON YOUR DEVICE – YOU NEED A KEY TO ACCESS THE APP..
Challenges and issues I faced
I wished I could say I didn’t have any problems but that would be lying..
The first was with CORS although the environment was supposed to have CORS enabled I couldn’t get it to work…
So in the end I disabled chrome.exe –disable-web-security for testing ajax requests and development.
Uploading a picture – wow this was a challenge in phonegap!..
So usually you would get the file like this on a html page using jquery..
<input type=”file” id=”file” />
<script>
function uploadDocument() {
var file = $(‘#file’)[0].files[0];
var fileName = file.name;
var fileType = file.type;
var folderId = FOLDER_ID;
$.ajax({
type : ‘POST’,
url : osnUrl + ‘/social/api/v1/documents/’ + folderId + ‘/’ + fileName,
beforeSend : function(request) {
request.setRequestHeader(‘X-Waggle-RandomID’, randomID);
},
data : file,
cache : false,
contentType : fileType,
processData : false,
success : function() {
$(‘#status’).text(‘File uploaded.’);
$(‘#msg’).focus();
},
error : function(jqXHR, textStatus, errorThrown) {
$(‘#status’).text(‘Error: ‘ + textStatus, errorThrown);
}
});
}
</script>
The problem you have with phonegap is there is no way to get the binary to post.
You can grab the base64 image but OSN currently does not support base64 uploads.
You have access to the file location where the image is hosted but javascript doesn’t have access to the file off the local device.. Sigh.
In the end I was able to use the native phonegap java app to do the upload although this was also not easy as the only upload it currently supports is multipart form uploads – I’m lucky as this functionality had just been written into the release we had access too.
Next authentication to do the upload.. I had to figure a way to get the cookie from the web interface to java.. Sounds easy until you find out the cookie request header is locked down from web browsers preventing you accessing it from javascript..
In the end I managed to find a solution but it was far from easy..
Final problems was tiredness and making a few simple typos with my rest API calls.. This is fine but when you get an error response that doesn’t mean much it can be a problem to debug to find out what the exact problem was.
Viewlet and screenshots!
Here you go enjoy..
I will do a talk over the viewlet maybe next week or this weekend if I get the time in the meantime enjoy watching the silent video.
[vimeo 50720772 w=500 h=281]
