使用 Microsoft Translator 提供的翻譯功能建立 Web 應用程式。

發佈於 2012 年 12 月 19 日由微軟翻譯器

使用 Microsoft Translator 提供的翻譯功能建立 Web 應用程式。

在本演練中，您將學習如何建立一個 Web 應用程式，使用 Microsoft Translator API 來翻譯使用者輸入的文字。您將使用 ASP.NET 和免費的 Visual Studio Express 2012 for Web 建立網頁。如果您已經安裝了 Visual Studio，您仍然可以跟隨教學，只需跳過步驟 1。

在開始之前，您需要註冊 Azure 中的 Microsoft Translator API。有多種不同的服務，包括免費服務，您可以在此瞭解如何註冊免費服務、註冊您的應用程式以及取得憑證：

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

您在此產生的用戶端 ID 和用戶端密碼將在步驟 4 中使用，因此請記下它們。

步驟 1.取得 Visual Studio Express 2012 for Web。

開始的最佳方式是造訪 http://www.asp.net/downloads 並選擇「只需簡單安裝，即可取得所有功能」中的「立即安裝」按鈕。

這將啟動 Web Platform 安裝程式，安裝 Visual Studio、ASP.NET、MVC 及其他可用於建立網站的許多好東西。

步驟 2.建立 Web 應用程式

執行 Visual Studio，並從檔案功能表中選擇「新增專案」。您會看到一個對話框，裡面有不同專案的清單，可供您建立網站。在左側選擇「Visual C#」，然後從清單中選擇「ASP.NET Web Forms Application」。

為您的 Web 應用程式命名，例如「Translator」，然後按「OK」。Visual Studio 現在會建立建立和執行 Web 應用程式所需的一切。按 F5 來建立並執行應用程式，您會看到類似以下的內容：

步驟 3.為文字翻譯建立使用者介面

在本節中，您將新增控制項到網站，讓您的終端使用者可以輸入一些文字，按下翻譯按鈕，然後看他們輸入的文字的翻譯。舉例來說，當您使用不同語言時，這類功能對於與您的客戶互動非常有用。

從 Solution explorer 中找到「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="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <hgroup 類="title">
        <h1><%:標題 %>.</h1>
        <h2>您的應用程式描述頁面。</h2>
    </hgroup>

    <文章>
        輸入您要翻譯的文字：<br />
        <asp:TextBox ID="TextBox1" runat="server" 高度="25px" 寬度="342px"></asp:TextBox>
        <asp:按鈕 ID="Button1" runat="server" 高度="37px" 按一下="Button1_Click" 正文=「翻譯」 />
        <br />
        您的翻譯文本是<br />
        <asp:字面意義 ID="Literal1" runat="server"></asp:字面意義>
    </文章>

    <一旁>
        <h3>旁白標題</h3>
        <p>        
            使用此區域提供其他資訊。
        </p>
        <潰>
            <li><a runat="server" href="~/">首頁</a></li>
            <li><a runat="server" href="~/About.aspx">關於</a></li>
            <li><a runat="server" href="~/Contact.aspx">聯絡人</a></li>
        </潰>
    </一旁>
</asp:內容>

請注意，在設計器中，您應該雙擊按鈕，以產生 "Button1_Click" 程式碼。您會在下一步寫出這段程式碼。

步驟 4.編寫程式碼以翻譯使用者文字

在上一節中，您建立了一個基本的文字翻譯使用者介面。使用者可以寫一些文字，然後按下按鈕。在本節中，您將撰寫按鈕後面的程式碼，將使用者所需的文字翻譯成西班牙文，並呈現在頁面上。

首先，您需要在解決方案中加入一個新的類別。將它稱為 AdmAccessToken 並賦予其下列程式碼：

使用 系統；
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web.Web.Web.Web.Web.Web.Web.Web.Web.Web.Web.Web

名稱空間 譯者
{
    公眾 類 AdmAccessToken
    {
        公眾 字符串 access_token { get; set; }
        公眾 字符串 token_type { get; set; }
        公眾 字符串 expires_in { get; set; }
        公眾 字符串 scope { get; set; }
    }
}

請注意，4 個字串的名稱應該完全符合這裡的內容，否則稍後會在程式碼中出現錯誤。

接下來，在 Visual Studio 的「解決方案總管」中，在「參考」資料夾上按一下滑鼠右鍵，然後選擇「新增參考」。使用隨後的對話框，將參考資料新增至

- System.Runtime.Serialization

- System.XML.Linq

- System.ServiceModel.Web

在您的 About.aspx.cs 程式碼的頂端，您會看到許多「using」語句。在這些語句中加入 using System.Xml.Linq，使它看起來像這樣：

使用 系統；
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web.Web.Web.Web.Web.Web.Web.Web.Web.Web.Web.Web
使用 系統.Web.UI.NET
使用 System.Web.UI.WebControls.WebControls.WebControls.WebControls.WebControls
使用 System.Xml.Linq;

名稱空間 譯者
{
    公眾 局部 類 About : Page
    {
        受保護 空白 Page_Load(物件 sender, EventArgs e)
        {

        }

        受保護 空白 Button1_Click(物件 sender, EventArgs e)
        {

        }
    }
}

您會發現 Button1_Click 的程式碼是空的。將以下程式碼加入其中。這段程式碼會使用您先前建立的 Client ID 和 Client Secret，取得翻譯服務的存取權限。

字符串 clientID = "<Your ClientID>";
字符串 clientSecret = "<Your Client Secret>";
字串 strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
字串 strRequestDetails = 
      字符串.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-www-form-urlencoded";
webRequest.Method = 「傳送」;
字节[] bytes = System.Text.Encoding.ASCII.GetBytes(strRequestDetails)；
webRequest.ContentLength = bytes.Length；
使用 (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.Serialization.Json.DataContractJsonSerializer(typeof(AdmAccessToken))；

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

字符串 headerValue = 「承載者」 + token.access_token；

此程式碼會形成一個 POST 到資料市場服務，傳送您的 ID 和 secret，並獲得一個 JSON 物件。然後將該物件反序列化為 AdmAccessToken。然後，您就可以從此取得 access_token。

然後，這個標記會被加入一個字串，前綴為 "Bearer " (別忘了空格)，以建立一個標頭值，並傳送至翻譯服務。

若要使用此 headerValue 來呼叫翻譯服務，並傳送使用者的文字，您會使用類似這樣的程式碼：

字符串 txtToTranslate = TextBox1.Text；
字符串 uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text=" + 
     System.Web.HttpUtility.UrlEncode(txtToTranslate) + "&from=en&to=es";
System.Net.WebRequest translationWebRequest = System.Net.WebRequest.Create(uri)；
TranslationWebRequest.Headers.Add(「授權」, headerValue）；

System.Net.WebResponse response = 空無;
response = translationWebRequest.GetResponse()；
System.IO.Stream stream = response.GetResponseStream()；
System.Text.Encoding encode = System.Text.Encoding.GetEncoding("utf-8");

System.IO.StreamReader translatedStream = 新 System.IO.StreamReader(stream, encode)；
System.Xml.XmlDocument xTranslation = 新 System.Xml.XmlDocument()；
xTranslation.LoadXml(translatedStream.ReadToEnd())；

Literal1.Text=xTranslation.InnerText；

文字方塊被稱為 'TextBox1'，因此使用者輸入的文字可以簡單地從中衍生出來。之後，就會建立一個到 Translator HTTP 服務的 URI，而文字本身會被 UrlEncoded 並加入 URI。

請注意，語言 'en「用於」From「（即，我假設您輸入的是英文），而」es「用於」To'（即，它會翻譯成西班牙文）。支援語言的這些代碼的完整清單在這裡： http://msdn.microsoft.com/en-us/library/hh456380.aspx

翻譯服務會回傳 XML，因此程式碼會呼叫該服務，取得 XML 的回應，然後將其解碼成文字。然後將結果載入您在 About.aspx 上建立的 Literal，稱為 Literal1。

您可以在這裡看到它的實作：

就是這樣！您現在已經使用 Microsoft Translator API 將機器翻譯加入您的 ASP.NET 應用程式。

摘要

在本演練中，您看到了如何使用 ASP.NET 建立 Web 應用程式，以及如何將機器翻譯加入其中。您使用 Microsoft Translator Widget 來提供網頁內容的翻譯，並了解如何使用 C# 來編程 Microsoft Translator API，以便翻譯使用者產生的內容。

微軟翻譯器部落格