В этом уроке мы будем получать информацию с сервера в виде JSON. Продолжим разработку нашего приложения для получения погоды.
Шаг 0. Что будем делать?
Это не крик о помощи, если что) Давайте просто разберемся c тем, что нам понадобиться. До того как написать серию уроков, я искал сервис с погодой, который нам подойдет. Среди всех, я нашел вот такой: http://www.myweather2.com/, но потом возникли проблемы с получением JSON. Я долго сидел и искал причину, но чтобы не задерживать урок, решил взять другой сервер. Так что мы будем использовать http://openweathermap.org.
Шаг 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. Результат
В результате незначительных изменений у нас получилось приложение которое загружает погоду для конкретного города, при запуске. Как видите, много хлопот это нам не доставило и знаний особых не потребовало. И, естественно то, что получилось у меня на моем устройстве:
На этом поставим точку. Предлагаю в следующем уроке нам добавить возможность выбирать город в программе и сохранять эти настройки. Поработать таким образом с базой данных. Спасибо всем за внимание.
ПОХОЖИЕ ПУБЛИКАЦИИ
- None Found
8 комментариев к статье "PhoneGap. Общение с сервером. Часть 3"
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Спасибо! Когда будет новый урок?
Поддерживаю, когда следующий урок?
Статьи получились очень полезными и понятными, спасибо, очень хотелось бы увидеть продолжение.
Пока не планируется развити в сторону PhoneGap.
А как можно это чудо сделать виджетом?)
Привет:) Посмотри в сторону jQWidgets. Это можно сделать)
Большое спасибо!
Добрый день!
У меня 2 вопроса:
1. Будет ли продолжение уроков?
2. Можно ли общаться с Bluetooth и как?
Спасибо за ответ и за очень интересные уроки
Прочитал все три урока. Пока только прочитал. В седой древности я с друзьями написал многопользовательскую браузерную игру, с реализацией псевдо-3D при помощи связки HTML-JS-CSS без использования каких либо плагинов. По тем временам это было круто. В основе движка авторская технология работы со спрайтами. Естественно спрайтов много, примерно 3000, поскольку игровой мир достаточно просторен и разннобразен. Игра жива и сейчас, имеет своих приверженцев, хотя их и немного.
В исходном варианте игры пользователь скачивал архив с картинками (36мб) на свой компьютер, и игра довольно шустро бегала на первых пнях с 128 мб:))) памяти с соединением с сервером по телефонному модему . С изменением модели безопасности картинки приходиться тянуть с сайта, что требует широкого канала. Даже при высокой скорости канала небольшие лаги все равно заметны, не говоря уже о 3G.
Теперь вопрос. Можно ли использовать приведенную в ваших статьях технологию разработки приложений с помощью PhoneGap использовать для создания игрового приложения в котором картинки и неизменяемые библиотеки JS будут хранится на клиенте и включаться в состав приложения, которое будет устанавливать пользователь? Тогда трафик клиент-сервер будет минимальными и обеспечит комфортные условия игры при узком канале.
Посмотреть можно здесь http: bbsoft.ru/game/
Прошу ответить на почту, чтобы не засорять комментами тему.