API ‘ dan Veri Almak “Flutter”

Evet bugün ki konumuz API ‘ dan veri alarak uygulamamızda bunu kullanmak. Bu konuyu olabildiğince basit anlatmaya çalışacağım için teknik terimlere girmeyeceğim. Konunun özünü anladıktan sonra detaylarına inebileceğinizi düşünüyorum.

Öncelikle konuyu daha anlaşılabilir hale getirebilmek adına bazı tanımları yapmamız gerekiyor.

Başlarken ilk olarak yapmamız gereken adım pub.dev ‘ e gidip http paketini indirmek ( yani kopyalamak) ve pubspec.yaml dosyamıza bunu eklemek. Sonrasında alacağımız veriyi yönetebilmek için aşağıdaki klasör yapısını oluşturuyoruz.

data_service.dart dosyası üzerinden API’ ı yöneteceğiz. Aşağıda data_service dosyasını görebilirsiniz. Bu kısımda örnek API veri olarak openweather kullandım. Siz de örnektekinin aynısını yapmak istiyorsanız openweather’a üye olarak ( herhangi bir para ödemenize gerek yok ) oradan kendinize bir appid alıyorsunuz. Openweather da current weather data sekmesinden API URL ‘ ini görebilirsiniz. Aşağıdaki kod bloğunda önemli olan yer “response” değişkeni üzerinden veriyi çekip gelen verinin “response.body” ile decode etmek ve son olarakta return de bunu json olarak servis ediyoruz.

Bu yöntemi izlemek zorunda değilsiniz. Ücretsiz API veren dummy API larda denemelerinizi yapabilirsiniz. Bu kısmı göstermekteki amacım API dan gelen veriyi ayrı bir dosyada tutumanız böylelikle önyüzü yazdığınız yer ile uygulama logiclerinizi ayırabilmenin temellerini oluşturmak.

Evet bu kısa bilgiler huzurunda itirazı olan yok ise artık asıl anlatmak istediğimiz kısma başlayabiliriz. Lets go!!!!

API üzerinden alacağımız json verisini yukarıda örnek olarak gösterebilirisiniz.

1–2–3 seviye veri diye adlandırdığım kısımlar json verilerinde karşımıza çıkabilecek veri tipleri ( isimlendirmeye takılmayın daha kolay anlatabilmek için verdiğim bu tanımlamayı)

ilk başta json ile bize gelen veri listesinde “key: value” ilişkisi mevcut. En basit veri tipi mevcut 1.seviye diye adlandırdığım veri olur kendileri. Bu veriyi uygulamamızın çeşitli yerlerinde kullanabilmek için class oluşturup bu class’ ta bütün verilerimizin tanımlamasını yapacağız. 1.seviyeyi ele alır isek öncelikle class’ın dışarıdan alacağı değeri tanımlıyoruz “cityName” daha sonra constructor ‘ünü oluşturuyoruz. Factory contructor’ ü ile gelen veriyi map liyoruz. Maplediğimiz veriyi jsondan gelen veri ile eşledikten sonra return ediyoruz.

Gelelim 2. Seviye dediğimiz veri tipine. Burada ulaşmak istedğimiz veri listede direk verilmemiş liste içinde liste olarak verilmiş. Bu yüzden almak istediğimiz veriden başlayacak olursak ( ben buna çekirdekteki veri diyorum) bu çekirdek veri için bir class oluşturup aynı 1. seviyede yaptığımız işlemleri yapardık. Böylelikle veriyi bir üst seviyeye çıkarmak için hazır hale getiriyoruz. Burada aklınıza Ruslar’ın matruşka oyuncakları gelebilir :)

2. seviye için oluşturmuş olduğumuz “TemperatureInfo” class’ ı WeatherResponse class’ına veri olarak gönderiyoruz. Örnek veriye baktığımızda veri “main” anahtar kelimesinin altında tutulduğu için ilk seviyede “TemperatureInfo” main ile tanımlanmış. Bu tanımlamaların ardından artık 2. seviyedeki veriyi de kullanılabilinir hale gelmiş bulunuyoruz.

Gelelim 3. seviye verilerimize. Burada bir dizi ve dizi içinde objeler mevcut. Bunun için temelde yaptığımız işlem değişmeyecek. Öncelikle çekirdekteki veriler için class oluşturuyor ve return ediyoruz.

veriyi WeatherResponse Class’ında işlemek için yukarıda gördüğünüz adımları yerine getiriyoruz. 2. seviyede yaptığımız işlemlerden farklı değil. Önemli olan nokta bir dizi elimizde olduğu ve içinde objeler olduğu için değer ismini girmemiz yetmiyor. “[weather][0]” yani bana weather dizisindeki 1. elemanı getir tanımını yapmış oluyoruz.

Evet artık elinizde API den gelen veriyi yönetebileceğiniz bir model dosyası olmuş bulunmakta hayırlı olsun efendim.

Bu kısımdan sonrası uygulamanızda önyüz tasarım yapıp bu tasarımda veriyi istediğiniz yere giydirmek kalıyor sadece örnek olarak aşağıya bir görsel paylaşıyorum. Yazının konusu görselleşme olamadığı için o kısımın detaylarına değinmiyorum.

Yazının sonuna geldiğimize göre umarım faydalı ve basit anlatabildiğim bir yazı olmuştur. Sorularınız olur ise Linkedin üzerinden ulaşabilirsiniz.

Source Code; Network Request

Linkedin; Profile