---
title: "5. 为 Lex Bot 创建 web 交互页面 （选做）"
date: 2019-09-05T23:06:51+08:00
draft: false
chapter: false
weight: 156
---

{{% notice info %}}
这一步是为 Lex 构建一个聊天机器人的页面，是 **选做的** 。 如果您只希望创建 Alexa Skill,  您可以去 
[Export the Bot to Alexa Skills Kit](/custom-skill/6.export-lex-to-alexa/) 进行下一步。
{{% /notice %}}

在此实验中，我们会创建一个 web 页面，可以用于在页面上，直接与聊天机器人对话。我们将借助一个 AWS CloudFormation 模板去实现此步骤。请确保您选择的是 **us-east-1** 区域。

1. 点击进入 [GitHub repo: aws-lex-web-ui](https://github.com/awslabs/aws-lex-web-ui#Overview) 浏览我们完成后的效果。 

1. 进入 [Getting Started](https://github.com/aws-samples/aws-lex-web-ui#getting-started), 点击 **Launch Stack** 
    ![](/images/ask/cloudformation-get-start.png)
 
1. 您会被 redirect 到 cloudformation 的页面。如果没有登录，请先登录。
    ![](/images/ask/template.png)

1. 选择下一步

1. 往下翻。您需要先更改一些参数。 **不要更改** 其他参数，特别是 **BootstrapBucket** 以及 **BootstrapPrefix** ， 如果更改，您将会碰到 **NoSuchKey** 的错误。
    -  **BotName** : `PersonalBanker` ，您创建的 bot 的名字
    - 删除 **WebAppConfBotInitialText** 里面的文字, 输入 `You can ask me for your account info.
    What is my checking account balance click on the mic and say it`
    - 删除 **WebAppConfBotInitialSpeech** 里的文字,  
    输入 `Say "What is my checking account balance" to get started.`
    - 删除 **WebAppConfToolbarTitle** 里的文字, 输入 `Personal Banker`
    ![](/images/ask/cloudformation-configuration.png)

1. 点击 **Next**

1. 再次点击 **Next**。

1. 选中 “I acknowledge that AWS CloudFormation might create IAM resources with custom names.” 
和 "I acknowledge that AWS CloudFormation might require the following capability." 点击 **Create stack**
    ![](/images/ask/cloudformation-knowledge.png)

9. 创建需要几分钟。可随时点击右上方的刷新按钮查看进度。
    ![](/images/ask/cloudformation-output.png)

1. 当堆栈创建完成后，status 栏会显示绿色

1. 点击 **lex-web-ui**, 选中 **Output** section. 
    ![](/images/ask/output.png)

1. 点击 **WebAppUrl** 打开新页面。

1. 调整浏览器大小，开始聊天。