Створення веб-додатків з перекладом, що надаються перекладачем Microsoft.

Опубліковано на 19 грудня, 2012за Microsoft Перекладач

Створення веб-додатків з перекладом, що надаються перекладачем Microsoft.

У цьому Покрокове керівництво, ви дізнаєтеся, як створити веб-додаток, яке використовує Microsoft Translator API для перекладу тексту, який був введені користувачем. Ви будете будувати сторінку за допомогою ASP.NET і безкоштовний Visual Studio Express 2012 для Інтернету. Якщо у вас вже є візуальна студія установки, ви все одно зможете стежити за підручником, просто пропустіть крок 1.

Перш ніж почати, вам потрібно підписатися на Microsoft Перекладач API в Azure. Є цілий ряд різних пропозицій, у тому числі безкоштовний, і ви можете побачити, як підписатися на безкоштовний сервіс, зареєструвати ваш додаток і отримати свої повноваження тут:

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

Клієнт ID і клієнт секрет, що ви генерувати тут буде використовуватися в кроці 4, так тримати записку про них.

Кроці 1. Початок Visual Studio Express 2012 для Інтернету.

Найкращий спосіб, щоб почати, це відвідати http://www.asp.net/downloads і виберіть кнопку "встановити зараз" в "отримати все з однієї простої установки" розділ.

Це запустить веб-платформу установки, які будуть встановлювати Visual Studio, ASP.NET, MVC і цілий ряд інших Goodies, які можна використовувати для створення веб-сайтів.

Кроку 2. Створення веб-застосунку

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

Дайте вашому веб-застосунку ім'я, наприклад, "Перекладач", і натисніть "ОК". 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= "сервер" ІДЕНТИФІКАТОР= "Бодіконтент" ContentPlaceHolderID= "MainContent">
    <hgroup Клас= "Назва">
        <h1><%: Назва %>.</h1>
        <h2>Сторінці Опис застосунку.</h2>
    </hgroup>

    <Статті>
        Введіть текст, який ви хочете перекласти:<Br />
        <ASP: текстове поле ІДЕНТИФІКАТОР= "TextBox1" runat= "сервер" Висота= "25px" Ширина= "342px"></ASP: текстове поле>
        <Кнопка ASP: ІДЕНТИФІКАТОР= "Button1" runat= "сервер" Висота= "37px" Onclick= "Button1_Click" Текст= "Перекласти" />
        <Br />
        Переведений текст:<Br />
        <ASP: літерні ІДЕНТИФІКАТОР= "Literal1" runat= "сервер"></ASP: літерні>
    </Статті>

    <Бік>
        <h3>Заголовок у бік</h3>
        <P>        
            Ця область використовується для надання додаткових відомостей.
        </P>
        <Вул>
            <Лі><муніципалітет runat= "сервер" Href="~/">Головна</муніципалітет></Лі>
            <Лі><муніципалітет runat= "сервер" Href= "~/About.aspx">Про</муніципалітет></Лі>
            <Лі><муніципалітет runat= "сервер" Href= "~/Контактне ім'я">Контакт</муніципалітет></Лі>
        </Вул>
    </Бік>
</ASP: вміст>

Зауважимо, що в конструкторі ви повинні двічі натиснути на кнопку для створення "Button1_Click" коду. Ви будете писати цей код в наступному кроці.

Кроку 4. Написання коду для перекладу тексту користувача

У попередньому розділі ви створили базовий КОРИСТУВАЛЬНИЦЬКИЙ інтерфейс для перекладу тексту. Це дозволить користувачу написати якийсь текст і натиснути кнопку. У цьому розділі ви будете писати код за цю кнопку, яка буде перевести бажаний текст користувача на іспанську мову, і зробити його на сторінці.

Спочатку потрібно додати новий клас до вирішення. Називайте це AdmAccessToken і надати йому наступний код:

Використання Системи
Використання Система. збірки. Загальні;
Використання Система. LINQ;
Використання Система. Web;

Простір імен перекладач
{
    Громадських Клас Маркер admAccessToken
    {
        Громадських Рядок access_token { get; set; }
        Громадських Рядок token_type { get; set; }
        Громадських Рядок expires_in { get; set; }
        Громадських Рядок scope { get; set; }
    }
}

Зверніть увагу, що імена 4 рядка повинні збігатися те, що тут точно, або ви отримаєте помилки в коді пізніше.

Далі, в Visual Studio, в Explorer рішення, клацніть правою кнопкою мишки на ' посилання ' папки і виберіть додати посилання. У цьому діалозі слід додати посилання на

– System. Runtime. серіалізації

– Система. XML. LINQ

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

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

Використання Системи
Використання Система. збірки. Загальні;
Використання Система. LINQ;
Використання Система. Web;
Використання Система. Web. UI;
Використання Система. Web. UI. WebControls;
Використання System. XML. LINQ;

Простір імен перекладач
{
    Громадських Часткове Клас About : Page
    {
        Захищені Порожнечу Page_Load (Об'єкт відправник, EventArgs e)
        {

}

        Захищені Порожнечу Button1_Click (Об'єкт відправник, EventArgs e)
        {

}
    }
}

Ви побачите, що код Button1_Click порожній. Додайте до нього наведений нижче код. Цей код отримає ваш маркер доступу для послуги перекладача з використанням ІДЕНТИФІКАТОРА клієнта та клієнта Secret, яку ви створили раніше.

Рядок Cliendend = "<Your ClientID>";
Рядок Клієнта секретно = "<Your Client Secret>";
Рядок Strtransatulaccaturi = 
      "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 (Cliendend), HttpUtility. UrlEncode (Clientid));

Система .net. WebRequest webRequest = система .net. WebRequest. створення (Strtransatrapaccaturi);
Веб-запит. ContentType = "застосування/x-www-форма-urlencoded";
webRequest. метод = ПОСТ;
Байт[] байт = система. Text. Encoding. ASCII. GetBytes (структурні дані);
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(AdmAccessToken));

AdmAccessToken маркер = (AdmAccessToken) засіб серіалізації. ReadObject (webResponse. GetResponseStream ());

Рядок Значення параметра = Пред'явника + маркер. access_token;

Цей код утворює пост на ринок даних служби, передаючи ваш ІДЕНТИФІКАТОР і таємницю і отримати об'єкт JSON назад. Ви потім десеріалізувати цей об'єкт в AdmAccessToken. Потім ви можете отримати access_token від цього.

Цей маркер потім додається до рядка, з префіксом "пред'явника" (не забувайте про простір), щоб створити значення заголовка, який буде відправлений на службу перекладача.

Для того, щоб зателефонувати в службу перекладача з цим headerValue, і передати текст користувача, ви будете використовувати код, як це:

Рядок TextBox1. текст;
Рядок URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + Система. веб. HttpUtility. UrlEncode (Tcttttotranslate) + "& from = EN = es";
System .net. WebRequest translationWebRequest = System .net. WebRequest. Create (URI);
translationWebRequest. Додавання заголовків. Add (Авторизації, headerValue);

Система .net. WebResponse відповідь = Null;
Відповідь = translationWebRequest. GetResponse ();
System. IO. Stream Stream = відповідь. GetResponseStream ();
Система. Text. кодування кодують = System. Text. Code. GetEncoding ("UTF-8");

Система. о. StreamReader translatedStream = Новий System. IO. StreamReader (потік, кодування);
System. XML. XmlDocument xTranslation = Новий XML. XmlDocument ();
xTranslation. Lofxml (translatedStream. ReadToEnd ());

Literal1. Text = xTranslation. Inintext;

Текстове поле було називатися ' TextBox1 ' так що текст, введений користувачем може бути просто отримано від цього. Після цього створюється URI для послуги перекладача HTTP, і сам текст є UrlEncoded і доданий до URI.

Зверніть увагу, що мова ' en ' використовується для ' з ' (наприклад, я припускаю, що ви набираєте англійською мовою), і ' ES ' використовується для ' to ' (тобто він буде перевести на іспанську мову). Повний список цих кодів для підтримуваних мов тут: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Служба перекладача повертає XML, тому код виклику служби, отримує відповідь як XML, а потім декодує його в текст. Потім він завантажує результат у буквальне, що ви створили на о. aspx називається Literal1.

Ви можете побачити його в дії тут:

І ось воно! Ви тепер використовували Microsoft Translator API для додавання машинного перекладу на ваш ASP.NET програми.

Резюме

У цьому Покрокове керівництво, ви побачили, як побудувати веб-додатків за допомогою ASP.NET і як додати Машинний переклад до нього. Ви використали віджет Microsoft перекласти для того, щоб надати переклад вмісту вашої сторінки, і ви побачили, як програмувати Microsoft Translator API з використанням c#, з тим щоб перевести User-Generated Content.

Microsoft Перекладач блог