为什么我们需要天气应用程序？

功能丰富的天气预报应用程序可以为各个行业提供巨大价值。天气应用程序的一些值得注意的好处包括：

提供对当地天气状况和即将到来的天气预报的即时访问，从而节省您的时间。

提供有关当前和预期天气状况的实时通知。

帮助政府和地方政府为自然灾害做准备并挽救生命。

帮助农民采取预防措施。

促进全球旅行和旅游业。

提供清晰的天气预报，这对航空和物流业至关重要。

1、需要构建一个天气应用程序

要成功构建天气应用，您需要执行以下操作：

熟悉使用JavaScript（Node.js）

文本编辑器，例如记事本或IDE。我最喜欢的是Visual Studio。

访问可靠的天气API，例如ClimaCell

访问地图服务

HTML，CSS和Bootstrap知识

一旦准备好这些，就可以了。

ClimaCell Weather API概述

ClimaCell是受欢迎的天气提供商，可通过易于使用的API 提供超准确的历史天气数据以及天气预报。

它的预测功能可帮助对天气敏感的行业中的用户在管理其业务时保持领先。

由MicroWeather提供支持的ClimaCell API提供了可操作的天气洞察力，该洞察力来自二十多种天气参数。用户还可以生成可视天气地图图层，以增强他们的体验。

建设过程

在本节中，我将向你展示如何创建一个预报应用程序，用户可以在其中输入名称或名称来输入他们的城市或任何其他位置，并从ClimaCell API获取天气数据。API通过返回数据来响应请求，然后将数据显示给用户。

安装NodeJS并创建一个新项目

在此项目中，我们将使用Node.js —一种最流行的JavaScript运行时环境。Node.js帮助开发人员创建快速的Web应用程序。它具有用于创建高级Web应用程序的各种库和模块。

如果您的设备上没有Node.js，则可以从官方网站进行安装。

安装后，我们将使用此命令初始化npm-Node.js使用的默认数据包管理器。

$ npm init

这将创建我们的项目，因此将提示您输入一些详细信息，例如软件包名称，描述，Git存储库等。

接下来，我们安装运行项目所需的模块。为了生成Node.js应用程序框架，我们使用express-构建Node.js Web应用程序的框架。

$ npm install express

安装Express框架可帮助您运行服务器，处理客户端请求以及将正确的HTML模板与响应连接。

接下来，我们还将安装unirest-一个简单而强大的解决方案，允许您请求库。

这将帮助我们向ClimaCell API发出请求并处理响应。

使用此命令：npm install unirest

至此，我们已经安装了必要的模块，并且项目已准备就绪。

接下来，我们使用快速生成器工具生成一个天气应用程序。在命令行上，键入以下内容：express --view=pug weather-app-nodejs

你现在应该在命令行上具有如下视图：

获取ClimaCell Weather API

要访问ClimaCell API，您需要在其页面上注册一个帐户。

创建帐户后，登录其Microweather API仪表板，如下所示：

在仪表板上，单击引用以检查API端点。如您所见，ClimaCell API有许多端点，包括短期预报，每小时预报，实时数据等等。

值得一提的是，每个端点都有自己的代码段。例如，这是获取实时天气数据的Node.js代码片段。

你可以在开发人员资源部分中了解有关使用ClimaCell API的更多信息。

修改应用程序

要调用ClimaCell API，我们首先需要编辑一些文件。在这里，您可以使用记事本或在IDE中打开项目目录，以便于编辑。它应显示如下：

我们通过将bootstrap添加到layout.pug开始修改文件。打开views目录，然后将此代码段插入文件中。

接下来，我们通过将下面的代码段添加到index.pug文件中来创建一个表单。

注意我们如何使用HTTP post方法将数据发送到服务器。上面的代码还将操作参数设置为天气路线，并将输入的文本添加为“ city”。

还添加了用于获取天气的输入按钮。

现在，我们在表单下方创建一个HTML表，以显示获取的天气记录。

插入上面的代码片段将创建一个如下表：

调用ClimaCell API

要将请求发送到ClimaCell API，我们必须安装request模块。

npm i request --save

接下来，我们在index.js文件中添加ClimaCell API凭据。在您的路线目录中打开文件，并添加在ClimaCell仪表板上获得的API密钥：

以下是添加API凭据的代码：

添加API凭据后，我们将更新索引路由。这是通过替换index.js文件中“ /”路由中的代码部分来完成的 。

我们首先在index.js中创建天气路线。

此代码段使输入表单中的数据可以发布到索引路由。用户输入城市名称后，将使用请求对象将其分配给城市变量。

然后将该URL附加城市名称和ID，并将请求发送到ClimaCell API。

ClimaCell API服务器响应以JSON文件形式返回，然后将其解析并馈送到输出模板。

例如，如果用户正在寻找波士顿的天气预报，则该应用将返回以下内容：

注-此示例中的温度以开尔文（Kelvin）显示，等于50°F或10°C。

添加地图让数据可视化

您可以将交互式地图集成到预测应用程序中，以增强用户体验。这可以通过为Web应用程序使用第三方地图服务提供程序来实现。

Mapbox就是这样一种工具，可帮助开发人员为其应用程序创建出色的天气图。它与任何天气应用程序无缝集成。

要使用Mapbox，请在其网站上注册并查看其API。有针对Android，iOS，Web和Unity的集成。在这种情况下，我们选择Web集成作为我们的工具。

我们可以安装Mapbox CDN或使用模块捆绑器。让我们使用模块捆绑器。

第一步是安装软件包。

npm install Mapbox-gl –save

接下来，通过在中包含此代码段，将GL JS CSS文件添加到HTML文件中。

现在，我们可以将地图添加到我们的应用程序中。为此，请使用下面的代码段。

你可以通过替换地图来选择放置地图的位置

“ CONTAINER_ELEMENT_ID”。

这是使用Mapbox生成的示例地图：

下一步是什么？

至此，很多工作已经完成，你的应用程序可以使用ClimaCell API获取任何城市的天气预报。

但是，你可以考虑向应用程序添加更多交互功能或扩展其功能。

你可能需要添加以下的操作：

添加搜索功能。

改善用户界面的外观。

通过ID或名称查询应用程序。

显示目标城市及其相应ID的列表。

添加参数以显示其他天气数据。

集成实时通知和警告信号。

如你所见，基本的应用程序构建过程非常简单明了。通过遵循上述过程以利用天气API的功能，即使是初学者级的开发人员也可以在几分钟内启动并运行天气应用程序。