Hello World App

This sample app is a Core Cordova Plugins Demo showing several device functionalities.

Demo

Import Hello World App to your Monaca Account

Tested Environment

  • Android 9.0
  • iOS 12.2
index.html phonegap-demo.html

File Components

File Description
index.html The Startup page
phonegap-demo.html The Core Cordova Plugins Demo page
phonegap-demo/master.css The style sheet for the Core Cordova Plugins Demo page
phonegap-demo/main.js The JavaScript file handling implementation in the Core Cordova Plugins Demo page
css/style.css The style Sheet for the whole application
img/icon/*.png All icon files needed to use this template

Required JS/CSS Components

  • jQuery

HTML Explanation

index.html

index.html is the Startup page.

<body>
    <h1>HelloWorld!</h1>
    <a class="button--large" href="phonegap-demo.html">Start Demo</a>
</body>

The above html code inside the <body> tag is showing a HelloWorld! phrase and a Start Demo button as shown below.

phonegap-demo.html

phonegap-demo.html shows a Core Cordova Plugins Demo with the basic phone information and a list of functions as below:

  • Get Location: Get current location of the phone.
  • Call 411: Call 411.
  • Vibrate: Vibrate the phone.
  • Get a Picture: Turn on the phone’s camera.
  • Check Network: Check the current type of network the phone is using.

The JavaScript code corresponds to these functions will be explained in the next section.

JavaScript Explanation

The main.js is a JavaScript file handling the implementation of the Core Cordova Plugins Demo page. There are 5 main functions in this file:

Get Location

Get current location of the phone. Below is the JavaScript code of this function:

...
var getLocation = function() {
  var suc = function(p) {
      alert(p.coords.latitude + " " + p.coords.longitude);
  };
  var locFail = function() {
  };
  navigator.geolocation.getCurrentPosition(suc, locFail);
};
...

When click on the Get Location button, a message showing the current location of phone will appear as below:

Call 411

Call 411. Below is the JavaScript code of this function:

...
<a href="tel:411" class="btn large">Call 411</a>
...
In order to use the href="tel:411", the following setting is needed in config.xml file: 
<allow-intent href="tel:*" />

When click on the Call 411 button, a confirmed message of the call is appeared.

Vibrate

Vibrate the phone. Below is the JavaScript code of this function:

...
var vibrate = function() {
  navigator.notification.vibrate(0);
};
...

When click on the Vibrate button, you will notice that your phone vibrates.

Get a Picture

Turn on the phone’s camera. Below is the JavaScript code of this function:

...
function dump_pic(data) {
  var viewport = document.getElementById('viewport');
  console.log(data);
  viewport.style.display = "";
  viewport.style.position = "absolute";
  viewport.style.top = "10px";
  viewport.style.left = "10px";
  document.getElementById("test_img").src = data;
}

function fail(msg) {
  alert(msg);
}

function show_pic() {
  navigator.camera.getPicture(dump_pic, fail, {
    quality : 50
  });
}
...

When click on the Get a Picture button, the phone camera is turned on. If you take a picture and use it, it will be displayed in the page as shown below otherwise a message will be displayed (see below):

Check Network

Check the current type of network the phone is using. Below is the JavaScript code of this function:

...
function check_network() {
  var networkState = navigator.network.connection.type;

  var states = {};
  states[Connection.UNKNOWN]  = 'Unknown connection';
  states[Connection.ETHERNET] = 'Ethernet connection';
  states[Connection.WIFI]     = 'WiFi connection';
  states[Connection.CELL_2G]  = 'Cell 2G connection';
  states[Connection.CELL_3G]  = 'Cell 3G connection';
  states[Connection.CELL_4G]  = 'Cell 4G connection';
  states[Connection.NONE]     = 'No network connection';

  confirm('Connection type:\n ' + states[networkState]);
}
...

When click on the Check Network button, the current network type information will be displayed.