J'ai du mal à obtenir une quelconque interactivité de mon premier projet Cordova. J'ai de l'expérience en HTML, Javascript et CSS, et je pensais que Cordova serait une introduction parfaite au développement d'applications hybrides, mais je n'arrive pas à faire fonctionner un bouton HTML, même basique, dans l'application.
J'utilise Windows 10 avec Android Studio et Cordova installés. Je pense avoir configuré la structure des fichiers du projet correctement. J'ai suivi les docs de Cordova et j'ai installé le plugin de géolocalisation sur tous les types d'appareils. Pour les tests, j'utilise à la fois les appareils Android virtuels dans Android Studio, et un téléphone Android (OnePlus X), il est connecté correctement (l'application s'ouvre sur le téléphone chaque fois que je tape "cordova run Android" dans la console).
J'ai commencé par essayer d'obtenir ma position actuelle, puis d'afficher les coordonnées sous forme d'alerte. Cela ne fonctionnait pas, alors pour essayer quelque chose de plus simple, j'ai ajouté un bouton qui devrait afficher une fenêtre d'alerte lorsqu'on clique dessus, mais aucun des deux ne fonctionne. Voici mon code actuel :
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> Y a-t-il quelque chose de fondamental qui m'échappe ? Je pensais être capable de coder en HTML/Javascript/CSS comme d'habitude, mais j'aurais besoin d'apprendre quelques lignes de code pour intégrer les plugins qui utilisent les fonctionnalités natives de l'appareil (comme la géolocalisation ou l'appareil photo). Je me suis assuré d'installer le plugin de géolocalisation (à l'aide de cordova plugin add cordova-plugin-geolocation ), mais l'alerte n'apparaît pas. Ai-je besoin d'un plugin séparé pour afficher les alertes/interagir avec l'écran ?
De plus, j'ai remarqué qu'à chaque fois que je le teste virtuellement, si je regarde l'emplacement dans "Contrôles étendus", les coordonnées qu'il donne sont :
Longitude: -122.0840 Latitude: 37.4220 Altitude: 0.0
Qui est Mountain View, CA, à environ 8000 miles de moi ¯_(ツ)_/¯.
Voici une capture d'écran :
Je le teste localement, est-ce que cela fait une différence ? J'apprécierais vraiment toute aide ou conseil à ce sujet, je rate probablement quelque chose de vraiment évident. Merci d'avance !
MISE À JOUR 1 La liste des plugins installés renvoyée par "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"
MISE À JOUR 2
En onSuccess est censée s'exécuter une fois que l'appareil est prêt. Lorsqu'elle s'exécute, elle doit afficher une alerte contenant les détails de l'emplacement, mais comme je recevais le message "appareil prêt" sans qu'aucune alerte n'apparaisse, j'ai décidé d'ajouter un bouton pour appeler manuellement la fonction.
Je suis maintenant certain onSuccess ne s'exécute pas correctement lorsque le périphérique est prêt, car lorsque je clique sur le bouton pour l'exécuter manuellement, l'erreur suivante s'affiche dans la console :
Uncaught TypeError: Cannot read property 'coords' of undefined
Je suis confus car j'utilise le même code que celui indiqué ici : https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html
De plus, j'ai remarqué que le modèle d'index sur lequel je travaille contient <script type="text/javascript" src="cordova.js"></script> Cependant, lorsque je regarde le dossier contenant mon fichier d'index, il n'y a pas de fichier cordova.js, il n'est pas situé à cet endroit et je n'arrive pas à le trouver dans le téléchargement de Cordova.
Dernière tentative :
<!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>
