Creación de una aplicación web con traducción proporcionada por Microsoft Translator.

En este tutorial, aprenderá a crear una aplicación web que utiliza la API de Microsoft Translator para traducir el texto que fue introducido por el usuario. Compilará la página mediante ASP.NET y la versión gratuita de Visual Studio Express 2012 para Web. Si ya tiene una instalación de Visual Studio, seguirá siendo capaz de seguir el tutorial, simplemente salte el paso 1.

Antes de comenzar, deberás registrarte en Microsoft Translator API en Azure. Hay una serie de ofertas diferentes, incluyendo una gratuita, y se puede ver cómo registrarse para el servicio gratuito, registrar su aplicación y obtener sus credenciales aquí:

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

El ID de cliente y el secreto de cliente que generas aquí se utilizarán en el paso 4, así que Mantén una nota de ellos.

Paso 1. Obtener Visual Studio Express 2012 para Web.

La mejor manera de empezar es visitar http://www.asp.net/downloads y seleccione el botón "instalar ahora" en la sección "obtener todo con una instalación simple".

Esto lanzará el instalador de plataforma web que instalará Visual Studio, ASP.NET, MVC y un montón de otras golosinas que puede utilizar para crear sitios Web.

Paso 2. Crear la aplicación Web

Ejecute Visual Studio y desde el menú Archivo, seleccione ' nuevo proyecto '. Verá un cuadro de diálogo que contiene una lista de diferentes proyectos que están disponibles para crear sitios Web. Seleccione ' Visual C# ' a la izquierda y, a continuación, seleccione ' aplicación de formularios Web Forms ASP.NET ' en la lista.

Dé a su aplicación web un nombre, como ' Translator ', y pulse ' OK '. Visual Studio creará ahora todo lo que necesita para compilar y ejecutar la aplicación Web. Presione F5 para compilar y ejecutar la aplicación y verá algo como esto:

Paso 3. Creación de interfaz de usuario para traducción de texto

En esta sección, agregará controles al sitio que permiten a los usuarios finales escribir algún texto, presionar un botón traducir y, a continuación, ver la traducción del texto que han introducido. Este tipo de funcionalidad es útil para interactuar con sus clientes cuando habla diferentes idiomas, por ejemplo.

En el explorador de soluciones, busque la página ' about. aspx '. Ábralo en el diseñador, y verá algo como esto:

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:

Para su conveniencia, aquí está la fuente para esta página:

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

<ASP: contenido Runat= "servidor" ID= "BodyContent" ContentPlaceHolderID= "MainContent">
    <hgroup Clase= "título">
        <h1><%: Título %>.</h1>
        <h2>La página de descripción de la aplicación.</h2>
    </hgroup>

    <Artículo>
        Introduce el texto que quieras traducir:<Br />
        <ASP: TextBox ID= "TextBox1" Runat= "servidor" Altura= "25px" Ancho= "342px"></ASP: TextBox>
        <ASP: botón ID= "El" Runat= "servidor" Altura= "37px" Onclick= "Button1_Click" Texto= "Traducir" />
        <Br />
        El texto traducido es:<Br />
        <ASP: literal ID= "Literal1" Runat= "servidor"></ASP: literal>
    </Artículo>

    <Aparte>
        <h3>Título aparte</h3>
        <P>        
            Utilice esta área para proporcionar información adicional.
        </P>
        <Ul>
            <Li><Un Runat= "servidor" Href="~/">Casa</Un></Li>
            <Li><Un Runat= "servidor" Href= "~/About.aspx">acerca de</Un></Li>
            <Li><Un Runat= "servidor" Href= "~/Contact.aspx">Contacto</Un></Li>
        </Ul>
    </Aparte>
</ASP: contenido>

Tenga en cuenta que en el diseñador debe hacer doble clic en el botón para generar el código "Button1_Click". Escribirá este código en el siguiente paso.

Paso 4. Escribir código para traducir texto de usuario

En la sección anterior, creó una interfaz de usuario básica para la traducción de texto. Permitiría al usuario escribir algo de texto y presionar un botón. En esta sección, escribirá el código detrás de ese botón que traducirá el texto deseado del usuario al español y lo representará en la página.

En primer lugar, tendrá que agregar una nueva clase a la solución. Llámeme AdmAccessToken y darle el siguiente código:

Usando Sistema
Usando System. Collections. Generic;
Usando System. Linq;
Usando System. Web;

Nombres Traductor
{
    Público Clase AdmAccessToken
    {
        Público Cadena access_token { get; set; }
        Público Cadena token_type { get; set; }
        Público Cadena expires_in { get; set; }
        Público Cadena scope { get; set; }
    }
}

Tenga en cuenta que los nombres de las 4 cadenas deben coincidir con lo que está aquí exactamente, o obtendrá errores en el código más adelante.

A continuación, en Visual Studio, en el explorador de soluciones, haga clic con el botón derecho en la carpeta ' referencias ' y seleccione ' Agregar referencia '. Utilice este cuadro de diálogo que sigue para agregar referencias a

– System. Runtime. Serialization

– System. XML. Linq

– System. ServiceModel. Web

En la parte superior de su código para About.aspx.cs, verá una serie de instrucciones de ' Using '. Agregue usando System. Xml. Linq a estos, de modo que se vea así:

Usando Sistema
Usando System. Collections. Generic;
Usando System. Linq;
Usando System. Web;
Usando System. Web. UI;
Usando System. Web. UI. WebControls;
Usando System. Xml. Linq;

Nombres Traductor
{
    Público Parcial Clase About : Page
    {
        Protegido Vacío Page_Load (Objeto sender, EventArgs e)
        {

        }

        Protegido Vacío Button1_Click (Objeto sender, EventArgs e)
        {

        }
    }
}

Verá que el código Button1_Click está vacío. Agregue el código siguiente a él. Este código obtendrá su token de acceso para el servicio de traductor, utilizando el identificador de cliente y el secreto de cliente que creó anteriormente.

Cadena clientID = "<Your ClientID>";
Cadena clientSecret = "<Your Client Secret>";
String strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
String strRequestDetails = 
      Cadena. Formato"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 = sistema .net. WebRequest. Create (strTranslatorAccessURI);
webRequest. ContentType = "application/x-www-forma-urlencoded";
webRequest. Method = POST;
Byte[] bytes = System. Text. Encoding. ASCII. GetBytes (strRequestDetails);
webRequest. ContentLength = bytes. Longitud
Usando (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

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

AdmAccessToken token = (AdmAccessToken) serializador. ReadObject (webResponse. GetResponseStream ());

Cadena headerValue = Portador + token. access_token;

Este código forma un POST para el servicio de mercado de datos, pasando su ID y secreto y obteniendo un objeto JSON de nuevo. A continuación, deserializa ese objeto en un AdmAccessToken. A continuación, puede derivar el access_token de esto.

A continuación, este token se agrega a una cadena, con el prefijo "portador" (no olvide el espacio) para crear un valor de encabezado que se enviará al servicio de traductor.

Para llamar al servicio de traductor con este headerValue y pasar el texto del usuario, usará código como este:

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

Respuesta del sistema .net. WebResponse = Null;
Response = translationWebRequest. GetResponse ();
Flujo de sistema. IO. Stream = respuesta. GetResponseStream ();
System. Text. Encoding codifica = System. Text. Encoding. GetEncoding ("UTF-8");

System. IO. StreamReader translatedStream = Nuevo System. IO. StreamReader (secuencia, codificar);
System. Xml. XmlDocument xTranslation = Nuevo System. Xml. XmlDocument ();
xTranslation. LoadXml (translatedStream. ReadToEnd ());

Literal1. Text = xTranslation. InnerText;

El cuadro de texto se llamó ' TextBox1 ' por lo que el texto que el usuario ha escrito puede simplemente derivarse de eso. Después de eso, se crea un URI al servicio HTTP del traductor y el texto en sí es UrlEncoded y se agrega al URI.

Tenga en cuenta que el idioma ' en ' se utiliza para ' de ' (es decir, estoy asumiendo que está escribiendo en inglés), y ' es ' se utiliza para ' to ' (es decir, se traducirá en Español). La lista completa de estos códigos para los idiomas soportados está aquí: http://msdn.microsoft.com/en-us/library/hh456380.aspx

El servicio de traductor devuelve XML, por lo que el código llama al servicio, obtiene la respuesta como XML y, a continuación, lo decodifica en texto. A continuación, carga el resultado en el literal que creó en about. aspx denominado Literal1.

Puedes verlo en acción aquí:

¡ Y eso es todo! Ahora ha utilizado la API de Microsoft Translator para agregar la traducción automática a la aplicación ASP.NET.

Resumen

En este tutorial, ha visto cómo crear una aplicación Web mediante ASP.NET y cómo agregarle la traducción automática. Utilizó el Microsoft Translator widget para proporcionar la traducción del contenido de la página y vio cómo programar la API de Microsoft Translator mediante C# con el fin de traducir el contenido generado por el usuario.