Introduction In this article, we will build an application using JavaScript and Node.js where a simple chatbot will be implemented using the platform to integrate with a RCS channel and the platform. We will retrieve meteorological data in order to test some features of the RCS channel such as sending and receiving text and image messages and share location. ZENVIA OpenWeatherMap RCS (Rich Communication Services) is a communication protocol that uses the carriers' infrastructure, as well as SMS (Short Message Service), with the purpose of having rich content such as image, video, button, card, among others. This protocol can be implemented by any operating system or mobile application, however, it is currently supported on Android devices and the application. Messages Create an account on the ngrok platform is a service that exposes an application that is running locally on the Internet. ngrok Access the site and click on the button . 1. https://ngrok.com/ Sign up Fill in the fields , , , click on and click on the button . You can also login with GitHub or Google social login. 2. Name E-mail Password I'm not a robot Sign Up Ready! Account created. 3. 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. Access the site and download the installation file for your operating system. 1. https://ngrok.com/download 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/ Configure the authentication token. In my case, I ran the below command in terminal. 3. ngrok authtoken 1Rmotb9M3sa7Nw2Ox2w27hSY0c8_5ee3v6duPVT6Gfjb15omJ Note: Use your authentication token that was generated on the ngrok platform. Create the tunnel on port that will be the application's port. In my case, I ran the below command in terminal. 4. 3000 ngrok http 3000 Ready! The ngrok tool is configured and will display in the terminal the public URL available to access on the Internet. 5. https://da3e845a1ceb.ngrok.io ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status                online                                                                                                                                                                                                                                          
Session Expires               1 hour, 59 minutes                                                                                                                                                                                                                              
Update                        update available (version 2.3.40, Ctrl-U to update)                                                                                                                                                                                             
Version                       2.3.35                                                                                                                                                                                                                                          
Region                        United States (us)                                                                                                                                                                                                                              
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                                                                           
Forwarding                    http://da3e845a1ceb.ngrok.io -> http://localhost:3000                                                                                                                                                                                           
Forwarding                    https://da3e845a1ceb.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 , and if it expires, run the command again to create the tunnel. 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 Access the site and click on the link . 1. https://app.zenvia.com Create your account Fill in the fields , , , click on the option and click on the button . 2. Name E-mail Password I'm not a robot Create account Check the registered email. 3. Click on the button in the email sent. 4. YES IT'S ME! CONFIRM IT :) Fill in the field and click on the button . 5. E-mail Next Fill in the field and click on the button . 6. Password Sign in Fill in the field and click on the button . 7. Enter your phone number Continue 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! Account 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 Click on the menu and . 1. Solutions Sandbox Click on the button . 2. Create New Select the option and click on the button . 3. RCS Next Fill in the field with your mobile phone and click on the button . 4. Send message Notes: This registration is required for the ZENVIA platform to register the number(s) you would like to test, making it possible to send the message to any mobile phone. It is possible to register other numbers using the same procedure. You will receive a message on your mobile phone confirming the registration of the number. Click on the button to confirm your registration. 5. Accept You will receive a message on your mobile phone confirming that your number has been registered. 6. The registered number(s) will be displayed on the screen, as well as the limit of 200 messages in a 24-hour period. 7. 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. You can 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 . 8. To Message Send message X-API-TOKEN gSTuqxR2rsXY-UJGzdXFMWv-uvp7DKPtGLzq Next Notes: In the field , as it is a Sandbox, a random word is createdIn the From 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 Test message sent to the selected number. 9. Let's create a subscription to the webhook using the URL that was created on the ngrok platform. Fill in the fields with the URL and with the URL and click on the buttons and . 10. Message Webhook URL https://da3e845a1ceb.ngrok.io/message Status Webhook URL https://da3e845a1ceb.ngrok.io/status Save Finish Ready! Sandbox created for the RCS channel, number and webhook URL configured. API documentation is available at . 11. https://zenvia.github.io/zenvia-openapi-spec/ Create an account on the OpenWeatherMap platform is a service that allows you to get weather data using APIs. OpenWeatherMap Access the site and click on the link . 1. https://openweathermap.org Sign In Click on the link . 2. Create an Account Fill in the fields , , , , click on , , and click on the button . 3. Username Enter email Password Repeat Password I am 16 years... I agree with... I'm not a robot Create Account Select an option in the field and click on the button . 4. Purpose Save Check the registered email. 5. Click on the button in the email sent. 6. Verify your email Ready! Account created. 7. Search the API key on the OpenWeatherMap platform Click on the link . 1. API keys Copy the key in the parameter and, in my case, the key was generated because this key will be configured in the Node.js application. 2. Key 311207449541d9dbd7f7bc9a52680e57 Ready! API key created. API documentation is available at . 3. https://openweathermap.org/current Create the Node.js application is an open-source, cross-platform software that runs JavaScript code on the server. It is based on Google's V8 JavaScript interpreter. Node.js Create the application folder. 1. mkdir chatbot-rcs
cd chatbot-rcs Create the file . The option allows the file to be created without the questions, such as application name, version, among others. 2. package.json -y npm init -y Install the dependencies , and . 3. dotenv express got npm install dotenv express got Create the file . 4. .env touch .env Add the tokens created on the platforms ZENVIA and OpenWeatherMap in the file as below. 5. .env ZENVIA_TOKEN=gSTuqxR2rsXY-UJGzdXFMWv-uvp7DKPtGLzq
OPENWEATHERMAP_TOKEN=311207449541d9dbd7f7bc9a52680e57 Create the folder and create the file inside the folder . 6. src index.js src mkdir src
touch src/index.js 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 express = require('express');
const got = require('got');

dotenv.config();

const app = express();
app.use(express.json());

app.post('*', async (req, res) => {
  const contentReceived = req.body;
  console.log(`Content Received [${JSON.stringify(contentReceived)}]`);

  res.sendStatus(200);

  if (!contentReceived || !contentReceived.message || !contentReceived.message.contents) {
    return;
  }

  if (contentReceived.type === 'MESSAGE') {
    await got.post('https://api.zenvia.com/v2/channels/rcs/messages', {
      responseType: 'json',
      resolveBodyOnly: true,
      json: {
        from: contentReceived.message.to,
        to: contentReceived.message.from,
        contents: [{
          type: 'text',
          text: 'Tested',
        }],
      },
      headers: {
        'X-API-TOKEN': process.env.ZENVIA_TOKEN,
      },
    });
  }
});

app.listen(3000);

console.log('Listening...'); Run the application with the command below. 8. node src/index.js Test the integration with the ZENVIA platform. 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 weather data and send the content of the card type. 10. src/index.js const dotenv = require('dotenv');
const express = require('express');
const got = require('got');

dotenv.config();

const app = express();
app.use(express.json());

app.post('*', async (req, res) => {
  const contentReceived = req.body;
  console.log(`Content Received [${JSON.stringify(contentReceived)}]`);

  res.sendStatus(200);

  if (!contentReceived || !contentReceived.message || !contentReceived.message.contents) {
    return;
  }

  if (contentReceived.type === 'MESSAGE') {
    let content = {
      type: 'text',
      text: 'Tested',
    };

    if (contentReceived.message.contents[0].type === 'location') {
      const weather = await getWeather(contentReceived.message.contents[0].latitude, contentReceived.message.contents[0].longitude);
      content = {
        type: 'card',
        text: `📍 Weather for ${weather.name}\n\nTemperature: ${weather.temperature}º\nMinimum Temperature: ${weather.temperatureMinimum}º\nMaximum Temperature: ${weather.temperatureMaximum}º\nHumidity: ${weather.humidity}%`,
        media: {
          url: weather.url,
          disposition: 'ON_THE_LEFT',
        },
      };
    }

    await got.post('https://api.zenvia.com/v2/channels/rcs/messages', {
      responseType: 'json',
      resolveBodyOnly: true,
      json: {
        from: contentReceived.message.to,
        to: contentReceived.message.from,
        contents: [{...content}],
      },
      headers: {
        'X-API-TOKEN': process.env.ZENVIA_TOKEN,
      },
    });

    console.log(`Content Sent [${JSON.stringify(content)}]`);
  }
});

app.listen(3000);

console.log('Listening...');

const getWeather = async (latitude, longitude) => {
  const response = await got.post(`https://api.openweathermap.org/data/2.5/weather?appid=${process.env.OPENWEATHERMAP_TOKEN}&units=metric&lat=${latitude}&lon=${longitude}`, {
    responseType: 'json',
    resolveBodyOnly: true,
  });

  return {
    name: response.name,
    temperature: response.main.temp,
    temperatureMinimum: response.main.temp_min,
    temperatureMaximum: response.main.temp_max,
    humidity: response.main.humidity,
    url: `https://rodrigokamada.github.io/openweathermap/images/${response.weather[0].icon}_w@4x.png`,
  };
}; Run the application again with the command below. 11. node src/index.js Test integration with ZENVIA and OpenWeatherMap platforms. Let's share the location. Click on the button to display the options. 12. Plus Click the button to display the location sharing. 13. Location Click the button to share the location. 14. Send After sharing the location, the application will receive the message containing the latitude and longitude information, search the weather data and send a card type content with the weather data. 15. Ready! Application tested and running using a mobile phone. 16. The application repository is available at . https://github.com/rodrigokamada/chatbot-rcs Extras Carriers available in Brazil: Claro, Oi, Tim and Vivo. If you have problems with the Google Messages application, enable the option available within the menu and then under . Enable chat features Settings Chat features This tutorial was first posted on my in Portuguese. blog

The Sandbox

Facebook

Google

Adding the Material UI CSS framework to a React Application

Hosting an Angular Application on Amazon S3 Using Github Actions

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 Weather Chatbot with RCS Services using Node.js

How to Build a Weather Chatbot with RCS Services 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

44 Stories To Learn About Bots

52 Stories To Learn About Telegram

A comprehensive introduction to Crypto Trading with Bots

A Guide to Deploying Ruby Bot Live on Heroku

Hosting an Angular application on GitHub Pages using GitHub Actions

44 Stories To Learn About Bots

52 Stories To Learn About Telegram

A comprehensive introduction to Crypto Trading with Bots

A Guide to Deploying Ruby Bot Live on Heroku

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps