Flutter uygulamalarında API (Application Program Interface) kullanımı konusuna ve API servislerinden dönen JSON tipindeki verilerin nasıl parçalandığına dair bilgilendirici ve cheat sheet tarzı bir yazıya hoşgeldiniz. Seçeceğim API kaynağını Public-APIs isimli kaynaktan buluyorum. Burada istediğiniz konuya dair ücretsiz API hizmetlerini bulabilirsiniz. Dummy veriler ile uğraşacağımız bu yazıda küçük bir uygulama için kolları sıvayalım.

Hazırlık

Projemizi oluşturalım ve uygulamamızın içerisine http paketini ekleyelim. VS Code kullanıyorsanız eklentiler kısmından “cas van luijtelaar” isimli geliştiricinin “Dart Firestore Class Generator” eklentisini indirin. Bu eklenti oluşturduğunuz sınıfların constructor, toMap, fromMap, toJson vb. fonksiyonlarını tek tuşla oluşturuyor. Firestore için oluşturulmuş bir eklenti olsa da diğer API kaynaklarında da duruma göre kullanabiliyorsunuz.

Dummy API dökümanlarını inceleyerek öncelikle istek atacağımız Endpoint’leri ve bu noktaların bize döndüreceği JSON verisini incelememiz gerekiyor. Github ile hızlıca kayıt olarak kendimize bir API key oluşturalım.

App ID’yi kopyalayarak uygulamamız içerisine kaydedelim. Daha sonra dökümanlar sayfasına gelerek burada API kullanımına dair bilgileri görüntüleyelim.

Base DATA URL olarak https://dummyapi.io/data/api/ adresi, APP-ID kullanımını ise alt satırda header’a eklenmesi gerektiğini ve base url üzerinde bazı eklemeler yaparak farklı veri tiplerine ulaşmanın mümkün olduğu belirtilmiş.

Sayfanın daha da altında API servisinin döndürdüğü veri tiplerine dair açıklamalar ve o veri tiplerinin hangi endpoint’lerde aktif olduğunu gösteren tablolara yer verilmiş. Post data modeli üzerine çalışmaya karar verdim ve Post data modelinin sınıfına bakmak için Response: array(Post) yazan kısma tıkladım.

Post data sınıfında text, image, likes gibi verilerin olduğunu gördüm. Bunları belirtilen tiplerde uygulamamın içerisindeki sınıfa ekliyorum. Örneğin; text’i string olarak, likes’ı int olarak vb.

class Post {
  String text;
  String image;
  int likes;
  String link;
  List<String> tags;
  String publishDate;
  // owner User sınıfını oluşturduktan sonra burayı değiştirin ->   User owner;
}

Owner kısmında görüyoruz ki, Owner değişkeni bir başka sınıfın mensubu. Bunun için dökümanda belirtlen biçimde User isimli bir sınıf oluşturacağız ki, Post verilerini çekerken User verisini de alabilelim.

class User {
  String id;
  String title;
  String firstName;
  String lastName;
  String gender;
  String email;
  String dateOfBirth;
  String registerDate;
  String phone;
  String picture;
  // location
}

Görüyoruz ki location verisi de bir başka sınıftan geliyor. İsterseniz location isimli sınıfı oluşturarak tüm veriyi düzgünce işleyebilirsiniz fakat ben konunun anlaşılması açısından bu iki sınıfın yeterli olacağını düşünüyorum.

Eklenti kullanımı – Data Class Generator

Her iki sınıf için de data class generator’ı çalıştıralım. Sınıfların bulunduğu dosyalara gelip ampül işaretine tıklayıp Generate data class opsiyonuna tıklayarak gereken sınıfları oluşturabiliriz.

API kullanımı & servis dosyalarının yazılması

dummy_service.dart isimli bir dosya oluşturalım ve içerisine http kütüphanesini import edelim.

import 'package:http/http.dart' as http;

Daha sonrasında Dummy API Data Explorer kısmında yapacağımız sorgunun bize vereceği dönütü inceleyelim. Beğeni sayıları, paylaşan kişinin adı, paylaşılan fotoğraf, text vb. elementleriyle tıpkı bir tweet yapısına benziyor. Eğer isterseniz siz de benzeri bir tasarımı uygulayabilirsiniz fakat biz JSON parçalama işlemini yaptıktan sonra bırakacağız. 🙂

getPosts adında oluşturacağım fonksiyonla beraber 5 adet post talep edeceğim servisten. Bunu yaparken de header içerisine App ID’mi yerleştireceğim ki yetkili bir istek olduğu belli olsun. Eğer bu tarz API key ile bağlantılar kurmazsanız 403 hatası alabilirsiniz. Şu yazıma bakabilirsiniz: HTTP status kodları ne anlama geliyor?

import 'package:app/constants/constants.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

getPosts() async {
  var response = await http.get(
      Uri.parse('https://dummyapi.io/data/api/post?limit=5'),
      headers: {'app-id': appid});

  var parsedJson = jsonDecode(response.body);
  print(parsedJson['data'][0]);
}

Constants isimli dosyadan aldığımız appid değişkenimizi http.get içerisinde headers içerisine uygun key ile beraber yazdıktan sonra isteği gönderiyoruz. Ardından dönen sonucu jsonDecode ile işleme sokup bir değişkene atıyoruz. Daha sonra da print ile verimizi kontrol ediyoruz. İster [‘data’] ile tüm veriyi yazdırın, isterseniz indislerdeki verileri yazdırın size kalmış tamamıyla.

Daha sonrasında her indisteki Post verisini bir liste haline getirip uygulamanın UI tarafında gösterilmeye hazır hale getirmemiz gerekiyor.

  List<Post> posts = List();
  for (var i = 0; i < parsedJson['data'].length; i++) {
    Post temp = Post.fromMap(parsedJson['data'][i]);
    posts.add(temp);
    print(parsedJson['data'][i]); // eklediginiz veriyi gormek icin
  }
  return posts;

FutureBuilder ile isterseniz getPosts fonksiyonunu çağırabilir, isterseniz initState içerisinde getPosts’u asenkron çağırıp, veri geldiğinde setState yaparak UI güncelleyebilirsiniz. Seçim tamamıyla size ve programlama yeteneklerinize kalmış.



Flutter uygulamalarında FutureBuilder’ı anlattığım bu yazıyı, initState ile asenkron veri çekmeyi merak ediyorsanız bu yazıyı ve son olarak çoklu verilerin nasıl gösterileceği konusunu öğrenmek istiyorsanız ListView.builder’ı konu aldığım bu yazıyı okumanızı tavsiye ediyorum. Github üzerindeki projelerime bakarak da Flutter API kullanımı hakkında bilgi edinebilirsiniz. Özellikle Cryptocurrency App, Coronavirus Tracker ve Deprem Haritası isimli üç proje FutureBuilder kullanımı, API kullanımı, Future kullanımı gibi konularda sorularınızı yanıtlayacaktır.


Okuyucuya Not

Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.

Sağlıcakla kalın!

Tags: