Membuat aplikasi web dengan terjemahan yang disediakan oleh Microsoft Translator.

Dalam Walkthrough ini, Anda akan belajar cara membuat aplikasi web yang menggunakan Microsoft Translator API untuk menerjemahkan teks yang masukan oleh pengguna. Anda akan membangun halaman menggunakan ASP.NET dan gratis Visual Studio Express 2012 untuk web. Jika Anda sudah memiliki instalasi Visual Studio, Anda masih akan dapat mengikuti tutorial, hanya melewatkan langkah 1.

Sebelum memulai, Anda harus mendaftar ke Microsoft Translator API di Azure. Ada sejumlah persembahan yang berbeda, termasuk satu gratis, dan Anda dapat melihat bagaimana untuk mendaftar untuk layanan gratis, mendaftarkan aplikasi Anda dan mendapatkan mandat Anda di sini:

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

Klien ID dan klien rahasia yang Anda hasilkan di sini akan digunakan dalam langkah 4, jadi Simpanlah catatan mereka.

Langkah ke 1. Mendapatkan Visual Studio Express 2012 untuk web.

Cara terbaik untuk memulai adalah dengan mengunjungi http://www.asp.net/downloads dan pilih tombol ' Instal sekarang ' di bagian ' Dapatkan semuanya dengan satu instalasi sederhana '.

Ini akan meluncurkan web platform installer yang akan menginstal Visual Studio, ASP.NET, MVC dan seluruh host Goodies lain yang dapat Anda gunakan untuk membangun website.

Langkah ke 2. Membuat aplikasi web

Jalankan Visual Studio dan dari file menu, pilih ' proyek baru '. Anda akan melihat sebuah dialog berisi daftar proyek yang berbeda yang tersedia untuk Anda untuk membangun website. Pilih ' Visual C# ' di sebelah kiri, dan kemudian pilih ' ASP.NET web formulir aplikasi ' dari daftar.

Beri nama aplikasi web Anda, seperti ' Translator ', dan tekan ' OK '. Visual Studio sekarang akan membuat semua yang Anda butuhkan untuk membangun dan menjalankan aplikasi web. Tekan F5 untuk membangun dan menjalankan aplikasi dan Anda akan melihat sesuatu seperti ini:

Langkah ke 3. Membuat UI untuk penerjemahan teks

Di bagian ini, Anda akan menambahkan kontrol ke situs yang memungkinkan pengguna akhir mengetikkan beberapa teks, menekan tombol Terjemahkan, lalu melihat terjemahan teks yang dimasukkan. Jenis fungsi ini berguna untuk berinteraksi dengan pelanggan Anda ketika Anda berbicara bahasa yang berbeda, misalnya.

Dari solusi Explorer, temukan halaman ' tentang. aspx '. Buka di desainer, dan Anda akan melihat sesuatu seperti ini:

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:

Untuk kenyamanan Anda, inilah sumber untuk Halaman ini:

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

<ASP: konten runat= "server" ID= "BodyContent" Puas dengan= "MainContent">
    <hkelompok Kelas= "judul">
        <h1><%: Judul %>.</h1>
        <h2>Halaman Deskripsi aplikasi Anda.</h2>
    </hkelompok>

    <Artikel>
        Masukkan teks yang ingin diterjemahkan:<Br />
        <ASP: kotak teks ID= "TextBox1" runat= "server" Tinggi= "25px" Lebar= "342px"></ASP: kotak teks>
        <ASP: tombol ID= "Button1" runat= "server" Tinggi= "37px" Onclick= "Button1_Click" Teks= "Terjemahkan" />
        <Br />
        Teks terjemahan Anda adalah:<Br />
        <ASP: literal ID= "Literal1" runat= "server"></ASP: literal>
    </Artikel>

    <Samping>
        <h3>Selain judul</h3>
        <P>        
            Gunakan area ini untuk memberikan informasi tambahan.
        </P>
        <Ul>
            <Li><J runat= "server" Href="~/">Rumah</J></Li>
            <Li><J runat= "server" Href= "~/About.aspx">Tentang</J></Li>
            <Li><J runat= "server" Href= "~/Contact.aspx">Kontak</J></Li>
        </Ul>
    </Samping>
</ASP: konten>

Perhatikan bahwa dalam desainer Anda harus klik dua kali pada tombol untuk menghasilkan kode "Button1_Click". Anda akan menulis kode ini pada langkah berikutnya.

Langkah ke-4. Menulis kode untuk menerjemahkan teks pengguna

Pada bagian sebelumnya, Anda membuat UI dasar untuk penerjemahan teks. Ini akan memungkinkan pengguna untuk menulis beberapa teks, dan tekan tombol. Pada bagian ini, Anda akan menulis kode di belakang tombol itu yang akan menerjemahkan teks yang diinginkan pengguna ke dalam bahasa Spanyol, dan membuatnya pada halaman.

Pertama, Anda harus menambahkan kelas baru ke solusi Anda. Panggil itu Oleh AdmAccessToken dan berikan kode berikut:

Menggunakan Sistem
Menggunakan System. Collections. Generic;
Menggunakan Untuk system. LINQ;
Menggunakan System. web;

Namespace penerjemah
{
    Umum Kelas AdmAccessToken
    {
        Umum String access_token { get; set; }
        Umum String token_type { get; set; }
        Umum String expires_in { get; set; }
        Umum String scope { get; set; }
    }
}

Perhatikan bahwa nama dari 4 senar harus cocok dengan apa yang ada di sini dengan tepat, atau Anda akan mendapatkan kesalahan dalam kode Anda nanti.

Selanjutnya, dalam Visual Studio, di Explorer solusi, klik kanan pada folder ' referensi ' dan pilih ' Tambahkan referensi '. Gunakan dialog ini yang berikut ini untuk menambahkan referensi ke

-System. runtime. Serialization

-System. XML. LINQ

-System. ServiceModel. web

Di bagian atas kode untuk About.aspx.cs, Anda akan melihat sejumlah pernyataan ' menggunakan '. Tambahkan menggunakan System. XML. LINQ ini, sehingga terlihat seperti ini:

Menggunakan Sistem
Menggunakan System. Collections. Generic;
Menggunakan Untuk system. LINQ;
Menggunakan System. web;
Menggunakan System. web. UI;
Menggunakan System. web. UI. WebControls;
Menggunakan System. XML. LINQ;

Namespace penerjemah
{
    Umum Parsial Kelas About : Page
    {
        Dilindungi Kekosongan Page_Load (Objek pengirim, EventArgs e)
        {

}

        Dilindungi Kekosongan Button1_Click (Objek pengirim, EventArgs e)
        {

}
    }
}

Anda akan melihat bahwa kode Button1_Click kosong. Tambahkan kode berikut untuk itu. Kode ini akan mendapatkan token akses Anda untuk Layanan penerjemah, menggunakan client ID dan client Secret yang Anda buat sebelumnya.

String clientID = "<Your ClientID>";
String clientSecret = "<Your Client Secret>";
String strTranslatorAccessURI = 
      "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
String strRequestDetails = 
      String. 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 = "aplikasi/x-www-form-urlencoded";
webRequest. method = POSTING;
byte[] bytes = System. text. encoding. ASCII. GetBytes (strRequestDetails);
webRequest. ContentLength = byte. Panjang
Menggunakan (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = Baru 
    System. runtime. Serialization. JSON. DataContractJsonSerializer (typeof(AdmAccessToken));

AdmAccessToken Token = (AdmAccessToken) serializer. ReadObject (webResponse. GetResponseStream ());

String headerValue = Pembawa + Token. access_token;

Kode ini membentuk POST ke layanan pasar data, melewati ID dan rahasia Anda dan mendapatkan objek JSON kembali. Anda kemudian deserialize itu objek ke AdmAccessToken. Anda kemudian dapat memperoleh access_token dari ini.

Token ini kemudian ditambahkan ke string, diawali dengan "pembawa" (jangan lupa ruang) untuk membuat nilai header yang akan dikirim ke Layanan penerjemah.

Untuk kemudian memanggil layanan penerjemah dengan headerValue ini, dan lulus teks pengguna, Anda akan menggunakan kode seperti ini:

String txtToTranslate = TextBox1. text;
String URI = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + System. web. HttpUtility. UrlEncode (txtToTranslate) + "& dari = en & to = es";
System .net. WebRequest translationWebRequest = System .net. WebRequest. Create (URI);
translationWebRequest. headers. Add (Otorisasi, headerValue);

System .net. WebResponse respons = Null;
response = translationWebRequest. GetResponse ();
Respons streaming System. IO. Stream =. GetResponseStream ();
System. text. encoding encode = System. text. encoding. GetEncoding ("UTF-8");

System. IO. StreamReader translatedStream = Baru System. IO. StreamReader (aliran, encode);
System. XML. XmlDocument xTranslation = Baru System. XML. XmlDocument ();
xTranslation. LoadXml (translatedStream. ReadToEnd ());

Literal1. text = Xterjemahan. InnerText;

Kotak teks yang disebut ' TextBox1 ' sehingga teks pengguna mengetik di hanya dapat berasal dari itu. Setelah itu, URI untuk layanan HTTP penerjemah dibuat, dan teks itu sendiri UrlEncoded dan ditambahkan ke URI.

Perhatikan bahwa bahasa ' en ' digunakan untuk ' dari ' (yaitu, aku mengasumsikan Anda mengetik dalam bahasa Inggris), dan ' es ' digunakan untuk ' untuk ' (yaitu akan menerjemahkan ke dalam bahasa Spanyol). Daftar lengkap kode ini untuk bahasa yang didukung di sini: http://msdn.microsoft.com/en-us/library/hh456380.aspx

Layanan penerjemah mengembalikan XML, sehingga kode panggilan layanan, mendapatkan respons sebagai XML dan kemudian decode ke teks. Kemudian beban hasilnya ke literal yang Anda buat di about. aspx disebut Literal1.

Anda dapat melihatnya beraksi di sini:

Dan hanya itu! Sekarang Anda telah menggunakan Microsoft Translator API untuk menambahkan terjemahan mesin ke aplikasi ASP.NET Anda.

Ringkasan

Dalam panduan ini, Anda melihat bagaimana membangun sebuah aplikasi web menggunakan ASP.NET dan bagaimana untuk menambahkan mesin terjemahan untuk itu. Anda menggunakan Microsoft Translator widget untuk menyediakan terjemahan konten halaman Anda, dan Anda melihat cara memprogram Microsoft Translator API menggunakan C# untuk menerjemahkan konten buatan pengguna.