Bonjour ! J'essaye en ce moment de dévelloper une application android. Je me suis dirigé vers cordova, et après de nombreux problèmes de build, j'ai réussi a build mon application. Ensuite, j'ai tenté de créer une application de méteo mais je ne peux pas accéder à l'API lorsque l'application est build. Cependant, lorsque je l'utilise sur navigateur, tout fonctionne. J'en déduis que le problème ne vient pas de mon code. Je me suis dit que le probleme venait du CSP, mais après avoir tout essayé, rien de se passait. J'ai essayé de modifier le config.xml en ajoutant des balises <allow-intent> et <allow-navigation> en réinstallant le plugin de whitelist mais rien n'y fait. Bref, comme vous pouvez le voir j'ai tout essayé, mais rien ne marche. Voila mon code (j'utilise la OpenWeatherMapAPI):
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8">
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/index.js"></script>
<title>Hello World</title>
</head>
<body>
<nav>
<div class="nav-wrapper indigo accent-3">
<img src="img/logo.png" alt="Logo" class="brand-logo" width="50" height="50">
</div>
</nav>
<div class="card-panel margin center-align">
<form>
<div class="input-field">
<input id="city" type="text">
<label for="city">Votre ville</label>
</div>
<a class="waves-effect waves-light btn" id="getWeather">Rechercher</a>
</form>
</div>
<div class="card-panel margin teal center-align" id="card">
</div>
</body>
</html>
$(document).ready(function() {
var city = localStorage.getItem("city"); //on récupere la variable localStorage ayant pour clé city, puis on la met dans une variable
var cardSelector = $("#card"); //on mets notre sélecteur dans une variable
getWeather();
function getWeather() { // on crée une fonction qui récupere la météo avec les instructions suivantes
if (city == null) { // on teste si la variable city est nulle
cardSelector.append("<p>Vous n'avez pas encore renseigné de ville.</p>"); // on affiche un message dans la card
} else { // sinon ...
$("#card *:not(div)").remove();
alert("test");
var myAPPID = "APPID"; //ici on déclare notre APPID pour OpenWeatherMap
$.getJSON("http://api.openweathermap.org/data/2.5/weather?appid=" + myAPPID + "&q=" + city, function(result) { // on mets le résultat dans une variable result qui vaut le code JSON qu'on voit dans le navigateur
var cityName = result.name; // le nom de la ville est directement accesible donc pas de souci
var weatherType = result.weather[0].main; // la description du temps est dans le tableau weather (un tableau est défini par des []), on vise le premier (0 = le premier en programmation), puis on prend la valeur de main
var iconCode = result.weather[0].icon; // Meme chose qu'au dessus sauf qu'on prend la valeur de icon
var temp = result.main.temp; // cette fois ci on va dans main qui n'est pas un tableau donc pas de '[]', on va de main a temp sans souci
var tempInCelsius = (temp - 273.15).toFixed(1); // notre temperature est en Kelvin donc on effectue notre soustration pour l'avoir en Celsius, puis le toFixed permet d'arrondir une valeur, le 1 correspond à un chiffre apres la virgule
alert("Appelé : " + cityName);
// ici on rempli la card avec nos valeurs, premierement la liste d'information, puis ensuite on affiche l'image avec le code icone
cardSelector.append("<ul><li>City : " + cityName + "</li><li>Weather type : " + weatherType + "</li><li> Temperature : " + tempInCelsius + " °C</li></ul>");
//cardSelector.append("<img src='img/" + iconCode + ".png' alt='Weather Icon' width='80px' height='80px'>");
// voila notre utilisateur voit les informations météo de sa ville
});
}
}
function submitForm() { // on crée une fonction qui récupere la valeur du formulaire
var mycity = $('input').val(); // on récupere la valeur de notre input avec .val() et on la mets dans une variable
if (mycity.length >= 3) { // si la variable donc la ville de l'utilisateur est plus grande ou egale que 3 caracteres alors ...
localStorage.setItem("city", mycity); // on crée une variable localStorage, avec pour clé city et comme valeur la ville de l'utilisateur
city = mycity; // on donne la ville à la variable city qui est utilisée dans la fonction getWeather
getWeather(); // on appelle la fonction getWeather pour récuperer la météo de cette ville, ville qui est stockée dans la variable city
} else { // si le champs fait 2 caracteres ou moins on ...
alert('empty field'); // affiche une erreur
}
}
$('#getWeather').on('touchstart', function() { // quand on commence à toucher le bouton avec l'id getWeather, alors ...
submitForm(); // ... on appelle la fonction submitForm qui va traiter ce qu'il y a dans le champ de la ville
});
$('form').submit(function(event) { // quand on soumet le formulaire, c'est à dire qu'on appuie sur la touche Entrée, alors ...
//event.preventDefault(); // ici on annule le comportement par défault qui est de recharger la page quand on soumet un formulaire
submitForm(); // ... on appelle la fonction submitForm qui va traiter ce qu'il y a dans le champ de la ville
});
// ici on appelle à l'allumage de l'application la fonction getWeather
});
PS : Je precise que j'ai regardé un tutoriel pour debuter avec cordova, le code n'est donc pas de moi, mais généralement j'ai pour habitude de creer mes propres code
[Cordova] Je ne peux pas acceder à une api
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
