Book Image

Hands-On Chatbot Development with Alexa Skills and Amazon Lex

By : Sam Williams
Book Image

Hands-On Chatbot Development with Alexa Skills and Amazon Lex

By: Sam Williams

Overview of this book

Have you ever wondered how Alexa apps are made, how voice-enabled technologies work, or how chatbots function? And why tech giants such as Amazon and Google are investing in voice technologies? A better question is: why should I start developing on these platforms? Hands-On Chatbot Development with Alexa Skills and Amazon Lex covers all features of the Alexa Skills kit with real-world examples that help you develop skills to integrate Echo and chatbots into Facebook, Slack, and Twilio with the Amazon Lex platform. The book starts with teaching you how to set up your local environment and AWS CLI so that you can automate the process of uploading AWS Lambda from your local machine. You will then learn to develop Alexa Skills and Lex chatbots using Lambda functions to control functionality. Once you’ve come to grips with this, you will learn to create increasingly complex chatbots, integrate Amazon S3, and change the way Alexa talks to the user. In the concluding chapters, we shift our focus to Amazon Lex and messaging chatbots. We will explore Alexa, learn about DynamoDB databases, and add cards to user conversations. By the end of this book, you will have explored a full set of technologies that will enable you to create your own voice and messaging chatbots using Amazon.
Table of Contents (13 chapters)

Web user interface

Having our own chatbot interface allows users to access it by going to a web page, but we can also integrate that into other websites, or even create mobile apps for our chatbot. We can use the API that we created to easily access the chatbot without making our AWS credentials public.

HTML

To start, we need an HTML page to build upon. The three components that we need to start are a message area, a typing input box, and a send button. Create a folder with an index.html file inside and we can add this code to that file:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="messageArea...