Javascript Dersleri

Javascript İle Yandex Translate Api Kullanımı

Web sitenizde dil çevirisi olarak yada yapacağınız kayıtları eş zamanlı olarak çevirmeniz gerekebilir. Yada web sitenizde bir uygulama olarakta bu işlemi sunmak isteyebilirsiniz. Hatta abartacak olursak, web sitenizde yer alan kelimelerin hepsini bir filtreden geçirip ingilizce kelime verisi oluşturmak isteyebilirsiniz. Bu tarz işlemler için de bir api kullanmak sağlıklı sonuçlar elde etmenizi sağlayacaktır.

Translate işlemi için Yandex servisini kullanacağız. Gönül Google servislerini kullanmak isterdi ama google işte. Ne zaman ne isteyeceği ve ne yapacağı belli olmuyor. Maddi ve manevi olarak. Bu yüzden Yandex ile Translate işlemini gerçekleştirip sonuç almaya çalışacağız.

Yandex Translate Api Key Alımı

Bu tarz işlemler yapabilmek için bir api key’e ihtiyaç vardır. Yandex Translate işlemini gerçekleştirmek için BURADAN hesabınıza giriş yaparak api key oluşturuyorsunuz. Sayfaya giriş yaptığınızda Sözleşmeyi kabul ettiğinizde Get API Key butonu aktif olacaktır. Bu botona tıklatarak api key sayfasına yönlendirileceksiniz. Bu sayfada yer alan api anahtarlarını bir yere kayıt etmeniz gerekmektedir.

HTML Kodlarını Oluşturma

Yandex Translate Api keyini aldıktan sonra bu işlemleri gerçekleştireceğimiz HTML kodlarını oluşturalım. Sonrasında javascript kodlarını oluşturarak Translate işlemini bitirmiş olalım.

<textarea id="kaynak">Onun Arabası var</textarea>

<select id="dil">
    <option value="en">English</option>
    <option value="tr">Turkish</option>
</select>

<button id="cevir">Çevir</button>

<div id="sonuc"></div>

Yukarıda basit bir HTML yapısı yer almaktadır. İlk olarak textarea alanından çevirilecek olan kelime yada cümleyi alıyoruz. Sonrasında hangi dile çevirileceğini belirtmek için select bölümünden seçim yapıyoruz. Seçilen verileri button ile gönderiyoruz. Alacağımız sonucu da DIV etiketine atayacağız. Bunun içinde bu etikete ID olarak sonuc değerini veriyoruz.

Javascript Kodlarını Oluşturma

Sıra geldi javascript kodlarını oluşturmaya. Burada alınan veriler doğrultusunda URL ile verileri POST ediyoruz ve dönen sonucu JSON formatından çevirip sunuyoruz. Bu kadar basit.

<script>
var adres   = "https://translate.yandex.net/api/v1.5/tr.json/translate";
var keyAPI  = "APİ KEY BURAYA YAZILACAK";
/* Çevir Butonuna tıklatıldığında işlemi başlatıyoruz. */
document.querySelector('#cevir').addEventListener('click', function(){
   /* Verileri alıp api URL'ine gönderiyoruz */
    var xhr = new XMLHttpRequest(),
         /* Çevirilecek veriyi alıyoruz */
        kaynak = document.querySelector('#kaynak').value,
        /* Hangi dile çevirileceğini tanımlıyoruz. */
        dil    = document.querySelector('#dil').value
        /* Link yapısını oluşturuyoruz */
        veri   = "key="+keyAPI+"&text="+kaynak+"&lang="+dil;
        /* Verileri gönderiyoruz */
    xhr.open("POST",adres,true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(veri);
    xhr.onreadystatechange = function(){
       /* Gönderilen değer için sonuç sağlanmışsa */
        if (this.readyState==4 && this.status==200) {
            var res  = this.responseText;
            var json = JSON.parse(res);
            if(json.code == 200) {
               /* sonucu yazdırıyoruz */
               document.querySelector('#sonuc').innerHTML = json.text[0];
            }
            else {
               document.querySelector('#sonuc').innerHTML = "Error Code: " + json.code;
            }
        }
    }
}, false);
</script>

Yukarıdaki kodları ve inceleme bölümleri okuduğunuzda işlemin nasıl yapıldığını rahatlıkla anlayabilirsiniz. Yapılan işlem aslında oldukça basittir. Butona tıklatıldığında işlem başlatılmaktadır. HTML etiketlerinden alınan verilerle URL yapısı oluşturulup, POST ile gönderilmektedir. URL değerine veriler gönderildikten sonra sonuç JSON olarak döndürülecektir. JSON ile elde edilen veriyi işleyip DIV etiketine yazdırıyoruz.

BU işlemi uzun yazılarda yada paragraflarda gerçekleştirmeyiniz. Kelime ve tek bir cümle üzerinden yapmanızda fayda var. Çünkü çeviri için belirli bir sınır bulunmakta. Sorun yaşamamak için kısa çeviriler yapmanızı öneririm.

Daha Fazla Göster

İlgili Makaleler

Kapalı