กรณีศึกษาการใช้ API ของ Google ทำการแปลจากไทยเป็นอังกฤษ

 
การใช้ API ของ google tranlate จะเป็นเว็บเซอร์วิสแบบ REST (ใช้เมธอด GET)
โดยมันจะใช้ url รูปแบบดังต่อไปนี้

let endPoint = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${from_lang}&tl=${to_lang}&dt=t&ie=UTF-8&oe=UTF-8&q=${encodeURIComponent(sentences)}` ;

ตัวแปร endPoint เก็บค่า URL เอาไว้ใช้เรียกเว็บเซอร์วิส
โค้ดข้างบนเขียนให้อยู่ในรูปเทมเพลตสตริงของภาษา JavaScript
พร้อมมีตัวแปรไว้ข้างใน เพื่อจะแทนที่ข้างในสตริง endPoint ได้แก่
 

• ${from_lang} คือข้อความที่จะถูกแปล ในกรณีตัวอย่างนี้คือ “th” แปลจากภาษาไทย
• ${to_lang} คือข้อความเป้าหมายที่จะทำการแปล ในกรณีตัวอย่างนี้คือ “en” ถูกแปลเป็นภาษาอังกฤษ
• sentences จะเก็บข้อความที่จะทำการแปล ในกรณีเป็นข้อความไทย เพราะจะแปลจากไทยเป็นอังกฤษ

 
ต่อมาจะเขียนโค้ดเพื่อเรียกเว็บเซอร์วิส โดยประกาศฟังก์ชั่นชื่อ tranlate

function translate(sentences, targetDiv, from_lang ='th', to_lang='en'){
  let sentences = sentences.replace(/\n/g, '<br>')	
  let endPoint = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${from_lang}&tl=${to_lang}&dt=t&ie=UTF-8&oe=UTF-8&q=${encodeURIComponent(sentences)}` ;
			
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
		var jsonText = JSON.parse(this.responseText);
		text = jsonText[0][0][0]
		text = text.replace(/<br>/g, '\n')
      targetDiv.innerHTML = "&nbsp;" + text;	  
    }
  };
  xhttp.open("GET", endPoint, true);
  xhttp.send();
}

ในฟังก์ชั่น translate จะมีการะบุตัวแปร targetDiv คือตัวแปรที่เก็บ element ของภาษา HTML ที่จะให้แสดงผลลัพธ์
 
ตัวอย่างการใช้งานเช่น

translate("ป้อนภาษาไทยที่นี้", document.getElementById("your_element_ID"));

 
รูปแบบโค้ดข้างบนโดยดีฟอลต์จะแปลข้อความจากไทยเป็นอังกฤษ ถ้าอยากแปลจากอังกฤษเป็นไทยก็เขียนตามรูปแบบนี้

translate("ป้อนภาษาไทยที่นี้", document.getElementById("your_element_ID"), from_lang ='en', to_lang='th');

 
สำหรับรหัสภาษาที่เราจะระบุเวลาแปล จะอ้างอิงตามมาตรฐาน SO 639-1 ตามลิงค์ข้างล่าง
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
เช่น อยากแปลภาษาฝรั่งเศสก็รหัส ‘fr’ ภาษาสเปนก็ ‘es’ เป็นต้น
 

ตัวอย่างโค้ด ศึกษาได้ตามนี้

https://github.com/adminho/javascript/blob/master/examples/google_translate/translate_thai-eng.html
 
ตัวอย่างการทำงานตามคลิปข้างล่าง
 

 

 เขียนโดยแอดมินโฮ โอน้อยออก

Please like Fanpage