本文共 11067 字，大约阅读时间需要 36 分钟。
Abrupt weather and climate change are things that everybody is dealing with. In fact, the vast majority of the global population relies on accurate, real-time . This has increased the importance of reliable Android and iOS weather apps. In this article, we will show you how to create a simple forecasting tool using NodeJS and a weather API.But before that, let’s go over the importance of weather apps.
突发的天气和气候变化是每个人都在处理的事情。 实际上，全球绝大多数人口都依靠准确的实时 。 这增加了可靠的Android和iOS天气应用程序的重要性。 在本文中，我们将向您展示如何使用NodeJS和天气API创建简单的预测工具，但是在此之前，让我们先了解一下天气应用的重要性。
A feature-rich app can provide great value to various industries. Some noteworthy benefits of weather applications include:
功能丰富的应用程序可以为各个行业提供巨大价值。 天气应用程序的一些值得注意的好处包括：
Here are some of the things you will need to build a weather app successfully:
要成功构建天气应用，您需要执行以下操作：
Once you have these ready, you’re good to go.
一旦准备好这些，就可以了。
ClimaCell is a popular weather provider that offers hyper-accurate as well as forecasts through an easy to consume API. Its forecasting capabilities help users in weather-sensitive industries stay on top of things as they manage their operations.Powered by MicroWeather, the offers actionable weather insights generated from over twenty weather parameters. Users can also generate visual weather map layers to enhance their experience.
ClimaCell是一个受欢迎的天气提供商，可通过易于使用的API提供超准确的以及天气预报。 它的预测功能可帮助对天气敏感的行业的用户在管理其业务时掌握最重要的信息。在的支持下， 提供了可操作的天气洞察力，该洞察力来自二十多种天气参数。 用户还可以生成可视天气地图图层，以增强他们的体验。
In this section, I will show you how I created a forecasting app where a user enters their city or any other location by name and fetches weather data from the ClimaCell API. The API responds to the request by returning data, which is then displayed to the user.
在本部分中，我将向您展示如何创建一个预测应用程序，用户可以在其中输入名称或名称来输入他们的城市或任何其他位置，并从ClimaCell API获取天气数据。 API通过返回数据来响应请求，然后将数据显示给用户。
For this project, we will use Node.js — one of the most popular run-time environments for JavaScript. Node.js helps developers create quick web applications. It has a wide range of libraries and modules for creating advanced web applications.If you do not have Node.js on your device, you can install it from the .Once installed, we use this command to initialize npm - the default packet manager used by Node.js.$ npm init
在此项目中，我们将使用Node.js —一种最流行JavaScript运行时环境。 Node.js帮助开发人员创建快速的Web应用程序。 它具有用于创建高级Web应用程序的大量库和模块。如果您的设备上没有Node.js，则可以从安装。安装后，我们将使用此命令初始化npm-默认数据包Node.js使用的管理器。 $ npm init
This creates our project, so you will be prompted to enter a few details such as package name, description, Git repository, and more.Next, we install the modules required to run our project. To generate a Node.js app skeleton, we use express - a framework for building Node.js web applications.$ npm install expressInstalling the express framework helps you run the server, handle client requests, and connect the right HTML template with a response. Next, we will also install unirest - a simple yet powerful solution that allows you to request a library. It will help us make requests to the ClimaCell API and handle the responses. Use this command:npm install unirestAt this point, we’ve installed the necessary modules, and the project is ready.Next, we generate a weather app using the express generator tool. On the command line, type this:express --view=pug weather-app-nodejs You should now have a view like this on the command line:
这将创建我们的项目，因此将提示您输入一些详细信息，例如包名称，描述，Git存储库等。接下来，我们安装运行我们的项目所需的模块。 为了生成Node.js应用程序框架，我们使用express-构建Node.js Web应用程序的框架。 $ npm install express安装express框架可帮助您运行服务器，处理客户端请求以及将正确HTML模板与响应连接。 接下来，我们还将安装unirest-一种简单而强大的解决方案，允许您请求库。 它将帮助我们向ClimaCell API发出请求并处理响应。 使用以下命令： npm install unirest至此，我们已经安装了必要的模块，项目已经准备就绪。接下来，我们使用express generator工具生成一个weather app。 在命令行上，输入以下命令： express --view=pug weather-app-nodejs现在，您应该在命令行上具有如下视图：
To get access to the , you will need to sign up for an account on their page.
要访问 ，您需要在其页面上注册一个帐户。
Once you create an account, sign in to their Microweather API dashboard which looks like this:
创建帐户后，登录其Microweather API仪表板，如下所示：
On the dashboard, click on references to check the API endpoints. As you can see, the ClimaCell API has a number of endpoints including the short term forecast, hourly forecast, real time data, and more.
在仪表板上，单击引用以检查API端点。 如您所见，ClimaCell API有许多端点，包括短期预报，每小时预报，实时数据等等。
Worth a mention is that each endpoint has its own code snippet. For example, here is the Node.js code snippet for getting real time weather data.
值得一提的是，每个端点都有自己的代码段。 例如，这是获取实时天气数据的Node.js代码片段。
You can learn more about using the ClimaCell API on their .
您可以在了解有关使用ClimaCell API的更多信息。
To call the ClimaCell API, we need to first edit some files. Here, you can use Notepad or open the project directory in your IDE for easier editing. It should appear as shown:
要调用ClimaCell API，我们首先需要编辑一些文件。 在这里，您可以使用记事本或在IDE中打开项目目录，以便于编辑。 它应显示如下：
We start modifying our files by adding bootstrap to layout.pug. Open the views directory and insert this snippet to the file.
我们开始通过将bootstrap添加到layout.pug来修改文件。 打开views目录，并将此代码段插入文件中。
Next, we create a form by adding the snippet below to index.pug file.
接下来，我们通过将以下代码段添加到index.pug文件中来创建表单。
Notice how we use the to send data to the server. The code above also sets the action parameter to weather route and adds the text input as “city.” An input button to fetch the weather is also added. We now create an HTML table just below the form to display fetched weather records.
注意我们如何使用将数据发送到服务器。 上面的代码还将操作参数设置为天气路线，并将输入的文本添加为“ city”。 还添加了用于获取天气的输入按钮。 现在，我们在表单下方创建一个HTML表，以显示获取的天气记录。
Inserting the code snippet above creates a table that looks like this:
插入上面的代码片段将创建一个如下表：
To send requests to the ClimaCell API, we must install the .npm i request --saveNext, we add the ClimaCell API credentials in the index.js file. Open the file in your routes directory and add the API key you obtained on the ClimaCell dashboard:
要将请求发送到ClimaCell API，我们必须安装 。 npm i request --save接下来，我们在index.js文件中添加ClimaCell API凭据。 在您的路线目录中打开文件，并添加您在ClimaCell仪表板上获得的API密钥：
Here is the code to add API credentials:
以下是添加API凭据的代码：
After adding the API credentials, we update the index route. This is done by replacing the code section in ‘/’ route in index.js file.
添加API凭据后，我们将更新索引路由。 这是通过替换“ /”路由中的代码部分来完成的 index.js文件。
We finish by creating the weather route in index.js.
我们首先在index.js中创建天气路线。
This code snippet enables data in the input form to be posted to the index route. Once the user enters a city name, it is assigned to the city variable using the request object. The URL is then appended with the city name and ID and the request sent to ClimaCell API.The ClimaCell API server response is returned as a JSON file, which is then parsed and fed to the output template.For instance, if the user was looking for Boston weather forecasts, the app will return this:
此代码段使输入表单中的数据可以发布到索引路由。 用户输入城市名称后，将使用请求对象将其分配给城市变量。 然后将URL附加城市名称和ID并将请求发送到ClimaCell API.ClimaCell API服务器响应以JSON文件的形式返回，然后将其解析并馈送到输出模板。例如，如果用户正在寻找对于波士顿天气预报，该应用将返回以下内容：
Note - The temperature in this example is shown in Kelvin and is equal to 50°F or 10°C.
注-此示例中的温度以开氏温度表示，等于50°F或10°C。
You can integrate interactive maps into your forecasting application to enhance user experience. This can be achieved by using a third-party map service provider for web applications. is one such tool that helps developers create awesome weather maps for their applications. It integrates seamlessly with any weather app.To use the Mapbox, sign up on their website and . There are integrations for Android, iOS, Web, and Unity. In this case, we choose Web integration for our tool.We can either install the Mapbox CDN or use the module bundler. Let's use the module bundler.The first step would be installing the packagenpm install Mapbox-gl –saveNext, we add the GL JS CSS file in the HTML file by including this snippet in the <head><link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />We can now add the map to our application. To do this, use the code snippet below.
您可以将交互式地图集成到预测应用程序中，以增强用户体验。 这可以通过使用针对Web应用程序的第三方地图服务提供程序来实现。 是一种这样的工具，可帮助开发人员为其应用程序创建天气图。 它可以与任何天气应用程序无缝集成。要使用Mapbox，请在其网站上注册并 。 有针对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='stylesheet' />包含此代码段，在HTML文件中添加GL JS CSS文件。 <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />现在，我们可以将地图添加到应用程序中了。 为此，请使用下面的代码段。
You can choose where to place the map by replacing the
您可以通过替换地图来选择放置地图的位置
“CONTAINER_ELEMENT_ID’ .Here is a sample map generated using Mapbox:
“ CONTAINER_ELEMENT_ID”。以下是使用Mapbox生成的示例地图：
At this point, much of the work is done, and your app can get weather forecasts for any city using the ClimaCell API.
至此，许多工作已经完成，您的应用程序可以使用ClimaCell API获取任何城市的天气预报。
However, you can consider adding more interactive features to your application or extending its functionality.
但是，您可以考虑向应用程序添加更多交互功能或扩展其功能。
Here are some things you might want to do:
您可能需要执行以下操作：
As you can see, the basic app building process is pretty simple and straightforward. By following the above process to leverage the power of a weather API, even beginner-level developers can get their weather application up and running in a matter of minutes.
如您所见，基本的应用程序构建过程非常简单明了。 通过遵循上述过程以利用天气API的功能，即使是初学者级的开发人员也可以在几分钟内启动并运行天气应用程序。
翻译自:
转载地址：http://dmgwd.baihongyu.com/