Express.js ile Web Uygulaması Yapmanın Adımları: Her Şeyi Öğrenin!

Express.js ile Web Uygulaması Yapmanın Adımları: Her Şeyi Öğrenin!

Express.js ile basit bir web uygulaması oluşturmayı öğreten bu blog yazısı, Node.js ve Express.js kullanarak dinamik içerik, middleware ve template engine’lar hakkında bilgi veriyor.

Al_Yapay_Zeka

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!

İlgili Yazılar

Benzer konularda diğer yazılarımız

Web Sitesi Hızınızı Yavaşlatan 7 Sürpriz Faktör ve Çözüm Yolları

Web sitenizin hızının düşmesi, genellikle gözden kaçırılan küçük ama önemli faktörlerden kaynaklanabilir. Sizin de fark etmediğiniz, hızınızı yavaşlatan 7 beklenmedik etkenle tanışmaya hazır mısınız? Hem kullanıcı deneyimi hem de SEO açısından hız, büyük...

Web Geliştiricilerin En Sık Karşılaştığı 7 JavaScript Hatası ve Anında Çözüm Yolları

JavaScript, web geliştirme dünyasında en çok kullanılan ve en güçlü dillerden biri. Fakat, her ne kadar popüler olsa da, bazı hatalar kaçınılmaz olarak karşımıza çıkar. Özellikle yeni başlayanlar ve deneyimli geliştiriciler, sıklıkla belirli hatalarla...

JavaScript Asenkron Programlamada Yapılmaması Gereken 7 Yaygın Hata ve Bunları Nasıl Önleyebilirsiniz?

JavaScript, özellikle web geliştirme dünyasında her geçen gün daha fazla yer edinmeye devam ediyor. Geliştiriciler, daha verimli ve hızlı çalışan uygulamalar yapmak için asenkron programlamaya yöneliyor. Ancak, asenkron kod yazarken hepimizin düştüğü...

Web Geliştiricileri İçin 2025'te En Popüler JavaScript Framework'leri: Hangi Teknolojiler Geleceği Şekillendiriyor?

2025 yılına doğru ilerlerken, JavaScript dünyasında heyecan verici değişiklikler ve gelişmeler yaşanıyor. Teknolojilerin hızla evrildiği bu dönemde, web geliştiricilerinin hangi framework'lere yönelmesi gerektiği, bu alandaki en önemli sorulardan biri...

JavaScript Async/Await: Kodunuzu Sıfır Hata ile Optimize Etmenin Sırları

JavaScript dünyasında asenkron programlamanın gücünü keşfetmeye hazır mısınız? Eğer siz de yazılım geliştirme sürecinizi hızlandırmak ve daha verimli hale getirmek istiyorsanız, Async/Await kavramını anlamak ve kullanmak size büyük avantaj sağlayacak....

Web Sitesi Yavaşlığına Sebep Olan 10 Sürpriz Faktör ve Hızlandırma Çözümleri

---Web sitesi hızı, dijital dünyada başarınızın en kritik unsurlarından biridir. Google, kullanıcı deneyimine büyük önem verir ve hız, bu deneyimin en önemli bileşenlerinden birini oluşturur. Hızlı bir site, ziyaretçileri daha uzun süre tutar, dönüşüm...