JSON Server ve JSONPlaceholder Fake REST API Servisleri ile Çalışmak

JSON Server, Yapacağımız örneklerde çoğu zaman servis yada data elde edeceğimiz bir kaynağa ihtiyaç duyarız ama sırf test için bir db yada servis oluşturmak zaman kaybı oluşturabiliyor. Bu makalemizde bu açığı gidermek için bir offline ve birde online çözüm önereceğim.

JSON Server ve JSONPlaceholder Fake REST API Servisleri ile Çalışmak

Javascript Background

 

Bu makalede anlatacağımız hem online hem de offline alternatifi olan faker rest api servisini nasıl makinenize 30 saniyeden kısa bir sürede kurabileceğinizi veya online hangi aracı nasıl kullanabileceğini makalede göreceğiz. Öncelikçe offline çalışabileceğiniz yöntem olan ve baştan sona özelleştirmesini yapabileceğiniz bir yöntem olan json server’ın sisteme global olarak nasıl kurulabileceğine bakacağız.

JSON Server ile Fake REST Api Servisini Oluşturmak

Alttaki komut ile json-server npm paketini global olarak kurabilirsiniz. Eğer sisteminizde nodejs kurulu değilse npm paketini çalıştıramazsınız o yüzden sisteminizde nodejs kurulu olduğundan ve npm’in konsol’dan kullanılabilir olduğundan emin olmak için npm -v komutunu çalıştırın sonucunda size bir versiyon değeri döner ise sorun yok işlemlere hız kesmeden devam edebiliriz ama tanımlı değilse o zaman nodejs.org sitesinden yazılımı indirip kurun sonrasında konsol ekranını kapatıp tekrar açın ve nodejs dünyasına hoşgeldin 🙂 diyerek makaleye devam ediyoruz 🙂

npm install -g json-server

İstediğiniz herhangi bir yere db.json yada farklı bir isimde json dosyası oluşturun. Örnek olarak içeriğinide alttaki gibi doldurun.

JSON Server’ı oluşturduğunuz json dosyası ile ayağa kaldırmak için alttaki json-server --watch db.json komutunu çalıştırın

json-server --watch db.json
json-server --watch db.json
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching…

Gördüğünüz gibi default olarak kullandığı 3000 portu üzerinden istekleri dinleyeme başladı ve endpoint’lerimizde json dosyası içerisindeki kırılımlardan yola çıkarak otomatik olarak oluşturuldu. Hemen örnek bir get request oluşturalım bu request’imizde 1 id’li post’u http://localhost:3000/posts/1 adresinden erişerek alabileceğiz get isteğini oluşturmak için tarayıcının url barına linki yapıştırıp eriştiğinizde alttaki curl isteğindeki gibi bir json çıktısı ile karşılaşacaksınız yeri gelmişken değinmek istiyorum sadece get isteği ile uğraşmayacağız yeri gelecek post, put, delete komutları ile de işlem yapacağız o yüzden curl adında komut satırı aracını kullanarak işlemlerimi gerçekleştireceğiz sizde curl aracını indirip kullanmak isterseniz curl – Download sayfasından indirebilirsiniz.

curl --url http://localhost:3000/posts/1
{
“id”: 1,
“title”: “json-server”,
“author”: “typicode”
}

İstekleri yapmadan önce bilmeniz gerekenler

  • İsteğinizin gövdesi JSON olmalıdır, GET çıktısı gibi nesne içine alınmış olmalıdır. (örneğin, {"name": "Foobar"})
  • Eğer POST, PUT, PATCH or DELETE istekleri oluşturuyorsanız, yapacağınız değişiklikleri güvenle db.json dosyasına kaydetmek için lowdb aracı kullanabilirsiniz.
  • Id değeri değişken bir değer değildir. PUT ve PATH request’leriniz içerisinde id değeri -d parametresi değeri içerisinden gönderildiğinde dikkate alınmayacaktır. POST isteğinde gönderilen id değeri eğer daha önce kaydedilen posts kayıtlarının id değeri içerisinde yoksa dikkate alınıp verdiğniz id değeri ile kayıt insert işlemi gerçekleştirilecektir.
  • A POST, PUT veya PATCH isteklerinizin Content-Type: application/json header’ını kullanmalısınız. Eğer kullanmazsanız 200 OK dönecektir fakat veriniz üzerinde bir değişiklik olmayacaktır sadece POST isteğinde kayıt eklenecektir ama id değeri otomatik artan olarak ayarlanmış olacak diğer parametrelerinize erişemediği için sadece id ayarlanmış şekilde insert edilecektir.

Rotalar

db.json dosyası üzerinden otomatik olarak get, post, put, patch, delete isteklerinizi karşılayacak çoğul ve tekil işlemler için endpoint’lerin otomatik olarak ayarlandığını söylemiştik. db.json dosyası içeriğine baktığımızda posts ve comments kaynaklarının çoğul olduğunu yani array tipte olduklarını görüyoruz ama profile kaynağının tekil bir json objesi olduğunu görüyoruz tekil objeler üzerinde sadece get, post, put ve path http metodları ile istekte bulunabiliyorsunuz ama çoğulda az önce saydıklarıma ek olarak delete metodunu da kullanabiliyorsunuz delete metoduna da querystring den vermiş olduğunuz id değeri ile mutable(değişmez) olarak adlandığımız çoğul kayıtlar için olmazsa olmaz id alanı ile eşleştirme yapılarak kaydın silinmesi sağlanıyor. çoğul posts ve tekil profile nesnesinin örnek endpointlerine bakalım.

Çoğul Rotalar

Tekil Rotalar

Filtreleme

Querystring’de özellik adlarını filtrelemek istediğiniz değeri girerek filtreleme yapmanız mümkün ayrıca alt özelliklerle ilgili filtreleme yapmak için . karakterini kullarak alt özelliğin adınıda girip filtreleme yapabilirsiniz örnek altta yer almaktadır.

Sayfalama

Eğer bir grid bileşeninize data gerekiyor ve bu datayı sayfalanmış olarak elde etmek istiyorsanız ve her sayfada gösterilecek kayıt sayısınıda belirleyip çekmek istiyorsanız _page ve _limit parametrelerini kullanabilirsiniz _page ile hangi sayfaya ait verileri istediğinizi _limit ilede sayfa başına gösterilecek kayıt sayısını belirtmektedir. Eğer _limit parametresini girmezseniz varsayılan olarak 10 kayıt dönderilecektir.

Request sonucunda sizlere data haricinde Link adında bir header dönecek ve içerisinde first, next, prev ve last linkleri dönecek.

Örnek bir Link header’ı ise şu şekildedir.

Sıralama

_sort parametresi ile sıralama yapmak istediğiniz alanız belirtebilir ve _order parametresi ile de sıralama türünüz a-z yada z-a formatlarından hangisi olduğunu asc ve desc değerleri ile belirtebilirsiniz.

Eğer birden fazla alana göre sıralama yapmak istiyorsanız o zaman alttaki gibi bir request işinize yarayacaktır.

Sınırlı Kayıt Elde Etmek

Eğer sadece belirli bir sayıdaki kayda ihtiyacınız varsa _start, _end veya _limit parametrelerini kullanabilirsiniz. Toplam kayıt sayısı response header’ı arasında X-Total-Count header’ında verilmektedir.

_start parametresine değeri girip başlangıç indis’ini belirtip _limit ile _start indisinden sonra toplam kaç değer istediğinizi belirtebilirsiniz yada _start parametresi ve _end parametresine indis değerleri girip _start ve _end indis değerleri arasındaki fark kadar kayda erişmiş olursunuz.

Örnek kullanılmlar altta yer almaktadır.

Operatörler

_gte(Greater Than) parametresi ile belirttiğiniz değerden büyük olan kayıtları elde edebilirsiniz. _lte(Less Than) parametresi ile belirttiğiniz değerden küçük olan kayıtları elde edebilirsiniz.

_ne(Not Equal) ile belirttiğiniz değer ile kolon değeri eşleşmeyen kayıtlar getirilir.

_lie parametresi ile girdiğiniz değer ile eşleşen kayıtlar getirilir (Regex desenleri desteklenmektedir)

Full-text search

q parametresine girdiğiniz değer ile belirtmiş olduğunu kaynak altındaki her bir kolondaki değerlerden en az bir tanesi ile eşleşen tüm kayıtlar getirilir.

İlişkiler

Kayıtları çekerken kayıtlarınız ile ilişkili farklı kaynaklardaki kayıtlarıda dahil ederek çekmek isterseniz alttaki gibi bir kod kullanarak postId ile eşleştirilen comment’lerde dahil edilerek getirilmektedir.

Alttaki örnekte tüm posts kayıtları içerisinde her bir post kaydı için comment kayıtları üzerinde yer alan postId kolonu ile eşleşen comment’lerde ilgili post kayıtları dahil edilerek getirilir.

Bir diğer örnek ise id’si 1 olarak post kaydı ile postId kolonu üzerinden eşleşen comment kayıtları dahil edilerek getirilir.

Yukarıda bahsettiğimiz örnek 2 senaryoya ait kodlar altta yer almaktadır.

_expand parametresi ile sadece belirttiğimiz kaynak adı ile eşleşen kayıtlar varsa getirilmektedir. Alttaki kod üzerinden örnek verecek olursak comments ana kaynağımız ve comment ile eşleştirilen post kaydı varsa bu kayıtlar getirilecektir.

Alt Kaynaklara Erişim

Default olarak oluşturulan rota tanımlarındaki endpoint’lerde 1 seviye kaynak altından eşleşen kaynaklara erişebiliyorsunuz. Alttaki örnek kodla 1 id’sine sahip comments kaynakları üzerinden işlem yapılıyor.

Veritabanına Erişim

Veritabanından kastımız aslında db.json olarak oluşturduğumuz dosyanın tüm içeriğine erişimden bahsediliyor. Alttaki kod ile tüm veritabanı içeriğini alabilirsiniz.

POST isteği ile posts kaynağına kayıt eklemek

posts kaynağına ekleyeceğim kayıt için title ve author olduğunu görüyoruz eğer title yada author‘ı eksik yada yanlış yazarsanız hiçbir sorun olmaz yanlış yazdığınız şekilde insert edilir ve get işleminde yanlış olarak ayarladığınız kolonda json içerisinde ayrı bir json özelliği olarak ayarladığınız değeri ile beraber gelecektir datayı bir projenizin önyüzünde falan kullanıyorsanız kolon adlarının düzgün yazıldığından emin olun çünkü bu konuda bir validasyon yok. Eğer aynı id’ye sahip kaydı POST ile eklemeye çalışırsanız duplicate id hatası fırlatılacaktır.

POST isteğinin curl üzerinden yapılmasını sağlamak için 2 seçenek var ya --request POST parametresini ekleyeceksiniz yada -d parametresini kullandıysanız --request POST parametresini yazmak zorunda değilsiniz -d parametresinden dolayı default POST olarak istekde bulunulacaktır. Şimdi posts endpoint’i üzerinden POST ile bir kayıt ekleyelim.

curl --url http://localhost:3000/posts -H “Content-Type: application/json;charset=utf-8” -d “{\”id\”:6,\”title\”:\”murat\”,\”author\”:\”öner\”}”
{
“id”: 6,
“title”: “murat”,
“author”: “∩┐╜ner”
}

Üstteki curl isteğimiz response çıktısında birşey farkettin mi? Evet doğru bildin author’da öner olarak ayarladığımız ö karakteri bozuk karakter olarak kaydedilmiş gözüküyor.

Bunu çözmek için şöyle yapmamız gerekiyor console ekranında chcp 65001 kodunu çalıştırın ve -d parametresi değerine direkt json datasını geçmeyip data.json adlı bir dosya içerisinde kaydedip bu dosyayı alttaki gibi -d parametresine geçin isteği yapın ve sonuç aşağıdaki gibi düzelmiş olacaktır.

curl --url http://localhost:3000/posts -H “Content-Type: application/json;charset=UTF-8” -d @data.json
{
“title”: “murat”,
“author”: “öner”,
“id”: 2
}

Ekstra Bilgiler

Rastgele Veri Üretimi

Eğer datayı javascript üzerinden kendiniz üretmek istiyorsanız o zaman alttaki gibi basit bir yöntem ile users adında endpoint’i ve 1000 datası olan kaynak üretebilirsiniz. index.js adında bir dosya oluşturup alttaki gibi içeriğini dolduruyoruz.

artık db.json üzerinden değil index.js üzerinden json-server’ı ayağa kaldırmak için önceki json-server sunucusunu kapatıp alttaki komutu çalıştırın.

json-server index.js
\{^_^}/ hi!
Loading index.js
Done
Resources
http://localhost:3000/users
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database

Gördüğünüz gibi users adında endpoint’li bir kaynağımız oluştu ve 3000 portu üzerinden fake webapi’mizi ayağa kaldırdık.

Heryerden Erişim

json-server sunucusuna istenilen heryerden erişilebilir herhangi bir CORS sıkıntısı v.s. yaşamazsınız.

Farklı Bir Port Üzerinden Ayağa Kaldırmak

Eğer json-server’ı default 3000 portu üzerinden değilde farklı bir port üzerinden ayağa kaldırmak istiyorsanız alttaki komutu kullanarak istediğiniz portu ayarlayabilirsiniz.

json-server --watch db.json --port 3004
Json-server’ı Farklı Online Kaynaklardan Ayağa Kaldırmak

Normalde offline seçeneği altında bu json-server’ı anlatıyoruz fakat siz yine de statik olarak db.json v.b. dosyalar oluşturmadan online olarak json-server’a bir kaynak ayarlarsanız işlemlerinizi  ayarlamış olduğunuz online kaynak üzerinden gerçekleştirebilirsiniz.

Kendi domain’inizi yada altta anlatacağım ve bir sonraki konumuz olan jsonplaceholder üzerinden json-server’ınızı ayağa kaldırıp kaynak olarak kullanabilirsiniz.

json-server http://example.com/file.json
json-server http://jsonplaceholder.typicode.com/db
Http Üzerinden Ayağa Kaldırmak

Fake WebApi’mizi SSL üzerinden yayına alabileceğiniz birçok yöntem bulunmaktadır fakat en basit yollardan biri için hotel aracını kullanabilirsiniz.

Özel Yönlendirmeler Oluşturmak

routes.json adında bir dosya oluşturun ve alttaki gibi doldurun. Her yönlendirme / karakteri ile başlamalıdır.

Sunucumuzu alttaki gibi --routes routes.json parametresi ve değeri ile çalıştırırsak artık yeni yönlendirme tanımlarımızla isteklerde bulunabileceğiz o zaman sunucuyu --routes parametresi üzerinden nasıl ayağa kaldırabileceğimiz ile ilgili örnek koda bakalım.

json-server db.json --routes routes.json

Eklediğimiz özel yönlendirmeler ile kaynaklara nasıl eriştiğimize örnek istekler ile bir gözatalım ve hangi yönlendirmeye denk geldiğini görelim.

Arakatmanlar Eklemek

Yaptığınız isteklerin arasına dalarak bu isteklere müdahale de bulunabilirsiniz. Bunun için json-server’da middleware desteği bulunmaktadır. Alttaki hello.js dosyamızdaki tanım ile her yapılan isteğe X-Hello adında bir header eklenip değeri World olarak ayarlanmaktadır. Burada tek ayarlayabileceğiniz şey elbette header değildir hayal gücünüze göre istediğiniz düzenlemeyi yapabilirsiniz.

json-server db.json --middlewares ./hello.js

Eğer birden fazla middleware kullanacaksanız o zaman alttaki gibi aralarda boşluk bırakarak –middlewares parametresinin değerine middleware dosya adlarını yazabilirsiniz.

json-server db.json --middlewares ./first.js ./second.js

Json-server için anlatacaklarım bu kadar daha detaylı bilgi için json-server github hesabını kontrol edebilirsiniz.


JSONPlaceholder ile Online Fake Rest Api Kullanımı

JSON - JavaScript Object Notation

Json-Server için anlattıklarımızın çoğu JSONPlaceholder için geçerlidir eğer kurumsal bir firmada çalışıyorsanız ve makineye npm, nodejs v.s. kuramıyorsanız sizin için online olarak alternatif olacak en iyi seçenek JSONPlaceholder’dır. Zaten şunu söylemeden geçmeyelim JSONPlaceholder JSON Server üzerine kurulmuş online bir araçtır.

Özellikleri

  • Kayıt olma derdi yok
  • Sıfır konfigürasyon
  • Basit Api
  • “Bire çok” ilişkiler
  • Filtreleme ve alt kaynaklar
  • Cross-domain(CORS ve JSONP)
  • GET, POST, PUT, PATCH, DELETE ve OPTİONS metodları destekleniyor.
  • HTTP ve HTTPS destekleniyor.
  • React, Angular, Vue, Ember… ile uyumludur.

Mevcut Kaynaklar

Hemen basit bazı örnekler ile bu online aracı javascript’de nasıl kullanabileceğinizi görelim. Javascript’de Fetch API ‘yi kullanarak http isteklerini gerçekleştireceğiz eğer Feth Api konusunda bilgi sahibi değilseniz Javascriptde fetch fonksiyonu ile http işlemleri adlı makaleme gözatabilirsiniz.

O zaman kısa ön bilgilendirme sonrası örneğimize geçelim, posts kaynağından 1 id’li post kaydını çektiğimiz örnek fetch kodu alttaki gibidir.

Tek post kaydı getirme

Tüm post kayıtlarını getirme

Yeni bir post kaydı oluşturma

Not: Kaynak sunucuda kaydınız oluşturulmayacak ama sorun yoksa sanki oluşturulmuş gibi size 200 cevabı döndürülecektir.

Post kaydı güncelleme

Not: Kaynak sunucuda kayıt ogüncellenmeyecektir ama sorun yoksa güncellenmiş gibi size 200 cevabı döndürülecektir.

Post kaydı silme

Not: Kaynak sunucuda kayıt silinmeyecektir ama sorun yoksa size 200 cevabı döndürülecektir.

Kaynakları Filtreleme

Alt Kaynaklar

Diğer Alt Kaynaklar

  • https://jsonplaceholder.typicode.com/posts/1/comments
  • https://jsonplaceholder.typicode.com/albums/1/photos
  • https://jsonplaceholder.typicode.com/users/1/albums
  • https://jsonplaceholder.typicode.com/users/1/todos
  • https://jsonplaceholder.typicode.com/users/1/posts

📚 Kaynaklar


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir