Firebase ve Jetpack Compose ile Android uygulaması geliştirme

1. Giriş

Son Güncelleme: 16.11.2022

Firebase ve Jetpack Compose ile Android uygulaması oluşturma

Bu kod laboratuvarında, Make It So adlı bir Android uygulaması oluşturacaksınız. Bu uygulamanın kullanıcı arayüzü tamamen Android'in yerel kullanıcı arayüzü oluşturmaya yönelik modern araç seti olan Jetpack Compose ile oluşturulmuştur. Sezgisel olan bu araç seti, .xml dosyaları yazıp bunları etkinliklere, parçalara veya görünümlere bağlamaktan daha az kod gerektirir.

Firebase ve Jetpack Compose'un birlikte ne kadar iyi çalıştığını anlamanın ilk adımı, modern Android mimarisini anlamaktır. İyi bir mimari, bileşenlerin nasıl düzenlendiğini ve birbirleriyle nasıl iletişim kurduğunu çok net bir şekilde gösterdiğinden sistemin anlaşılmasını, geliştirilmesini ve korunmasını kolaylaştırır. Android dünyasında önerilen mimari Model - View - ViewModel olarak adlandırılır. Model, uygulamadaki verilere erişen katmanı temsil eder. Görünüm, kullanıcı arayüzü katmanıdır ve iş mantığı hakkında hiçbir şey bilmemelidir. İş mantığının uygulandığı yer ise ViewModel'dir. Bu bazen ViewModel'ün Model katmanını çağırmasını gerektirir.

Model - View - ViewModel'in Jetpack Compose ile oluşturulan bir Android uygulamasına nasıl uygulandığını anlamak için bu makaleyi okumanızı önemle tavsiye ederiz. Bu makale, kod tabanının daha kolay anlaşılmasını ve sonraki adımların daha kolay tamamlanmasını sağlar.

Oluşturacağınız uygulama

Make It So, kullanıcının görev eklemesine ve düzenlemesine, işaretler, öncelikler ve son tarihler eklemesine ve görevleri tamamlandı olarak işaretlemesine olanak tanıyan basit bir yapılacaklar listesi uygulamasıdır. Aşağıdaki resimlerde bu uygulamanın iki ana sayfası gösterilmektedir: görev oluşturma sayfası ve oluşturulan görevlerin listesini içeren ana sayfa.

Bu uygulamada eksik olan bazı özellikleri eklersiniz:

• E-posta ve şifreyle kullanıcı kimliklerini doğrulama
• Firestore koleksiyonuna bir dinleyici ekleme ve kullanıcı arayüzünün değişikliklere tepki vermesini sağlama
• Uygulamadaki belirli bir kodun performansını izlemek için özel izler ekleme
• Remote Config'i kullanarak bir özellik açma/kapatma düğmesi oluşturun ve bunu kullanıma sunmak için aşamalı kullanıma sunma özelliğini kullanın

Neler öğreneceksiniz?

• Modern bir Android uygulamasında Firebase Authentication, Performance Monitoring, Remote Config ve Cloud Firestore'u kullanma
• Firebase API'lerini MVVM mimarisine uygun hale getirme
• Firebase API'leriyle yapılan değişiklikleri bir Oluşturma kullanıcı arayüzüne yansıtma

Gerekenler

• Android Studio Flamingo+
• API 21 veya sonraki sürümlere sahip Android Emulator
• Kotlin programlama diline aşina olma

2. Örnek uygulamayı indirip Firebase'i ayarlama

Örnek uygulamanın kodunu alma

GitHub deposunu komut satırından klonlayın:

git clone https://github.com/FirebaseExtended/make-it-so-android.git

Not: main şubesi iki klasör içerir: start ve final. Bu codelab'deki adımları tamamlamak için start klasörünü kullanacaksınız. Tamamlanan uygulamayı çalıştırmak istiyorsanız bunun yerine final klasörünü kullanmanız gerekir.

Firebase projesi oluşturma

İlk olarak Firebase Konsolu'na gidip aşağıdaki gibi "+ Proje ekle" düğmesini tıklayarak bir Firebase projesi oluşturun:

Proje oluşturma işlemini tamamlamak için ekrandaki adımları uygulayın.

Not: Projeyi oluştururken Google Analytics'i etkinleştirdiğinizden emin olun. Google Analytics'i etkinleştirmek, daha kapsamlı Firebase Remote Config hedefleme seçenekleri sunar.

Firebase projenize Android uygulaması ekleme

Firebase projenize Android, iOS, Web, Flutter ve Unity için farklı uygulamalar kaydedebilirsiniz.

Burada gördüğünüz gibi Android seçeneğini belirleyin:

Ardından aşağıdaki adımları uygulayın:

1. Paket adı olarak com.example.makeitso ve isteğe bağlı olarak bir takma ad girin. Bu codelab için hata ayıklama imzalama sertifikası eklemeniz gerekmez.
2. Uygulamanızı kaydetmek ve Firebase yapılandırma dosyasına erişmek için Sonraki'yi tıklayın.
3. Yapılandırma dosyanızı indirip make-it-so-android/app dizinine kaydetmek için google-services.json dosyasını indir'i tıklayın.
4. İleri'yi tıklayın. Firebase SDK'ları örnek projedeki build.gradle dosyasına zaten dahil edildiğinden Sonraki adımlar'a atlamak için İleri'yi tıklayın.
5. İşlemi tamamlamak için Konsol'a devam et'i tıklayın.

Make it So uygulamasının düzgün çalışması için koda geçmeden önce Console'da iki işlem yapmanız gerekir: Kimlik doğrulama sağlayıcılarını etkinleştirme ve Firestore veritabanını oluşturma.

Kimlik doğrulamayı ayarlama

Öncelikle, kullanıcıların uygulamaya giriş yapabilmesi için Kimlik Doğrulama'yı etkinleştirelim:

1. Derleme menüsünden Kimlik Doğrulama'yı seçin ve ardından Başlayın'ı tıklayın.
2. Oturum açma yöntemi kartında E-posta/Şifre'yi seçin ve etkinleştirin.
3. Ardından Yeni sağlayıcı ekle'yi tıklayın ve Anonymous'i seçip etkinleştirin.

Cloud Firestore'u ayarlama

Ardından Firestore'u ayarlayın. Oturum açmış bir kullanıcının görevlerini saklamak için Firestore'u kullanırsınız. Her kullanıcı, veritabanının bir koleksiyonunda kendi dokümanlarına sahip olur.

1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Firestore veritabanı'nı seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Veritabanı Kimliği'ni (default) olarak bırakın.
4. Veritabanı için bir konum seçip Sonraki'yi tıklayın.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu bölümün sonraki adımlarında, verilerinizi güvence altına almak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza Güvenlik Kuralları eklemeden bir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
6. Oluştur'u tıklayın.

Firestore veritabanı için güçlü güvenlik kuralları oluşturalım.

1. Firestore kontrol panelini açıp Kurallar sekmesine gidin.
2. Güvenlik kurallarını aşağıdaki gibi güncelleyin:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

Bu kurallar temel olarak, uygulamada oturum açmış olan tüm kullanıcıların herhangi bir koleksiyonda kendileri için bir doküman oluşturabileceğini belirtir. Ardından, oluşturulan dokümanı yalnızca dokümanı oluşturan kullanıcı görüntüleyebilir, güncelleyebilir veya silebilir.

Uygulamayı çalıştırma

Artık uygulamayı çalıştırmaya hazırsınız. Android Studio'da make-it-so-android/start klasörünü açın ve uygulamayı çalıştırın (Android Emulator veya gerçek bir Android cihaz kullanılabilir).

Not: Uygulama geliştirme veya Firebase'i deneme sırasında genellikle Firebase Yerel Emülatör Paketi'ni kullanmanızı önemle tavsiye ederiz. Ancak bu kod laboratuvarında, henüz emülatörler tarafından desteklenmeyen Firebase Performans İzleme ve Firebase Remote Config kullanılmaktadır. Bu nedenle, bu uygulamayı yukarıda oluşturduğunuz Firebase projesinde çalıştırmanız gerekir.

3. Firebase Authentication

Hangi özelliği ekliyorsunuz?

Make It So örnek uygulamasının mevcut durumunda, kullanıcılar önce oturum açmak zorunda kalmadan uygulamayı kullanmaya başlayabilir. Bunu yapmak için anonim kimlik doğrulamayı kullanır. Ancak anonim hesaplar, kullanıcının diğer cihazlardaki veya gelecekteki oturumlardaki verilerine erişmesine izin vermez. Anonim kimlik doğrulama, sıcak bir ilk katılım için yararlı olsa da kullanıcılara her zaman farklı bir oturum açma şekline geçme seçeneği sunmalısınız. Bu nedenle, bu codelab'de Make It So uygulamasına e-posta ve şifre kimlik doğrulaması ekleyeceksiniz.

Kodlama zamanı!

Kullanıcı bir e-posta ve şifre yazarak hesap oluşturduğunda Firebase Authentication API'den e-posta kimlik bilgisi istemeniz ve ardından yeni kimlik bilgisini anonim hesaba bağlamanız gerekir. Android Studio'da AccountServiceImpl.kt dosyasını açın ve linkAccount işlevini aşağıdaki gibi güncelleyin:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

Şimdi SignUpViewModel.kt dosyasını açın ve onSignUpClick işlevinin launchCatching bloğunda linkAccount hizmet işlevini çağırın:

screens/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

Önce kimlik doğrulamaya çalışır ve çağrı başarılı olursa bir sonraki ekrana (SettingsScreen) geçer. Bu çağrıları bir launchCatching bloğunun içinde yürüttüğünüz için ilk satırda bir hata meydana gelirse istisna yakalanır ve ele alınır ve ikinci satıra hiç ulaşılmaz.

SettingsScreen yeniden açıldığında, kullanıcının kimliği doğrulandığı için Oturum aç ve Hesap oluştur seçeneklerinin kaldırıldığından emin olmanız gerekir. Bunu yapmak için SettingsViewModel'ün, hesabın anonim olup olmadığını kontrol etmek üzere mevcut kullanıcının durumunu (AccountService.kt'te kullanılabilir) dinlemesini sağlayalım. Bunun için SettingsViewModel.kt içindeki uiState öğesini aşağıdaki gibi güncelleyin:

screens/settings/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

Son olarak, SettingsViewModel tarafından yayınlanan durumları toplamak için SettingsScreen.kt içindeki uiState öğesini güncellemeniz gerekir:

screens/settings/SettingsScreen.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

Artık kullanıcı her değiştiğinde SettingsScreen, seçenekleri kullanıcının yeni kimlik doğrulama durumuna göre gösterecek şekilde kendini yeniden oluşturur.

Test zamanı!

Make it So'yu çalıştırın ve ekranın sağ üst köşesindeki dişli simgesini tıklayarak ayarlara gidin. Buradan hesap oluşturma seçeneğini tıklayın:

Hesabınızı oluşturmak için geçerli bir e-posta adresi ve güçlü bir şifre yazın. Bu işlem işe yarayacaktır ve ayarlar sayfasına yönlendirilirsiniz. Burada oturumunuzu kapatma ve hesabınızı silme olmak üzere iki yeni seçenek görürsünüz. Kullanıcılar sekmesini tıklayarak Firebase konsolundaki Kimlik Doğrulama kontrol panelinde oluşturulan yeni hesabı kontrol edebilirsiniz.

4. Cloud Firestore

Hangi özelliği ekliyorsunuz?

Cloud Firestore için, Make it So'da gösterilen görevleri temsil eden belgeleri depolayan Firestore koleksiyonuna bir dinleyici eklersiniz. Bu dinleyiciyi ekledikten sonra, bu koleksiyonda yapılan her güncellemeyi alırsınız.

Kodlama zamanı!

StorageServiceImpl.kt'te Flow mevcuttur ifadesini şu şekilde güncelleyin:

model/service/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

Bu kod, user.id değerine göre görevler koleksiyonuna bir dinleyici ekler. Her görev, tasks adlı bir koleksiyondaki bir doküman ile temsil edilir ve her birinin userId adlı bir alanı vardır. currentUser durumunun değişmesi (ör. oturum kapatılması) durumunda yeni bir Flow yayınlanacağını lütfen unutmayın.

Şimdi TasksViewModel.kt içindeki Flow değerini hizmettekiyle aynı şekilde yansıtmanız gerekir:

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

Son olarak, kullanıcı arayüzünü temsil eden TasksScreens.kt içindeki composable function'ün bu akıştan haberdar olmasını ve durumu bir durum olarak toplamasını sağlayın. Durum her değiştiğinde, derlenebilir işlev otomatik olarak kendini yeniden oluşturur ve kullanıcıya en son durumu gösterir. Aşağıdakileri TasksScreen composable function alanına ekleyin:

screens/tasks/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

Kompozit işlev bu durumlara eriştikten sonra LazyColumn'ü (ekranda liste görüntülemek için kullandığınız yapı) şu şekilde güncelleyebilirsiniz:

screens/tasks/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

Test zamanı!

İşlemin işe yarayıp yaramadığını test etmek için uygulamayı kullanarak yeni bir görev ekleyin (ekranın sağ alt köşesindeki ekle düğmesini tıklayarak). Görevi oluşturmayı tamamladığınızda görev, Firestore Console'daki Firestore koleksiyonunda görünür. Aynı hesapla diğer cihazlarda Make it So'ya giriş yaparsanız yapılacaklar listenizi düzenleyebilir ve tüm cihazlarda anlık olarak güncellenmesini izleyebilirsiniz.

5. Performance Monitoring

Hangi özelliği ekliyorsunuz?

Performans, dikkat edilmesi gereken çok önemli bir konudur. Çünkü performans iyi değilse ve kullanıcıların basit bir görevi uygulamanızı kullanarak tamamlaması çok uzun sürüyorsa uygulamanızı kullanmayı bırakma olasılıkları çok yüksektir. Bu nedenle, bazen kullanıcının uygulamanızda gerçekleştirdiği belirli bir yolculukla ilgili bazı metrikleri toplamak yararlı olabilir. Firebase Performance Monitoring, bu konuda size yardımcı olmak için özel izler sunar. Özel izlemeler eklemek ve Make it So'da farklı kod parçalarındaki performansı ölçmek için aşağıdaki adımları uygulayın.

Kodlama zamanı!

Performance.kt dosyasını açarsanız trace adlı bir satır içi işlev görürsünüz. Bu işlev, özel bir izleme oluşturmak için Performance Monitoring API'yi çağırır ve izleme adını parametre olarak iletir. Gördüğünüz diğer parametre, izlemek istediğiniz kod bloğudur. Her izleme için toplanan varsayılan metrik, izlemenin tamamen tamamlanması için geçen süredir:

model/service/Performance.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

Kod tabanının hangi bölümlerinin ölçülmesinin önemli olduğunu düşündüğünüzü seçebilir ve bu bölümlere özel izler ekleyebilirsiniz. Aşağıda, bu kod laboratuvarının önceki bölümünde (AccountServiceImpl.kt içinde) gördüğünüz linkAccount işlevine özel bir izleme ekleme örneği verilmiştir:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

Şimdi sıra sizde! Make it So uygulamasına bazı özel izler ekleyin ve beklenen şekilde çalışıp çalışmadığını test etmek için bir sonraki bölüme geçin.

Test zamanı!

Özel izlemeleri eklemeyi tamamladıktan sonra uygulamayı çalıştırın ve ölçmek istediğiniz özellikleri birkaç kez kullandığınızdan emin olun. Ardından Firebase konsoluna gidip Performans gösterge tablosuna gidin. Ekranın alt kısmında üç sekme bulunur: Ağ istekleri, Özel izlemeler ve Ekran oluşturma.

Özel izler sekmesine gidin ve kod tabanına eklediğiniz izlerin burada gösterilip gösterilmediğini ve bu kod parçalarının genellikle ne kadar sürede çalıştığını görebildiğinizi kontrol edin.

6. Remote Config

Hangi özelliği ekliyorsunuz?

Remote Config'in, uygulamanızın görünümünü uzaktan değiştirmekten farklı kullanıcı segmentleri için farklı davranışlar yapılandırmaya kadar birçok kullanım alanı vardır. Bu kod laboratuvarında, Make it So uygulamasında yeni görevi düzenle özelliğini gösterecek veya gizleyecek bir özellik açma/kapatma düğmesi oluşturmak için Remote Config'i kullanacaksınız.

Kodlama zamanı!

İlk olarak Firebase konsolunda yapılandırmayı oluşturmanız gerekir. Bunu yapmak için Remote Config kontrol paneline gidip Parametre ekle düğmesini tıklamanız gerekir. Alanları aşağıdaki resme göre doldurun:

Tüm alanlar doldurulduktan sonra Kaydet düğmesini ve ardından Yayınla'yı tıklayabilirsiniz. Parametre oluşturulup kod tabanınızda kullanılabilir hale geldiğine göre, yeni değerleri getirecek kodu uygulamanıza eklemeniz gerekir. ConfigurationServiceImpl.kt dosyasını açıp bu iki işlevin uygulanmasını güncelleyin:

model/service/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

İlk işlev, değerleri sunucudan alır ve uygulama SplashViewModel.kt içinde başlar başlamaz çağrılır. En güncel değerlerin en başından itibaren tüm ekranlarda kullanılabilmesini sağlamanın en iyi yolu budur. Kullanıcı bir işlem yaparken uygulamanın kullanıcı arayüzünü veya davranışını değiştirmek iyi bir kullanıcı deneyimi değildir.

İkinci işlev, Konsolda yeni oluşturduğunuz parametre için yayınlanan doğru/yanlış değerini döndürür. Ayrıca, loadTaskOptions işlevine aşağıdakileri ekleyerek bu bilgileri TasksViewModel.kt içinde almanız gerekir:

screens/tasks/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

İlk satırdaki değeri alır ve ikinci satırdaki görev öğelerinin menü seçeneklerini yüklemek için kullanırsınız. Değer false ise menüde düzenleme seçeneği bulunmaz. Seçeneklerin listesine sahip olduğunuza göre kullanıcı arayüzünün bu listeyi doğru şekilde göstermesini sağlamanız gerekir. Jetpack Compose ile uygulama geliştirirken TasksScreen öğesinin kullanıcı arayüzünün nasıl görüneceğini belirten composable function öğesini aramanız gerekir. Bu nedenle, TasksScreen.kt dosyasını açıp LazyColum öğesini TasksViewModel.kt'de bulunan seçenekleri işaret edecek şekilde güncelleyin:

screens/tasks/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

TaskItem, tek bir görevin kullanıcı arayüzünün nasıl görünmesi gerektiğini belirten başka bir composable function öğesidir. Ayrıca her görevin sonunda, kullanıcı üç nokta simgesini tıkladığında gösterilen seçenekler menüsü bulunur.

Test zamanı!

Artık uygulamayı çalıştırmaya hazırsınız. Firebase konsolunu kullanarak yayınladığınız değerin uygulamanın davranışıyla eşleşip eşleşmediğini kontrol edin:

• false ise üç nokta simgesini tıkladığınızda yalnızca iki seçenek görürsünüz:
• true ise üç nokta simgesini tıkladığınızda üç seçenek görürsünüz:

Console'da değeri birkaç kez değiştirmeyi ve uygulamayı yeniden başlatmayı deneyin. Remote Config'i kullanarak uygulamanızda yeni özellikler yayınlamak bu kadar kolaydır.

7. Tebrikler

Tebrikler, Firebase ve Jetpack Compose ile başarıyla bir Android uygulaması oluşturdunuz.

Kullanıcı arayüzü için tamamen Jetpack Compose ile oluşturulmuş bir Android uygulamasına Firebase Authentication, Performance Monitoring, Remote Config ve Cloud Firestore'u eklediniz ve önerilen MVVM mimarisine uygun hale getirdiniz.

Daha fazla bilgi

• Firebase ve Compose ile Android uygulaması oluşturma
• Jetpack Compose uygulamasına Firebase Authentication ekleme
• Cloud Firestore'u Jetpack Compose uygulamasına ekleme
• Firebase ve Compose ile oluşturulan bir Android uygulamasına Coroutines ve Flow ekleme
• Jetpack Compose uygulamasına Firebase Performance Monitoring ekleme
• Jetpack Compose uygulamasına Firebase Remote Config ekleme

Referans dokümanları

• Firebase Authentication
• Cloud Firestore
• Performans İzleme
• Remote Config