如何在30分钟内构建语音应用

您已经掌握了构建Web应用程序的知识。 甚至构建移动应用程序。 但是，现在坐在人们客厅里的这些智能扬声器又如何呢？ 我们新发现的与手机上的应用程序通话的功能又如何呢？

当您尝试建立Alexa技能或Google Assistant动作时，是否发现自己在使用本机API和特定于平台的小细节而费力？ 不一定是这种情况。 语音应用程序的构建非常简单，我们可以在30分钟内完成。

为了快速入门-假设我们让大人物-亚马逊和/或Google-负责语音识别。 这样做使我们能够利用错误率接近人类的平台。 它还使我们能够将两家公司构建的任何产品部署到支持语音的设备上。

让我们还假设我们将使用JavaScript来构建语音应用程序-它正在成为构建大多数用户界面的常用语言，并且还构建了许多工具来使用它来支持语音应用程序。 接下来，我们将使用针对UI的Voice Framework- Violet构建该应用程序。

设置东西

第一步涉及确保已安装Node.js。 完成后，让我们创建一个项目。 可以说，我们希望该应用有助于计划游戏之夜。 因此，我们为项目创建了一个文件夹，然后告诉Node包管理器npm初始化项目并安装Violet依赖项：

mkdir gameNight
cd gameNight
npm init -y
npm install violet --save

为应用程序创建骨架

现在，您需要做的就是创建一个名为`server.js`的文件，加载violet模块并对其进行初始化。 看起来像这样：

// Load the Violet Module
const violet = require ( 'violet' ).script();

// App Logic
var app = {
  //...
};


// The Conversation Flow (with a pointer to the app logic)
violet.addFlowScript( `<app>
  <!-- -->
</app>` , {app});

该应用程序还没有做很多事情，但是它设置了一个地方来将您的逻辑与视图分开，即对话流。 您可以通过键入npm start来运行此应用npm start 。

对话流是您应用程序的一部分，它定义了对话的进行方式-用户可以说些什么以及您的应用程序将如何响应。 当您的应用需要向用户提出后续问题时，最好在此处添加这些交互。 对话流程也是Voice Designers重点关注的部分，并且通常从单独的文件中加载该部分。 App Framework负责加载对话并跟踪状态，因此您不必这样做。

定义对话

现在，我们已经具备了基础知识，因此让我们建立应用程序与用户进行什么样的对话。 可以说，我们希望该应用有助于计划游戏之夜。

我们可以写出一个脚本，说明用户可能想开始询问：

>用户：您能做什么？
>应用程序：我可以帮助您计划游戏之夜

通过告诉框架用户将要做出“选择”，我们可以很容易地实现上述目标，在此期间，我们将“期待”用户的提示，并且应用应通过执行“说”来做出回应。 。 对话流最终看起来像：

<!-- flowScript -->
< choice id = "launch" >
  < expecting > What can you do? </ expecting >
  < say > I can help you with planning Game Nights </ say >
</ choice >
<!-- flowScript -->

添加`id`允许我们稍后引用该元素，在这种情况下，我们使用保留的id：`launch`，这意味着当用户刚刚启动您的应用时，上述脚本也会被触发，例如说：“ Alexa，打开游戏之夜”。

因此，现在让我们计划与该应用程序进行更集中的对话。 它可能看起来像：

>用户：已经计划了哪些游戏之夜？
>应用：让我看看。
>应用程序：您想听听即将或过去的游戏之夜吗？
>用户：过去。
>应用：我有一个游戏之夜，预定在周四下午5点进行国际象棋比赛。

以上是一个涉及多一点，并且支持它可以通过添加一个嵌套做decision了用户进行的时候被我们ask一个问题。 写出流程可以给我们：

<!-- flowScript -->
< choice id = "list" >
  < expecting > What game nights have already been planned? </ expecting >
  < say > Let me see. </ say >
  < decision >
    < ask > Would you like to hear of game nights that are upcoming
            or in the past? </ ask >
    < choice >
      < expecting > In the past. </ expecting >
      < resolve value = "app.getPastGameNights(response)" />
    </ choice >
    < choice >
      < expecting > Upcoming. </ expecting >
      < resolve value = "app.getUpcomingGameNights(response)" />
    </ choice >
  </ decision >
</ choice >
<!-- flowScript -->

在上面， resolve标签告诉框架调用先前提供的应用程序逻辑。

测试应用

我们在上面建立了一个简单的对话。 它有助于经常测试事物-尤其是使用Voice Apps。 考虑到这一点，让我们创建虚拟App Logic，以便代码运行并可以对其进行测试。

// An Extremely Simple Model (to hold the data)
var model = {
    pastGameNights : [],
    futureGameNights : []
}

// The Controller
var app = {
  getPastGameNights : ( response )=> {
    response.say( 'Dummy implementation' );
  },
  getUpcomingGameNights : ( response )=> {
    response.say( 'Dummy implementation' );
  }
}

现在，当您在控制台中键入npm start时，您可以运行该应用程序。 Violet带有内置的Web工具，应该可以让您在本地计算机上运行测试代码。

在您的Web浏览器中转到url（可能是http：// localhost：8080 /）。 随意选择一个intent （将其视为用户会发表的言论）并发送请求。

该请求将模拟外部服务如何与您正在运行的“语音”应用对话。

现在，您可以测试应用了-确保对话按预期进行！

建立逻辑

现在，我们已经建立了基本对话，我们可以构建App Logic。 从前面的代码片段开始，我们只需要两个方法getPastGameNights(...)和getUpcomingGameNights(...) 。

如果我们只是假设数据将存储在内存中，则逻辑变得如此简单：

// An Extremely Simple Model
var model = {
    pastGameNights : [],
    futureGameNights : []
}

// The Controller
var app = {
  getPastGameNights : ( response )=> {
    var results = model.pastGameNights;
    if (results.length == 0 ) {
      response.say( 'Sorry, I did not have anything scheduled' );
    } else {
      var dt = results[ 0 ].startTime;
      response.say( `I had a game night scheduled
          on ${utils.getDayAndMonth(dt)}
          at ${utils.getTime(dt)}
          where ${results[ 0 ].game} was played` );
    }
  },
  getUpcomingGameNights : ( response )=> {
    var results = model.futureGameNights;
    if (results.length == 0 ) {
      response.say( 'Sorry, I do not have anything scheduled' );
    } else {
      var dt = results[ 0 ].startTime;
      response.say( `I have a game night scheduled
        on ${utils.getDayAndMonth(dt)}
        at ${utils.getTime(dt)} to play ${results[ 0 ].game} ` );
    }
  }
}

我们确实需要考虑如何将数据添加到上述模型中，并且可以通过多种方式来完成。 您可以为此构建我们的Web /移动界面，也可以访问数据库（Violet提供了Postgres和Salesforce插件）。 另外，请随时阅读有关如何获取语​​音应用程序输入的下一篇文章。

部署应用

现在，您应该能够再次测试该应用程序，并确保它可以正常运行。

下一步是将代码部署为在Internet上可见的服务器上运行-例如，使用[ Heroku 。

部署后，您将需要向亚马逊的Alexa服务或Google的Dialogflow注册应用。 为此，请打开已部署服务的Web工具，在菜单中单击“注册”，选择您感兴趣的适当服务，然后按照指示进行操作。

注册您的应用程序后，您应该能够使用Alexa和/或Dialogflow提供的测试功能对其进行测试。

另外，在部署您的应用程序之前，您还可以使用ngrok之类的服务将其连接到Alexa / Dialogflow，以在本地进行测试。

抛光UX

现在我们已经部署了应用程序，我们可以开始使用它了。 通常，这是我们注意到应用程序感觉不正确的地方，我们必须对其进行一些小的修改。 这些更改通常包括：

• 接受来自用户的更多输入-通常是通过在一个“ choice”语句中添加更多“ expecting”元素来完成的（请参见示例 ）；
• 更改应用程序的响应方式，使对话更加自然；
• 意识到AI可能会与听起来相似的单词（例如“ how”和“ wow”）混淆，因此更改了向用户的提示并接受了不同的输入； 和
• 我们开始使用该应用程序后，添加一两个用例-人们使用语音应用程序的方式与网络和移动应用程序的使用方式稍有不同； 和
• 完善案例。

我们从这里去

希望对您有所帮助。 在下一篇文章中，我们研究如何为您的Voice App获取输入 。

但是，在此之前，请尝试自己构建一个语音应用程序，并让我@VineetSinha知道它的运行情况。

代码：在此处查看该项目的代码： gameNight.js 。
图片提供： [ 英国Brother的 与人合作的Alexa语音应用程序 。

From: https://hackernoon.com/how-to-build-a-voice-app-in-30-minutes-uz6132kj