Zu Hauptinhalt springen
Translator
Diese Seite wurde automatisch vom maschinellen Übersetzungsdienst von Microsoft Translator übersetzt. Weitere Informationen

Microsoft Translator Blog

Erstellen einer Webanwendung mit Übersetzung, die von Microsoft Translator bereitgestellt wird.

Erstellen einer Webanwendung mit Übersetzung, die von Microsoft Translator bereitgestellt wird.

In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie eine Webanwendung erstellen, die die Microsoft Translator API verwendet, um Texte zu übersetzen, die vom Benutzer eingegeben wurden. Sie erstellen die Seite mit ASP.NET und dem kostenlosen Visual Studio Express 2012 for Web. Wenn Sie bereits eine Visual Studio-Installation haben, können Sie dem Tutorial trotzdem folgen, überspringen Sie einfach Schritt 1.

Bevor Sie beginnen können, müssen Sie sich für die Microsoft Translator API in Azure anmelden. Es gibt eine Reihe von verschiedenen Angeboten, darunter ein kostenloses, und Sie können sehen, wie Sie sich für den kostenlosen Service anmelden, Ihre App registrieren und Ihre Zugangsdaten hier erhalten:

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

Die Kunden-ID und das Kundengeheimnis, die Sie hier generieren, werden in Schritt 4 verwendet, also notieren Sie sie.

Schritt 1. Erhalten von Visual Studio Express 2012 für Web.

Der beste Weg, um anzufangen, ist ein Besuch bei http://www.asp.net/downloads und wählen Sie die Schaltfläche "Jetzt installieren" im Abschnitt "Alles mit einer einfachen Installation holen".

clip_image001

Dadurch wird der Web Platform Installer gestartet, der Visual Studio, ASP.NET, MVC und eine ganze Reihe anderer Goodies installiert, die Sie zum Erstellen von Websites verwenden können.

Schritt 2. Erstellen der Web Application

Starten Sie Visual Studio und wählen Sie im Menü Datei die Option'Neues Projekt'. Es erscheint ein Dialogfeld mit einer Liste verschiedener Projekte, mit denen Sie Websites erstellen können. Wählen Sie links'Visual C#' und dann'ASP.NET Web Forms Application' aus der Liste.

clip_image003

Geben Sie Ihrer Web Application einen Namen, z.B. "Übersetzer", und drücken Sie "OK". Visual Studio erstellt nun alles, was Sie für die Erstellung und Ausführung der Webanwendung benötigen. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen, und Sie werden so etwas sehen:

clip_image005

 

 

Schritt 3. Benutzeroberfläche für die Textübersetzung erstellen

In diesem Abschnitt fügen Sie der Website Steuerelemente hinzu, die es Ihren Endbenutzern ermöglichen, einen Text einzugeben, eine Schaltfläche zum Übersetzen zu drücken und dann die Übersetzung des von ihnen eingegebenen Textes anzuzeigen. Diese Art von Funktionalität ist nützlich für die Interaktion mit Ihren Kunden, wenn Sie z.B. verschiedene Sprachen sprechen.

Im Solution Explorer finden Sie die Seite'About.aspx'. Öffne es im Designer, und du wirst so etwas sehen:

clip_image016

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:

clip_image018

Zu Ihrer Bequemlichkeit finden Sie hier die Quelle für diese Seite:

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

<asp:Inhalt Runat="server" ID="BodyContent" (Körperinhalt) InhaltPlatzhalterID="MainContent" (Hauptinhalt)>
    <hgroup Klasse="title">
        <h1><%: Titel %>.</h1>
        <h2>Deine App-Beschreibungsseite.</h2>
    </hgroup>

    <Artikel>
        Geben Sie den Text ein, den Sie übersetzen möchten:<br />
        <asp:TextBox ID="TextBox1". Runat="server" Höhe="25px" Breite="342px"></asp:TextBox>
        <asp:Taste ID="Taste1". Runat="server" Höhe="37px" OnClick="Button1_Click" ="Button1_Click". Text="Übersetzen" />
        <br />
        Ihr übersetzter Text ist:<br />
        <asp:Literal ID="Literal1". Runat="server"></asp:Literal>
    </Artikel>

    <beiseite>
        <h3>Neben Titel</h3>
        <p>        
            Verwenden Sie diesen Bereich, um zusätzliche Informationen bereitzustellen.
        </p>
        <ul>
            <li><a Runat="server" href="~/">Startseite</a></li>
            <li><a Runat="server" href="~/About.aspx">Über</a></li>
            <li><a Runat="server" href="~/Contact.aspx">Kontakt</a></li>
        </ul>
    </beiseite>
</asp:Inhalt>

Beachten Sie, dass Sie im Designer auf die Schaltfläche doppelklicken sollten, um den Code "Button1_Click" zu generieren. Diesen Code schreiben Sie im nächsten Schritt.

Schritt 4. Schreiben von Code zur Übersetzung von Benutzertexten

Im vorherigen Abschnitt haben Sie eine einfache Benutzeroberfläche für die Textübersetzung erstellt. Es würde dem Benutzer erlauben, einen Text zu schreiben und eine Taste zu drücken. In diesem Abschnitt schreiben Sie den Code hinter dieser Schaltfläche, der den gewünschten Text des Benutzers ins Spanische übersetzt und auf der Seite wiedergibt.

Zuerst müssen Sie Ihrer Lösung eine neue Klasse hinzufügen. Nennen wir es AdmAccessToken und gib ihm den folgenden Code:

benutzend System;
benutzend System.Collections.Generic;
benutzend System.Linq;
benutzend System.Web;

Namensraum Translator
{
    Öffentlichkeit Klasse AdmAccessToken
    {
        Öffentlichkeit Zeichenkette access_token { get; set; }
        Öffentlichkeit Zeichenkette token_type { get; set; }
        Öffentlichkeit Zeichenkette expires_in { get; set; }
        Öffentlichkeit Zeichenkette scope { get; set; }
    }
}

 

Beachten Sie, dass die Namen der 4 Zeichenketten mit dem übereinstimmen sollten, was hier genau ist, sonst erhalten Sie später Fehler in Ihrem Code.

Klicken Sie anschließend in Visual Studio im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Referenzen" und wählen Sie "Referenz hinzufügen". Verwenden Sie diesen Dialog, der im Folgenden beschrieben wird, um Referenzen hinzuzufügen zu

- System-Laufzeit-Serialisierung

- System.XML.Linq

- System.ServiceModell.Web

Am Anfang Ihres Codes für About.aspx.cs sehen Sie eine Reihe von 'using' Anweisungen. Füge mit System.Xml.Linq zu diesen hinzu, so dass sie so aussehen:

benutzend System;
benutzend System.Collections.Generic;
benutzend System.Linq;
benutzend System.Web;
benutzend System.Web.UI;
benutzend System.Web.UI.WebControls;
benutzend System.Xml.Linq;

Namensraum Translator
{
    Öffentlichkeit teilweise Klasse About : Page
    {
        geschützt Lücke Page_Load(Objekt Absender, EventArgs e)
        {

}

        geschützt Lücke Button1_Click(()Objekt Absender, EventArgs e)
        {

}
    }
}

 

Du wirst sehen, dass der Button1_Click-Code leer ist. Füge den folgenden Code hinzu. Dieser Code wird Ihr Zugriffstoken für den Übersetzungsdienst unter Verwendung der Kunden-ID und des Kundengeheimnisses, die Sie zuvor erstellt haben, erhalten.

Zeichenkette clientID = "<Your ClientID>";
Zeichenkette clientSecret = clientSecret "<Your Client Secret>";
Zeichenkette strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
Zeichenkette strRequestDetails = 
      Zeichenkette.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-wwww-form-urlencoded";
webRequest.methode = "POST";
Byte[] Bytes = System.Text.Encoding.ASCII.GetBytes(strRequestDetails);
webRequest.ContentLength = Bytes.Length;
benutzend (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = neu 
    System.Runtime.Serialization.Json.DataContractJsonSerializer(Art von(AdmAccessToken));

AdmAccessToken-Token Token = 
    (AdmAccessToken)Serialisierer.ReadObject(webResponse.GetResponseStream());

Zeichenkette headerValue = "Träger" + token.access_token;

 

Dieser Code bildet einen POST an den Datenmarktdienst, übergibt Ihre ID und Ihr Secret und erhält ein JSON-Objekt zurück. Anschließend deserialisieren Sie dieses Objekt in einen AdmAccessToken. Daraus kann dann der access_token abgeleitet werden.

Dieses Token wird dann zu einer Zeichenkette hinzugefügt, der "Bearer" vorangestellt ist (vergessen Sie nicht das Leerzeichen), um einen Header-Wert zu erstellen, der an den Übersetzerdienst gesendet wird.

Um dann den Übersetzungsdienst mit diesem headerValue aufzurufen und den Text des Benutzers zu übergeben, verwenden Sie folgenden Code:

Zeichenkette txtToTranslate = TextBox1.Text;
Zeichenkette uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text=" + 
     System.Web.HttpUtility.UrlEncode(txtToTranslate) + "&from=de&to=es";
System.Net.WebRequest ÜbersetzungWebRequest = System.Net.WebRequest.Create(uri);
translationWebRequest.Headers.Add( Add(" Autorisierung", headerValue);

System.Net.WebResponse Antwort = Antwort Null;
Antwort = translationWebRequest.GetResponse();
System.IO.Stream Stream = response.GetResponseStream();
System.Text.Encoding encodieren = System.Text.Encoding.GetEncoding("utf-8");

System.IO.StreamReader ÜbersetztStream = neu System.IO.StreamReader(stream, encode);
System.Xml.Xml.XmlDokument xTranslation = Übersetzung neu System.Xml.Xml.XmlDocument();
xTranslation.LoadXml(translStream.ReadToEnd());

Literal1.Text = xTranslation.InnerText;

 

 

Das Textfeld hieß'TextBox1', so dass der vom Benutzer eingegebene Text einfach daraus abgeleitet werden kann. Danach wird eine URI für den HTTP-Service des Übersetzers erstellt, und der Text selbst wird UrlEncodiert und dem URI hinzugefügt.

Beachten Sie, dass die Sprache'en' für'From' verwendet wird (d.h. ich nehme an, dass Sie auf Englisch tippen), und'es' für'To' (d.h. sie wird ins Spanische übersetzt). Die vollständige Liste dieser Codes für die unterstützten Sprachen finden Sie hier: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Der Übersetzungsdienst gibt XML zurück, so dass der Code den Dienst aufruft, die Antwort als XML erhält und sie dann in Text dekodiert. Es lädt dann das Ergebnis in das Literal, das Sie auf About.aspx mit dem Namen Literal1 erstellt haben.

Sie können es hier in Aktion sehen:

clip_image019

Und das ist es! Sie haben nun die Microsoft Translator-API verwendet, um Ihrer ASP.NET-Anwendung eine maschinelle Übersetzung hinzuzufügen.

Zusammenfassung

In dieser exemplarischen Vorgehensweise haben Sie gesehen, wie Sie eine Webanwendung mit ASP.NET erstellen und wie Sie ihr eine maschinelle Übersetzung hinzufügen können. Sie haben das Microsoft Translator Widget verwendet, um die Übersetzung Ihrer Seiteninhalte bereitzustellen, und Sie haben gesehen, wie Sie die Microsoft Translator API mit C# programmieren, um benutzergenerierte Inhalte zu übersetzen.