Manfaatkan Google Translate dengan

Javascript dan Multi Chunk

Siapa yang tidak mengenal layanan Terjemahan dari si raksasa Internet Google ini. Ya
Google Translate. Google menyediakan dukungan terjemahan untuk sekian banyak bahasa
yang didukungnya, termasuk Bahasa Indonesia.

Walaupun masih dalam tahap pengembangan yang terus-menerus dan hasil terjemahannya
masih semberawut dan sulit dimengerti, tapi fasilitas ini cukup banyak digunakan oleh
pengguna internet untuk sedikitnya menerjemahkan beberapa bagian secara kasar.

Keunggulan utama Google Translate dari penyedia layanan terjemahan lainnya di Internet
adalah ketersediaan dukungan bahasa yang banyak dan memungkinkannya para pengembang
web untuk membangun sebuah aplikasi yang memanfaatkan fasilitas Google Translate ini
dengan menggunakan API (Application Interface) nya.

Google API
Sebelum Kita masuk ke dalam pembahasan tentang penggunaan Google Translate dengan
Javascript, rupanya saya harus melakukan kilas balik tentang Google API.

Pada blog-blog terdahulu yang saya tulis, terdapat topik yang berjudul Google API
Playground, Mengenal Google Map API dan Google Feeds - Tambah RSS Pada Web Hanya
Dengan Javascript dimana pada blog-blog tersebut diterangkan bagaimana cara menggunakan
Google API, dan beberapa syarat-syaratnya.

Secara garis besarnya, Google API adalah sebuah Application Interface yang dapat diakses
oleh suatu aplikasi untuk melakukan komunikasi dengan layanan-layanan yang disediakan
oleh Google, baik itu layanan Pencarian, Youtube, Feeds, Maps, Visualisasi dan Translate.
Dengan syarat aplikasi tersebut telah mendaftarkan domainnya dan mendapatkan API KEY
di google dengan mengunjungi halaman berikut ini:
http://code.google.com/apis/base/signup.html.

Google Translate dengan Javascript

Kadang Kita ingin membuat sebuah fasilitas untuk melakukan penterjemahan di dalam
website yang sedang Kita bangun (Seperti pada modul Kontribusi di Portal Berita Unikom)
tanpa harus membuat pengguna website untuk membuka halaman Google Translate dan
menterjemahkannya secara manual.

Solusinya dapat dicapai dengan memanfaatkan Google API, tapi permasalahannya fasilitas
API untuk Google Translate memiliki keterbatasan jumlah karakter yang diperbolehkan
dalam satu kali penterjemahan, hal ini lah yang mendorong saya untuk membuat suatu API
Layer untuk pemanfaatan fasilitas Google Translate yang lebih mudah digunakan dan
mendukung Multi Chunk, sehingga dapat menghapus keterbatasan jumlah karakter tersebut.

Live DEMO
OK, Sebelum membahas soal coding, para programmer pasti lebih tertarik untuk melihat
demontrasi dari topik yang dibahas secara langsung sebelum mengambil keputusan untuk
menggunakan fasilitas tersebut.

CATATAN: Semua data diambil dengan menggunakan Javascript tanpa perantara server
lainnya, jadi transfer data hanya dibebankan kepada user.

Masukan Teks yang akan di terjemahkan pada textarea ini

Masukan Teks atau HTML:

• •
Hasil Translate akan tampil di sini...

Hasil Translate akan tampil di sini:

© 2010 Ahmad Amarullah

Download
Tertarik untuk menggunakannya?, Jangan khawatir, saya selain memberikan live demo, saya
juga akan memberikan Source Code, contoh script dan penjelasannya secara rinci tentang
pemanfaatan Google Translate API ini. Untuk menggunakan fasilitas seperti Live Demo di
atas, silahkan download terlebih dahulu file berikut ini:

DOWNLOAD
gtranslate.zip
Ukuran: 2.80 KB
Contoh Penggunaan gTranslate
Pada File di atas bila telah di extract akan terdapat 2 file, yaitu gtranslate.js dan
gtranslate.html, dimana contoh penggunaan Interface gTranslate dapat dilihat pada
gtranslate.html. Pada file ini terdapat sebuah script yang sangat sederhana, yang memanggil
isi dari element "text_to_translate" sebagai teks sumber yang akan diterjemahkan. Lihat
Script Berikut:

Lihat Source Code

<script
type="text/javascript">
/*<![CDATA[
*

1. <script type="text/javascript">
2. /*<![CDATA[
3. *
4. * SCRIPT Untuk mengambil data dari Google Translate
5. */
6.
7. gTranslate.init('','');
8. function translateit(){
9. var txt=document.getElementById('text_to_translate').value;
10. document.getElementById('translate_btn').disabled='disabled';
11. document.getElementById('translate_btn').value='Silahkan Tunggu...';
12.
gTranslate.translate(txt,document.getElementById('langpair').value,document.getEle
mentById('tipe').value,translate_callback);
13. }
14. function translate_callback(txt){
15. document.getElementById('translate_result').value=txt;
16. document.getElementById('translate_btn').value='Translate';
17. document.getElementById('translate_btn').disabled='';
18. }
19.
20. /*]]>*/
21. </script>
22.

Hal pertama yang dilakukan adalah dengan memanggil gTranslate.init, dimana pada kedua
argumen tersebut diberikan string kosong kedua-duanya. Tapi pada implementasinya nanti,
bila aplikasi web tersebut telah memiliki domain sendiri, maka atribut fungsi init tersebut
harus diisi dengan Google API KEY dan Remote IP seperti pada contoh berikut:

Lihat Source Code

gTranslate.init('GOOGLE_API_K

1. gTranslate.init('GOOGLE_API_KEY_DIISI_DI_SINI','192.168.1.1');
Hal ini harus dilakukan, karena Google akan memeriksa domain Anda ketika telah terpasang
di server. Bila API KEY tidak di set, Google akan memberikan limit/batasan berapa kali
aplikasi Anda boleh melakukan request ke Google Translate pada setiap menitnya. Tapi bila
API KEY tersebut diisi, maka Anda tidak perlu khawatir dengan jumlah request ke server
Google Translate.

Baris selanjutnya pada contoh script di atas terdapat satu fungsi yang bernama translateit(),
fungsi ini akan dipanggil ketika user melakukan klik pada tombol Translate. Dimana pada
fungsi ini, aplikasi akan mengambil isi dari textarea yang memiliki id="text_to_translate"
kemudian membuat request untuk melakukan translate pada gTranslate dengan memanggil
fungsi gTranslate.translate.

Pada baris terakhir, terdapat dungsi translate_callback dengan argumen txt, dimana fungsi
ini akan dipanggil bila data teks yang telah di translate sudah selesai didapatkan. argumen txt
akan berisi teks yang telah diterjemahkan, pada fungsi ini argumen txt ini akan langsung
dimasukkan pada textarea yang memiliki id="translate_result".

Interface gTranslate
Pada bagian ini, Saya akan menerangkan cara penggunaan gTranslate dengan menggunakan
beberapa fungsi yang sederhana. Yang harus diketahui dari gTranslate adalah terdapatnya
suatu fungsi callback yang harus dimasukkan ketika Anda memanggil fungsi untuk memulai
penterjemahan.

gTranslate.init
Fungsi ini hanya digunakan satu kali saja, dan hanya diperlukan untuk mengubah variabel
Google API Key dan User IP pada interface gTranslate. Argumen yang dibutuhkan sebanyak
2 buah, yaitu gTranslate.init(GOOGLE_API_KEY, USER_IP);

gTranslate.translate
Fungsi ini digunakan untuk memulai melakukan penterjemahan, dengan beberapa argumen
yang diminta diantaranya:
gTranslate.translate(text_to_translate,langpair,text_type,callbackFunc).

• text_to_translate - Adalah isi teks yang akan diterjemahkan. Variabel ini bertipe
string, dan dapat diambil langsung dari suatu element field dalam form HTML,
misalnya dalam textarea, atau input dengan mengakses data valuenya.
• langpair - Merupakan pasangan bahasa sumber dan bahasa tujuan dengan format 2
digit id bahasa dipisahkan dengan karakter |, misalnya untuk menterjemahkan bahasa
indonesia ke inggris atribut ini harus berisi "id|en", bila sebaliknya "en|id", bila ingin
menterjemahkan dari bahasa Itali ke Indonesia "it|id" atau sebaliknya "id|it".
• text_type - Merupakan tipe dari teks yang akan diterjemahkan, bila isi
text_to_translate berisi tag HTML, maka isikan "html" pada argumen ini, bila tidak
terdapat tag HTML, isikan saja "plain".
• callbackFunc - Merupakan fungsi yang akan dipanggil ketika terjemahan telah
didapatkan. Format fungsi untuk callback ini syaratnya harus memiliki 1 argumen
yang akan memuat text hasil terjemahan.

Berikut adalah contoh Penggunaan gTranslate.translate:

Tutup Source Code
/* REQUEST */
gTranslate.translate("Hallo Nam

/* CALLBACK */

1. /* REQUEST */
2. gTranslate.translate("Hallo Nama Saya Ahmad Amarullah","id|en","plain",berhasil);
3.
4. /* CALLBACK */
5. function berhasil(txt){
6. alert("Hasil Terjemahan: "+txt);
7. }
8.
9. /* REQUEST */
10. gTranslate.translate("Hi, My name is <b>Ahmad Amarullah</b>","en|
id","html",berhasil2);
11.
12. /* CALLBACK */
13. function berhasil2(txt){
14. alert("Hasil Terjemahan HTML: "+txt);
15. }

Cara Kerja gTranslate

Selain mengetahui bagaimana cara penggunaan gTranslate, para programmer ada baiknya
mengerti juga bagaimana cara kerja gTranslate sehingga dapat melakukan penterjemahan
dengan menggunakan fasilitas Google Translate.

Berikut adalah tahap-tahap yang dilakukan oleh gTranslate untuk mendapatkan hasil
penterjemahan dari Google Translate:

• Memotong-motong string sumber dengan maksimal karakter sebanyak 400 karakter.

Pada gtranslate.js terdapat fungsi chunkData yang dapat Anda pelajari.
• Menyimpan data banyaknya data chunk/bagian (recivedChunk), dan menset data
yang telah di dapat (revicedData) menjadi 0.
• Melakukan looping pada chunks/bagian-bagian tersebut untuk membuat url masing-
masing bagian dan melakukan requestnya pada
"https://ajax.googleapis.com/ajax/services/language/translate"
• Pada variabel get ditambahkan callback dan context untuk menandai bagian manakan
yang telah diterjemahkan.
• Menjalankan fungsi createScript untuk memanggil javascript dengan alamat yang
telah dibuat pada masing-masing bagian. Script ini akan secara otomatis memanggil
fungsi callback pada interface gTranslate ini.
• Pada fungsi callback, semua data yang diterima dimasukan ke dalam array bagian
yang telah diterjemahkan, dan menset data yang telah didapat (revicedData) secara
incremental, kemudian mencocokan dengan jumlah bagian ( chunkData ), bila
 hasilnya sama, maka data-data tersebut sudah dapat disatukan, dan interface dapat
segera memanggil fungsi callback yang diinput ketika pemanggilan fungsi translate.

Mungkin Anda sedikit pusing? tentu saja, karena cara terbaik untuk mengerti cara kerja
interface gTranslate ini adalah dengan membaca sendiri script gtranslate.js itu sendiri .

Berikut adalah isi dari gtranslate.js

Lihat Source Code

/*<![CDATA[
*
* Google Translate JS 1.00
* (c) 2010 amarullz@yahoo.c

1. /*<![CDATA[
2. *
3. * Google Translate JS 1.00
4. * (c) 2010 amarullz@yahoo.com
5. * http://blog.unikom.ac.id/amarullz/
6. *
7. * This SCRIPT was Free to Use, but please always include
8. * this main coder comment information in production.
9. *
10. * USAGE:
11. * ======
12. * gTranslate.translate(text_to_translate,langpair,text_type,callbackFunc);
13. * - text_to_translate : Buffer Text/HTML to Translate
14. * - langpair : Lang Pair (e.g: en|id or id|en)
15. * - text_type: html/plain
16. * - callbackFunction : Function to handle the respond data
17. *
18. * CALLBACK FUNCTION:
19. * ==================
20. * function(isSuccess,translated_text){
21. * ...
22. * }
23. *
24. *******************************************************/
25.
26. var gTranslate={
27. lastError:'',
28. onloadCallback:null,
29. isBusy:0,
30. numberChunk:0,
31. recivedChunk:0,
32. revicedData:[],
33. googleAPIKEY:'',
34. googleUSERIP:'',
35.
36. /* Creating Script for Data Stream */
37. createScript:function(uri,resetholder){
38. if (!gTranslate.getID('gTranslateRootScript')){
39. var d = document.createElement('div');
40. d.setAttribute('id','gTranslateRootScript');
41. d.style.display='none';
42. d.innerHTML='';
43. document.body.appendChild(d);
44. }
45. if (resetholder)
46. gTranslate.getID('gTranslateRootScript').innerHTML = '';
47. var s = document.createElement('script');
48. s.setAttribute('src',uri);
49. s.setAttribute('type','text/javascript');
50. s.setAttribute('async','true');
51. gTranslate.getID('gTranslateRootScript').appendChild(s);
52. },
53.
54. /* Get Element By ID */
55. getID:function(n){
56. return document.getElementById?
document.getElementById(n):document.all(n);
57. },
58.
59. /* Chunking */
60. chunkData:function(str,maxLength,ishtml){
61. var ret = '';
62. var rowc= 0;
63. var ont = false;
64. for (var i=0;i<str.length;i++){
65. var c = str.substring(i,i+1);
66. if ((c=="<")&&ishtml){
67. ont=true;
68. if (rowc>=maxLength){
69. ret+="\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n";
70. rowc=0;
71. }
72. ret+=c;
73. }
74. else if ((c==">")&&ishtml){
75. ont=false;
76. ret+=c;
77. if (rowc>=maxLength){
78. ret+="\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n";
79. rowc=0;
80. }
81. }
82. else if ((!ont)&&((c==" ")||(c=="\t")||(c=="\n"))&&(rowc>=maxLength)){
83. ret+=c+"\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n";
84. rowc=0;
85. }
86. else{
87. ret+=c;
88. }
89. rowc++;
90. }
91. return ret.split("\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n");
92. },
93.
94. init:function(GOOGLE_API,REMOTE_IP){
95. gTranslate.googleAPIKEY=GOOGLE_API;
96. gTranslate.googleUSERIP=REMOTE_IP;
97. },
98.
99. translate:function(text_to_translate,langpair,text_type,callbackFunc){
100. if (gTranslate.isBusy!=0){
101. gTranslate.lastError='Translating operation on used';
102. return false;
103. }
104.
105. /* Set On Busy */
106. gTranslate.isBusy=1;
107.
108. /* Reset Error Message */
109. gTranslate.lastError='';
110.
111. /* Onload Script Callback */
112. if (callbackFunc)
113. gTranslate.onloadCallback=callbackFunc;
114. else
115. gTranslate.onloadCallback=null;
116.
117. /* Clean Up */
118. var txt = text_to_translate.replace(/\r/g,'');
119.
120. /* Create Chunk */
121. var chunk = gTranslate.chunkData(txt,400,(text_type=='html')?
true:false);
122.
123. gTranslate.numberChunk = chunk.length;
124. gTranslate.recivedChunk= 0;
125. gTranslate.revicedData=new Array();
126. for (i=0;i<chunk.length;i++){
127. var urltmp =
"https://ajax.googleapis.com/ajax/services/language/translate?";
128. urltmp+="v=1.0";
129. if (gTranslate.googleUSERIP)
130.
urltmp+="&userip="+encodeURIComponent(gTranslate.googleUSERIP);
131. if (gTranslate.googleAPIKEY)
132.
urltmp+="&key="+encodeURIComponent(gTranslate.googleAPIKEY);
133. urltmp+="&context="+(i+1);
134. urltmp+="&callback=gTranslate.callback";
135. urltmp+="&langpair="+encodeURIComponent(langpair);
136. urltmp+="&format="+encodeURIComponent(text_type);
137. urltmp+="&q="+encodeURIComponent(chunk[i]);
138. gTranslate.createScript(urltmp,((i==0)?true:false));
139. }
140.
141. return true;
142. },
143.
144. /* YouTUBE Data Stream Callback */
145. callback:function(context,d,status_code,status_message){
146. gTranslate.revicedData[parseInt(context)-1]=new Array();
147. if (status_code==200){
148. gTranslate.revicedData[parseInt(context)-1]['data']=d.translatedText;
149. gTranslate.revicedData[parseInt(context)-1]['code']=status_code;
150. }
151. else{
152. gTranslate.revicedData[parseInt(context)-1]['code']=status_code;
153. }
154. gTranslate.recivedChunk++;
155. if (gTranslate.recivedChunk==gTranslate.numberChunk){
156. var return_text = '';
157. for (var i=0;i<gTranslate.numberChunk;i++){
158. if (gTranslate.revicedData[i]['code']==200){
159. return_text+= gTranslate.revicedData[i]['data'];
160. }
161. else{
162. return_text+='\n\n[!::[ ERROR TRANSLATE CODE: '+
(gTranslate.revicedData[i]['code'])+' ]::!]\n\n';
163. }
164. }
165. if (gTranslate.onloadCallback){
166. gTranslate.onloadCallback(return_text);
167. }
168. else{
169. if (confirm('Translate Completed Without Callback
Function\n\nPress OK To Show The Translated Strings')){
170. alert(return_text);
171. }
172. }
173. gTranslate.isBusy=0;
174. }
175. }
176. };
177.
178.
 179. /*]]>*/

Penutup
Mudah-mudahan dengan adanya script di atas, para programmer dapat merasa lebih
dimudahkan untuk berkreasi dengan website yang sedang dibangunnya, juga menambah
kreativitas untuk membuat suatu aplikasi web yang sangat kaya akan fasilitas.

Terima Kasih, dan sampai jumpa pada blog-blog lainnya yang lebih menarik...