入门小脑洞(二):天气卡片



  • 这一篇我们一起来制作一个可以获取天气的卡片式单网页应用。

    1. 玩玩 Nodes


    左侧那一堆堆像积木一样的就是 Nodes 了,这货是 Node-RED 的基本单元,每一颗有不同的功能。
    每一个 node 都可以有输入和输出,它们之间可以连线,代表数据流。
    让我们拉俩出来遛遛先。

    这里用了 dashboard 组件中的 button 和 text,它们可以用来制作基本的界面。
    右侧添加的Tab即是一个网页,Group则是一张卡片。
    上面的动图里我们做了如下几件事:

    1. 添加了一个网页,里面有一张卡片
    2. buttontext都放到了这张卡片上
    3. button动作的输出设置为timestamp(时间戳),让它的触发作为text的输入
    4. 点击Deploy执行部署。

    悄悄告诉你,这3分钟里你已经搭建了一个美(sha)观(da)大(ben)方(cu)的网站。
    那么让我们继续。

    2. 看看效果

    点开左侧的侧边栏里ui的链接。
    没错,这就是你干的!

    3. 天气,天气!

    言归正传,看看获取天气需要些什么:

    • 发起 http 请求
    • 在返回数据中提取我们要的信息
    • 显示到界面上

    我们使用中国天气网的数据,它的接口格式是这样的:
    GET http://www.weather.com.cn/data/cityinfo/101020100.html
    返回json字符串:

    {
        "weatherinfo": {
            "city": "上海",
            "cityid": "101020100",
            "temp1": "6℃",
            "temp2": "16℃",
            "weather": "多云",
            "img1": "n1.gif",
            "img2": "d1.gif",
            "ptime": "18:00"
        }
    }
    

    好的,这就到 node 列表里找去。

    4. 给每个 node 填上信息

    好了,看情况我们需要的三块积木都找出来了:

    • http request: 被button的动作触发,发出GET请求去获取天气数据,返回交给下一位去处理。
    • json: 可以把输入的json字符串转换成json对象,便于处理
    • function: 把json对象里我们需要的信息提取出来,再给下一位。

    再下一位?对,就是刚才的text组件了,用来显示到界面上。
    备注:function里面有一段小小的javascript
    因为我们这里只需要:白天气温、夜间气温和天气状况

    var r = msg.payload.weatherinfo;
    msg.payload = r.temp1 + '~' + r.temp2 + ' ' + r.weather;
    return msg;
    

    做好别忘了Deploy

    5. 好了好了,看看现在啥效果

    哈,数据拿到了,春寒并不料峭啊 😄

    6. 界面还有点傻,完善一下

    给卡片,buttontext起个名,这样看起来没那么楞。

    7. 多流程

    现在我们可以看到一个城市的天气了,来试试多个城市呢?
    把这条流程 copy 一下,改掉 http requestURL 里的城市代码,参考这里:

    • 北京:101010100
    • 上海:101020100
    • 深圳:101280601

    然后让这一个button同时触发多条流程,当然,结果也需要显示在多个text组件上。

    0_1487329411177_flow.png

    这样我们就有了一张天气卡片,网址在这里:
    http://public-tutorial.goiot.cc/ui/#/0
    来看看吧!

    0_1487329533675_ui.png

    8. 更多思考

    每次查看天气点一下多麻烦,完全可以自动的嘛。
    当然可以!
    用这个 node 就行,去试试看吧
    0_1487329968071_Screen Shot 2017-02-17 at 19.12.26.png

    9. 更多更多思考

    作为一个懒人,既然看到这了,那我就悄悄告诉你。
    前面那些步骤都不需要,你就可以做一个同样的网站!
    (感觉看了篇假文档😢 )

    好吧,其实是这样的,可以把上面做的东西直接克隆到你的应用里,
    步骤是先到已有的app里面,选中需要的部分 export 导出到剪贴板
    做好的 flow 在这里:https://goiot.cc/public/tutorial (要先登录哦)
    然后到自己创建的应用里 import 粘贴进来,如下图所示

    10. 结束语

    到这里,已经没什么好说的了,你已经掌握了宇宙的终极奥义。

    因为,
    作为输入的 node 可以连上可以从网络获取到的一切信息,比如

    • 能联网的智能传感器
    • 金融数据
    • 地球某个角落正发生的事件

    作为中间节点的 node 能在其间处理各种逻辑,或许你知道 IFTTT
    而作为输出的 node 可以绑定执行动作,比如

    • 显示信息
    • 发送邮件
    • 发送短信微信,各种信
    • 控制一条机械手臂
    • 亦或在 Neo 的显示屏上显示 Wake up, Neo...

    0_1487331406655_Screen Shot 2017-02-17 at 19.35.27.png


    上一篇:入门小脑洞(一):创建一个应用
    下一篇:入门小脑洞(三):入门小脑洞(三):搭起你的网站来


  • Amateur

    这是一个新玩意, 但是教程写得不是很易懂, 照着做了一遍, 做不出来


  • Amateur

    这个链接点击不了:

    0_1489039888099_upload-838e6496-e826-40b1-8b31-4ed8c1c85f36



  • @Alex 可以点出来呀,我可以看到你做的页面
    http://alex-will_tomorrow_rain.goiot.cc/ui

    但是你的 text 节点有小红点提示没有正确部署哦,双击打开 text 节点,选好 Group 然后点完成。
    这一步的作用是选择把这个 text UI 组件放在页面的什么位置,这里只有一张卡片,叫 Group 1,所以选择把它放在 Group 1 就好了。



  • @Alex 谢谢反馈,我们会再写一些入门的小例子
    如果觉得麻烦,也可以拷贝已经做好的流程过来修改,比如这个例子的话,可以去这里,选中已有的 flow,然后导出到剪贴板,再在你的编辑器里导入。
    在上面的 "9. 更多更多思考" 有聊到。


Log in to reply
 

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.