Firebase ve Jetpack Compose ile bir Android uygulaması oluşturun

1. Giriş

Son Güncelleme: 2022-11-16

Firebase ve Jetpack Compose ile Android uygulaması oluşturma

Bu codelab'de Make It So adlı bir Android uygulaması geliştireceksiniz. 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; sezgiseldir ve .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 organize edildiğini ve birbirleriyle nasıl iletişim kurduğunu açıkça ortaya koyduğu için sistemin anlaşılmasını, geliştirilmesini ve bakımının kolay olmasını sağlar. Android dünyasında önerilen mimariye Model - View - ViewModel denir. 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. Ve ViewModel , bazen ViewModel'in Model katmanını çağırmasını gerektiren iş mantığının uygulandığı yerdir.

Kod tabanının anlaşılmasını ve sonraki adımların tamamlanmasını kolaylaştıracağından Model - Görünüm - ViewModel'in Jetpack Compose ile oluşturulmuş bir Android uygulamasına nasıl uygulandığını anlamak için bu makaleyi okumanızı önemle tavsiye ederiz.

Ne inşa edeceksin

Make It So, kullanıcının görevleri ekleyip düzenlemesine, bayraklar, ö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 resimler bu uygulamanın iki ana sayfasını göstermektedir: görev oluşturma sayfası ve oluşturulan görevlerin listesinin bulunduğu ana sayfa.

Öyle Yap Görev Ekle ekranıÖyle Yap Ana ekran

Bu uygulamada eksik olan bazı özellikleri ekleyeceksiniz:

  • Kullanıcıları e-posta ve şifreyle doğrulayın
  • Firestore koleksiyonuna bir dinleyici ekleyin ve kullanıcı arayüzünün değişikliklere tepki vermesini sağlayın
  • Uygulamadaki belirli bir kodun performansını izlemek için özel izler ekleyin
  • Remote Config'i kullanarak bir özellik geçişi oluşturun ve bunu başlatmak için aşamalı sunumu kullanın

Ne öğreneceksin

  • Modern bir Android uygulamasında Firebase Kimlik Doğrulaması, Performans İzleme, Remote Config ve Cloud Firestore nasıl kullanılır?
  • Firebase API'lerinin MVVM mimarisine sığması nasıl sağlanır?
  • Firebase API'leriyle yapılan değişiklikler Oluşturma kullanıcı arayüzüne nasıl yansıtılır?

İhtiyacınız olan şey

2. Örnek uygulamayı edinin ve Firebase'i kurun

Örnek uygulamanın kodunu alın

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

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

Firebase'i kurun

Yapmanız gereken ilk şey Firebase konsoluna gidip aşağıda görebileceğiniz gibi "+ Proje ekle" butonuna tıklayarak bir Firebase projesi oluşturmaktır:

Firebase konsolu

Proje oluşturmayı tamamlamak için ekrandaki adımları izleyin.

Her Firebase projesinde farklı uygulamalar oluşturabilirsiniz: Android, iOS, Web, Flutter ve Unity için. Burada gördüğünüz gibi Android seçeneğini seçin:

Firebase Projesine Genel Bakış

Daha sonra şu adımları izleyin:

  1. Paket adı olarak com.example.makeitso girin ve isteğe bağlı olarak bir takma ad girin. Bu codelab için hata ayıklama imzalama sertifikasını eklemenize gerek yoktur.
  2. Uygulamanızı kaydetmek ve Firebase yapılandırma dosyasına erişmek için İleri'ye tıklayın.
  3. Yapılandırma dosyanızı indirmek ve make-it-so-android/app dizinine kaydetmek için Google-services.json'u İndir'i tıklayın.
  4. Sonrakine tıkla . Firebase SDK'ları örnek projedeki build.gradle dosyasında zaten bulunduğundan Sonraki adımlara atlamak için İleri'yi tıklayın.
  5. Bitirmek için Konsola devam et'i tıklayın.

Make it So uygulamasının düzgün çalışmasını sağlamak için koda geçmeden önce Konsolda yapmanız gereken iki şey vardır: kimlik doğrulama sağlayıcılarını etkinleştirmek ve Firestore veritabanını oluşturmak. Öncelikle kullanıcıların uygulamaya giriş yapabilmesi için Kimlik Doğrulamayı etkinleştirelim:

  1. Oluştur menüsünden Kimlik Doğrulama'yı seçin ve ardından Başlayın'a tıklayın.
  2. Oturum açma yöntemi kartından E-posta/Şifre seçeneğini seçin ve etkinleştirin.
  3. Daha sonra, Yeni sağlayıcı ekle'ye tıklayın ve Anonim'i seçip etkinleştirin.

Daha sonra Firestore'u kurun. Oturum açmış bir kullanıcının görevlerini depolamak için Firestore'u kullanacaksınız. Her kullanıcı, veritabanı koleksiyonu içinde kendi belgesini alacaktır.

  1. Oluştur menüsünden Firestore'u seçin ve ardından Veritabanı oluştur'u tıklayın.
  2. Üretim modunda Başlat'ı etkin tutun ve İleri'ye tıklayın.
  3. İstendiğinde Cloud Firestore verilerinizin depolanacağı konumu seçin. Bir üretim uygulaması geliştirirken bunun kullanıcılarınızın çoğunluğuna yakın bir bölgede olmasını ve Functions gibi diğer Firebase hizmetleriyle ortak olmasını istersiniz. Bu codelab için varsayılan bölgeyi koruyabilir veya size en yakın bölgeyi seçebilirsiniz.
  4. Firestore veritabanınızı hazırlamak için Etkinleştir'e tıklayın.

Firestore veritabanına güçlü Güvenlik Kuralları oluşturmak için biraz zaman ayıralım. Firestore kontrol panelini açın ve Kurallar sekmesine gidin. Ardından Güvenlik Kurallarını şu şekilde görünecek şekilde 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çan herhangi bir kullanıcının herhangi bir koleksiyon içinde kendisi için bir belge oluşturabileceğini belirtir. Daha sonra, oluşturulduktan sonra yalnızca o belgeyi oluşturan kullanıcı bu belgeyi görüntüleyebilir, güncelleyebilir veya silebilir.

Uygulamayı çalıştırın

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 (bu, bir Android Emulator veya gerçek bir Android cihazı kullanılarak yapılabilir).

3. Firebase Kimlik Doğrulaması

Hangi özelliği ekleyeceksiniz?

Make It So örnek uygulamasının mevcut durumunda, kullanıcı önce oturum açmaya gerek kalmadan uygulamayı kullanmaya başlayabilir. Bunu başarmak için anonim kimlik doğrulamayı kullanır. Ancak anonim hesaplar, kullanıcının diğer cihazlarda ve hatta gelecek oturumlarda verilerine erişmesine izin vermez. Anonim kimlik doğrulama, sıcak bir katılım için yararlı olsa da, kullanıcılara her zaman farklı bir oturum açma biçimine geçme seçeneğini sunmalısınız. Bunu aklınızda tutarak, bu codelab'de Make It So uygulamasına e-posta ve şifre kimlik doğrulaması ekleyeceksiniz.

Kodlama zamanı!

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

model/hizmet/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ğu içindeki service linkAccount işlevini çağırın:

screens/sign_up/SignUpViewModel.kt

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

İlk önce kimlik doğrulamayı dener ve eğer çağrı başarılı olursa bir sonraki ekrana ( SettingsScreen ) geçer. Bu çağrıları launchCatching bloğu içinde yürüttüğünüz için, ilk satırda bir hata meydana gelirse, istisna yakalanıp işlenecek ve ikinci satıra hiçbir şekilde ulaşılamayacaktır.

SettingsScreen tekrar açılır açılmaz Oturum aç ve Hesap oluştur seçeneklerinin kaldırıldığından emin olmanız gerekir çünkü artık kullanıcının kimliği zaten doğrulanmıştır. Bunu yapmak için, hesabın anonim olup olmadığını kontrol etmek için SettingsViewModel mevcut kullanıcının durumunu ( AccountService.kt mevcuttur) dinlemesini sağlayalım. Bunu yapmak için SettingsViewModel.kt uiState aşağıdaki gibi görünecek şekilde güncelleyin:

ekranlar/ayarlar/SettingsViewModel.kt

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

Yapmanız gereken son şey, SettingsViewModel tarafından yayılan durumları toplamak için SettingsScreen.kt uiState güncellemektir:

ekranlar/ayarlar/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örüntüleyecek şekilde kendisini yeniden oluşturacaktır.

Test etme zamanı!

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

Öyle Yap ayarlar ekranıMake it So kayıt ekranı

Hesabınızı oluşturmak için geçerli bir e-posta ve güçlü bir şifre yazın. Çalışmalı ve iki yeni seçeneği göreceğiniz ayarlar sayfasına yönlendirilmelisiniz: Oturumu kapatmak ve hesabınızı silmek. Firebase konsolundaki Kimlik Doğrulama kontrol panelinde oluşturulan yeni hesabı Kullanıcılar sekmesine tıklayarak kontrol edebilirsiniz.

4. Bulut Firestore

Hangi özelliği ekleyeceksiniz?

Cloud Firestore için, Make it So'da görüntülenen görevleri temsil eden belgeleri saklayan Firestore koleksiyonuna bir dinleyici ekleyeceksiniz. Bu dinleyiciyi eklediğinizde bu koleksiyona yapılan her güncellemeyi alacaksınız.

Kodlama zamanı!

StorageServiceImpl.kt bulunan Flow şu şekilde görünecek şekilde güncelleyin:

model/hizmet/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 dayalı olarak görevler koleksiyonuna bir dinleyici ekliyor. Her görev, tasks adlı bir koleksiyondaki bir belgeyle temsil edilir ve her birinin userId adında bir alanı vardır. currentUser Kullanıcının durumu değişirse (örneğin oturumu kapatarak) yeni bir Flow yayınlanacağını lütfen unutmayın.

Artık TasksViewModel.kt Flow hizmettekiyle aynı olmasını sağlamanız gerekiyor:

ekranlar/görevler/TasksViewModel.kt

val tasks = storageService.tasks

Ve son olarak da UI'yi temsil eden TasksScreens.kt içerisindeki composable function bu akıştan haberdar olmasını ve bunu state olarak toplamasını sağlamak olacaktır. Durum her değiştiğinde, oluşturulabilir işlev otomatik olarak kendisini yeniden oluşturacak ve kullanıcıya en son durumu gösterecektir. Bunu TasksScreen composable function ekleyin:

ekranlar/görevler/GörevlerScreen.kt

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

Şekillendirilebilir işlev bu durumlara eriştiğinde, LazyColumn (ekranda bir liste görüntülemek için kullandığınız yapıdır) şu şekilde görünecek şekilde güncelleyebilirsiniz:

ekranlar/görevler/GörevlerScreen.kt

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

Test etme zamanı!

İşe yarayıp yaramadığını test etmek için uygulamayı kullanarak yeni bir görev ekleyin (ekranın sağ alt köşesindeki ekle düğmesine tıklayarak). Görevi oluşturmayı tamamladığınızda, görevin Firestore Konsolundaki Firestore koleksiyonunda görünmesi gerekir. Make it So'ya aynı hesapla diğer cihazlardan giriş yaparsanız, yapılacak işlerinizi düzenleyebilir ve bunların tüm cihazlarda gerçek zamanlı olarak güncellenmesini izleyebileceksiniz.

5. Performans İzleme

Hangi özelliği ekleyeceksiniz?

Performans dikkat edilmesi gereken çok önemli bir şeydir çünkü performansın iyi olmaması durumunda kullanıcıların uygulamanızı kullanmaktan vazgeçme olasılıkları çok yüksektir ve uygulamayı kullanarak basit bir görevi tamamlamak çok fazla zaman alır. Bu nedenle bazen kullanıcının uygulamanızda yaptığı belirli bir yolculuğa ilişkin bazı ölçümler toplamak yararlı olabilir. Firebase Performance Monitoring, size bu konuda yardımcı olmak için özel izlemeler sunar. Make it So'da özel izler eklemek ve farklı kod parçalarının performansını ölçmek için sonraki adımları izleyin.

Kodlama zamanı!

Performance.kt dosyasını açarsanız trace adı verilen bir satır içi işlev göreceksiniz. Bu işlev, izleme adını parametre olarak ileterek özel bir izleme oluşturmak için Performans İzleme API'sini çağırır. Gördüğünüz diğer parametre ise izlemek istediğiniz kod bloğudur. Her izleme için toplanan varsayılan ölçüm, tamamen çalıştırılması için gereken süredir:

model/hizmet/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 ona özel izler ekleyebilirsiniz. Aşağıda, bu codelab'de daha önce ( AccountServiceImpl.kt içinde) gördüğünüz linkAccount işlevine özel bir izleme ekleme örneği verilmiştir:

model/hizmet/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 senin sıran! Make it So uygulamasına bazı özel izler ekleyin ve beklendiği gibi çalışıp çalışmadığını test etmek için sonraki bölüme geçin.

Test etme zamanı!

Özel izleri 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 gidin ve Performans kontrol paneline gidin. Ekranın alt kısmında üç sekme bulacaksınız: Ağ istekleri , Özel izler ve Ekran oluşturma .

Özel izler sekmesine gidin ve kod tabanına eklediğiniz izlerin burada görüntülendiğini ve bu kod parçalarını yürütmenin genellikle ne kadar zaman aldığını görebildiğinizi kontrol edin.

6. Uzaktan Yapılandırma

Hangi özelliği ekleyeceksiniz?

Remote Config iç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 çok sayıda kullanım örneği vardır. Bu codelab'de, Make it So uygulamasındaki yeni düzenleme görevi özelliğini gösterecek veya gizleyecek bir özellik geçişi oluşturmak için Remote Config'i kullanacaksınız.

Kodlama zamanı!

Yapmanız gereken ilk şey Firebase konsolunda konfigürasyonu oluşturmaktır. Bunu yapmak için Remote Config kontrol paneline gitmeniz ve Parametre ekle düğmesine tıklamanız gerekir. Aşağıdaki resme göre alanları doldurun:

Uzaktan Yapılandırma Parametre Oluştur iletişim kutusu

Tüm alanlar doldurulduktan sonra Kaydet düğmesine ve ardından Yayınla seçeneğine tıklayabilirsiniz. Artık parametre oluşturulduğuna ve kod tabanınızda kullanılabilir olduğuna göre, yeni değerleri uygulamanıza getirecek kodu eklemeniz gerekir. ConfigurationServiceImpl.kt dosyasını açın ve şu iki işlevin uygulaması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 başlar başlamaz SplashViewModel.kt dosyasında çağrılır. En güncel değerlerin en başından itibaren tüm ekranlarda yer almasını sağlamanın en iyi yolu budur. Daha sonra kullanıcı bir şey yapmanın ortasındayken kullanıcı arayüzünü veya uygulamanın davranışını değiştirmeniz iyi bir kullanıcı deneyimi değildir!

İkinci işlev, Konsolda yeni oluşturduğunuz parametre için yayınlanan boole değerini döndürmektir. Ve aşağıdakileri loadTaskOptions işlevine ekleyerek TasksViewModel.kt dosyasındaki bu bilgiyi almanız gerekecektir:

ekranlar/görevler/TasksViewModel.kt

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

İlk satırdaki değeri alıyorsunuz ve bunu ikinci satırdaki görev öğelerine ilişkin menü seçeneklerini yüklemek için kullanıyorsunuz. Değer false ise bu, menünün düzenleme seçeneğini içermeyeceği anlamına gelir. Artık seçenekler listesine sahip olduğunuza göre, kullanıcı arayüzünün bunu doğru görüntülemesini sağlamanız gerekir. Jetpack Compose ile bir uygulama geliştirirken, TasksScreen kullanıcı arayüzünün nasıl görünmesi gerektiğini bildiren composable function aramanız gerekir. Bu nedenle, TasksScreen.kt dosyasını açın ve LazyColum TasksViewModel.kt bulunan seçeneklere işaret edecek şekilde güncelleyin:

ekranlar/görevler/GörevlerScreen.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 bildiren başka bir composable function . Ve her görevin, kullanıcı görevin sonundaki üç nokta simgesine tıkladığında görüntülenen seçeneklerin yer aldığı bir menüsü vardır.

Test etme 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 simgesine tıkladığınızda yalnızca iki seçeneği görmelisiniz;
  • true , üç nokta simgesine tıkladığınızda üç seçenek görmelisiniz;

Konsolda değeri birkaç kez değiştirmeyi ve uygulamayı yeniden başlatmayı deneyin. Remote Config'i kullanarak uygulamanızda yeni özellikleri başlatmak işte bu kadar kolay!

7. Tebrikler

Tebrikler, Firebase ve Jetpack Compose ile başarıyla bir Android uygulaması geliştirdiniz!

Kullanıcı arayüzü için tamamen Jetpack Compose ile oluşturulmuş bir Android uygulamasına Firebase Kimlik Doğrulaması, Performans İzleme, Remote Config ve Cloud Firestore'u eklediniz ve onu önerilen MVVM mimarisine sığdırdınız!

daha fazla okuma

Referans belgeleri