Создание веб-приложения с переводом, предоставляемым переводчиком Microsoft.

Опубликовано на 19 декабря 2012 г.около Microsoft Research

Создание веб-приложения с переводом, предоставляемым переводчиком Microsoft.

В этом поШаговом руководстве вы узнаете, как создать веб-приложение, использующее API Microsoft Translator для перевода текста, введенного пользователем. Вы будете строить страницу с помощью ASP.NET и бесплатный Visual Studio Express 2012 для Web. Если у вас уже есть установка Visual Studio, вы все равно сможете следовать учебник, просто пропустить шаг 1.

Перед началом необходимо зарегистрироваться в API-ИНТЕРФЕЙСе Microsoft Translator в Azure. Есть несколько различных предложений, в том числе бесплатно, и вы можете увидеть, как зарегистрироваться для бесплатного обслуживания, зарегистрировать свое приложение и получить учетные данные здесь:

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

Идентификатор клиента и секрет клиента, которые вы создаете здесь, будут использоваться в шаге 4, так что имейте заметку о них.

Шаг 1. Получение Visual Studio Express 2012 для веб-узла.

Лучший способ начать это посетить http://www.asp.net/downloads и выберите кнопку "установить сейчас" в разделе "получить все с помощью одной простой установки".

Это запустит установщик веб-платформы, который установит Visual Studio, ASP.NET, MVC и целый ряд других полезностей, которые можно использовать для создания веб-сайтов.

Шаг 2. Создание веб-приложения

Запустите Visual Studio и в меню Файл выберите команду "создать проект". Появится диалоговое окно, содержащее список различных проектов, доступных для создания веб-сайтов. Выберите "Visual C#" слева, а затем выберите "ASP.NET Web Forms Application" из списка.

ПриСвойте веб-приложению имя, например «транслятор», и нажмите «OK». Теперь Visual Studio создаст все необходимое для создания и запуска веб-приложения. Нажмите клавишу F5, чтобы построить и запустить приложение, и вы увидите нечто подобное:

Шаг 3. Создание ПОЛЬЗОВАТЕЛЬСКОГО интерфейса для перевода текста

В этом разделе вы добавите на сайт элементы управления, которые позволят вашим конечным пользователям вводить некоторый текст, нажать кнопку перевода, а затем увидеть перевод введенного текста. Этот тип функциональности полезен для взаимодействия с вашими клиентами, когда вы говорите на разных языках, например.

В обозревателе решений найдите страницу "About. aspx". Откройте его в конструкторе, и вы увидите что-то вроде этого:

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:

Для вашего удобства, вот источник для этой страницы:

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

<ASP: содержимое runat= "сервер" ID= "Бодиконтент" Контентплацехолдерид= "MainContent">
    <hgroup Класса= "название">
        <h1><%: Название %>.</h1>
        <h2>Страница описания приложения.</h2>
    </hgroup>

    <Статьи>
        Введите текст, который вы хотите перевести:<Br />
        <ASP: текстовое поле ID= "TextBox1" runat= "сервер" Высота= "25px" Ширина= "342px"></ASP: текстовое поле>
        <Кнопка ASP: ID= "Button1" runat= "сервер" Высота= "37px" Onclick= "Button1_Click" Текст= "Перевести" />
        <Br />
        Переведенный текст:<Br />
        <ASP: литерал ID= "Literal1" runat= "сервер"></ASP: литерал>
    </Статьи>

    <Сторону>
        <h3>В сторону название</h3>
        <P>        
            Используйте эту область для предоставления дополнительной информации.
        </P>
        <Ул>
            <Литий><в runat= "сервер" Href="~/">Дома</в></Литий>
            <Литий><в runat= "сервер" Href= "~/Абаут.аспкс">О</в></Литий>
            <Литий><в runat= "сервер" Href= "~/Контакт.аспкс">Контакт</в></Литий>
        </Ул>
    </Сторону>
</ASP: содержимое>

Обратите внимание, что в конструкторе необходимо дважды щелкнуть на кнопке, чтобы сгенерировать код "Button1_Click". Этот код будет написан на следующем шаге.

Шаг 4. Написание кода для перевода текста пользователя

В предыдущем разделе был создан базовый пользовательский интерфейс для преобразования текста. Это позволило бы пользователю написать некоторый текст, и нажать кнопку. В этом разделе вы напишете код за этой кнопкой, который будет переводить нужный текст пользователя на Испанский, и визуализировать его на странице.

Во-первых, необходимо добавить в решение новый класс. Звоните Адмакцесстокен и присвойте ему следующий код:

Используя Системы
Используя System. Collections. Generic;
Используя System. LINQ;
Используя Система. Web;

Пространства имен Translator
{
    Общественного Класса AdmAccessToken
    {
        Общественного Строка access_token { get; set; }
        Общественного Строка token_type { get; set; }
        Общественного Строка expires_in { get; set; }
        Общественного Строка scope { get; set; }
    }
}

Обратите внимание, что имена 4 строк должны соответствовать тому, что здесь точно, или вы будете получать ошибки в коде позже.

Затем в Visual Studio в обозревателе решений щелкните правой кнопкой мыши папку "ссылки" и выберите "добавить ссылку". Используйте следующее диалоговое окно, чтобы добавить ссылки на

– Система. Runtime. Сериализация

– System. XML. LINQ

– Система. ServiceModel. Web

В верхней части кода для About.aspx.cs, вы увидите несколько операторов ' using '. Добавьте с помощью System. XML. LINQ к этим, так что он выглядит следующим образом:

Используя Системы
Используя System. Collections. Generic;
Используя System. LINQ;
Используя Система. Web;
Используя System. Web. UI;
Используя Система. Web. UI. веб-контроль;
Используя System. XML. LINQ;

Пространства имен Translator
{
    Общественного Частичное Класса About : Page
    {
        Защищены Void Паже_лоад (Объекта отправитель, EventArgs e)
        {

}

        Защищены Void Button1_Click (Объекта отправитель, EventArgs e)
        {

}
    }
}

Вы увидите, что код Button1_Click пуст. Добавьте в него следующий код. Этот код получит маркер доступа для службы переводчика, используя идентификатор клиента и секрет клиента, созданный ранее.

Строка clientID = "<Your ClientID>";
Строка clientSecret = "<Your Client Secret>";
Строка Стртранслаторакцессури = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
Строка Стррекуестдетаилс = 
      Строка. Формат"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 (Стртранслаторакцессури);
WebRequest. "приложение/x-www-Form-UrlEncoded";
WebRequest. Method = ПОСТ;
Байт[] bytes = System. Text. Encoding. ASCII. байт (Стррекуестдетаилс);
WebRequest. ContentLength = байт. Длина
Используя (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = Новые функции 
    System. Runtime. сериализации. JSON. DataContractJsonSerializer (Typeof(Адмакцесстокен));

Адмакцесстокен токен = (Адмакцесстокен) сериализатор. ReadObject (GetResponseStream ());

Строка headerValue = Предъявителя + токен. акцесс_токен;

Этот код формирует POST к сервису рынка данных, передает ваш ID и секрет и получает объект JSON обратно. Затем этот объект десериализуется в объект Адмакцесстокен. Затем можно вывести акцесс_токен из этого.

Затем этот токен добавляется в строку с префиксом "предъявителя" (не забывайте о пробеле), чтобы создать значение заголовка, которое будет отправлено службе переводчика.

Чтобы затем вызвать службу переводчика с этим headerValue и передать текст пользователя, вы будете использовать код, как это:

Строка Тксттотранслате = TextBox1. Text;
Строка URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + Система. Web. HttpUtility. UrlEncode (Тксттотранслате) + "& from = EN & to = ES";
System .NET. WebRequest Транслатионвебрекуест = System .NET. WebRequest. Create (URI);
Транслатионвебрекуест. Headers. Add (Авторизации, headerValue);

System .NET. ответ ответной реакции = Null;
Response = Транслатионвебрекуест. ответ ();
Система. IO. Stream поток = ответ. GetResponseStream ();
Кодирование системы. Text. кодирования = System. Text. Encoding."UTF-8");

System. IO. StreamReader Транслатедстреам = Новые функции System. IO. StreamReader (поток, кодирование);
System. XML. XmlDocument Кстранслатион = Новые функции System. XML. XmlDocument ();
Кстранслатион. LoadXml (Транслатедстреам. ReadToEnd ());

Literal1. Text = Кстранслатион. InnerText;

Текстовое поле было вызвано ' TextBox1 ', так что текст, введенный пользователем, может быть просто выведен из этого. После этого создается URI для транслятора HTTP-службы, а сам текст — UrlEncoded и добавляется в URI.

Обратите внимание, что язык ' en ' используется для ' from ' (то есть, я предполагаю, что вы печатаете на английском языке), и ' ES ' используется для ' to ' (т.е. он будет переводить на Испанский язык). Полный список этих кодов для поддерживаемых языков находится здесь: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Служба переводчика возвращает XML, поэтому код вызывает службу, получает ответ как XML, а затем расшифрует его в текст. Затем он загружает результат в литерал, созданный на about. aspx с именем Literal1.

Вы можете увидеть его в действии здесь:

И вот оно! Теперь вы использовали API Microsoft Translator для добавления машинного перевода в приложение ASP.NET.

Сводка

В этом пошаговом руководстве вы увидели, как создать веб-приложение с помощью ASP.NET и как добавить в него машинный перевод. Вы использовали виджет Microsoft Translator, чтобы обеспечить перевод содержимого страницы, и вы увидели, как программировать API Microsoft Translator с помощью C# для перевода созданного пользователями контента.

Блог переводчика Майкрософт