การสร้างเว็บแอพลิเคชันด้วยการแปลที่ให้โดย Microsoft แปล

ในการฝึกปฏิบัตินี้คุณจะได้เรียนรู้วิธีการสร้างเว็บแอพลิเคชันที่ใช้ Microsoft แปล API เพื่อแปลข้อความที่ถูกป้อนโดยผู้ใช้ คุณจะสร้างหน้าโดยใช้ ASP.NET และฟรี Visual Studio Express ๒๐๑๒สำหรับเว็บ หากคุณมีการติดตั้ง Visual Studio แล้วคุณจะยังคงสามารถติดตามการกวดวิชาเพียงแค่ข้ามขั้นตอนที่1

ก่อนที่จะเริ่มต้นคุณจะต้องลงชื่อสมัครใช้ Microsoft แปล API ใน Azure มีจำนวนของข้อเสนอที่แตกต่างกัน, รวมทั้งฟรีหนึ่ง, และคุณสามารถดูวิธีการลงทะเบียนสำหรับบริการฟรี, ลงทะเบียน app ของคุณและได้รับข้อมูลประจำตัวของคุณที่นี่:

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

รหัสไคลเอนต์และความลับของไคลเอ็นต์ที่คุณสร้างที่นี่จะถูกใช้ในขั้นตอนที่4ดังนั้นให้จดบันทึกไว้

ขั้นตอนที่1 การขอรับ Visual Studio Express ๒๐๑๒สำหรับเว็บ

วิธีที่ดีที่สุดในการเริ่มต้นคือการเยี่ยมชม http://www.asp.net/downloads และเลือกปุ่ม ' ติดตั้งเดี๋ยวนี้ ' ในส่วน ' ได้รับทุกอย่างด้วยการติดตั้งง่ายเพียงอย่างเดียว '

นี้จะเปิดตัวติดตั้งแพลตฟอร์มเว็บซึ่งจะติดตั้ง Visual Studio, ASP.NET, MVC และโฮสต์ทั้งหมดของสารพัดอื่นๆที่คุณสามารถใช้ในการสร้างเว็บไซต์

ขั้นตอนที่2 สร้างเว็บแอพลิเคชัน

เรียกใช้ Visual Studio และจากเมนูแฟ้มเลือก ' โครงการใหม่ ' คุณจะเห็นกล่องโต้ตอบที่มีรายการของโครงการต่างๆที่พร้อมใช้งานสำหรับคุณในการสร้างเว็บไซต์ด้วย เลือก ' Visual c # ' ทางด้านซ้ายและจากนั้นเลือก ' ASP.NET เว็บฟอร์มโปรแกรมประยุกต์ ' จากรายการ

ให้ชื่อโปรแกรมประยุกต์บนเว็บของคุณเช่น ' แปล ' และกด ' ตกลง ' ในขณะนี้ Visual Studio จะสร้างทุกอย่างที่คุณต้องการสร้างและเรียกใช้โปรแกรมประยุกต์บนเว็บ กด F5 เพื่อสร้างและเรียกใช้โปรแกรมประยุกต์และคุณจะเห็นบางอย่างเช่นนี้:

ขั้นตอนที่ 3. การสร้าง UI สำหรับการแปลข้อความ

ในส่วนนี้คุณจะเพิ่มตัวควบคุมลงในไซต์ที่อนุญาตให้ผู้ใช้ของคุณพิมพ์ในบางข้อความกดปุ่มแปลแล้วดูการแปลของข้อความที่พวกเขาป้อน การทำงานประเภทนี้มีประโยชน์สำหรับการโต้ตอบกับลูกค้าของคุณเมื่อคุณพูดภาษาต่างๆเช่น

จากโซลูชัน explorer ค้นหาหน้า ' เกี่ยวกับ. 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= "BodyContent" ContentPlaceHolderID= "เมนคอนเทนต์">
    <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>
        <Ul>
            <หลี่><ราคา runat= "เซิร์ฟเวอร์" href="~/">บ้าน</ราคา></หลี่>
            <หลี่><ราคา runat= "เซิร์ฟเวอร์" href= "~ ~/About.aspx">เกี่ยวกับ</ราคา></หลี่>
            <หลี่><ราคา runat= "เซิร์ฟเวอร์" href= "~/Contc">ติดต่อ</ราคา></หลี่>
        </Ul>
    </กัน>
</asp: เนื้อหา>

โปรดทราบว่าในตัวออกแบบคุณควรดับเบิลคลิกที่ปุ่มเพื่อสร้างรหัส "Button1_Click" คุณจะเขียนรหัสนี้ในขั้นตอนต่อไป

ขั้นตอนที่ 4. รหัสการเขียนเพื่อแปลข้อความผู้ใช้

ในส่วนก่อนหน้านี้คุณได้สร้าง UI พื้นฐานสำหรับการแปลข้อความ มันจะช่วยให้ผู้ใช้เขียนข้อความบางอย่างและกดปุ่ม ในส่วนนี้คุณจะต้องเขียนรหัสที่อยู่เบื้องหลังปุ่มนั้นซึ่งจะแปลข้อความที่ต้องการของผู้ใช้เป็นภาษาสเปนและแสดงบนหน้า

ขั้นแรกคุณจะต้องเพิ่มชั้นเรียนใหม่ลงในโซลูชันของคุณ โทรหา AdmAccessToken และให้รหัสต่อไปนี้:

ใช้ ระบบ
ใช้ ระบบ. คอลเลกชันทั่วไป;
ใช้ ระบบ. Linq;
ใช้ ระบบ. เว็บ;

Namespace Translator
{
    สาธารณะ คลาส AdmAccessToken (AdmAccessToken)
    {
        สาธารณะ สาย อักขระ access_token { get; set; }
        สาธารณะ สาย อักขระ token_type { get; set; }
        สาธารณะ สาย อักขระ expires_in { get; set; }
        สาธารณะ สาย อักขระ scope { get; set; }
    }
}

โปรดทราบว่าชื่อของสตริงที่4ควรตรงกับสิ่งที่อยู่ที่นี่ตรงหรือคุณจะได้รับข้อผิดพลาดในรหัสของคุณในภายหลัง

ถัดไปภายใน Visual Studio ในโซลูชัน Explorer คลิกขวาที่โฟลเดอร์ ' อ้างอิง ' และเลือก ' เพิ่มการอ้างอิง ' ใช้กล่องโต้ตอบนี้เพื่อเพิ่มการอ้างอิงไปยัง

–ระบบรันไทม์.

–ระบบ. Linq

-ระบบ. ServiceModel. เว็บ

ที่ด้านบนของโค้ดสำหรับ About.aspx.cs คุณจะเห็นคำสั่ง ' ใช้ ' จำนวนหนึ่ง เพิ่มโดยใช้ระบบ. Xml. Linq ต่อไปนี้เพื่อให้มีลักษณะเช่นนี้:

ใช้ ระบบ
ใช้ ระบบ. คอลเลกชันทั่วไป;
ใช้ ระบบ. Linq;
ใช้ ระบบ. เว็บ;
ใช้ ระบบ. Web. UI;
ใช้ เว็บ. UI การควบคุม
ใช้ ระบบ. Xml Linq;

Namespace Translator
{
    สาธารณะ บางส่วน คลาส About : Page
    {
        ป้องกัน โมฆะ Page _ load (วัตถุ ผู้ส่ง EventArgs e)
        {

}

        ป้องกัน โมฆะ 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 (clientID), HttpUtility, รหัส (Clientid));

WebRequest ของระบบ. net request = การร้องขอเว็บ. net ที่สร้าง (strTranslatorAccessURI);
การร้องขอ Webenttype = "แอพลิเคชัน/x-www-รูปแบบ-urlencoded";
วิธีการของ webRequest = โพสต์;
ไบต์[] ไบต์ = ข้อความระบบการเข้ารหัส. ASCII. GetBytes (รายละเอียด Strขอ);
การร้องขอ Webentlength = ไบต์ ความยาว
ใช้ (System.IO.Stream outputStream = webRequest.GetRequestStream())
{
  outputStream.Write(bytes, 0, bytes.Length);
}

System.Net.WebResponse webResponse = webRequest.GetResponse();
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = ใหม่ 
    ระบบการจัดเรียงหมายเลขกำกับ. Json.อักษร(AdmAccessToken));

โทเค็น AdmAccessToken = (AdmAccessToken) ซีเรียลไลซ์ ReadObject (GetResponseStream ());

สาย อักขระ headerValue = แบเรอร์ + access_token;

รหัสนี้สร้างโพสต์ไปยังบริการตลาดข้อมูลผ่าน ID ของคุณและความลับและได้รับวัตถุ JSON กลับ จากนั้นคุณได้ทำการปรับให้เข้ากับวัตถุนั้นเป็น AdmAccessToken จากนั้นคุณสามารถสืบทอด access_token จากนี้

โทเค็นนี้จะถูกเพิ่มลงในสตริงที่นำหน้าด้วย "แบเรอร์" (อย่าลืมเว้นวรรค) เพื่อสร้างค่าส่วนหัวที่จะถูกส่งไปยังบริการแปล

จากนั้นเรียกบริการล่ามด้วย headerValue นี้และส่งข้อความของผู้ใช้คุณจะใช้รหัสเช่นนี้:

สาย อักขระ txtToTranslate = TextBox1; ข้อความ;
สาย อักขระ uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text =" + ระบบ HttpUtility (txtToTranslate) + "& จาก = en & to = es";
TranslationWebRequest ของระบบ. WebRequest สำหรับระบบ. สร้าง (uri);
translationWebRequest. เพิ่ม (การตรวจสอบค่า);

การตอบสนองของระบบ. net. Wese Null;
การตอบสนอง = translationWebRequest ();
กระแสข้อมูลของระบบ. IO. กระแสข้อมูลการตอบสนอง GetResponseStream ();
ระบบการเข้ารหัสเข้ารหัส = ข้อความระบบ. การเข้ารหัส. GetEncoding เข้ารหัส ("utf-8");

สตรีมของระบบ ใหม่ ระบบ. เครื่องอ่าน StreamReader สตรีม, เข้ารหัส);
ระบบ. Xml. XmlDocument xTranslation = ใหม่ เอกสาร. Xml. XmlDocument);
การแปลภาษา xTranslation (รีวานิสตรีม)

Literal1 = xTranslation. InnerText;

กล่องข้อความถูกเรียกว่า ' TextBox1 ' เพื่อให้ข้อความที่ผู้ใช้พิมพ์ได้ก็จะได้รับจากที่ หลังจากนั้น URI ไปยังผู้แปลบริการ HTTP จะถูกสร้างขึ้นและข้อความตัวเองเป็น UrlEncoded และเพิ่มไปยัง URI

โปรดทราบว่าภาษา ' en ' ถูกใช้สำหรับ ' จาก ' (เช่นฉันสมมติว่าคุณกำลังพิมพ์เป็นภาษาอังกฤษ) และ ' es ' ถูกใช้สำหรับ ' To ' (เช่นจะแปลเป็นภาษาสเปน) รายการของรหัสเหล่านี้ทั้งหมดสำหรับภาษาที่สนับสนุนอยู่ที่นี่: http://msdn.microsoft.com/en-us/library/hh456380.aspx

บริการตัวแปลส่งกลับ XML เพื่อให้โค้ดเรียกบริการได้รับการตอบสนองเป็น XML แล้วถอดรหัสเป็นข้อความ จากนั้นจะโหลดผลลัพธ์ลงในสัญพจน์ที่คุณสร้างขึ้นในเกี่ยวกับ. aspx ที่เรียกว่า Literal1

คุณสามารถดูได้ในการดำเนินการที่นี่:

และที่มัน! ตอนนี้คุณใช้ API ของนักแปล Microsoft เพื่อเพิ่มการแปลเครื่องไปยังแอพลิเคชัน ASP.NET ของคุณ

สรุป

ในการฝึกปฏิบัตินี้คุณเห็นวิธีการสร้างโปรแกรมประยุกต์บนเว็บโดยใช้ ASP.NET และวิธีการเพิ่มเครื่องแปลภาษา คุณใช้เครื่องมือนักแปลของ Microsoft เพื่อให้การแปลของเนื้อหาหน้าของคุณและคุณเห็นวิธีการโปรแกรม Microsoft แปล API โดยใช้ c # เพื่อแปลเนื้อหาที่ผู้ใช้สร้างขึ้น