Giriş: Express.js ile Başlamak
Hayatımıza hızla giren web uygulamaları, her geçen gün daha fazla gelişiyor. Eğer siz de bu dünyada bir adım atmak istiyorsanız, doğru yerdesiniz! Express.js, web uygulamaları geliştirmek için harika bir araç. Node.js üzerinde çalışan bu minimal framework, hızlı ve güçlü backend uygulamaları oluşturmanıza yardımcı olacak.
Şimdi, gelin Express.js ile web uygulaması yapmanın temel adımlarını keşfedelim. Adım adım nasıl bir proje oluşturacağınızı ve Express.js’in gücünden nasıl faydalanacağınızı öğreneceksiniz.
1. Adım: Node.js ve Express.js'i Kurun
Web uygulamaları geliştirmenin ilk adımı her zaman doğru araçları kurmaktır. Node.js ve Express.js, bu yolda ilerlerken ihtiyaç duyacağınız iki önemli unsurdur.
Node.js, JavaScript’i sunucu tarafında çalıştırmanıza olanak tanır. Express.js ise bu platform üzerinde web uygulamaları geliştirmek için güçlü ve esnek bir framework sağlar.
İlk olarak, Node.js’i bilgisayarınıza kurmalısınız. [Node.js'in resmi sitesinden](https://nodejs.org/en/) kolayca indirebilirsiniz. Kurulumdan sonra, terminal veya komut satırına şu komutu girerek Express.js’i projenize dahil edebilirsiniz:
npm install express
Bu komut, Express.js’in en son sürümünü indirip projenize dahil eder.
2. Adım: Basit Bir Web Sunucusu Oluşturun
Express.js kurulumunu tamamladıktan sonra, ilk adım olarak basit bir web sunucusu oluşturacağız. Bunun için öncelikle projenizde bir dosya oluşturmalısınız. Örneğin, "app.js" adıyla bir dosya oluşturabilirsiniz.
Aşağıdaki kodu "app.js" dosyasına yazın:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Merhaba Dünya!');
});
app.listen(port, () => {
console.log(`Sunucu http://localhost:${port} adresinde çalışıyor.`);
});
Bu basit kod parçası, Express.js ile oluşturduğumuz web sunucusunun temellerini atmaktadır. `app.get()` metodu, kullanıcıların ana sayfaya ("/") eriştiğinde "Merhaba Dünya!" mesajını gösterir. Sunucu, belirtilen portta (3000) dinlemeye başlar.
3. Adım: HTML Sayfaları ve Dinamik İçerik
Artık temel bir web sunucusuna sahibiz. Peki, kullanıcılarımıza sadece metin değil, dinamik içerik nasıl sunarız? Express.js’in gücünden faydalanarak HTML sayfalarını render edebiliriz.
Express, view engine olarak adlandırılan bir sistemle HTML şablonlarını render etmenize olanak tanır. En yaygın kullanılan şablon motorlarından biri "EJS"’dir.
EJS’i kurmak için şu komutu terminale yazabilirsiniz:
npm install ejs
Ardından, Express.js’in view engine olarak EJS kullanmasını sağlamak için şu şekilde bir düzenleme yapabilirsiniz:
const express = require('express');
const app = express();
const port = 3000;
// EJS kullanmak için ayar
app.set('view engine', 'ejs');
// Ana sayfa
app.get('/', (req, res) => {
res.render('index', { message: 'Merhaba, Express!' });
});
app.listen(port, () => {
console.log(`Sunucu http://localhost:${port} adresinde çalışıyor.`);
});
Bu örnekte, Express.js kullanarak EJS motorunu ayarladık ve ana sayfada "Merhaba, Express!" mesajını dinamik bir şekilde render ettik. Şimdi, "views" adlı bir klasör oluşturup içine "index.ejs" adında bir dosya ekleyin:
Express.js Uygulaması
<%= message %>
Bu şablon, Express.js’in size sunduğu dinamik yapıyı kullanarak "message" değişkenini HTML sayfasına yerleştirir.
4. Adım: Statik Dosyalar ve API Routes
Birçok web uygulaması, statik dosyalar (CSS, JavaScript, görseller) kullanır. Express.js ile statik dosyaları sunmak oldukça basittir.
Statik dosyalarınızı bir klasöre koyarak, Express’in bu dosyaları sunmasını sağlayabilirsiniz. Örneğin, "public" adında bir klasör oluşturup içine CSS dosyalarınızı koyabilirsiniz. Ardından şu kodu ekleyerek Express.js'e statik dosyalarınızı sunmasını söyleyebilirsiniz:
app.use(express.static('public'));
Bu satır, Express’e "public" klasöründeki tüm dosyaları sunması gerektiğini bildirir.
Ayrıca, Express.js API routes (yollar) oluşturmak için de harika bir araçtır. API geliştirerek uygulamanıza dinamik veri gönderip alabilirsiniz. Örneğin:
app.get('/api/data', (req, res) => {
res.json({ message: 'API verisi burada!' });
});
Bu kod, "/api/data" yoluna yapılan GET isteklerine JSON formatında bir yanıt döndürür.
5. Adım: Uygulamanızı Yayınlayın
Projeyi tamamladıktan sonra, Express.js uygulamanızı yayınlamak için hazır olabilirsiniz. Genellikle bu tür uygulamalar için Heroku, DigitalOcean veya AWS gibi platformlar kullanılır. Heroku, Express.js uygulamaları için popüler bir seçenek olup, uygulamanızı birkaç basit adımda internete taşımanıza yardımcı olur.
Heroku'da bir proje yayınlamak için şu komutları izleyebilirsiniz:
git init
heroku create
git add .
git commit -m "İlk deploy"
git push heroku master
Sonuç
Artık Express.js ile basit bir web uygulaması oluşturmayı öğrendiniz! Bu uygulama, Express.js’in sunduğu olanakları keşfetmek için mükemmel bir başlangıçtır. Web uygulamaları geliştirmeye devam ettikçe daha karmaşık özellikler ekleyebilir ve Express.js ile projelerinizi büyütebilirsiniz.
Başlangıç için Express.js harika bir seçimdir. Hem hızlıdır, hem de öğrenmesi son derece kolaydır. Şimdi, öğrendiklerinizi pratiğe dökme zamanı!
