Sanity Nedir?

Sanity verilerinizi cloud üzerinde saklayabileceğiniz ,sakladığınız verileri sorgulayıp json formatında bir sonuç kümesi alabileceğiniz, kolayca restful api yazabilmemizi sağlayan bir platform hizmetidir.

Yaptığımız bir uygulama ya da web sitemizin backendini sanity ile hazırlayabiliriz. Sitemizin içeriğini dinamik bir şekilde kolayca değiştirebileceğimiz bir admin portalına sanity sayesinde sahip olabiliriz.

Bunları yapabilmemiz için aşağıdaki adımları sırası ile yapmamız gerekiyor.

Adımlara başlamadan projenin yapılmış halinin github linkini şuraya bırakayım : https://github.com/ertugrulseda/my-first-sanity

1- Terminal açıp projemizi oluşturmak istediğimiz path’te npm create sanity@latest komutunu çalıştırıyoruz

2- Sanity hesabınız varsa login olmanızı yoksa yeni bir hesap oluşturmanızı bekler. Ben github hesabımla login olmayı seçtim.

3- Başarılı bir şekilde login olduktan sonra “Select project to use” sorusu geliyor. Burada login olduğunuz hesabınızda başka projeniz varsa onu seçmenizi ya da yeni proje oluşturmak için create new project seçmeniz bekleniyor. Ben create new project diyerek aşağıadki gibi devam ediyorum

4- Bu adımda projeme ne isim koymak istediğimi soruyor. Ben burada my-first-sanity ismini verdim

5- Use the default dataset configuration sorusuna Y harfine basıp enter diyorum. Ardından Projenin oluşturulacağı path’i gösterip teyit bekliyor, Enter’a basıp bu adımı da ilerletiyorum

6- Select project template sorusuna boş bir proje oluşturabilmek için Clean project with no predefined schemas seçiyorum. Hazır tanımlı schemaların olduğu diğer hazır templatelerden birini de seçebilirdim burada.

7- Do you want to use Typescript sorusuna javascript yazmak istediğim için n’ye basıp enter diyorum.

8- Son adım olarak kullancağımız package manager’ı soruyor. Burada da npm seçip enter diyorum

npm seçip enter dedikten sonra otomatik olarak paketleri indirecek.

9-Son olarak success mesajı çıkacak

Artık projem hazır

Projemin oluştuğu klasörü seçiyorum → cd my-first-sanity

Projemi vs code’ta açıyorum → code .

Projemin son hali: npm run dev diyerek projemi localhost:3333 ‘te ayağa kaldırıyorum

http://localhost:3333/ adresini açtığınızda boş bir proje sayfası göreceksiniz

Burada verilerimizi tutmak için schemalar oluşturmamız gerekiyor. Ben movies ve actors isminde iki schema oluşturacağım. Bir filmde birden fazla oyuncu yer alabilecek şekilde de movies ve actors schemaları arasında bire çok ilişki kuracağım. Bunu yapabilmek için projede yer alan schemas isimli klasörümün altında movies.js ve actors.js isminde iki dosya oluşturuyorum şekildeki gibi.

movies isimli schemada, filmlerin adını, türünü, posterini, özetini ve oynayan aktörleri tutacağım. actors isimli schemada , aktörlerin adını, soyadını, fotoğrafını ve biyografisini tutacağım. Oluşturduğum movies ve actors schemalarının içini aşağıdaki resimdeki gibi yazıyorum. Bu oluşturduğum schemaları index.js’te export ediyorum.

Örnek olarak oluşturduğum movies isimli schemam localhostta aşağıdaki gibi görünüyor. Belirtiğim tüm fieldlar için belirttiğim type’a göre bir alan açıyor.

Image type’ında oluşturduğum field için resim yükleyebileceğimiz bir alan oluşturuyor. hotspot true verdiğimde yüklediğiniz resmi kesip ölçeklendirebilmenize olanak sağlıyor.

Uzun bir yazı eklemek istiyorsak bunun için array tipinde block bir alan açmamız gerekiyor.Bir block alan açtığımızda sanity bize aşağıdaki gibi uzun yazı yazabileceğimiz , yazının içeriğinde kısım kısım biçimlendirme yapabileceğimiz bir alan açıyor.

Block typelar için daha farklı şeyler yapmak isterseniz buradan bulabilirsiniz. https://www.sanity.io/docs/block-type

Bir filmde birden fazla oyuncu olabileceği için movies ve actors schema’ları arasında bire çok ilişki olmalı. Bu şekilde bir ilişki kurabilmek için referance type’ını kullanmamız gerekiyor. Burada birden fazla aktor eklememi sağlayacak yapıyı actors.js’te aşağıdaki resimdeki gibi kuruyorum.

Daha karmaşık bir yapı kurmak isteyebilirsiniz. Örneğin birden fazla schema ile bire çok ilişki kurmak isteyebilirdik. Daha farklı şeyler yapabilmek için orjinal dökümanı burada bulabilirsiniz. https://www.sanity.io/docs/reference-type

Son olarak kaydettiğimiz datayı nasıl sorgularız ondan bahsedeceğim.

GRAQ isminde bir query language kullanacağız. Çok basit bir sorgulama dili diyebilirim. SQL biliyorsanız eğer hemen mantığını anlayabilirsiniz. Bilmiyorsanız da sorun yok cheat sheet’ler bunun için var :) https://www.sanity.io/docs/query-cheat-sheet

Kaydettiğim filmlerin tümünü ismine göre artan sırada sorgulamak için vision sekmesini açıp aşağıdaki gibi bir query yazıyoruz. Bize sonuç olarak aşağıdaki resimdeki gibi bir json objesi dönüyor. Ayrıca bize bir query url oluşturuyor.

[_type==”movie”] | order(name desc) {

_id,

name,

type,

poster,

summary,

actors

}

Sanity ile ilgili bahsedeceklerim bugünlük bu kadar. Bir sonraki yazımda sanity ile yaptığımız bir projeyi production ortamına nasıl deploy ederiz, kullanıcılara erişim nasıl veririz ondan bahsedeceğim.Daha sonra da backend’ini sanity ile frontend’ini next.js frameworkü ve react kütüphanesiyle hazırladığım bir fullstack proje yapacağız.

Sanity’nin official sitesine buradan ulaşabilirsiniz.

https://www.sanity.io/docs/create-a-sanity-project?ref=navbar&slug=get-started

GRAQ için aşağıdaki sayfadan faydalanabilirsiniz.

https://www.sanity.io/docs/groq-reference

Happy Reacting :)