Kittenbot 小喵科技——专注图形化编程教育

快捷导航
查看: 4785|回复: 8

[KittenBlock] 如何从零构建一个Scratch3/kittenblock插件(以IOT天气插件为例)

[复制链接]

26

主题

69

帖子

415

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
415
发表于 2019-4-7 23:21:40 | 显示全部楼层 |阅读模式
这篇文档是给对开发插件感兴趣的同学们参考的,讲述如何从零构件一个scratch3/kittenblock插件

本文属于开发教程

针对人群:
  • 有意加入Scratch/Kittenblock生态圈的程序猿
  • Kittenblock的进阶用户

插件构思
做任何插件前第一步就是要仔细构思你需要一个怎样的插件,具体实现手段有哪些。我们这里需要实现一个在scratch3内返回当前天气信息和未来天气预测的插件,经过百度和Google搜索了一大圈最后选定和风天气作为我们的实现方案。
具体可以参考他们的网站

注册和风天气
具体步骤这里省略,反正我们需要的就是一个可以访问的网络api,并读取我们需要的数据。详细可以参考和风的文档,写得非常详细~
我们主要是需要一个开发者api key

构建插件模板
有了key之后我们来做插件,前往小喵家前不久上线的插件构建模板页面(小喵科技出品,如果雷同,肯定是你抄我)

首先我们确定下插件的相关信息:
插件id为:hfweather (自己随便起)
中文名称就叫和风天气 (自己随便起)
logo从网站扣出来(你也可以用自己喜欢的图片)

之后我们来看看API文档,
首先知道我们可以做出哪些功能出来,并且如何通过什么类型积木块进行实现的。


功能挺全的,新手不要贪多。
有实时天气和未来几天天气预报基本就够我们玩IOT了~

这里要注意:
天气读取是一个异步流程。所谓的异步流程,也就是每次先需要发api请求给服务器,服务器过一会会返回数据给我们,其中返回的数据包括了我们需要的天气信息。
在scratch3中异步流程——可以用一个函数方块和帽子模块的组合实现,先发送请求,当返回的时候调用帽子模块。

之后我们再看看文档,实况天气请求返回有哪些值可以用:

有以下值可以进行返回。

选择我们感兴趣的参数,进行生成对应的方块

如法炮制我们的天气预报功能,根据不同API做不不同的积木块类型
最后整个积木预览如下:
导出index.js 文件
插件模块构建完成了,最后导出我们需要的index.js 文件。
小喵自动化插件页面最下方,有个导出
这个文件应该可以被scratch3或任意基于scratch3的软件加载。
导出.png

在Kittenblock打开和风插件
我们在Kittenblock安装目录下的extension文件夹下新建一个文件夹s3ext-hfweather, 将我们刚刚生成的index.js 拷贝到这个目录中。但是这还没结束,为了让Kittenblock正确加载插件,我们还需要一个插件描述文件extension.json

[JavaScript] 纯文本查看 复制代码
{
    "name": "和风天气",
    "type": "scratch3",
    "extensions": ["hfweather"],
    "image": "hfweather.jpg"
}

和一张插件的帅照~
这时候我们的插件文件夹目录应该如下:
重启kittenblock,在插件列表中时候能正确找到我们刚刚创建的插件呢?
到这里为止我们的插件只完成了一半,但是也是最繁琐的一半。剩下的就是愉快的写代码时间了~

插件代码实现
我们可以看到在index.js中自动生成了每个方块的执行代码,大致如下:

[JavaScript] 纯文本查看 复制代码
getweather (args, util){
  const LOC = args.LOC;

  return this.write(`M0 \n`);
}

我们需要重写每个方块的具体实现函数,后续我们在插件构造系统中会加入一些比较常见的实现方法,减轻大家的编码重复工作。
不管写任何代码,到这个时候希望大家仔细阅读文档,想清楚具体实现,可以的话可以编写一些测试用例去检测你的想法是不是行得通的。和风的api是一个很通用的restful api格式模板,鉴权过程也相当简单,直接把key填在GET请求参数就行了~
这里就不卖关子了,直接上代码。 我们将上面读取实时天气的函数改造成如下,之后重启kittenblock加载插件。
[JavaScript] 纯文本查看 复制代码
getweather (args, util){
  const LOC = args.LOC;
  const url = new URL("https://free-api.heweather.net/s6/weather/now?");
  url.searchParams.append('location', LOC || 'auto_ip')
  url.searchParams.append('key', APIKEY)

  return fetch(url).then(res => {
    if (res.ok) {
      res.json().then(json => {
        console.log("weather ret", json);
      });
    }
  });
}
PS:这里有个小技巧,就是现在kittenblock外建立一些测试用的js代码或用例把东西都先调通再移植进来,毕竟反复的重启软件也是挺烦的。
我们可以按F12打开kittenblock的devtool,查看点击该积木的返回json内容。

[JavaScript] 纯文本查看 复制代码
weather ret 
{HeWeather6: Array(1)}
HeWeather6: Array(1)
0:
basic:
admin_area: "广东"
cid: "CN101280601"
cnty: "中国"
lat: "22.54700089"
location: "深圳"
lon: "114.08594513"
parent_city: "深圳"
tz: "+8.00"
__proto__: Object
now:
cloud: "91"
cond_code: "100"
cond_txt: "晴"
fl: "27"
hum: "91"
pcpn: "0.0"
pres: "1011"
tmp: "24"
vis: "16"
wind_deg: "180"
wind_dir: "南风"
wind_sc: "1"
wind_spd: "5"
__proto__: Object
status: "ok"
update:
loc: "2019-04-07 20:55"
utc: "2019-04-07 12:55"
__proto__: Object
__proto__: Object
length: 1
__proto__: Array(0)
__proto__: Object

知道json的结构后我们就可以将返回值暂存着,并触发帽子函数。getweather函数fetch部分改成如下:

[JavaScript] 纯文本查看 复制代码
return fetch(url).then(res => {
    if (res.ok) {
      res.json().then(json => {
        console.log("weather ret", json);
        this.weather = json.HeWeather6[0].now;
        this.runtime.startHats('hfweather_onweather', {});
      });
    }
  });

这时候我们的帽子函数不做任何判断直接返回true就行了,之后读取温度函数直接返回刚才暂存的天气温度。远程调用帽子模块遵循MIT的定义 插件ID_帽子函数ID

[JavaScript] 纯文本查看 复制代码
onweather (args, util){
  return true;
}

temp (args, util){
  return this.weather.tmp;
}

使用异步的好处就是我们可以给程序多加几个小伙伴,每个人干不同的事情~

最后的最后,和风插件的源代码我们放在了github仓库:
回复

使用道具 举报

188

主题

447

帖子

1838

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1838
发表于 2019-4-8 12:30:44 来自手机 | 显示全部楼层
入门Scratch开发必看~
回复 支持 反对

使用道具 举报

0

主题

3

帖子

50

积分

热心会员

Rank: 2

积分
50
发表于 2019-4-20 14:17:57 | 显示全部楼层
太棒了!,花时间研究一下就可以实现很多自己想要的功能拉
回复 支持 反对

使用道具 举报

188

主题

447

帖子

1838

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1838
发表于 2019-4-20 15:21:57 | 显示全部楼层
杨老湿爱编程 发表于 2019-4-20 14:17
太棒了!,花时间研究一下就可以实现很多自己想要的功能拉

期待你的分享哈~~
回复 支持 反对

使用道具 举报

2

主题

11

帖子

42

积分

新手小白

Rank: 1

积分
42
发表于 2019-7-9 16:21:37 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

1

帖子

4

积分

新手小白

Rank: 1

积分
4
发表于 2019-8-10 16:12:45 | 显示全部楼层
请教下this.runtime.startHats,这句话是什么作用
回复 支持 反对

使用道具 举报

2

主题

4

帖子

46

积分

新手小白

Rank: 1

积分
46
发表于 2019-9-23 15:46:35 | 显示全部楼层
想请教一下,如果我想使用 Arduino 要导入其他的 h文件,要怎么在  js 调用?

比如我要加入 ld3320.h 文件,Arduino 图形化就用不了哟
回复 支持 反对

使用道具 举报

0

主题

1

帖子

16

积分

新手小白

Rank: 1

积分
16
发表于 2019-10-29 11:02:42 | 显示全部楼层
有视频教程吗?在这个教程里面,有好几个图没办法加载
回复 支持 反对

使用道具 举报

0

主题

2

帖子

45

积分

新手小白

Rank: 1

积分
45
发表于 2020-5-23 17:47:12 | 显示全部楼层
!!!!怎么才看到。。。感觉开启了新世界的大门了!!!!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

全力为Stem教育行业提供新技术、新方案和新产品。

 

地址:广东省深圳市华丰互联网+创意园 419~420

© 2019 Kittenbot Inc. 深圳市小喵科技有限公司 ( 粤ICP备16110073号 )

GMT+8, 2020-6-2 02:57 , Processed in 0.037435 second(s), 38 queries , Gzip On.
Powered by Discuz! X3.2

快速回复 返回顶部 返回列表