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

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

Урок создан: 18 февраля 2014 | Просмотров: 12258 | Автор: Олег Криль | Правила перепечатки


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

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

Ваш e-mail не будет опубликован.

Комментарии:

  • 24 апреля 2014 в 15:58

    archi

    Спасибо! Когда будет новый урок?

    • 31 июля 2014 в 18:41

      Лев

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

  • 16 июля 2014 в 16:15

    Анддрей

    А как можно это чудо сделать виджетом?)

  • 26 ноября 2014 в 21:59

    Аноним

    Большое спасибо!

  • 01 декабря 2014 в 18:42

    Roman

    Добрый день!
    У меня 2 вопроса:
    1. Будет ли продолжение уроков?
    2. Можно ли общаться с Bluetooth и как?
    Спасибо за ответ и за очень интересные уроки

  • 23 марта 2015 в 11:41

    Михаил

    Прочитал все три урока. Пока только прочитал. В седой древности я с друзьями написал многопользовательскую браузерную игру, с реализацией псевдо-3D при помощи связки HTML-JS-CSS без использования каких либо плагинов. По тем временам это было круто. В основе движка авторская технология работы со спрайтами. Естественно спрайтов много, примерно 3000, поскольку игровой мир достаточно просторен и разннобразен. Игра жива и сейчас, имеет своих приверженцев, хотя их и немного.
    В исходном варианте игры пользователь скачивал архив с картинками (36мб) на свой компьютер, и игра довольно шустро бегала на первых пнях с 128 мб:))) памяти с соединением с сервером по телефонному модему . С изменением модели безопасности картинки приходиться тянуть с сайта, что требует широкого канала. Даже при высокой скорости канала небольшие лаги все равно заметны, не говоря уже о 3G.

    Теперь вопрос. Можно ли использовать приведенную в ваших статьях технологию разработки приложений с помощью PhoneGap использовать для создания игрового приложения в котором картинки и неизменяемые библиотеки JS будут хранится на клиенте и включаться в состав приложения, которое будет устанавливать пользователь? Тогда трафик клиент-сервер будет минимальными и обеспечит комфортные условия игры при узком канале.

    Посмотреть можно здесь http: bbsoft.ru/game/
    Прошу ответить на почту, чтобы не засорять комментами тему.