I'm having trouble getting any sort of interactivity from my first Cordova project. I have experience in HTML, Javascript and CSS, so I figured Cordova would be a perfect introduction to hybrid app development but I can't seem to get even a basic HTML button to work on the app.
I'm using Windows 10 with Android Studio and Cordova installed. I think I've set up the project file structure correctly. I've been following Cordova's docs and have installed the geolocation plugin on all device types. For testing I'm using both the virtual android devices in Android Studio, and an android phone (OnePlus X), it's connected correctly (the app opens up on the phone whenever I type cordova run android into the console).
I started off trying to get my current location, and then displaying the coordinates as an alert. This wasn't working, so to try something more simple I added a button that should show an alert pop-up when clicked, but neither are working. This is my current code:
www/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Security-Policy content=default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *>
<meta name=format-detection content=telephone=no>
<meta name=msapplication-tap-highlight content=no>
<meta name=viewport content=user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width>
<link rel=stylesheet type=text/css href=css/index.css>
<title>Hello World</title>
</head>
<body>
<div class=app>
<h1 id=headertext>My first Cordova App!</h1>
<div id=deviceready class=blink>
<p class=event listening>Connecting to Device</p>
<p class=event received id=geolocation>Device is ready!</p>
</div>
<br>
<div>
<button type=button onclick=basicAlertTest();>Click Me!</button>
</div>
</div>
<script type=text/javascript charset=utf-8>
// onSuccess Callback
// current GPS coordinates
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n' +
'Altitude: ' + position.coords.altitude + 'n' +
'Accuracy: ' + position.coords.accuracy + 'n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' +
'Heading: ' + position.coords.heading + 'n' +
'Speed: ' + position.coords.speed + 'n' +
'Timestamp: ' + position.timestamp + 'n');
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
// Listening for the device to be ready
document.addEventListener(deviceready, onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.geolocation should be able to run successfully now...);
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Checking to see if a basic alert will appear on click of Click me! button
function basicAlertTest(){
alert(This is the alert test, button works!);
}
</script>
<script type=text/javascript src=cordova.js></script>
<script type=text/javascript src=js/index.js></script>
</body>
</html>
Is there something basic I'm missing? I thought I would be able to code in HTML/Javascript/CSS as normal, but would need to learn some lines of code to integrate the plugins that use native device features (like the geolocation or camera). I've made sure to install the geolocation plugin (using cordova plugin add cordova-plugin-geolocation), but the alert isn't appearing. Do I need a separate plugin to display alerts/interact with the screen?
Also, I notice that whenever I test it virtually, if I look at the location in Extended Controls, the coordinates it gives are:
Longitude: -122.0840
Latitude: 37.4220
Altitude: 0.0
Which is Mountain View, CA, about 8,000 miles away from me ¯_(ツ)_/¯
Here's a screenshot:
I am testing this locally, does that make a difference? I'd really appreciate any help or advice on this, I'm probably missing something really obvious. Thank you in advance!
UPDATE 1
The list of installed plugins returned from cordova plugin ls:
cordova-plugin-compat 1.0.0 Compat
cordova-plugin-dialogs 1.3.0 Notification
cordova-plugin-geolocation 2.4.0 Geolocation
cordova-plugin-whitelist 1.3.0 Whitelist
UPDATE 2
The onSuccess function is supposed to run after the device is ready. When it runs it should show an alert containing location details, but since I was getting the device ready message with no alert appearing, I decided to add a button to manually call the function as well.
I'm now certain onSuccess is not running correctly when the device is ready, because whenever I click the button to make it run manually the following error shows up in the console:
Uncaught TypeError: Cannot read property 'coords' of undefined
I'm confused as I'm using the same code as shown here: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html
Also, I've noticed that the index template I'm working off contains <script type=text/javascript src=cordova.js></script>, however when I look at the folder containing my index file, there is no cordova.js file, it's not located there, and I can't seem to find it among the cordova download, is this normal or does it need to be downloaded separately?
Latest attempt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Security-Policy content=default-src * gap://ready file:; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; img-src * data: 'unsafe-inline'>
<meta name=format-detection content=telephone=no>
<meta name=msapplication-tap-highlight content=no>
<meta name=viewport content=user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width>
<link rel=stylesheet type=text/css href=css/index.css>
<title>Hello World</title>
<script type=text/javascript src=cordova.js></script>
<script type=text/javascript src=js/index.js></script>
</head>
<body>
<div class=app>
<h1 id=headertext>My first Cordova App!</h1>
<div id=deviceready class=blink>
<p class=event listening>Connecting to Device</p>
<p class=event received id=geolocation>Device is ready!</p>
</div>
<br>
<div>
<button type=button onclick=basicAlertTest();>Click Me!</button>
<button type=button onclick=onSuccess();>Run onSuccess function</button>
</div>
</div>
<script type=text/javascript charset=utf-8>
// onSuccess Callback
// current GPS coordinates
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + 'n' +
'Longitude: ' + position.coords.longitude + 'n' +
'Altitude: ' + position.coords.altitude + 'n' +
'Accuracy: ' + position.coords.accuracy + 'n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' +
'Heading: ' + position.coords.heading + 'n' +
'Speed: ' + position.coords.speed + 'n' +
'Timestamp: ' + position.timestamp + 'n');
};
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + 'n' +
'message: ' + error.message + 'n');
}
// Listening for the device to be ready
document.addEventListener(deviceready, onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.geolocation should be able to run successfully now...);
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// Checking to see if a basic alert will appear on click of Click me! button
function basicAlertTest(){
console.log(This is the alert test, button works!);
alert(This is the alert test, button works!);
}
</script>
</body>
</html>
