24 июля 2017 г. Тьяго Вальверде
Каждый фронтенд-разработчик должен уметь работать с несколькими API, чтобы стать компетентным программистом. Если вы не являетесь бэкенд-разработчиком, знание того, как работают вызовы API и как получаются данные, является ключом к эффективному управлению данными и реализации их в вашем веб-приложении. Вот почему FreeCodeCamp имеет значительную часть своей внешней сертификации, ориентированной на работу с API-сервисами через JavaScript. На данный момент я работаю над своим проектом TwitchTV, который должен проверить, находятся ли стримеры в сети, предоставить ссылку на их канал и описать, что они транслируют. Все с использованием Twitch API.
СОВЕТ.Проверьте этот каталог API от ProgrammableWeb, чтобы иметь представление о том, сколько API представлено в Интернете.
Итак, вы читаете эту статью, потому что вы либо турист, пытающийся закончить свой проект, либо вам нужно Dark Sky, чтобы внедрить интересную информацию о погоде в ваше приложение. Я опишу необходимые шаги для использования Dark Sky API.
Настройка учетной записи разработчика Dark Sky
Прежде всего, вам нужно будет создать учетную запись Dark Sky. Вы можете использовать их API бесплатно, если вы не преодолеваете более 1000 вызовов прогнозов в день. После входа в свою учетную запись вы сможете создать свой секретный ключ, который позволит вам подключиться к их API. Без этого секретного ключа вы не сможете получить какие-либо данные.
Я призываю вас потратить некоторое время на чтение документации, прежде чем реализовать свой запрос. В моем случае я получил исключительно текущий прогноз погоды. Однако вы можете пойти дальше и получать информацию о погоде ежечасно, а также ежедневно.
Запросить разрешение на получение местоположения браузера пользователя
После вашего «быстрого» просмотра документации вы, наконец, можете приступить к кодированию. Первое, что вам нужно реализовать, — это проверить, доступна ли в браузере геолокация, и если да, то попросить пользователя получить доступ к местоположению в браузере, чтобы получить широту и долготу.
ПРИМЕЧАНИЕ. Одной из проблем, с которыми вы можете столкнуться, являются браузеры приложений, в которых не поддерживается геолокация.
Проверьте, поддерживает ли браузер геолокацию.
if (!navigator.geolocation){ alert(“Geolocation is not supported by this browser!”); }
Спросите пользователя, можете ли вы получить его местоположение
//This will make appear a pop up asking for permission navigator.geolocation.getCurrentPosition(showPosition, error);
//In case the permission is granted
function showPosition(position) {
a_lat = position.coords.latitude;
a_long = position.coords.longitude;
}
//In case the permission is denied
function error() {
alert(“Unable to retrieve your location! Allow the browser to track your location!”);
}
Используйте широту и долготу, чтобы получить название города и название страны с помощью Google Maps API.
Я решил попробовать Google Maps API, чтобы получить название города и страны с долготой и широтой, полученными на предыдущем шаге. Вот как я это сделал.
Google Карты обязательный URL
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+ lat + "," + long;
Метод jQuery для получения данных через json
$.getJSON(url, function(data) {
var arr_address_comp = data.results[0].address_components;
arr_address_comp.forEach(function(val) {
if(val.types[0] === "locality" ){
cityName = val.long_name;
}
if(val.types[0] === "country" ){
countryCode = val.short_name;
countryName = val.long_name;
}
});
//set your tag element where you will describethe location $('#weather-location').text(cityName + ", " + countryName);
});
Если запрос выполнен успешно, функция внутри .getJSON() обрабатывается и извлекается название страны и города.
Обработать запрос Dark Sky
Теперь все готово для выполнения запроса DarkSky. Вам понадобятся следующие параметры в URL.
- apiKey: ваш секретный ключ DarkSky.
- исключить: в этом параметре вы можете указать API игнорировать данные, которые вам не нужны в вашем приложении. Это сокращает время отклика.
- единицы: тип измерения, который вы предпочитаете
- url: ссылка на API.
- широта: широта
- lon: долгота
На этот раз вместо .getJSON() я покажу вам метод jQuery .ajax() для выполнения запроса API.
function getWeatherData(lat, long){
var apiKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXX";
var exclude = "?exclude=minutely,hourly,daily,alerts,flags";
var unit = "?units=si";
var url = "https://api.darksky.net/forecast/" + apiKey + "/" + lat + "," + long + exclude + unit;
//get darksky api data
$.ajax({
url: url,
dataType: "jsonp",
success: function (weatherData) {
//icon information (explained after)
var icon = weatherData.currently.icon;
//weather description
var description = weatherData.currently.summary;
//temperature
var temperature = weatherData.currently.temperature;
}
});
}
Параметр успеха указывает, что делать, если есть успешный ответ на запрос ajax. Взглянув на мой пример и документацию по API, вы увидите, откуда я беру данные.
Заполните данные о погоде
После того, как вы получили всю необходимую информацию, пришло время заполнить «пробелы» вашего веб-приложения. В моем проекте я использовал следующие поля (см. изображение ниже):
weatherData.currently.summary: это поле просто описывает текущую погоду.
$('#weather-description').text(weatherData.currently.summary);weatherData.currently.temperature: содержит текущую температуру. Проверьте, нужно ли вам делать конверсию, прежде чем размещать свою страницу.
$('#weather-value').val(weatherData.currently.temperature);
weatherData.currently.icon: дополнительный параметр, который предоставляет DarkSky, чтобы помочь разработчикам реализовать свои динамические значки погоды. Я использовал Skycons для настройки анимированных значков погоды, как вы можете видеть в моем Weather App.
Чтобы использовать Skycons, вы должны включить их библиотеку в свой код. Затем просто следуйте примеру, представленному на их сайте. В итоге вы получите такой код JavaScript:
//add to skyicons the weather information skycons.add(document.getElementById("icon"), weatherData.currently.icon); //start animation skycons.play();
Другие особенности
Преобразование температуры и настройка различного фонового изображения в зависимости от погоды были другими функциями, которые я реализовал. Вы можете увидеть, что я сделал ниже.
// Functions used to apply conversions
function toCelsius(f) {
return Math.round((5/9) * (f-32));
}
function toFahrenheit(c){
return Math.round(c * 9 / 5 + 32);
}
//JavaScript object containing the icon information
//and the respective image url
var listImages = {
"clear-day": "your-image-url",
"clear-night": "your-image-url",
"foggy": "your-image-url",
...
};
//funciton that sets the background image depending on the parameter icon provided
function setBackgroundImg(description){
$('body').fadeTo('slow', 0.3, function(){
$('html').css('background-image',"url("+listImages[description]+")");
$('.containerBlock').css('visibility',"visible");
}).delay( 500 ).fadeTo('slow', 1);
}
Со всей этой информацией вы сможете легко реализовать собственное приложение погоды. Обратите внимание, что я выделил только соответствующий код для использования Dark Sky API. Если вы хотите увидеть больше, не стесняйтесь проверить мой проект Weather App или, что еще лучше, поищите на Форуме FreeCodeCamp, чтобы получить помощь от других отдыхающих. Это то место, куда я иду, когда я застрял в вызове.
Все о сотрудничестве
Я надеюсь, что этот урок помог вам каким-то образом достичь того, что вы искали. Не стесняйтесь обращаться к нам, если вы хотите узнать больше или вам нужна помощь. Я такой же, как и вы, ученик, пытающийся совершенствоваться каждый день. Я стал кемпером в феврале 2017 года, и сейчас у меня осталось 4 проекта, чтобы получить сертификацию фронтенда. Я очень уважаю Куинси Ларсона за проект, который он создал, и являюсь его последователем с тех пор, как я нашел FreeCodeCamp. Я надеюсь, что смогу дать что-то сообществу в ближайшем будущем.
ПРИМЕЧАНИЕ. С тех пор как я приехал в Канаду, я еще не получил работу веб-разработчика. Кроме того, мне сложнее получить эту работу, потому что я также получаю степень бакалавра компьютерных наук, и у меня не остается времени, чтобы работать в компании на постоянной основе.
Если вы не знаете, это всего лишь моя вторая запись в блоге, если вам интересно, о чем я собираюсь писать в блоге, проверьте мой первый пост Мой первый пост после долгого промедления!
Попробуйте и потерпите неудачу столько раз, сколько потребуется, но не останавливайтесь, пока не выйдете из цикла. Вот где можно найти успех.
Первоначально опубликовано на tiagovalverde.com 23 июля 2017 г.
