背景简介

本编教程以一个 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说明》

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:下载扩展到本地,拖拽到慧编程中直接使用

小结

舞台扩展定义做下来,是不是也还挺简单,等熟练的掌握了扩展的制作方法,你就可以尝试制作更多好玩的扩展啦。你还可以参考:《如何制作自己的扩展主页?》,为自己的扩展制作一个扩展主页,用于展示扩展的介绍和用法,并与用户交流,持续改进

扩展包下载地址

hitokoto.mext

其他资源参考

【添加慧编程小助手:mBlock_helper,发送暗号【扩展】,可以加入到慧编程扩展开发者微信群!

图片

results matching ""

    No results matching ""