使用DarkSky API构建天气应用程序

为 Web 构建几乎与任何人一样有趣，尤其是当您使用 api 来动态提取数据时。有些人可能将这种构建称为“Web 应用程序”，另一些人可能将其称为构建“网页”。无论哪种情况，我们都将构建一个演示，使用 DarkSky 和 Google Maps API、 javascript魔术和 css 动画显示天气预报。这很有趣，所以让我们开始吧！

注意：我们不会进入构建过程的细节，但是您将从这个概述中获得足够的信息来自己构建一些东西。

提示：要了解有关 API 和 Web 的更多信息，请查看 API 在 Web 开发中的重要性日益增加。

我们将建造什么

看看演示。在线版本尚无功能，因为您需要向其添加 API 密钥。下载源文件并开始吧！

使用DarkSky API构建天气应用程序第1张天气应用演示

阴暗的天空

DarkSky提供了众多可用于天气信息的 API 之一。DarkSky 不仅有可供开发人员使用的 API，它还有适用于ios、android甚至 Apple watch 的应用程序。

API 提供对未来一周的每小时和每日预报、每分钟的“超本地”降雨预报、***恶劣天气警报、几十年前的观测、数十种语言、测量单位和易于理解的文档的访问。有现收现付的定价模式，但每天前 1,000 个预测是免费的。这部分很重要，特别是如果您想纯粹出于演示目的进行试验。在前 1,000 个请求之后，它成为一项付费服务，每次预测价格为 0.0001 美元。

使用DarkSky API构建天气应用程序第2张斯凯康斯

DarkSky 还提供对一组非常酷的动画预测图标的访问，以与他们的 API 一起使用。这些图标被称为Skycons——很大程度上受到 Climacons 的启发——并使用canvas.

标记

一旦你获得了你的个人DarkSky API 密钥，我们就开始比赛了，但在离开大门之前，我们需要一个表格，所以让我们先创建那个标记。

<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>

标记只不过是一个表单元素，里面有一些列表项和输入。这将是我们未来创造的基础。

使用DarkSky API构建天气应用程序第3张

这是我们标记的结果，使用一些简单的 CSS 样式来浮动输入并添加背景颜色，以便我们可以看到渲染的标记。

自动填充输入

我们不仅可以输入纬度和经度的两个输入，还可以走得更远。如果有人不知道这些坐标怎么办？为了解决这个问题，我们将添加另一个输入，让用户按城市名称输入和检索请求的预测——这反过来会神奇地自动填充坐标字段！

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

仅此标记不会使我们实现通过城市搜索自动填充坐标的目标；为此，我们需要深入了解 Google Maps API。正如我们需要一个用于 DarkSky 的 API 密钥一样，我们也需要一个用于 Google 地图的 API 密钥。可以在此处获取个人 Google Maps API 密钥，本教程不提供此密钥。

谷歌地图 API 请求

对于应用程序的这一部分，我们需要在 URL 中包含包含您的个人 API 密钥的 Google API 脚本。

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

这个脚本是加载 Google Maps API 的调用，但还有一点需要解释。

&libraries=places,geometry

url包括参数 &libraries=places,geometry。除了主要的 Google Maps JavaScript API 之外，“Places”和“Geometry”服务是一组独立的库。

使用为 Google Maps 注册的 API 密钥，我们可以首先为搜索框创建 javaScript，该搜索框将显示城市作为用户类型。

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

要将城市搜索显示为用户类型，我们将使用所谓的Places Search Box。

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

该SearchBox()参数将传递给我们之前创建的搜索输入。

到目前为止，一切都很好，但我们仍然需要附加一个事件***器，以便我们的 JavaScript 知道发生了什么。

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

该参数是当 a 可用于用户选择的城市/位置places_changed时触发的事件。PlaceResultGoogle Maps JavaScript API V3的完整文档也可供参考。

逻辑

在这一点上，我们处于一个非常好的位置，所以让我们创建一些逻辑来进入搜索框事件***器函数。

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

使用定义的变量 locale 来存储我们的位置，您可能会注意到传递的值 searchBox.getPlaces()[0] 。这个方法很神奇，可以帮助根据所选城市（第一个）自动填充坐标，或者换句话说，返回用户选择的查询。

最后一步是根据所选城市自动填充坐标，并将其放在locale我们刚刚创建的事件***器函数中的变量下。

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

这两行设置我们的坐标输入的“值”，并使用提供的geometryandlocation 属性place。

使用DarkSky API构建天气应用程序第4张

如果您愿意，甚至可以通过提供的 CSS 类来设置自动完成和搜索框小部件的样式。

预测请求

为了与 DarkSky 交互，您需要注册一个帐户以获取 API 密钥。

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

预测请求 URL 对开发人员来说非常易读。插入您的密钥，传递坐标，然后您就可以提取数据了。

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

DarkSky 的结果以 JSON（JavaScript Object Notation）的形式返回，因此在生成请求时，您需要使用 getJSON 方法。

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

在上面的代码中，为了简单起见，我使用了 jquery。参数将 forecast 是返回结果的表示。

使用DarkSky API构建天气应用程序第5张

Using console.log 将报告表示 DarkSky 的 API 数据的对象。正如您所看到的，就可以检索的信息而言，有很多选项。

斯凯康斯

要启动和使用 Skycons，我们需要使用一些传统的黑魔法（也称为 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();
}

您的 Skycons 的这个方法必须放在我们之前编写的 getJSON 请求中。该函数将为动态创建的预测渲染并附加我们的动画图标；Skycons 未记录的细节。