Node
JS ile oluşturduğumuz sunucu üzerinde çalışacak ve kur değerlerini JSON metninin içerisinden çeken ve bunu bize gösteren web uygulaması gerçekleştirmiş olacağız.
1) Öncelikle bilgisayarımıza
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]‘i kuruyoruz.
2) Kurulum gerçekleştikten sonra bilgisayarımızda bir klasöre girerek istediğimiz isimde bir .
js uzantılı dosya (isterseniz node
js ile de bu dosyayı komut satırı üzerinden oluşturabilirsiniz) oluşturuyoruz.
3) Cmd(komut satırı) üzerinden oluşturduğumuz .
js uzantılı dosyanın konumuna ulaşıyoruz. (>cd “bulunduğu konum”)
4) Öncelikle Node
JS ile kullanacağımız modülleri npm install modül adı komutuyla yüklememiz gerekli. Bizim kullanacaklarımız aşağıdadır:
>npm install request
>npm install body-parser
>npm install express
Bu üç modülü kullanacağız.
Aşağıdaki kod bloğunu kendi oluşturduğunuz .
js içerisine atıp cmd üzerinden node oluşturduğumdosya.
js şeklinde çalıştırdığınızda sunucumuz localhost üzerinden çalışacak ve web tarayıcıya
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] yazdığımızda sayfamız gelecektir.
Bu işlemlerin çıktısı aşağıdaki gibidir; Running at Port 5000 üzerinden localhost’un başarılı şekilde çalıştığını göstermektedir.
Şimdi tarayıcıya
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] yazdığımızda fotoğraftaki çıktıyı almalıyız.
HTML,CSS ve JAVASCRİPT kullanımı kod içerisindedir.
Kod içerisinde sizlere verilmesi gereken bilgileri yorum satırı olarak ekledim. Kodu anlamanıza yardımcı olacaktır. Sorularınızı soru sor kısmından iletebilirsiniz.
Kod:
var request=require('request')
/istek için kullanılır.
var bodyParser=require('body-parser');
var express=require('express')
/express yöntemi kullanılır.
var app=express()
/app oluşturulur.
app.get('/',function(req,res){//get komutu ile istek alınır. kök dizininde işlenir.
var url=`https://api.canlidoviz.com/web/items?marketId=1&type=0`
/hocanın verdiği link url de tutulur.
request(url,function(error,response,body){//request işlemi için gerekli kontroller yapılır
if(!error&&(response.statusCode==200))//doğru çalıştığını gösterir.
{var kur=JSON.parse(body)
/body den json parse edilir.
var kurStr=JSON.stringify(kur)
/stringify ile çevrilerek karşı tarafa yollanır.
if(kur[0].name==undefined)//var olup olmadığı kontrol edilir.
res.send('JSON nesnesi yoktur.')
/gerekli hata verilir.
else{
res.writeHead(200,{"Content-Type":"text/html"});
var gonder;var i=0
/gerekli tanımlamalar.
for(nesne of kur){//özel for ile nesne değişkeni içine atılan nesne ile name kısmı alınır.
gonder+="<option value="+i+">"+nesne.name+"</option>"
/select in içi gonder ile doldurulacak.
i++
/option value değeri tutulur.
}res.write('<html><meta charset="utf-8"><body>'+//res.write ile html css ve javascript string şeklinde yazılır.
'<title>Coded By Metehan</title>'+
'<div style=" width:50%; height:51%; background-color: rgb(245,245,245) ">'+
'<h2 style=" width:60%; height:4% ">Node
JS ile Kur İşlemleri (Veri Çekme)</h2>'+//kurlar
'<div style="margin-top:0%; width:10%; height: 48% "><select id="kurlar" size="'+25+'" onchange="func()">'+//select yapısı
'document.write("'+gonder+'");'+//optionlar bastırılır.
'</select></div>'+//select yapısı sonlanır.
'<div style=" margin-left:20%; margin-top:-25%; text-align:left; width:50%; height: 52% ">'+
'<br><h3 >Kur İsmi :<label id="id1"></label></h3><br>'+//istenilen Kur İsmi html ile gösterilir.
'<h3 >Alış :<label id="id2"></label></h3><br>'+//istenilen Alış html ile gösterilir.
'<h3 >Satış :<label id="id3"></label></h3><br>'+//istenilen Satış değeri html ile gösterilir.
'<h3 >Yüzde Değişim :<label id="id4"></label></h3><br>'+//istenilen Yüzde Değişim değeri html ile gösterilir.
'<h3 >Döviz Kodu :<label id="id5"></label></h3><br>'+//istenilen Döviz Kodu html ile gösterilir.
'</div>'+
'<script>'+//script ile javascript işlemleri gerçekleştirilir.
'function func(){'+//func ile istenilen veriler onchange özelliği ile sayfa da gösterilir.
'var atama;'+
'var arrayJSON='+kurStr+';'+//kurStr stringi html de tutulur.
'var idkurlar = document.getElementById("kurlar");'+//onchange den gelen value değeri belirlenir.
'var select_value = idkurlar.options[idkurlar.selectedIndex].value;'+
'for (var i = 0; i < arrayJSON.length; i++) {'+//arrayjsonda dönülür.
'if (select_value==i) {'+//doğru değerler ekrana bastırılır.
'document.getElementById("id1").innerHTML=arrayJSO N[i].name;'+//id lere atama yapılır.
'document.getElementById("id2").innerHTML=arrayJSO N[i].buyPrice;'+//id lere atama yapılır.
'document.getElementById("id3").innerHTML=arrayJSO N[i].sellPrice;'+//id lere atama yapılır.
'document.getElementById("id4").innerHTML=arrayJSO N[i].dailyChangePercentage;'+//id lere atama yapılır.
'document.getElementById("id5").innerHTML=arrayJSO N[i].code;'+//id lere atama yapılır.
'}'+
'}'+
'}'+
'</script>'+//script kapatılır.
'<button id="btn" onclick="location.reload()" style="margin-left:50%; margin-top:15%;">Kuru Yenile</button>'+//yenileme butonu
'</div>'+
'</body></html>')
/html tagı kapatılır.
res.end()
/sonlandırılır.
}
}
else
res.send('Veri yok.');
});});
app.listen(5000,function(){console.log('Node.
js Web Server is Running at Port 5000.');})
/dinleme yapılır.
Sorularınız için, burdan iletişime geçebiliriz.
Herkese hayırlı forumlar IF ailesi.