Merhaba sevgili geliştiriciler! Bugün sizlere bir web uygulaması yapmayı adım adım anlatacağım. Bu yazıda, Express.js ile basit ama güçlü bir web uygulaması oluşturmayı öğreneceksiniz. Eğer JavaScript’e aşina iseniz ve Node.js kullanmaya karar verdiyseniz, Express.js tam size göre! Hazırsanız, başlayalım.

Express.js Nedir?

Öncelikle, Express.js nedir? Express.js, Node.js üzerinde çalışan bir web framework'üdür. Basit ve esnek bir yapısı vardır, bu da geliştiricilerin hızlıca web uygulamaları oluşturmasına olanak tanır. Express.js, HTTP isteklerini işleme, yönlendirme (routing), dinamik içerik oluşturma ve daha fazlasını yapmak için mükemmel bir araçtır.

Adım 1: Express.js Kurulumu

İlk adımımız Express.js'i kurmak. Eğer Node.js yüklü değilse, önce Node.js’i indirip kurmanız gerekir. Ardından terminal veya komut satırını açarak Express.js’i projenize dahil etmek için şu komutu yazabilirsiniz:

npm init -y

Yukarıdaki komut ile bir `package.json` dosyası oluşturduktan sonra, Express.js’i kurmak için aşağıdaki komutu yazın:

npm install express

Bu işlem tamamlandığında, Express.js artık projenizde kullanılabilir hale gelir.

Adım 2: Basit Bir Sunucu Oluşturma

Şimdi Express.js’i kullanarak basit bir sunucu oluşturalım. Bunun için yeni bir dosya oluşturun, ismini `app.js` koyabilirsiniz. İçeriği şöyle olacak:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Merhaba, Express.js ile Web Uygulamanız Hazır!');
});

app.listen(port, () => {
  console.log(`Sunucu ${port} portunda çalışıyor`);
});

Bu basit kod parçası, uygulamanızın `/` (ana sayfa) route’una gelen tüm HTTP GET isteklerine “Merhaba, Express.js ile Web Uygulamanız Hazır!” şeklinde cevap verecektir.

Adım 3: Dinamik İçerik Eklemek

Şimdi, sadece sabit içerikler değil, dinamik içerikler de eklemeyi öğrenelim. Dinamik içerik, kullanıcılardan gelen verilere göre farklı sonuçlar döndürebilir. Örneğin, kullanıcının adını girip kendisine özel bir mesaj göstermek için aşağıdaki gibi bir kod kullanabiliriz:

app.get('/merhaba/:isim', (req, res) => {
  const isim = req.params.isim;
  res.send(`
Merhaba, ${isim}!
`);
});

Burada, `:isim` ifadesi bir parametreyi temsil eder. Kullanıcı URL'ye örneğin `/merhaba/John` yazarsa, ekranda “Merhaba, John!” mesajını görecektir.

Adım 4: Middleware Kullanımı

Express.js’in gücünü artıran bir diğer özellik ise middleware kullanımıdır. Middleware, gelen istekleri işlemek için kullanılan fonksiyonlardır. Örneğin, bir kullanıcının her isteği öncesinde bazı doğrulamalar yapabiliriz.

Örnek olarak, basit bir logging middleware’i yazalım:

app.use((req, res, next) => {
  console.log(`${req.method} isteği yapıldı: ${req.url}`);
  next();
});

Yukarıdaki kod, her HTTP isteğinde isteğin türünü (GET, POST, vb.) ve URL’sini konsola yazdıracaktır.

Adım 5: Templating (Şablonlar) ile Dinamik Sayfalar

Birçok web uygulaması şablonlara dayanır. Express.js, dinamik HTML sayfalarını oluşturmak için template engines ile çalışabilir. En popüler template engine’lardan biri EJS’tir.

EJS kullanarak dinamik içerik eklemek için önce EJS’i yüklememiz gerekiyor:

npm install ejs

Sonrasında, Express.js’e şablonları nasıl kullanacağını belirtelim:

app.set('view engine', 'ejs');

app.get('/sayfa', (req, res) => {
  res.render('sayfa', { isim: 'John' });
});

Burada, `sayfa.ejs` adında bir şablon dosyası oluşturmanız gerekecek. Bu dosyanın içinde şunu kullanabilirsiniz:

Merhaba, <%= isim %>!

Bu şekilde, dinamik içerik şablonları kullanarak kullanıcıya özelleştirilmiş sayfalar sunabilirsiniz.

Adım 6: Uygulamayı Çalıştırma

Şimdi her şey hazır! Uygulamanızı çalıştırmak için terminale şu komutu yazabilirsiniz:

node app.js

Bu komut, uygulamanızı başlatacak ve terminalde şu mesajı görmelisiniz: “Sunucu 3000 portunda çalışıyor.” Tarayıcınızda `http://localhost:3000` adresine giderek uygulamanızın çalışıp çalışmadığını kontrol edebilirsiniz.

Sonuç

Ve işte karşınızda, Express.js ile yapılmış basit ama etkili bir web uygulaması! Öğrendiğimiz bu temel adımlarla dinamik içerik oluşturabilir, yönlendirme yapabilir ve kullanıcı taleplerine göre özelleştirilmiş yanıtlar verebilirsiniz. Express.js, çok güçlü ve esnek bir araçtır, bu yüzden onu daha ileri seviye projelerde kullanabilirsiniz.

Umarım bu yazı, Express.js ile web uygulamaları geliştirmeye başlamak için size yardımcı olmuştur. Şimdi sıra sizde! Kendinize harika uygulamalar geliştirin ve kodunuzu paylaşın!