Jerry Nixon @Work: Walkthrough: Adding Text Translation to your Windows 8 App

Jerry Nixon on Windows

Wednesday, October 10, 2012

Walkthrough: Adding Text Translation to your Windows 8 App

imageThe Microsoft Translator is a powerful service that developers can leverage in their Windows 8 apps. It’s core functions are to detect the language of some text. To translate text from one language to another. And, to read text to you – that’s right! The API is hosted on Azure’s Data Marketplace. It has a pricing schedule, including a free tier that developers can leverage to develop with the API.

ADM: Microsoft Translator delivers automatic translation (Machine Translation) of a text into a specified language. It is a state-of-the-art statistical machine translation system translating between any of the supported languages, and powering millions of translations every day. It also provides additional functionality such as detection of the language of a given text. For more technical information about Microsoft Translator, please visit http://api.microsofttranslator.com.

Subscription ScreenshotSetup

There are two steps to using the Microsoft Translator service. The first is to create a subscription to the Microsoft Translator service on the Azure Data Marketplace. An Azure Data Marketplace account is free, and the starter tier of the Microsoft Translator is free. So far, so good. The second step is to register an application with your ADM account. This registration is basically the credential your application will use to log into ADM and leverage the Microsoft Translator service.

Why register your app? If you ever lose control of your app credentials, you can simply delete your app registration – you don’t have to delete your whole ADM account. You can also register more than one app with your ADM account. This let’s you manage at a granular level of credential (which cannot conduct commerce), compared to your personal ADM credentials (which can conduct commerce).

Here’s a video to make it super clear!

In the video above I step through the two-part process to use the Microsoft Translator service. Subscribing to the service itself, and registering your application – creating the credentials your app will use to access the service.

  1. Subscribe here: http://datamarket.azure.com/dataset/bing/microsofttranslator
  2. Register here: https://datamarket.azure.com/applications/register

Implementation

So, I use two helpers in this demo. The first is my DelegateCommand. This it the command implementation for MVVM; I use this to create the TranslateCommand in my ViewModel. The second is my TranslatorHelper. This handles the oauth to fetch the ADM access token and properly implements the DetectAsync(), TranslateAsync(), and SpeakAsync() methods.

  1. Get my DelegateCommand: http://codepaste.net/ho9s5a
  2. Get my TranslatorHelper: http://codepaste.net/hgrb91

Here’s a video to show a simple implementation!

In the video above, I create a simple demo app. Don’t be mislead, a demo like this is far from a polished application – missing error handling and so much more. But it’s a great demonstration to show how easily you can incorporate sophisticated functionality in your Windows 8 app.

  1. API reference: http://msdn.microsoft.com/en-us/library/ff512435.aspx
  2. Service Reference: http://api.microsofttranslator.com/V2/Soap.svc

The MediaElement

The <MediaElement /> element is a handy element to show video and play audio in your XAML application. This is what I use to play the audio of the spoken text. If you would like to learn more about the MediaElement you can review the QuickStart here.

QuickStart: To play audio and video media in your Windows Store app using C++, C#, or Visual Basic, use the MediaElement class. The MediaElement object exposes properties and methods for playing back media. It is the responsibility of the programmer to create the event handlers which enable this functionality. For example, if you wanted to expose the ability to start the media in your application, you could create a Button and in the Button event handler you would call Play to start the media.

The Demo XAML

The whole demo only has four lines of XAML. This is because the bulk of the logic is rightfully in the ViewModel. This also means that I will be able to test my ViewModel and not worry about complications and UI dependencies if it was in the code behind. Check it out:

XAML Code

The Demo Code

Other than the property definitions, the few lines below represent the entire functionality of the demo. Most of this abbreviation is because of XAML’s native binding ability. But, to be fair, a lot of the cleanliness of the code is because of my TranslatorHelper that encapsulates the bulk of logic. In either case, it’s a dramatic demonstration of how simply the service can be included in your app.

ViewModel Code

In the code above, the core logic is in the Execute of the TranslateCommand. This DelegateCommand is bound to the <Button /> that, when clicked, invokes the Execute delegate. And stepping through it, we setup the TranslatorHelper, detect the language of the input string, translate the input string to French, and then fetch the URL that speaks the resulting text. It’s super cool.

Conclusion

The Microsoft Translator service is a powerful service available to developers to add significant functionality to their Windows 8 applications. The service, hosted in the Azure Data Marketplace, has other APIs, too! There’s an Odata API and a REST API that opens it to even more potential client implementations. Either way, this is far too cool to not investigate more.

More resources:

  1. Azure Data Marketplace: https://datamarket.azure.com/
  2. Translator Dev Center: http://api.microsofttranslator.com
  3. Translator Service: http://datamarket.azure.com/dataset/bing/microsofttranslator
  4. SOAP Reference: http://go.microsoft.com/?linkid=9671507
  5. REST Reference: http://go.microsoft.com/?linkid=9671505
  6. AJAX Reference: http://go.microsoft.com/?linkid=9671506
  7. API reference: http://msdn.microsoft.com/en-us/library/ff512435.aspx
  8. Service Reference: http://api.microsofttranslator.com/V2/Soap.svc
  9. DelegateCommand: http://codepaste.net/ho9s5a
  10. TranslatorHelper: http://codepaste.net/hgrb91
  11. Bing Translator: http://www.bing.com/translator

Best of luck!