跳到主要内容

如何为您的网站创建Alexa技能

Create an Alexa skill for your site

我们中的许多人现在在家里都有某种语音助手,无论是Amazon Echo,Apple HomePod还是Google Home。声音似乎会对我们日常生活的方式产生巨大影响,而且作为网络开发人员,我们需要问自己,我们可以改进的方法是什么用户体验通过在我们的网站和Web应用程序中实现语音?

在本教程中,我们将构建一个简单的Alexa技能,用于更新网站上的新闻内容。类别类型取决于用户输入的语音。如果你已经掌握了一些AWS的经验会有所帮助,但是如果你有一个泡菜,那里有很多文档可以帮助你。

我需要什么?

首先,找到本教程的文件在GitHub上

您还需要注册一个Amazon Developer帐户AWS账户

Firebase将用于存储我们的用户输入,因此请务必注册Firebase帐户。我们还将使用新闻API来获取最新的新闻报道,因此请获取免费的API密钥Newsapi.org

意图,话语和插槽

Alexa skill: Utterances

以下是我们在Alexa Developer Console中为我们的技能设置的话语。随意添加更多

设置完成后,导航到developer.amazon.com/alexa/console/ask然后单击“创建技能”。我们需要做的第一件事是在Alexa Developer Console中设置Intent,Utterances和Slot Types。意图是技能的用户试图实现的目的。话语是用户在与Alexa交谈时会说的特定短语,例如:“它是星期几?”。插槽是与话语相关的变量,例如:'它在{place}中几点?'。这将使{place}自定义插槽。

从仪表板的左侧选择Intents,然后单击Add Intent。确保选中“创建自定义意图”并键入内容更新在文本框中:稍后这将成为我们的函数名称。

我们现在转向话语,这是我们需要采取的话语类别用户想要更新的消息。我们将使用category作为插槽名称,然后设置以下话语:

“更新{category}”“{category}故事”“更新至{category}”“将故事设为{category}”

最后,我们需要创建一个插槽类型,在这里我们将写出一些我们期望从用户那里获得的输入。在仪表板的左侧,单击“插槽类型”旁边的“添加”。输入“NewsType”并单击“创建自定义插槽类型”按钮。在Slot Values下,您需要添加一些新闻类别。我们将使用体育,商业,技术和政治。完成后,请确保已从下拉列表中选择NewsType作为类别的插槽类型。

AWS Lambda函数

我们现在要去AWS内部的Lambda。选择“创建函数”,然后选择“蓝图”单选框。确保选择Alexa的技能-KIT-SDK-factskill从列表中单击配置。为您的函数命名,然后创建一个新角色。完成后,单击页面底部的“创建函数”。您需要选择Alexa技能套件作为您的功能的触发器,然后我们可以移动到功能本身。我们不会在这个项目中使用内置的代码编辑器;相反,我们将在本地写出函数,然后上传一个zip文件。确保在Lambda编辑器中复制index.js文件的内容,因为我们将其粘贴到本地项目中。

创建一个本地项目

我们将从本地创建一个新的Node项目开始。在我们自己的index.js文件中,我们将粘贴刚刚从Lambda中获取的内容。我们需要使用NPM导入Firebase和Alexa SDK。

npm install alexa-sdk npm install firebase

确保在index.js文件的顶部包含引用。

const Alexa = require('alexa-sdk'); var Firebase = require(“firebase”);

你应该有一些默认代码,其中一个叫做'LaunchRequest”。这用于欢迎用户使用该技能。您只需将欢迎消息更改为“欢迎使用网站更新”即可。

'LaunchRequest':function(){this.emit(':ask','welcome to website update'); },

如果你使用:告诉命令然后Alexa将在消息之后结束技能,而如果您使用:问然后Alexa会在下一个提示中听八秒钟。我们将使用:问,以便Alexa准备好收听我们的更新提示。

Firebase配置

接下来,我们需要在index.js文件的顶部添加Firebase配置详细信息。

var config = {apiKey:“  “,authDomain:”  .firebaseapp.com“,databaseURL:”https://  .firebaseio.com“,projectId:”  “,storageBucket:”  .appspot.com“,messagingSenderId:”  “}; Firebase.initializeApp(config);

ContentUpdate函数

Alexa skill: Simulator

Alexa模拟器是一种在您的机器上测试您的技能而不需要Amazon Echo设备的好方法

在本教程的前面,我们创建了一个名为“ContentUpdate”的intent。这意味着我们需要创建一个内容更新函数,我们将根据我们创建的话语响应用户输入。因此,如果用户说“更新为运动”,则会调用此功能。我们首先创建一个名为的变量CategoryType,它接受用户的语音输入。然后,我们将类别类型存储在Firebase数据库中,并让Alexa告诉我们更新到的类别的名称。

'ContentUpdate':function(){var categoryType = this.event.request.intent.slots.category.value; if(Firebase.apps.length === 0){Firebase.initializeApp(config); } Firebase.database()。ref('/')。set({preference:categoryType})。then((data)=> {Firebase.app()。delete()。then()})。catch((错误)=> {console.log(错误);})this.emit(':ask','你更新为'+ categoryType); },

保存index.js文件后,您需要压缩项目。从命令行导航到项目文件夹,然后键入以下命令。

zip -r index.zip *

返回Lambda中的函数并向下滚动到“函数代码”部分。从代码输入类型的下拉框中,选择“上传.zip文件”。您现在可以上传您的zip文件。

在Alexa模拟器中测试项目之前,请使用Lambda页面右上角的ARN,并在Alexa控制台的Endpoint部分输入。为了测试您的技能,您需要说的是“开放式网络更新”,Alexa将回复“欢迎使用网络更新”。如果你现在说'更新运动',Alexa应该说'你更新到运动'。 “运动”一词也应该在您的Firebase数据库中显示在首选项下。

新闻页面

Alexa skill: Final page

这是最终的HTML页面的样子。它将显示您通过Alexa请求的类别

最后,从Alexa Project - HTML文件夹下载我创建的新闻页面(index.html)GitHub上

打开main.js文件并在第1-8行输入您自己的Firebase配置详细信息,就像我们在本教程前面所做的那样。

您还需要在main.js文件的第11行从newsapi.org输入您的新闻API密钥。

Var MyAPIKey =“  ;

如果您现在打开index.html文件,它应该加载您所选类别的一些新闻报道。每当您告诉Alexa使用新类别(体育,技术,商业或政治)进行更新时,页面上的新闻报道类别都将发生变化。

Alexa,直到!

这只是Alexa可以实现的一个小例子,希望能为您未来的语音项目奠定良好的基础。您可以随时添加更多的插槽值以从API获取更多类别,甚至更新项目,以便它可以提取您自己的网站新闻/帖子。我迫不及待地想看看网络和应用程序开发人员将如何在他们的项目中包含Alexa。

本文最初发表于313期,这是全球最畅销的网页设计师和开发者杂志。在这里购买问题313要么订阅这里

相关文章:



翻译字数超限