build dashboard of live conversations

How to Build a Dashboard of Live Conversations with Flask and React

Published September 24, 2019 by Lauren Lee

Nexmo recently introduced the Conversation API. This API enables you to have different styles of communication (voice, messaging, and video) and connect them all to each other.

It’s now possible for multiple conversations within an app to coincide and to retain context across all of those channels! Being able to record and work with the history of a conversation is incredibly valuable for businesses and customers alike so, as you can imagine, we’re really excited about this.

What The Dashboard Does

This tutorial covers how to build a dashboard with Flask and React that monitors all current conversations within an application. The goal is to showcase relevant data from the live conversations that are currently happening in real-time.

When a single conversation is selected from the list of current conversations, the connected members and events will be displayed. An individual member can then be selected to reveal even more information related to that particular user.

dashboard gif

What Does The Conversation API Do?

The Nexmo Conversation API enables you to build conversation features where communication can take place across multiple mediums including IP Messaging, PSTN Voice, SMS, and WebRTC Audio and Video. The context of the conversations is maintained through each communication event taking place within a conversation, no matter the medium.

Think of a conversation as a container of communications exchanged between two or more Users. There could be a single interaction or the entire history of all interactions between them.

The API also allows you to create Events and Legs to enable text, voice, and video communications between two Users and store them in Conversations.

Workflow of The Application

flow of app

Create A Nexmo Application

To work through this tutorial, you will need a Nexmo account. You can sign up now for free if you don’t already have an account.

This tutorial also assumes that you will be running Ngrok to run your webhook server locally.

If you are not familiar with Ngrok, please refer to our Ngrok tutorial before proceeding.

First, you will need to create a Nexmo Application:

Next, assuming you have already rented a Nexmo Number (NEXMO_NUMBER), you can link your Nexmo Number with your application via the command line:

Clone Git Repo

To get this app up and running on your local machine, start by cloning this repository:

Then install the dependencies:

Copy the example .env.example file with the following command:

Open that new .env file and fill in the Application ID and path to your private.key that we just generated when creating our Nexmo Application.

Flask Backend

The important doc to inspect within our Flask files is the server.py one as it establishes all of the different endpoints the Conversation API.

The function, make_capi_request() connects to Nexmo and authenticates the application:

Underneath that, we create the necessary routes:

Once authenticated, each of these routes accesses the Conversation API based on the Application ID and eventually the Conversation or User ID.

React Frontend

We’ll make use of React’s ability to break our code into modularized and reusable components. The components we’ll need are:

components - react tree

At the App.js level, notice that the "/conversations" endpoint is called within the constructor. Meaning that if there are any current conversations within the application, they are immediately displayed onto the page.

The user then will have the option to select one of the conversations from the list and the meta details of that conversation, such as name and timestamp, will be displayed.

Notice that once a particular conversation has been selected two tabs become visible: Events and Members.

Members is set as the default state, meaning that is displayed first. It is at this point that the "/conversation" and "/events" endpoints are called. Using the cid that is passed within the state, the details of the current members and events are now available.

The MembersList.js component will call the /user endpoint to retrieve even more data on that particular user, which then is shown within the MemberDetail.js component.

Connect It All Together

To start up the backend, run the Flask command:

And in another tab within your terminal, run the React command:

Open up http://localhost:3000 in a browser, and your app will be up and running!

Any conversations that are currently running within that connected application will now be visible within this dashboard.

Congrats! You’ve now created an application with Flask, React, and Nexmo’s Conversation API. You now can now monitor all sorts of things related to your application’s conversations. We encourage you to continue playing with and exploring this API’s capabilities.

Contributions And Next Steps

The Conversation API is currently in beta and is ever-evolving based on your input and feedback. As always, we are happy to help with any questions in our community slack or [email protected]

Leave a Reply

Your email address will not be published.