手把手教你为慧编程编写舞台角色扩展

手把手教你为慧编程编写舞台角色扩展

慧编程最近又更新了不少舞台角色扩展,不知道小伙伴们是否已经用了起来?

慧编程

值得注意的是,这些更新的舞台角色扩展中,有好些都来自于我们的第三方开发者。他们通过扩展设计器创作的扩展,不仅开发了新功能、支持了自己创意作品的实现,也丰富了慧编程的舞台扩展生态。我们今天想要给大家分享一个很文艺的扩展应用:一言。

一言

你还记得上一次因为某个动画、漫画、小说而感动的时刻吗?也许当时只是看到了一两句话,就感动了,或是开心了,或是勾起了某段回忆。有一个网站:一言网,把万千网友喜欢或感动的一句话都收集了起来,并提供了API以让其他应用的开发者获取这些触动人心的句子以及信息。

一言网首页
(图为一言网首页)

今天要分享的这位开发者创建的舞台角色扩展,就是把一言网提供的API引入了慧编程。最终实现的积木效果就是:每运行一次积木块,就可以显示随机的句子。希望你能看到曾经触动你的那些句子哦~

慧编程

基本原理说明

在慧编程中,点击一个积木语句块运行,实际上代表一段 js 程序的执行,所以制作一个可运行的积木语句实际上是比较容易的。

以一言网站提供的API为例,分析其API文档得知,如下 API 请求(可以直接粘贴到浏览器查看效果,如果选取的API不能直接访问,有可能存在跨域问题)

https://v1.hitokoto.cn/?c=a&encode=json

是可以获取一条来自动画的句子的结果返回,结果如下:

{
“id”: 84,
“hitokoto”: “因为无法再见面,所以要笑着说再见。”,
“type”: “a”,
“from”: “AIR”,
“creator”: “Sai”,
“created_at”: “1468605909”
}
我们可以将该请求过程定义在积木块的执行程序里,并且将结果返回。

具体步骤

步骤1:登录扩展设计器

第一步,我们进入扩展设计器:https://ext.makeblock.com

(注:如果你没有账号,可以在扩展设计器主页注册一个。这个账号后续可以用在童心制物makeblock的所有软件产品体系中,包括慧编程的社区、移动端、PC端、Web端等等,用该账号还可以同步自己的作品、使用慧编程的人工智能服务,会非常有用滴!)

登录慧编程扩展设计器
步骤2:新建扩展

注册好了账号,我们就直接登录进去,在左侧栏,点击【我的插件】,选择【我的扩展】。

(注:在扩展设计器中,【我的设备】和【我的扩展】是两个不同的概念。设备指的是具体的一个硬件设备,也可以理解为一个硬件角色,和舞台角色相对应。而扩展是需要依赖一个硬件角色或者舞台角色而存在。)

比如我们这次为舞台角色开发增强扩展,选择的就是【我的扩展】 -【新建扩展】

慧编程新建扩展

步骤3:填写基本信息

慧编程

慧编程

点击【确定】后,回到扩展列表,点击【扩展名称】进入编辑页

慧编程

步骤4:添加分类和积木

点击添加分类后,出现弹窗,填写信息,标志ID默认即可。

慧编程添加分类和积木

步骤5:设计语句块

慧编程

如上图所示,我们需要三个积木,其中“选择句子类型”这个积木负责发起HTTP请求,“显示句子“和“显示句子来源”负责显示请求的结果。

设计【选择句子类型】

对于API:https://v1.hitokoto.cn/?c=a&encode=json,参考 API 文档,参数 c 可以取值为:a, b, c, d, e,f, g 等

慧编程

点击积木列表下面的 + 号,添加一个新积木块,我们可以定义语句块如下:

慧编程

步骤6:【在线运行处理配置】以及【公共代码配置】

【在线运行处理配置】

定义好了语句块描述以及参数以后,我们接着来定义执行该语句块的具体行为,点击【积木配置】旁边的【在线运行处理配置】tab 栏,会出现下图的界面。黑色的框框中可以双击编辑,填写该语句块的具体执行程序。

慧编程积木配置

这里设计器已经封装好了执行接口,大家只需要在大括号中填入对应的 js 执行代码,设计器里我们支持 es6、es7 语法,大家可以使用 async 等语法。(编辑区中的args, app,device,block等用法,可以参考《慧编程扩展设计器api说明》https://www.mblock.cc/doc/zh/developer-documentation/design-blocks-6-2.html)

async (args, app, device, block) => {
const { origin } = args; // args.origin 表示获取下拉框的值
await getYiYanOfCategory(origin);
}
在这里大家会发现有一个函数 getYiYanOfCategory,这个函数哪里来的?下面介绍扩展设计器中一个比较有用的配置项【公共代码配置】

【公共代码配置】

点击顶部 tab 栏 【公共代码配置】,默认截图如下

慧编程公共代码配置

双击黑色区域编辑代码,这里可以定义全部变量、全局函数,扩展设计器中的其他js配置项中,可以直接调用这些公共代码。像上一步【在线运行处理配置】中的 getYiYanOfCategory 函数,就是在这里定义的,完整代码如下

var yiYanResult = {
hitokoto: ”,
from:”
};
const request = async (opts = {}) => {
const host = ‘https://v1.hitokoto.cn/’;
const { method, body, headers } = opts;
var url = host + opts[‘url’];
try {
if (!navigator.onLine) {
console.log(‘网络状况不佳~~~~’)
}
let req = {
// 默认为POST请求
method: method ? method : ‘POST’,
headers: new Headers(),
}
// POST 请求则在body中添加请求参数
if (method == ‘POST’) {
Object.assign({}, req, { body: JSON.stringify(body) })
}
const res = await fetch(url, req);
return res.json()
} catch (err) {
console.log(err.toString())
}
}
const getYiYanOfCategory = async (category) => {
return await request({
url: `?/c=${category}&encode=json`,
method: ‘GET’
})
}

步骤7:定义返回积木块

按照步骤6,我们可以利用 yiYanResult 来存储每次 api 接口请求到的内容,然后在返回积木块中返回。

配置积木块

慧编程配置积木块

配置在线运行

慧编程积木配置
代码如下,return 数值,就是该类积木块的运行配置。

(app, device, block) => {
return yiYanResult[‘hitokoto’]
}

验证调试扩展

方式1:点击设计器右上角的【预览】

慧编程

会弹出预览窗口,并且发现我们的扩展已经加载进来啦!如果没有出现扩展,注意检查右上角的登陆账号是否和扩展设计器一致。

慧编程验证调试扩展
你可以鼠标移动到标题栏,右键:检查,像普通浏览器调试一样,调试你的扩展代码。

慧编程
方式2:下载扩展到本地,拖拽到慧编程中直接使用

最后还想提醒一下大家的是:“一言”这个扩展已经正式上线到慧编程啦,无论你使用的是慧编程Web端还是PC端,都可以使用这个扩展了~希望这些小句子能带给你更多的感动哟!

有奖征集

为鼓励第三方开发者加入慧编程扩展开发者团队,进一步丰富慧编程扩展生态,我们将面向广大老师、开发者推出“扩展教程有奖征集”活动。

【活动流程】

1.在慧编程扩展设计器上(https://ext.makeblock.com)为慧编程添加一个新设备/传感器/新功能扩展,扩展的类型和具体内容不限,请自由发挥~

2.当您的扩展被正式上线到慧编程后(一般需要3个工作日审核),请参考扩展教程投稿模板(https://shimo.im/docs/OMAXVnyewECjF4qR/ )输出一份你的扩展教程并发送给“慧编程小助手”

【参考资料】

慧编程扩展设计器帮助文档(全):https://www.mblock.cc/doc/zh/developer-documentation/developer-documentation.html

慧编程扩展参考范例:https://www.mblock.cc/doc/zh/developer-documentation/extension-tutorials.html

【奖品设置】

输出1个扩展教程并被“童心制物STEAM教育研究院”公众号选用,即可获得1套价值249元的光环板套装或对应价值的mBuild模块

makeblock
输出2个扩展教程并被“童心制物STEAM教育研究院”公众号选用,即可获得1套价值549元的mBot套装

mBot套装

输出3个扩展教程并被“童心制物STEAM教育研究院”公众号选用,即可获得1套价值699元的Airblock套装或价值699元的程小奔套装或价值799元的神经元艺术家套装

神经元艺术家套装

(以上产品3选1)

输出4个扩展教程并被“童心制物STEAM教育研究院”公众号选用,即可获得1套价值1199元的神经元智造家套装

神经元智造家套装

*以上奖励不重复发放,可依据作者意愿累积教程数量兑换奖品。本活动最终解释权归“童心制物STEAM教育研究院”所有

【帮助与交流】

如果您在使用慧编程扩展设计器中遇到任何问题或困难,欢迎扫码添加慧编程小助手(微信号:mBlock_helper),发送“扩展”,即可加入“慧编程扩展开发者群”

慧编程小助手

admin

该用户很懒,还没有介绍自己。