【Hour of AI】教程：信使
本帖最后由 szjuliet 于 2023-2-5 22:16 编辑【Hour of AI】教程：信使
教程地址：http://alexa.appinventor.mit.edu/?locale=en&repo=http://appinventor.mit.edu/yrtoolkit/yr/aiaFiles/AlexaMessenger/AlexaMessenger_Starter.asc
视频教程：
https://www.bilibili.com/video/BV1AD4y1N7UE/
# 构建自己Alexa的信使App
1. [【Hour of AI】教程：Alexa Hello Moon](https://mc.dfrobot.com.cn/thread-314771-1-1.html?fromuid=818739)
2. [【Hour of AI】教程：Alexa Space Fact Generator 随机太空小知识](https://mc.dfrobot.com.cn/thread-314788-1-1.html?fromuid=818739)
3. [【Hour of AI】教程：Alexa Calculator 计算器](https://mc.dfrobot.com.cn/thread-314797-1-1.html?fromuid=818739)
4. [【Hour of AI】教程：Alexa Number Guessing Game 猜数字游戏](https://mc.dfrobot.com.cn/thread-315113-1-1.html?fromuid=818739)
5. [【Hour of AI】教程：Alexa Messenger 信使](https://mc.dfrobot.com.cn/thread-315213-1-1.html?fromuid=818739)
你试过编写Alexa技能吗？或用App Inventor编程？两者都可以单独成为强大的编码环境，但它们一起可以让你将对话式AI与其他移动编程组件结合起来。想要体验一下这个组合，试试下面的教程吧!
## 【Hour of AI】教程：信使App
### 1. 概述
在我们已经完成的4个教程中，你只看到过App Inventor Alexa教程，其中App Inventor仅用于提供一个简单的基于块的语言环境来开发Alexa技能。这些可能会给人一种错误的印象，认为Alexa并没有真正集成App Inventor的许多原生移动应用开发功能。本教程旨在展示如何使用App Inventor开发与Alexa对话AI功能完全集成的移动应用程序。
本App是一款信使应用程序，用户可以向他们的移动设备写或说他们想表达的消息，然后将其发送到云端，其他地方的用户可以从云端检索消息并通过Alexa设备听到它。
此外，用户还可以让Alexa转发一条消息，然后该消息再次被发送到云端，其他地方的用户可以使用他们的App从云端检索该消息。
通过这种双向通信方案，你将看到如何使用MIT app Inventor提供的两个并行开发环境，将Alexa技能与移动应用程序功能无缝集成。
### 2. 图形用户界面(GUI)
在App Inventor组件设计视图中，已经有了移动应用程序的图形用户界面(GUI)。注意顶部的文本框可以输入要发送的消息（可以直接在文本框中输入，也可以点击橙色的SPEAK按钮对设备说话）。绿色的SEND TO ALEXA按钮将消息发送到cloudddb。
在屏幕底部，绿色按钮GET FROM ALEXA从CloudDB检索待处理消息并将其发送到底部文本框。使用橙色的READ按钮可以读出检索到的消息。
还要注意在后台工作的三个不可见组件（SpeechRecognizer, CloudDB, TextToSpeech）。它们从语音中生成文本，将文本传输到云端，然后朗读出文本。
### 3. 编写GUI功能(1)
点击Blocks（逻辑设计）按钮进入逻辑设计界面。
首先编写用户单击橙色SPEAK按钮时要做的事情。让SpeechRecognizer组件侦听用户的语音并将其转换为文本。编码该代码块来删除顶部文本框中任何之前的消息，并将其替换为空字符串。
当语音识别器返回用户的语音文本时，将文本粘贴到顶部文本框中。
当用户点击绿色的SEND TO ALEXA按钮时，将文本消息发送到CloudDB并将其存储在“toAlexa”标签下。同时更新文本框的文本“Message sent to Alexa”，确认消息已发送。
### 4. 编写GUI功能(2)
当点击底部的绿色GET FROM ALEXA按钮时，要调用CloudDB来返回存储在标签“fromAlexa”下的内容。
当CloudDB响应内容时，在检查标记(“fromAlexa”)为真时，返回内容要粘贴到底部的文本框中。
当用户单击READ按钮时，TextToSpeech组件会读出底部文本框的内容。
### 5. 编写GUI功能(3)
当用户单击DELETE ALL MESSAGES按钮时，两个文本框都会删除，CloudDB上的所有内容(存储在“toAlexa”和“fromAlexa”标签下)也会被删除。
### 6. 创建语音用户界面(1)
我们刚刚完成了对移动应用程序的程序编写。现在要在Alexa开发环境中创建语音用户界面(VUI)，以便Alexa可以检索和发送消息。
首先通过在App Inventor界面上的添加按钮并选择技能选项来创建一个Alexa技能。
为Alexa技能提供一个调用名称。在本例中，将其称为“message master”。这样，我们就可以告诉Alexa“Ask message master to get my message请消息管理器获取我的消息”之类的信息。
### 7. 创建语音用户界面(2)
创建一个你能看到的界面比创建一个你只能听到的界面更容易。这就是为什么创建语音用户界面(VUI)似乎不如创建图形用户界面(GUI)直观。但前者的方法后者也适用。对于VUI，我们用“intent”和“slots”来代替图形组件。你很快就会看到它们是如何使用的。
拖拽一个意图intent，一个插槽slot ，另一个意图intent放置到组件设计工作面板亚马逊Echo Dot图像上。
这会创建IntentA, SlotA和IntentB。将它们重命名为getMessageIntent、messageSentSlot和sendMessageIntent，如下所示。
### 8. 创建语音用户界面(3)
点击组件面板底部的Alexa抽屉，可以看到CloudDB组件。
将CloudDB组件拖放到Amazon Echo Dot上。
Alexa技能中的不可视组件CloudDB默认情况下有与App的Screen1中的CloudDB相同的Token。同时确保在Screen1和你的Alexa技能中的CloudDB具有相同的ProjectID。默认情况下，ProjectID应该是当前项目的名称(AlexaMessenger_Starter)，但只要它们是相同的，你可以将它们命名为任何想要的名称。只要ProjectID和Token是相同的，那么Alexa和应用程序都能够通过***相同***的CloudDB访问和通信。
屏幕1和屏幕message master的CloudDB的ProjectID和Token应该是相同的:
(你自己的Token应该和图中的不同)
### 9. 创建语音用户界面(4)
你的工作面板看起来应该是这样的:
你的组件应该是这样的:
### 10. 创建语音用户界面(5)
通过指定一些人们用来表示“retrieve my message检索我的消息”的短语来定义getMessageIntent。这些短语被称为VUI的“utterances话语”。下面展示了一些可能的短语。在这个列表中添加一些你自己的短语。
当Alexa听到这些类似的话语时，她会明白你想从云端接收你的消息，这些消息是由App用户发送的。
### 11. 创建语音用户界面(6)
现在为messageSentSlot指定SlotType，选择Phrase选项。Alexa会捕获要发送给App用户的消息(通过云端)并将其存储在这个插槽中。
用一些类似于“send the message XXXX”的语句定义sendMessageIntent。这个短语中的XXXX必须是消息内容的占位符。这个占位符就是Slot插槽。通过按下话语文本框下的messageSentSlot按钮来创建插槽。注意App Inventor使用花括号{Slot}将这个占位符文本化。
### 12. 编写VUI功能(1)
进入Blocks逻辑设计界面。
从getMessageIntent块中，选择when getMessageIntent.spoken事件处理程序。
对该代码块进行编码，这样当Alexa听到“get me my message”这样的话语时，她会说，“Your latest message is:”，然后暂停一秒钟，检索App用户在CloudDB中存储的“toAlexa”标签下的内容，并说出这条消息。
之后Alexa会再停顿一秒钟，并说“End of message”，表示消息检索已经结束。
### 13. 编写VUI功能(2)
当Alexa用户想要向App用户发送消息时，他们会说“send the message I miss you, hope all is well”之类的话。Alexa会将此识别为sendMessageIntent，捕获话语中的消息部分(“I miss you, hope all is well”)，并将消息转发到云端。
要完成这些功能，添加下面的代码：
* 在sendMessageIntent代码块抽屉中选择 when sendMessageIntent.spoken事件处理程序。Alexa将捕捉用户话语中的信息，并将其存储在messageSentSlot中。
* 为准确起见，让Alexa重复她听到的信息。
* 然后将消息文本存储到CloudDB的“fromAlexa”标签下。App用户使用GET FROM ALEXA绿色按钮来检索存储的消息。
这是为VUI提供功能所需的所有代码。
### 14. 测试Alexa 信使 App(1)
此步骤测试Alexa集成应用是否正常工作。确保:
* App能够通过CloudDB向Alexa发送和检索消息
*
* Alexa能够通过CloudDB向App发送和检索消息
进入message master技能界面。
在Testing面板下选择Send Updates (to Amazon)。这可能需要几分钟。要有耐心。
回到Screen 1。
点击Connect --> AI Companion，会生成一个二维码，用手机上的AI伴侣扫描该二维码。
（你屏幕显示的二维码和这个不同哦）
### 15. 测试Alexa 信使 App(2)
在App中通过输入或通过语音按钮创建一条信息发送给Alexa。完成后按下绿色的SEND TO ALEXA按钮。
现在通过message master skill回到Alexa界面。
在Testing窗口中输入以下内容“ask message master to get me my message”，会看到Alexa检索由App发送的消息。
现在试着从Alexa发送消息给App。输入“send the message *your message here*”。Alexa会复述信息，并表明她正在发送信息。
注意在Testing面板中Alexa已经知道当前语境，你不再需要在消息中包含“ask message master to …”。如果你使用的是家用Alexa设备，而不是Testing面板，那么你每次都需要说“Alexa，ask message master to …”。
现在通过按下绿色的GET FROM Alexa按钮来检查App是否能够检索Alexa发送的这条消息。你应该看到发送的消息。使用READ按钮让它读给你听。(请注意，这个声音是你手机Text-to-Speech文本转语音的声音，而不是Alexa朗读的。)
在来回发送几条消息后，你还应该测试“DELETE ALL MESSAGES”红色按钮，以确保你可以删除所有的消息。
恭喜，你刚刚创建了一个完全集成的Alexa-App Inventor项目。
## 扩展应用
以下是一些提升App的方法!
* 当前只有App用户可以通过按红色“ DELETE ALL MESSAGES”按钮删除所有消息。创建一个deleteAllMessagesIntent，这样Alexa用户也可以根据需要删除所有消息。(例如，当他们后悔自己发了一条消息!)
* 当前如果云端没有用户等待的新消息，则不会给出类似“You have no new messages”这样有意义的响应。解决这个问题。
* 当前一次只能在云端存储两条信息，一条发送给Alexa，一条来自Alexa。创建一个消息传递系统，以便每个用户可以存储和检索多个消息，并保留消息，直到用户决定清除它们。
* 试着把你自己的想法带到生活中来，完善Alexa消息系统。
厉害厉害 赞！！！ 新年快乐！ rzyzzxw 发表于 2023-1-21 21:25
新年快乐！
朱老师新年快乐！
页:
[1]