Angularda Json-Server Kullanımı
Bugün projelerimizde Fake Rest Api olarak kullanabileceğimiz Json-Server ile küçük bir uygulama yapacağız. Detaylı kullanımı ve bilgi almak için Json-Server dokümantasyonunu inceleyebilirsiniz. Json-Server kullanarak projemizin henüz hazır olmayan apilerinin de UI tarafından implementasyonuna başlayabilir veya kurduğumuz tablo gibi yapıları büyük datalara nasıl tepkiler vereceğini kolaylıkla görebiliriz.
Projemize başlamadan önce Json-Server kurulumunu yapalım;
npm install -g json-server
Yeni bir Angular projesi oluşturarak işe başlayalım.
ng new fakerestapi
Daha sonra proje dosyalarımızın olduğu yerde db.json adında yeni bir dosya oluşturuyoruz. Açtığımız ilk scope altında endpoint olarak kullanacağımız string ifadeyi yazıyoruz. Bu örneğimizde endpoint’imiz “heroes”.
Daha sonra dizi tanımlar gibi datalarımızı tanımlamaya başlıyoruz.
Bu noktadan sonra Angular tarafında template’imizi oluşturmaya başlıyoruz. Çoğunlukla screenshotlarla devam edeceğiz kaynak kodlara github üzerinden ulaşabilirsiniz. Oluşturduğumuz “db.json” dosyasını rest servis olarak çalıştıralım. Burada “db.json” dosyamız ile aynı path de değilsek, dosyanın olduğu pathi göstermeyi unutmayalım.
json-server — watch db.json
Bu komuttan sonra localhostumuzun 3000 numaralı portu üzerinde Fake servisimiz çalışmaya başladı. Eğer farklı bir porttan kullanmak istiyorsak port parametresini kullanabiliriz. Postman yardımıyla datalarımıza ulaşmaya çalışalım. Doğrudan endpointe get isteği attığımızda tüm datalarımızı listeliyoruz.
Eğer id ye göre ulaşmak istersek localhost:3000/heroes/1 ile id’si 1 olan kayda ulaşabiliriz. Json-server bize bir çok açıdan esneklik sağlıyor. Sorting,
filtering ve Kayıtları pageable şekilde almamıza olanak sağlıyor. Gelin Angular ile hazırladığımız bu dataları tablo haline getirelim. Tip güvenli çalışmak önemlidir, bu yüzden önce hero modelimizi oluşturuyoruz.
Dataları getireceğimiz servisi yazalım. Temel CRUD işlemlerini yapacağımız fonksiyonlarımızı yazıyoruz.
Componentimiz içerisinde modelimizi tanımlıyoruz. Dataları alacağımız, manipüle edeceğimiz fonksiyonlarımızı yazıyoruz.
Gelelim Componentimiz içinde Tablomuzu, yeni hero oluşturmaya olanak sağlayacak dialog penceremizi ve delete işlemini
yapabileceğimiz butonu ekliyoruz.
UI Frameworkleriyle çalışırken Json-Server öğrenme aşamasında büyük kolaylık sağlar. Json-Server’in pagination özelliği sayesinde Lazy Load gibi Back-end servise ihtiyaç duyan yapıları öğrenebiliriz.
Ayrıca projelerimizde Angular için hazırlanmış Component Library olan Primeng’den sık sık yardım alacağız. Angular ile daha kompleks yapılara geçmeden önce Json-Server kullanımından bahsettik. Gelecek uygulamalarımızda sık sık kullanacağız. Bir sonraki yazımızda Tablolarda sıkça kullandığımız Lazy Load yapısından bahsedeceğiz.
