Skapa ett webb program med översättning från Microsoft Translator.

Bokförd på Den 19 december 2012vid Microsoft Translator

Skapa ett webb program med översättning från Microsoft Translator.

I den här genom gången får du lära dig hur du skapar ett webb program som använder Microsoft Translator API för att översätta text som indata av användaren. Du kommer att bygga sidan med ASP.NET och den fria Visual Studio Express 2012 för webben. Om du redan har en Visual Studio-installation kan du fortfarande följa hand ledningen, hoppa över steg 1.

Innan du börjar måste du registrera dig för Microsoft Translator API i Azure. Det finns ett antal olika erbjudanden, inklusive en gratis en, och du kan se hur du registrerar dig för den kostnads fria tjänsten, registrera din app och få dina autentiseringsuppgifter här:

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

Klient-ID och klient hemlighet som du skapar här kommer att användas i steg 4, så håll en anteckning om dem.

Steg 1. Hämta Visual Studio Express 2012 för webben.

Det bästa sättet att komma igång är att besöka http://www.asp.net/downloads och välj "Installera nu"-knappen i "få allt med en enkel installation" avsnitt.

Detta kommer att lansera web platform Installer som kommer att installera Visual Studio, ASP.NET, MVC och en hel mängd andra godsaker som du kan använda för att bygga webbplatser.

Steg 2. Skapa webb programmet

Kör Visual Studio och välj "nytt projekt" på Arkiv-menyn. Du ser en dialog ruta med en lista över olika projekt som är tillgängliga för dig att bygga webbplatser med. Välj "Visual C#" till vänster och välj sedan "ASP.NET webb formulär Application" från listan.

Ge ditt webb program ett namn, till exempel "Translator", och tryck på "OK". Visual Studio kommer nu att skapa allt du behöver för att bygga och köra webb programmet. Tryck på F5 för att skapa och köra programmet så ser du ungefär så här:

Steg 3. Skapa UI för text översättning

I det här avsnittet lägger du till kontroller på webbplatsen som gör att slutanvändarna kan skriva text, trycka på en översättnings knapp och sedan se översättningen av texten som de angav. Denna typ av funktionalitet är användbar för att interagera med dina kunder när du talar olika språk, till exempel.

Leta reda på sidan about. aspx i Solution Explorer. Öppna den i designern så ser du ungefär så här:

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:

För din bekvämlighet, här är källan för denna sida:

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

<ASP: innehåll Runat= "server" ID= "BodyContent" ContentPlaceHolderID= "MainContent">
    <hgroup Klass= "titel">
        <h1><%: Titel %>.</h1>
        <h2>Appens beskrivnings sida.</h2>
    </hgroup>

    <Artikel>
        Ange den text som du vill översätta:<Br />
        <ASP: text ruta ID= "Textruta1" Runat= "server" Höjd= "25px" Bredd= "342px"></ASP: text ruta>
        <ASP: knapp ID= "Button1" Runat= "server" Höjd= "37px" Onclick= "Button1_Click" Text= "Översätt" />
        <Br />
        Din översatta text är:<Br />
        <ASP: bokstavlig ID= "Literal1" Runat= "server"></ASP: bokstavlig>
    </Artikel>

    <Åt sidan>
        <h3>Bortsett från titel</h3>
        <P>        
            Använd det här området för att ange ytterligare information.
        </P>
        <Ul>
            <Li><A Runat= "server" Href="~/">Hem</A></Li>
            <Li><A Runat= "server" Href= "~/About.aspx">Om</A></Li>
            <Li><A Runat= "server" Href= "~/Contact.aspx">Kontakt</A></Li>
        </Ul>
    </Åt sidan>
</ASP: innehåll>

Observera att i designern bör du dubbelklicka på knappen för att generera "Button1_Click"-koden. Du kommer att skriva den här koden i nästa steg.

Steg 4. Skriva kod för att översätta användar text

I föregående avsnitt skapade du ett grundläggande användar gränssnitt för text översättning. Det skulle tillåta användaren att skriva lite text, och tryck på en knapp. I det här avsnittet ska du skriva koden bakom den knappen som översätter användarens önskade text till spanska och återge den på sidan.

Först måste du lägga till en ny klass i din lösning. Kalla det AdmAccessToken och ge den följande kod:

Använda System
Använda System. Collections. generic;
Använda System. LINQ;
Använda System. Web;

Namnområde översättare
{
    Offentliga Klass AdmAccessToken (på 1999)
    {
        Offentliga Sträng access_token { get; set; }
        Offentliga Sträng token_type { get; set; }
        Offentliga Sträng expires_in { get; set; }
        Offentliga Sträng scope { get; set; }
    }
}

Observera att namnen på de 4 strängarna ska matcha det som är här exakt, eller så får du fel i koden senare.

Nästa, inom Visual Studio, i Solution Explorer, högerklicka på "Referenser" mappen och välj "Lägg till referens". Använd den här dialog rutan som följer för att lägga till referenser till

– System. Runtime. serialization

– System. XML. LINQ

– System. ServiceModel. Web

Högst upp i koden för About.aspx.cs visas ett antal "using"-satser. Lägg till med system. XML. LINQ till dessa, så att det ser ut så här:

Använda System
Använda System. Collections. generic;
Använda System. LINQ;
Använda System. Web;
Använda System. Web. UI;
Använda System. Web. UI. WebControls;
Använda System. XML. LINQ;

Namnområde översättare
{
    Offentliga Partiell Klass About : Page
    {
        Skyddade Void Page_Load (Objekt avsändare, EventArgs e)
        {

}

        Skyddade Void Button1_Click (Objekt avsändare, EventArgs e)
        {

}
    }
}

Du ser att Button1_Click-koden är tom. Lägg till följande kod i den. Den här koden får din åtkomsttoken för översättar tjänsten med hjälp av klient-ID och klient hemlighet som du skapade tidigare.

Sträng clientID = "<Your ClientID>";
Sträng clientSecret = "<Your Client Secret>";
Sträng strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
Sträng strRequestDetails = 
      Sträng. 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 Webbbegäran = system .net. WebRequest. Create (strTranslatorAccessURI);
webRequest. ContentType = "ansökan/x-www-form-urlencoded";
webRequest. Method = POST;
byte[] bytes = system. text. Encoding. ASCII. GetBytes (strRequestDetails);
webRequest. ContentLength = byte. Längd
Använda (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = Nya 
    System. Runtime. serialization. JSON. DataContractJsonSerializer (typeof(AdmAccessToken));

AdmAccessToken-token = (AdmAccessToken) serializer. ReadObject (webResponse. GetResponseStream ());

Sträng headerValue = Bärare + token. access_token;

Den här koden utgör ett POST till tjänsten data marknaden, skicka ditt ID och hemlighet och få ett JSON-objekt tillbaka. Du deserialisera sedan objektet till en AdmAccessToken. Du kan sedan härleda access_token från detta.

Den här token läggs sedan till en sträng som föregås av "bärare" (Glöm inte utrymmet) för att skapa ett huvud värde som skickas till översättar tjänsten.

För att sedan anropa översättar tjänsten med detta headerValue, och skicka användarens text, använder du koden så här:

Sträng txtToTranslate = Textruta1. text;
Sträng URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + System. Web. HttpUtility. UrlEncode (txtToTranslate) + "& from = en & till = es";
System .net. WebRequest translationWebRequest = system .net. WebRequest. Create (URI);
translationWebRequest. headers. Add (Tillstånd, headerValue);

System .net. WebResponse svar = Null;
svar = translationWebRequest. GetResponse ();
System. IO. Stream ström = svar. GetResponseStream ();
System. text. Encoding koda = system. text. Encoding. get encoding ("UTF-8");

System. IO. StreamReader translatedStream = Nya System. IO. StreamReader (ström, koda);
System. XML. XmlDocument xTranslation = Nya System. XML. XmlDocument ();
xTranslation. LoadXml (translatedStream. ReadToEnd ());

Literal1. text = xTranslation. InnerText;

Text rutan kallades ' Textruta1 ' så texten som användaren skrev in kan helt enkelt härledas från det. Därefter skapas en URI till översättarens HTTP-tjänst, och själva texten är UrlEncoded och läggs till i URI: n.

Observera att språket "en" används för "från" (dvs, jag antar att du skriver på engelska), och "es" används för "to" (dvs. det kommer att översätta till spanska). Den fullständiga listan över dessa koder för de språk som stöds är här: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Översättar tjänsten returnerar XML, så koden anropar tjänsten, hämtar svaret som XML och avkodar det till text. Sedan läses resultatet in i literal som du skapade på about. aspx som kallas Literal1.

Du kan se det i aktion här:

Och det är det! Du har nu använt Microsoft Translator API för att lägga till maskin översättning till ditt ASP.NET-program.

Sammanfattning

I den här genom gången såg du hur du skapar ett webb program med hjälp av ASP.NET och hur du lägger till maskin översättning till den. Du använde widgeten Microsoft Translator för att tillhandahålla översättningen av sidans innehåll, och du såg hur du programmerar Microsoft Translator API med C# för att översätta användargenererat innehåll.

Microsoft Translator blogg