我是如何构建自己的天气预报工具的

突如其来的天气和气候变化是每个人都在应对的事情。事实上，绝大多数全球人口依赖于准确的、实时的天气数据和预报来做出明智的决定。这增加了可靠的Android和iOS天气应用的重要性。在本文中，我们将向您展示如何使用NodeJS和天气API创建一个简单的预报工具。但在此之前，让我们回顾一下天气应用程序的重要性。

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

以下是成功构建天气应用程序所需的一些条件：

气候细胞是一个很受欢迎的天气提供商，它通过一个易于使用的API提供超精确的历史天气数据和预报。它的预测功能帮助天气敏感型行业的用户在管理运营时随时掌握情况。在MicroWeather的支持下，气候细胞API提供了从20多个天气参数生成的可行的天气洞察力。用户还可以生成可视化天气图层来增强体验。

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

对于这个项目，我们将使用Node.js-最流行的JavaScript运行时环境之一。js帮助开发人员快速创建Web应用程序。它有很多用于创建高级Web应用程序的库和模块。如果您的设备上没有Node.js，可以从官网安装。安装后，我们使用此命令初始化npm-Node.js使用的默认包管理器。$NPM初始化。

这将创建我们的项目，因此系统将提示您输入一些详细信息，如包名、描述、Git存储库等。接下来，我们安装运行项目所需的模块。要生成Node.js应用程序框架，我们使用express-一个构建Node.js web应用程序的框架。$npm install express安装express框架可以帮助您运行服务器、处理客户端请求，并将正确的HTML模板与响应连接起来。接下来，我们还将安装UniRest-一个简单但功能强大的解决方案，允许您请求库。它将帮助我们向气候细胞API发出请求并处理响应。使用以下命令：npm install unirest此时，我们已经安装了必要的模块，项目已经准备好了。接下来，我们使用EXPRESS生成器工具生成一个天气应用程序。在命令行中键入以下内容：express--view=pug weweet-app-NodeJS您现在应该在命令行上有一个如下所示的视图：

要访问气候细胞API，您需要在他们的页面上注册一个帐户。

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

在仪表板上，单击References以检查API端点。如您所见，Climate Cell API有许多端点，包括短期预测、每小时预测、实时数据等等。

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

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

我们通过将bootstrap添加到layout.pug来开始修改我们的文件。打开Views目录并将此代码段插入到文件中。

请注意我们如何使用HTTP POST方法将数据发送到服务器。上面的代码还将动作参数设置为天气路线，并将文本输入添加为“City”。还添加了用于获取天气的输入按钮。现在，我们在表单下方创建一个HTML表，以显示获取的天气记录。

要向Climate aCell API发送请求，我们必须安装请求模块。npm I请求--保存下一步，我们将在index.js文件中添加Climate aCell API凭据。打开routes目录中的文件，并添加您在气候室仪表板上获得的API密钥：

添加API凭据后，我们更新索引路由。这是通过替换index.js文件中‘/’route中的代码部分来实现的。

此代码片段允许将输入表单中的数据发布到索引路由。一旦用户输入城市名称，就会使用Request对象将其赋给城市变量。然后，在URL后面附加城市名称和ID，并将请求发送到气候单元API。将Climate aCell API服务器响应作为JSON文件返回，然后解析该文件并将其提供给输出模板。例如，如果用户正在查找波士顿天气预报，应用程序将返回以下内容：

注-本例中的温度以开尔文表示，等于50°F或10°C。

您可以将交互式地图集成到您的预测应用程序中，以增强用户体验。这可以通过使用Web应用程序的第三方地图服务提供商来实现。Mapbox就是这样一种工具，它可以帮助开发人员为他们的应用程序创建令人惊叹的天气地图。它与任何天气应用程序无缝集成。要使用MapBox，请在他们的网站上注册并查看他们的API。它集成了Android、iOS、Web和Unity。在本例中，我们选择Web集成作为我们的工具。我们可以安装Mapbox CDN，也可以使用模块捆绑器。让我们使用模块捆绑器。第一步是安装软件包npm install mapbox-gl-save接下来，我们通过在<；head>；<；link href='；https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css'；rel='；样式表中包含此代码段，将GL JS css文件添加到HTML文件中。我们现在可以将地图添加到我们的应用程序中。为此，请使用下面的代码片段。

至此，大部分工作已经完成，您的应用程序可以使用气候细胞API获得任何城市的天气预报。

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

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

免费学习编码。FreeCodeCamp的开源课程已经帮助超过4万人找到了开发人员的工作。开始