# 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**](https://monaca.mobi/ja/directimport?pid=640812d8e788850e2dda647a)
**Tested Environment**
* Android 11.0
* iOS 14.3
| 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.
```markup
HelloWorld!
Start Demo
```
The above html code inside the `` 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:
```javascript
...
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 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:
```markup
...
Call 411
...
```
{% hint style="info" %}
In order to use the `href="tel:411"`, the following setting is needed in `config.xml` file:
```markup
```
{% endhint %}
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:
```javascript
...
var vibrate = function() {
navigator.vibrate(500);
};
...
```
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:
```javascript
...
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:
```javascript
...
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.