DEV Community: Sudipto Ghosh

Make and Receive Calls with JavaScript + Vonage APIs 🚀

Sudipto Ghosh — Fri, 26 Mar 2021 19:31:25 +0000

In this tutorial, we will be creating a Node.js application to have a basic understanding of how to make outgoing calls and handle incoming calls programmatically. We will be leveraging the Vonage Voice API and the Node.js Server SDK for Vonage APIs to do the heavy-lifting for us.

All of the code covered in this tutorial is available on the companion repository on GitHub in case you want to take a look at the code directly.

sudiptog81 / calls-with-js

Make and Receive Calls with JavaScript and the Vonage Voice API

Make and Receive Calls with JS and Vonage APIs

Quick Start

Clone and Install Dependencies

git clone https://github.com/sudiptog81/calls-with-js.git
cd calls-with-js
yarn

Override Environment Variables

Create a file named .env as per the template given in .env.example. Get the values for Vonage specific variables from the Vonage Dashboard.

Start an HTTP Tunnel with `ngrok`

Assuming PORT has a value of 5000 in .env.

ngrok http 5000

Override WebHook URLs in Vonage Dashboard

Answer URL: <ngrok-tunnel-url>/answer
Event URL: <ngrok-tunnel-url>/event

Run the Application

yarn dev

Call a Friend

Replace <number> with your friend's number and <message> with a custom message.

curl http://localhost:5000/call?to=<number>&msg=<message>

Ask Them to Call Back

Note: They will be rick-rolled!

License

The MIT Open-Source License.

View on GitHub

Requirements

Make sure you have a recent version of the Node.js JavaScript runtime, a package manager for Node.js - npm or yarn - installed, and ngrok for creating a public endpoint.

$ node -v        
v15.11.0
$ npm -v                 
7.6.3
$ yarn -v        
1.22.10
$ ngrok -v
ngrok version 2.3.35

We will also need a code editor such as Visual Studio Code. Apart from these, we will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit.

Initializing Awesomeness

Create a new project directory (I'll call it js-calls in this tutorial) and navigate to that directory in a terminal window.

mkdir js-calls
cd js-calls

Once that is done, use npm or yarn to initialise a new Node.js project.

yarn init -y # or npm init -y

The above command will accept all the defaults, so if you wish to override some of the values, you might prefer using the following instead:

yarn init # or npm init

We will add a few dependencies before we head on to the next section. express is a web framework that we'll use to spin up a few HTTP endpoints, morgan will be a request logger for the said endpoints, dotenv will manage the environment variables for us and @vonage/server-sdk will allow us to interact with the Vonage APIs.

nodemon will be a development dependency that allows us to focus on developing the application without stopping it and running it again, essentially being a live reload solution that restarts the code whenever there is a change in the source code.

yarn add express morgan dotenv @vonage/server-sdk
yarn add -D nodemon

At this point, I like to add a couple of scripts in the package.json file. I'd add a start and a dev script for this.

{
  ...
  "scripts": {
    "start": "node .",
    "dev": "nodemon ."
  },
  ...
}

Taking Care of Chores

In order to work with the Vonage Voice API, we need to create a Vonage Application and provision a virtual phone number. To do this, go to the Vonage dashboard and click on Your Applications in the sidebar. Continue to Create a new application.

Give your application a unique name to identify it on the dashboard. Generate a new public-private key pair and save the private key in the project directory.

Scroll down and click the button that says Generate new application. Yay! You just created a Vonage application. You'll probably be redirected to the Application Overview page. If you scroll up, you will come across the Application ID. There are some additional configurations that we'll come across as we get this going.

Next up, we have to reserve a phone number and link it to this newly created application. Go to the Numbers section on the sidebar and navigate to Buy Numbers. You'll be greeted with a form asking you for the country and features you want the number to be equipped with.

I'll go ahead with selecting United States for this one. For the features, I'll tick only the VOICE feauture, select Mobile as the type and click on Search. We are greeted with a list of numbers available. If you recall, signing up for a new account gave us a few credits, we may use it as well for reserving a number. Let's buy the first one in the list. It might open a popup asking you to confirm your choice and let you know of any limitations. We will not be using the SMS offering in this tutorial.

Once you purchase a number, head back to Your Applications and click on the name of the application that you created for this tutorial. Scroll down and link the number you purchased, with this application.

Once all this is done, go to the Dashboard home by clicking on the Vonage icon and also take note of the API key and the API secret. Do not share the API secret with anyone!

At this point, you are aware of few key pieces of information that we will need soon - the Vonage number you purchased, the Vonage application ID, the API key and the API secret. Let's get to the code now.

Create a file named .env and populate the values for environment variables with this information. Populate PORT with the port number you want the application to listen on, I'll use 5000. TO_NUMBER will be a valid phone number in the E.164 format, without any leading +, 00 or any other access code, that we define as the default number to call to.

When working with Vonage APIs, all phone numbers should be in this format, that is, the country code digits followed by the subscriber number.

VONAGE_NUMBER, VONAGE_API_KEY, VONAGE_API_SECRET and VONAGE_APPLICATION_ID can be obtained from the Vonage dashboard. Recall that you generated a public-private key pair while creating a Vonage application. Provide the absolute path to that file with the correct file path separator for your operating system and assign that path to VONAGE_PRIVATE_KEY_PATH.

TO_NUMBER=
VONAGE_NUMBER=
VONAGE_API_KEY=
VONAGE_API_SECRET=
VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY_PATH=
PORT=

Making a Call

Create an index.js file in the project directory, require and configure the dotenv module early in the application and import the dependencies needed in this tutorial - they will be the Vonage Server SDK, Express.js and the Morgan middleware.

require('dotenv').config();
const Vonage = require('@vonage/server-sdk');
const express = require('express');
const morgan = require('morgan');

Next, instantiate an Express.js application and an instance of the Vonage class. The constructor accepts an object with the following required keys - apiKey, apiSecret, applicationId and privateKey - all of which can now be accessed through the process.env object.

const app = express();
const vonage = new Vonage({
  apiKey: process.env.VONAGE_API_KEY,
  apiSecret: process.env.VONAGE_API_SECRET,
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: process.env.VONAGE_PRIVATE_KEY_PATH
});

Configure Express.js to parse JSON in the request body of POST requests and to use the Morgan logger.

app.use(morgan('tiny'));
app.use(express.json());

In order to create a call with the Vonage SDK for Node.js, you need to call the vonage.calls.create() method. This method takes two required arguments - the first one is a JavaScript object and the second one is a callback that is triggered after the SDK attempts to create the call. An example invocation can be as follows, assuming vonage is an instance of Vonage from @vonage/server-sdk:

vonage.calls.create({
  to: [{
    type: 'phone',
    number: process.env.TO_NUMBER
  }],
  from: {
    type: 'phone',
    number: process.env.VONAGE_NUMBER,
  },
  ncco: [{
    action: 'talk',
    text: 'This call was made from JavaScript.',
    language: 'en-IN',
    style: '4'
  }]
}, (err, resp) => {
  if (err)
    console.error(err);
  if (resp)
    console.log(resp);
});

Here, the to property accepts an array of JS objects which have the following fields - type, number, and optionally dtmfAnswer. The from property accepts a JS object that has the type and number fields. The ncco property accepts a Nexmo Call Control Object that defines the flow of a call made using the Vonage Voice API. The Voice API Reference is also a great resource in know more about the form in which the API expects the requests to be.

Using a Nexmo Call Control Object, you can stream audio files into a call, connect different phones, send synthesized speech generated by a TTS module and what not. Do take a break and look at the documentation on NCCO!

Even if you try to run this application at this stage, assuming you have the environment variables set up correctly, you'll receive an error telling you that Voice Capabilities are not enabled in the Vonage application that we create using the dashboard. Let's backtrack a bit and revisit the application on the Vonage Dashboard.

Click on the Edit button on the overview page of your application and flip the switch for Voice under the Capabilities section. You'll notice that there are a few text fields that need to be filled before we can turn this capability on - the first two are mandatory. These are expected to be webhook endpoints to which the Vonage APIs make HTTP requests to. If you observe carefully, these can be GET or even POST endpoints.

Let us go back to our code and define these endpoints. For the Event Webhook, we just need to return a status code 200 for all incoming requests. I like to use POST for my endpoints when possible.

For the Event URL, we will use the /events route and simply log the request body to the console and reply with a 200 status code.

app.post('/event', (req, res) => {
  console.log(req.body);
  res.status(200).send('');
});

We will take a look at how to handle incoming calls in the next section. At this point, we can assume that we shall use the /answer route for the Answer URL webhook endpoint.

Configure the Express.js instance to listen on a specified port.

app.listen(process.env.PORT, () => console.log(`Running on port ${process.env.PORT}`));

At this point, we have a basic structure for the endpoints, however, we need a publicly accessible URL for these endpoints. We will use ngrok to create a tunnel to our application running on localhost. Execute the following command on another terminal window. Take note of the URLs that are displayed on the terminal.

ngrok http 5000 # replace this with the correct PORT

The web interface for ngrok allows us to inspect and replay the HTTP requests being received by the tunnel. Requests sent to the two URLs displayed below that will be forwarded to our application. We now have predefined routes and a publicly accessible endpoint for our application. We can now fill in the details for enabling the Voice capability. Save the application on the dashboard once the details are filled in.

At this point, the index.js file should look like this:

require('dotenv').config();
const Vonage = require('@vonage/server-sdk');
const express = require('express');
const morgan = require('morgan');

const app = express();
const vonage = new Vonage({
  apiKey: process.env.VONAGE_API_KEY,
  apiSecret: process.env.VONAGE_API_SECRET,
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: process.env.VONAGE_PRIVATE_KEY_PATH
});

app.use(morgan('tiny'));
app.use(express.json());

vonage.calls.create({
  to: [{
    type: 'phone',
    number: process.env.TO_NUMBER
  }],
  from: {
    type: 'phone',
    number: process.env.VONAGE_NUMBER,
  },
  ncco: [{
    action: 'talk',
    text: 'This call was made from JavaScript.',
    language: 'en-IN',
    style: '4'
  }]
}, (err, resp) => {
  if (err)
    console.error(err);
  if (resp)
    console.log(resp);
});

app.post('/event', (req, res) => {
  console.log(req.body);
  res.status(200).send('');
});

app.listen(process.env.PORT, () => console.log(`Running on port ${process.env.PORT}`));

If you try running this application now, by executing yarn dev, you should notice a call being made to the number as defined in TO_NUMBER, and a few requests being received on the ngrok web interface.

You should also see a request like this being sent to /events:

Here is a recording of the call you should expect:

We can now clean this up by creating a /call route responsible for making a call to a number and instructing the API to speak a message provided in the request. Replace the earlier invocation to vonage.calls.create() with the following:

app.get('/call', (req, res) => {
  vonage.calls.create({
    to: [{
      type: 'phone',
      number: req.query.to || process.env.TO_NUMBER
    }],
    from: {
      type: 'phone',
      number: process.env.VONAGE_NUMBER,
    },
    ncco: [{
      action: 'talk',
      text: req.query.msg || 'This call was made from JavaScript.',
      language: 'en-IN',
      style: '4'
    }]
  }, (err, resp) => {
    if (err)
      console.error(err);
    if (resp)
      console.log(resp);
  });
  res.json('ok');
});

Run the application now and make the following cURL request after replacing the number.

$ curl "http://localhost:5000/call?to=<phone-number>&msg=You%20just%20got%20rickrolled\!"
"ok"

You should expect the messages and the call to go somewhat like the one given below.

Hooray! You can make a few calls now! In the next section, we go over how to handle an inbound call.

Receiving a Call

For handling an incoming call, the webhook endpoint for the Answer URL must respond with an NCCO as application/json. We can access the calling number using req.body.from. This might be a good point to refer back to the documentation for call control objects.

In the previous section, we assumed that we are going to use the /answer route for handling inbound calls. We define a handler for that in this section. Here, I am responding to a POST request with a NCCO object, as JSON, that will be responsible for greeting the caller and speaking out the phone number from which the call is being made from, and also play an audio stream into the call.

app.post('/answer', (req, res) => {
  const number = req.body.from.split('').join(' ');
  const ncco = [
    {
      action: 'talk',
      text: 'Thank you for calling from ' + number,
      language: 'en-IN',
      style: '4'
    },
    {
      action: 'stream',
      streamUrl: ['https://www.albinoblacksheep.com/audio/mp3/RickRollMarioPaint.mp3']
    }
  ];
  res.json(ncco);
});

Make a call to your Vonage number and keep your fingers crossed! You might hear something like this:

You can also accept user input using DTMF Tones and Speech Recognition, which we can go over in some other tutorial. This shows that we can achieve a lot leveraging Vonage Voice APIs!

Taking a Step Back

Congratulations! We went through setting up the environment, creating a Node.js application, building a few endpoints, and the great part being able to make phone calls and answer them using code that you can reuse in a lot of use cases!

Learn more about the Vonage APIs on their Developer Education Portal.

Build an Air Quality Reporting Service With Messages API

Sudipto Ghosh — Wed, 02 Dec 2020 13:35:29 +0000

Have you ever thought about extending your existing application to interact with multiple communication channels? What if we could use this idea to draw attention to issues like air pollution and climate change?

The World Air Quality Index project is a non-profit project started in 2007. Their mission is to promote air pollution awareness and ensure access to world-wide air quality information. They provide REST APIs to get access to data from weather and air quality monitoring stations around the globe. You can use other data sources to build a service that focuses on social issues as well!

In this example, we will build a service, powered by Node.js — a JavaScript Runtime and the Vonage Messages API, that will send information about the current air quality at a given location over WhatsApp and Facebook Messenger.

The source code for the example we will build can also be found on GitHub.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don't have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Set Up the Development Environment

We will need to open an ngrok tunnel to our application to expose it over the Internet with minimal configuration. After installing ngrok, open up a terminal and execute ngrok http 3070 to expose your local port 3070 to the Internet. Make sure you override this using the PORT variable in .env. Copy the HTTPS URL as printed by ngrok to the console and note it down.

Now it's time to install the required dependencies for the application. Execute npm init -y to create a package.json file. We will be using Express.js — a popular web application framework for Node.js and Axios — an HTTP client library for this project, and Dotenv — a module for managing environment variables. Later we will also leverage Dedent and Commander.js to implement some more features. Install these modules by executing:

npm install --save express axios dotenv dedent commander

As we will be making changes to our source code from time to time, we can save a few keystrokes by installing Nodemon, which continuously watches for changes and restarts the application automatically. Install it as a development dependency by executing

npm install -D nodemon

For this tutorial, our entry point will be a file named lib/index.js. Add or update the main and the script keys in package.json to execute the application using nodemon:

// package.json

{
  ...
  "main": "lib/index.js",
  ...
  "scripts": {
    "start": "node .",
    "dev": "nodemon .",
  },
  ...
}

Copy the contents of .env.example in the main directory to a new file called .env. Once logged in to the Vonage API Dashboard, find your API Key and API Secret and update the values in .env. There are some additional variables as well that get assigned in the upcoming sections.

Receive an Inbound Message Using Messages API

Whenever Vonage receives an incoming message on your virtual phone number or through one of the other channels, the Vonage servers make an HTTP request to a defined webhook endpoint with a JSON payload. For this tutorial, we establish that the /webhook/inbound route in our application will listen for all such requests.

To make sure we receive this request, we need to configure the Sandbox Environment which you can find on the Vonage API Dashboard under "Messages and Dispatch". Set the Inbound Message Webhook (HTTP POST) as <ngrok-https-url>/webhook/inbound and click on "Save webhooks".

On the same page, link a test account to send messages from. Click the "Add to Sandbox" links on the WhatsApp and Messenger channels. Then scan the QR code on your phone or click the given link. It generally involves sending a passphrase to a number or page provisioned for the sandbox. Once you link your test account and set the webhook endpoint, you can continue further. Save the sandbox phone number mentioned on the dashboard to your address book for easy access.

We will build an Express.js application to listen on port 3070 for the webhook requests.The minimum requirements are to accept HTTP POST requests on that route and send a status code of 200. In our Express.js application, this payload can be accessed through the req.body object. To take a look at the payload request data, run the application by executing npm run dev.

// lib/index.js

require("dotenv").config();

const express = require("express");

const app = express();
const PORT = process.env.PORT || 3070;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/webhook/inbound", (req, res) => {
  console.log(req.body);
  res.status(200).end();
});

app.listen(PORT, () => console.log(`Listening on Port ${PORT}...`));

Try sending a message from WhatsApp to the sandbox number and observe the output on the terminal window on which your application is running on. Send another message from the Messenger app to the sandbox page and observe the output again.

The outputs shown in the example above show that the different channels are distinguishable by validating req.body.from.type. Depending upon the channel, we also note that the inbound messaging may be from either a phone number or a page/account ID. The message that was sent can be accessed through the req.body.message object in the request body.

Set the value of VONAGE_NUMBER to the phone number as received in req.body.to.number and VONAGE_PAGE_ID to the page ID as in req.body.to.id to the respective variables in .env as we are using the sandbox. In practice, this would be replaced with a WhatsApp Business Account Number and Facebook Page ID linked to a Vonage application.

Send a Message Using Messages API

Using the Vonage Messages API, sending a message to a channel involves sending an HTTP POST request with a message object to the API endpoint. When using the sandbox, the endpoint is: https://messages-sandbox.nexmo.com/v0.1/messages.

The Messages API Reference, shows that the request must contain an Authorization header with the value Basic base64(apiKey):base64(apiToken) or Bearer jwtToken and a message object in the request body. To use this, update your /lib/utils.js file with the example below:

// lib/utils.js

require("dotenv").config();

const Axios = require("axios");

const sendMessage = async (message, body) => {
  await Axios.post(
    "https://messages-sandbox.nexmo.com/v0.1/messages",
    {
      from: {
        type: body.from.type,
        number: process.env.VONAGE_NUMBER
      },
      to: {
        type: body.from.type,
        number: body.from.number
      },
      message: {
        content: {
          type: "text",
          text: message
        }
      }
    },
    {
      auth: {
        username: process.env.VONAGE_API_KEY,
        password: process.env.VONAGE_API_SECRET
      }
    }
  );
};

module.exports = {
  sendMessage,
};

The helper function sendMessage will take the body of the message to send to the defined WhatsApp number. The message object can be dynamically constructed to support multiple channels; you can implement this in another utility function.

Update your /lib/index.js file, within the webhook function, call the sendMessage function with the message you wish to send, as shown below:

// lib/index.js
...
const { sendMessage } = require("./utils");

app.post("/webhook/inbound", (req, res) => {
  sendMessage("Thanks for sending a message!", req.body);
  res.status(200).end();
});
...

We have built a skeleton for a conversation service that will use the Messages API to send and receive messages using WhatsApp and Messenger. Try sending a message to the Vonage Sandbox Number on WhatsApp!

Fetch Data From the World Air Quality Index APIs

The World Air Quality Index Project provides JSON APIs for near-real-time air quality data. To get access to the data, sign up for an API token. We will receive a verification link on the e-mail address that we provide on this page which will redirect us to a page displaying the API token. Set the value of AQICN_TOKEN in .env to the token that is displayed on that page.

Search for a matching air quality monitoring station for a particular city with the WAQI Search API. The HTTP GET request to https://api.waqi.info/search/ has two required query parameters — keyword used as a search term to find the name of a station or city and token which refers to the WAQI API token.

Making the request from within Postman or Insomnia — both of which are popular GUI applications for debugging HTTP API request, we can see that the response for the keyword london contains limited station metadata for each search result.

// GET https://api.waqi.info/search/?token={{AQICN_TOKEN}}&keyword=london
{
  "status": "ok",
  "data": [
    {
      "uid": 5724,
      "aqi": "36",
      "time": {
        "tz": "+01:00",
        "stime": "2020-11-04 05:00:00",
        "vtime": 1604462400
      },
      "station": {
        "name": "London",
        "geo": [
          51.5073509,
          -0.1277583
        ],
        "url": "london"
      }
    },
    ...
  ]
}

Time to implement a utility function for our application to get the top result of the search results and use it to retrieve the expected data.

// lib/utils.js
...
const getStation = async (keyword) => {
  const stationData = await Axios.get(
    "https://api.waqi.info/search/",
    {
    params: {
      token: process.env.AQICN_TOKEN,
      keyword
    }
  });
  if (stationData.data.data.length === 0) {
    return { error: "No Stations Found. Try Again." };
  }
  return stationData.data.data[0].station;
};
...

To get the feed data from the station, make another HTTP GET request, this time to the WAQI City/Station Feed API. The endpoint for this API is https://api.waqi.info/feed/<station-url>/ where station-url corresponds to the value of the url key in the station object returned by getStation. The API token is also required as a query parameter.

The request for the station returned for london, a JSON object is returned which contains raw measurements and detailed station metadata, as shown below:

// GET https://api.waqi.info/feed/london/?token={{AQICN_TOKEN}}
{
  "status": "ok",
  "data": {
    "aqi": 36,
    "idx": 5724,
    "attributions": [
      {
        "url": "http://uk-air.defra.gov.uk/",
        "name": "UK-AIR, air quality information resource - Defra, UK",
        "logo": "UK-Department-for-environment-food-and-rural-affairs.png"
      },
      {
        "url": "https://londonair.org.uk/",
        "name": "London Air Quality Network - Environmental Research Group, King's College London",
        "logo": "UK-London-Kings-College.png"
      },
      {
        "url": "https://waqi.info/",
        "name": "World Air Quality Index Project"
      }
    ],
    "city": {
      "geo": [51.5073509, -0.1277583],
      "name": "London",
      "url": "https://aqicn.org/city/london"
    },
    "dominentpol": "pm25",
    "iaqi": {
      "co": { "v": 7.4 },
      "h": { "v": 92 },
      "no2": { "v": 23.3 },
      "o3": { "v": 2.9 },
      "p": { "v": 1029.4 },
      "pm10": { "v": 16 },
      "pm25": { "v": 36 },
      "so2": { "v": 3.4 },
      "t": { "v": 3.8 },
      "w": { "v": 3.7 }
    },
    "time": {
      "s": "2020-11-04 05:00:00",
      "tz": "+00:00",
      "v": 1604466000,
      "iso": "2020-11-04T05:00:00Z"
    },
    "forecast": {},
    "debug": { "sync": "2020-11-04T14:41:04+09:00" }
  }
}

Implement another utility function for making this request. This function takes the station object as a parameter, which is retrieved from getStation, and queries the API for the data from the station. Update lib/utils.js by adding the following getStationData function:

// lib/utils.js
...
const getStationData = async (station) => {
  const aqiData = await Axios.get(
    `https://api.waqi.info/feed/${station.url}/`,
    {
      params: {
        token: process.env.AQICN_TOKEN
      }
    }
  );
  if (aqiData.data.data.status === "error") {
    return { error: "Could not get data. Try Again." };
  }
  return aqiData.data.data;
};
...

We can now use our utility functions to query the WAQI API on receiving a message on a channel supported by the Vonage Messages API and send back a meaningful reply after processing this data.

Reply Back With Relevant Information

The data that we get from the WAQI APIs need to be processed and made 'readable'. We can use two different templates to report the data — one for a brief report containing the Air Quality Index and the health implications as per the US EPA 2016 scale — and another one for a detailed report mentioning the pollutant levels and weather information along with their respective measurement units.

AQI	Air Pollution Level	Health Implications	Cautionary Statement (for PM 2.5)
0-50	Good	Air quality is considered satisfactory, and air pollution poses little or no risk.	None.
51-100	Moderate	Air quality is acceptable; however, for some pollutants there may be a moderate health concern for a very small number of people who are unusually sensitive to air pollution.	Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.
101-150	Unhealthy for Sensitive Groups	Members of sensitive groups may experience health effects. The general public is not likely to be affected.	Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.
151-200	Unhealthy	Everyone may begin to experience health effects; members of sensitive groups may experience more serious health effects.	Active children and adults, and people with respiratory disease, such as asthma, should avoid prolonged outdoor exertion; everyone else, especially children, should limit prolonged outdoor exertion.
201-300	Very Unhealthy	Health warnings of emergency conditions. The entire population is more likely to be affected.	Active children and adults, and people with respiratory disease, such as asthma, should avoid all outdoor exertion; everyone else, especially children, should limit outdoor exertion.
300+	Hazardous	Health alert: everyone may experience more serious health effects.	Everyone should avoid all outdoor exertion.

Source: AQI Basics, AirNow

We have to also resolve the names of the pollutants and the different weather metrics from the cryptic abbreviations. We can consult the WAQI API reference and implement utility functions for doing this. We can also define additional helper functions in which we can use string interpolation methods and optionally format messages for WhatsApp. The implementation of these helper functions can be found in the source code on GitHub.

Dedent is a useful module when dealing with multi-line ES6 JavaScript template literals. You may find it being used heavily in the source code to maintain whitespaces for better readability.

Parse Inbound Messages with Commander.js

It is useful to parse messages meant explicitly for the service and take different actions for different commands. The Commander.js library, initially built for command-line applications, can be used to parse the inbound message for the commands and arguments.

// lib/index.js
...
const { Command } = require("commander");

const trigger = new Command("vonage-aqi");

// override default cli behaviour
trigger.exitOverride();
trigger.addHelpCommand(false);

trigger
  .command("aqi <searchterm...>")
  .alias("a")
  .action(async (searchterm) => {
    searchterm = searchterm.join(" ");
    // fetch and send the brief report
  });

trigger
  .command("info <searchterm...>")
  .alias("i")
  .action(async (searchterm) => {
    searchterm = searchterm.join(" ");
    // fetch and send the detailed report
  });

trigger
  .command("act")
  .action(async () => {
   // send links to resources and information
});

trigger
  .command("help")
  .alias("h")
  .action(async () => {
    // send help and usage information
  });

...

app.post("/webhook/inbound", async (req, res) => {
  try {
    // pass the incoming message text to Commander.js
    trigger.parse(
      req.body.message.content.text
        .trim().toLowerCase().split(" "),
      {
        from: "user"
      }
    );
  } catch (err) {
    // send message based on the type of error
  } finally {
    res.status(200).end();
  }
});
...

The Commander.js library supports required and optional arguments, variadic arguments, and command aliases and makes the task much easier than manually checking for the commands and arguments.

Ensure Delivery With the Status Webhook

We can set up a new route to listen for the events that happened after we sent a message at /webhook/status. Make sure you append this to the ngrok tunnel and save it as the Status Webhook on the Vonage API Dashboard and click on "Save webhooks".

// lib/index.js
...
app.post("/webhook/status", (req, res) => {
  console.log(req.body);
  res.status(200).end();
});
...

The next time our service receives a message and replies back to it, we observe distinct states of the message that was sent. The req.body.status field will contain the status the message object transitioned to when the webhook request was sent. When the message is received by the Vonage servers, the object is in thesubmitted state. If the delivery was indeed successful, we should receive a status value which would probably be delivered followed by read.

If there was an error, the status could be rejected or undeliverable and we could, in theory, handle this case separately. Do note that Vonage does a lot of the heavy lifting by retrying at regular intervals in case the message delivery has failed.

WhatsApp and Messenger Playground

Make sure the application is running and the correct ngrok tunnel is saved on the Messages Sandbox. Pick up your phone and send messages to the sandbox accounts. Doesn't it feel good when the thing actually works?

Messenger

Wrapping Up

This project shows how flexible the Vonage APIs are at integrating with just about any application. We covered multi-channel communication with WhatsApp and Messenger and used the WAQI APIs for this example. I'm curious as to what you may build after reading this!

Revisiting Java (Again) in a Weekend

Sudipto Ghosh — Thu, 02 Jan 2020 07:55:41 +0000

I landed in the Java universe again, after evolving through a few JavaScript frameworks and a bit of C++ and a ton of Python. I had given up on Java sometime in the past and I don't really know why.

The Basics

The Java Buzzwords

Simple
Secure
Portable
Object-oriented
Robust
Multithreaded
Architecture-neutral
Interpreted
High performance
Distributed
Dynamic

Setting up the Environment

Installing Java

I used the Java SE Development Kit (JDK) 8 (developer version 1.8) by Oracle. OpenJDK is the same sans proprietary issues. Once past that, I set the environment variables JAVA_HOME and PATH to point to the directories where the binaries of the Java toolchain reside.

Code Editor v/s IDE

Personal Preference. VS Code as an editor and IntelliJ IDEA as an IDE are great choices. I use both 😁

Verification

Executing java -version && javac -version outputs whatever is given below:

$ java -version && javac -version
java version "1.8.0_231"
Java(TM) SE Runtime Environment (build 1.8.0_231-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.231-b11, mixed mode)
javac 1.8.0_231

Bytecode Stuff

Overview

Here's a flowchart!

Compilation

I wrote text file with a .java extension containing some lines of code and compilde it to Java Bytecode with the javac compiler. Compilation resulted in a binary .class file that will be used for interpretation.

Interpretation

The .class file is loaded to the Java Virtual Machine using a Class Loader in the JVM. The .class files are vulnerable and using a hex editor, an attacker can change the behaviour of a program. To overcome this issue, the bytecode is then verified using the Bytecode Verifier in the JVM. The Java Just-In-Time (JIT) Compiler or Runtime Interpreter then interprets the bytecode and produces machine code depending on the system architecture which can then be loaded into memory for execution.

The Code

Here's how a "Hello, World!" would look like in Java. Classes, I know, yes, there is some overhead involved but walk along. And yes, it is a little verbose.

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

But I should add comments! So the final source code could be something like:

// HelloWorld.java

/**
 * Hello World Application
 * @author sudipto@ghosh.pro
 */

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

To compile my HelloWorld.java file to bytecode, I ran the javac compiler with a CLI argument.

$ javac HelloWorld.java

This created a HelloWorld.class file in the same directory. Opening it in a text editor was not of much use as it is a binary file but you can surely see a few symbols here and there.

����4↔
♠☼      ►↕
‼¶§▬☺♠<init>☺♥()V☺♦Code☺☼LineNumberTable☺♦main☺▬([Ljava/lang/String;)V☺
SourceFile☺☼HelloWorld.java↨♀↑↓☺
Hello, World!→♀∟☺
elloWorld☺►java/lang/Object☺►java/lang/System☺♥out☺§Ljava/io/PrintStream;☺‼java/io/PrintStream☺println☺§(Ljava/lang/String;)V!♣♠☻☺      ↔☺☺♣*�☺�☺
♠☺♠     ♂♀☺     %☻☺     �☻↕♥�♦�☺

☻       ☺
☻♫

Using the Java Class File Disassembler, we can see some interpreted assembly code. To view that, I used the javap tool in the JDK. Running javap -c HelloWorld outputted some code which also points to the fact that if there is no default constructor, the compiler puts it there!

$ javap -c HelloWorld
Compiled from "HelloWorld.java"
public class HelloWorld {
  public HelloWorld();
    Code:
       0: aload_0
       1: invokespecial #1     // Method java/lang/Object."<init>":()V
       4: return

  public static void main(java.lang.String[]);
    Code:
       0: getstatic     #2     // Field java/lang/System.out:Ljava/io/PrintStream;
       3: ldc           #3     // String Hello, World!
       5: invokevirtual #4     // Method java/io/PrintStream.println:(Ljava/lang/String;)V
       8: return
}

To load my HelloWorld.class into the JVM and execute it, I invoked java with a command-line argument that matches the base name of the .class file.

$ java HelloWorld

Once this command was executed, the message Hello, World! correctly printed onto the screen, technically console.

Learning Resources

I referred to Java: The Complete Reference (9th ed.) by Herbert Schildt and the Oracle documentation for getting around the intricacies of the language.

Project 01: Text Editor

A basic text editor that can open and save text files. It also features a word counter and character counter. Learnt about StringTokenizer, FileReader, FileWriter, BufferredReader, BufferredWriter and StringBuilder. The GUI was designed with Swing and the IntelliJ IDEA GUI Designer.

Demonstration

Code

https://github.com/sudiptog81/ducscode/tree/master/Year%20I/Semester%20II/Java/Other/27-12-2019/notepadClone/

Project 02: Store Management System

Used the SQLite JDBC Driver to interface with a database and manage customers, inventory items and process orders of a dummy store. The GUI was designed with Swing and the IntelliJ IDEA GUI Designer. Had to struggle a bit with JTable but figured it out at last.

Demonstration

Code

https://github.com/sudiptog81/ducscode/tree/master/Year%20I/Semester%20II/Java/Other/28-12-2019/customerManagementSystem/

Bonus

Just received Hacktoberfest 2019 swag. Happy!

A noFrills Quadratic Solver

Sudipto Ghosh — Fri, 07 Jun 2019 07:23:37 +0000

Last week, I coded my first library in a programming language, glad it was JavaScript :)

Link to my project: github.com/sudiptog81/quadratic-solver

Example Usage

Browser Import

<script src="https://unpkg.com/quadratic-solver"></script>
<script>
    console.log(qs.getVersion());
    const rootsArr = qs.quadSolver(2, 5, -3);
    rootsArr.map(root => console.log(`Root: ${root}`));
</script>

NodeJS Module

const { quadSolver, getVersion } = require("quadratic-solver");
console.log(getVersion());
const rootsArr = quadSolver(2, 5, -3);
rootsArr.map(root => console.log(`Root: ${root}`));

Methods

quadSolver(a, b, c)

Arguments

a: coefficent of the squared term.
b: coefficient of the linear term.
c: constant with its sign.

Return Value

when both roots are real: Array[2] with the roots of the equation.
when only one root is real: Array[2] wherein the first element is the real root and the other element is a warning.
when both roots are imaginary: Array[2] in which both elements are warnings.

Note: If a is equal to 0, quadSolverCitardauq() will be called automatically with the arguments as provided.

completeSquare(a, b, c)

Arguments

a: coefficent of the squared term.
b: coefficient of the linear term.
c: constant with its sign.

Return Value

when both roots are real: Array[2] with the solutions for the equation.
when both roots are imaginary: Array[2] with both elements are in which both elements are NaN.

quadSolverCitardauq(a, b, c)

Arguments

Same as quadSolver(a, b, c).

Return Value

Same as quadSolver(a, b, c).

getVersion()

Arguments

No arguments are required.

Return Value

String containing name and version of the package in quadratic-solver v0.x.x format.

ES6 Classes

Solver(a, b, c)

Properties

a: coefficent of the squared term; default: 2.
b: coefficient of the linear term; default: 5.
c: constant with its sign; default: -3.

Methods

solve(): returns output of quadSolver() with properties of the instance.
completeSquare(): returns output of completeSquare() with properties of the instance.
versionMethod(): returns the output of getVersion().

MatrixSolver([[a, b, c], [d, e, f], ...])

Properties

matrix: array of arrays containing the coefficients of the quadratic and linear terms, followed by the constant (in that order); default: [[2, 5, -3]].

Methods

solveAll(): returns output of quadSolver() for each array in an array of arrays.
completeSquareAll(): returns output of completeSquare() for each array in an array of arrays.
versionMethod(): returns the output of getVersion().

DEV Community: Sudipto Ghosh

Make and Receive Calls with JavaScript + Vonage APIs 🚀

sudiptog81 / calls-with-js

Make and Receive Calls with JavaScript and the Vonage Voice API

Make and Receive Calls with JS and Vonage APIs

Quick Start

Clone and Install Dependencies

Override Environment Variables

Start an HTTP Tunnel with ngrok

Override WebHook URLs in Vonage Dashboard

Run the Application

Call a Friend

Ask Them to Call Back

License

Requirements

Initializing Awesomeness

Taking Care of Chores

Making a Call

Receiving a Call

Taking a Step Back

Build an Air Quality Reporting Service With Messages API

Vonage API Account

Set Up the Development Environment

Receive an Inbound Message Using Messages API

Send a Message Using Messages API

Fetch Data From the World Air Quality Index APIs

Reply Back With Relevant Information

Parse Inbound Messages with Commander.js

Ensure Delivery With the Status Webhook

WhatsApp and Messenger Playground

WhatsApp

Messenger

Wrapping Up

Further Reading

Revisiting Java (Again) in a Weekend

The Basics

The Java Buzzwords

Setting up the Environment

Installing Java

Code Editor v/s IDE

Verification

Bytecode Stuff

Overview

Compilation

Interpretation

The Code

Learning Resources

Project 01: Text Editor

Demonstration

Code

Project 02: Store Management System

Demonstration

Code

Bonus

A noFrills Quadratic Solver

Example Usage

Browser Import

NodeJS Module

Methods

quadSolver(a, b, c)

Arguments

Return Value

completeSquare(a, b, c)

Arguments

Return Value

quadSolverCitardauq(a, b, c)

Arguments

Return Value

getVersion()

Arguments

Return Value

ES6 Classes

Solver(a, b, c)

Properties

Methods

MatrixSolver([[a, b, c], [d, e, f], ...])

Properties

Methods

Start an HTTP Tunnel with `ngrok`