Het creëren van een web-applicatie met vertaling die door Microsoft Translator.

In dit scenario leert u hoe u een webtoepassing maakt die gebruikmaakt van de Microsoft Translator API om tekst te vertalen die door de gebruiker is ingevoerd. U bouwt de pagina met behulp van ASP.NET en de gratis Visual Studio Express 2012 voor web. Als u al een Visual Studio-installatie, zult u nog steeds in staat zijn om de tutorial te volgen, gewoon overslaan stap 1.

Voordat u begint, moet u zich aanmelden voor de Microsoft Translator API in Azure. Er zijn een aantal verschillende aanbiedingen, waaronder een gratis, en u zien hoe aan te melden voor de gratis service, Registreer je app en krijg je referenties hier:

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

De client-ID en client geheim dat u hier genereert zal worden gebruikt in stap 4, dus houd een notitie van hen.

Stap 1. Getting Visual Studio Express 2012 voor web.

De beste manier om te beginnen is om te bezoeken http://www.asp.net/downloads en selecteer de ' nu installeren ' knop in de ' Get alles met een simpele install ' sectie.

Zulks zal barkas naar de zwemvlies Verhoog installateur wie zal installeren zichtbaar Studio, ASP.NET, MVC en te vol tal van andere zoetigheid welk u annuleertekentoepassing voor lichaamsbouw websites.

Stap 2. De webToepassing maken

Start Visual Studio en selecteer ' nieuw project ' in het menu ' bestand '. U ziet een dialoogvenster met een lijst van verschillende projecten die beschikbaar zijn voor u om websites te bouwen met. Selecteer ' Visual C# ' aan de linkerkant, en selecteer vervolgens ' ASP.NET Web Forms Application ' uit de lijst.

Geef uw webToepassing een naam, zoals ' vertaler ', en druk op ' OK '. Visual Studio maakt nu alles wat u nodig hebt om de webToepassing te bouwen en uit te voeren. Druk op F5 om de toepassing te bouwen en uit te voeren en je ziet zoiets als dit:

Stap 3. Het creëren van UI voor tekstvertaling

In deze sectie voegt u besturingselementen toe aan de site waarmee uw eindgebruikers bepaalde tekst kunnen typen, op een knop vertalen drukken en vervolgens de vertaling van de ingevoerde tekst bekijken. Dit type functionaliteit is handig voor interactie met uw klanten wanneer u bijvoorbeeld verschillende talen spreekt.

Zoek in Solution Explorer de pagina ' about. aspx '. Open het in de ontwerper, en je ziet zoiets als dit:

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:

Voor uw gemak, hier is de bron voor deze pagina:

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

<ASP: inhoud RUNAT= "server" ID= "BodyContent" ContentPlaceHolderID= "MainContent">
    <hgroup Klasse= "titel">
        <h1><%: Titel %>.</h1>
        <h2>Uw app beschrijving pagina.</h2>
    </hgroup>

    <Artikel>
        Voer de tekst in die u wilt vertalen:<Br />
        <ASP: TextBox ID= "TextBox1" RUNAT= "server" Hoogte= "25px" Breedte= "342px"></ASP: TextBox>
        <ASP: knop ID= "Button1" RUNAT= "server" Hoogte= "37px" Onclick= "Button1_Click" Tekst= "Vertalen" />
        <Br />
        Uw vertaalde tekst is:<Br />
        <ASP: letterlijk ID= "Literal1" RUNAT= "server"></ASP: letterlijk>
    </Artikel>

    <Opzij>
        <h3>Opzij titel</h3>
        <P>        
            Gebruik dit gebied om aanvullende informatie te verstrekken.
        </P>
        <Ul>
            <Li><A RUNAT= "server" Href="~/">Home</A></Li>
            <Li><A RUNAT= "server" Href= "~/About.aspx">Over</A></Li>
            <Li><A RUNAT= "server" Href= "~/Contact.aspx">Contact</A></Li>
        </Ul>
    </Opzij>
</ASP: inhoud>

Merk op dat in de ontwerper moet u dubbelklikken op de knop om de "Button1_Click" code te genereren. U zult deze code in de volgende stap schrijven.

Stap 4. Code schrijven om gebruikers tekst te vertalen

In het vorige gedeelte hebt u een basisgebruikersinterface voor tekstvertaling gemaakt. Het zou de gebruiker in staat om wat tekst te schrijven, en druk op een knop. In deze sectie, zult u de code achter die knoop schrijven die de gewenste tekst van de gebruiker in het Spaans zal vertalen, en het op de pagina teruggeven.

Eerst moet u een nieuwe klasse toevoegen aan uw oplossing. Noem het AdmAccessToken en geef het de volgende code:

Gebruik Systeem
Gebruik System. Collections. generic;
Gebruik System. LINQ;
Gebruik System. Web;

Naamruimte Translator
{
    Openbare Klasse AdmAccessToken
    {
        Openbare Tekenreeks access_token { get; set; }
        Openbare Tekenreeks token_type { get; set; }
        Openbare Tekenreeks expires_in { get; set; }
        Openbare Tekenreeks scope { get; set; }
    }
}

Merk op dat de namen van de 4 snaren moet overeenkomen met wat hier precies is, of u krijgt fouten in uw code later.

Vervolgens, in Visual Studio, in Solution Explorer, klik met de rechtermuisknop op de ' referenties ' map en selecteer ' Add Reference '. Gebruik dit dialoogvenster dat volgt om verwijzingen toe te voegen naar

– System. runtime. serialisatie

-System. XML. LINQ

-System. ServiceModel. Web

Boven aan je code voor About.aspx.cs zie je een aantal ' using ' statements. Voeg met behulp van System. XML. LINQ om deze, zodat het er zo uitziet:

Gebruik Systeem
Gebruik System. Collections. generic;
Gebruik System. LINQ;
Gebruik System. Web;
Gebruik System. Web. UI;
Gebruik System. Web. UI. webControles;
Gebruik System. XML. LINQ;

Naamruimte Translator
{
    Openbare Gedeeltelijke Klasse About : Page
    {
        Beschermd Void Page_Load (Object afzender, EventArgs e)
        {

}

        Beschermd Void Button1_Click (Object afzender, EventArgs e)
        {

}
    }
}

U zult zien dat de Button1_Click code leeg is. Voeg de volgende code toe. Met deze code krijgt u uw toegangstoken voor de vertaalservice, met behulp van de client-ID en het client geheim dat u eerder hebt gemaakt.

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

Systeem .net. WebRequest webRequest = systeem .net. WebRequest. Create (strTranslatorAccessURI);
WebRequest. content type = "Application/x-www-form-urlencoded";
WebRequest. Method = POST;
Byte[] bytes = systeem. Text. encoding. ASCII. GetBytes (strRequestDetails);
WebRequest. ContentLength = bytes. Lengte
Gebruik (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = Nieuw 
    System. runtime. Serialation. json. DataContractJsonSerializer (typeof(AdmAccessToken));

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

Tekenreeks headerValue = Drager + token. access_token;

Deze code vormt een POST op de datamarket service, het passeren van uw ID en geheim en het krijgen van een JSON object terug. Vervolgens deserialeer je dat object in een AdmAccessToken. U dan afleiden van de access_token van deze.

Dit token wordt vervolgens toegevoegd aan een String, voorafgegaan door "drager" (Vergeet niet de ruimte) om een headerwaarde die zal worden verzonden naar de vertaler service te creëren.

Om de vertaaldienst met deze headerValue dan te roepen, en de tekst van de gebruiker door te geven, zult u code als dit gebruiken:

Tekenreeks txtToTranslate = TextBox1. tekst;
Tekenreeks URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + System. Web. HttpUtility. UrlEncode (txtToTranslate) + "& van = en & tot = es";
Systeem .net. WebRequest translationWebRequest = systeem .net. WebRequest. Create (URI);
translationWebRequest. headers. Add (Vergunning, headerValue);

Systeem .net. webResponsie reactie = Null;
Response = translationWebRequest. GetResponse ();
System. IO. Stream stream = reactie. GetResponseStream ();
System. Text. Encoding coderen = System. Text. encoding. GetEncoding ("UTF-8");

System. IO. StreamReader translatedStream = Nieuw System. IO. StreamReader (stream, coderen);
System. XML. XmlDocument xTranslation = Nieuw System. XML. XmlDocument ();
xTranslation. LoadXml (translatedStream. ReadToEnd ());

Literal1. Text = xTranslation. InnerText;

Het tekstvak heette ' TextBox1 ', zodat de tekst die de gebruiker typt in kan gewoon worden afgeleid van dat. Na dat, een URI om de vertaler HTTP-service is gemaakt, en de tekst zelf is UrlEncoded en toegevoegd aan de URI.

Merk op dat de taal ' en ' wordt gebruikt voor ' from ' (dat wil zeggen, ik neem aan dat je typt in het Engels), en ' es ' wordt gebruikt voor ' to ' (dwz het zal vertalen in het Spaans). De volledige lijst van deze codes voor de ondersteunde talen is hier: http://msdn.microsoft.com/en-us/library/hh456380.aspx

De Translator-service retourneert XML, zodat de code de service aanroept, het antwoord krijgt als XML en vervolgens decodeert in tekst. Het laadt vervolgens het resultaat in de letterlijke die u hebt gemaakt op about. aspx genaamd Literal1.

U het in actie hier zien:

En dat is het! U hebt nu de Microsoft Translator API gebruikt om automatische vertaling toe te voegen aan uw ASP.NET-toepassing.

Samenvatting

In dit scenario zag je hoe je een webApplicatie te bouwen met behulp van ASP.NET en hoe machine vertaling toe te voegen. U gebruikt de Microsoft Translator widget om de vertaling van uw pagina-inhoud te bieden, en je zag hoe de Microsoft Translator API-programma met behulp van C# in om user-generated content te vertalen.