Flutter'da Token ile Rest Api Kullanımı

En son güncellendiği tarih: 7 Ara 2020

Merhabalar. Bu yazımda flutter da bearer token ile şifrelenmiş bir Json verisini nasıl çekip kullanabileceğimizi elimden geldiği kadar anlatmaya çalışacağım. Eksik ya da fazla bir yer olursa yorum olarak yazabilirsiniz.

Hazırsanız başlayalım :)

Öncelikle Bearer Token ve Json Api nedir ondan bahsedelim.


Bearer Token - Json Api


JSON API, ilgili veri kaynaklarının getirilmesi ve işlenmesi için istemci tarafından oluşturulacak isteklerin nasıl yapılması gerektiğini ve sunucunun bu isteklere hangi şekilde yanıt vermesi gerektiğini belirler.
Json Api, istemciler ve sunucular arasındaki istek sayısının ve giden/gelen veri boyutunun azaltılması için tasarlanmıştır. Json Api, oluşturulacak veri değiş-tokuşu için Json Api medya türünün (application/vnd.api+json) kullanımını gerektirir.

Json api'yi flutter projemizde http package ile kullanıyoruz. Bu package sayesinde json api'den çok rahat bir şekilde verimizi çekebiliyoruz.


Bearer Token için json veriye ulaşmak için kullanılan bir anahtar diyebiliriz. Ulaşmak isteyen kişiyi doğrulamaz. Veriye ulaşmak için bearer token yeterlidir.


Entegrasyon


Evet şimdi flutter projemizi oluşturuyoruz. İlk olarak http paketini pubspec.yaml dosyasına eklememiz gerekiyor. Çünkü http package kullanarak json verilere ulaşabiliyoruz. Http package http request işlemlerini gerçekleştirebildiğimiz çok kullanışlı paketlerden biridir. Diğer paketlere de buradan ulaşabilirsiniz.



Devamında data model sınıfımızı oluşturuyoruz. Json nesnesini kendi model nesnemizle yönetiyor olacağız.


Örnek olarak json da üç tane alanımız olsun ve bunları datamodel.dart dosyasına yazalım. (Projenin daha anlaşılır ve rahat geliştirilebilmesi için projeyi dosyalara ayırmak her zaman avantajdır.)


Sonra constructor ile bu modelimizi yapılandırıyoruz. ve json olarak gelen veriyi bir nesneye çekiyoruz.



Burada iki yardımcı nesneye daha ihtiyac var. Biri ilgili nesnenin jsondan okunması için, diğeri DataModel haline getirmek için. Daha sonra modelimizi map formatına çevirerek json veriyi map formatında kullanıyoruz. Aşağıda modelin tam hali görülmektedir. Eğer API lerle çalışma hakkında çok bilgi sahibi değilseniz flutter.dev ya da diğer kaynaklardan araştırmanızı öneririm.



Şimdi api_constants.dart adında bir dart dosyası oluşturup burada api linkini ve tokeni tanımlıyoruz.



Şimdi service.dart dosyası oluşturup burada API deki veriyi token kullanarak çekme işlemini gerçekleştireceğiz.



Kodumuzda Future listemizi DataModel türünde oluşturuyoruz. Token ile çektiğimiz veriyi DataModel sınıfında kullanacağımız şekle çeviriyoruz. Class'ımızda Future Builder bir liste kullanıyoruz. Future Builder kullanmamızın sebebi, verinin gelme zamanı değişiklik göstereceği için verinin çekilmesi bitene kadar çalışabiliyor olması.


Yukarıdaki örnekte açıklama satırlarında işlemleri açıkladık. Son işlemde çektiğimiz response.body işlemi ile json string aldık ve bunu dart:convert paketini kullanarak conversion işlemi yaptık ve bunu DataModel Sınıfımızdaki alanlara fromJson ile yerleştirdik. statusCode==200 kullanarak istemcinin eylemi başarıyla gerçekleştiyse gelen veriyi conversion yapıyoruz. Yoksa hata mesajı almasını sağlıyoruz. Bu durum kodlarının farklı türleri de var. Diğer durum kodlarına buradan bakabilirsiniz.


Bundan sonra sadece arayüzümüzü tasarlamak ve ilgili yerlere verileri yazdırmak kalıyor. Altta örnek kodunu ekledim. Bundan sonrasını anlatıp vaktinizi almak istemedim. Bundan sonrasını yapmanın sizin için çocuk oyuncağı olduğunu düşünüyorum. :) Buraya kadar sabırla okuduğunuz için çook teşekkür ederim. Diğer yazılarda görüşmek dileğiyle...



Uygulamamızın ekran görüntüsü



Github: https://github.com/hasancaktar/jumbo_crm


Kaynak:

http://devnot.com/2017/json-api-standardi/

https://medium.com/@kurtulussahin/api-nedir-462dff9922d0

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

https://restfulapi.net/http-status-codes/

https://pub.dev/packages/

https://www.hostinger.web.tr/rehberler/json-nedir/

https://swagger.io/docs/specification/authentication/bearer-authentication/


#flutter #cross #jsonapi #restful #token #authorization #httpclient

0 yorum

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın