PhoneGap. Общение с сервером. Часть 3

В этом уроке мы будем получать информацию с сервера в виде JSON. Продолжим разработку нашего приложения для получения погоды.

Шаг 0. Что будем делать?

 

Это не крик о помощи, если что) Давайте просто разберемся c тем, что нам понадобиться. До того как написать серию уроков, я искал сервис с погодой, который нам подойдет. Среди всех, я нашел вот такой: http://www.myweather2.com/, но потом возникли проблемы с получением JSON. Я долго сидел и искал причину, но чтобы не задерживать урок, решил взять другой сервер. Так что мы будем использовать http://openweathermap.org.

Шаг 1. Построение запроса

 

Пару слов о выбранном сервере. Он не требует регистрации пользователя для получения погоды, что значительно сократит урок, а также,  намного проще составить строку запроса. Помимо, сервис оказался действительно функциональным. Сейчас увидите.

 

1
http://api.openweathermap.org/data/2.5/weather?q=Nikolaev,ua&lang=ru&units=metric

 

таким запросом мы получим погоду для города Николаев.

 

q=Nikolaev,ua — город и страна

 

lang=ru — язык ответа

 

units=metric — единицы измерения

 

Чтобы проверить работу, можно просто перейти по адресу в браузере. Результат должен быть похожим.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
    "coord": {
        "lon": 31.99,
        "lat": 46.97
    },
    "sys": {
        "message": 0.0052,
        "country": "Ukraine",
        "sunrise": 1392699040,
        "sunset": 1392736871
    },
    "weather": [
        {
            "id": 701,
            "main": "Mist",
            "description": "туман",
            "icon": "50d"
        }
    ],
    "base": "cmc stations",
    "main": {
        "temp": 2,
        "pressure": 1021,
        "humidity": 93,
        "temp_min": 2,
        "temp_max": 2
    },
    "wind": {
        "speed": 3,
        "deg": 290
    },
    "clouds": {
        "all": 12
    },
    "dt": 1392706800,
    "id": 700569,
    "name": "Mykolaiv",
    "cod": 200
}

 

Так как некоторые вещи в ответе могут быть непонятными, на сайте присутствует документация о том, что здесь что. http://bugs.openweathermap.org/projects/api/wiki/Weather_Data в уроке, дальше я буду опираться на нее. Также, нам понадобятся коды возврата, чтобы мы могли распарсить наш ответ. Вот таблица с обозначениями: http://bugs.openweathermap.org/projects/api/wiki/Weather_Condition_Codes.

 

 

 

Шаг 2. Получаем данные в приложении

 

Для начала, нам понадобиться библиотека jQuery. Так что идем http://jquery.com/download/, скачиваем, добавляем в проект и подключаем к страничке.

 

Создаем скрипт, который получает наши данные с сервера. Обратите внимание что у нас получение jsonp.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getWeather(){
    var url = "http://api.openweathermap.org/data/2.5/weather?q=Nikolaev,ua&lang=ru&units=metric&callback=test";
 
    $.ajax({
        url:url,
        type: 'GET',
        dataType: "jsonp",
        contentType: "application/json ",
        success: function(data){
            setWeather(data);
        },
        error: function(){alert("Ошибка при получении погоды!")}
    });
};

 

Теперь установим наши данные на view. Здесь не реализованы все возможные виды иконок. Ночные и дневные совпадают, что можно легко изменить самостоятельно, по желанию.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function setWeather(data){
    var path = "weather-icons/";
    var icon = "";
    document.getElementById('temp').innerHTML = data.main.temp + " C°";
    document.getElementById('humidity').innerHTML = data.main.humidity + "%";
    document.getElementById('pressure').innerHTML = data.main.pressure + " hPa";
    document.getElementById('wind_speed').innerHTML = data.wind.speed + " м/с";
    document.getElementById('clouds').innerHTML = data.clouds.all + " %";
    document.getElementById('city_name').innerHTML = data.name;
 
    var icon_id = data.weather[0].icon;
 
    switch(icon_id){
        case("11d"):
        icon = "storm";
        break;
        case("09d"):
        icon = "heavy"
        break;
        case("10d"):
        icon = "heavy"
        break;
        case("13d"):
        icon = "snow"
        break;
        case("50d"):
        icon = "fog"
        break;
        case("01d"):
        icon = "sunny"
        break;
        case("03d"):
        icon = "overcast"
        break;
        case("04d"):
        icon = "overcast"
        break;
        //for night weather
        case("11n"):
        icon = "storm";
        break;
        case("09n"):
        icon = "heavy"
        break;
        case("10n"):
        icon = "heavy"
        break;
        case("13n"):
        icon = "snow"
        break;
        case("50n"):
        icon = "fog"
        break;
        case("01n"):
        icon = "sunny"
        break;
        case("03n"):
        icon = "overcast"
        break;
        case("04n"):
        icon = "overcast"
        break;
    }
 
    $('#weather-icon').css({"background": "url("+path+icon+".png) no-repeat center"});
};

 

А также нужно внести изменения в наш html. Обратите внимание, что у нас поменялся один пункт:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="weather-bottom">
    <div class="weather-info">
        <table width="100%">
            <tr>
                <td>Температура</td>
                <td id="temp"></td>
            </tr>
            <tr>
                <td>Влажность</td>
                <td id="humidity"></td>
            </tr>
            <tr>
                <td>Давление</td>
                <td id="pressure"></td>
            </tr>
            <tr>
                <td>Скорость ветра</td>
                <td id="wind_speed"></td>
            </tr>
            <tr>
                <td>Хмарность</td>
                <td id="clouds"></td>
            </tr>
        </table>
    <div>
 
    <div id="city_name" class="weather-city">
 
    </div>
</div>
 
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>

 

 

 

Шаг 3. Результат

 

В результате незначительных изменений у нас получилось приложение которое загружает погоду для конкретного города, при запуске. Как видите, много хлопот это нам не доставило и знаний особых не потребовало. И, естественно то, что получилось у меня на моем устройстве:

На этом поставим точку. Предлагаю в следующем уроке нам добавить возможность выбирать город в программе и сохранять эти настройки. Поработать таким образом с базой данных. Спасибо всем за внимание.

http://devcolibri.com/4016