【AI2+IoT】《数据采集和分析》1 - 《给我发消息》Part 2

项目一：给我发消息之Part 2

Message Me!  App

使用App中的按钮将简单的消息无线发送到100米外的Microbit。Microbit在LED矩阵上显示图片！(在下一课中，你可以反向发送消息 -- 使用Microbit的按钮和传感器将数据发送到app。)

完成后的app是这样的:

从这里开始

发送消息！

1. 获取App Inventor初始代码。

• 该代码允许你快速连接到Microbit。

• 找到老师提供的文件(Message_Me_STARTER.aia)或在包含本课程的文件夹中找到的文件（译注：请在文末附件中下载）。

• 把文件下载到你电脑的硬盘上。注意保存文件的位置。

• 进入App Inventor AI2 界面设计和逻辑设计 (http://ai2.appinventor.mit.edu)。

• 从电脑中导入文件。

2. 看看Message Me的界面设计:
   

• 它有什么用？猜猜每个组件的作用。

下面是components面板中组件的图像。你能猜猜每个组件的作用吗？别忘了看看手机下面那些不可视组件！（仅一点注意 -- 请不要重命名组件。本教程将在你稍后编码时引用给定的组件名。)

（注：图中的不可视组件是App Inventor的扩展，为了清晰用途进行了重命名。组件的原始名称为：BluetoothLE1, Microbit_UART_Simple1）

3. 检查代码。

点击App Inventor中的Blocks（逻辑设计）按钮查看初始代码：

（注：图中橙色箭头所指的6个代码块用于设置所有的蓝牙操作，如扫描和连接。这些代码块都折叠起来了，你可以双击它们来让它们显示完整。
初始代码中绿色箭头所指的插槽是空的，smileButton按钮发送的消息还没有设置好，请你修复这块代码！）

4. 向smileButton添加消息。

smileButton使用callMicrobitDataChannel.SendMessage代码块向Microbit发送消息。但是看看空白的text string代码块。你的工作就是填满它们！

• 从中间的text string代码块开始。在代码块中输入smile这个词。为什么是smile？当Microbit接收到smile消息时，你将编程Microbit在led上显示笑脸。
  

5. 添加一个逗号！

逗号？是的，下一步可能看起来很奇怪，但请坚持下去 -- 你需要使用join块在消息smile两边添加逗号(，)。

如图所示：

这些逗号是怎么回事？
想想你和朋友说话的方式。你可能没留意，但你可以通过使用停顿来表达一个消息的结束和另一个消息的开始。
例如，你可以对你的朋友说：“I want to learn to cook (pause) my brothers know how to use the oven (pause)”（“我想学做饭(暂停)我的兄弟们知道怎么用烤箱(暂停)”）
但是，要小心！如果你的声音没有停顿，它可能听起来像:“I want to learn to cook my brothers! Know how to use the oven?”（“我想学怎样把我兄弟们给烹了！知道怎么用烤箱吗?”）
天啊，我要说的不是这个意思啊！
同理，物联网项目通过在消息之间使用称为字段分隔符的特殊字符来避免混淆。今天，你将编程你的设备使用逗号来保持消息分开。例如，当app发送诸如“,smile,,frown,,frown,,smile,”之类的数据流时，Microbit会知道smile           frown           frown           smile都是分开的消息。

要测试微笑按钮，你需要更改Microbit上的代码。到目前为止，你可能只更改了App Inventor代码。但是在这个物联网项目是两组代码一起工作的！如图中所示：

烧录Microbit “Message Me”代码

1. 获取Microbit MakeCode。

• 当Microbit接收到“smile”消息时，该代码使Microbit显示微笑。

• 找到老师提供的文件(microbit-Message_Me_STARTER.hex)或在包含本课程的文件夹中找到的文件。（译注：请在附件中下载）

• 把文件下载到你电脑的硬盘上。注意保存文件的位置。

2. 进入Microbits 编码网站并导入代码。

• 进入以下网站：https://makecode.microbit.org。（ 重要：如Part 0文档中所述，如果使用比版本V2更老的Microbit，请转到 https://makecode.microbit.org/v4 ）。

• 你可能会看到一个显示主菜单的页面:
  

• 如果你看到这样的页面，点击左上角的micro:bit标志进入主菜单。
  

• 单击“import导入”。
  

• 在新窗口中单击“Import File导入文件”:
  

• 单击“Choose File选择文件”。
  

• 在你的计算机上找到之前下载的文件(microbit-Message-Me-STARTER.hex)。
  

• 选择文件后，单击Go ahead!将其导入到Microbit编辑器。
  

3. 查看Microbit代码。

你的屏幕看起来如图显示Microbit代码。在这个项目中，代码将负责接收来自移动app的消息:

• microbit代码和App Inventor代码非常相似。你甚至会看到一些相同的积木！在你探索Microbit的过程中，你将了解它们的不同之处。

• 例如，这里的Message Me代码接收来自App Inventor移动app的消息。

  • Microbit代码等着从app中听到什么信息?

  • 如果通过蓝牙从app发送消息，会发生什么?

  • 如果我们在代码中拼错了 smile（如 “smyle”，“smell”，“smoot”），你认为会发生什么?

4. 将Message Me 的MakeCode代码烧录到Microbit上

• 下载（或“烧录”）新代码到你的Microbit中，如 Part 0中的“为学生团队设置Microbit”所述。

• 用电池、USB或电源适配器将电源连接到Microbit。
  

将app加载到App Inventor 伴侣

• 在你的设备上加载Message Me! App到App Inventor 伴侣。
  

连接Microbit和App

• 如Part 1所述，通过蓝牙连接App Inventor和Microbit。(在app中点击扫描，在列表中找到你的Microbit，然后点击连接。)

• 发送消息到Microbit和测试你的app!
  

• 提示：在浏览器上同时打开Microbit MakeCode和App Inventor选项卡。你可以来回切换来更改两者的代码。

<font class="text-color-6" color="#2196f3">当你按下app上的笑脸会发生什么？当你按下其他按钮（frown 和 monster）会发生什么？为什么？</font>

对frowButton进行编码

1. 在App Inventor中，再次查看Message Me代码。

• 如何添加代码块来发送带有单词frown的消息?
  

2. 对frowbutton进行编码。

• 在“frownButton”抽屉中，将when frownButton.Click积木块拖出并将其添加到代码中。
  

3. 创建一种向Microbit发送消息的方法。

• 你需要一个来自MicrobitDataChannel抽屉的块(在底部)来发送消息到Microbit。找到call MicrobitDataChannel.SendMessage代码块，并将其拖到when frownButton.Click事件中。
  

  • SendMessage代码块通过蓝牙发送消息。

  • 当新消息到达Microbit时，这条消息会提示Microbit在数据接收块上运行蓝牙并做一些很酷的事情。

4. 编排需要发送的消息

• 回顾一下smileButton的代码，熟悉一下消息的格式。接下来，你需要一个join积木块来发送带有逗号的消息。

• 拖出join积木块并将其修改为三个文本的插槽。然后将其添加到MicrobitDataChannel.SendMessage 代码块中。
  

• 将三个文本字符串积木块拖动到join块的槽中。
  

5. 在文本块中放入一条消息。

• 参照smileButton的例子，在你的新积木块中输入单词 frown。

• 你在哪里输入这个词?

• 在什么地方加逗号?
  

编写代码让Microbit皱眉

1. 在Microbit上给Message Me添加新代码。

• 访问Microbit编码网站(makecode.microbit.org)或浏览器上的open选项卡。(如前所述，如果使用比版本V2更早的Microbit，如Part 0中所述，请转到https://makecode.microbit.org/v4)。

• 查看“Message Me”!代码。你还能补充什么?当app发出带有 frown 这个词的信息时，是什么让Microbit做一些有趣的事情呢?
  

2. 在 if-then 块中添加另一个插槽。

• 按if块底部的 + 键两次。这将创建一个else if-then条件和一个else条件。这样，你的代码就可以根据发送给Microbit的消息做出更多决策。
  

• 使用 “-” 按钮删除else条件。目前还不需要它。
  

3. 创建图标

• 从“Basic”抽屉中拖动一个“show icon”块，并将其更改为“frown皱眉”图标(稍后可以更改为任何选项)!

• 把它放入新的else-if-then插槽。
  

4. 从“Logic逻辑”抽屉中拖出“Comparison比较”代码块。

• 确保选择带有引号(" ")的比较块。这个块比较两个带有字母或单词的消息（我们将在下一课中讨论数据类型）。

• 将比较代码块放在if - then块中，检查变量是否等于单词smile。
  

• 将变量<font class="text-color-1" color="#f44336">message</font>从<font class="text-color-1" color="#f44336">变量</font>抽屉中添加到“比较”代码块中。
  

5. 添加特别的消息！

• 当你按下app屏幕上的frownButton时，app会发送什么消息？（如果你忘了，请回到“编写代码让Microbit皱眉”部分。）让Microbit显示皱眉图标，如果它收到frown这个词：
  

测试你的新frownButton！

故障排除：如果我的frownButton不工作怎么办？: - (
检查以下各项：

• App Inventor是否正在你的手机或平板电脑上运行你的新代码?
• Microbit正在运行你的Microbit新代码吗?
• Microbit接电源(USB或电池)了吗?
• app上的蓝牙连接是否连接到Microbit(app顶部显示绿色)

编写monsterButton并检视自己的理解

1. 编写monsterButton。

你刚刚编码了皱眉和微笑按钮，因此在你的app上连接monsterButton将使用你所知道的步骤并回溯。

• 测试app向使用Microbit的人发送怪物表情符号有多快。

• 注意，该app可以在室外100米(室内约30 - 60米)内发送消息。你能传递多远的信息?

2. 小测试：下面这些代码段会起作用吗?(答案在最后)
   查看下面的代码并做出判断，A、B、C、D哪些代码会起作用？
   
   
   

<font class="text-color-6" color="#2196f3">更多尝试</font>

• 你还可以向Microbit发送哪些图标?

• 你可以使用App Inventor中的文本框TextBox向Microbit发送文本吗？如何用Microbit的Basic抽屉中显示字符串代码代码块来实现？

小测试答案：

A. 是，起作用。这些信息和教程是一样的，代码会起作用。

B. 否。代码不起作用！试试找找问题在哪里？

C. 是，起作用。任何单词都可以用来触发Microbit中的if-then-else块。

D. 是，起作用。Microbit代码中的数字与app代码中的数字相匹配。