Construcción de una Aplicación de Tiempo con el DarkSky API

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Construir para la web es casi tan divertido como cualquier persona puede tener, especialmente cuando se trabaja con una API para tirar datos dinámicamente. Algunos pueden llamar a este costruir "web apps", otros pueden llamarlo construir una "páginas web". En cualquier caso vamos a construir un demo para mostrar un pronóstico del tiempo usando el DarkSky y API de Google Maps, JavaScript magia y animaciones CSS. Es un montón de diversión así que vamos a empezar!

Nota: nosotros no entrar en las minucias del proceso de construcción, pero usted tendrá suficiente información de este Resumen y construir algo a ti mismo.

Consejo: para obtener más información acerca de las API y la web, mira La Creciente Importancia de las API en el Desarrollo Web.

Lo que Vamos a Construir

Echa un vistazo a la demo. La versión en línea es como-todavía no-funcional como usted necesitará añadir claves de API que. ¡Descargar los archivos de origen y vamos!

Weather app demo — Demo de la aplicación del Tiempo

DarkSky

DarkSky ofrece una las muchas APIs disponibles para información meteorológica. No sólo DarkSky tiene una API disponible para los desarrolladores, también tiene una aplicación disponible para iOS, Android y hasta el Apple Watch.

El API proporciona acceso a cada hora y diariamente pronósticos para la semana que viene, minuto a minuto "hiperlocales" pronósticos de lluvia, alertas de clima severo gubernamentales, observaciones que se remonta décadas, decenas de idiomas, unidades de medida y fácil de entender la documentación. Hay un modelo de precios prepago, pero los pronósticos primero 1.000 por día son gratis. Esa parte es importante, especialmente si usted quiere experimentar con fines puramente demo. Después de las primeras 1.000 solicitudes se convierte en un servicio de pago en $0,0001 por previsión.

DarkSky también proporciona acceso a un conjunto genial de iconos animados de pronóstico a utilizar junto a su API. Estos iconos se llaman Skycons – fuertemente inspirado en Climacons – y se representan usando canvas.

El Markup

Una vez que has obtenido tu Clave Personal de API DarkSky zarpamos a las carreras, pero antes de salir de la puerta tenemos una forma, así que vamos a crear primero que marca.

<form method="get">
    <fieldset>
  	<ul>
			<li>
				<label for="latitude">Latitude</label>
				<input type="text" id="latitude" placeholder="e.g. 42.9150747" required>
			</li>

			<li>
				<label for="longitude">Longitude</label>
				<input type="text" id="longitude" placeholder="e.g. -77.784323" required>
			</li>
		</ul>
	</fieldset>

	<button>Get Weather</button>
</form>

El markup no es más que un elemento form con algunos elementos de lista y de la insumos dentro. Esta será la base para nuestra creación por delante.

Aquí es el resultado de nuestro markup con algún estilo CSS de escueto para flotar las entradas y añadir un color de fondo sólo para que podamos ver el markup representado.

Entrada de Autorrelleno

Podemos ir más allá de sólo dos entradas para la latitud y longitud. ¿Qué pasa si alguien no conoce estas coordenadas de la parte superior de su cabeza? Para resolver este problema vamos a añadir otra entrada para que los usuarios puedan ingresar y recuperar la previsión requerida por ciudad nombre, este será a su vez rellenar los campos de coordenadas por arte de magia!

<li>
  <label for="city-search">City Name</label>
  <input type="text" id="city-search" placeholder="e.g. Rochester, NY">
</li>

Este markup solo no llevarnos hacia la meta de hacerlo de forma automática las coordenadas por la búsqueda de la ciudad; para ello es necesario echar mano del API de Google Maps. Al igual que necesitamos un API key para DarkSky, también tenemos una API key para Google Maps. Una clave personal de la API de Google Maps puede obtenerse aquí y no está prevista para este tutorial.

Solicitud de la API de Google Maps

Para esta parte de la aplicación tenemos que incluir el script de Google API que contiene su clave personal de API en la URL.

<script src="https://maps.googleapis.com/maps/api/js?key=[your_api_key]&libraries=places,geometry"></script>

Este script es la llamada para cargar la API de Google Maps, pero hay un poco más que explicar.

&libraries=places,geometry

La dirección url incluye los parámetros &libraries=places,geometry. El servicio "Lugares" y "Geometría" es un conjunto de bibliotecas independientes aparte de la principal Google Maps JavaScript API.

Con una API key registrado para Mapas de Google podemos empezar por crear el JavaScript para un cuadro de búsqueda que muestra las ciudades como un tipo de usuario.

var searchBox = new google.maps.places.SearchBox();

Para mostrar la ciudad búsquedas como un tipo de usuario, usaremos lo que denomina un Cuadro de Búsqueda de Lugares.

var searchBox = new google.maps.places.SearchBox(document.querySelector("#city-search"));

El argumento SearchBox() se pasará a la entrada de búsqueda que creamos anteriormente.

Hasta ahora, así que bueno pero todavía necesitamos conectar un detector de eventos para que nuestro JavaScript es consciente de lo que está sucediendo.

searchBox.addListener('places_changed', function() {});

El argumento places_changed es un evento que se desencadena cuando un PlaceResult está a su disposición para una ubicación que el usuario selecciona. La Documentación Completa de Google Maps JavaScript API V3 también está disponible como referencia.

Lógica

Estamos en un lugar realmente bueno en este punto vamos a crear algunos lógica para ir dentro de la función de escucha de búsqueda de eventos.

searchBox.addListener('places_changed', function() {
    var locale = searchBox.getPlaces()[0];
});

Con un variable definido llamado locale para almacenar nuestra ubicación podría notar el valor que se pasa searchBox.getPlaces() [0]. Este método es la magia que le ayudará a rellenar las coordenadas basadas en la ciudad seleccionada (la primera) o en otras palabras que vuelve la consulta seleccionada por el usuario.

La pieza final es rellenar las coordenadas basadas en la ciudad seleccionada y colóquelo debajo de nuestra variable locale dentro de la función de escucha de eventos que justo autorizamos.

document.querySelector("#latitude").value = place.geometry.location.lat();
document.querySelector("#longitude").value = place.geometry.location.lng();

Estas dos líneas establecer el "valor" de nuestros aportes coordinadas y utilizan la propiedad geometry y location proporcionada por el place.

Si usted desea, incluso es una manera vía proporcionadas Clases CSS estilo el autocompletar y el widget de la caja de búsqueda.

Solicitud de Forecast

Con el fin de interactuar con DarkSky necesitará firmar para arriba para que una cuenta obtener una clave de API.

https://api.darksky.net/forecast/[key]/[latitude],[longitude]

La URL de solicitud forecast es muy legible para los desarrolladores. Enchufe en tu llave, pasar de las coordenadas y listo tirar en los datos.

$.getJSON('https://api.darksky.net/forecast/[key]/[latitude],[longitude]', function(forecast) {});

Los resultados de DarkSky se devuelven como JSON (JavaScript Object Notation) así cuando se genera una solicitud que necesitarás utilizar el método getJSON.

$.getJSON([api_url], function(forecast) {
    console.log(forecast);
});

Estoy usando jQuery por simplicidad en el código anterior. El argumento de forecast será la representación de los resultados devueltos.

Utilizando console.log reportará el objeto que representa datos de la API de DarkSky. Como puedes ver hay bastantes opciones en términos de información se puede recuperar.

Skycons

Para iniciar y utilizar Skycons que necesitamos escribir una función usando magia oscura tradicional (también conocido como JavaScript):

function skycons() {
    	var i,
			icons = new Skycons({
				"color" : "#FFFFFF",
				"resizeClear": true // nasty android hack
			}),
			list  = [ // listing of all possible icons
				"clear-day",
				"clear-night",
				"partly-cloudy-day",
				"partly-cloudy-night",
				"cloudy",
				"rain",
				"sleet",
				"snow",
				"wind",
				"fog"
			];

	// loop thru icon list array
	for(i = list.length; i--;) {
		var weatherType = list[i], // select each icon from list array
				// icons will have the name in the array above attached to the 
				// canvas element as a class so let's hook into them.
				elements    = document.getElementsByClassName( weatherType );

		// loop thru the elements now and set them up
		for (e = elements.length; e--;) {
			icons.set(elements[e], weatherType);
		}
	}
	
	// animate the icons
	icons.play();
}

Este Método para su Skycons debe colocarse en la petición de getJSON que escribió antes. La función se rendir y adjuntar los iconos animados para pronósticos creados de forma dinámica; un indocumentado de detalle por Skycons.

Resultado Final

Combinar todos los resultados de este trabajo duro en una aplicación de tiempo de funcionamiento combinado con todo tipo de hechicería como JavaScript arrays, bucles, recuperación de los api, interacción y movimiento. Todas las facetas y habilidades que se requieren para construir una gran aplicación.

Fuertemente le insto a leer el proyecto de demostración suministrado. Cada línea ha comentado totalmente para ayudarle a entender las intenciones de cada línea de código. Espero los comentarios y esfuerzos combinados para crear esta demo ayudan a ampliar tus habilidades y te inspira para hacer su propia demostración práctica con cualquier API que usted elija.

Tal vez te decides construir una App Dribbble, una aplicación de Envato, o incluso una Add de CodePen. Sea lo que sea, tomar el tiempo para crear algo propio y no olvide practicar, practicar, practicar!

Recursos

Archivos de código fuente en GitHub
Demo (no funciona debido a la falta de claves API!)
Usé una divertida librería llamada devices.css que se encarga del teléfono CSS, lo verás en la demo.
Skycons
La Creciente Importancia de las APIs en el Desarrollo Web en Tuts +