JSON Server ile JSON sunucusu oluşturma (Fake API)

Herkese merhabalar, blogumun ilk yazısı olarak sizlerle kendimin de sürekli kullandığı bir çözümü paylaşacağım. Hepimiz projelerimizin geliştirme aşamasında, herhangi bir JS framework’u ile (Angular, React, React Native v.s) çalışırken uygulamalarımızı test etmek isteriz. Projemiz geliştirme aşamasında olduğundan ötürü de ortada halihazırda geliştirdiğimiz bir API olmayabilir.

Bu sorunun üstesinden gelebilmek için, sizlerle bugün “Sıfır kod yazarak nasıl bir Rest API oluşturulur?” sorusunu konuşacağız. Buna “Fake Rest API” de diyebiliriz aynı zamanda.

Bu işlemi yaparken bize “json-server” isimli bir NPM paketi yardım edecek.

Başlamadan önce bu NPM paketini bilgisayarınıza yükleyebilmek için (Mac, Linux veya Windows farketmez) NodeJS’i bilgisayarınıza kurmanız gerekmekte. Buradan işletim sisteminize uygun NodeJS versiyonunu edinebilirsiniz.

NodeJS’i yükledikten sonra, herhangi bir terminale aşağıdaki komutu girmeniz gerekmekte, böylelikle json-server’ı bilgisayarımıza global olarak kuracağız.

npm install -g json-server

Ben ağırlıklı olarak VSCode’ı kullandığım için, işlemlerimi bu IDE üzerinden göstereceğim.

Aşağıdaki görselde de görüldüğü üzere, proje klasörümde veya herhangi boş bir klasörde db.json isimli bir dosya oluşturuyoruz.

Dosyamızı oluşturduktan sonra, içine yayımlamak istediğimiz JSON verilerini giriyoruz. Benim dosyamın içeriği bir alttaki resimde de görüldüğü üzere şu şekilde:

Bu örnek üzerinden ilerleyecek olursak, json verilerinizi tek bir json dosyası olarak değil de farklı dosyalar olarak da ekleyebilirsiniz. Örneğin posts verileri için ayrı olarak posts.json dosyası da oluşturabilirsiniz.

Verilerimizi de oluşturduktan sonra artık bunları yayımlamaya geçiyoruz. Json dosyamın (veya dosyalarımın) olduğu klasörde, aşağıdaki komutumu terminalime giriyorum.

json-server --watch db.json

Eğer birden çok json dosyanız varsa, bu komutu, yayımlamak istediğiniz verinin bulunduğu her bir dosya için ayrı ayrı girmeniz gerekmekte.

Komutu girdikten sonra yukarıdaki resimde de görüldüğü üzere terminal, artık verilerimizin localhost üzerinden yayımlandığını bildiriyor.

Json dosyamızdaki her objeye ayrı linkler üzerinden erişebiliyoruz. Örneğin, profile nesnesine erişebilmek için aşağıdaki adrese tarayıcımızdan gidiyoruz.

https://localhost:3000/profile

Resimde görebileceğiniz üzere, json-server tarafından oluşturulan API miz sorunsuz bir şekilde çalışıyor.

Json-Server’ın en güzel yanı ise, tüm CRUD işlemlerimiz için GET, PUT, POST, PATCH, DELETE, OPTIONS isteklerini kullanabiliyor olmamız.

Örneğin, yeni bir post nesnesi oluşturmak için aşağıdaki kod bloğu ile POST isteğinde bulunalım.

Görüldüğü üzere, yeni post nesnemiz ile POST isteği attık ve cevap olarak “201”, yani nesnemizin başarılı bir şekilde oluşturulduğuna dair cevap aldık.

Aşağıda, isteğimizi attıktan sonra json-server tarafından güncellenenen db.json dosyamızı görebilirsiniz.

Görüldüğü üzere, proje geliştirme aşamasında json-server gerçekten hayat kurtaran bir rol oynuyor. Ufak, kolay ve oldukça becerikli olan bu arkadaşı siz de artık geliştirme süreçlerinize dahil edebilir, işinizi oldukça kolaylaştırabilirsiniz.

Yeni bir yazıda görüşmek üzere, hoşçakalın. :)