¿Hablas español? Qu’en est-il en Français? 中文？Ao idnu Tsis tuti tu’iyia rirzyia iw inams.

Whatever your own language be it English, French, Mandarin or Sith, not being able to communicate with others because of a difference in language is a pain. While we don’t yet have protocol droids able to instantly translate 6 million languages (we don’t even have 6 million languages) translation technology, especially translation of text, has come a long way. As a developer I now have a multitude of accurate, free or low cost translation API’s that I can easily integrate into an app.

Wouldn’t it be cool if you’re favorite chat application could make it easier to converse with people who do not use your language by automatically translating your messages into their language? Or better yet, what if you could just build that chat app yourself?

In this post I’ll show you how you can do exactly that. Starting with the IP Messaging Programmable Chat Quickstart, I’ll walk through modifying that app to use Programmable Chat’s webhook capabilities and the Microsoft Translator API to automatically translate chat messages into a new language.

As always, if you are just looking to give the finished code a whirl you can grab it from Github. Otherwise, if you want to build along with me, let’s get going.

Getting Rolling

Before we jump into code we need to make sure we have access to the services we’ll use to build the app, and get the base application downloaded and running.

If you don’t already have one, start by heading over to twilio.com and signing up for a free Twilio account. A free trial account will work just fine for the app we are going to build.

Next pop over to the Microsoft Azure Marketplace, create a new account and then subscribe to the Translation API. Make sure you also register a new application with the Marketplace in order to get your client id and client secret.

With so many translation API’s available why the Microsoft Translator API? If offers support for translating to over 50 different languages and free translation of up to 2 million characters per month, so it’s a great option for our project.

Now that we have access to Twilio and the Microsoft Translation API sorted, we’ll grab the source for the Programmable Chat starter app and get it up and running. The starter app comes in a bunch of different language and framework combinations. Since I am a .NET developer I’ll be starting with the ASP.NET MVC starter app, but feel free to choose the language you are comfortable with and follow along.

Get the starter app up and running by walking through the provided readme. Once it’s running you should have a functional chat application.

The last bit of setup we need is to do is to make sure we can access our new starter app from a public URL. You could deploy the site out to a host like a Azure Website, or use a tool like ngrok to expose your own local web server through a public URL. A developer read about the 6 most awesome reasons to use ngrok and you won’t believe what happened next!

Fantastic! Let’s push on and figure out how to take this base application and get it to translate our chat messages.

The best laid plans

Before we get started mucking with any of the starter app code, let’s take a moment to look at what happens when an Programmable Chat client sends a message to a channel and from a high level how we can use the Status Callback URL to implement translation in our app.

Typically when a message is sent from a client to a channel, Twilio relays that message to all other clients connected to the channel:

If webhook URL is configured for the Message Service Twilio will request that URL whenever that event occurs. In our case we’ll configure the OnMessageAdded webhook which tells Twilio to request a URL whenever it receives a new message, but before it relays it to the channel clients.

The webhook request is useful on a bunch of levels. It lets your server side application know both the incoming message and who sent it. It also lets that application tell Twilio if it should actually relay the new message or not.

In the animation above the example.com site is returning an HTTP 200 OK to Twilio, telling it to continue to process the message as normal. Returning an HTTP 403 Forbidden status code tells Twilio not to relay the original message.

For our application we are going to leverage the OnMessageSend webhook plus the Twilio REST API. When a new message is sent from a client we’ll use that webhook request to grab the message and send it to the Microsoft Translation API for translation. With translated text in hand along with knowledge of who sent the original message and to what channel it was posted, we’ll use the REST API to create a new message. That message will contain the translated text and we’ll post it to the channel from the user who send the original message. Finally, so that Twilio does not post both the original message and the translated message, we’ll return an HTTP 403 from our application.

Now that we have an understanding of how we can leverage webhooks and the Twilio REST API, let’s get started building.