Home
/
Blog
/
How to Build an Angular Bot With AWS Lex

How to Build an Angular Bot With AWS Lex

What is AWS Lex?

Amazon Lex, commonly known as AWS Lex, is a service that helps in building various conversational interfaces. The users can integrate these interfaces with any application using both text and voice-based conversation. AWS Lex provides advanced deep learning functionalities, including Automatic Speech Recognition (ASR) for the sake of converting speech into text format.

Moreover, Lex uses Natural Language Understanding (NLU) or Natural Language Processing (NLP) to understand the possible intention of the user’s text. These features help in developing creative and engaging user applications to enhance user experience and provide lifelike interactions. The users can integrate these applications with Amazon Alexa and other AWS services for implementing automated workflows.

Benefits of Using AWS Lex

With unique user interaction functionalities, AWS Lex has numerous benefits too. Following are some of the benefits of using AWS Lex:

Easy To Use

Amazon Lex is easily understandable and provides a user-friendly console to guide developers throughout the developing process. The easy navigation through the console saves a lot of time and effort for the developers.

One-Click Deployment

Lex provides the opportunity to build efficiently, test, and deploy the user’s chatbot on cross platforms. This one-click deployment is possible because Amazon Lex includes mobile devices, web applications, and chat services that automatically scale concerning usage. There is no need to worry about the hardware provision.

Cost-Effectiveness

Amazon Lex helps develop chatbots without any upfront cost and with minimum fees. There are only some charges for the text and speech requests. Moreover, it provides pay as the user goes pricing and low cost per request.

Seamless AWS Integrations

There is a built-in integration of AWS Lex with AWS Lambda and Amazon CloudWatch. There is also easy integration available with other AWS services, including Amazon Cognito and Amazon MongoDB. Moreover, Lex provides security, monitoring, user authentication, storage, business logic, and mobile application development.

Angular Bot with AWS Lex

To develop an Angular chatbot with the help of AWS Lex, the first thing to do is make a simple angular application. There is a need to open a terminal window after installing the node package manager on the system to make a simple angular application. The following steps are following:

Installing Angular CLI

The following command installs the Angular Command Line Interface (CLI) on the system:

npm install -g @angular/cli

Creating New Angular Application

Angular CLI allows the user to customize the web application after creating a template of the application. The functionalities allow modification and customization of the applications according to the server’s needs. The following command creates a template of a web application:

After creating a demo application, there are few questions provided to customize the application, for example, if the user wants to enable the Angular routing and the stylesheet format for the application. For this tutorial, angular routing is enabled, and the stylesheet format used is CSS. Answering these questions creates the application along with all Angular and node dependencies compulsory to start the application.

ng new lex-demo-app

Starting the Application

After going to the application directory, the following command starts the node server:

cd lex-demo-app/

The following command starts the node application. The command starts the server in SSL mode.

ng serve –ssl=true

Now for the customization, the server needs to stop. Now the user can open the styles.json to copy the code for the CSS, replace the HTML code from app.component.html with the customized code. Moreover, the users can introduce a text area in the HTML code to supply the text input to lex service via send button. This action will make a call back to the AWS Lex service, and the chatbot will respond. Following is a sample code for the input.

<div class="content" role="main">
  <textarea readonly="readonly" name="conversation" rows="10" cols="80"></textarea>
            <br/>
            <span><input type="text" size="60" name="message" style="line-height:2.0em;" enterkeyhint=" "/>
            <button  type="button" style="line-height: 2em;">Send</button></span>
</div>

The user can add relevant changes to the main page to use the [(ngModel)] directive for binding the fields to component properties and make a function named startChat() in app.component.ts.

AWS Amplify Installation

AWS Amplify is a JavaScript Command Line Interface that connects the AWS services and utility methods to integrate with Amazon Lex. The following commands install Amplify:

npm install aws-amplify

Initialization and answering questions like project name, development environment, default editor, type of application, JavaScript framework, source directory, and others, help in configuring the project to utilize Amplify. Following command initializes Amplify:

amplify init

After answering the questions, the CLI asks for the AWS user access key and secret key to connect the AWS account and use AWS resources. The user can make an account by logging in to the AWS management console. Then the user is navigating to IAM and is creating a new AWS user with admin privileges. In the end, an access key is generated. After providing the access key and AWS region, Amplify runs the CloudFormation template and creates the role needed for interaction. The following command adds the Lex module in the project to develop a chatbot.

amplify add interactions

After configurations, amply asks to create a new intent. As an example, a hotel booking intent is made to enable users to make a reservation. After this, the program asks to enter utterances or phrases for the chatbot to act upon. For example, book a hotel, book a trip, plan a trip, hi, and others. After this step, the slots are added to collect data from the user. For example, the user can add a slot named firstName and the slot type as AMAZON.US_FIRST_NAME to collect a user’s first name. Similarly, other slots can be added using the same pattern to collect data like the user’s last name, the start date of the trip, and room type. Moreover, the developers can also add a confirmation prompt to confirm the user-provided details. The changes are pushed to the AWS backend by using the following command:

amplify push

AWS Lex Chatbot Configuration

For the configuration of the AWS Lex chatbot, the user needs to log in to the AWS console and navigate to Lex services. After that, the user needs to click on the customized application, for example, hotelbooking_dev, in this case. This action will display the customized intents on the left side and the utterances on the middle area. Moreover, the slots option will display all the configured questions, which the bot can ask in the order made in upper sections. The confirmation section shows details regarding the prompt displayed to the user while collecting the data.

Similarly, the confirm and cancel messages will be displayed to the user. The developers can choose to execute a Lambda function on the confirmation or return the parameters to the client. Also, there is an option to test the chatbot by clicking the right-sided Test Chatbot option or use error handling on the left panel to cater to non-specified utterances. The users can test the chatbot by running the application using the following command:

ng serve –ssl=true

The user can input hi to see the response of the chatbot and to develop the bot further. The users can use this sample application to see the working of a basic angular bot made with AWS Lex.