本文介绍了如何使用VoiceFlow构建一个连接到自定义API的语音应用程序，允许用户通过Alexa和Google搜索超级英雄。通过教程，详细展示了Speak Block、Capture Block、API Block、If Block、Choice Block的使用方法，以及如何部署到Alexa和Google平台。
alexa语音实现
Voice apps completely change the way we interact with the digital world. Voice adds another dimension to human-computer interaction that developers are only beginning to explore.
语音应用程序彻底改变了我们与数字世界互动的方式。 语音为开发人员刚开始探索的人机交互增加了另一个维度。
In this article, I will show you how you can use your existing backend architecture & APIs, connecting them with your voice apps to offer a new experience to your customers. Voice apps borrow a lot from our general development process, not requiring separate development resources.
在本文中，我将向您展示如何使用现有的后端体系结构和API，将它们与语音应用程序连接起来，从而为客户提供新的体验。 语音应用程序从我们的一般开发过程中汲取了很多东西，不需要单独的开发资源。
我们正在建造什么 (What we are building)
We are going to build a superhero search app using the Open Source Superhero API.
我们将使用Open Source Superhero API构建一个超级英雄搜索应用程序。
I have added a wrapper around this API to make it accessible from our Voice App. You can find the code in this gist - https://gist.github.com/akash-joshi/476ead410a244a48e037c138ba2387b0.
我已为此API添加了包装，以使其可从我们的语音应用访问。 您可以在此要点中找到代码-https: //gist.github.com/akash-joshi/476ead410a244a48e037c138ba2387b0 。
Take a look at the completed app below:
在下面查看完成的应用程序：
We will build this for Voice apps (Alexa and Google). We will be using the platform VoiceFlow, which allows us to build voice apps visually.
我们将为语音应用程序(Alexa和Google)构建此文件。 我们将使用平台VoiceFlow ，该平台使我们能够直观地构建语音应用程序。
语音流教程 (Voiceflow Tutorial)
VoiceFlow is a visual way to create voice apps, and is very easy to use and understand.
VoiceFlow是创建语音应用程序的一种直观方法，非常易于使用和理解。
Firstly, create an account there to get started.
首先，在那里建立一个帐户开始。
After creating an account, create a new project, giving it an appropriate name. For the purpose of this tutorial, we have chosen all English regions as deployment regions.
创建帐户后，创建一个新项目，并为其指定一个适当的名称。 就本教程而言，我们选择了所有英语区域作为部署区域。
You will end up on a blank canvas after this. Don't be overwhelmed by all the options present on the screen, this tutorial will guide you through all the relevant blocks required.
之后，您将最终在空白画布上。 不要被屏幕上显示的所有选项所淹没，本教程将指导您完成所需的所有相关步骤。
In the blocks submenu on the left, you will see several blocks which can be used to build an Alexa or Google skill. Each block performs a certain function, and Voiceflow is based on building Voice apps by combining these blocks.
在左侧的块子菜单中，您将看到几个可用于构建Alexa或Google技能的块。 每个模块执行特定功能，而Voiceflow则是通过组合这些模块来构建Voice应用程序的。
1.说话块 (1. Speak Block)
The first block that we will use is the Speak Block. We will use it to make Alexa say something to the user. Drag a speak blog onto the canvas, rename it to Introduction and write a suitable introduction to your app in the text area. I will use "Welcome to Superhero! Say the name of a hero to search!".
我们将使用的第一个块是语音块。 我们将使用它来使Alexa向用户说一些话。 将演讲博客拖到画布上，将其重命名为Introduction，然后在文本区域中为您的应用程序编写合适的简介。 我将使用“欢迎使用超级英雄！说出要搜索的英雄的名字！”。
At any point, test out your app by clicking on the Play Button.
在任何时候，通过单击“播放”按钮测试您的应用。
2.捕获块 (2. Capture Block)
The next block we will use is the Capture block. It is used to capture data from the user's voice and store it into a variable.
我们将使用的下一个块是Capture块。 它用于从用户语音中捕获数据并将其存储到变量中。
Firstly, create a new variable in the 'Variables' submenu on the left by typing a name and pressing enter. Use the name 'hero' for now.
首先，在左侧的“变量”子菜单中通过输入名称并按Enter键来创建新变量。 现在使用名称“ hero”。
Adding a capture block, name "Input Type" as "Actor" and "Capture input To" as "hero".
添加捕获块，将“输入类型”命名为“演员”，将“捕获输入到”命名为“英雄”。
Add a speech block after it, saying : "Searching for {hero}. <break time='2s' /> ". We use curly brackets to use a variable in speech. Be sure to enter {hero} by hand so that Voiceflow detects it as a variable. The <break time='2s' /> is a tag which is part of a language called Speech Synthesis Markup Language (SSML). You can read more about it on Amazon's official documentation page.
在其后添加一个语音块，说：“正在搜索{hero}。<break time ='2s'/>”。 我们使用大括号在语音中使用变量。 确保手动输入{hero}，以便Voiceflow将其检测为变量。 <break time ='2s'/>是一个标记，它是称为语音合成标记语言(SSML)的语言的一部分。 您可以在Amazon的官方文档页面上阅读有关它的更多信息。
3. API块 (3. API Block)
Click on the Plus icon below your Speak block to add another step to the block. Add an Integration block from the list. After that, click on the integration block & set up the options in this order:
单击“说出”块下方的加号图标，以向该块添加另一个步骤。 从列表中添加一个集成块。 之后，单击集成块并按以下顺序设置选项：
- Choose an integration - "Custom API" since we will be using a custom API to get some data. 选择一个集成-“自定义API”，因为我们将使用自定义API来获取一些数据。
2. I want to - "Make a GET request" since we are using a GET request to get JSON data from an API.
2.我想-“发出GET请求”，因为我们正在使用GET请求从API获取JSON数据。
We will use a custom API (https://super-search-akashjoshi.flexiple.now.sh/?hero=)to get the superhero data.
我们将使用自定义API( https://super-search-akashjoshi.flexiple.now.sh/?hero= )获取超级英雄数据。
Try navigating to https://super-search-akashjoshi.flexiple.now.sh/?hero=superman in your browser to see what kind of data is returned by the API. Replace superman with any hero that you want to search for.
尝试在浏览器中导航至https://super-search-akashjoshi.flexiple.now.sh/?hero=superman ，以查看API返回的数据类型。 将超人替换为您要搜索的任何英雄。
We replace the hero name with the {hero} variable so that the API fetches the desired hero correctly.
我们用{hero}变量替换英雄名称，以便API正确获取所需的英雄。
Paste
糊
https://super-search-akashjoshi.flexiple.now.sh/?hero={hero}
https://super-search-akashjoshi.flexiple.now.sh/?hero={hero}
into the URL bar. Be sure to type in {hero} by yourself so that Voiceflow detects it as a variable.
进入网址栏 确保自己输入{hero}，以便Voiceflow将其检测为变量。
However, we aren't done yet. Click on Test Integration to test the API call.
但是，我们还没有完成。 单击“测试集成”以测试API调用。
The response from the API has to be mapped into output variables so that they are spoken to the user.
必须将来自API的响应映射到输出变量，以便对用户说出它们。
Add variables for name, fullName, born, alignment, work & base from the variables side-bar.
从变量侧栏中添加用于名称，全名，出生，对齐，工作和基准的变量。
Copy the output path of the JSON file by clicking on the response tab of the Test Integration tab and paste it into the output menu. Do this for all of the following - name, fullName, born, alignment, work & base.
通过单击“测试集成”选项卡的“响应”选项卡，复制JSON文件的输出路径，并将其粘贴到输出菜单中。 为此，请执行以下所有操作-名称，全名，出生，对齐，工作和基础。
Check the short video below to understand how to map the JSON output with your Voiceflow variables:
观看下面的简短视频，以了解如何将JSON输出与Voiceflow变量进行映射：
In the image above, we can see that the Integration has 2 outputs, one without a prefix text, and one with fail as prefix. The one without the prefix text is a success state output, and the one with fail output is when our API call fails.
在上图中，我们可以看到Integration有2个输出，一个不带前缀文本，另一个带不作为前缀。 一个没有前缀文本的输出是成功状态输出，而一个带有失败输出的状态输出是当我们的API调用失败时。
Add a speech block saying 'The hero was not found' connected to the fail state. If the API succeeds and a hero was found matching the {hero} variable, all the output variables will be set with the correct values. Otherwise, they will be to the default value of 0.
添加一个语音块，说“未找到英雄”与失败状态有关。 如果API成功，并且找到与{hero}变量匹配的英雄，则所有输出变量都将设置正确的值。 否则，它们将为默认值0。
4.如果阻止 (4. If Block)
Add an if block to the canvas, and check whether fullName = 0. If it is 0, connect it to the "Not Found" block.
将if块添加到画布，并检查fullName =0。如果为0，则将其连接到“未找到”块。
Watch the short video below to understand how to add conditions to If blocks:
观看下面的简短视频，了解如何为If块添加条件：
Else, the hero was found. So, speak the hero name by writing in a speech block: "Their hero name is {name}. Their full name is {fullName}. They were born in {born}. They are {alignment}. They work as a {work} from {base}. <break time='3s' /> Do you want to search another hero?"
否则，找到了英雄。 因此，请在讲话栏中写上英雄名称：“他们的英雄名称是{name}。他们的全名是{fullName}。他们出生于{born}。他们是{alignment}。他们作为{work }来自{base}。<break time ='3s'/>您要搜索另一个英雄吗？”
Again, be sure to type in the variable names so that Voiceflow detects them as variables.
同样，请确保键入变量名称，以便Voiceflow将其检测为变量。
To clear out the variables after the skill completes, add a "Set" block to the canvas and set fullName to 0. This step is necessary, because if the variables are not cleared, the previous answer will be repeated by the skill!
要在技能完成后清除变量，请在画布上添加“ Set”块，并将fullName设置为0。此步骤是必需的，因为如果未清除变量，则该技能将重复先前的回答！
5.选择块 (5. Choice Block)
We shouldn't end the skill here. We should allow the user a choice on whether they want to search for another superhero. Change the text in the "Not Found" block to ask whether the user wants to search for more at the end.
我们不应该在这里结束技能。 我们应该允许用户选择是否要搜索另一个超级英雄。 更改“未找到”块中的文本，以询问用户是否最后要搜索更多内容。
Add a Choice block to the canvas. The choice block allows us to perform certain actions based on user voice. This block checks whether the user wants to search for another hero. Enter synonyms of Yes for searching further.
在画布上添加一个Choice块。 选择框允许我们根据用户的声音执行某些操作。 该块检查用户是否要搜索另一个英雄。 输入是的同义词以进一步搜索。
For else, add a Flow block, selecting Stop Flow as a flow.
否则，添加一个Flow块，选择Stop Flow作为流。
Connect the ' 1 ' output of the Choice block to a speech block asking user to say another Hero name, and connect it to the Capture block. Look at the image below to understand how it's done.
将Choice块的“ 1”输出连接到语音块，要求用户说出另一个Hero名称，然后将其连接到Capture块。 请看下面的图片，了解它是如何完成的。
And we are done! Test out your app by clicking on the play button.
我们完成了！ 通过点击播放按钮测试您的应用。
6.部署 (6. Deployment)
a. Alexa
一个。 亚历克斯
To deploy your app to the Alexa platform, click on the Publish tab, connect your Amazon developer account and fill the form options according to relevance to your skill (like Description, Skill Name, etc.)
要将您的应用程序部署到Alexa平台，请单击“发布”选项卡，连接您的Amazon开发人员帐户，并根据与您的技能相关的信息(例如描述，技能名称等)填写表格选项
Be sure not to change any of the default invocations that may break your skill during deployment and cause you to resubmit it.
确保不要更改任何可能在部署期间破坏您的技能并导致您重新提交该技能的默认调用。
In case you get some part wrong while submitting, the review process is very helpful & they will let you know what went wrong in the submission.
如果您在提交时遇到了错误，审核过程将非常有帮助，并且他们会告诉您提交中出了什么问题。
b. Google
b。 谷歌
Click on the instruction link to see instructions to add the Google Assistant file to Voiceflow. After adding the file, follow the publish to production guide from here . Few caveats in the Google deployment process:
单击说明链接以查看将Google Assistant文件添加到Voiceflow的说明 。 添加文件后，请从此处遵循发布到生产指南。 Google部署过程中的一些注意事项：
- Your invocation name cannot have any keywords which may be used during invocation. Eg, you cannot name the action 'Superhero Search', because 'Search' may be used as a invocation name. 您的调用名称不能包含在调用期间可以使用的任何关键字。 例如，您不能将操作命名为“超级英雄搜索”，因为“搜索”可以用作调用名称。
You need to add a custom privacy policy from Google. You can't use the one from Voiceflow as it has mentions of Alexa or skills, which will cause your action to be declined. You can use a template I built here. It has instructions on how to write your privacy policy and where to keep it.
您需要从Google添加自定义隐私权政策。 您不能使用Voiceflow中提到的那一项，因为它提到了Alexa或技能，这将导致您的操作被拒绝。 您可以使用我在此处构建的模板。 它包含有关如何编写您的隐私政策以及如何保留的说明。
- The final point would be to not use the term 'Alexa' or 'skill' at any point in your action description or within the app. If there are any occurrences in the app, replace them with something more generic so you can use the same codebase for Alexa & Google. Replace 'Alexa' & 'skill' with 'Google' & 'actions' in the description and similar places. 最后一点是在您的动作说明或应用内的任何时候都不要使用术语“ Alexa”或“技能”。 如果应用程序中出现任何情况，请用更通用的方式替换它们，以便您可以将相同的代码库用于Alexa和Google。 在说明及类似位置中，将“ Alexa”和“技能”替换为“ Google”和“操作”。
接下来是什么？ (What Next?)
App ideas:
应用程式提示：
The interesting point about voice apps is that you can use them as an extension for your existing apps. For example, If you have already built a messaging app like this one, the voice platform can be an easy way of sending and reading messages on your app. For a blog writing platform, a voice app may be an easy way to take notes before actually sitting down to write an article. Even for a product posting platform like ProductHunt or Remote.tools, you can easily integrate voice to read out description and other details on the products.
关于语音应用程序的有趣之处在于，您可以将它们用作现有应用程序的扩展。 例如，如果您已经构建了像这样的消息传递应用程序，则语音平台可以是在应用程序上发送和读取消息的简便方法。 对于博客写作平台，语音应用程序可能是在实际坐下来撰写文章之前记笔记的简便方法。 即使对于一个产品发布平台，像ProductHunt或Remote.tools ，你可以很容易地集成了语音读出的描述和其他细节上的产品。
In such ways, voice apps can be used to enhance user experience.
通过这种方式，语音应用程序可用于增强用户体验。
Useful links:
有用的链接：
https://learn.voiceflow.com/articles/2705386-uploading-your-project-to-google-assistant
https://learn.voiceflow.com/articles/2705386-uploading-your-project-to-google-assistant
https://developer.amazon.com/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html
https://developer.amazon.com/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html
Hope you liked this article. I have also written a more extensive article which adds a web-based frontend to this app making it a complete ecosystem.
希望您喜欢这篇文章。 我还写了一篇更广泛的文章 ，在此应用程序中添加了基于Web的前端，从而使其成为一个完整的生态系统。
Happy Coding!
编码愉快！
翻译自: https://www.freecodecamp.org/news/creating-deploying-voice-apps-for-alexa-google/
alexa语音实现
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
