penggunaan google application programming interface (api) translate
DESCRIPTION
Contoh Penggunaan Google APITRANSCRIPT
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 [email protected]
* 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/