# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://en.docs.monaca.io/sampleapp/samples/hello_world.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.