0

Estou trabalhando encima desse codepen. Meu objetivo é criar respostas variáveis conforme a temperatura e o clima do local. Exemplo: Céu limpo e bairro 1 é resposta X, chuva e bairro 2 é resposta Y. Estou aprendendo PHP, porém eu gostaria de variar essa resposta conforme a resposta do API. Segue código abaixo. (No exemplo do "Céu limpo", A resposta vem como "Clear Sky" e o código modifica.

var weatherData = {
  city: document.querySelector ("#city"),
  weather: document.querySelector ("#weather"),
  temperature: document.querySelector("#temperature"),
  temperatureValue: 0,
  units: "°C"
  
};

function roundTemperature(temperature){
			temperature = temperature.toFixed(1);
			return temperature;
		}

function switchUnits (){
  
  if (weatherData.units == "°C") {
    weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32);
    weatherData.units = "°F";
  
} else {
  weatherData.temperatureValue = roundTemperature ((weatherData.temperatureValue -32) * 5/9);
    weatherData.units = "°C";  
}

  weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + " ";
}


function getLocationAndWeather(){
  if (window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function() {
      var response = JSON.parse(xhr.responseText);

      console.log(response);
      var position = {
        latitude: response.latitude,
        longitude: response.longitude
      };
      var cityName = response.city;

      var weatherSimpleDescription = response.weather.simple;
      var weatherDescription = translateDescription(response.weather.description);
      var weatherTemperature = roundTemperature(response.weather.temperature);

      weatherData.temperatureValue = weatherTemperature;

      loadBackground(position.latitude, position.longitude, weatherSimpleDescription);
      weatherData.city.innerHTML = cityName;
      weatherData.weather.innerHTML =  ", " + weatherDescription;
      weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
    }, false);

    xhr.addEventListener("error", function(err){
      alert("Could not complete the request");
    }, false);

    xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=e2db5b0453a25a492e87ad8b03046a7c&units=metric", true);
    xhr.send();
  }
  else{
    alert("Unable to fetch the location and weather data.");
  }           
}


function loadBackground(lat, lon, weatherTag) {
  var script_element = document.createElement('script');

  script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1452866c8cea54acd0075022ef573a07&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json";
  
  document.getElementsByTagName('head')[0].appendChild(script_element);
}

function jsonFlickrApi(data){
  if (data.photos.pages > 0){
    //var randomPhotoId = parseInt(data.photos.total);
    var photo = data.photos.photo[Math.floor(Math.random()*parseInt(data.photos.photo.length))];
    document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
    document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
  }
  else{
    document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
    document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
  }
}

function translateDescription(description) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=pt&dt=t&q=" + description, false);
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
    return response[0][0][0];
}

getLocationAndWeather();
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family:Arial, sans-serif;
  font-size: 2em;
  text-shadow: 0 0 10px #000;
  color: #fff;
  background: #888;
  bacground-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section {

   min-height: 100%;
}

h1 {
    font-size: 2em;
  padding: 0 0.3em;
  line-height: 1em;
  
}

p {
  padding: 0 1em;
}

a{
  color: #fff;
}

footer {
  position: absolute;
  bottom: 0;
  font-size: 0.5em;
}

#temperature {
   text-decoration: none;
  border-bottom: 0.05em dotted white;
}
<section>
  <h1 id= "city">Weather Web App</h1>
  <p> <a id="temperature" href="#" onclick="switchUnits(); return false;" title ="Click to switch between metric and impreial units"></a><span id = "weather"> by Shazam (tutorial from @fourtonfish)</p>
</section>

<footer>
  <p>Powered by <a href="http://flickr.com/services/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>.
    
  Created by <a href="https://twitter.com/steelcitycoach">@steelcitycoach</a>. <a id="image-source" href="#">Image source</a>.</p>
  
</footer>

Então, acredito que seja fácil: Eu preciso colocar uma variável na resposta. Imagino que fosse algo assim: (Será que deveria usar duas aspas (") e não somente uma aspa (') ?

<?php
if ($resultado1 = 'clear sky') {
  echo "Resposta 1";

}
?>

Agora, estou com problema para transferir a variável do javascript para o php. Transformei o index.html em index.php. Abaixo, eu criei o que acredito que faria sentido, porém o resultado não aparece na tela.

	<?php 
  $variavelphp = "<script>document.write(weatherDescription)</script>";


if ($variavelphp == 'clear sky') {
    echo "Resposta 1";    
}
 ?>

1 Resposta 1

0

A API Open Weather Map possui suporte a multilinguagem, que no caso seria para português.

Como o português oferecido não é específico para o Brasil (provavelmente seja o de Portugal), você teria que fazer a sua própria tradução.

Sendo o retorno via javascript, você poderia fazê-lo via javascript ou enviar para o PHP (via ajax) e retornar apenas a tradução.

De qualquer forna, o resultado retornado pela API é um JSON e você precisa tratá-lo como tal.

JSON

No javascript:

//string retornada no meu teste
var string = '{"latitude":-29.1878,"longitude":-51.3402,"city":"Farroupilha","weather":{"simple":"Clouds","description":"few clouds","temperature":21.3},"source":"smart-ip.net, openweathermap.org"}';
    
var json = JSON.parse(string);
    
console.log(json.weather.description);

Já no PHP

$string = '{"latitude":-29.1878,"longitude":-51.3402,"city":"Farroupilha","weather":{"simple":"Clouds","description":"few clouds","temperature":21.3},"source":"smart-ip.net, openweathermap.org"}';

$json = json_decode($string);

echo ($json->weather->description);

Para ambos os exemplos, a saída é a mesma:

few clouds

Validação/Comparação

Quanto a comparação, bem, seu código possui um erro apenas, você está comparando utilizando apenas um igual (=). Um igual significa atribuição. Para comparação, deve ser utilizado dois:

if ($resultado1 == 'clear sky') {
    echo "Resposta 1";    
}

Strings

Será que deveria usar duas aspas (") e não somente uma aspa (') ?

No seu caso, aspas simples ou duplas é indiferente.

Aspas duplas, em uma string, realizará a interpolação de variável. Ou seja, as variáveis serão interpretadas como variáveis e, a string, passará a utilizar o valor que a variável possui.

Por outro lado, as aspas simples, não realizará a interpolação das variáveis. Ou seja, tudo na string será tratado apenas como string. Veja o exemplo:

$s = "dollars";
echo 'This costs a lot of $s.'; // This costs a lot of $s.
echo "This costs a lot of $s."; // This costs a lot of dollars.

Pode verificar que no primeiro echo o resultado é $s e no segundo é dollars.

Mais informações você pode encontrar no manual

5
  • Eu entendi, porém ainda estou com uma dúvida. Eu editei minha resposta no rodapé, se puder dar uma olhada eu agradeço Gabriel! Estou com esse erro: Parse error: syntax error, unexpected '$variavelphp' (T_VARIABLE) in C:\xampp2\htdocs\one\homedir\public_html\temperatura\index.php on line 47 17/10/2017 às 14:11
  • @PedroGusmão O javascript não se comunica diretamente com o PHP (Não da maneira que você está tentando). Tem que realizar uma chamada via ajax. Seu erro, entretanto, não está no código que você informou, tem mais coisa atrás. Olhe o seguinte link para enviar o resultado para o PHP: pt.stackoverflow.com/a/25215/5007 17/10/2017 às 15:10
  • Li e entendi Gabriel, mas infelizmente não tenho esse conhecimento de AJAX para fazer isso. Acredito que tu tenha entendido o que eu estou tentando fazer, porém em ajax eu não consegui fazer, mas obrigado! 17/10/2017 às 16:06
  • @PedroGusmão nesse caso, você pode fazer tudo diretamente em javascript. Seria bem parecido com o PHP. 17/10/2017 às 16:10
  • Vou tentar deste jeito então! Meu objetivo é só variar o resultado mesmo, exemplo: Está chovendo? Fica em casa! Está fazendo sol? Saia para a rua! 17/10/2017 às 16:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .