PhoneGap. Общение с сервером. Часть 3 – Devcolibri – Android для начинающих

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

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

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

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

pogoda

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

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

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

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

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

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

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

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

{
    "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.

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. Здесь не реализованы все возможные виды иконок. Ночные и дневные совпадают, что можно легко изменить самостоятельно, по желанию.

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. Обратите внимание, что у нас поменялся один пункт:

<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. Результат

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

screenshot-1392741849592

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

ПОХОЖИЕ ПУБЛИКАЦИИ

    None Found

22172
18/02/2014

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

Добавить комментарий

Сайт использует cookie-файлы для того, чтобы вам было удобнее им пользоваться. Для продолжения работы с сайтом, вам необходимо принять использование cookie-файлов.

Я ознакомлен(а)