Criação de um aplicativo Web com tradução fornecida pelo Microsoft Translator.

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

Antes de começar, você precisará se inscrever na API do Microsoft Translator no Azure. Há várias ofertas diferentes, inclusive uma gratuita, e você pode ver como se inscrever no serviço gratuito, registrar seu aplicativo e obter suas credenciais aqui:

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

O Client ID e o Client Secret que você gerar aqui serão usados na Etapa 4, portanto, anote-os.

Etapa 1. Obtenção do Visual Studio Express 2012 para Web.

A melhor maneira de começar é visitar http://www.asp.net/downloads e selecione o botão "Install Now" na seção "Get Everything with One Simple Install".

Isso iniciará o Web Platform Installer, que instalará o Visual Studio, o ASP.NET, o MVC e uma série de outros recursos que você pode usar para criar sites.

Etapa 2. Criar o aplicativo da Web

Execute o Visual Studio e, no menu Arquivo, selecione "Novo projeto". Você verá uma caixa de diálogo com uma lista de diferentes projetos que estão disponíveis para a criação de sites. 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". Agora, o Visual Studio 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 como isto:

 

 

Etapa 3. Criação da 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, pressionem um botão de tradução e vejam a tradução do texto digitado. Esse tipo de funcionalidade é útil para interagir com seus clientes quando vocês falam idiomas diferentes, por exemplo.

No Solution Explorer, localize a página "About.aspx". Abra-a 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 desta página:

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

<asp:Content runat="servidor" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <hgrupo classe="título">
        <h1><%: Título %>.</h1>
        <h2>Sua página de descrição do aplicativo.</h2>
    </hgrupo>

    <artigo>
        Digite o texto que você gostaria de traduzir:<br />
        <asp:TextBox ID="TextBox1" runat="servidor" Altura="25px" Largura="342px"></asp:TextBox>
        <asp:Botão 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>

    <à parte>
        <h3>Título secundário</h3>
        <p>        
            Use essa área para fornecer informações adicionais.
        </p>
        <ul>
            <li><a runat="servidor" href="~/">Início</a></li>
            <li><a runat="servidor" href="~/About.aspx">Sobre</a></li>
            <li><a runat="servidor" href="~/Contato.aspx">Contato</a></li>
        </ul>
    </à parte>
</asp:Content>

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.

Etapa 4. Escrever código para traduzir o texto do usuário

Na seção anterior, você criou uma interface de usuário básica para tradução de texto. Ela permitiria que o usuário escrevesse algum texto e pressionasse um botão. Nesta seção, você escreverá o código por trás desse botão que traduzirá o texto desejado pelo usuário para o espanhol e o renderizará na página.

Primeiro, você precisará adicionar uma nova classe à sua solução. Chame-a de AdmAccessToken e forneça a ele o seguinte código:

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

espaço de nome Tradutor
{
    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 4 cadeias de caracteres devem corresponder exatamente ao que está aqui, caso contrário, você receberá erros em seu código posteriormente.

Em seguida, no Visual Studio, no Solution Explorer, clique com o botão direito do mouse na pasta "References" e selecione "Add Reference". Use a caixa de diálogo a seguir para adicionar referências a

- System.Runtime.Serialization

- System.XML.Linq

- System.ServiceModel.Web

Na parte superior do código do About.aspx.cs, você verá várias instruções "using". Acrescente o uso de System.Xml.Linq a elas, de modo que fique assim:

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;

espaço de nome Tradutor
{
    público parcial classe About : Page
    {
        protegida vazio Page_Load(objeto sender, EventArgs e)
        {

        }

        protegida vazio Button1_Click(objeto sender, EventArgs e)
        {

        }
    }
}

 

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

string ID do cliente "<Your ClientID>";
string clientSecret = "<Your Client Secret>";
String strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
String strRequestDetails = 
      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-urlencoded";
webRequest.Method = "POST";
byte[] bytes = System.Text.Encoding.ASCII.GetBytes(strRequestDetails);
webRequest.ContentLength = bytes.Length;
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(tipo de(AdmAccessToken));

Token do AdmAccessToken = (AdmAccessToken) 
    (AdmAccessToken)serializer.ReadObject(webResponse.GetResponseStream());

string headerValue = "Portador" + token.access_token;

 

Esse código forma um POST para o serviço de mercado de dados, passando seu ID e segredo e recebendo um objeto JSON de volta. Em seguida, você desserializa esse objeto em um AdmAccessToken. Em seguida, você pode derivar o access_token a partir dele.

Esse token é então adicionado a uma cadeia de caracteres, com o prefixo "Bearer" (não se esqueça do espaço), para criar um valor de cabeçalho que será enviado ao serviço de tradução.

Para chamar o serviço de tradução com esse headerValue e passar o texto do usuário, você usará um 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("Authorization" (Autorização), headerValue);

Resposta do System.Net.WebResponse = nulo;
response = translationWebRequest.GetResponse();
System.IO.Stream stream = response.GetResponseStream();
System.Text.Encoding encode = System.Text.Encoding.GetEncoding("utf-8");

System.IO.StreamReader translatedStream = 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', de modo que o texto digitado pelo usuário pode simplesmente ser derivado dela. Depois disso, é criado um URI para o serviço HTTP do tradutor, e o próprio texto é UrlEncoded e adicionado ao URI.

Observe que o idioma "en" é usado para "From" (ou seja, presumo que você esteja digitando em inglês) e "es" é usado para "To" (ou seja, será traduzido para o espanhol). A lista completa desses códigos para os idiomas suportados está aqui: http://msdn.microsoft.com/en-us/library/hh456380.aspx

O serviço de tradução retorna XML, portanto, o código chama o serviço, obtém a resposta como XML e a decodifica em texto. Em seguida, ele carrega o resultado no 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

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