Building a Web and Voice App ecosystem (Amazon Alexa, Google Home, React, Node)

Voice Apps (Voiceflow)

The introduction of voice platforms like Google Home & Amazon Alexa have changed households across the world. Unlike the entirely futuristic technologies like Virtual Reality & Augmented Reality, these are things which already exist in people’s homes. It is just their potential which has not yet been completely utilised.

In this article, we will particularly look at how you can build a complete ecosystem with Voice apps where you have an interface for Alexa & Google along with your usual web interface. Effectively, the user has a choice to interact with your system either via Alexa, Google Home or the traditional input fields in a browser. The amazing thing about this is that we use the same backend architecture & APIs to serve all of the interfaces!

Building this application across platforms will help us understand how an app can be made for both the voice platforms & the web at the same time. We will do this by consuming & using the same API on both platforms for our app.

Let’s get started then!

What are we building

We will build a superhero search app that lets you search for your favourite superhero and fetch details on the same. We will be using the Open Source Superhero API for this purpose.

The completed app will look like this:

Backend for the superhero search app

As mentioned earlier, we will be using the Open Source Superhero API to fetch details about the superhero(es) being searched.

Additionally, I have added a wrapper on top of this API which can then be used as a serverless backend or deployed to a server. You can find the complete code in this gist.

Creating the Voice App using Voiceflow

VoiceFlow is a great tool that helps you create voice apps in a visual way. It is extremely easy to understand & use and allows you to create apps that can be deployed to both the Amazon Alex and Google Home ecosystem.

I have written a complete step-by-step tutorial for building our superhero search app using Voiceflow in this freeCodeCamp article.

Web Frontend Tutorial

Libraries Used:

axios for API requests & create-react-app for React.

We have written extensive tutorials for new and veteran developers about React Hooks. You can find them here and here.

1. Setting Up

Replace

import './App.css';

with

import './index.css';

to use some good inbuilt styles.

Delete the content inside function App() and replace it with:

Voice app ecosystem using Voiceflow, React and Node

We are preventing a refresh on form submission by using e.preventDefault();

2. API Calls

To make calls to the API, we will be using the axios library.

Install it by running the following command on the CLI.

npm add axios

Import axios into your app by adding this piece of code to the top:

import axios from 'axios';

Call the API and log the data to check whether it’s working

Click the search button & if something like this is logged, it’s working:

Javascript console log

3. Adding Search Functionality

We loop over the JSON data and check the name field of each element.

We do this by changing the function like:

We see that by searching the exact name as in the json, we get the result returned. Otherwise, the logic doesn’t detect a match.

We have used Levenshtein distance check similarity of input & detected string. You can read more about it on this StackOverflow link. By adding this to our code, it looks like this:

We will use the similarity code while checking in our map function:

By using trial & error for checking value of similarity for spiderman as an input string, we see a value ≤ .75 returns spiderwoman as a result, while ≥ .8 returns spiderman correctly.

Voice Apps using Voiceflow Screenshot 1

By observing the recieved JSON, we see that there is a fullName field under biography :

...
"biography": {
      "fullName": "Bruce Wayne",
      "alterEgos": "No alter egos found.",
      "aliases": [
        "Insider",
        "Matches Malone"
      ],
...

We use it to implement Name search into our code too.

4. Displaying Received Data

Now, we will display the superhero data that we receive. We use the useState hook to set the data when it is received.

Set hero as the foundElement, whenever found.

Voice Apps using Voiceflow Screenshot 2

Create a component to display more data about the hero based on the JSON.

Add conditional rendering based on whether the hero exists.

Finally, the file looks like this:

The complete app is deployed here, and you can find the Github repo here.

What Next?

You would have already figured out that you can now build a voice app extension to your existing web apps or vice-a-versa. In one of our past articles, we built a fully functional group chat application with React Hooks. You can now add voice functionality to it using Voiceflow that can enable users to send and read messages!

Here are a few useful links specific to Voice apps that you may want to explore:

https://getvoiceflow.com

https://developer.amazon.com/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html

https://learn.voiceflow.com

That’s all for now! Watch out this space for more exciting articles.

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Sign Up for Our Newsletters

Receive insights and detailed articles across technology, design, remote working and freelancing.

You May Also Like