Skep 'n webtoepassing met vertaling verskaf deur Microsoft Translator.

Gepos op Desember 19, 2012Deur Microsoft Translator

Skep 'n webtoepassing met vertaling verskaf deur Microsoft Translator.

In hierdie deurloop leer u hoe u 'n webtoepassing kan skep wat die Microsoft Translator API gebruik om teks wat deur die gebruiker ingevoer is, te vertaal. Jy sal die bladsy bou met behulp van ASP.NET en die gratis Visual Studio Express 2012 vir Web. As jy reeds 'n Visual Studio-installasie het, sal jy steeds die tutoriaal kan volg, slaan net stap 1 oor.

Voordat u begin, moet u aanmeld vir die Microsoft Translator API in Azure. Daar is 'n aantal verskillende aanbiedinge, insluitend 'n gratis een, en u kan sien hoe u vir die gratis diens kan aanmeld, u app kan registreer en u geloofsbriewe hier kan kry:

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

Die kliënt-ID en kliëntgeheim wat u hier genereer, sal in stap 4 gebruik word, dus let daarop.

Stap 1. Kry Visual Studio Express 2012 vir web.

Die beste manier om te begin is om te besoek http://www.asp.net/downloads en kies die 'Installeer nou'-knoppie in die afdeling 'Kry alles met een eenvoudige installasie'.

Dit sal die webplatforminstalleerder bekendstel wat Visual Studio, ASP.NET, MVC en 'n hele aantal ander lekkernye sal installeer wat u kan gebruik om webwerwe te bou.

Stap 2. Skep die webtoepassing

Begin Visual Studio en kies 'Nuwe projek' in die File-menu. Jy sal 'n dialoog sien wat 'n lys bevat van verskillende projekte wat beskikbaar is vir jou om webwerwe mee te bou. Kies 'Visual C#' aan die linkerkant en kies dan 'ASP.NET Web Forms Application' uit die lys.

Gee u webtoepassing 'n naam, soos 'Translator', en druk 'OK'. Visual Studio sal nou alles skep wat u nodig het om die webtoepassing te bou en uit te voer. Druk F5 om die toepassing te bou en uit te voer, en u sal so iets sien:

Stap 3. Skep UI vir teksvertaling

In hierdie afdeling voeg u kontroles op die webwerf waarmee u eindgebruikers teks kan intik, op 'n vertaalknoppie druk en dan die vertaling van die teks wat hulle ingevoer het, sien. Hierdie tipe funksionaliteit is nuttig om met u kliënte te kommunikeer as u byvoorbeeld verskillende tale praat.

Soek die bladsy 'Oor.aspx' in Solution explorer. Maak dit oop in die ontwerper, en jy sal so iets sien:

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:

Vir u gerief, hier is die bron vir hierdie bladsy:

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

<asp: Inhoud Runat="bediener" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <hgroup Klas="titel">
        <h1><%:Titel %>.</h1>
        <h2>Jou programbeskrywingsbladsy.</h2>
    </hgroup>

    <Artikel>
        Voer die teks in wat u wil vertaal:<Br />
        <asp:TextBox ID="TextBox1" Runat="bediener" Hoogte="25px" Breedte="342px"></asp:TextBox>
        <asp: knoppie ID="Knoppie1" Runat="bediener" Hoogte="37px" OnClick="Button1_Click" Teks="Vertaal" />
        <Br />
        Jou vertaalde teks is:<Br />
        <asp:Letterlik ID="Letterlik1" Runat="bediener"></asp:Letterlik>
    </Artikel>

    <Eenkant>
        <h3>Afgesien van titel</h3>
        <p>        
            Gebruik hierdie area om bykomende inligting te verskaf.
        </p>
        <Ul>
            <Li><'n Runat="bediener" href="~/">Huis</'n></Li>
            <Li><'n Runat="bediener" href="~/Oor.aspx">Oor</'n></Li>
            <Li><'n Runat="bediener" href="~/Kontak.aspx">Kontak</'n></Li>
        </Ul>
    </Eenkant>
</asp: Inhoud>

Let daarop dat u in die ontwerper op die knoppie moet dubbelklik om die "Button1_Click" -kode te genereer. U sal hierdie kode in die volgende stap skryf.

Stap 4. Skryf kode om gebruikersteks te vertaal

In die vorige afdeling het u 'n basiese UI vir teksvertaling geskep. Dit sal die gebruiker toelaat om teks te skryf en op 'n knoppie te druk. In hierdie afdeling skryf u die kode agter die knoppie wat die gebruiker se gewenste teks in Spaans sal vertaal en op die bladsy weergee.

Eerstens moet u 'n nuwe klas by u oplossing voeg. Noem dit AdmAccessToken en gee dit die volgende kode:

Gebruik Stelsel;
Gebruik System.Collections.Generic;
Gebruik System.Linq;
Gebruik System.Web;

Naamruimte Vertaler
{
    Openbare Klas AdmAccessToken
    {
        Openbare tou access_token { get; set; }
        Openbare tou token_type { get; set; }
        Openbare tou expires_in { get; set; }
        Openbare tou scope { get; set; }
    }
}

Let daarop dat die name van die 4 snare moet ooreenstem met wat presies hier is, anders kry u later foute in u kode.

Volgende, binne Visual Studio, in Solution Explorer, klik met die rechtermuisknop op die 'Verwysings'-lêergids en kies 'Voeg verwysing by'. Gebruik hierdie dialoog wat volg om verwysings by te voeg

- System.Runtime.Serialization

- Stelsel.XML.Linq

- System.ServiceModel.Web

Bo-aan jou kode vir About.aspx.cs, sal jy 'n aantal 'gebruik'-stellings sien. Voeg die gebruik van System.Xml.Linq hierby, sodat dit so lyk:

Gebruik Stelsel;
Gebruik System.Collections.Generic;
Gebruik System.Linq;
Gebruik System.Web;
Gebruik System.Web.UI;
Gebruik System.Web.UI.WebControls;
Gebruik System.Xml.Linq;

Naamruimte Vertaler
{
    Openbare Gedeeltelike Klas About : Page
    {
        Beskerm Leemte Page_Load(Objek sender, EventArgs e)
        {

}

        Beskerm Leemte Button1_Click(Objek sender, EventArgs e)
        {

}
    }
}

U sal sien dat die Button1_Click kode leeg is. Voeg die volgende kode daarby. Hierdie kode kry u toegangstoken vir die vertalersdiens met behulp van die kliënt-ID en kliëntgeheim wat u vroeër geskep het.

tou clientID = "<Your ClientID>";
tou clientSecret = "<Your Client Secret>";
String strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
String strRequestDetails = 
      tou. Formaat("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 = "aansoek/x-www-form-urlencoded";
webRequest.Method = "POS";
Greep[] grepe = System.Text.Encoding.ASCII.GetBytes (strRequestDetails);
webRequest.ContentLength = grepe. 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 = Nuwe 
    System.Runtime.Serialization.Json.DataContractJsonSerializer(tipe(AdmAccessToken));

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

tou headerValue = "Draer " + token.access_token;

Hierdie kode vorm 'n POS aan die datamarkdiens, gee u ID en geheim deur en kry 'n JSON-voorwerp terug. Jy deserialiseer dan daardie voorwerp in 'n AdmAccessToken. U kan dan die access_token hieruit aflei.

Hierdie teken word dan by 'n string gevoeg, voorafgegaan met "Draer" (moenie die ruimte vergeet nie) om 'n kopwaarde te skep wat na die vertalersdiens gestuur sal word.

Om dan die vertalerdiens met hierdie headerValue te skakel en die teks van die gebruiker deur te gee, gebruik u kode soos volg:

tou txtToTranslate = TextBox1.Text;
tou URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text=" + 
     System.Web.HttpUtility.UrlEncode(txtToTranslate) + "&van=en&to=es";
System.Net.WebRequest translationWebRequest = System.Net.WebRequest.Create (uri);
vertalingWebRequest.Headers.Add("Magtiging", headerValue);

System.Net.WebResponse-reaksie = Nul;
reaksie = vertalingWebRequest.GetResponse ();
System.IO.Stream stream = reaksie. GetResponseStream ();
System.Text.Encoding encode = System.Text.Encoding.GetEncoding ("UTF-8");

System.IO.StreamReader vertaalStream = Nuwe System.IO.StreamReader (stroom, kodeer);
System.Xml.XmlDocument xTranslation = Nuwe System.Xml.XmlDocument ();
xTranslation.LoadXml (vertaalStream.ReadToEnd ());

letterlik1.Teks = xTranslation.InnerText;

Die tekskassie is 'TextBox1' genoem, sodat die teks wat die gebruiker ingetik het, eenvoudig daaruit afgelei kan word. Daarna word 'n URI vir die vertaler HTTP-diens geskep, en die teks self word UrlEncoded en by die URI gevoeg.

Let daarop dat die taal 'en' gebruik word vir 'Van' (dit wil sê, ek neem aan dat u in Engels tik), en 'es' word gebruik vir 'To' (dit wil sê dit sal in Spaans vertaal word). Die volledige lys van hierdie kodes vir die ondersteunde tale is hier: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Die vertalerdiens stuur XML terug, sodat die kode die diens bel, die antwoord as XML kry en dit dan in teks dekodeer. Dit laai dan die resultaat in die Letterlike wat jy geskep het op About.aspx genaamd Literal1.

U kan dit hier in aksie sien:

En dis dit! U het nou die Microsoft Translator API gebruik om masjienvertaling by u ASP.NET toepassing te voeg.

Opsomming

In hierdie deurbraak het u gesien hoe u 'n webtoepassing kan bou met behulp van ASP.NET en hoe u masjienvertaling daarby kan voeg. Jy het die Microsoft Translator Widget gebruik om die vertaling van jou bladsyinhoud te verskaf, en jy het gesien hoe om die Microsoft Translator API met C# te programmeer om gebruikergegenereerde inhoud te vertaal.

Microsoft Vertaler Blog