项目一:给我发消息之Part 1
CONNECT! App
![](https://markdown.liuchengtu.com/work/uploads/upload_3768da62bd92f50d8780cda8b5a3c952.png)
和你的团队一起开发一个app,可以将信息发送到100米外的你的Microbit上。按下app上的按钮,使Microbit在其LED矩阵上显示图片。
完成后的app将如下所示:
![](https://markdown.liuchengtu.com/work/uploads/upload_72cefce23e96051e7948041ab4db6df0.png)
为了发送信息,你的团队需要了解以下几方面的背景知识:
-
Microbit是什么?
Microbit是一种易于使用的实验用小型计算机。它的一侧有25个红色led,另一侧有一个计算机处理器芯片。
![](https://markdown.liuchengtu.com/work/uploads/upload_f05a2472ad33868309c0de7d50223713.png)
-
什么是LED矩阵?
Microbit的25个小灯显示图片、数字和字母。led可以滚动文本信息并显示简单的动画。
![](https://markdown.liuchengtu.com/work/uploads/upload_d754629c3971daa43dd6687cacfce0b3.png)
-
什么是蓝牙?
你可能知道蓝牙是手机向其他设备(如耳机或小型扬声器)发送信息的一种方式。蓝牙通过无线电波发送信息。
- 在Microbit和手机、平板电脑上使用蓝牙。
- 根据你使用的Microbit型号,蓝牙无线电天线是金色或黑色的。(在手机或平板电脑中,天线隐藏在里面。)
-
什么是物联网(IoT)?
从这里开始
- 获取App Inventor项目初始代码。
-
点击“Project”(项目)
![](https://markdown.liuchengtu.com/work/uploads/upload_cb996d3a7d5a975cbccb0dc8b10c2b1f.png)
-
选择“从我的计算机导入项目(.aia)”,如图中所示。
![](https://markdown.liuchengtu.com/work/uploads/upload_a9c57f5ba42b8c94820c6e7cce0e0c9b.png)
-
导入项目初始文件。
- 确保蓝牙已开启。
检查你的手机或平板电脑设置,确保蓝牙开启,如下图所示。
- 无需与Microbits配对。你可以忽略蓝牙配对设置。我们将Microbit以“无配对”模式连接到app,所以配对这这一步是不必要的。
![](https://markdown.liuchengtu.com/work/uploads/upload_a9789f5b0e840857fbf46ca73be803e6.png)
- 在你的手机或平板电脑上设置定位权限
要访问蓝牙,需要你的设备在设置中开启位置权限。原因是一些蓝牙小工具(不是本项目中的Microbits)需要开启蓝牙来为你的设备提供位置。
-
找到设备上的“设置”。
![](https://markdown.liuchengtu.com/work/uploads/upload_d33aa3b569bf40ff5138f93dbeb24e6c.png)
-
在“设置”中,单击“位置”。
![](https://markdown.liuchengtu.com/work/uploads/upload_2e4e17da0cf1437762f71ba6f66dc92f.png)
-
开启定位
![](https://markdown.liuchengtu.com/work/uploads/upload_20ee42a4f941682c0924b800f2fd60e2.png)
- 测试代码。
要查看代码的功能,请将初始代码加载到手机或平板电脑上的AI伴侣中。初始代码可能需要一分钟左右的时间来加载,所以要有耐心!
![](https://markdown.liuchengtu.com/work/uploads/upload_336a104884a5129dab7df392539249b7.png)
- 你应该在设备上的实时测试窗口中看到这样的app。(在点击Scan之前先认真阅读!)
![](https://markdown.liuchengtu.com/work/uploads/upload_cad0524fe39f992743024d853b1424f6.png)
- 通电!
你(或你的老师)应该将Microbit启动代码加载到Microbit上。(详细说明请参阅 Part 0:项目1:“为学生团队设置Microbit” 。)确保Microbit已接通电源。设备背面的黄灯应该是亮的,在前面的LED显示屏上应该有一个X。
![](https://markdown.liuchengtu.com/work/uploads/upload_8c3d407f1085254d28c9d83abb30ca0d.png)
- 使用该app扫描蓝牙设备。
点击app上的“Scan”来搜索附近的蓝牙设备。
![](https://markdown.liuchengtu.com/work/uploads/upload_b1901585eb37e77f8c9d4b66504676bd.png)
- 检查列表。
你应该看到你学校或邻居所有蓝牙设备的列表 —— 其中一些可能是朋友的耳机或附近的其他小工具。扫描器移动得很快,但你应该会看到一个项目,上面写着“BBC micro:bit”。按“Stop Scan”按钮冻结列表。
![](https://markdown.liuchengtu.com/work/uploads/upload_7511721ce1d2e23ce9ebdfb9f6efb778.png)
- 如果同一教室里有多个Microbit,请确保名字与你的Microbit的唯一名称相匹配,例如“vavuz”或“zazva”。(你或你的老师可能已经用胶带给Microbit贴上了标签。参见 项目一:Part 0 准备文档 中的“同一教室中使用多个Microbit的注意事项”。)
![](https://markdown.liuchengtu.com/work/uploads/upload_e78c11f79a26def516d61db7429e3177.png)
-
在列表中单击你的Microbit的名称,然后单击“Connect”。
![](https://markdown.liuchengtu.com/work/uploads/upload_4fdd666725e664b61e6c8a134f53c8d9.png)
![](https://markdown.liuchengtu.com/work/uploads/upload_b3dd2899ba4cd3865dcd5d0b580a2862.png)
-
成功!
你应该在Microbit上的红色LED显示屏上看到一个心形。
![](https://markdown.liuchengtu.com/work/uploads/upload_0846cd12d4ba4c397052a3be099838ae.png)
重新连接
- 如果你的Microbit与蓝牙断开连接并且无法重新连接,请按下Microbit板上的Reset按钮,如图所示。
- 使用app中的Scan/Connect按钮重新连接Microbit。
- 如果你在App Inventor中更改代码,而AI伴侣和Microbit都已连接,则更改可能不会出现问题。或者app断开了连接,而Microbit会认为它仍然连接。在这种情况下,重置Microbit,如上所示。
![](https://markdown.liuchengtu.com/work/uploads/upload_5a313439a4c08e34ac97eb2e2b58a4ff.png)
一旦你的app连接到Microbit,当你按下app上的“Send a Message”(发送一条消息)按钮时,Microbit会发生什么?还是什么都没有?你能找到问题吗?
在App Inventor中完成Connect App
你的app已连接到Microbit,但app无法向Microbit发送消息。你怎么解决这个问题?
- 检查代码。
点击App Inventor右上角的Blocks按钮,查看app的代码。
![](https://markdown.liuchengtu.com/work/uploads/upload_289a1e0e50923436a99ff3fc8586fa33.png)
(注:图中橙色箭头所指的6个代码块用于设置所有的蓝牙操作,如扫描和连接。这些代码块都折叠起来了,你可以双击它们来让它们显示完整。
初始代码中绿色箭头所指的插槽是空的,代码不完整。让我们将sendMessageButton的代码修复完整!)
- 构建sendMessageButton的代码
这些代码片段应该出现在starter模板中。将代码放在一起,使sendMessageButton向Microbit发送消息。在本例中,我们想发送一个带有单词“start”的消息:
![](https://markdown.liuchengtu.com/work/uploads/upload_ba5e1564e82fd56e471fc8531a10248c.png)
拖动join块和两个带逗号的string字符串块:
![](https://markdown.liuchengtu.com/work/uploads/upload_48feb89399054bb92cdbcbc3ea884a9c.png)
![](https://markdown.liuchengtu.com/work/uploads/upload_37c868d5702b3348ec6e2acf3bdde091.png)
连接到App Inventor Companion来测试你的代码(使用与上面步骤6相同的过程)。
- 然后使用蓝牙将你的app连接到你的Microbit(与步骤7到11相同)。
一旦你的app连接上,当你按下app上的SEND A MESSAGE按钮时,Microbit会发生什么?Microbit应该显示菱形:
![](https://markdown.liuchengtu.com/work/uploads/upload_2411b33c40a2404ade90358967811a3b.jpg)
任务拓展:更改图标或添加动画
当你按下app中的SEND A MESSAGE按钮时,Microbit会显示一个菱形。但是这个形状是不是有点……无聊?接下来,更改Microbit上的代码,以便在按 SEND A MESSAGE 时执行不同的操作。
你想让它让Microbit做什么?
你需要更改Microbit上的代码。到目前为止,你只更改了App Inventor代码。但是在这个物联网项目中有两组代码一起工作!
![](https://markdown.liuchengtu.com/work/uploads/upload_e8f38091e9007e80464dfba85696379e.png)
添加Microbit码
-
获取Microbit MakeCode启动代码。
这个代码使Microbit显示菱形。你可以把它变成任何形状!
- 找到老师提供的文件(microbit-Connect_STARTER.hex)或在包含本课程的文件夹中找到的文件。(译注:请在附件中下载)
- 把文件下载到你电脑的硬盘上。注意保存文件的位置。
-
进入Microbits编码网站并导入代码。
-
如果你看到如下所示的页面,点击左上角的micro:bit标志进入主菜单。
![](https://markdown.liuchengtu.com/work/uploads/upload_8965c7a95d3576498a2ff211200322ff.png)
-
单击“import导入”。
![](https://markdown.liuchengtu.com/work/uploads/upload_51cc4719884b8e4537dd3162b068eb11.png)
-
在新窗口中单击“Import File导入文件”:
![](https://markdown.liuchengtu.com/work/uploads/upload_22825fe43de51f2dd9ed435eb433be9f.png)
-
单击“Choose File选择文件”。
![](https://markdown.liuchengtu.com/work/uploads/upload_c9915cd8e3e0acfdefaa4befedeb8de0.png)
-
在你的计算机上找到之前下载的文件(microbit-Connect_STARTER.hex)。
![](https://markdown.liuchengtu.com/work/uploads/upload_66a8ef3d8e1f8ad2109d3d6aeb9e4486.png)
-
选择文件后,单击 Go ahead! 将其导入到Microbit编辑器。
![](https://markdown.liuchengtu.com/work/uploads/upload_f2630762fdb5370aa76377b6bf495a7a.png)
- 查看Microbit代码。
你的屏幕将看起来像这样,显示Microbit代码。在这个项目中,代码将负责接收来自移动app的消息。
![](https://markdown.liuchengtu.com/work/uploads/upload_737ef2653733af5392e5ac3dc75faee5.png)
<font class="text-color-6" color="#2196f3">讨论:microbit将从app接收到什么信息?你还记得你的团队在App Inventor代码中编写了什么单词作为消息吗?</font>
![](https://markdown.liuchengtu.com/work/uploads/upload_7f45608c865d787849a323e7f02d1afe.png)
-
更改Microbit上的图形。
- 你可以将图形更改为不同的图标:
![](https://markdown.liuchengtu.com/work/uploads/upload_768467ed8a06f72a31e231919a97a0e3.png)
将图标从钻石切换到怪物?
![](https://markdown.liuchengtu.com/work/uploads/upload_26fe26d4efe00bbec9962f75d4870f11.png)
测试
- 完成!现在下载(或“烧录”)新代码到你的Microbit中,如准备材料中的“为学生团队设置Microbit”所示。
- 用电池、USB或电源适配器将电源连接到Microbit。
- 通过蓝牙连接App Inventor和Microbit,如前所述。
- 发送消息到Microbit,测试你的新图标和动画!
![](https://markdown.liuchengtu.com/work/uploads/upload_6aec4632a8c1e10d965acdab271a65af.jpg)
进阶:创建一个倒计时!
当Microbit从app接收到一条新消息时,你能让Microbit显示从9到0的倒计时吗?
-
再利用你的Microbit代码。
- 添加/删除/重写代码。在前面创建的图标或动画的基础上构建,或者使用上面描述的连接Microbit启动代码(Microbit - connect_starter .hex)。
- 重新命名。要重用代码,请在MakeCode页面底部的文本框中重新命名代码—例如,在该空间中使用像“Countdown”这样的新名称。
如何在if代码块中创建一个显示图标或动画的倒计时?
上图中的橙色箭头是你的代码中已有的图标和动画。
-
创建一个新变量并将其设置为9。
- 在 <font class="text-color-2" color="#e91e63">Variables</font> 抽屉中,创建一个名为 <font class="text-color-2" color="#e91e63">index</font> 的新变量。变量 <font class="text-color-2" color="#e91e63">index</font> 将跟踪倒计时:
![](https://markdown.liuchengtu.com/work/uploads/upload_850d6caec897138ae75575fc6f4115d3.png)
- 从 <font class="text-color-2" color="#e91e63">Variables</font> 抽屉中拖入一个 <font class="text-color-2" color="#e91e63">Set Variables</font> 块,初始化 index 变量以开始倒计时(例如,“9,8,7…”)。从数字9开始倒计时,并将 <font class="text-color-2" color="#e91e63">Set Variables</font> 块放入If块中。
![](https://markdown.liuchengtu.com/work/uploads/upload_dc2af20624fa886d94fc433acf24f1c4.png)
-
创建一个循环。
创建一个循环来显示倒计时的数字,并在每次传递时从变量 <font class="text-color-2" color="#e91e63">index</font> 中减去1。
- 从 <font class="text-color-10" color="#4caf50">Loop</font> 抽屉中拖动一个 <font class="text-color-10" color="#4caf50">repeat times</font> 块。 <font class="text-color-10" color="#4caf50">repeat times</font> 块将重复倒计时,并将次数更改为开始倒计时的次数。
- 将循环次数设置为9,并将其放置在变量 index 的 <font class="text-color-2" color="#e91e63">Set Variables</font> 代码块下方。
![](https://markdown.liuchengtu.com/work/uploads/upload_9cc39e6770afc544717c1c2a966acaa7.png)
-
在Microbit LED矩阵上显示数字。
- 从 <font class="text-color-6" color="#2196f3">Basic</font> 抽屉中拖动 <font class="text-color-6" color="#2196f3">show number</font> 块,并将其添加到倒计时循环中:
![](https://markdown.liuchengtu.com/work/uploads/upload_cc3cf11e930057c9d8bb76862a128aad.png)
- 设置代码块 <font class="text-color-6" color="#2196f3">show number</font> 来显示变量 <font class="text-color-2" color="#e91e63">index</font> 。这将使每个数字在LED矩阵上显示很短的时间。
![](https://markdown.liuchengtu.com/work/uploads/upload_5daefcf619b169885c4dea49d06fd2a9.png)
- 数字倒数。
- 每次循环重复时,更改数字。将变量 index 的另一个 <font class="text-color-2" color="#e91e63">Set Variables</font> 代码块拖到循环中:
![](https://markdown.liuchengtu.com/work/uploads/upload_09cbea09ab18b85c42d576fa92b4349d.png)
- 如何使每次循环重复时倒计时减少1(9,8,7…)?首先从 <font class="text-color-3" color="#9c27b0">Math</font> 抽屉中拖动 <font class="text-color-3" color="#9c27b0">subtraction</font> (减法)块到 <font class="text-color-2" color="#e91e63">Set Variables</font> 块:
![](https://markdown.liuchengtu.com/work/uploads/upload_a9239ea55f0cf9ae1f45fe090b564dd1.png)
-
设置 index 变量来倒计时。
将 <font class="text-color-2" color="#e91e63">index</font> 变量设置为每次从自身减去1(或 decrement减少 变量)
![](https://markdown.liuchengtu.com/work/uploads/upload_23a017a73d2c795f5fe9c54d5be76f4a.png)
-
检查你的代码。
代码中可能有不同的动画或图标。倒计时结束后有很多变化:
![](https://markdown.liuchengtu.com/work/uploads/upload_b418bf7d7771ce218e9b9880050519c5.png)
测试
你的倒计时是如何工作的?你必须回去调试吗?别担心!这很常见:所有有经验的程序员都需要调试。
假如你的倒计时工作得很正常,你还想做什么修改?
- 如何在 <font class="text-color-6" color="#2196f3">Basic</font> 抽屉中使用 <font class="text-color-6" color="#2196f3">Pause</font>(暂停)代码块让数字在Microbit LED矩阵上显示得更慢?
- 如何创建一个变量来将倒计时的开始从9更改为其他数字?(注意:两位数的数字会在LED矩阵上一个一个滚动,所以它们在倒计时时可能看起来不太好!)