Criando um aplicativo da Web com a tradução fornecida pelo Microsoft Translator.

Posted on 19 de dezembro de 2012por Microsoft Translator

Criando um aplicativo da Web com a tradução fornecida pelo Microsoft Translator.

Neste Walkthrough, você aprenderá como criar um aplicativo da Web que usa a API do Microsoft Translator para traduzir o texto que foi entrada pelo usuário. Você construirá a página usando ASP.NET e o livre Visual Studio Express 2012 para Web. Se você já tiver uma instalação do Visual Studio, você ainda poderá seguir o tutorial, basta pular a etapa 1.

Antes de começar, você precisará se inscrever para a API do Microsoft Translator no Azure. Há uma série de ofertas diferentes, incluindo um livre, e você pode ver como se inscrever para o serviço gratuito, registrar seu aplicativo e obter suas credenciais aqui:

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

A ID do cliente e o segredo do cliente que você gerar aqui serão usados na etapa 4, portanto, mantenha uma anotação deles.

Passo 1. Obtendo o Visual Studio Express 2012 para Web.

A melhor maneira de começar é visitar http://www.asp.net/downloads e selecione o botão ' instalar agora ' na seção ' obter tudo com uma instalação simples '.

Isso lançará o Web Platform Installer que instalará o Visual Studio, ASP.NET, MVC e um host inteiro de outras guloseimas que você pode usar para criar sites.

Passo 2. Criar o aplicativo da Web

Execute o Visual Studio e no menu arquivo, selecione ' novo projeto '. Você verá uma caixa de diálogo contendo uma lista de projetos diferentes que estão disponíveis para você criar sites com. Selecione ' Visual C# ' à esquerda e, em seguida, selecione ' ASP.NET Web Forms Application ' na lista.

Dê um nome ao seu aplicativo Web, como ' Translator ', e pressione ' OK '. O Visual Studio agora criará tudo o que você precisa para compilar e executar o aplicativo Web. Pressione F5 para compilar e executar o aplicativo e você verá algo parecido com isto:

Passo 3. Criando interface do usuário para tradução de texto

Nesta seção, você adicionará controles ao site que permitem que os usuários finais digitem algum texto, pressione um botão translate e, em seguida, veja a tradução do texto que eles entraram. Esse tipo de funcionalidade é útil para interagir com seus clientes quando você fala idiomas diferentes, por exemplo.

No Solution Explorer, localize a página ' about. aspx '. Abra-o no designer, e você verá algo parecido com isto:

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 sua conveniência, aqui está a fonte para esta página:

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

<ASP: conteúdo Runat= "servidor" ID= "BodyContent" Contentplaceholderid= "MainContent">
    <hgroup Classe= "título">
        <h1><%: Título %>.</h1>
        <h2>Sua página de descrição do aplicativo.</h2>
    </hgroup>

    <Artigo>
        Digite o texto que você gostaria de traduzir:<Br />
        <ASP: TextBox ID= "TextBox1" Runat= "servidor" Altura= "25px" Largura= "342px"></ASP: TextBox>
        <ASP: Button ID= "Button1" Runat= "servidor" Altura= "37px" Onclick= "Button1_Click" Texto= "Traduzir" />
        <Br />
        Seu texto traduzido é:<Br />
        <ASP: literal ID= "Literal1" Runat= "servidor"></ASP: literal>
    </Artigo>

    <Lado>
        <h3>Além do título</h3>
        <P>        
            Use esta área para fornecer informações adicionais.
        </P>
        <Ul>
            <Li><Um Runat= "servidor" Href="~/">Casa</Um></Li>
            <Li><Um Runat= "servidor" Href= "~/About.aspx">Sobre</Um></Li>
            <Li><Um Runat= "servidor" Href= "~/Contact.aspx">Contato</Um></Li>
        </Ul>
    </Lado>
</ASP: conteúdo>

Observe que, no designer, você deve clicar duas vezes no botão para gerar o código "Button1_Click". Você escreverá esse código na próxima etapa.

Passo 4. Escrevendo código para traduzir o texto do usuário

Na seção anterior, você criou uma interface do usuário básica para conversão de texto. Permitiria que o usuário escrevesse algum texto, e pressionaria um botão. Nesta seção, você escreverá o código por trás desse botão que irá traduzir o texto desejado do usuário para o espanhol e renderizá-lo na página.

Primeiro, você precisará adicionar uma nova classe à sua solução. Chame-o. O AdmAccessToken e dar-lhe o seguinte código:

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

Namespace Tradutora
{
    Público Classe AdmAccessToken
    {
        Público String access_token { get; set; }
        Público String token_type { get; set; }
        Público String expires_in { get; set; }
        Público String scope { get; set; }
    }
}

Observe que os nomes das cadeias de caracteres 4 devem corresponder exatamente ao que está aqui, ou você receberá erros em seu código mais tarde.

Em seguida, no Visual Studio, no Solution Explorer, clique com o botão direito do mouse na pasta ' References ' e selecione ' Adicionar referência '. Use esta caixa de diálogo que se segue para adicionar referências a

– System. Runtime. Serialization

– System. XML. Linq

– System. ServiceModel. Web

Na parte superior do seu código para About.aspx.cs, você verá um número de instruções ' Using '. Adicione usando System. xml. LINQ a esses, para que ele se pareça com isso:

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;

Namespace Tradutora
{
    Público Parcial Classe About : Page
    {
        Protegido Vazio Page_Load (Objeto remetente, EventArgs e)
        {

        }

        Protegido Vazio Button1_Click (Objeto remetente, EventArgs e)
        {

        }
    }
}

Você verá que o código Button1_Click está vazio. Adicione o seguinte código a ele. Esse código receberá seu token de acesso para o serviço de tradutor, usando a ID do cliente e o segredo do cliente que você criou anteriormente.

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. 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 = System .net. WebRequest. Create (strTranslatorAccessURI);
webRequest. ContentType = "application/x-www-formulário-urlencoded";
webRequest. Method = POST;
Byte[] bytes = System. Text. Encoding. ASCII. GetBytes (strRequestDetails);
webRequest. ContentLength = bytes. Comprimento
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 = Novo 
    System. Runtime. Serialization. JSON. DataContractJsonSerializer (Typeof(AdmAccessToken));

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

String Propriedade headerValue = Portador + token. access_token;

Esse código forma uma postagem no serviço de mercado de dados, passando seu ID e segredo e obtendo um objeto JSON de volta. Em seguida, desserializar esse objeto em um AdmAccessToken. Em seguida, você pode derivar o access_token deste.

Esse token, em seguida, é adicionado a uma seqüência de caracteres, prefixado com "portador" (não se esqueça o espaço) para criar um valor de cabeçalho que será enviado para o serviço de tradutor.

Para chamar o serviço de tradutor com este headerValue, e passar o texto do usuário, você usará o código como este:

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 (Autorização, headerValue);

Resposta do System .net. WebResponse = Null;
Response = translationWebRequest. GetResponse ();
System. IO. Stream Stream = Response. Método GetResponseStream ();
System. Text. Encoding codificar = System. Text. Encoding. GetEncoding ("UTF-8");

Dim translatedStream as System. IO. StreamReader = Novo System. IO. StreamReader (Stream, Encode);
System. xml. XmlDocument xTranslation = Novo System. xml. XmlDocument ();
xTranslation. LoadXml (translatedStream. ReadToEnd ());

Literal1. Text = xTranslation. InnerText;

A caixa de texto foi chamada de ' TextBox1 ' para que o texto digitado no usuário pode simplesmente ser derivado de que. Depois disso, um URI para o serviço HTTP do tradutor é criado e o próprio texto é UrlEncoded e adicionado ao URI.

Note que o idioma ' en ' é usado para ' de ' (ou seja, eu estou supondo que você está digitando em inglês), e ' es ' é usado para ' to ' (ou seja, ele irá traduzir em espanhol). A lista completa destes códigos para os idiomas suportados está aqui: http://msdn.microsoft.com/en-us/library/hh456380.aspx

O serviço de Tradutor retorna XML, portanto, o código chama o serviço, obtém a resposta como XML e, em seguida, decodifica-o em texto. Em seguida, carrega o resultado para o literal que você criou em About. aspx chamado Literal1.

Você pode vê-lo em ação aqui:

E é isso! Você já usou a API do Microsoft Translator para adicionar a tradução automática ao seu aplicativo ASP.NET.

Resumo

Nesta explicação, você viu como criar um aplicativo da Web usando ASP.NET e como adicionar a tradução de máquina para ele. Você usou o Microsoft Translator widget para fornecer a tradução do conteúdo da página, e você viu como programar a API do Microsoft Translator usando C# para traduzir o conteúdo gerado pelo usuário.

Microsoft Tradutor blog