Huawei Cloud DB ile MVVM Mimarisini Kullanarak RecyclerView’da Film Listeleme
Herkese merhaba,
Bu yazımda sizlere Huawei Cloud DB kullanarak nasıl android uygulama geliştirebiliriz bunu anlatacağım. MVVM mimarisi ile geliştirdiğimiz uygulamamız, bir film uygulamasıdır. Cloud DB’den çektiğimiz film verilerini, LiveData ile RecyclerView kullanarak listeleyeceğiz.
Öncelikle kullanacağımız teknolojiler hakkında kısaca bilgi edinelim.
Cloud DB Nedir, Nasıl Çalışır?
Cloud DB, sunucuya gerek duymadan verilerinizi kaydedebileceğiniz, cihaz ile bulut arasında şifreli bir şekilde, kesintisiz ve güvenilir veri senkronizasyonu sağlayabileceğiniz bir veritabanı yapısıdır.
Projemize başlamadan önce, Cloud DB ile ilgili daha detaylı bilgi için öncelikle linkteki (link) makaleyi okuyalım. Makalede, Cloud DB’nin genel yapısı ve kullanımı hakkında ayrıntılı bilgiye erişebilir ve projemizde kullanabilmek için Cloud DB başvurusu nasıl yapılır görebilirsiniz.
MVVM Nedir?
MVVM, bir projenin “Sorumlulukların ayrıştırılması” esasına göre geliştirilmesi temeline dayanan bir tasarım kalıbı sunmaktadır. MVVM mimarisine göre bir yazılımı Model, View ve ViewModel olarak üç farklı yapıda geliştirebiliriz.
Model: Veritabanından ya da web servislerinden gelen verilerimizi temsil etmek için kullanılan POCO ya da entity sınıflarından oluşmaktadır. Gerekli tüm veritabanı işlemleri, model katmanında yapılır.
View: Bu kısım verilerimizi son kullanıcılara aktardığımız katmandır. Son kullanıcı ile uygulama arasında bir köprü görevi görür.
ViewModel: ViewModel, view ile model arasında köprü görevi görür, yani Model’i View’a bağlayan yapıdır. View, ilgili işlemleri ViewModel üzerinden yapmaktadır.
Live Data Nedir?
LiveData, observer mimarisini örnek alır. Data’da herhangi bir değişiklik meydana geldiğinde, bu durumu observer’a bildirir. Kullanıcı arayüzleri de bu Observer içerisinde güncellenebilir.
Projemizi oluşturmaya başlayalım…
Kullanacağımız teknolojiler ile alakalı gerekli bilgileri edindiysek ve linkini paylaştığım Cloud DB makalesini okuduysak, yavaştan android projemizi oluşturmaya başlayalım. Aşağıdaki adımları sırasıyla takip edip, her adımı eksiksiz bir şekilde yerine getirelim.
- İlk olarak Huawei Developer Console üzerinden, developer olarak kayıt olmamız gerekiyor. (Link)
- App Gallery Connect üzerinden projemizi oluşturalım (Link)
- Android Studio’da projemizi oluşturalım (Link)
- SDK entegrasyonunu yapıp, gerekli dependencyleri ekleyelim (Link)
Yukarıda belirttiğimiz maddelerdeki tüm işlemler tamamen yapıldıysa, projemize başlayalım.
Öncelikle App Gallery’de oluşturduğumuz projeye gidip, Develop sekmesinden Cloud DB’yi bulup “Enable now” butonuna tıklayarak enabled edelim. (Cloud DB için daha önceden application yaptığımızı varsayıyoruz)
Daha sonra agconnect-services.json dosyasını indirelim.
İndirdiğimiz agconnect-services.json dosyasını ve oluşturduğumuz fingerprint sertifikasını (key.jks), şekildeki gibi app dizininin altına kopyaladığımızdan emin olalım.
app level build.gradle dosyamıza gerekli dependencyleri ekliyoruz ve gerekli configurasyonları yapıyoruz. build.gradle dosyasına fingerprint için gerekli configurasyonları yapmayı ve Java kaynak kodunun uyumluluk modunu 1.8 olarak ayarlamayı unutmayalım.
project level build.gradle dosyamıza da gerekli dependencyleri ekleyelim.
Şimdi sırasıyla Cloud DB Zone (veri tabanı) ve Object Type’larımızı (tablo) oluşturmaya başlayalım.
Öncelikle AppGallery Connect’te oluşturduğumuz app’i seçip developer sekmesine geliyoruz. Sol tarafta yer alan Build’in altındaki Cloud DB’yi seçiyoruz. Açılan ekranda Cloud DB Zones -> Add -> Cloud DB Zone Name -> Ok sırasını takip ediyoruz. Cloud DB Zone’umuzu oluşturduk.
Şimdi sıra Object Type’ımızı oluşturmaya geldi. Ekranda ObjectTypes sekmesine gelip Add butonuna tıklıyoruz.
Açılan ekranda Object Type adını girdikten sonra Next diyoruz.
Gerekli field’ları ekleyip, ardından typelarını da belirleyelim. id kolonunu primary key olarak belirlemeyi unutmayalım. Daha sonra Next diyip devam ediyoruz. Object Type’ımızı da oluşturmuş olduk.
Burada kısaca bir bilgi vermek istiyorum. Oluşturduğumuz bir Object Type’ı, herhangi bir sebepten dolayı silip, tekrar aynı isimle oluşturmak istersek, hata alırız. Bu durumu önlemek için, uygulamayı ve uygulamaya ait dosyaları telefondan tamamen silip, tekrardan uygulamayı yüklemek gerekir. İkinci bir çözüm olarak da AndroidManifest.xml dosyasına android:allowBackup=”false” satırını ekleyebiliriz. İki yöntem de problemi çözmezse, Object Type’ını farklı bir isimle oluşturabiliriz. :)
Şimdi de oluşturduğumuz FilmTb adlı Object Type’ına, RecyclerView’da göstermek için birkaç film ekleyelim. Data Entries’te Cloud DB Zone ve ObjectType adını yazıp, arkasından Search’e tıklıyoruz. Önümüze boş bir FilmTb tablosu çıkacaktır. Add butonuna tıklayıp, filmlerimizi tek tek ekleyelim. id kolonu autoincrement olmadığı için manuel olarak giriyoruz.
Sıra geldi son aşamaya. Oluşturduğumuz Object Type’ı java uzantısıyla export edip projemize ekleyeceğiz.
Android Studio’da, proje dizininde model, view ve viewmodel adında üç klasör oluşturuyoruz. Daha sonra export ettiğimiz FilmTb ve ObjectTypeInfoHelper class’larını model klasörünün altına şekildeki gibi kopyalıyoruz.
Export ettiğimiz FilmTb.class’ımızın içeriği aşağıdaki gibi olmalıdır.
Export ettiğimiz bir diğer class olan ObjectTypeInfoHelper.class’ımızın kodu da bu şekildedir. Export ettikten sonraki haliyle, hiçbir değişiklik yapmadan model klasörümüzün içerisine taşıyoruz.
Şimdi de CloudDBZoneWrapper.java class’ımızı oluşturalım. Tüm Cloud DB işlemlerimizi bu class içinde gerçekleştireceğiz. CloudDBZoneWrapper class’ında gerekli Cloud DB nesnelerini oluşturuyoruz. Cloud DB Zone açıp kapatma, Object Type oluşturma gibi işlemler de bu class’ta gerçekleştirilir. getAllFilms() fonksiyonuyla cloud DB’den filmleri çekiyoruz. Sonrasında, filmleri veritabanından çekme gibi işlemlerin sonuçlarını, işlemlerin yapıldığı activity’lere veya fragment’lara direkt göndermek için, birkaç tane callback fonksiyonu ekliyoruz.
CloudDBZoneWrapper.java class’ına gerekli fonsiyonları ekledikten sonra sıra geldi FilmViewModal.java class’ımızı oluşturmaya. Öncelikle CloudDBZoneWrapper.java class’ında oluşturduğumuz callback fonksiyonlarını kullanabilmek için, UiCallBack interface’ini implements ediyoruz. Daha sonra, Cloud DB’den çektiğimiz filmler için MutableLiveData oluşturuyoruz. getFilms() fonksiyonuyla çektiğimiz film verileri, callback fonksiyonları sayesinde acitivity’e direkt ulaşıyor. onAddOrQueryFilmList callback fonksiyonu içerisinde, Cloud DB’den çektiğimiz film verilerini Live Data’mıza atıyoruz. Böylece Live Data’ya Main Activity’den direkt erişebiliyoruz.
FilmListAdapter.java class’ımızı oluşturalım. Bu class, film verilerini RecyclerView nesnesine bağlamamızı sağlıyor. RecyclerView’da listelediğimiz herhangi bir filme tıkladığımızda, bizi filmle ilgili detay sayfasına götürmesi için gerekli işlemleri, bu class’ta gerçekleştiriyoruz.
Recyclerview’daki herhangi bir filme tıkladığımızda, film hakkında daha detaylı bilgiye erişmek için, DetailActivity.java class’ını oluşturuyoruz. Bu class’ta, film_detail.xml içerisinde oluşturduğumuz ve detail’de görmek istediğimiz textview bileşenlerini dolduruyoruz.
DetailActivity.java class’ına ait film_detail.xml layout’unu oluşturalım.
Sıra geldi MainActivity.java classımıza. Bu class’ta, Cloud DB’den çekip Live Data’ya atadığımız verileri, adapter yardımıyla RecyclerView’a bağlıyoruz. Cloud DB ya da ViewModal aşamasında, Live Data’da meydana gelen herhangi bir değişikliği, Observer sayesinde kolay bir şekilde gözlemleyebiliyoruz.
Kullandığımız RecyclerView için gerekli activity_main.xml de aşağıdaki gibidir. (MainActivity’de set ediyoruz)
Recyclerview’daki her bir filmimiz için bir CardView nesnesi oluşturuyoruz. CardView için de film_card.xml adında bir layout oluşturalım.
CloudDBQuickStartApplication.java class’ımızı da oluşturalım. CloudDBQuickStartApplication class’ını, AndroidManifest.xml’e ekliyoruz. Uygulama çalıştırıldığı anda, class çalışıyor ve Cloud DB ile connection sağlanmış oluyor.
Son olarak AndroidManifest.xml’in içerisini de düzenleyelim. DetailActivity ve CloudDBQuickStartApplication classlarıyla birlikte, gerekli permission’ları da ekledik.
Uygulamamızın sonuna geldik. Şimdi de iki görsel ile uygulamamızın son halini görelim. Sol tarafta film listesi ve sağ tarafta detay sayfası yer alıyor.
Yazımı okuduğunuz için teşekkür ederim. Umarım faydalı olmuştur. :)
Github kodu için : github
