Introduction In this article, an application will be built using JavaScript and Node.js where a simple chatbot will be implemented using the platform to integrate with the WhatsApp channel and the 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. Zenvia AudD The first version of the mobile application was released in November 2009 exclusively for iOS and in August 2010 for Android. WhatsApp 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 and more than 1.5 billion users online monthly. Google Play Aiming at efficient communication for small, medium, and large companies with their consumers around the world, in August 2018, WhatsApp launched the providing an API to send and receive messages that can integrate with corporate systems through your partners and the is an official partner of Facebook. WhatsApp Business API Zenvia Create an account on the ngrok platform is a service that exposes an application that is running locally on the Internet. ngrok Let's create the account. We will access the site and click on the button . 1. https://ngrok.com/ Sign up Now we will fill in the fields , , , click on and click on the button . You can also log in with GitHub or Google social login. 2. Name E-mail Password I'm not a robot, Sign Up Next, we will copy the command with the authentication token as this command will be configured after installation. 3. Ready! Your account was created. 4. 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. Let's install and configure ngrok. We will access the site and download the installation file for your operating system. 1. https://ngrok.com/download Now we will extract and install the downloaded file. I'm using the operating system and I just extracted it in the folder. 2. openSUSE Tumbleweed /usr/local/bin/ After install ngrok, we will configure the authentication token. In my case, I ran the below command in terminal. 3. ngrok config add-authtoken 1Rmtob9M3s7nNw02x2w72hSY0C6_5aa3v6udPVT6Gfjb51omJ Use your authentication token that was generated on the ngrok platform. Note: Now we will create the tunnel on port that will be the application's port. In my case, I ran the below command in the terminal. 4. 3000 ngrok http 3000 Ready! The ngrok tool was configured and will display in the terminal the public URL available to access on the Internet. 5. https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io 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 The tunnel has an expiration time of 2 hours as displayed in , and if it expires, run the command again to create the tunnel. Note: Session Expires Create an account on the Zenvia platform 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. Zenvia Let's create the account. We will access the site and click on the link . 1. https://app.zenvia.com Create your account Now we will fill in the fields , , , click on the option and click on the button . 2. Name E-mail Password I'm not a robot, Create an account After creating the account, we will check the registered email. 3. Now we will click on the button, in the email sent. 4. YES IT'S ME! CONFIRM IT :) After confirming the email, we will fill in the field and click on the button . 5. E-mail Next Now we will fill in the field and click on the button . 6. Password Sign in Next, we will fill in the field and click on the button to validate your phone number. 7. Enter your phone number Continue Now we will fill in the field with the code you received on your mobile phone and click on the button . 8. Enter the 6-digit code Continue Ready! Your account was created. 9. Create the sandbox on the ZENVIA platform 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. Sandbox Let's create the Sandbox in the WhatsApp channel. We will click on the menu and . 1. Developers Sandbox Now we will click on the button . 2. Create New Next, we will select the option and click on the button . 3. WhatsApp Next After selecting the option , we will scan the QR Code or send the keyword to the number using your WhatsApp application. Another option is to access the URL using your mobile phone, as the WhatsApp application will open with the message to send to the number . 4. WhatsApp wobbly-chatter +551148377404 https://wa.me/551148377404?text=wobbly-chatter wobbly-chatter 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 required 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. You will receive a message on your mobile phone confirming the registration of your number. 5. 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 . 6. 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. After registering the number(s), we will test sending a text message. Select the number you want to send in the field , fill in the message in the field and click on the button . Copy the token in the parameter and, in my case, the token was generated because this token will be configured in the Node.js application. Click on the button . 7. To Message Send message X-API-TOKEN UbH-3NSJMufN0VN5fejawn633zDGnXRiRhYI Next Notes: In the field , as it is a Sandbox, a random word is created that corresponds to the integration identifier when the service is contracted. From In the field , an example of a request using the tool is displayed. You can simulate this same request using other tools like or . Request curl Postman Insomnia In the field, displays the request response in JSON format. Response Next, the test message is sent to the selected number. 8. 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 with the URL and with the URL and click on the buttons and . 9. Message Webhook URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io/message Status Webhook URL https://4402-2804-1b3-a8c3-b00f-8119-68d3-7e21-33e1.ngrok.io/status Save Finish Ready! Sandbox created for the WhatsApp channel, number configured and token generated. API documentation is available . 10. here Create an account on the AudD platform is a service that allows you to recognize music using an API. AudD Let's create the account. We will access the site and click on the button . 1. https://audd.io Get an API Token Now we will click on the link . 2. Sign up Next, we will fill in the fields , and click on the button . You can also log in with Telegram, Google, or GitHub social login. 3. Email address Enter the code shown above Continue Then, we will fill in the field and click on the button . 4. Password Continue After creating the account, we will check the registered email. We will click on the button in the email sent. 5. Confirm my account Now we will click on the button to copy the token generated because this token will be configured in the Node.js application. 6. Copy Ready! Your account was created and the token was generated. API documentation is available . 7. here Create the Node.js application is open source, cross-platform software that runs JavaScript code on the server. It is based on Google's V8 JavaScript interpreter. Node.js Let's create the application. We will create the application folder. 1. mkdir chatbot-whatsapp
cd chatbot-whatsapp Now we will create the file . The option allows the file to be created without the questions, such as application name, and version, among others. 2. package.json -y npm init -y Next, we will install the dependencies , , and . 3. dotenv express got @zenvia/sdk npm install dotenv express got @zenvia/sdk After installing the dependencies, we will create the file . 4. .env touch .env Now we will add the tokens created on the platforms Zenvia and AudD in the file as below. 5. .env ZENVIA_TOKEN=gSTuqxR2rsXY-UJGzdXFMWv-uvp7DKPtGLzq
AUDD_TOKEN=311207449541d9dbd7f7bc9a52680e57 Next, we will create the folder and create the file inside the folder . 6. src index.js src mkdir src
touch src/index.js After creating the folder and the file, we will add the content below in the file , where when receiving a message, the application will send a message with the content . 7. src/index.js 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(); Now we will run the application with the command below. 8. node src/index.js 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 . 9. Tested After creating and testing the sending and receiving of text messages, we will change the content of the file to improve the application, search the music recognition and send the content of the audio and image type. 10. src/index.js 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,
      },
    };
  }
}; Now we will run the application again with the command below. 11. node src/index.js Next, we will test the integration with the Zenvia and AudD platforms. We will send the audio of the music. We will click and hold the button to record 5 seconds of music. 12. Record After sending the audio of 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. 13. Ready! We tested the application by sending and receiving text, image, and audio messages using mobile phones and music recognition. 14. The application repository is available . here Conclusion In summary, the following topics were covered in this article: We created an account on the ngrok platform. We installed and configured 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 a Node.js application. We tested sending and receiving text, image, and audio messages on the WhatsApp channel using mobile phones and music recognition. You can use this article to create an application using JavaScript and Node.js, send and receive messages from the WhatsApp channel using the Zenvia platform, and music recognition using the AudD platform. Thank you for reading and I hope you enjoyed the article! This tutorial was posted on my in Portuguese. blog To stay updated whenever I post new articles, follow me on and . Twitter LinkedIn

The Sandbox

Facebook

Google

Twitter

Adding the ESLint to an Angular Application

Validating a User Phone Number With SMS on Auth0 Using ZENVIA

2021 - HackerNoon Contributor of the Year - WEB-DEVELOPMENT

2021 - HackerNoon Contributor of the Year - WEB

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

Too Long; Didn't Read

How to Build a Music Recognition Chatbot on WhatsApp Using Node.js

How to Build a Music Recognition Chatbot on WhatsApp Using Node.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hosting an Angular application on GitHub Pages using GitHub Actions

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

Hosting an Angular application on GitHub Pages using GitHub Actions

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps