Flutter MobX State Management — 2 (Networking)
Selam arkadaşlar, bir önceki yazım MobX state-management yönteminin 2. yazısını yazıyorum. Eğer MobX hakkında hiçbir bilginiz yoksa ilk yazıyı okumanızı ardından bu yazıyı okumanızı öneririm. (Press Here).
Bu yazımda detaylara fazla girmeden tamamen coding ve clean architecture odaklı yazacağım fakat yine de açık açık anlatmaktan taviz vermeyeceğim. Hazırsanız başlayalım!
Kullanacağımız paketler hem işimizi kolaylaştırmak adına hem de kodumuzun clean olması adına çok önemli. Paketlerimiz:
flutter_mobx: ^2.0.0
mobx: ^2.0.1
mobx_codegen: ^2.0.1+3
build_runner: ^2.0.0
dio: ^4.0.0
json_annotation: ^4.0.1
json_serializable: ^4.1.0
Her ne kadar buraya yazsam da siz güncel versiyonlarınızı uygulamanızda kullanın. Bunun için -> pub.dev.
Paketlerimizi de eklediğimize göre klasörlerimizi hazırlayalım ve yavaş yavaş kodlarımızı yazmaya başlayalım. Ben clean architecture takıntılı olduğum için bazen incik boncuğuna kadar klasörleri atomik olarak parçalıyorum. Size anlatırken o kadar detaya girmeyeceğim fakat yine de clean olmasına dikkat edeceğim. Klasörlememiz bu şekilde:
mobx_demo_networking/
├── lib/
│ ├── model/
│ ├── photo_album_model.dart
│ ├── view/
│ ├── photo_album_view.dart
│ ├── viewmodel/
│ ├── photo_album_viewmodel.dart
│ ├── service/
│ ├── photo_album_service.dart
├── main.dart/Klasörlememizi yaptıktan sonra modelimizi oluşturmaya başlayalım. Modelimizi oluştururken kullanacağımız 2 paket var bunlar json_annotation ve json_serializable paketleri. Bu paketleri kullanmamızdaki amaç hem bize kod yazdırmadan zaman kazandırıyor hem de uzun veri tablosuyla çalışıyorsak çok clean bir architecture kurmamızı sağlıyor. Bu paketler build_runner paketi ve extension’ı ile birlikte kullanılıyor bu yüzden bu paketle beraber kurduğumuz (birinci yazımda nasıl kurulacağından bahsetmiştim) build_runner extension’ını çalıştırmayı unutmayın.
Modelimiz bu şekilde olacak. Gördüğünüz gibi sadece modelimin üzerine “@JsonSerializable()” tagi yerleştirdim ve ek olarak “part ‘photo_album.g.dart’;” yazarak modelimi build_runner tarafından oluşturulacak dosyama bağladım. Bu paketler ve extension ile birlikte sadece “Class, Constructor, @JsonSerializable() tagi ve part “‘photo_album.g.dart’;”” yazarak modelimizi clean bir şekilde oluşturduk.
Sırada Service katmanımızı hazırlamak var. Service katmanımızda verileri API’dan çekebilmek için Dio paketini kullanacağız. Bunun için Service classımızı da oluşturalım:
Service katmanımız bu şekilde olacak. Constructor ile View katmanımıza bağlayacağız. Fonksiyonumuz da zaten bildiğiniz gibi verileri çekmemize yarayacak. Peki API URL’imiz ne? URL’i nereye yazacağız? soruları aklınıza geliyorsa, lütfen merak etmeyin onu View katmanımızda ayrı bir şekilde kullanacağız. Service katmanımızı da yazdığımıza göre artık Viewmodel katmanımıza geçelim.
Viewmodel katmanımızda ana yapmamız gereken işlem, Viewmodelimize constructor oluşturup API’dan çekeceğimiz verileri daha init() anında listemize eklemek ve bunu static olarak kullanmak. Bu şekilde uygulamak istemezseniz eğer FutureBuilder veya StreamBuilder Widgetları ile birlikte de kullanabilirsiniz. (build_runner extension’ı çalıştırmayı unutmayın!).
Viewmodelimizde yaptığımız işlemleri söylemek gerekirse, önce service katmanımızı kullanabilmek için photoAlbumService adında bir değer oluşturduk ardından API’dan gelen verileri kaydetmek için modelimizden türeyen bir liste oluşturduk ve fetchPhotoAlbum() fonksiyonunda bu listemize servisten bize fonksiyon tamamlanınca dönecek olan listemizi async-await olarak verdik. En son olarak constructor oluşturarak, constructor’ımızın içinde bu fonksiyonumuzu çağırarak başlangıçta yani init() anında verileri listemize kaydedeceğiz. Her şey tamamsa, haydi View katmanımızı hazırlayalım!
View katmanımızda gördüğünüz gibi Observer widget’ı ile tüm body’mizi sarmaladık ve bir ListView.builder oluşturarak gelen verilerimizi UI üzerinde göreceğiz. UI’ımızı hazırladıktan sonra Viewmodelimizi call ederek uygulamamızda başlatalım. Bunun için:
kodumuzu yazdıktan sonra “ServicePath.BASEURL.values” kısmına ‘https://jsonplaceholder.typicode.com' yazmayı unutmayın. Ben atomic şekilde çalıştığım için baseUrl’imi başka bir class içinde tutuyorum ve oradan çağırıyorum bu yazıda işleri komplikeleştirmeye gerek olmadığı için o tarafa hiç değinmedim.
Ve Son. MobX ile verileri çekmek bu kadar basit. Uygulamamızı artık çalıştırabiliriz.
Daha fazlası için beni Medium, Twitter(fazla aktif olmasam da) ve Github üzerinde takip etmeyi unutmayın!
GitHub — https://github.com/ebrarbilgili
Twitter — https://twitter.com/ebrarblg
ve yeni hazırladığım içeriğini ilerleyen günlerde doldurup yeni başlayanlar için bir rehber niteliğinde olacak Flutter Atomic websitesi — https://flutteratomic.com
