openweather API

04 May 2021 in Web Dev on PHP

PHP_weatherScraper 이 포스트와 이어지는 포스트.
위 포스트에서는, cURL 을 이용해 사이트를 직접 불러와 domdocument로 만들어 class의 이름을 통해 정보를 빼왔다.
이번 포스트에서는, 위 같이 직접 사이트를 로드하기 보다는 openWeather에서 제공된 API를 이용해 정보를 받아서 화면에 표시하려고 한다.

1. OpenWeather API 가입

https://openweathermap.org/api

그러면 아래와 같이 My API Keys에서 내 key정보가 나온다.

2. API doc 선택

https://openweathermap.org/api 이곳에서 원하는 것을 선택한다.
나는 Current Weather Data를 선택함.

여기 API key자리에 내 API key를 넣어 준다.

api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

PHP_weatherScraper 여기서 사용된 링크와 비교.
- 페이지에 직접 접근:
  - https://www.weather-forecast.com/locations/도시이름/forecasts/latest;
- API 사용해서 접근:
  - http://api.openweathermap.org/data/2.5/weather?q=도시이름&appid=내api키;

3. 코드에 삽입, 적절히 이용하기

코드를 알맞게 변형해준다.

<?php
    function file_get_contents_curl($url) {
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_AUTOREFERER, TRUE);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);

    $data = curl_exec($ch);
    curl_close($ch);

    return $data;
}

if($_GET["city"]){
    $city = $_GET["city"];
    $cityurl ="http://api.openweathermap.org/data/2.5/weather?q=".$city."&appid=YourAPIkey";
    $urlContents = file_get_contents_curl($cityurl);
    $weatherArray= json_decode($urlContents,true);
    $weather = "The weather in ".$_GET["city"]." : ".$weatherArray['weather'][0]['description'].". ";

}
?>

화면에 가져온 정보를 출력해 봄.
- 정보가 JSON으로 가져와진다. JSON.DECODE함수를 사용해 ARRAY로 받을 수 있다.
- 어레이 안에 어레이가 있다.

우리가 원하는 정보는 weather키에 있는 첫번째 어레이에 있는 description이다. 그 정보에 다음과 같이 접근할 수 있다.
```
$weatherArray= json_decode($urlContents,true);
$weatherArray['weather'][0]['description'];
```

전체 코드

<?php
function file_get_contents_curl($url) {
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_AUTOREFERER, TRUE);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);

    $data = curl_exec($ch);
    curl_close($ch);

    return $data;
}

if($_GET["city"]){
    $city = $_GET["city"];
    $cityurl ="http://api.openweathermap.org/data/2.5/weather?q=".$city."&appid=YOURAPIKEY";
    $urlContents = file_get_contents_curl($cityurl);
    $weatherArray= json_decode($urlContents,true);
    $weather = "The weather in ".$_GET["city"]." : ".$weatherArray['weather'][0]['description'].". ";

}
?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>

    <body  background="https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
        <div class="container ">
            <div class="jumbotron justify-content-center" style ="text-align:center;background-color: rgba(255, 255, 255, .4);">
                <form id="cityForm">
                    <h1 class="display-3">What's the Weather?</h1>
                    <p class="lead">Enter the name of a city</p>
                    <p><input type="text" class="form-control"  name="city" style="width:50%; margin :0 auto"></p>
                    <p class="lead">
                        <input type="submit" class="btn btn-primary btn-lg">
                    </p>
                </form>
                <h1 id="title"><?php echo $city; ?></h1>
                <div class="alert alert-success" id="info" role="alert"><?php echo $weather; ?></div>
            </div></div>
        <script type="text/javascript">
            if($("#info").text()==""){
                $("#info").css("display","none");
                $("#title").css("display","none");
            }else{
                $("#info").css("display","block");
                $("#title").css("display","block");
            }
        </script>
    </body>
</html>

openweather API

1. OpenWeather API 가입

2. API doc 선택

3. 코드에 삽입, 적절히 이용하기

Yeji 'Callie'

Error

1. OpenWeather API 가입

2. API doc 선택

3. 코드에 삽입, 적절히 이용하기

Templates (for web app):

Error