How to add a Voice Assistant to your existing Application
Tags: webdev, tutorial, javascript, ux
Published: 2020-05-22 18:25:48

**How exactly do you add a voice interface to your app?**

If you’ve been doing software development lately, you’ve probably (definitely) heard about the hot new fields of machine learning and artificial intelligence — helping us create smarter applications that can improve themselves. You may have even heard of natural language processing, a specific type of machine learning that deals with understanding human speech: making sense of what we tell each other.

While natural language processing is still a very complex topic, we here at Alan are taking steps to solve it — and make it accessible to everyone. With Alan, anyone can integrate a complete voice interface into their applications without the complexity.

Put broadly, Alan is a complete Conversational Voice AI Platform that lets you Build, Debug, Integrate, and Iterate on a voice assistant for your application.

Previously, you would’ve had to work from the ground-up: learning Python, creating your machine learning model, hosting on the cloud, training Speech Recognition software, and tediously integrating it into your app.

![Alan Platform Diagram](https://dev-to-uploads.s3.amazonaws.com/i/2adqohpdnm0t9lyf3hzq.png)
<figcaption>Alan Platform Diagram</figcaption>


The Alan Platform automates this with its cloud-based infrastructure — incorporating a large number of advanced voice recognition and Spoken Language Understanding technologies. This enables Alan to support complete conversational voice experiences — defined by developers using Alan Studio scripts, written in JavaScript. Alan integrates voice AI into any application with easy to use SDKs.

Voice interfaces in existing applications apply to a variety of use cases — from healthcare, to industrial maintenance, to emergency services. Alan has been used by leading industry professionals in all types of work.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8cngy1ss2axq1iwk4x5u.jpeg)
<figcaption>Alan Use Cases</figcaption>

Unlike Google Assistant and Alexa, Alan integrates with whatever application you’re developing, meaning that you won’t need to change your existing workflows or UI.

In addition, Alan uses Javascript and simple IDEs that are accessible to any developer — foregoing current template-driven approaches in favor of powerful and robust voice dialogues with both voice and visual interactions. With all the heavy-lifting done for you, Alan enables developers to roll out conversational voice and hands-free usage in just a couple of days.

To show you the power of the Alan Platform, we’ll start by building our own simple voice script to define the experience; then, we’ll add it to a mobile application. The mobile application we’ll be using here is the [SAP Deliveries app](https://github.com/alan-ai/alan-sdk-ios/tree/master/examples/SAP_SampleApplication) available on the Alan Github page.

To start, please download and install [Git Large File Storage](https://git-lfs.github.com/) and make sure you have the latest version of Xcode and Swift.

We can download the Alan iOS SDK here:

```
git clone https://github.com/alan-ai/alan-sdk-ios.git
```

The application will be located in the _examples/_ directory and titled _SAP_SampleApplication/_.

Now that we have our mobile app saved on our computer, we can start with the voice script. Remember where this is saved — we’ll need to come back for it later!

##Building Your Alan Application##

First, [sign up](https://studio.alan.app/) and create an Alan Studio account.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9l746crir4d9hdm8kvwg.png)

Next, log in to Alan and you’ll see the project dashboard. Here, we’ll create a sample project for the open source SAP Deliveries Application for iOS (which we downloaded before).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7gdvuhhyi0u2qcwo94gg.png)

Previous models would require thousands of lines of code to host, develop, train, and deploy — Alan automates all these tasks and develops your models for you.

In the project, click the ‘Add Script’ button and select the _SAP_Deliveries_Data_ and the _SAP_Deliveries_Logic_ scripts.

Make sure that the _SAP_Deliveries_Data_ script is listed first.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bnfyau6sd58hyyrxwwh4.png)

To understand the Alan voice scripts, there are two essential features we need to know — intents and entities.

1. Intents — the phrases which we want to recognize — phrases like “what products are available” or “how much does the notebook cost?”
2. Entities — the keywords in these intents. Product names or product suppliers, for example, would be important specific words that are relevant to the functioning of the app.

In these scripts, Alan supports advanced language definition tools that can be used to make intents and entities of any complexity. Entities like lists loaded from databases or fuzzy entities are critical in many different use cases and can be handled by Alan’s advanced dialog management system.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/57z1bobhmnwjo5lo1ojg.png)

Alan also supports UI navigation with voice commands — enabling users to navigate through the different screens in an application and creating a seamless user experience.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g59w0zuhykdz6pm1ugms.gif)

Now that we understand the basic parts of our script, we can move to debugging our voice experience in the application.

##Debugging##

Alan provides a host of features that makes debugging easy and efficient.

First, we can test out this script in the Debug Chat by pressing the Alan button and asking “What products are available?”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2k3g8fqzp7qpokolwlaj.png)

Here, we can see that Alan replies back to the user and sends a corresponding visual update recognizing the Product intent.

Many applications have complex workflows and could have dozens or hundreds of intents. While debugging, Alan lets you see which intents are available in the current context and what has occurred in the current dialog flow — showing the intent that was used. That makes your script easy to debug even with the most complex intents and user flows.

Finally, Alan provides a dedicated platform where we can test our application — Alan Playground. Available on Web, [iOS](https://apps.apple.com/ca/app/alan-playground/id1474478921), and [Android](https://play.google.com/store/apps/details?id=app.alan.playground&hl=en_US), Alan Playground is another option to test your application alongside its visual contexts.

To debug on mobile, start by clicking the QR code button in the Alan Studio Debug Chat, and use Alan Playground on mobile to scan the code. This will scan your Alan Voice Script and open it in the application, which you can then test.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vr44zxddoib7ztd1t5oz.png)

To test on Web, click the Alan Playground icon (Play Button) in the top right corner, and you can test your script on the next screen.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wl1g0gplg75nbsyxh78v.png)

Once we’re done testing, we can create a new version of the SAP Deliveries Script for Production!

##Versioning##

Alan supports versioning for development, testing, and production — helping you easily manage the process of adding the voice experience to your application. Publishing a new version is automated in Alan’s backend and will automatically link to all production devices, without requiring any manual deployment.

Our script here is saved to _Development_ and _Last_ (the only editable version). After debugging, we’ll save our voice script and move it to Production. Let’s name this script “V1” and select “Run on Production”.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mahg40vjotvr0dti4405.png)

To get our production key, navigate to the production section and select the “Embed Code” button.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ocngb6pu1851023es76m.png)

At the top, we see our Alan SDK Key, which we will save to integrate our script into the application. Now that we have our full script setup and tested, we’ll integrate our voice script into the SAP deliveries application.

##Integration##

Remember the Github project we downloaded? The app is a sample application made using the SAP Developer stack.

Opening the project in Xcode, we can see that the Alan library is already integrated for us. In the Alan folder, we can open the UIWindow+Alan.swift file to see the integration completed.

We only need to change this line in func addAlan() to incorporate our Alan production key:

```
let config = AlanConfig(key: *“YOUR_KEY_FROM_ALAN_STUDIO_HERE"*, isButtonDraggable: false)
```

In other projects, integrating the Alan libraries in any Xcode project is simple. We just need to post the following code snippet into our Swift project view controller and add the next code snippet into the viewDidLoad function. Since this is already taken care of in our SAP application, we don’t need to follow these steps.

```
import AlanSDK

/**........**/

fileprivate var button: AlanButton!

/**.........**/

override func viewDidLoad() {
  let config = AlanConfig(key: "YOUR_KEY_FROM_ALAN_STUDIO_HERE")
  self.button = AlanButton(config: config)
  self.button.translatesAutoresizingMaskIntoConstraints = false
  self.view.addSubview(self.button)
  let b = NSLayoutConstraint(item: self.button, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -40)
  let r = NSLayoutConstraint(item: self.button, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1, constant: -20)
  let w = NSLayoutConstraint(item: self.button, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 64)
  let h = NSLayoutConstraint(item: self.button, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 64)
  self.view.addConstraints([b, r, w, h])  
}
```

For more detailed integration or for other platforms like Android and Web, see our documentation [here](https://alan.app/docs/client-api/common-api).

After adding this code, you can run the SAP Deliveries app in an emulator or iOS device and start using Alan!

After testing out a couple features, go to the Home screen and ask _“How do I use this?”_ Alternatively, you can use an emulator to test the Alan button.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xu7n8rv08lbwdfxuw8ul.png)

Unfortunately, in our script, this intent will be unrecognized.

To get a better understanding of fixing unrecognized intents, let’s go to Alan Analytics to see all our user interactions and how Alan has been engaged.

##Iteration##

Alan provides logs and analytics so you can gauge how users interact with your script and prioritize improvements.

Now that we’ve integrated and run the SAP Deliveries App, we can see some analytics data in Alan Studio. We can see the session time, amount of usage, most frequent intents, and more.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/szu30g63use72j3dlssl.png)

In the logs, we see the unrecognized intents as well — phrases that the users have asked which didn’t match any intent in Alan. By reviewing these, we can better understand what users want and update the app and make it more responsive in all use cases.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w51hcxnnhmawv9ilk1cc.png)

Here, we see that the user asked “How do I use this” in the home screen, where it was unrecognized.

Let’s update the code in Alan Studio to support this specific visual context.

```
intent(vProducts, "How do I use this?", p => { 
  p.play(`This is the Products screen. (Here,|) you can (use commands|ask questions) like What products are available?, ` 
         + `How much is the ${rand(project.prods.map(p => p.Name))}?, ` 
         + `and What ${rand(project.cats.map(p => p.CategoryName))} are available?`); 
});
```

Here, we can add this code in the _SAP_Deliveries_Logic_ script on line 190 to help fix this unrecognized intent.

Now, let’s test this in the Alan Debug chat.

First, press “Set visual state” and replace the hint with:

```
{
    “screen”: “Product”
}
```
Then, ask “How do I use this?”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wl19nlcwo3666mcnjrg.png)

It works! Now, we can add a new version of the script and push it to production. This should be available to the user immediately, and reopening the SAP Deliveries app on your mobile device should yield the correct answer to your question.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dvmlh0gtxh3mkmql9uz4.png)

With other voice-enabling software, this type of functionality doesn’t exist. With Alan, you can gauge user feedback and update the intents in your script to make your app more reactive and intelligent.

To take advantage of this full iteration experience, let’s finish off by building some automated test cases for our scripts in the future.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrkpx52vngf4z7ld0ezx.png)

Let’s add some automated tests. Here, we’ve populated our test cases with multiple sample phrases:
1. “What products do you have?”
2. “Show me notebooks.”
3. “What can I do here?”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19au4ykknsieenle4c0r.png)

By pressing the Play button, I can run all of these tests at once, and confirm that my script is working correctly.

Now that we’ve completely engaged with the Alan platform, let’s go over everything that we’ve learned.

##Conclusion##

Only the Alan Platform gives you the ability to create a voice assistant that enhances your application’s existing user experience and make continuous improvements that precisely align with what your users want.

With its simplified format, Alan is accessible to any developer, and does the heavy lifting of creating an accurate language model and managing the dialogues so that you can Build, Debug, and Integrate a voice assistant into your app in just a few days.

Building with Alan is simple — the voice scripts are intuitive, scalable, and powerful. After developing your voice script, you can debug your scripts and take full control of your development-deployment stack. Then, you can integrate Alan into your application without making any changes to your existing workflow or UI. Finally, you can develop automated testing for future scripts and efficient deployment.

With Alan, make your applications hands-free and bring your users the best conversational voice experience.

**_More of a visual learner? Follow along with our overview video [here](https://www.youtube.com/watch?v=wZG1-rmb0TM&feature=youtu.be)!_**

**_For reference, view sample Alan projects and SDKs here: [https://github.com/alan-ai](https://github.com/alan-ai)_**

**_Or look at the [Alan Documentation](http://alan.app/docs) for additional [projects](https://alan.app/docs/usage/tutorials/food-delivery-tutorial)._**