P = NP ?: My First Mobile Application - With More Functionality

Next step in my fist mobile app was to actually add something meaningful to the empty application, for example the functionality to take a photo using camera or select a photo from the gallery. My goal was to add as little as possible to the app to be able to identify only the necessary steps, to create, so to speak, a "minimal viable app". Also I concentrated on the Android because I down't own an iOS device. But I show some iOS related code below in some cases anyway. There may be more needed to create a proper iOS app. First step - download jQuery mobile. Next, after unpacking, I copied the following files into my project structure, into App/www/js folder.

jquery.1.11.1.min.js
jquery.mobile-1.4.5.js
jquery.mobile-1.4.5.min.js
jquery.mobile-1.4.5.min.map

Next, changes to the application config.xml file. Most important change is, probably, the addition of a camera feature.



  <param name="android-package" value="org.apache.cordova.camera.CameraLauncher />


 <param name="ios-package" value="CDVCamera" />

You may modify the apps details from the default ones

Camera app

 JQuery Mobile and Camera


 Evgeny

If you use icons in your app (I guess there should be at least the one), they should be created for all screen resolutions. A good idea, of course, is to create a quality icon in high resolution and then scale it down, rather than vice versa.

Same deal with the splash screen.

Now the actual functionality. I placed all of it into the index.html, but the javaScript could be placed in the separate file. Reference the required javaScript files.

Add a div with the buttons that will provide functionality.

Add a div to test that the image can be retrieved from the camera. Let's place the image into a div on the main page.


Name: Evgeny

Job Title: Developer

Add some javaScript. Call the onLoad from the body tag, for example. What we want is to make sure that PhoneGap is ready to handle native events. After the device is ready, we will take the photo using the camera. If that is successful, the photo should appear on the main screen of the app. If not, we should see the alert which explains the reason for failure.


<body onload="onload()">

...

function onLoad(){
  document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){
  console.log(navigator.camera);
  alert('Device is ready');
}

And actual utilisation of the camera

function TakePhotoUsingCamera(){
  TakePhoto(Camera.PictureSourceType.CAMERA);
}

function TakePhotoFromLibrary(){
  TakePhoto(Camera.PictureSourceType.PHOTOLIBRARY);
}

function onSuccess(imageData){
  var image = document.getElementById('myImage');
  image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message){
  alert('Failed because: ' + message);
}

function TakePhoto(sourceType){
   var camOptions = {
  quality:50,
  destinationType: Camera.DestinationType.DATA_URL,
  sourceType: sourceType,
  correctOrientation: true
   };
 navigator.camera.getPicture(onSuccess, onFail, camOptions);
}

This is probably all of the code that will be needed. Also, the API for the camera has to be added explicitly. Run the following command

phonegap plugin add org.apache.cordova.camera

You will notice that the new folder was added under plugins.

Finally, as with the "Hello world" application, build it and then run on the emulator.

phonegap build android
phonegap install android

You won't be able to use the camera on the emulator, so to test it install the apk on the Android device.
by Evgeny. Also posted on my website

P = NP ?

Tuesday, December 2, 2014

My First Mobile Application - With More Functionality

No comments:

Followers

Blog Archive