DEV Community: Rodrigo Kamada

Adding the AWS WAF CAPTCHA to an Angular application

Rodrigo Kamada — Wed, 21 Jan 2026 16:15:43 +0000

Introduction

In this article, we will create a WEB application using the latest version of Angular and integrate the AWS WAF (Web Application Firewall) CAPTCHA challenge to protect against bots.

Prerequisites

Before we begin, you need to install and configure the tools below to create the Angular application and integrate it with the AWS WAF captcha.

Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.
AWS Account: Amazon Web Services is a cloud computing services platform and it will be used to integrate the AWS WAF CAPTCHA challenge.

Getting started

Create and configure the account on AWS WAF

AWS WAF (Web Application Firewall) is a security service designed to protect your WEB applications and APIs from exploits of common internet vulnerabilities and bots that can affect availability, compromise security, or consume excessive resources.

1. Let's access the AWS account. Access the site https://aws.amazon.com/waf/ and click on the link Sign in to console.

Note:

If you don't have an Amazon account, do steps 1 to 9 of the post Authentication using the Amazon Cognito to an Angular application in the session Create and configure the account on the Amazon Cognito.

2. Now we will fill in the field Account ID or alias, fill in the field IAM username, fill in the field Password and click on the button Sign in.

3. Next, we will type waf in the search field and click on the option WAF & Shield.

4. Then, we will click on the menu Application integration.

5. After click on the menu Application integration, we will click on the tab CAPTCHA integration.

6. Now we will click on the option CloudFront JavaScript tag, click on the button Copy JavaScript tag to copy the URL of the JavaScript file because this URL will be configured in the Angular application and click on the button Generate API key.

7. Next, we will click on the option CloudFront, fill in the field Domain with your website's domain and click on the button Generate API key.

8. Then, we will click on the icon to copy the API key beacuse this API key will be configured in the Angular application.

9. Ready! The API key was created.

Create the Angular application

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 21 and Google is the main maintainer of the project.

1. Let's create the application with the Angular base structure using the @angular/cli tool with the AI configuration files disabled, the server-side rendering (SSR) disabled, the route file disabled and the SCSS style format.

ng new angular-aws-waf-captcha --ai-config=none --ssr=false --routing=false --style=scss
CREATE angular-aws-waf-captcha/README.md (1473 bytes)
CREATE angular-aws-waf-captcha/.editorconfig (314 bytes)
CREATE angular-aws-waf-captcha/.gitignore (604 bytes)
CREATE angular-aws-waf-captcha/angular.json (2084 bytes)
CREATE angular-aws-waf-captcha/package.json (970 bytes)
CREATE angular-aws-waf-captcha/tsconfig.json (957 bytes)
CREATE angular-aws-waf-captcha/tsconfig.app.json (429 bytes)
CREATE angular-aws-waf-captcha/tsconfig.spec.json (441 bytes)
CREATE angular-aws-waf-captcha/.vscode/extensions.json (130 bytes)
CREATE angular-aws-waf-captcha/.vscode/launch.json (470 bytes)
CREATE angular-aws-waf-captcha/.vscode/tasks.json (978 bytes)
CREATE angular-aws-waf-captcha/src/main.ts (222 bytes)
CREATE angular-aws-waf-captcha/src/index.html (306 bytes)
CREATE angular-aws-waf-captcha/src/styles.scss (80 bytes)
CREATE angular-aws-waf-captcha/src/app/app.scss (0 bytes)
CREATE angular-aws-waf-captcha/src/app/app.spec.ts (690 bytes)
CREATE angular-aws-waf-captcha/src/app/app.ts (246 bytes)
CREATE angular-aws-waf-captcha/src/app/app.html (20086 bytes)
CREATE angular-aws-waf-captcha/src/app/app.config.ts (203 bytes)
CREATE angular-aws-waf-captcha/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. Now we will install and configure the Bootstrap CSS framework. We will do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.

3. Next, we will create configuration files for the environment variables with the command below.

ng generate environments
CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2309 bytes)

4. Then, we will configure the variable aws.waf.url with the URL of the JavaScript file containing the AWS WAF integration code and the variable aws.waf.apiKey with the API key that was created in AWS WAF in the src/environments/environment.ts and src/environments/environment.development.ts files as below.

  aws: {
    waf: {
      url: 'https://a162a8302aaa.edge.captcha-sdk.awswaf.com/a162a8302aaa/jsapi.js',
      apiKey: 'QprVjPcLgWgjYBGZoci9OMw9CFJSZZtr2gHt7McsehfL1+Hi+6Rp5y99a0p3vmdsq5Wkat06xfZSTc6dfjvR5w9COBfYhcsXvdRPAGSd9Zxfx6W2QfDsDc2IdiQImVfAl35Uw3tBYd31B3rVlT9q4pEcipVFo29NcqRjYneV7peX2Q+vvd4ttjX0QuM3d+csxtCjaHYSquk6nySEun5QTnbUsq0TE2gliQRFYgHFX9vXSWrkkAXHwWtaxr86kzIeIPoesRAC3JB7kwyK6l4sYoo6w7fTSougEwpjJHGIo8LHdjlxmmNpE2umf1z1go3Ixjm/ujc919tn2FCuGbnW4OEXVWotx3qjf+FPkFbght+ccXsXsL2eHoPgj0sHKaeK0fYpGlJnpwDp+ep64+UVm46Y7Udr7RVLjCnngBcgTRnmA20uy+agfhRnBJk6Y34OgJQJnWuoYXCoVETlFus4ATJ69dny8/6GxUUObjcU6gnfpyR5vkaqmKwSluu6i/x90o9pm1/TTFeh4iuSGylrMySzOe4PsxqMOYR9ow9hnrm7fXz+yE2GoQUJjLWpOUfcmcFmOonjslxIxwDjafWBPACec3JBWGYjAF0H+98Bg6vPly9wlxJwiz6eiMjULPfb1lM7rr6crZ1VaZ964pw21FZSrOdAMknmGSZvmKGAzeU=_1_1',
    },
  },

5. After configure the variables, we will remove the content of the App class from the src/app/app.ts file, create the loadScript and renderCaptcha methods and implement the ngAfterViewInit method of the AfterViewInit class that it will execute the loadScript method as below.

export class App implements AfterViewInit {

  captchaRef = viewChild>('captcha');
  messageSuccess = model('');
  messageError = model('');

  constructor() {
  }

  ngAfterViewInit(): void {
    this.loadScript();
  }

  private loadScript(): void {
    if (document.getElementById('awsWafScript')) {
      return;
    }

    const script = document.createElement('script');
    script.id = 'awsWafScript';
    script.async = false;
    script.defer = true;
    script.src = environment.aws.waf.url;
    script.onload = () => {
      this.renderCaptcha();
    };
    document.head.appendChild(script);
  }

  private renderCaptcha(): void {
    const captchaElementRef = this.captchaRef();

    if (window.AwsWafCaptcha && captchaElementRef) {
      window.AwsWafCaptcha.renderCaptcha(captchaElementRef.nativeElement, {
        apiKey: environment.aws.waf.apiKey,
        onSuccess: (token: string) => {
          this.messageSuccess.set(`Captcha successfully validated! Token: ${token}`);
          this.messageError.set('');
        },
        onError: (error: any) => {
          this.messageError.set(`Error validating captcha: ${error}`);
          this.messageSuccess.set('');
        },
      });
    }
  }

}

6. Now we will remove the content from the src/app/app.html file and add the div tag with the captcha reference variable as below.

<div class="container-fluid py-3">
  <h1>Angular AWS WAF Captcha</h1>

  <div class="row mt-3">
    <div class="col-sm-12">
      <div #captcha></div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-12">
      <p class="text-center text-success">{{ messageSuccess() }}</p>
      <p class="text-center text-danger">{{ messageError() }}</p>
    </div>
  </div>
</div>

7. Next, we will run the application with the command below.

npm run start

> angular-aws-waf-captcha@1.0.0 start
> ng serve

Initial chunk files | Names         |  Raw size
styles.css          | styles        | 377.03 kB | 
main.js             | main          |   6.10 kB | 

                    | Initial total | 383.13 kB

Application bundle generation complete. [2.375 seconds] - 2026-01-17T18:13:56.184Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

8. Then, we will access the URL http://localhost:4200/ and check if the application is working.

Application running locally.

Application running locally with captcha validation error.

The application is running on GitHub Pages (https://rodrigokamada.github.io/angular-aws-waf-captcha/) with captcha validation success.

9. Ready! The Angular application was created and integrated with the AWS WAF CAPTCHA challenge.

The application repository is available at https://github.com/rodrigokamada/angular-aws-waf-captcha.

Conclusion

Summarizing what was covered in this article:

We created the API key and configured the domain where the captcha will work in AWS WAF.
We created an Angular application and added the captcha code.

You can use this article to create web applications with bot protection using the AWS WAF captcha challenge.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

Creating an Amazon EC2 instance with remote root user access and configuring an usage alerting

Rodrigo Kamada — Sun, 26 Jan 2025 14:02:46 +0000

Introduction

In this article, an Amazon EC2 (Elastic Compute Cloud) instance will be created using the Amazon Linux 2023 AMI operating system image, the root user will be configured to access the remote virtual server via SSH, and a free tier usage alert will be configured.

Prerequisites

Before you start, you need to install and configure the tools below to access the remote server.

AWS Account: Amazon Web Services is a cloud computing services platform and it will be used to create the Amazon EC2 instance.
SSH Client: Secure Shell is a protocol for sending commands securely to a remote server and it will be used to access the virtual server.
Terminal: Terminal is the visual interface where the user types commands and views results by interacting with the operating system programs.

Getting started

Create the instance on Amazon EC2

Amazon EC2 (Elastic Compute Cloud) is a scalable cloud infrastructure service that allows you run virtual servers, select multiple operating systems and processors options, configure network security and manage storage and memory. You can add or reduce resource capacity according to your business needs.

1. Let's access the AWS account. Access the site https://aws.amazon.com/ec2/ and click on the button Sign In to the Console.

2. Now we will click on the button Sign in using root user email.

3. Next, we will click on the option Root user, fill in the field Email address and click on the button Next.

4. Then, we will fill in the field Password and click on the button Sign in.

5. After sign in, we will type ec2 in the search field and click on the option EC2.

6. Now we will click on the link Instances (running).

7. Next, we will click on the button Launch instances.

8. Then, we will fill in the field Name, select the option Amazon Linux 2023 AMI in the field Amazon Machine Image (AMI), select the option Proceed without a key pair (Not recommended) in the field Key pair name - required and click on the button Launch instance.

9. Ready! The Amazon EC2 instance was created with the Amazon Linux 2023 AMI operating system.

Create the root user access

1. Let's create access for the root user. We will click on the menu Instances.

2. Now we will click on the link of the instance created.

3. Next, we will click on the tab Connect.

4. Then, we will click on the button EC2 Instance Connect.

5. After access the tab EC2 Instance Connect, we will click on the button Connect.

6. Now we will type the command sudo -i to log in with the user root.

7. Next, we will type the command passwd to configure the root user password.

8. Then, we will add the remote access settings for the root user in the file /etc/ssh/sshd_config.

PermitRootLogin yes
PasswordAuthentication yes

9. After add the remote access settings for the root user, we will type the command systemctl restart sshd to restart the SSH service.

10. Now we will test the remote access with the root user. We will go to the page that contains the instance informations and click on the icon to copy the public IP address.

11. Next, we will type the command ssh root@3.80.139.206 using public IP address in your terminal to access the remote virtual server.

ssh root@3.80.139.206
The authenticity of host '3.80.139.206 (3.80.139.206)' can't be established.
ED25519 key fingerprint is SHA256:iQxE9Tn+UVDJGCQPe0ImkZ4W+/akI3VEiyHaHipPUXU.
This host key is known by the following other names/addresses:
    ~/.ssh/known_hosts:46: ec2-3-80-139-206.compute-1.amazonaws.com
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '3.80.139.206' (ED25519) to the list of known hosts.
root@3.80.139.206's password: 

A newer release of "Amazon Linux" is available.
  Version 2023.6.20250123:
Run "/usr/bin/dnf check-release-update" for full release and version update info
   ,     #_
   ~\_  ####_        Amazon Linux 2023
  ~~  \_#####\
  ~~     \###|
  ~~       \#/ ___   https://aws.amazon.com/linux/amazon-linux-2023
   ~~       V~' '->
    ~~~         /
      ~~._.   _/
         _/ _/
       _/m/'
Last failed login: Sat Jan 25 14:30:25 UTC 2025 from 187.180.189.101 on ssh:notty
There were 82 failed login attempts since the last successful login.

12. Ready! The remote access to the root user was created and tested.

Create the root user access

The free tier usage alert helps you monitor your AWS service usage and cost by sending you email notifications when you exceed 100% of your free tier limit.

1. Let's create the free tier usage alert. We will click on the user menu and click on the menu Billing and Cost Management.

2. Now we will click on the menu Billing Preferences.

3. Next, we will click on the button Edit.

4. Then, we will click on the option Receive AWS Free Tier alerts, fill in the field Email address to receive Free Tier usage alerts - optional and click on the button Update.

5. Ready! The free tier usage alert was created.

Conclusion

Summarizing what was covered in this article:

We created an Amazon EC2 instance using the Amazon Linux 2023 AMI operating system image.
We created the root user access to access the remote virtual server.
We created the free tier usage alert to monitor the usage and cost of AWS services.

You can use this article to create a virtual server, install and run a database or an HTTP server or an application in a certain programming language.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

Hosting an Angular application in a Docker container on Amazon EC2 deployed by Amazon ECS

Rodrigo Kamada — Sun, 10 Mar 2024 10:17:47 +0000

Introduction

In this article, a WEB application using the latest version of Angular in a built Docker image will be hosted on Amazon EC2 (Elastic Compute Cloud) and deployed by Amazon ECS (Elastic Container Service) using an Amazon ECR (Elastic Container Registry) containers repository.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application, the Docker image and push the image to the repository on Amazon ECR.

git: Git is a distributed version control system and it will be used to sync the repository.
Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
Docker Engine: Docker Engine is a command line utility tool for Docker and it will be used to create and run containers.
IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.
AWS CLI: AWS Command Line Interface is a command line utility tool for interacting with all Amazon Web Services services.

Getting started

Create the repository on Amazon ECR

Amazon ECR is a Docker containers registry service that enables you store and manage conteiner images.

1. Let's create and configure the account. Access the site https://aws.amazon.com/ecr/ and click on the button Get started with Amazon ECS.

2. Now we will click on the option Root user, fill in the field Root user email address and click on the button Next.

Note:

If you don't have an Amazon account, do steps 1 to 9 of the post Authentication using the Amazon Cognito to an Angular application in the session Create and configure the account on the Amazon Cognito.

3. Next, we will fill in the field Password and click on the button Sign in.

4. Then, we will type ecr in the search field and click on the option Elastic Container Registry.

5. After click on the option Elastic Container Registry, we will click on the button Get started.

6. Now we will click on the option Public, fill in the field Repository name and click on the button Create repository.

7. Next, we will click on the created repository and click on the button View push commands.

8. Then, we will copy the commands because they will be used to push the Docker image of the Angular application and click on the button Close.

9. Ready! The repository to store the Docker image of the Angular application was created.

Push the Docker image of the Angular application

1. Let's user the Angular application created in the post Creating and running an Angular application in a Docker container. We will clone the repository https://github.com/rodrigokamada/angular-docker.



git clone https://github.com/rodrigokamada/angular-docker angular-docker-amazon-ecs

2. Now we will change the file Dockerfile with the content below.



FROM node:alpine AS app

WORKDIR /usr/src/app

COPY . /usr/src/app

RUN npm install

RUN npm run build



FROM nginx:alpine

COPY --from=app /usr/src/app/dist/angular-docker/browser /usr/share/nginx/html

RUN ls /usr/share/nginx/html

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

Notes:

The FROM node:alpine AS app setting defines the base Docker image of Node.js to build the Angular application.
The WORKDIR /usr/src/app setting defines the default application directory. The defined directory is created if it does not exist.
The COPY . /usr/src/app setting copies the local application files and directories to the defined directory.
The RUN npm install setting installs the Angular application dependencies.
The RUN npm run build setting compiles the Angular application.
The FROM nginx:alpine setting defines the base Docker image of NGINX to serve the Angular application files.
The COPY --from=app /usr/src/app/dist/angular-docker/browser /usr/share/nginx/html setting copies the compiled Angular application files to the NGINX directory.
The COPY ./nginx.conf /etc/nginx/conf.d/default.conf setting copies the NGINX configuration file to serve the Angular application.
The EXPOSE 80 setting defines the Docker port. NGINX uses the default port 80.

3. Next, we will create the file nginx.conf with the NGINX configuration in the root directory of the Angular application.



touch nginx.conf

4. Then, we will configure the file nginx.conf with the content below.



server {
    listen 80;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

5. After configure the file nginx.conf, we will authenticate the Docker client with the repository registry.



aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws/d3o6w2v8

Login Succeeded

6. Now we will create the Docker image.



docker build -t angular-docker-amazon-ecs .
[+] Building 45.5s (10/10) FINISHED                                                                                                         docker:default
 => [internal] load build definition from Dockerfile                                                                                                  0.1s
 => => transferring dockerfile: 191B                                                                                                                  0.0s
 => [internal] load metadata for docker.io/library/node:alpine                                                                                        2.4s
 => [internal] load .dockerignore                                                                                                                     0.1s
 => => transferring context: 2B                                                                                                                       0.0s
 => [1/5] FROM docker.io/library/node:alpine@sha256:d3271e4bd89eec4d97087060fd4db0c238d9d22fcfad090a73fa9b5128699888                                  4.5s
 => => resolve docker.io/library/node:alpine@sha256:d3271e4bd89eec4d97087060fd4db0c238d9d22fcfad090a73fa9b5128699888                                  0.0s
 => => sha256:6af33fd59f0638fb0acc2992b2b54c7baf68fe593083f0f52815cf29d1288803 7.13kB / 7.13kB                                                        0.0s
 => => sha256:4abcf20661432fb2d719aaf90656f55c287f8ca915dc1c92ec14ff61e67fbaf8 3.41MB / 3.41MB                                                        1.0s
 => => sha256:2997c41553473c7c926a796f330b4a7b03e9d2a7a9ee059a66bf68e02040bf40 43.53MB / 43.53MB                                                      2.0s
 => => sha256:803074618b54a85228c5e10d79b5320e5eba82a2f89abddf233e852420430ba2 2.37MB / 2.37MB                                                        1.0s
 => => sha256:d3271e4bd89eec4d97087060fd4db0c238d9d22fcfad090a73fa9b5128699888 1.43kB / 1.43kB                                                        0.0s
 => => sha256:f5d3a6aea1b1d35066e6c034f5c264cd5b051fc7c7cb0160bb88899e7b1f0c83 1.16kB / 1.16kB                                                        0.0s
 => => extracting sha256:4abcf20661432fb2d719aaf90656f55c287f8ca915dc1c92ec14ff61e67fbaf8                                                             0.1s
 => => sha256:249f9271d1d17cdc2d12d106e2dcfafdc306da21f65123a06aa2290baa5c4fac 451B / 451B                                                            1.4s
 => => extracting sha256:2997c41553473c7c926a796f330b4a7b03e9d2a7a9ee059a66bf68e02040bf40                                                             1.7s
 => => extracting sha256:803074618b54a85228c5e10d79b5320e5eba82a2f89abddf233e852420430ba2                                                             0.3s
 => => extracting sha256:249f9271d1d17cdc2d12d106e2dcfafdc306da21f65123a06aa2290baa5c4fac                                                             0.0s
 => [internal] load build context                                                                                                                     0.1s
 => => transferring context: 683.88kB                                                                                                                 0.0s
 => [2/5] WORKDIR /usr/src/app                                                                                                                        0.3s
 => [3/5] COPY . /usr/src/app                                                                                                                         0.1s
 => [4/5] RUN npm install -g @angular/cli                                                                                                            20.1s
 => [5/5] RUN npm install                                                                                                                            13.8s
 => exporting to image                                                                                                                                4.0s
 => => exporting layers                                                                                                                               4.0s
 => => writing image sha256:e6b87cf9530701fe49f487780093e6bd0e87c2052147750debf8fdf3e6544851                                                          0.0s
 => => naming to docker.io/library/angular-docker-amazon-ecs

7. Next, we will create the image tag.



docker tag angular-docker-amazon-ecs:latest public.ecr.aws/d3o6w2v8/angular-docker-amazon-ecs:latest

8. Then, we will push the Docker image to the repository.



docker push public.ecr.aws/d3o6w2v8/angular-docker-amazon-ecs:latest
The push refers to repository [public.ecr.aws/d3o6w2v8/angular-docker-amazon-ecs]
0d182ddaeba2: Pushed 
692f273c8005: Pushed 
f19fda91d840: Pushed 
118d5d6c8a47: Pushed 
6ac923e38b05: Pushed 
18ffdcddf862: Pushed 
aab2cca0cf91: Pushed 
d4fc045c9e3a: Pushed 
latest: digest: sha256:2f09379b02c2669c915fc63116536d1bb5040c3d608a68b8f3306f10af4d125d size: 2000

Note:

The AWS CLI user must have the permission AmazonElasticContainerRegistryPublicFullAccess.

9. After push the Docker image to the repository, we will check if the Docker image was pushed to the repository. We will go back to the site and click on the repository name.

10. Now we will see the Docker image pushed.

11. Ready! The Docker image of the Angular application was pushed to the repository on Amazon ECR.

Create the conteiner on Amazon ECS

Amazon ECS is a Docker containers orchestration service that enables you deploy, manage and scale containerized applications.

1. Let's type ecs in the search field and click on the option Elastic Container Service.

2. Now we will click on the button Create cluster.

3. Next, we will fill in the field Cluster name, click on the option Amazon EC2 instances, select the option Amazon Linux 2 in the field Operating system/Architecture, select the option c1.medium in the field EC2 instance type, fill in the field Maximum, select the option Turn on in the field Auto-assign public IP and click on the button Create.

4. Then, we will click on the menu Task definitions.

5. After click on the menu Task definitions, we will click on the button Create new task definition.

6. Now we will fill in the field Task definition family, click on the option Amazon EC2 instances, select the option default in the field Network mode, fill in the field CPU, fill in the field Memory, fill in the field Name with the tag name, fill in the field Image URI with the Docker image name, fill in the field Host port with the external port, fill in the field Container port with the NGINX port and click on the button Create.

7. Next, we will click on the button Deploy and click on the option Run task.

8. Then, we will click on the button Create because the fields Existing cluster, Family and Revision was filled in.

9. After click on the button Create, we will wait for the EC2 instance to be created in the session Tasks.

10. Now we will type ec2 in the search field and click on the option EC2.

11. Next, we will click on the menu Instances.

12. Then, we will click on the created instance.

13. After click on the created instance, we will click on the icon to copy the domain in Public IPv4 DNS.

14. Now we will access the URL http://ec2-54-146-190-174.compute-1.amazonaws.com in a browser.

15. Ready! The Docker image of the Angular application was deployed and the application is working.

Conclusion

Summarizing what was covered in this article:

We created a public repository on Amazon ECR.
We changed the Docker configuration of the Angular application.
We created the NGINX configuration file in the Angular application.
We created a Docker image.
We pushed the Docker image to the repository.
We created a container on Amazon ECS for the deployment.
We tested the Angular application inside the Docker container served on EC2 instance.

You can use this article to create a Docker container with an Angular application image, push the image to a repository on Amazon ECR and deploy the container using Amazon ECS to an EC2 instance where the Angular application will be served.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

Creating and running an Angular application in a Docker container

Rodrigo Kamada — Wed, 03 Jan 2024 12:10:03 +0000

Introduction

In this article, a WEB application will be created using the latest version of Angular, a Docker image will be created and this image will be run in a Docker container.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application and the Docker image.

git: Git is a distributed version control system and it will be used to sync the repository.
Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
Docker Engine: Docker Engine is a command line utility tool for Docker and it will be used to create and run containers.
IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.

Getting started

Create the Angular application

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 17 and Google is the main maintainer of the project.

1. Let's create the application with the Angular base structure using the @angular/cli with the server-side rendering (SSR) disabled, the route file and the SCSS style format.

ng new angular-docker --ssr false --routing true --style scss
CREATE angular-docker/README.md (1067 bytes)
CREATE angular-docker/.editorconfig (274 bytes)
CREATE angular-docker/.gitignore (548 bytes)
CREATE angular-docker/angular.json (2806 bytes)
CREATE angular-docker/package.json (1045 bytes)
CREATE angular-docker/tsconfig.json (903 bytes)
CREATE angular-docker/tsconfig.app.json (263 bytes)
CREATE angular-docker/tsconfig.spec.json (273 bytes)
CREATE angular-docker/.vscode/extensions.json (130 bytes)
CREATE angular-docker/.vscode/launch.json (470 bytes)
CREATE angular-docker/.vscode/tasks.json (938 bytes)
CREATE angular-docker/src/main.ts (250 bytes)
CREATE angular-docker/src/favicon.ico (15086 bytes)
CREATE angular-docker/src/index.html (299 bytes)
CREATE angular-docker/src/styles.scss (80 bytes)
CREATE angular-docker/src/app/app.component.scss (0 bytes)
CREATE angular-docker/src/app/app.component.html (20884 bytes)
CREATE angular-docker/src/app/app.component.spec.ts (940 bytes)
CREATE angular-docker/src/app/app.component.ts (373 bytes)
CREATE angular-docker/src/app/app.config.ts (227 bytes)
CREATE angular-docker/src/app/app.routes.ts (77 bytes)
CREATE angular-docker/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. Now we will run the application with the command below.

npm start

> angular-docker@0.0.0 start
> ng serve


Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  23.23 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial Total | 106.03 kB

Application bundle generation complete. [1.504 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

3. Ready! Next, we will access the URL http://localhost:4200/ and check if the application is working.

Create the Docker image

Docker: Docker is a software that allows developers to create and run container applications.

1. Let's create the Dockerfile file with the Docker image configuration in the root directory of the Angular application.

touch Dockerfile

2. Now we will configure the Dockerfile file with the content below.

FROM node:alpine

WORKDIR /usr/src/app

COPY . /usr/src/app

RUN npm install -g @angular/cli

RUN npm install

CMD ["ng", "serve", "--host", "0.0.0.0"]

Notes:

The FROM node:alpine setting defines the base Docker image.
The WORKDIR /usr/src/app setting defines the default application directory. The defined directory is created if it does not exist.
The COPY . /usr/src/app setting copies the local application files and directories to the defined directory.
The npm install -g @angular/cli setting installs the global command line dependency for Angular.
The RUN npm install setting installs the Angular application dependencies.
The CMD ["ng", "serve", "--host", "0.0.0.0"] setting creates and runs the Angular application for external access.

3. Next, we will create the image with with the command below.

docker build -t angular-docker .

4. After create the image, we will check if the image was created with the command below.

docker images
REPOSITORY       TAG      IMAGE ID       CREATED          SIZE
angular-docker   latest   73bfa0093a57   10 seconds ago   463MB

5. Ready! The Docker image with ID 73bfa0093a57 and 463MB was created.

Run the Docker container

1. Let's run the Docker container using the image created of the Angular application with the command below.

docker run -p 4201:4200 angular-docker

2. Now we will check if the container is running with the command below.

docker ps
CONTAINER ID   IMAGE            COMMAND                  CREATED         STATUS         PORTS                                       NAMES
b9f106cbdcca   angular-docker   "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   0.0.0.0:4201->4200/tcp, :::4201->4200/tcp   eloquent_elgamal

3. Ready! Next, we will access the URL http://localhost:4201/ and check if the application is working inside the Docker container.

The application repository is available at https://github.com/rodrigokamada/angular-docker.

Conclusion

Summarizing what was covered in this article:

We create an Angular application.
We create a Docker image.
We run a Docker container.
We tested the Angular application inside the Docker container.

You can use this article to create a Docker container with an Angular application image.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

Creating a serverless API using AWS Lambda and Node.js with TypeScript and Express.js

Rodrigo Kamada — Wed, 22 Mar 2023 09:56:24 +0000

Introduction

In this article, an application will be created using the Node.js with TypeScript and Express.js where a serverless API will be implemented and deployed on the AWS Lambda service.

Getting started

Create and configure the account on the AWS Lambda

AWS Lambda is a service that lets you run code for virtually any type of application without provisioning or managing servers or clusters.

1. Let's create and configure the account. Access the site https://aws.amazon.com/lambda/ and click on the button Get Started with AWS Lambda.

2. Now we will click on the option Root user, fill in the field Root user email address and click on the button Next.

Note:

If you don't have an Amazon account, do steps 1 to 9 of the post Authentication using the Amazon Cognito to an Angular application in the session Create and configure the account on the Amazon Cognito.

3. Next, we will fill in the field Password and click on the button Sign in.

4. After access the account, we will type aim in the search field and click on the option AIM.

5. Now we will click on the menu Users.

6. Next, we will click on the button Add users.

7. After access the screen for adding users, we will fill in the field User name and click on the button Next.

8. Now we will click on the option Attach policies directly, click on the item AdministratorAccess and click on the button Next.

9. Next, we will click on the button Create user.

10. After create the user, we will click on the link with the user name.

11. Now we will click on the tab Security credentials and click on the button Create access key.

12. Next, we will click on the option Command Line Interface (CLI) and click on the button Next.

13. Then, we will click on the button Create access key.

14. After create the access keys, we will copy the keys Access key and Secret access key because the keys will be used in the command line and click on the button Create access key.

15. Ready! Your account was created, configured and the keys was created.

Create the Node.js application

Node.js is open source, cross-platform software that runs JavaScript code on the server. It is based on Google's V8 JavaScript interpreter.

1. Let's create the application. We will create the application folder.

mkdir nodejs-aws-lambda
cd nodejs-aws-lambda

2. Now we will create the file package.json. The option -y allows the file to be created without the questions, such as application name, version, among others.

npm init -y

3. Next, we will install the application dependencies express and serverless-http.

npm install express serverless-http

4. After install the application dependencies, we will install the development dependencies ts-node, typescript and @types/express.

npm install rimraf ts-node typescript @types/express --save-dev

5. Now we will create the TypeScript configuration file tsconfig.json.

./node_modules/.bin/tsc --init

6. Next, we will configure the TypeScript file tsconfig.json.

{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*"
  ]
}

7. After configure the TypeScript file, we will add the transpilation script in the file package.json.

  "scripts": {
    "build": "rimraf dist && tsc"
  },

8. Now we will create the folder src, src/routes and src/routes/v1.

mkdir -p src/routes/v1

9. Next, we will create the routes file src/routes/v1/books.ts.

touch src/routes/v1/books.route.ts

10. After create the routes file, we will add the routes in the file src/routes/v1/books.route.ts.

import { Request, Response, Router } from 'express';

const router = Router();

router.get('/', async (req: Request, res: Response) => {
  try {
    res.status(200).json([]);
  } catch (error) {
    console.error('An error ocurred:', error);
    res.status(500).json(error);
  }
});

router.get('/:id', async (req: Request, res: Response) => {
  try {
    res.status(200).json({});
  } catch (error) {
    console.error('An error ocurred:', error);
    res.status(500).json(error);
  }
});

router.post('/', async (req: Request, res: Response) => {
  try {
    res.status(201).json({});
  } catch (error) {
    console.error('An error occurred:', error);
    res.status(500).json(error);
  }
});

router.put('/:id', async (req: Request, res: Response) => {
  try {
    res.status(200).json({});
  } catch (error) {
    console.error('An error occurred:', error);
    res.status(500).json(error);
  }
});

router.delete('/:id', async (req: Request, res: Response) => {
  try {
    res.status(200).json({});
  } catch (error) {
    console.error('An error occurred:', error);
    res.status(500).json(error);
  }
});

export default router;

11. Now we will create the file src/routes/v1/index.ts with the routes configuration of the version 1.

touch src/routes/v1/index.ts

12. Next, we will add the routes configuration in the file src/routes/v1/index.ts.

import { Router } from 'express';

import books from './books.route';

const router = Router();

router.use('/books', books);

export default router;

13. Then, we will create the file src/routes/index.ts with the routes configuration.

touch src/routes/index.ts

14. After create the file with the routes configuration, we will add the routes configuration in the file src/routes/index.ts.

import { Router } from 'express';

import v1 from './v1';

const router = Router();

router.use('/v1', v1);

export default router;

15. Now we will create the application file src/app.ts with the Express.js settings.

touch src/app.ts

16. Next, we will add the Express.js settings in the file src/app.ts.

import express from 'express';
import serverless from 'serverless-http';

import routes from './routes';

const app = express();

app.use(express.json());

app.use('/', routes);

app.use((req: express.Request, res: express.Response, next: express.NextFunction) => {
  res.status(404).send();
});

app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {
  res.status(err.status || 500).send();
});

export const handler = serverless(app);

17. After add the Express.js settings, we will create the Serverless configuration file serverless.yml with the AWS Lambda settings.

touch serverless.yml

18. Now we will add the AWS Lambda settings in the file serverless.yml.

service: nodejs-aws-lambda
provider:
  name: aws
  runtime: nodejs18.x
functions:
  app:
    handler: dist/app.handler
    events:
      - http: ANY /
      - http: ANY /{proxy+}

19. Next, we will build the application.

npm run build

> nodejs-aws-lambda@1.0.0 build /home/rodrigokamada/nodejs-aws-lambda
> rimraf dist && tsc

20. After build the application, we will install serverless tool.

npm install -g serverless

21. Now we will configure the serverless tool.

serverless config credentials --provider aws --key 7YEE7ANQHFDGLZAKIAQR --secret yyyMEboMvA/IXUFI7djIoMRBJ3b0kFQ8p8TN6pKW
✔ Profile "default" has been configured

22. Next, we will deploy the application.

serverless deploy

Deploying nodejs-aws-lambda to stage dev (us-east-1)

✔ Service deployed to stack nodejs-aws-lambda-dev (56s)

endpoints:
  ANY - https://5imsknki87.execute-api.us-east-1.amazonaws.com/dev
  ANY - https://5imsknki87.execute-api.us-east-1.amazonaws.com/dev/{proxy+}
functions:
  app: nodejs-aws-lambda-dev-app (853 kB)

Monitor Express APIs by route with the Serverless Console: run "serverless --console"

23. After deploy the application, we will confirm if the application was deployed on the AWS Lambda service. We will type lambda in the search field and click on the option Lambda.

24. Now we will confirm that a function was created with the name nodejs-aws-lambda-dev-app.

25. Ready! The application was created and deployed on AWS Lambda.

The application repository is available at https://github.com/rodrigokamada/nodejs-aws-lambda.

Test the application on the AWS Lambda service

1. Let's test the application on the AWS Lambda service. Send a request on the route created and the URL provided.

curl -s "https://5imsknki87.execute-api.us-east-1.amazonaws.com/dev/v1/books" | jq
[
  {
    "id": "ebb3d966-74e4-11ed-8db0-136d663b98e7",
    "title": "Some Title",
    "author": "Some Author"
  }
]

2. Ready! We tested the serverless API deployed on the AWS Lambda service.

Conclusion

Summarizing what was covered in this article:

We created an account on the Amazon Web Services (AWS).
We created the access keys on the Amazon Web Services (AWS).
We created a Node.js application.
We created the routes in the Node.js application using Express.js.
We tested the Node.js application on the AWS Lambda service.

You can use this article to provide a API in the cloud without having to manage servers or clusters.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

Adding the ESLint to an Angular application

Rodrigo Kamada — Wed, 12 Oct 2022 14:18:06 +0000

Introduction

In this article, a WEB application will be created using the latest version of Angular and added the ESLint which analyzes the code statically to find problems with the JavaScript code.

Prerequisites

Before you start, you need to install and configure the tools below to create the Angular application.

git: Git is a distributed version control system and it will be used to sync the repository.
Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
Angular CLI: Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
IDE (e.g. Visual Studio Code or WebStorm): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.

Getting started

Create the Angular application

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.

1. Let's create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

ng new angular-eslint --routing true --style scss
CREATE angular-eslint/README.md (1067 bytes)
CREATE angular-eslint/.editorconfig (274 bytes)
CREATE angular-eslint/.gitignore (548 bytes)
CREATE angular-eslint/angular.json (3136 bytes)
CREATE angular-eslint/package.json (1045 bytes)
CREATE angular-eslint/tsconfig.json (863 bytes)
CREATE angular-eslint/.browserslistrc (600 bytes)
CREATE angular-eslint/karma.conf.js (1431 bytes)
CREATE angular-eslint/tsconfig.app.json (287 bytes)
CREATE angular-eslint/tsconfig.spec.json (333 bytes)
CREATE angular-eslint/.vscode/extensions.json (130 bytes)
CREATE angular-eslint/.vscode/launch.json (474 bytes)
CREATE angular-eslint/.vscode/tasks.json (938 bytes)
CREATE angular-eslint/src/favicon.ico (948 bytes)
CREATE angular-eslint/src/index.html (299 bytes)
CREATE angular-eslint/src/main.ts (372 bytes)
CREATE angular-eslint/src/polyfills.ts (2338 bytes)
CREATE angular-eslint/src/styles.scss (80 bytes)
CREATE angular-eslint/src/test.ts (749 bytes)
CREATE angular-eslint/src/assets/.gitkeep (0 bytes)
CREATE angular-eslint/src/environments/environment.prod.ts (51 bytes)
CREATE angular-eslint/src/environments/environment.ts (658 bytes)
CREATE angular-eslint/src/app/app-routing.module.ts (245 bytes)
CREATE angular-eslint/src/app/app.module.ts (393 bytes)
CREATE angular-eslint/src/app/app.component.scss (0 bytes)
CREATE angular-eslint/src/app/app.component.html (23364 bytes)
CREATE angular-eslint/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-eslint/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. Now we will install the libraries and add the ESLint settings.

ng add @angular-eslint/schematics
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@14.2.5.
✔ Package information loaded.

The package @angular-eslint/schematics@14.2.5 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.

    All @angular-eslint dependencies have been successfully installed 🎉

    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.

    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.

    Please see https://github.com/angular-eslint/angular-eslint for more information.

CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1511 bytes)
UPDATE angular.json (3447 bytes)
✔ Packages installed successfully.

3. Next, we will run the command below to validate the ESLint installation and configuration.

npm run lint

> angular-eslint@1.0.0 lint /home/rodrigokamada/angular-eslint
> ng lint


Linting "angular-eslint"...

All files pass linting.

4. Ready! The message All files pass linting. shows that no problem was found.

The application repository is available at https://github.com/rodrigokamada/angular-eslint.

Conclusion

In summary, the following topics were covered in this article:

We created an Angular application.
We added the ESLint to analize and find problems with the code.

You can use this article to analize and find problems with your application code before deploying to your environment.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

How to build a music recognition chatbot on WhatsApp channel using Node.js

Rodrigo Kamada — Sat, 03 Sep 2022 00:28:49 +0000

Introduction

In this article, an application will be built using JavaScript and Node.js where a simple chatbot will be implemented using the Zenvia platform to integrate with WhatsApp channel and the AudD platform to integrate with music recognition in order to test some features of the WhatsApp channel such as sending and receiving text, image and audio messages.

The first version of the WhatsApp mobile application was released in November 2009 exclusively for iOS and in August 2010 for Android.

The Facebook acquired WhatsApp for $16 billion in 2014 and according to the latest data released in 2018, the application has more than 5 billion installs on Google Play and more than 1.5 billion users online monthly.

Aiming at efficient communication for small, medium and large companies with their consumers around the world, in August 2018, the WhatsApp launched the WhatsApp Business API providing an API to send and receive messages that can integrate with corporate systems through the yours partners and the Zenvia is an official partner of Facebook.

Create an account on the ngrok platform

ngrok is a service that exposes an application that is running locally on the Internet.

1. Let's create the account. We will access the site https://ngrok.com/ and click on the button Sign up.

2. Now we will fill in the fields Name, E-mail, Password, click on I'm not a robot and click on the button Sign Up. You can also login with GitHub or Google social login.

3. Next, we will copy the command with the authentication token as this command will be configured after installation.

4. Ready! Your account was created.

Install and configure the ngrok platform tool

The ngrok tool will create a tunnel for the application that is running locally providing a URL on the Internet.

1. Let's install and configure ngrok. We will access the site https://ngrok.com/download and download the installation file for your operating system.

2. Now we will extract and install the downloaded file. I'm using the openSUSE Tumbleweed operating system and I just extracted it in the /usr/local/bin/ folder.

3. After install ngrok, we will configure the authentication token. In my case, I ran the below command in terminal.

ngrok config add-authtoken 1Rmtob9M3s7nNw02x2w72hSY0C6_5aa3v6udPVT6Gfjb51omJ

Note:

Use your authentication token that was generated on the ngrok platform.

4. Now we will create the tunnel on port 3000 that will be the application's port. In my case, I ran the below command in terminal.

ngrok http 3000

5. Ready! The ngrok tool was configured and will display in the terminal the public URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io available to access on the Internet.

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status                online                                                                                                                                                                                                                                          
Session Expires               1 hour, 59 minutes                                                                                                                                                                                                                              
Version                       2.3.40                                                                                                                                                                                                                                          
Region                        United States (us)                                                                                                                                                                                                                              
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                                                                           
Forwarding                    http://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io -> http://localhost:3000                                                                                                                                                            
Forwarding                    https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io -> http://localhost:3000                                                                                                                                                           

Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                                                                                                     
                              0       0       0.00    0.00    0.00    0.00

Note:

The tunnel has an expiration time of 2 hours as displayed in Session Expires, and if it expires, run the command again to create the tunnel.

Create an account on the Zenvia platform

Zenvia is a platform that empowers companies to create unique communication experiences for their customers through SMS, WhatsApp, Voice, Facebook Messenger, WEB Chat and RCS channels.

1. Let's create the account. We will access the site https://app.zenvia.com and click on the link Create your account.

2. Now we will fill in the fields Name, E-mail, Password, click on the option I'm not a robot and click on the button Create account.

3. After create the account, we will check the registered email.

4. Now we will click on the button YES IT'S ME! CONFIRM IT :) in the email sent.

5. After confirm the email, we will fill in the field E-mail and click on the button Next.

6. Now we will fill in the field Password and click on the button Sign in.

7. Next, we will fill in the field Enter your phone number and click on the button Continue to validate your phone number.

8. Now we will fill in the field Enter the 6-digit code with code you received on your mobile phone and click on the button Continue.

9. Ready! Your account was created.

Create the sandbox on the ZENVIA platform

Sandbox is a very popular concept among developers, where it is possible to test some functionality of a platform without hiring the service. Therefore, it needs to be intuitive and without bureaucracy.

1. Let's create the Sandbox in the WhatsApp channel. We will click on the menu Developers and Sandbox.

2. Now we will click on the button Create New.

3. Next, we will select the option WhatsApp and click on the button Next.

4. After select the option WhatsApp, we will scan the QR Code or send the keyword wobbly-chatter to the number +551148377404 using your WhatsApp application. Another option is to access the URL https://wa.me/551148377404?text=wobbly-chatter using your mobile phone, as the WhatsApp application will open with the wobbly-chatter message to send to the number 551148377404.

Notes:

This word is automatically generated when a Sandbox is created, so another word will be generated when you get to this step.
This registration is require for the Zenvia platform to register the number(s) you would like to test, making it impossible to send the message to any mobile phone.
It is possible to register other numbers using the same process.

5. You will receive a message on your mobile phone confirming the registration of your number.

6. The number(s) registered will be displayed on the screen, as well as the limit of 200 messages in a 24-hour period. Now we will click on the button Next.

Note:

When the 24 hour period is reached, register the number(s) again to start a new cycle of 200 messages in the 24 hour period. If you use the 200 messages, you will have to wait a period of 24 hours.

7. After register the number(s), we will test sending a text message. Select the number you want to send in the field To, fill in the message in the field Message and click on the button Send message. Copy the token in the parameter X-API-TOKEN and, in my case, the token UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI was generated because this token will be configured in the Node.js application. Click on the button Next.

Notes:

In the field From, as it is a Sandbox, a random word is created that corresponds to the integration identifier when the service is contracted.
In the field Request, an example of a request using the curl tool is displayed. You can simulate this same request using other tools like Postman or Insomnia.
In the field Response displays the request response in JSON format.

8. Next, the test message is sent to selected number.

9. Now we will create a subscription to the webhook using the URL that was created on the ngrok platform. We will fill in the fields Message Webhook URL with the URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io/message and Status Webhook URL with the URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io/status and click on the buttons Save and Finish.

10. Ready! Sandbox created for the WhatsApp channel, number configured and token generated. API documentation is available at https://zenvia.github.io/zenvia-openapi-spec/.

Create an account on the AudD platform

AudD is a service that allows you to recognize a music using an API.

1. Let's create the account. We will access the site https://audd.io and click on the button Get an API Token.

2. Now we will click on the link Sign up.

3. Next, we will fill in the fields Email address, Enter the code shown above and click on the button Continue. You can also login with Telegram, Google or GitHub social login.

4. Then, we will fill in the field Password and click on the button Continue.

5. After create the account, we will check the registered email. We will click on the button Confirm my account in the email sent.

6. Now we will click on the button Copy to copy the token generated because this token will be configured in the Node.js application.

7. Ready! Your account was created and the token was generated. API documentation is available at https://docs.audd.io/.

Create the Node.js application

Node.js is open source, cross-platform software that runs JavaScript code on the server. It is based on Google's V8 JavaScript interpreter.

1. Let's create the application. We will create the application folder.

mkdir chatbot-whatsapp
cd chatbot-whatsapp

2. Now we will create the file package.json. The option -y allows the file to be created without the questions, such as application name, version, among others.

npm init -y

3. Next, we will install the dependencies dotenv, express, got and @zenvia/sdk.

npm install dotenv express got @zenvia/sdk

4. After install the dependencies, we will create the file .env.

touch .env

5. Now we will add the tokens created on the platforms Zenvia and AudD in the file .env as below.

ZENVIA_TOKEN=gSTuqxR2rsXY-UJGzdXFMWv-uvp7DKPtGLzq
AUDD_TOKEN=311207449541d9dbd7f7bc9a52680e57

6. Next, we will create the folder src and create the file index.js inside the folder src.

mkdir src
touch src/index.js

7. After create the folder and the file, we will add the content below in the file src/index.js, where when receiving a message, the application will send a message with the content Tested.

const dotenv = require('dotenv');
const { Client, TextContent, WebhookController } = require('@zenvia/sdk');

dotenv.config();

const client = new Client(process.env.ZENVIA_TOKEN);

const whatsapp = client.getChannel('whatsapp');

const webhook = new WebhookController({
  messageEventHandler: (messageEvent) => {
    console.log('Message event:', messageEvent);

    const content = new TextContent('Tested');

    whatsapp.sendMessage(messageEvent.message.to, messageEvent.message.from, content)
    .then(response => {
      console.log('Response:', response);
    });
  },
  channel: 'whatsapp',
});

webhook.on('listening', () => {
  console.log('Webhook is listening');
});

webhook.init();

8. Now we will run the application with the command below.

node src/index.js

9. Next, we will test the integration with the Zenvia platform. We will send a test message using the registered mobile phone. You should get the message with the content Tested.

10. After create and test the sending and receiving of text messages, we will change the content of the file src/index.js to improve the application, search the music recognition and send the content of the audio and image type.

const dotenv = require('dotenv');
const got = require('got');
const FormData = require('form-data');
const { Client, FileContent, TextContent, WebhookController } = require('@zenvia/sdk');

dotenv.config();

const client = new Client(process.env.ZENVIA_TOKEN);

const whatsapp = client.getChannel('whatsapp');

const webhook = new WebhookController({
  channel: 'whatsapp',
  messageEventHandler: async (messageEvent) => {
    let content = [new TextContent('Tested')];

    if (messageEvent.message.contents[0].type === 'file' && messageEvent.message.contents[0].fileMimeType.includes('audio')) {
      const music = await recognizeMusic(messageEvent.message.contents[0].fileUrl);

      if (music) {
        let text = '';
        if (music.artist) {
          text = `${text}Artist: *${music.artist}*\n`;
        }
        if (music.title) {
          text = `${text}Title: *${music.title}*\n`;
        }
        if (music.album) {
          text = `${text}Album: *${music.album}*\n`;
        }
        content = [new TextContent(text)];
        if (music.deezer && music.deezer.picture) {
          content.push(new FileContent(music.deezer.picture, 'image/jpeg'));
        }
        if (music.deezer && music.deezer.preview) {
          content.push(new FileContent(music.deezer.preview, 'audio/mpeg'));
        }
      } else {
        content = [new TextContent('Could not identify the music from the audio.')];
      }
    }

    whatsapp.sendMessage(messageEvent.message.to, messageEvent.message.from, ...content)
    .then((response) => {
      console.debug('Response:', response);
    });
  },
});

webhook.on('listening', () => {
  console.info('Webhook is listening');
});

webhook.init();

const recognizeMusic = async (url) => {
  const form = new FormData();
  form.append('api_token', process.env.AUDD_TOKEN);
  form.append('url', url);
  form.append('return', 'deezer');

  const response = await got.post('https://api.audd.io/', {
    body: form,
    responseType: 'json',
    resolveBodyOnly: true,
  });

  if (response && response.result) {
    return {
      artist: response.result.artist,
      title: response.result.title,
      album: response.result.album,
      deezer: {
        picture: response.result.deezer && response.result.deezer.artist ? response.result.deezer.artist.picture_medium : undefined,
        preview: response.result.deezer ? response.result.deezer.preview : undefined,
      },
    };
  }
};

11. Now we will run the application again with the command below.

node src/index.js

12. Next, we will test the integration with the Zenvia and AudD platforms. We will send the audio of a music. We will click and hold the button Record to record 5 seconds of a music.

13. After send the audio of a music, the application will receive the audio file, search the music recognition and if the music is recognized, the application will send a text message with the music information such as artist, title and album and two others image and audio messages with 30 seconds of music.

14. Ready! We tested the application with sending and receiving text, image and audio messages using the mobile phone and music recognition.

The application repository is available at https://github.com/rodrigokamada/chatbot-whatsapp-music.

Conclusion

In summary, the following topics were covered in this article:

We created an account on the ngrok platform.
We installed and configureed the ngrok platform tool.
We created an account on the Zenvia platform.
We created the sandbox on the Zenvia platform on the WhatsApp channel.
We created an account on the AudD platform.
We created an Node.js application.
We tested sending and receiving text, image and audio messages on the WhatsApp channel using the mobile phone and music recognition.

You can use this article to create an application using JavaScript and Node.js, send and receive messages from WhatsApp channel using Zenvia platform and music recognition using AudD platform.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

Validating the user phone by SMS on Auth0 using ZENVIA

Rodrigo Kamada — Sat, 18 Jun 2022 10:02:00 +0000

Introduction

In this article, an application will be created using Angular where a simple WEB application will be built using the Auth0 platform to authenticate, authorize and manage identity from user and the ZENVIA platform to integrate with the SMS channel in order to validate the user's phone.

SMS (Short Message Service) is a communication protocol that uses the carriers' infrastructure, with the purpose of sending and receiving text messages with up to 160 characters.

Create an account on the ZENVIA platform

ZENVIA is a platform that empowers companies to create unique communication experiences for their customers through SMS, WhatsApp, Voice, Facebook Messenger, WEB Chat and RCS channels.