Google API Translate 1

Tugas Pemograman Web Teori

GOOGLE APPLICATION PROGRAMMING INTERFACE (API)

TRANSLATE

Oleh:

Maksum Ro’is Adin Saf (09.11.2680),

Adam Ghifari Nuskara (09.11.2670),

Bondan Hartanto (09.11.2688)

1. Pendahuluan

Banyak dari Kita yang belum mengetahui apa saja yang diberikan Google kepada Kita

secara Gratis selain mesin pencariannya. Salah satunya Google API. Bisa di lihat pada

code.google.com.

Google API memuat berbagai macam aplikasi yang dapat Kita gunakan langsung

pada web Kita sehingga web Kita dapat menggunakan berbagaimacam fasilitas dari Google.

Sebut saja Search API, Feeds API sampai Map API.

Berikut adalah link-link yang berguna untuk dipelajari atau mungkin hanya untuk

menambah referensi ilmu kita:

Google Code.

Google Code merupakan halaman utama dari berbagai macam API yang diberikan oleh

Google dan juga tempat berbagi dan mengembangkan aplikasi-aplikasi Open Source

dalam fasilitas trunk-nya.

Google AJAX APIs.

Google AJAX APIs merupakan halaman utama dari berbagai macam API yang

berbasiskan AJAX/Javascript untuk berkomunikasi antara website yang Kita bangun

dengan fasilitas yang Google berikan. Di dalamnya terdapat fasilitas:

o Google Map API

o Google AJAX Search API

o Google AJAX Feeds API

o Google Visualization API

o Google AJAX Language API

o AJAX Libraries API

Google API Translate 2

o Google Book Search APIs

o Google Earth API

o Google Translate API

o Google Friend Connect APIs

1. Google API

Sebelum Kita masuk ke dalam pembahasan tentang penggunaan Google Translate

dengan

Javascript, kita akan melakukan kilas balik tentang Google API.

Tidak jauh berbeda dengan Google API Playground, Google Map API dan Google

Feeds Tambah RSS Pada Web Hanya Dengan Javascript begitu juga dengan Google

Translate API.

Secara garis besarnya, Google API adalah sebuah Application Interf ace 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 mendaf tarkan domainnya dan mendapatkan API

KEY di google denganmengunjungi halaman berikut ini http :code.google.com /apis/ base/

signup .html.

2. Google Translate API

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 f

asilitas 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 pemanf aatan f asilitas Google Translate yang lebih mudah

digunakan dan mendukung Multi Chunk, sehingga dapat menghapus keterbatasan jumlah

karakter tersebut.

Contoh :

Google API Translate 3

CATATAN: Semua data diambil dengan menggunakan Javascript tanpa perantara

server lainnya, jadi transf er data hanya dibebankan kepada user.

3. Cara Menggunakan Google API Translate

Pada File di atas bila telah di extract akan terdapat 2 f ile, 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:

<script type="text/javascript">

/*<![CDATA[

*

* SCRIPT Untuk mengambil data dari Google Translate

*/

gTranslate.init('','');

function translateit(){

var txt=document.getElementById('text_to_translate').value;

document.getElementById('translate_btn').disabled='disabled';

document.getElementById('translate_btn').value='Silahkan

Tunggu...';

gTranslate.translate(txt,document.getElementById('langpair').va

lue,document.getElementById('tipe').value,translate_callback);

} function translate_callback(txt){

document.getElementById('translate_result').value=txt;

document.getElementById('translate_btn').value='Translate';

document.getElementById('translate_btn').disabled='';

}

/*]]>*/

</script>

Google API Translate 4

Hal pertama yang dilakukan adalah dengan memanggil gTranslate.init, dimana

pada keduaargumen tersebut diberikan string kosong kedua-duanya. Tapi pada

implementasinya nanti, bila aplikasi web tersebut telah memiliki domain sendiri, maka

atribut f ungsi init tersebut harus diisi aplikasi web tersebut telah memiliki domain sendiri,

maka atribut f ungsi init tersebut harus diisi dengan Google API KEY dan Remote IP seperti

pada contoh berikut: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 f ungsi 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 f ungsi gTranslate.translate.

Pada baris terakhir, terdapat fungsi translate_callback dengan argumen txt, dimana

f ungsi ini akan dipanggil bila data teks yang telah di translate sudah selesai didapatkan.

argumen txt akan berisi teks yang telah diterjemahkan, pada f ungsi ini argumen txt ini akan

langsung dimasukkan pada textarea yang memiliki id="translate_result".

4. Interface gTranslate

Pada bagian ini, akan diterangkan cara penggunaan gTranslate dengan menggunakan

beberapa f ungsi yang sederhana. Yang harus diketahui dari gTranslate adalah terdapatnya

suatu f ungsi callback yang harus dimasukkan ketika Anda memanggil f ungsi 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 interf ace 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 f ield dalam f orm HTML, misalnya dalam

Google API Translate 5

textarea, atau input dengan mengakses data valuenya. langpair - Merupakan pasangan

bahasa sumber dan bahasa tujuan dengan f ormat 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 f ungsi yang akan dipanggil ketika terjemahan telah didapatkan. Format

f ungsi untuk callback ini syaratnya harus memiliki 1 argumen yang akan memuat text hasil

terjemahan.

Berikut adalah contoh Penggunaan gTranslate.translate:

/* REQUEST */

gTranslate.translate("Hallo Nama Saya Ahmad

Amarullah","id|en","plain",berhasil);

/* CALLBACK */

function berhasil (txt){

alert("Hasil Terjemahan: "+txt);

}

/* REQUEST */

gTranslate.translate("Hi, My name is <b>Ahmad

Amarullah</b>","en|id","html",berhasil2);

/* CALLBACK */

function berhasil2(txt){

alert("Hasil Terjemahan HTML: "+txt);

}

5. 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 f asilitas Google Translate.

Berikut adalah t ahap-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 f ungsi chunkData yang dapat Anda pelajari.

Menyimpan data banyaknya data chunk/bagian (recivedChunk), dan menset data

yang telah di dapat (revicedData) menjadi 0.

Google API Translate 6

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 f ungsi createScript untuk memanggil javascript dengan alamat yang

telah dibuat pada masing-masing bagian. Script ini akan secara otomatis memanggil fungsi

callback pada interf ace gTranslate ini.

Pada f ungsi 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 datadata tersebut sudah dapat disatukan, dan interf ace dapat segera memanggil

f ungsi callback yang diinput ketika pemanggilan f ungsi translate.

Mungkin Anda sedikit pusing? tentu saja, karena cara terbaik untuk mengerti cara

kerja interf ace gTranslate ini adalah dengan membaca sendiri script gtranslate.js itu sendiri

.

Berikut adalah isi dari gtranslate.js

/*<![CDATA[

*

* Google Translate JS 1.00

* (c) 2010 amarullz@yahoo.com

* http://blog.unikom.ac.id/amarullz/

*

* This SCRIPT was Free to Use, but please always include

* this main coder comment information in production.

*

* USAGE:

* ======

*

gTranslate.translate(text_to_translate,langpair,text_type,cal

lbackFunc);

* - text_to_translate : Buffer Text/HTML to Translate

* - langpair : Lang Pair (e.g: en|id or id|en)

* - text_type: html/plain

* - callbackFunction : Function to handle the respond data

*

* CALLBACK FUNCTION:

* ==================

Google API Translate 7

* function(isSuccess,translated_text){

* ...

* }

*

*******************************************************/

var gTranslate={

lastError:'',

onloadCallback:null,

isBusy:0,

numberChunk:0,

recivedChunk:0,

revicedData:[],

googleAPIKEY:'',

googleUSERIP:'',

/* Creating Script for Data Stream */

createScript:function(uri,resetholder){

if (!gTranslate.getID('gTranslateRootScript')){

var d = document.createElement('div');

d.setAttribute('id','gTranslateRootScript');

d.style.display='none';

d.innerHTML='';

document.body.appendChild(d);

}

if (resetholder)

gTranslate.getID('gTranslateRootScript').innerHTML = '';

var s = document.createElement('script');

s.setAttribute('src',uri);

s.setAttribute('type','text/javascript');

s.setAttribute('async','true');

gTranslate.getID('gTranslateRootScript').appendChild(s);

},

/* Get Element By ID */

getID:function(n){

return

document.getElementById?document.getElementById(n):document.a

ll(n);

},

Google API Translate 8

/* Chunking */

chunkData:function(str,maxLength,ishtml){

var ret = '';

var rowc= 0;

var ont = false;

for (var i=0;i<str.length;i++){

var c = str.substring(i,i+1);

if ((c=="<")&&ishtml){

ont=true;

if (rowc>=maxLength){

ret+="\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n";

rowc=0;

}

PDFmyURL.com

ret+=c;

}

else if ((c==">")&&ishtml){

ont=false;

ret+=c;

if (rowc>=maxLength){

ret+="\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n";

rowc=0;

}

}

else if ((!ont)&&((c=="

")||(c=="\t")||(c=="\n"))&&(rowc>=maxLength)){

ret+=c+"\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n";

rowc=0;

}

else{

ret+=c;

}

rowc++;

}

return ret.split("\n\t\t\n<!-- SPLIT\tSTRING -->\n\t\t\n");

},

init:function(GOOGLE_API,REMOTE_IP){

Google API Translate 9

gTranslate.googleAPIKEY=GOOGLE_API;

gTranslate.googleUSERIP=REMOTE_IP;

},

translate:function(text_to_translate,langpair,text_type,callb

ackFunc){

if (gTranslate.isBusy!=0){

gTranslate.lastError='Translating operation on used';

return false;

}

/* Set On Busy */

gTranslate.isBusy=1;

/* Reset Error Message */

gTranslate.lastError='';

/* Onload Script Callback */

if (callbackFunc)

gTranslate.onloadCallback=callbackFunc;

else

gTranslate.onloadCallback=null;

/* Clean Up */

var txt = text_to_translate.replace(/\r/g,'');

/* Create Chunk */

var chunk =

gTranslate.chunkData(txt,400,(text_type=='html')?true:false);

gTranslate.numberChunk = chunk.length;

gTranslate.recivedChunk= 0;

gTranslate.revicedData=new Array();

for (i=0;i<chunk.length;i++){

var urltmp =

"https://ajax.googleapis.com/ajax/services/language/translate

?

";

urltmp+="v=1.0";

if (gTranslate.googleUSERIP)

urltmp+="&userip="+encodeURIComponent(gTranslate.googleUSERIP

);

if (gTranslate.googleAPIKEY)

urltmp+="&key="+encodeURIComponent(gTranslate.googleAPIKEY);

Google API Translate 10

urltmp+="&context="+(i+1);

urltmp+="&callback=gTranslate.callback";

urltmp+="&langpair="+encodeURIComponent(langpair);

urltmp+="&format="+encodeURIComponent(text_type);

urltmp+="&q="+encodeURIComponent(chunk[i]);

gTranslate.createScript(urltmp,((i==0)?true:false));

}

return true;

},

/* YouTUBE Data Stream Callback */

callback:function(context,d,status_code,status_message){

gTranslate.revicedData[parseInt(context)-1]=new Array();

if (status_code==200){

gTranslate.revicedData[parseInt(context)-

1]['data']=d.translatedText;

gTranslate.revicedData[parseInt(context)-

1]['code']=status_code;

}

else{

gTranslate.revicedData[parseInt(context)-

1]['code']=status_code;

}

gTranslate.recivedChunk++;

if (gTranslate.recivedChunk==gTranslate.numberChunk){

var return_text = '';

for (var i=0;i<gTranslate.numberChunk;i++){

if (gTranslate.revicedData[i]['code']==200){

return_text+= gTranslate.revicedData[i]['data'];

}

else{

return_text+='\n\n[!::[ ERROR TRANSLATE CODE:

'+(gTranslate.revicedData[i]['code'])+' ]::!]\n\n';

}

}

if (gTranslate.onloadCallback){

PDFmyURL.com

gTranslate.onloadCallback(return_text);

Google API Translate 11

}

else{

if (confirm('Translate Completed Without Callback

Function\n\nPress OK

To Show The Translated Strings')){

alert(return_text);

}

}

gTranslate.isBusy=0;

}

}

};

/*]]>*/

6. Penutup

Demikian Makalah singkat ini kami buat untuk memenuhi tugas perkuliahan

Pemograman Web Teori, Segala bentuk ide, saran, dan kritikan yang bersifat

membangun selalu kami nantikan. Terima Kasih

Google API Translate 12

Daftar Pustaka :

1. http://code.google.com/more/table/

2. http://sanjisan.wordpress.com/2010/03/30/membuat-website-translator-online-

menggunakan-google-api/

3. http://id.wikipedia.org/wiki/

4. http://amarullz.blog.unikom.ac.id/google-api.bz

5. http://www.speedytown.com/kimyong/index.php/2011/02/14/membuat-penerjemah-dengan-

php-google-translate-api/