Création d'une application Web avec traduction fournie par Microsoft Translator.

Dans cette procédure pas à pas, vous allez apprendre à créer une application Web qui utilise l'API Microsoft Translator pour traduire du texte qui a été entré par l'utilisateur. Vous allez créer la page à l'aide de ASP.NET et de la version gratuite de Visual Studio Express 2012 pour le Web. Si vous avez déjà une installation Visual Studio, vous serez toujours en mesure de suivre le tutoriel, il suffit de sauter l'étape 1.

Avant de commencer, vous devez vous inscrire à l'API Microsoft Translator dans Azure. Il existe un certain nombre d'offres différentes, y compris un libre, et vous pouvez voir comment vous inscrire pour le service gratuit, enregistrer votre application et obtenir vos informations d'identification ici:

http://blogs.msdn.com/b/translation/p/gettingstarted1.aspx

L'ID client et le secret client que vous générez ici seront utilisés à l'étape 4, donc gardez une note d'eux.

Étape 1. Obtenir Visual Studio Express 2012 pour le Web.

La meilleure façon de commencer est de visiter http://www.asp.net/downloads et sélectionnez le bouton «Installer maintenant» dans la section «tout obtenir avec une simple installation».

Cela lancera le programme d'installation de la plateforme Web qui installera Visual Studio, ASP.NET, MVC et toute une série d'autres goodies que vous pouvez utiliser pour créer des sites Web.

Étape 2. Création de l'application Web

Exécutez Visual Studio et dans le menu fichier, sélectionnez «Nouveau projet». Vous verrez une boîte de dialogue contenant une liste de différents projets disponibles pour la création de sites Web. Sélectionnez «Visual C#» sur la gauche, puis sélectionnez «ASP.NET Web Forms application» dans la liste.

Donnez un nom à votre application Web, par exemple «traducteur», puis appuyez sur «OK». Visual Studio créera maintenant tout ce dont vous avez besoin pour générer et exécuter l'application Web. Appuyez sur F5 pour générer et exécuter l'application et vous verrez quelque chose comme ceci:

Étape 3. Création de l'interface utilisateur pour la traduction de texte

Dans cette section, vous allez ajouter des contrôles au site qui permettent à vos utilisateurs finaux de taper du texte, d'appuyer sur un bouton traduire, puis de voir la traduction du texte qu'ils ont entré. Ce type de fonctionnalité est utile pour interagir avec vos clients lorsque vous parlez différentes langues, par exemple.

Dans l'Explorateur de solutions, recherchez la page'about. aspx'. Ouvrez-le dans le concepteur, et vous verrez quelque chose comme ceci:

Delete the 3 <p> tags that say ‘Use this area to provide additional information’, and replace with some controls to provide a basic translation UI, like this:

Pour votre commodité, voici la source de cette page:

<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Translator.About" %>

<ASP: contenu Runat= "serveur" ID= "BodyContent" ContentPlaceHolderID= "MainContent">
    <hgroup Classe= "titre">
        <h1><%: Titre %>.</h1>
        <h2>Page de description de votre application.</h2>
    </hgroup>

    <Article>
        Saisissez le texte que vous souhaitez traduire:<Br />
        <ASP: TextBox ID= "TextBox1" Runat= "serveur" Hauteur= "25px" Largeur= "342px"></ASP: TextBox>
        <ASP: bouton ID= " Runat= "serveur" Hauteur= "37px" Onclick= "Button1_Click" Texte= "Traduire" />
        <Br />
        Votre texte traduit est:<Br />
        <ASP: littéral ID= "Literal1" Runat= "serveur"></ASP: littéral>
    </Article>

    <Côté>
        <h3>En dehors du titre</h3>
        <P>        
            Utilisez cette zone pour fournir des informations supplémentaires.
        </P>
        <Ul>
            <Li><Un Runat= "serveur" Href="~/">Accueil</Un></Li>
            <Li><Un Runat= "serveur" Href= "~/About.aspx">Sur</Un></Li>
            <Li><Un Runat= "serveur" Href= "~/Contact.aspx">Contact</Un></Li>
        </Ul>
    </Côté>
</ASP: contenu>

Notez que dans le concepteur, vous devez double-cliquer sur le bouton pour générer le code "Button1_Click". Vous écrirez ce code à l'étape suivante.

Étape 4. Écriture de code pour traduire le texte de l'utilisateur

Dans la section précédente, vous avez créé une interface utilisateur de base pour la traduction de texte. Il permettrait à l'utilisateur d'écrire du texte, et appuyez sur un bouton. Dans cette section, vous écrirez le code derrière ce bouton qui traduira le texte désiré de l'utilisateur en espagnol et le restituera sur la page.

Tout d'abord, vous devez ajouter une nouvelle classe à votre solution. Appelez-le De l'AdmAccessToken et lui donner le code suivant:

Utilisant Système
Utilisant System. Collections. Generic;
Utilisant System. Linq;
Utilisant System. Web;

Noms Translator
{
    Public Classe AdmAccessToken
    {
        Public String access_token { get; set; }
        Public String token_type { get; set; }
        Public String expires_in { get; set; }
        Public String scope { get; set; }
    }
}

Notez que les noms des 4 chaînes doivent correspondre à ce qui est exactement ici, ou vous obtiendrez des erreurs dans votre code ultérieurement.

Ensuite, dans Visual Studio, dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier «Références» et sélectionnez «Ajouter une référence». Utilisez cette boîte de dialogue qui suit pour ajouter des références à

– System. Runtime. Serialization

– System. XML. Linq

– System. ServiceModel. Web

En haut de votre code pour About.aspx.cs, vous verrez un certain nombre d'instructions'Using'. Ajouter à l'aide de System. Xml. Linq à ceux-ci, de sorte qu'il ressemble à ceci:

Utilisant Système
Utilisant System. Collections. Generic;
Utilisant System. Linq;
Utilisant System. Web;
Utilisant System. Web. UI;
Utilisant System. Web. UI. WebControls;
Utilisant System. Xml. Linq;

Noms Translator
{
    Public Partielle Classe About : Page
    {
        Protégé Vide Page_Load (Objet expéditeur, EventArgs e)
        {

}

        Protégé Vide Button1_Click (Objet expéditeur, EventArgs e)
        {

}
    }
}

Vous verrez que le code Button1_Click est vide. Ajoutez le code suivant. Ce code obtiendrez votre jeton d'accès pour le service de traducteur, à l'aide de l'ID client et du secret client que vous avez créé précédemment.

String clientID = "<Your ClientID>";
String clientSecret = "<Your Client Secret>";
Dim strTranslatorAccessURI As String = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
Dim strRequestDetails As String = 
      String. Format"grant_type=client_credentials&client_id={0}&client_secret={1} &scope=http://api.microsofttranslator.com", HttpUtility. UrlEncode (clientID), HttpUtility. UrlEncode (clientSecret));

System .net. WebRequest webRequest = System .net. WebRequest. Create (strTranslatorAccessURI);
webRequest. ContentType = "application/x-www-form-UrlEncodé";
webRequest. Method = POST;
Octet[] bytes = System. Text. Encoding. ASCII. GetBytes (strRequestDetails);
webRequest. ContentLength = octets. Longueur
Utilisant (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = Nouveau 
    System. Runtime. Serialization. JSON. DataContractJsonSerializer (Typeof(AdmAccessToken));

AdmAccessToken Token = (AdmAccessToken) sérialiseur. ReadObject (webResponse. GetResponseStream ());

String headerValue = Porteur + Token. access_token;

Ce code forme un POST au service de marché de données, en passant votre ID et secret et obtenir un objet JSON de retour. Vous désérialisez ensuite cet objet dans un AdmAccessToken. Vous pouvez ensuite dériver le access_token de cette.

Ce jeton est ensuite ajouté à une chaîne, préfixée avec «porteur» (n'oubliez pas l'espace) pour créer une valeur d'en-tête qui sera envoyée au service de traducteur.

Pour ensuite appeler le service de traducteur avec ce headerValue, et passer le texte de l'utilisateur, vous utiliserez le code comme ceci:

String txtToTranslate = TextBox1. Text;
String URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + System. Web. HttpUtility. UrlEncode (txtToTranslate) + "& from = en & to = es";
System .net. WebRequest translationWebRequest = System .net. WebRequest. Create (Uri);
translationWebRequest. Headers. Add (Autorisation, headerValue);

Réponse de System .net. WebResponse = Null;
réponse = translationWebRequest. GetResponse ();
Stream = réponse de System. IO. Stream =. GetResponseStream ();
System. Text. Encoding Encoder = System. Text. Encoding. GetEncoding ("UTF-8");

System. IO. StreamReader translatedStream = Nouveau System. IO. StreamReader (Stream, encode);
System. Xml. XmlDocument xTranslation = Nouveau System. Xml. XmlDocument ();
xTranslation. LoadXml (translatedStream. ReadToEnd ());

Literal1. Text = xTranslation. InnerText;

La zone de texte a été appelée «TextBox1» de sorte que le texte de l'utilisateur tapé dans peut simplement être dérivé de cela. Après cela, un URI au service HTTP de traducteur est créé, et le texte lui-même est UrlEncodé et ajouté à l'URI.

Notez que la langue'en'est utilisée pour'from' (i.e., je suppose que vous dactylographiez en anglais), et'es'est utilisé pour'to' (c.-à-d. il se traduira en espagnol). La liste complète de ces codes pour les langues prises en charge est ici: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Le service de traducteur retourne XML, de sorte que le code appelle le service, obtient la réponse au format XML, puis le décode en texte. Il charge ensuite le résultat dans le littéral que vous avez créé sur about. aspx appelé Literal1.

Vous pouvez le voir en action ici:

Et c'est tout! Vous avez maintenant utilisé l'API Microsoft Translator pour ajouter la traduction automatique à votre application ASP.NET.

Résumé

Dans cette procédure pas à pas, vous avez vu comment créer une application Web à l'aide de ASP.NET et comment y ajouter la traduction automatique. Vous avez utilisé le widget traducteur Microsoft pour fournir la traduction de votre contenu de page, et vous avez vu comment programmer l'API Microsoft Translator à l'aide de C# afin de traduire le contenu généré par l'utilisateur.