使用Node-RED搭建一个天气预报面板

关于Node-RED的任何项目、技术咨询都可联系 vx: _0xffffffffffff, qq: 924219829
点击链接加入群聊【Node-RED与IoT开发交流】https://jq.qq.com/?_wv=1027&k=5owlJfm
新创立的群,欢迎加入!

总览

效果图
实现
这个小项目的目标是通过API请求 获取OpenWeatherMap的基础天气信息和WAQI的空气质量信息, 并将这些信息存入MySQL数据库, 并从前端展示出来. 展示Node-RED在可视化编程和UI界面快速构建方面的强大能力.
相关资源可在Github获取, https://github.com/bing-zhub/WeatherNode. 如果对您有用也请赏个Star吧

数据库设计

ER图
以Weather表为主表其余为副表, 通过外键关联各个副表. 大体含义可以通过域名推测.

API Token获取

OpenWeatherMap

  1. https://home.openweathermap.org/users/sign_up 注册
  2. https://home.openweathermap.org/api_keys 添加项目
  3. 在2的页面中可以查看到你获取的Token
    具体的API参数参照 https://openweathermap.org/current

WAQI

  1. https://aqicn.org/data-platform/token/# 注册
  2. 注册成功后便可以在当前页面获取到Token
    具体的API参数参照 https://aqicn.org/json-api/doc/

Node-RED编写

如果曾看过之前的文章, 应该知道 Node-RED每个flow是通过一个msg对象进行传递数据的. 所以这里我们在init节点生成一个msg对象, 来替代Node-RED本身生成的msg对象(这样可以更加方便添加键值对).

msg = {
    city:"",
    country:"",
    basic_api:"",
    air_api:"",
    data:{
        basic:{

        },
        air:{

        }
    },
    topic:"",
    ids:{
        location:0,
        temp:0,
        wind:0,
        air:0,
        iaqi:0
    },
    payload:{
        urls:""
    }
}

return msg;

city/country用来放置即将在config节点中即将添加的城市和国家. data用来存储从API获取的数据. topic在后续节点主要用于存放SQL语句. ids用于存放,在存入副表数据过程中产生的副表ID, 主要用于主表外键关联.

从数据源获取数据

在初始化完成后, 下面构造API

city = "London";
country = "UK";
basic_token = "OpenWeatherMap token";
air_token = "WAQI token";

msg.city = city;
msg.country = country;
msg.basic_api = `http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${basic_token}`;
msg.air_api = `https://api.waqi.info/feed/${city}/?token=${air_token}`;

msg.url = msg.basic_api;
return msg;

构造完成后, API地址被放入了msg对象, 在下一步的Request请求便可以调用.
Request节点可以通过可视化配置的方式配置API地址, 也可通过msg.url动态配置, 所以我们把基础天气信息的API放入msg.url.

Request(GET)请求后, 返回的数据通过JSON节点, 将字符串转为JavaScript对象, 这样更加方便操作. 转换好之后, 将获得的数据放入事先为数据预留的msg.data.

这是我们就已经获取到了对应城市的基础天气.

空气质量信息与之类似, 不赘述.

数据库存储

数据源数据获取后, 我们便可以操作msg, 将需要的信息存储进入数据库.
首先我们安装Mysql Connector
节点管理
MySQL

latitude = msg.data.basic.coord.lon;
longitude = msg.data.basic.coord.lat;

sql = `insert into Location (latitude, longitude) values(${latitude}, ${longitude});`;
msg.topic = sql;
return msg;

首先获取msg对象中的latitudelongitude.
接下来构造DML, 这里使用JavaScript的模板语法, 把获取的latitudelongitude填入SQL语句.
由于Node-RED中的MySQL驱动从以msg.topic为SQL, 所以我们要将构造好的SQL放入msg.topic.

之后, 从左侧节点栏拖出MySQL, 配置数据库, 完成后用连线将二者(function节点与MySQL节点)进行连接, 如总图.

当数据到来时, MySQL节点便会执行msg.topic中的SQL语句, 将对应的信息存入数据库. 数据存储成功后, MySQL节点会将SQL执行的结果返回到msg.payload, 其中包含插入的id, 我们将获取到的id放入ids对应的键中, 以便后续使用.

其余过程相似性很大, 不再赘述.
在对主表进行操作时, 将msg.ids中的数据获取出来, 便可以产生外键约束, 保持数据整体性.

可视化

未完待续…

本人水平极为有限, 存在的不足还请各位海涵. 有问题欢迎交流. 如果有时间我会写一篇真正的关于物联网的小文.

### 回答1: Node-RED一个用于构建可视化流程应用的开源工具。它可以帮助您快速构建自动化流程,并且可以通过 Web 界面操作。 要使用 Node-RED 创建一个网页,您可以按照以下步骤进行操作: 1. 安装 Node-RED:首先,您需要安装 Node-RED。您可以在 https://nodered.org/docs/getting-started/installation 上找到安装说明。 2. 启动 Node-RED:在安装完成后,打开命令行窗口,输入 `node-red` 命令并回车,就可以启动 Node-RED。 3. 在浏览器中打开 Node-RED 界面:在启动 Node-RED 后,您可以在浏览器中输入 http://localhost:1880/ 打开 Node-RED 界面。 4. 创建流程:在 Node-RED 界面中,您可以通过拖拽节点并连接它们来创建流程。 5. 配置节点:在创建流程的过程中,您需要配置每个节点的属性,以指定它们的功能。 6. 部署流程:当您完成流程设计后,点击界面上的“部署”按钮,就可以将流程部署到 Node-RED 中。 7. 在浏览器中查看网页:最后,您可以在浏览器中输入 http://localhost:1880/ 并查看 ### 回答2: Node-RED一个基于Node.js开发的编程工具,主要用于快速搭建物联网应用的流程。要使用Node-RED来做一个网页,需要经过以下的步骤: 1. 安装Node-RED:首先,需要在计算机上安装Node.js。然后,在命令行中运行`npm install -g node-red`命令,即可安装Node-RED。 2. 启动Node-RED:在命令行中输入`node-red`命令,启动Node-RED。然后,在浏览器中输入`http://localhost:1880`,即可打开Node-RED的编辑界面。 3. 创建网页:在Node-RED编辑界面中,可以通过拖拽不同的节点来创建一个网页。例如,可以使用`http in`节点作为网页的入口,使用`http response`节点作为网页的返回数据。还可以使用其他节点,如`template`节点来定义网页的内容。 4. 配置节点:在创建节点之后,还需要对节点进行配置。例如,在`http in`节点中,需要设置网页的路径和请求方法。在`http response`节点中,需要设置返回的HTML内容。 5. 运行网页:在完成网页的创建和配置后,可以点击页面右上角的“部署”按钮,将网页运行起来。然后,在浏览器中输入相应的地址,即可访问该网页。 需要注意的是,Node-RED的编程方式是基于流程的,每个节点代表一个功能模块,通过连接不同的节点来完成复杂的处理逻辑。因此,在使用Node-RED做网页时,需要先了解其基本的流程编程概念和节点使用方法。 ### 回答3: 用Node-RED创建一个网页是非常简单的。Node-RED一个基于流程的编程工具,它可以帮助我们通过连接预先定义的节点来构建应用程序。以下是创建一个简单网页的步骤: 1. 首先,确保已经安装了Node.jsNode-RED。在终端或命令提示符中运行以下命令来检查Node.jsNode-RED的安装情况: ``` node -v npm -v ``` 如果没有安装,请先安装Node.jsNode-RED。 2. 启动Node-RED。在终端或命令提示符中运行以下命令: ``` node-red ``` Node-RED将在本地主机的默认端口(一般是1880)上运行。 3. 打开你的Web浏览器,输入`http://localhost:1880`。这将打开Node-RED的用户界面。在这里,你可以看到一个以“流”为中心的编程环境。 4. 在左侧面板中,选择一个`http in`节点并将其拖放到流程编辑器中。 5. 右键单击`http in`节点并选择"Edit"。在弹出的对话框中,设置`URL`,例如`/my-page`,然后点击"Done"保存配置。 6. 在左侧面板中,选择一个`http response`节点并将其拖放到`http in`节点的下方。 7. 右键单击`http response`节点并选择"Edit"。在弹出的对话框中,设置响应的`Status Code`和`Headers`应答头,然后点击"Done"保存配置。 8. 连接`http in`和`http response`节点。将鼠标指针悬停在`http in`节点上,点击鼠标左键并保持点击不放,然后将指针移到`http response`节点上,松开鼠标左键。 9. 点击右上角的"Deploy"按钮以将更改应用到Node-RED运行环境。 10. 现在,你可以通过在浏览器中输入`http://localhost:1880/my-page`来访问你的网页。你将看到由`http response`节点返回的响应。 这只是一个简单的示例,你可以根据自己的需求添加更多的节点和逻辑来构建复杂的网页。Node-RED提供了丰富的节点库,可以用于创建各种不同类型的应用程序。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值