9.Gün — HTTP Sorgusu ve Json ile Veri çekmek verileri işlemek

,

Merhabalar 💙

Bugün sizlerle birlikte kaldığımız yerden devam ediyoruz birden fazla internet üzerinde işlenebilecek veri var ki. bunları sıfırdan oluşturmanın bir anlamı yok kaynaklarımızı uygulamalarımızın içerisinde verilmiş şekilde kullanabiliriz. Bunları gerçekleştirmenin birden fazla yolu var. Önemli olan bazen Müsait olduğunuz birinin çokluğu değil. verilerimizin kullanım alanlarını belirlemektir.

Bunlar için üç(3) tane temel aşamamız olacaktır.

• Veri yolunun uygulama içerisine öğretilmesi,
• Verilerin uygulama içinde görüntülenebilmesi için modelleme oluşturulması,
• Verilerin uygulama içerisindeki arayüze görüntülenmesi,

yazıldığında ve anlatıldığında Mantık olarak gerçekten çok olay Görürse de bazı süreçlerden haberdar olmanız gerekiyor ki bu süresi rahat bir şekilde yapalım o zaman hadi başlıyorum.

Uygulamamızın klasörleme yapısına kısaca bakalım,

Ana dosya yapımızda Lib klasörü içerinde değerlenmektedir.

Şimdi sizlerle birlikte diğer dosyalarımızın içerikleri oluştururalim.

İlk önce açılış veya karşılama ekranı olarak adlandırdığımız bir yapı oluşturalım.

Bu yapı doğrudan Anasayfa veya istenilen ekrana yönlendirme yapması için oluşturulacak,

Bunun için yorulmadan bir paket ile oluşturalım.

Bu Paket,

paketimizi Root(Proje dosya ve klasörlerin bulunduğu dizin ) klasörümüz içerisinde pubspec.yaml içinde tanımlıyoruz.

Ardından Terminal’e pub get dememiz yeterli. Ardından bu paketin widget’larını uygulamamız da kullanabiliriz.O zaman kullanalım!!!

Dikkat ettiyseniz bu yapının içerisinde 1 adet yönlendirici bulunmaktadır. Bu yönlendirici yüklenme ekranı ilet işlemimiz bittikten sonra Hedef belirtilen sayfaya bizleri yönlendirilmiş olacaktır. Bunu da HomePage() olarak tanımladığımız sınfımıza gerçekleştiriyoruz.

ve Görüntüleyelim…

ve artık HomePage() üzerindeki ara yüz tasarım işlemlerie yavaştan başlayalim…

İlk önce HomePage’imizin ön taslağini oluşturalım bunları oluştururken önce ki gün öğrendiğimiz widget’ları kullanıyoruz.

Bu gün ek olarak yerine geçmesini istediğimiz bir widget yapısı için tasarım da yardımcı olacak

Placeholder(), widget’indan da yararlaniyoruz. Benim size tavsiyem hızlı görüntüleme almak için Container ile sarmayalıyın.

ve kodumuza bir bakalım…

Widget Ağacımızı inceleyelim. Ve böylelikle birbrini sarmayalan(wrap) yapıları daha net görmüş oluruz.

ve görsel olarak bir sonucumuza bakalım…

Başla butonu kendi içinde bir misyona sahip olacaktır.

Başla butonuna basıldığında oluşturduğu tetikleme ile kullanıcı verilerini jSon olarak çekere HomePage içinde bizlere yansıtıcaktır.

Peki bu veri nasil nereden gelecek,

İlk önce servisimizin data kaynağını oluşturalım.Bunun için örnek projelerder taslak verilerin kaynaği olan, https://jsonplaceholder.typicode.com/users üzerinden tanımlı kullanıcı verileri servisimiz ile uygulamıza tanımlayalım.

! Ek olarak bir paketten daha yararlanacağız. Bunu Root dizinindeki pubspec.yaml içindeki

dependencies :

altına diğer paketlerin bulunduğu satıra ekliyoruz.

Evet,verilerimizin iletişime gecebilmesi için önce ona kaynağinin neresi olduğunu ve çekilen verinin formatini öğretelim.

ve ardından çekilecek olan verinin modellemesi gerçekleştirelim.

yapımızı belirtğimiz dosya dizini içindeki UserModel.dart içerisine gömelim.

ver ardından yapımızı çalıştırmak için bir adet tetikleme oluşturalım.

Bu yapımızı Scaffold içerisineki FAB içinde kullanalım.

ve ardından Uygulamamızı çalıştırarak görüntüleyelim.

Dikkat ettiyseniz

Bir adet UserNumber tanımlamıştır. Bu bize gelecek olan datanın kullanıcı kodu olarak karşimiza çıkıyor bu değişim gerçekleştiği sürece çekilen verilermiz de değişim sağlayacaktır.

ve çekilen veirinin sonucunu görüntüleyelim.

Özet

Birden fazla değişkenlerin görüntülendiği Bu yapılarda dış kaynak sağlayıcılardan gelen veriler her zaman uygulamamızın daha dinamik görünmesini sağlayacaktır gereksiz kod yazmaktan bize kurtaracaktır.