前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用 Node.js 的 16 行代码创建一个简单的天气 App

用 Node.js 的 16 行代码创建一个简单的天气 App

作者头像
疯狂的技术宅
发布2019-03-28 10:17:45
2.1K0
发布2019-03-28 10:17:45
举报
文章被收录于专栏:京程一灯

仅15分钟学会使用 API 调用并建立一个命令行天气应用程序。

本教程的范围

欢迎!这是多篇教程中的第一篇文章!

在本教程中,您将学习如何调

用 OpenWeatherMap.org API 并把结果输出到控制台。

- 20 秒快速注册 OpenWeatherMap.org 账户。

- Node.js : 如果没有安装 Node,请到官网 Node.js website 下载并安装。如果这样的项目你感兴趣并且你也在寻找 Node 更深入的教程请查看另一篇文章 Top Three Node.js courses

第一步:OpenWeatherMap

当你想玩玩 API ,OpenWeatherMap 是一个不错的地方。实际上有关于天气的11种不同的api供您访问。

对于这个项目我们将使用免费的 Current Weather API, 点击此处注册账号。

登陆之后, 点击 API keys, 在页面的右侧你可以创建一个 key,输入一个名称(任何)并选择生成。在页面左侧可以看到生成的 API Key。

太棒了,现在我们有API密匙,可以开始创建我们的应用程序。

第二步:Setting up the project

1. 创建 node-weather 文件夹然后执行:

npm init

2. 填写所需的信息来初始化我们的项目

以下是我的 package.json 文件初始化后的样子。

注意:你本地的跟我的看起来略有不同,没关系。

{

"name": "simple-nodejs-weather-app",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"repository": {

"type": "git",

"url": "git+https://github.com/bmorelli25/simple-nodejs-weather-app.git"

},

"author": "brandon morelli",

"license": "ISC",

"bugs": {

"url": "https://github.com/bmorelli25/simple-nodejs-weather-app/issues"

},

"homepage": "https://github.com/bmorelli25/simple-nodejs-weather-app#readme",

"dependencies": {

}

}

3. 创建 index.js 文件,此文件将包含应用程序的代码。

Making the API call

API调用,我们将使用一个受欢迎的npm模块 request 调用。 request 已经有数以百万的下载,是一个简化 http 请求的模块。

npm install request --save

就像我说的, request 很容易使用。我们只需要传惨 url,request 返回一个回调函数。

const request = require('request');

request(url, function (err, response, body) {

if(err){

console.log('error:', error);

} else {

console.log('body:', body);

}

});

让我们分解这个代码

1. 引入 request 包

2. 传 url ,request 返回一个回调函数,其中参数为 err 、 response 、body

3. 在请求中检查错误, 如果有 error ,输出到控制台

4. 如果没有 error, 将 body 输出。

太棒啦,不过 url 是什么呢?

通过阅读OpenWeatherMap(https://openweathermap.org/current) 文档,能够确定 url 是什么。http://api.openweathermap.org/data/2.5/weather 需要两个必须的参数。已键值对形式通过 url 传递城市以及 API Key 。

let apiKey = '****************************';

let city = 'portland';

let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`

上述代码做了3件事

1. 声明变量 apiKey 存放 API Key

2. 声明变量 city 存放城市。

3. 声明变量 url 存放接口地址,? 后面是查询参数,以 key = value 形式存在,不同参数间以 & 连接

代码整合后如下:

let request = require('request');

let apiKey = '*****************************';

let city = 'portland';

let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`

request(url, function (err, response, body) {

if(err){

console.log('error:', error);

} else {

console.log('body:', body);

}

});

控制台输入运行代码:

node index.js

// the following is returned:

body: {"coord":{"lon":-122.68,"lat":45.52},"weather": [{"id":801,"main":"Clouds","description":"few clouds","icon":"02d"}],"base":"stations","main":{"temp":302.15,"pressure":1014,"humidity":51,"temp_min":301.15,"temp_max":303.15},"visibility":16093,"wind":{"speed":2.6,"deg":320},"clouds":{"all":20},"dt":1497905580,"sys":{"type":1,"id":2274,"message":0.0042,"country":"US","sunrise":1497874905,"sunset":1497931383},"id":5746545,"name":"Portland","cod":200}

我们成功的请求了 OpenWeatherMap’s API 并返回了数据。数据里有好多信息,比如 温度、湿度、风速等等

重要提示:你永远不会像这样在你的代码中公开你的API密钥。为了简洁起见,我像这样把它放在公开的地方。在以后的教程中,我将向您展示如何使用环境变量隐藏 API 。现在,只需要知道像这样公开 API 密钥是不标准的。

整理返回数据

这个应用程序还不能用。返回的数据混乱杂乱令人讨厌。让我们把整理下。

我们需要做的第一件事是将返回字符串 json 转换成 JavaScript 对象。

我们用以下代码转换:

let weather = JSON.parse(body)

现在我们有了 JavaScript 对象,我们可以用点或括号符号来访问对象中的数据。下面,我们通过访问天气对象中的数据构造消息字符串。

let message = `It's ${weather.main.temp} degrees in${weather.name}!`;

console.log(message);

执行程序,输出如下:

node index.js

// It's 300.4 degrees in Portland

稍等。程序没有错,OpenWeatherMap 默认返回 Kelvin 温度。如果需要华氏温度添加参数 units=imperial。

执行代码:

node index.js

// It's 70.1 degrees in Portland

修改后代码如下:

let request = require('request');

let apiKey = '***********************************';

let city = 'portland';

let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}`

request(url, function (err, response, body) {

if(err){

console.log('error:', error);

} else {

let weather = JSON.parse(body)

let message = `It's ${weather.main.temp} degrees in ${weather.name}!`;

console.log(message);

}

});

添加交互性

我们的应用程序仍然很无聊。我们只能访问波特兰俄勒冈的天气。让我们添加一些互动。为此,我们将使用yargs(https://www.npmjs.com/package/yargs)。 Yargs是交互式命令行接口工具。或者更简单地说,它允许我们从命令行定义变量。

安装 yargs :

npm install yargs --save

yargs 将控制台输入的变量放在 argv 对象里。我们设置和访问这个对象如下:

const argv = require('yargs').argv;

我们将使用 c 表示城市:

修改 city 变量为 argv.c 。如果没有输入变量,默认为 Portland 。如下:

let city = argv.c || 'portland';

运行程序:

node index.js

我们需要传递一个名为 c 的变量,如下所示

node index.js -c Boston

// It's 85 degrees in Boston

我们使用一个标志表示传递的变量。因为我们将变量设置为字母 c,所以我们用 c 传递变量。c 后面可以跟任何我们想要的城市名称!

node index.js -c Anchorage

// It's 47 degrees in Anchorage

在这一点上,我们的代码入下:

const request = require('request');

const argv = require('yargs').argv;

let apiKey = '*****************************';

let city = argv.c || 'portland';

let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}`

request(url, function (err, response, body) {

if(err){

console.log('error:', error);

} else {

let weather = JSON.parse(body)

let message = `It's ${weather.main.temp} degrees in ${weather.name}!`;

console.log(message);

}

});

你做到了!


往期精选文章

ES6中一些超级好用的内置方法

浅谈web自适应

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-09-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档