Express JS İle Adım Adım Bir Web Uygulaması Nasıl Oluşturulur?

Bu yazımızda daha önce bahsettiğimiz ExpressJS modülü kullanılarak basit bir web uygulaması oluşturacağız. Böylece online bir uygulama nasıl oluşturulur konusunu inceleyeceğiz.

Neler Gerekli?

Bu konuyu okuyup geçebilirsiniz, fakat eğer öğrenmek ve uygulamak istiyorsanız JavaScript ve Node JS konusunda bilgi sahibi olmanız önemlidir. Bilgisayarınızda NodeJS kurulu olması gerekiyor.

Web Uygulaması Nedir?

İnternet ve yerel ağlar üzerinde çalışan uygulamalara verilen genel addır. Biz burada http protokolü üzerinden çalışan ve tarayıcı tabanlı çalışan uygulamalardan bahsediyoruz.

Uygulamanın Amacı

Uygulamamız oldukça basit bir yapıda olacak, bir anasayfa, bir hakkında sayfası ve birde iletişim sayfamız olacak. Hepsi bu kadar. Hedefimiz bir express js uygulaması geliştirmek ve ana kavramları pekiştirmek ayrıca route yapısını ve ayrıca basit bir tema yapısını geliştirmeyi öğrenmek.

İlkSunucum Uygulaması

Şimdi uygulamamazı geliştirmeye başlayalım.

İlk Hazırlıklar

Uygulamamızı adım adım geliştireceğiz fakat siz isterseniz github depomuzdan fork edebilir veya bilgisayarınıza indirebilirsiniz. Github üzerinden takip etmeyi ve yıldız vermeyi unutmayalım lütfen 🙂

Şimdi adım adım uygulamamızı oluşturmaya başlayalım. İlk olarak projemizi geliştirmek için uygun gördüğünüz bir yerde boş bir klasör oluşturun ve klasöre ilksunucum adını verin. Klasörümüzü oluşturduktan sonra terminalimizi ( windows cmd) açalım. Terminal içerisinden oluşturduğumuz klasörün içerisinde gelelim ve

npm init -y

komutunu çalıştıralım. Bu bize bir uygulama çatısı oluşturacaktır. -y bayrağını tüm sorularak otomatik evet (yes) demek için kullandık. İşlem bittiğinde klasörümüz içerisirinde package.json dosyasının oluştuğunu göreceksiniz.

Modül olarak sadece expressjs kullanacağız. Bu nedenle hemen kurulumunu yapalım.

npm i express

Kurulum bittiğinde artık uygulamamızı yazmaya başlayabiliriz. Bunun için klasörümüzde app.js dosyasını oluşturalım ve içerisini aşağıdaki gibi dolduralım.

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

// Uygulama kodları buraya gelecek

app.listen(3000, () => console.log("Uygulama başlatıldı."));

Kodları incelersek ilk satırda expressi uygulamamıza dahil ettik. Sonra port değişkeni oluşturdurduk ki bu port üzerinden uygulamamız çalışacak. app değişkenine expressi atadık ve uygulamamızın ana direği bu app değişkeni olacak.

Uygulamanın son bölümünde app.listen metodunu kullanarak belirttiğimiz (burada 3000 numaralı port) port üzerinden dinleme yapılmasını sağlıyoruz. Daha sonra bu port üzerine gelen istekleri yakalayacağız.

Terminal üzerinden

node app

komutunu vererek uygulamamızı çalıştırabiliriz. Uygulamayı çalıştırdığınızda herhangi bir hata yoksa terminal üzerinde Uygulama başlatıldı. mesajını göreceksiniz. Peki uygulamamıza nereden ulaşacağız? Tarayıcınızın adres çubuğuna aşağıdaki adresi yazarak enter tuşuna basın.

http://localhost:3000

Sunucuyu daha önce başlattıysanız Cannot GET / hatasını tarayıcı ekranında göreceksiniz. Evet bir hata oluştu. Çünkü biz uygulamayı oluşturduk ve başlattık fakat bir route belirtmedik. Dolayısı ile listen metodu sadece dinledi ama karşılığında bir sayfa bulamadı.

İlk Sayfa

Şimdi ilk sayfamızı basitce oluşturalım. Bunun için öcenlikle listen metodunu çağıran satırdan önce

app.get('/', (req, res) => res.send("ANA SAYFA"));

kodunu ekleyelim. Şimdi kodumuz.

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

// Uygulama kodları buraya gelecek
app.get('/', (req, res) => res.send("ANA SAYFA"));

app.listen(3000, () => console.log("Uygulama başlatıldı."));

şeklinde olacaktır. Terminal üzerinden CTRL + C tuşlarına basarak uygulamamızı durduralım ve tekrardan node app komutunu vererek enter tuşuna basarak uygulamamızı baştan başlatalım. Sonrasında tarayıcı sayfamızı yenileyelim veya http://localhost:3000 adresini tarayıcımızın adres çubuğuna yazarak enter tuşuna basalım. Yeni sayfamız

ekranda görünecektir. Sade ANA SAYFA mesajından da oluşmuş olsa ilk sayfamızın oluşturduk.

Uygulama Route Ayarlarını

Uygulamamızda olacak sayfaları daha önce sıralamıştık, anasayfa, iletişim, ve hakkında sayfaları. Bunların haricinde de eğer sayfa bulunamazsa mesaj bildiriminin olacağı sayfa yok ekranın olması iyi olacaktır. Şimdi ilgili yolları (route) ayarlayalım. Sonrasında içerlerini dolduracağız.

app.get('/', (req, res) => res.send("ANA SAYFA"));
app.get('/contact', (req, res) => res.send("İLETİŞİM"));
app.get('/about', (req, res) => res.send("HAKKINDA"));
app.get('*', (req, res) => res.send("SAYFA BULUNAMADI"));

Kodları app.js içerisine yerleştirdiğimizde

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

// Uygulama kodları buraya gelecek
app.get('/', (req, res) => res.send("ANA SAYFA"));
app.get('/contact', (req, res) => res.send("İLETİŞİM"));
app.get('/about', (req, res) => res.send("HAKKINDA"));
app.get('*', (req, res) => res.send("SAYFA BULUNAMADI"));

app.listen(3000, () => console.log("Uygulama başlatıldı."));

son kodumuz yukarıdaki gibi olacaktır. Artık elimizde dört adet sayfa için adresimiz oldu. Sayfa içeriklerini daha sonra dolduracağız. Burada ilk olarak app.get metodunu inceleyelim.

Express Get Metodu

Bu metod GET isteklerini yakalamak için kullanılan bir metodur. İki parametre alır, path ki sayfanın yolunu belirtir ve ikincisi de bir callback fonsiyondur ve isteğe karşı gönderilecek sayfayı oluşturmak için kullanılır.

app.get(path, callback);

path üzerinde konuşacak olursak mesela http://localhost:3000 adresinden sonra gelen bölüm diyebiliriz.

• Anasayfa için bu / şeklindedir ve http://localhost:3000/ anlamına gelir.
• Hakkında sayfası için /about şeklindedir ve http://localhost:3000/about anlamına gelir.
• İletişim sayfası için /contact şeklindedir ve http://localhost:3000/contact adresine işaret eder.
• * (yıldız işareti) özel bir anlama gelir. Eğer aranılan sayfa sunucuda yoksa, tam olarak sunucuda olmayan tüm sayfalar için özel bir sayfa bulunamadı alanı oluşturmak için kullanılır.

callback fonksiyonu ise yapılan isteğe verilecek olan cevabı oluşturmak için kullanılır. İki parametre alır. Bunlar request (istek) ve response (cevap) şeklindedir. Biz kısaca req ve res isimlendirmelerini kullandık. Bunların değerleri get metodu tarafından verilir. İstek ile ilgili tüm bilgiler buna form verileri de dahil olmak üzer req değişkeni üzerinde bulunacaktır. Verilecek cevap için gerekli tüm bilgiler ise res değişkeni içerisinde tutulacaktır. res.send ise cevap olarak gönderilecek bilgiyi göndermek için kullanılır. render, redirect gibi farklı metodları da bulunmaktadır.

res.send() metodu aldığı metin tabanlı bilgiyi (string) tarayıcıya gönderir ve tarayıcı bu bilgiyi kullanıcıya gösterir.

Tema Ayarları

Uygulamamızı oldukça basit tutarak ilerlemek istiyoruz. Bu nedenle de temayı da basit tutacağız. Tema için proje klasörümüz içerisinde theme.js dosyasını oluşturuyoruz. Bu dosya içerisinde header, footer ve menu değişkenlerini oluşturuyoruz. Kodlar basit HTML olduğu için sadece kodları vermekle yetiniyoruz.

const header = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk Sunucum</title>
    <style>
        .footer {
            padding: 15px;
        }
    </style>
</head>
<body>
`;

const footer = `
    <hr />
    <div class="footer">2022 @ <a href="https://netbilio.com">Netbilio Teknoloji</a>
</body>
</html>
`;

const menu = `
        <div id="menu"><b>İlk Sunucum</b>  - 
        <a href="/">Anasayfa</a> | 
        <a href="/contact">İletişim</a> |
        <a href="/about">Hakkında</a>
        </div>
        <hr />
`

module.exports = {
    header,
    footer,
    menu
}

Birer değişken olarak sayfanın sabit bölümlerini oluşturduk ki ileride tüm sayfalar için kullanabilelim. Sonra module.exports ile dışarı aktardık.

Anasayfa

Mesela anasayfayı oluşturmak için

const content = `
    <h1>ANA SAYFA</h1>
    <hr />
    <p>Sayfamıza hoşgeldiniz.</p>
    <p>Bu sayfa <b>ilksunucum</b> uygulaması için oluşturulmuş bir demo sayfasıdır. İçerik ve tasarım konusunda odaklanma olmamıştır.</p>
    `;

const content = header + menu + content + footer;

şeklinde basit bir işlem yeterli olacaktır. Bu şekilde elmizde tam bir HTML sayfası oluşmuş olacak. Şimdi bunu app.js içerisine ekleyelim. Fakat daha öncesinde header, menu ve footer alanlarını themes.js dosyasında içeri aktarmamız gerekiyor. Bunu hemen expressi import ettiğimiz satırın altında yapabiliriz.

const express = require('express');
const { header, menu, footer } = require('./themes');

Şimdi app.get(‘/’) için callback fonksiyonunu yeniden düzenleyelim.

app.get('/', (req, res) => {
    const content = `
    <h1>ANA SAYFA</h1>
    <hr />
    <p>Sayfamıza hoşgeldiniz.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet rem, maiores ab omnis cumque adipisci. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, amet quas? Ad amet quia nulla?</p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, quos non perferendis distinctio suscipit iure mollitia accusantium quia odit! Saepe facere consequuntur laboriosam ad! Magni!</p>
    `;

    const page = header + menu + content + footer;
    res.send(page);
});

Terminal üzerinden sunucuyu CTRL + C tuşlarına iki defa basarak durdurduktan sonra node app ile uygulamayı tekrardan başlatalım. Sonrasında http://localhost:3000/ adresine tekrar tarayıcımızdan girdiğimizden karşımıza yeni sayfamız çıkacaktır.

Hakkında Sayfası

Hakkında sayfası da aynı şekilde basitçe oluşturabiliriz.

app.get('/about', (req, res) => {
    const content = `
    <h1>BİZ KİMİZ</h1>
    <hr />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet rem, maiores ab omnis cumque adipisci. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, amet quas? Ad amet quia nulla?</p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, quos non perferendis distinctio suscipit iure mollitia accusantium quia odit! Saepe facere consequuntur laboriosam ad! Magni!</p>
    `;

    const page = header + menu + content + footer;
    res.send(page);
});

Yine bu sayfayı oluşturduktan sonra terminal üzerinden sunucuyu CTRL + C tuşlarına basarak durdurduktan sonra node app ile uygulamayı tekrardan başlatalım. Sonrasında http://localhost:3000/about adresine tekrar tarayıcımızdan girdiğimizden karşımıza yeni sayfamız çıkacaktır.

İletişim Sayfası

İletişim sayfasına geçelim. Bu sayfayı da düz bir sayfa olarak oluşturacağız. Sistem yine yukarıdaki gibi olacaktır.

app.get('/contact', (req, res) => {
    const content = `
    <h1>İLETİŞİM</h1>
    <hr />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet rem, maiores ab omnis cumque adipisci. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, amet quas? Ad amet quia nulla?</p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, quos non perferendis distinctio suscipit iure mollitia accusantium quia odit! Saepe facere consequuntur laboriosam ad! Magni!</p>
    `;

    const page = header + menu + content + footer;
    res.send(page);
});

Yine bu sayfayı oluşturduktan sonra terminal üzerinden sunucuyu CTRL + C tuşlarına basarak durdurduktan sonra node app ile uygulamayı tekrardan başlatalım. Sonrasında taraycınını adres çubuğuna http://localhost:3000/contact şeklinde yazarak yeni sayfamıza ulaşabiliriz.

Sayfa Bulunamadı

Artık sayfa bulunamadığı zaman görüntülecek sayfayı oluşturalım.

app.get('*', (req, res) => {
    const content = `
    <h1>ARADIĞINIZ SAYFA BULUNAMADI</h1>
    <hr />
    <p>Aradığınız sayfa bulunamadı, yanlış bir sayfaya gelmiş olabilirsiniz. Lütfen anasayfa üzerinden devam ediniz.</p>
    `;

    const page = header + menu + content + footer;
    res.send(page);
});

Yine bu sayfayı oluşturduktan sonra terminal üzerinden sunucuyu CTRL + C tuşlarına basarak durdurduktan sonra node app ile uygulamayı tekrardan başlatalım. Sonrasında http://localhost:3000/about2 şeklinde olmayan bir adrese gitmeye çalışalım. Karşılaşacağımız sayfa aşağıdaki gibi olacaktır.

Tüm Kodlar

Uygulamanın çalışan tüm kodlarını github hesabımızdan inceleyebilirsiniz. Gerekirse bilgisayarınıza indirin veya en kolay yolu olarakda forklayabilirsiniz. Github sayfası için tıklayınız.

Sonuç

Sayfamızı başarı ile oluşturduk. Express JS kullanarak bir web uygulaması (web sayfası) oluşturduk. Bu uygulama üzerinde istediğiniz değişiklikleri yapabilirsiniz. themes.js dosyası içerisinde oluşturduğumuz bölümlerde istediğimiz gibi Html etiketlerini veya sitil bilgilerini kullanabiliriz. Kendinizi geliştirmek için denemeler yapmayı unutmayınız.

Web uygulamaları geliştirirken siz hangi dilleri kullanıyorsunuz?