NodeJS Adım 9 – Express Framework

Adım Adım Nodejs yazı dizimizin bir önceki bölümünde web server oluşturmayı ve kendi web sitelerimizi nasıl yapabileceğimizi gördük.

Peki bu işin daha profesyonel olan bir yolu yok mu? Daha kolay bir şekilde web sitesi yapabileceğimiz, bir çok angarya işten bizi kurtaracak bir yol yok mu? Tabiki var. Nodejs için yazılmış Express Web Framework’u tamda bu işe yarıyor. npm üzerinden paket olarak yükleyebileceğimiz Express sayesinde Url parse işlemlerini(routing) daha kolay bir şekilde yapabilir, statik dosya yönetimi işlerimizi daha kolay bir şekilde yapabiliriz. Kısaca nodejs ile web sitesi/uygulaması yapmak için gerekli tüm alt yapıyı Expressjs bize sağlamaktadır. Express’i yüklemek için konsola npm install express –save  yazmamız yeterli. Express’te diğer paketler gibi yüklenecektir. Küçük bir örnek yapalım.

var express=require('express');
var app=express();

app.get('/',function (req,res) {
    res.send('Merhaba Dünya!');
});

app.listen(3000,function () {
    console.log('Uygulama 3000 portunda çalışmakta.')
});

Yukarıdaki örneğimizde basit bir web uygulaması yaptık. Kodda neler olduğuna takılmayın. Aşağıda ayrıntıları anlatacağım.

Yönlendirme ( Routing )

Routing yani Yönlendirme gelen Url’e göre nasıl bir işlem yapılması gerektiğini, nereye yönlendirilmesi gerektiğini belirttiğimiz yapıdır. Express Framework’de bunu yapması çok kolaydır. Express içerisindeki routing yapısı Http methotlarıyla çalışır. Genel yapı app.METHOT(URL_YOLU, CALLBACK)  şeklindedir.  Metot kısmında Http protokolünün GET, POST, PUT, DELETE … gibi metotlarından biri kullanılır.

“Bildiğiniz gibi web siteleri/uygulamaları HTTP protokolü üzerinde çalışır. Siz bir tarayıcıya site adresini yazdığınızda Sunucuya HTTP protokolü üzerinden HTTP’nin herhangi bir metodu ile beraber gider. Bu sayede sunucu üzerinde url ve http metoduna göre işlem yapılabilir. Varsayılan HTTP Metodu GET metodudur. Siz tarayıcı üzerinden bir adrese girmeye çalıştığınızda tarayıcı varsayılan olarak GET metodunu kullanır.”

URL_YOLU kısmına URL paterni yazılır. Gelen url bu paterne uyuyorsa CALLBACK fonksiyonu çalıştırılır. Callback fonksiyonu iki değişken alır. Birincisi request yani istekler hakkında bilgi aldığımız, diğeri response yani dönüşleri yönettiğimiz değişken. (Değişken adlarını istediğiniz gibi değiştirebilirsiniz.) Routing ile alakalı bir örnek yapalım.

var express=require('express');
var app=express();

app.get('/',function (req,res) {
    res.send('Ana Sayfa!');
});

app.post('/',function (req,res) {
    res.send('Ana Sayfa Post!');
});

app.get('/Sayfa1',function (req,res) {
    res.send('Sayfa 1!');
});

app.post('/SayfaPost',function (req,res) {
    res.send('Sayfa Post!');
});

app.put('/SayfaPut',function (req,res) {
    res.send('Sayfa Put!');
});

app.delete('/SayfaDelete',function (req,res) {
    res.send('Sayfa Delete!');
});

app.listen(3000,function () {
    console.log('Uygulama 3000 portunda çalışmakta.')
});

(Gif’te kullandığım uygulamanın adı Postman. Postman ile web sitelerini/uygulamalarını Url ve Http metoduna göre simule edebilirsiniz. Buradan indirebilirsiniz.)

Kodlarımıza bakacak olursak ilk olarak yüklemiş olduğumuz express paketini express değişkenine attık. Daha sonra app isminde bir express uygulaması oluşturduk. Bir sonraki işlemde bir route oluşturuyoruz. Bu route üzerinde url olarak ‘/’ girildiğinde yani boş bırakıldığında ne olması gerektiğini belirttik. Bunun için oluşturmuş olduğumuz app uygulamasının get fonksiyonunu kullandık. get fonksiyonunun callback fonksiyonu iki değişken alıyor: req,res. Birisi request yani isteği yönettiğimiz req diğeri response yani cevabı yönettiğimiz res değişkeni. Callback fonksiyonu içerisinde res değişkeninin send fonksiyonu ile kullanıcıya bilgi gönderebiliyoruz. Burada kullanıcıya Ana Sayfa! yazısını gönderdik. Diğer route işleminde yine url olarak ‘/’ girildiğinde ama Http Post metodu kullanıldığında ne olması gerektiğine bakıyoruz. Diğer route işlemlerinde farklı Http metodları ve farklı Urller üzerinde neler yapılması gerektiğini belirtiyoruz. Mantık basit. Http metodunu seç, Url belirle, callback yaz. Expressdeki route mantığı bu kadar. Yukarıdaki Gif üzerinde Urllere yanlış Http metot ile bağlanırsanız nasıl tepki verdiğini görebilirsiniz. Örnek kodumuzun son bölümünde de app express uygulamasını 3000 portundan çalışmasını sağlıyoruz.

Route ile alakalı başka bir örnek yapalım. Kodlarımız şöyle:

var express=require('express');
var app=express();

app.get('/',function (req,res) {
    res.send('Ana Sayfa!');
});

app.all('/sayfahepsi',function (req,res) {
    res.send('Sayfa Hepsi!');
});

app.get('/ab?cd',function (req,res) {
    res.send('Sayfa ab?cd!');
});

app.get('/de+fg',function (req,res) {
    res.send('Sayfa de+fg!');
});

app.get('/hi*jk',function (req,res) {
    res.send('Sayfa hi*jk!');
});

app.get('/sayfa/:degisken1/parametre/:degisken2', function(req, res) {
    res.send(req.params);
});

app.listen(3000,function () {
    console.log('Uygulama 3000 portunda çalışmakta.')
});

Örneğimize bakacak olursak aslında bir önceki örnek ile neredeyse aynı. Başlangıçta yine bir express uygulaması oluşturduk. Sonrasında route’lar tanımladık. Sonrasında uygulamayı 3000 portu üzerinden açtık. Aradaki fark route tanımlama işlemlerinde. İlk route tanımı ilk örnekteki ile aynı. İkinci route tanımına bakacak olursak, farklı olarak app.all(…) fonksiyonu kullanıldı. Bu fonksiyon URL sağlandığı sürece bu route tanımının bütün HTTP metotlarıyla çalışacağını gösteriyor. Üçüncü route tanımına bakalım. Burada da farklı olarak URL kısmında “/ab?cd” ifadesi kullanıldı. Buradaki ? işareti kendinden önceki gelen harfin seçimlik olduğunu gösteriyor. Yani biz tarayıcı üzerinden “/abcd” de yazsak “/acd” de yazsak yine bu route çalışacak demektir. Dördünce route tanımında ise URL kısmında “/de+fg” ifadesi kullanıldı. Buradaki + işaretinin anlamı ise kendinden önceki gelen harfin istediği kadar çoğaltılabileceği anlamına geliyor. Yani “/defg” de yazsak “/deeeeeefg” de yazsak bu route çalışacak. Beşinci routing tanımında ise URL kısmında “/hi*jk” ifadesi kullanıldı. Buradaki * işaretinin anlamı araya istediğiniz yazabilirsiniz demek. Yani “/hijk” yazsakta “/hi123456jk” yazsakta bu route çalışacak demektir.  Altıncı ve son route tanımına bakacak olursak burada da URL içerisinde degisken1 ve degisken2 diye iki tane degişken tanımı bulunmaktadır. Değişken tanımları önlerine konan : işareti ile belirtilmektedir. URL içerisindeki bu değişkenlere ne yazılırsa Program içerisinden onlara erişebiliriz demektir. Bu değişkenlere route tanımının callback fonksiyonundaki req değişkeninin params değişkeni ile erişebiliriz. Örneğin URL  “/sayfa/111/parametre/222” yazdığımızda bu değişkenlere “req.params.degisken1” yada “req.params.degisken2” şeklinde erişebiliriz. Bütün bu route tanımlarının çıktısını yukarıdaki Gif üzerinde görebilirsiniz. Express Framework’ün route yapısı hakkında daha fazla bilgiye bu adresten ulaşabilirsiniz.

Sabit Dosyalar ( Static Files )

Bir önceki bölümde hatırlarsanız yazılan Url’e göre dosya döndürmeyi öğrenmiştik. Aynı işlemi express üzerinde route tanımlayarak da yapabiliriz. Ama büyük projelerin çoğunda onlarca css, js ve resim dosyaları vardır. Hepsi için tek tek route tanımlaması mı yapmamız gerekiyor? Tabiki hayır. Express Frameworkün yazarları bunu düşünmüş ve bunun için Statik Files özelliğini yazmışlar. Bir örnek üzerinden gidelim. Kodlarımız şöyle:

var express=require('express');
var app=express();

app.get('/',function (req,res) {
    res.send('Ana Sayfa!');
});

app.use(express.static('public'));

app.use('/js',express.static('static'));

app.listen(3000,function () {
    console.log('Uygulama 3000 portunda çalışmakta.')
});

Örneğimizin ilk bölümünde daha önceki örneklerde gördüğümüz gibi express modülünü çağırıp app isminde bir uygulama oluşturuyoruz. Devamın bir route tanımlaması yazpıyoruz. Son bölümde de hangi port üzerinde çalışacağını belirliyoruz. Buraya kadar herşey aynı. Farklı olan 8. ve 10. satırlar. 8. satırda uygulamamızda public klasörünün dışarıdan direkt olarak erişilebileceğini ifade ediyoruz. Yani public klasörü içerisinde bulunan bütün dosyaları URL’in sonuna ekleyerek çağırabiliriz. (klasörün adını yani public yazmadan). 10. satırda ise sanal klasör kullanıyoruz. Yani static klasörünün içerisindeki herşeyi dışarıdan erişime açıyoruz.(klasörün adını yani static yazmadan). Ama bu dosyalara erişirken başına js yazarak erişiyoruz. Yukarıdaki gifte kodun çalışır hali dosya sistemi ile gösterilmektedir. Sizlerde denemeler yaparsanız aklınızda daha net oturacaktır.

Bir sonraki bölümde middleware kavramına ve express generator kavramlarına değineceğiz.

Makalede kullanılan kodlara buradan ulaşabilirsiniz.


Bloga e-posta ile abone ol

Bu bloga abone olmak ve e-posta ile bildirimler almak için e-posta adresinizi girin.

Exit mobile version