Firebase Android Codelab - Dostça Sohbet Oluşturun

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Genel Bakış

ekran görüntüsü

Resim: Çalışma Dostu Sohbet uygulaması.

Dostça Sohbet kod laboratuvarına hoş geldiniz. Bu kod laboratuvarında, Android'de bir sohbet uygulaması oluşturmak için Firebase platformunu nasıl kullanacağınızı öğreneceksiniz.

ne öğreneceksin

  • Kullanıcıların oturum açmasına izin vermek için Firebase Kimlik Doğrulaması nasıl kullanılır?
  • Firebase Gerçek Zamanlı Veritabanı kullanılarak veriler nasıl eşitlenir?
  • Firebase için Cloud Storage'da ikili dosyalar nasıl saklanır?
  • Firebase ile bir Android uygulaması geliştirmek için Firebase Local Emulator Suite nasıl kullanılır?

Neye ihtiyacın olacak

  • Android Studio sürüm 4.2+.
  • Android 5.0+ ile bir Android Emülatörü .
  • Node.js sürüm 10 veya üstü (Emulator Suite'i kullanmak için).
  • Java 8 veya üstü. Java'yı kurmak için bu talimatları kullanın; sürümünüzü kontrol etmek için java -version çalıştırın.
  • Kotlin programlama diline aşinalık.

2. Örnek kodu alın

Depoyu klonla

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

$ git clone https://github.com/firebase/codelab-friendlychat-android

Android Studio'ya aktarın

Android Studio'da File > Open öğesini seçin, ardından build-android-start dizinini seçin ( android_studio_klasör ) örnek kodu indirdiğiniz dizinden.

Artık Android Studio'da build-android-start projesini açmış olmalısınız. Bir google-services.json dosyasının eksik olduğuna dair bir uyarı görürseniz endişelenmeyin. Daha sonraki bir adımda eklenecektir.

Bağımlılıkları kontrol edin

Bu kod laboratuvarında, ihtiyaç duyacağınız tüm bağımlılıklar sizin için zaten eklenmiştir, ancak Firebase SDK'sını uygulamanıza nasıl ekleyeceğinizi anlamak önemlidir:

build.gradle

buildscript {
    // ...

    dependencies {
        classpath 'com.android.tools.build:gradle:7.2.2'

        // The google-services plugin is required to parse the google-services.json file
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

uygulama/build.gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.gms.google-services'
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation 'com.google.android.gms:play-services-auth:20.2.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:30.3.2')
    implementation 'com.google.firebase:firebase-database-ktx'
    implementation 'com.google.firebase:firebase-storage-ktx'
    implementation 'com.google.firebase:firebase-auth-ktx'

    // Firebase UI Library
    implementation 'com.firebaseui:firebase-ui-auth:8.0.1'
    implementation 'com.firebaseui:firebase-ui-database:8.0.1'
}

3. Firebase CLI'yi kurun

Bu kod laboratuvarında Firebase Auth, Realtime Database ve Cloud Storage'ı yerel olarak taklit etmek için Firebase Emulator Suite'i kullanacaksınız. Bu, uygulamanızı oluşturmak için güvenli, hızlı ve ücretsiz bir yerel geliştirme ortamı sağlar.

Firebase CLI'yi kurun

Öncelikle Firebase CLI'yi kurmanız gerekecek. macOS veya Linux kullanıyorsanız, aşağıdaki cURL komutunu çalıştırabilirsiniz:

curl -sL https://firebase.tools | bash

Windows kullanıyorsanız, bağımsız bir ikili dosya edinmek veya npm yoluyla yüklemek için kurulum talimatlarını okuyun.

CLI'yi yükledikten sonra, firebase --version çalıştırıldığında 9.0.0 veya daha yüksek bir sürüm bildirilmelidir:

$ firebase --version
9.0.0

Giriş yapmak

CLI'yi Google hesabınıza bağlamak için firebase login çalıştırın. Bu, oturum açma işlemini tamamlamak için yeni bir tarayıcı penceresi açacaktır. Daha önce Firebase projenizi oluştururken kullandığınız hesabı seçtiğinizden emin olun.

4. Firebase Emulator Suite'e bağlanın

Emülatörleri başlat

Terminalinizde, yerel codelab-friendlychat-android dizininizin kökünden aşağıdaki komutu çalıştırın:

firebase emulators:start --project=demo-friendlychat-android

Bunun gibi bazı günlükler görmelisiniz. Bağlantı noktası değerleri, klonlanan örnek kodda yer alan firebase.json dosyasında tanımlandı.

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Firebase Emulator Suite kullanıcı arayüzünü görüntülemek için web tarayıcınızda http://localhost:4000 adresine gidin:

Emulator Suite UI ana sayfası

emulators:start komutunu kod laboratuvarının geri kalanı için çalışır durumda bırakın.

Uygulamanızı bağlayın

Android Studio'da MainActivity.kt dosyasını açın, ardından onCreate yönteminin içine aşağıdaki kodu ekleyin:

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. Başlangıç ​​uygulamasını çalıştırın

google-services.json'u ekleyin

Android uygulamanızın Firebase'e bağlanması için Android projenizin app klasörüne bir google-services.json dosyası eklemelisiniz. Bu kod laboratuvarının amaçları doğrultusunda, Firebase Emulator Suite'e bağlanmanıza izin verecek sahte bir JSON dosyası sağladık.

mock-google-services.json dosyasını build-android-start/app klasörüne google-services.json olarak kopyalayın:

cp mock-google-services.json build-android-start/app/google-services.json

Bu kod laboratuvarının son adımında, bu sahte JSON dosyasını kendi yapılandırmanızla değiştirebilmeniz için gerçek bir Firebase projesi ve Firebase Android Uygulaması oluşturmayı öğreneceksiniz.

Uygulamayı çalıştırın

Artık projeyi Android Studio'ya aktardığınıza ve bir Firebase yapılandırma JSON dosyası eklediğinize göre, uygulamayı ilk kez çalıştırmaya hazırsınız.

  1. Android Emülatörünüzü başlatın.
  2. Android Studio'da Çalıştır'a tıklayın ( uygulamak ) araç çubuğunda.

Uygulama, Android Emülatörünüzde başlamalıdır. Bu noktada boş bir mesaj listesi görmelisiniz ve mesaj gönderme ve alma çalışmaz. Bu kod laboratuvarının bir sonraki adımında, Dostça Sohbet'i kullanabilmeleri için kullanıcıların kimliklerini doğrulayacaksınız.

6. Kimlik Doğrulamayı Etkinleştirin

Bu uygulama, tüm sohbet mesajlarını depolamak için Firebase Gerçek Zamanlı Veritabanını kullanacak. Veri eklemeden önce, uygulamanın güvenli olduğundan ve yalnızca kimliği doğrulanmış kullanıcıların mesaj gönderebileceğinden emin olmalıyız. Bu adımda Firebase Authentication'ı etkinleştireceğiz ve Realtime Database Security Rules'u yapılandıracağız.

Temel oturum açma işlevi ekleyin

Ardından, kullanıcıları algılamak ve bir oturum açma ekranı uygulamak için uygulamaya bazı temel Firebase Kimlik Doğrulama kodu ekleyeceğiz.

Geçerli kullanıcıyı kontrol et

Önce aşağıdaki örnek değişkenini MainActivity.kt sınıfına ekleyin:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Şimdi MainActivity uygulamayı açtıklarında ve kimliği doğrulanmadığında kullanıcıyı oturum açma ekranına gönderecek şekilde değiştirelim. binding görünüme eklendikten sonra aşağıdakini onCreate() yöntemine ekleyin:

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

Ayrıca kullanıcının onStart() sırasında oturum açıp açmadığını da kontrol etmek istiyoruz:

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

Ardından, şu anda kimliği doğrulanmış Firebase kullanıcısı hakkında uygun bilgileri döndürmek için getUserPhotoUrl() ve getUserName() yöntemlerini uygulayın:

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

Ardından, oturumu kapat düğmesini işlemek için signOut() yöntemini uygulayın:

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

Artık gerektiğinde kullanıcıyı oturum açma ekranına göndermek için tüm mantığa sahibiz. Daha sonra, kullanıcıların kimliğini doğru bir şekilde doğrulamak için oturum açma ekranını uygulamamız gerekiyor.

Oturum Açma ekranını uygulayın

SignInActivity.kt dosyasını açın. Burada kimlik doğrulamayı başlatmak için basit bir Oturum Aç düğmesi kullanılır. Bu bölümde, oturum açma mantığını uygulamak için FirebaseUI'yi kullanacaksınız.

// Firebase instance variables yorumu altında SignInActivity sınıfına bir Auth örneği değişkeni ekleyin:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Ardından, Firebase'i MainActivity yaptığınız gibi başlatmak için onCreate() yöntemini düzenleyin:

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

ActivityResultLauncher alanını SignInActivity ekleyin:

SignInActivity.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

Ardından, FirebaseUI oturum açma akışını başlatmak için onStart() yöntemini düzenleyin:

SignInActivity.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

Ardından, oturum açma sonucunu işlemek için onSignInResult yöntemini uygulayın. Oturum açmanın sonucu başarılıysa MainActivity ile devam edin:

SignInActivity.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

Bu kadar! FirebaseUI ile yalnızca birkaç yöntem çağrısında ve herhangi bir sunucu tarafı yapılandırmasını yönetmenize gerek kalmadan kimlik doğrulaması gerçekleştirdiniz.

Çalışmanızı test edin

Uygulamayı Android Emülatörünüzde çalıştırın. Hemen oturum açma ekranına yönlendirilmelisiniz. E-posta ile giriş yap düğmesine dokunun, ardından bir hesap oluşturun. Her şey doğru bir şekilde uygulandıysa, mesajlaşma ekranına yönlendirilmelisiniz.

Oturum açtıktan sonra, tarayıcınızda Firebase Emulator Suite kullanıcı arayüzünü açın, ardından bu ilk oturum açan kullanıcı hesabını görmek için Kimlik Doğrulama sekmesini tıklayın.

7. Mesajları oku

Bu adımda, Realtime Database'de saklanan mesajları okumak ve görüntülemek için işlevsellik ekleyeceğiz.

Örnek mesajları içe aktar

  1. Firebase Emulator Suite kullanıcı arayüzünde, Gerçek Zamanlı Veritabanı sekmesini seçin.
  2. initial_messages.json dosyasını codelab deposunun yerel kopyasından veri görüntüleyiciye sürükleyip bırakın.

Artık veritabanının messages düğümü altında birkaç mesajınız olmalıdır.

Verileri oku

Mesajları senkronize et

Bu bölümde, yeni eklenen mesajları uygulama kullanıcı arayüzüne şu şekilde senkronize eden kod ekliyoruz:

  • Firebase Gerçek Zamanlı Veritabanını başlatma ve verilerde yapılan değişiklikleri işlemek için bir dinleyici ekleme.
  • Yeni mesajların gösterilmesi için RecyclerView bağdaştırıcısı güncelleniyor.
  • Veritabanı örnek değişkenlerini, MainActivity sınıfındaki diğer Firebase örnek değişkenlerinizle birlikte ekleme:

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

MainActivity'nizin onCreate() yöntemini yorum altında değiştirin // Initialize Realtime Database and FirebaseRecyclerAdapter . Bu kod, Realtime Database'deki mevcut tüm mesajları ekler ve ardından Firebase Realtime Database'inizdeki messages yolu altındaki yeni alt girişleri dinler. Her mesaj için kullanıcı arayüzüne yeni bir öğe ekler:

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

Daha sonra, FriendlyMessageAdapter.kt sınıfında, iç sınıf MessageViewHolder() içinde bind() yöntemini uygulayın:

FriendlyMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

Ayrıca görüntü olan mesajları da görüntülememiz gerekir, bu nedenle bind() yöntemini ImageMessageViewHolder() iç sınıfı içinde de uygulayın:

FriendlyMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

Son olarak, MainActivity geri dönün, Firebase Realtime Database'den güncellemeleri dinlemeye başlayın ve durdurun. MainActivity onPause() ve onResume() yöntemlerini aşağıda gösterildiği gibi güncelleyin:

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

Senkronizasyon mesajlarını test edin

  1. Çalıştır'a tıklayın ( uygulamak ).
  2. Emulator Suite kullanıcı arabiriminde, Gerçek Zamanlı Veritabanı sekmesine dönün, ardından manuel olarak yeni bir mesaj ekleyin. Mesajın Android uygulamanızda göründüğünü onaylayın:

Tebrikler, uygulamanıza gerçek zamanlı bir veritabanı eklediniz!

8. Mesaj Gönder

Metin mesajı göndermeyi uygula

Bu bölümde, uygulama kullanıcılarının kısa mesaj gönderme özelliğini ekleyeceksiniz. Aşağıdaki kod parçacığı, gönder düğmesindeki tıklama olaylarını dinler, mesaj alanının içeriğiyle yeni bir FriendlyMessage nesnesi oluşturur ve mesajı veritabanına gönderir. push() yöntemi, itilen nesnenin yoluna otomatik olarak oluşturulmuş bir kimlik ekler. Bu kimlikler sıralıdır, bu da yeni mesajların listenin sonuna eklenmesini sağlar.

Gönder düğmesinin tıklama dinleyicisini MainActivity sınıfındaki onCreate() yönteminde güncelleyin. Bu kod zaten onCreate() yönteminin altındadır. onClick() gövdesini aşağıdaki kodla eşleşecek şekilde güncelleyin:

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

Resimli mesaj göndermeyi uygula

Bu bölümde, uygulama kullanıcılarının resimli mesajlar gönderme özelliğini ekleyeceksiniz. Bir resim mesajı oluşturmak şu adımlarla yapılır:

  • Fotoğraf seç
  • Görüntü seçimini işle
  • Gerçek Zamanlı Veritabanına geçici görüntülü mesaj yaz
  • Seçilen resmi yüklemeye başla
  • Yükleme tamamlandıktan sonra, resim mesajı URL'sini yüklenen resmin URL'sine güncelleyin

Fotoğraf seç

Görüntü eklemek için bu codelab, Firebase için Cloud Storage'ı kullanır. Cloud Storage, uygulamanızın ikili verilerini depolamak için iyi bir yerdir.

Görüntü seçimini yapın ve geçici mesaj yazın

Kullanıcı bir resim seçtiğinde, resim seçimi Intent başlatılır. Bu zaten onCreate() yönteminin sonundaki kodda uygulanmıştır. Bittiğinde, MainActivity onImageSelected() yöntemini çağırır. Aşağıdaki kod parçacığını kullanarak, veritabanına resmin yüklendiğini belirten geçici bir resim url'si içeren bir mesaj yazacaksınız.

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

Resim yükleyin ve mesajı güncelleyin

putImageInStorage() yöntemini MainActivity ekleyin. Seçilen görüntünün karşıya yüklenmesini başlatmak için onImageSelected() içinde çağrılır. Yükleme tamamlandığında, uygun resmi kullanmak için mesajı güncelleyeceksiniz.

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

Mesaj göndermeyi test et

  1. Android Studio'da, uygulamak Çalıştır düğmesi.
  2. Android Emülatörünüzde bir mesaj girin, ardından gönder düğmesine dokunun. Yeni mesaj, uygulama kullanıcı arayüzünde ve Firebase Emulator Suite kullanıcı arayüzünde görünür olmalıdır.
  3. Android Emülatöründe, cihazınızdan bir resim seçmek için "+" resmine dokunun. Yeni mesaj, önce bir yer tutucu resimle, ardından resim yükleme tamamlandığında seçilen resimle görünür olmalıdır. Yeni mesaj ayrıca Emulator Suite kullanıcı arayüzünde, özellikle Gerçek Zamanlı Veritabanı sekmesinde bir nesne ve Depolama sekmesinde bir damla olarak görünmelidir.

9. Tebrikler!

Firebase'i kullanarak gerçek zamanlı bir sohbet uygulaması oluşturdunuz!

ne öğrendin

  • Firebase Kimlik Doğrulaması
  • Firebase Gerçek Zamanlı Veritabanı
  • Firebase için Bulut Depolama

Ardından, Firebase'i kendi Android uygulamanıza eklemek için bu kod laboratuvarında öğrendiklerinizi kullanmayı deneyin! Firebase hakkında daha fazla bilgi edinmek için firebase.google.com adresini ziyaret edin.

Gerçek bir Firebase projesi kurmayı ve gerçek Firebase kaynaklarını kullanmayı öğrenmek istiyorsanız (bir demo projesi ve yalnızca öykünülmüş kaynaklar yerine), bir sonraki adıma geçin.

Not: Gerçek bir Firebase projesi oluşturduktan sonra ve özellikle gerçek bir uygulama oluşturmaya başladığınızda bile, geliştirme ve test için Firebase Local Emulator Suite kullanmanızı öneririz.

10. İsteğe bağlı: Bir Firebase projesi oluşturun ve kurun

Bu adımda, bu codelab ile kullanmak için gerçek bir Firebase projesi ve bir Firebase Android Uygulaması oluşturacaksınız. Ayrıca, uygulamaya özel Firebase yapılandırmanızı da uygulamanıza ekleyeceksiniz. Son olarak, uygulamanızla kullanmak için gerçek Firebase kaynakları kuracaksınız.

Bir Firebase projesi oluşturun

  1. Tarayıcınızda Firebase konsoluna gidin.
  2. Proje ekle'yi seçin.
  3. Bir proje adı seçin veya girin. İstediğiniz ismi kullanabilirsiniz.
  4. Bu codelab için Google Analytics'e ihtiyacınız yok, dolayısıyla projeniz için etkinleştirmeyi atlayabilirsiniz.
  5. Proje Oluştur'u tıklayın. Projeniz hazır olduğunda Devam'ı tıklayın.

Firebase'i Android projenize ekleyin

Bu adıma başlamadan önce uygulamanızın SHA1 karmasını alın. Hata ayıklama anahtarınızın SHA1'ini belirlemek için yerel build-android-start dizininizden aşağıdaki komutu çalıştırın:

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

Yukarıdaki gibi bir çıktı görmelisiniz. Önemli satır SHA1 hash'idir. SHA1 hash'inizi bulamıyorsanız, daha fazla bilgi için bu sayfaya bakın.

Firebase konsoluna geri dönün ve Android projenizi Firebase projenize kaydetmek için şu adımları izleyin:

  1. Yeni projenizin genel bakış ekranından, kurulum iş akışını başlatmak için Android simgesine tıklayın: android uygulaması ekle
  2. Bir sonraki ekranda, uygulamanızın paket adı olarak com.google.firebase.codelab.friendlychat yazın.
  3. Uygulamayı Kaydet 'i ve ardından Firebase yapılandırma dosyanızı indirmek için google-services.json'u indir'i tıklayın.
  4. google-services.json dosyasını Android projenizin app dizinine kopyalayın.
  5. Konsolun kurulum iş akışında gösterilen sonraki adımları atlayın (bunlar sizin için build-android-start projesinde zaten yapıldı).
  6. Projenizi Gradle dosyalarıyla senkronize ederek tüm bağımlılıkların uygulamanız için kullanılabilir olduğundan emin olun. Android Studio araç çubuğundan, Dosya > Projeyi Gradle Dosyalarıyla Senkronize Et öğesini seçin. Yapılandırma değişikliklerinin gerçekleşmesi için Proje Oluştur/Temizle ve Proje Oluştur/Yeniden Oluştur'u çalıştırmanız da gerekebilir.

Firebase Kimlik Doğrulamasını Yapılandır

Uygulamanızın kullanıcılarınız adına Firebase Authentication API'lerine erişebilmesi için önce Firebase Authentication'ı ve uygulamanızda kullanmak istediğiniz oturum açma sağlayıcılarını etkinleştirmeniz gerekir.

  1. Firebase konsolunda , sol taraftaki gezinme panelinden Kimlik Doğrulama'yı seçin.
  2. Oturum açma yöntemi sekmesini seçin.
  3. E-posta/Parola'yı tıklayın, ardından anahtarı etkin (mavi) konumuna getirin.
  4. Google'ı tıklayın, ardından anahtarı etkin (mavi) konumuna getirin ve bir proje destek e-postası ayarlayın.

Daha sonra bu kod laboratuvarında "CONFIGURATION_NOT_FOUND" mesajı içeren hatalar alırsanız, bu adıma geri dönün ve çalışmanızı iki kez kontrol edin.

Gerçek Zamanlı Veritabanını Yapılandırma

Bu kod laboratuvarındaki uygulama, sohbet mesajlarını Firebase Gerçek Zamanlı Veritabanında depolar. Bu bölümde, bir veritabanı oluşturacağız ve güvenliğini Firebase Güvenlik Kuralları adlı bir JSON yapılandırma dili aracılığıyla yapılandıracağız.

  1. Firebase konsolunda , sol taraftaki gezinme panelinden Gerçek Zamanlı Veritabanı'nı seçin.
  2. Yeni bir Gerçek Zamanlı Veritabanı örneği oluşturmak için Veritabanı Oluştur'a tıklayın. İstendiğinde, us-central1 bölgesini seçin ve ardından İleri'ye tıklayın.
  3. Güvenlik kuralları sorulduğunda, kilitli modu seçin ve ardından Etkinleştir'i tıklayın.
  4. Veritabanı örneği oluşturulduktan sonra, Kurallar sekmesini seçin, ardından kural yapılandırmasını aşağıdakilerle güncelleyin:
     {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }

Güvenlik Kurallarının nasıl çalıştığı hakkında daha fazla bilgi için ("auth" değişkeniyle ilgili belgeler dahil), Realtime Database güvenlik belgelerine bakın.

Firebase için Bulut Depolamayı Yapılandırma

  1. Firebase konsolunda , sol taraftaki gezinme panelinden Depolama'yı seçin.
  2. Projeniz için Bulut Depolamayı etkinleştirmek üzere Başlayın'a tıklayın.
  3. Önerilen varsayılanları kullanarak paketinizi ayarlamak için iletişim kutusundaki adımları izleyin.

Firebase kaynaklarına bağlanın

Bu codelab'in önceki bir adımında, MainActivity.kt aşağıdakileri eklediniz. Bu koşullu blok, Android projenizi Firebase Emulator Suite'e bağladı.

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

Uygulamanızı yeni gerçek Firebase projenize ve onun gerçek Firebase kaynaklarına bağlamak istiyorsanız, bu bloğu kaldırabilir veya uygulamanızı yayın modunda çalıştırabilirsiniz, böylece BuildConfig.DEBUG false olur.

 ,

1. Genel Bakış

ekran görüntüsü

Resim: Çalışma Dostu Sohbet uygulaması.

Dostça Sohbet kod laboratuvarına hoş geldiniz. Bu kod laboratuvarında, Android'de bir sohbet uygulaması oluşturmak için Firebase platformunu nasıl kullanacağınızı öğreneceksiniz.

ne öğreneceksin

  • Kullanıcıların oturum açmasına izin vermek için Firebase Kimlik Doğrulaması nasıl kullanılır?
  • Firebase Gerçek Zamanlı Veritabanı kullanılarak veriler nasıl eşitlenir?
  • Firebase için Cloud Storage'da ikili dosyalar nasıl saklanır?
  • Firebase ile bir Android uygulaması geliştirmek için Firebase Local Emulator Suite nasıl kullanılır?

Neye ihtiyacın olacak

  • Android Studio sürüm 4.2+.
  • Android 5.0+ ile bir Android Emülatörü .
  • Node.js sürüm 10 veya üstü (Emulator Suite'i kullanmak için).
  • Java 8 veya üstü. Java'yı kurmak için bu talimatları kullanın; sürümünüzü kontrol etmek için java -version çalıştırın.
  • Kotlin programlama diline aşinalık.

2. Örnek kodu alın

Depoyu klonla

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

$ git clone https://github.com/firebase/codelab-friendlychat-android

Android Studio'ya aktarın

Android Studio'da File > Open öğesini seçin, ardından build-android-start dizinini seçin ( android_studio_klasör ) örnek kodu indirdiğiniz dizinden.

Artık Android Studio'da build-android-start projesini açmış olmalısınız. Bir google-services.json dosyasının eksik olduğuna dair bir uyarı görürseniz endişelenmeyin. Daha sonraki bir adımda eklenecektir.

Bağımlılıkları kontrol edin

Bu kod laboratuvarında, ihtiyaç duyacağınız tüm bağımlılıklar sizin için zaten eklenmiştir, ancak Firebase SDK'sını uygulamanıza nasıl ekleyeceğinizi anlamak önemlidir:

build.gradle

buildscript {
    // ...

    dependencies {
        classpath 'com.android.tools.build:gradle:7.2.2'

        // The google-services plugin is required to parse the google-services.json file
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

uygulama/build.gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.gms.google-services'
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation 'com.google.android.gms:play-services-auth:20.2.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:30.3.2')
    implementation 'com.google.firebase:firebase-database-ktx'
    implementation 'com.google.firebase:firebase-storage-ktx'
    implementation 'com.google.firebase:firebase-auth-ktx'

    // Firebase UI Library
    implementation 'com.firebaseui:firebase-ui-auth:8.0.1'
    implementation 'com.firebaseui:firebase-ui-database:8.0.1'
}

3. Firebase CLI'yi kurun

Bu kod laboratuvarında Firebase Auth, Realtime Database ve Cloud Storage'ı yerel olarak taklit etmek için Firebase Emulator Suite'i kullanacaksınız. Bu, uygulamanızı oluşturmak için güvenli, hızlı ve ücretsiz bir yerel geliştirme ortamı sağlar.

Firebase CLI'yi kurun

Öncelikle Firebase CLI'yi kurmanız gerekecek. macOS veya Linux kullanıyorsanız, aşağıdaki cURL komutunu çalıştırabilirsiniz:

curl -sL https://firebase.tools | bash

Windows kullanıyorsanız, bağımsız bir ikili dosya edinmek veya npm yoluyla yüklemek için kurulum talimatlarını okuyun.

CLI'yi yükledikten sonra, firebase --version çalıştırıldığında 9.0.0 veya daha yüksek bir sürüm bildirilmelidir:

$ firebase --version
9.0.0

Giriş yapmak

CLI'yi Google hesabınıza bağlamak için firebase login çalıştırın. Bu, oturum açma işlemini tamamlamak için yeni bir tarayıcı penceresi açacaktır. Daha önce Firebase projenizi oluştururken kullandığınız hesabı seçtiğinizden emin olun.

4. Firebase Emulator Suite'e bağlanın

Emülatörleri başlat

Terminalinizde, yerel codelab-friendlychat-android dizininizin kökünden aşağıdaki komutu çalıştırın:

firebase emulators:start --project=demo-friendlychat-android

Bunun gibi bazı günlükler görmelisiniz. Bağlantı noktası değerleri, klonlanan örnek kodda yer alan firebase.json dosyasında tanımlandı.

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Firebase Emulator Suite kullanıcı arayüzünü görüntülemek için web tarayıcınızda http://localhost:4000 adresine gidin:

Emulator Suite UI ana sayfası

emulators:start komutunu kod laboratuvarının geri kalanı için çalışır durumda bırakın.

Uygulamanızı bağlayın

Android Studio'da MainActivity.kt dosyasını açın, ardından onCreate yönteminin içine aşağıdaki kodu ekleyin:

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. Başlangıç ​​uygulamasını çalıştırın

google-services.json'u ekleyin

Android uygulamanızın Firebase'e bağlanması için Android projenizin app klasörüne bir google-services.json dosyası eklemelisiniz. Bu kod laboratuvarının amaçları doğrultusunda, Firebase Emulator Suite'e bağlanmanıza izin verecek sahte bir JSON dosyası sağladık.

mock-google-services.json dosyasını build-android-start/app klasörüne google-services.json olarak kopyalayın:

cp mock-google-services.json build-android-start/app/google-services.json

Bu kod laboratuvarının son adımında, bu sahte JSON dosyasını kendi yapılandırmanızla değiştirebilmeniz için gerçek bir Firebase projesi ve Firebase Android Uygulaması oluşturmayı öğreneceksiniz.

Uygulamayı çalıştırın

Artık projeyi Android Studio'ya aktardığınıza ve bir Firebase yapılandırma JSON dosyası eklediğinize göre, uygulamayı ilk kez çalıştırmaya hazırsınız.

  1. Android Emülatörünüzü başlatın.
  2. Android Studio'da Çalıştır'a tıklayın ( uygulamak ) araç çubuğunda.

Uygulama, Android Emülatörünüzde başlamalıdır. Bu noktada boş bir mesaj listesi görmelisiniz ve mesaj gönderme ve alma çalışmaz. Bu kod laboratuvarının bir sonraki adımında, Dostça Sohbet'i kullanabilmeleri için kullanıcıların kimliklerini doğrulayacaksınız.

6. Kimlik Doğrulamayı Etkinleştirin

Bu uygulama, tüm sohbet mesajlarını depolamak için Firebase Gerçek Zamanlı Veritabanını kullanacak. Veri eklemeden önce, uygulamanın güvenli olduğundan ve yalnızca kimliği doğrulanmış kullanıcıların mesaj gönderebileceğinden emin olmalıyız. Bu adımda Firebase Authentication'ı etkinleştireceğiz ve Realtime Database Security Rules'u yapılandıracağız.

Temel oturum açma işlevi ekleyin

Ardından, kullanıcıları algılamak ve bir oturum açma ekranı uygulamak için uygulamaya bazı temel Firebase Kimlik Doğrulama kodu ekleyeceğiz.

Geçerli kullanıcıyı kontrol et

Önce aşağıdaki örnek değişkenini MainActivity.kt sınıfına ekleyin:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Şimdi MainActivity uygulamayı açtıklarında ve kimliği doğrulanmadığında kullanıcıyı oturum açma ekranına gönderecek şekilde değiştirelim. binding görünüme eklendikten sonra aşağıdakini onCreate() yöntemine ekleyin:

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

Ayrıca kullanıcının onStart() sırasında oturum açıp açmadığını da kontrol etmek istiyoruz:

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

Ardından, şu anda kimliği doğrulanmış Firebase kullanıcısı hakkında uygun bilgileri döndürmek için getUserPhotoUrl() ve getUserName() yöntemlerini uygulayın:

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

Ardından, oturumu kapat düğmesini işlemek için signOut() yöntemini uygulayın:

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

Artık gerektiğinde kullanıcıyı oturum açma ekranına göndermek için tüm mantığa sahibiz. Daha sonra, kullanıcıların kimliğini doğru bir şekilde doğrulamak için oturum açma ekranını uygulamamız gerekiyor.

Oturum Açma ekranını uygulayın

SignInActivity.kt dosyasını açın. Burada kimlik doğrulamayı başlatmak için basit bir Oturum Aç düğmesi kullanılır. Bu bölümde, oturum açma mantığını uygulamak için FirebaseUI'yi kullanacaksınız.

// Firebase instance variables yorumu altında SignInActivity sınıfına bir Auth örneği değişkeni ekleyin:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Ardından, Firebase'i MainActivity yaptığınız gibi başlatmak için onCreate() yöntemini düzenleyin:

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

ActivityResultLauncher alanını SignInActivity ekleyin:

SignInActivity.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

Ardından, FirebaseUI oturum açma akışını başlatmak için onStart() yöntemini düzenleyin:

SignInActivity.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

Ardından, oturum açma sonucunu işlemek için onSignInResult yöntemini uygulayın. Oturum açmanın sonucu başarılıysa MainActivity ile devam edin:

SignInActivity.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

Bu kadar! FirebaseUI ile yalnızca birkaç yöntem çağrısında ve herhangi bir sunucu tarafı yapılandırmasını yönetmenize gerek kalmadan kimlik doğrulaması gerçekleştirdiniz.

Çalışmanızı test edin

Uygulamayı Android Emülatörünüzde çalıştırın. Hemen oturum açma ekranına yönlendirilmelisiniz. E-posta ile giriş yap düğmesine dokunun, ardından bir hesap oluşturun. Her şey doğru bir şekilde uygulandıysa, mesajlaşma ekranına yönlendirilmelisiniz.

Oturum açtıktan sonra, tarayıcınızda Firebase Emulator Suite kullanıcı arayüzünü açın, ardından bu ilk oturum açan kullanıcı hesabını görmek için Kimlik Doğrulama sekmesini tıklayın.

7. Mesajları oku

Bu adımda, Realtime Database'de saklanan mesajları okumak ve görüntülemek için işlevsellik ekleyeceğiz.

Örnek mesajları içe aktar

  1. Firebase Emulator Suite kullanıcı arayüzünde, Gerçek Zamanlı Veritabanı sekmesini seçin.
  2. initial_messages.json dosyasını codelab deposunun yerel kopyasından veri görüntüleyiciye sürükleyip bırakın.

Artık veritabanının messages düğümü altında birkaç mesajınız olmalıdır.

Verileri oku

Mesajları senkronize et

Bu bölümde, yeni eklenen mesajları uygulama kullanıcı arayüzüne şu şekilde senkronize eden kod ekliyoruz:

  • Firebase Gerçek Zamanlı Veritabanını başlatma ve verilerde yapılan değişiklikleri işlemek için bir dinleyici ekleme.
  • Yeni mesajların gösterilmesi için RecyclerView bağdaştırıcısı güncelleniyor.
  • Veritabanı örnek değişkenlerini, MainActivity sınıfındaki diğer Firebase örnek değişkenlerinizle birlikte ekleme:

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

MainActivity'nizin onCreate() yöntemini yorum altında değiştirin // Initialize Realtime Database and FirebaseRecyclerAdapter . Bu kod, Realtime Database'deki mevcut tüm mesajları ekler ve ardından Firebase Realtime Database'inizdeki messages yolu altındaki yeni alt girişleri dinler. Her mesaj için kullanıcı arayüzüne yeni bir öğe ekler:

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

Daha sonra, FriendlyMessageAdapter.kt sınıfında, iç sınıf MessageViewHolder() içinde bind() yöntemini uygulayın:

FriendlyMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

Ayrıca görüntü olan mesajları da görüntülememiz gerekir, bu nedenle bind() yöntemini ImageMessageViewHolder() iç sınıfı içinde de uygulayın:

FriendlyMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

Son olarak, MainActivity geri dönün, Firebase Realtime Database'den güncellemeleri dinlemeye başlayın ve durdurun. MainActivity onPause() ve onResume() yöntemlerini aşağıda gösterildiği gibi güncelleyin:

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

Senkronizasyon mesajlarını test edin

  1. Çalıştır'a tıklayın ( uygulamak ).
  2. Emulator Suite kullanıcı arabiriminde, Gerçek Zamanlı Veritabanı sekmesine dönün, ardından manuel olarak yeni bir mesaj ekleyin. Mesajın Android uygulamanızda göründüğünü onaylayın:

Tebrikler, uygulamanıza gerçek zamanlı bir veritabanı eklediniz!

8. Mesaj Gönder

Metin mesajı göndermeyi uygula

Bu bölümde, uygulama kullanıcılarının kısa mesaj gönderme özelliğini ekleyeceksiniz. Aşağıdaki kod parçacığı, gönder düğmesindeki tıklama olaylarını dinler, mesaj alanının içeriğiyle yeni bir FriendlyMessage nesnesi oluşturur ve mesajı veritabanına gönderir. push() yöntemi, itilen nesnenin yoluna otomatik olarak oluşturulmuş bir kimlik ekler. Bu kimlikler sıralıdır, bu da yeni mesajların listenin sonuna eklenmesini sağlar.

Gönder düğmesinin tıklama dinleyicisini MainActivity sınıfındaki onCreate() yönteminde güncelleyin. Bu kod zaten onCreate() yönteminin altındadır. onClick() gövdesini aşağıdaki kodla eşleşecek şekilde güncelleyin:

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

Resimli mesaj göndermeyi uygula

Bu bölümde, uygulama kullanıcılarının resimli mesajlar gönderme özelliğini ekleyeceksiniz. Bir resim mesajı oluşturmak şu adımlarla yapılır:

  • Fotoğraf seç
  • Görüntü seçimini işle
  • Gerçek Zamanlı Veritabanına geçici görüntülü mesaj yaz
  • Seçilen resmi yüklemeye başla
  • Yükleme tamamlandıktan sonra, resim mesajı URL'sini yüklenen resmin URL'sine güncelleyin

Fotoğraf seç

Görüntü eklemek için bu codelab, Firebase için Cloud Storage'ı kullanır. Cloud Storage, uygulamanızın ikili verilerini depolamak için iyi bir yerdir.

Görüntü seçimini yapın ve geçici mesaj yazın

Kullanıcı bir resim seçtiğinde, resim seçimi Intent başlatılır. Bu zaten onCreate() yönteminin sonundaki kodda uygulanmıştır. Bittiğinde, MainActivity onImageSelected() yöntemini çağırır. Aşağıdaki kod parçacığını kullanarak, veritabanına resmin yüklendiğini belirten geçici bir resim url'si içeren bir mesaj yazacaksınız.

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

Resim yükleyin ve mesajı güncelleyin

putImageInStorage() yöntemini MainActivity ekleyin. Seçilen görüntünün karşıya yüklenmesini başlatmak için onImageSelected() içinde çağrılır. Yükleme tamamlandığında, uygun resmi kullanmak için mesajı güncelleyeceksiniz.

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

Mesaj göndermeyi test et

  1. Android Studio'da, uygulamak Çalıştır düğmesi.
  2. Android Emülatörünüzde bir mesaj girin, ardından gönder düğmesine dokunun. Yeni mesaj, uygulama kullanıcı arayüzünde ve Firebase Emulator Suite kullanıcı arayüzünde görünür olmalıdır.
  3. Android Emülatöründe, cihazınızdan bir resim seçmek için "+" resmine dokunun. Yeni mesaj, önce bir yer tutucu resimle, ardından resim yükleme tamamlandığında seçilen resimle görünür olmalıdır. Yeni mesaj ayrıca Emulator Suite kullanıcı arayüzünde, özellikle Gerçek Zamanlı Veritabanı sekmesinde bir nesne ve Depolama sekmesinde bir damla olarak görünmelidir.

9. Tebrikler!

Firebase'i kullanarak gerçek zamanlı bir sohbet uygulaması oluşturdunuz!

ne öğrendin

  • Firebase Kimlik Doğrulaması
  • Firebase Gerçek Zamanlı Veritabanı
  • Firebase için Bulut Depolama

Ardından, Firebase'i kendi Android uygulamanıza eklemek için bu kod laboratuvarında öğrendiklerinizi kullanmayı deneyin! Firebase hakkında daha fazla bilgi edinmek için firebase.google.com adresini ziyaret edin.

Gerçek bir Firebase projesi kurmayı ve gerçek Firebase kaynaklarını kullanmayı öğrenmek istiyorsanız (bir demo projesi ve yalnızca öykünülmüş kaynaklar yerine), bir sonraki adıma geçin.

Not: Gerçek bir Firebase projesi oluşturduktan sonra ve özellikle gerçek bir uygulama oluşturmaya başladığınızda bile, geliştirme ve test için Firebase Local Emulator Suite kullanmanızı öneririz.

10. İsteğe bağlı: Bir Firebase projesi oluşturun ve kurun

Bu adımda, bu codelab ile kullanmak için gerçek bir Firebase projesi ve bir Firebase Android Uygulaması oluşturacaksınız. Ayrıca, uygulamaya özel Firebase yapılandırmanızı da uygulamanıza ekleyeceksiniz. Son olarak, uygulamanızla kullanmak için gerçek Firebase kaynakları kuracaksınız.

Bir Firebase projesi oluşturun

  1. Tarayıcınızda Firebase konsoluna gidin.
  2. Proje ekle'yi seçin.
  3. Bir proje adı seçin veya girin. İstediğiniz ismi kullanabilirsiniz.
  4. Bu codelab için Google Analytics'e ihtiyacınız yok, dolayısıyla projeniz için etkinleştirmeyi atlayabilirsiniz.
  5. Proje Oluştur'u tıklayın. Projeniz hazır olduğunda Devam'ı tıklayın.

Firebase'i Android projenize ekleyin

Bu adıma başlamadan önce uygulamanızın SHA1 karmasını alın. Hata ayıklama anahtarınızın SHA1'ini belirlemek için yerel build-android-start dizininizden aşağıdaki komutu çalıştırın:

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

Yukarıdaki gibi bir çıktı görmelisiniz. Önemli satır SHA1 hash'idir. SHA1 hash'inizi bulamıyorsanız, daha fazla bilgi için bu sayfaya bakın.

Firebase konsoluna geri dönün ve Android projenizi Firebase projenize kaydetmek için şu adımları izleyin:

  1. Yeni projenizin genel bakış ekranından, kurulum iş akışını başlatmak için Android simgesine tıklayın: android uygulaması ekle
  2. Bir sonraki ekranda, uygulamanızın paket adı olarak com.google.firebase.codelab.friendlychat yazın.
  3. Uygulamayı Kaydet 'i ve ardından Firebase yapılandırma dosyanızı indirmek için google-services.json'u indir'i tıklayın.
  4. google-services.json dosyasını Android projenizin app dizinine kopyalayın.
  5. Skip the next steps shown in the console's setup workflow (they've already been done for you in the build-android-start project).
  6. Make sure that all dependencies are available to your app by syncing your project with Gradle files. From the Android Studio toolbar, select File > Sync Project with Gradle Files . You may also need to run Build/Clean Project and Build/Rebuild Project for the config changes to take place.

Configure Firebase Authentication

Before your app can access the Firebase Authentication APIs on behalf of your users, you need to enable Firebase Authentication and the sign-in providers you want to use in your app.

  1. In the Firebase console , select Authentication from the left-side navigation panel.
  2. Select the Sign-in method tab.
  3. Click Email/Password , then toggle the switch to enabled (blue).
  4. Click Google , then toggle the switch to enabled (blue) and set a project support email.

If you get errors later in this codelab with the message "CONFIGURATION_NOT_FOUND", come back to this step and double check your work.

Configure Realtime Database

The app in this codelab stores chat messages in Firebase Realtime Database. In this section, we'll create a database and configure its security via a JSON configuration language called Firebase Security Rules.

  1. In the Firebase console , select Realtime Database from the left-side navigation panel.
  2. Click Create Database to create a new Realtime Database instance. When prompted, select the us-central1 region, then click Next .
  3. When prompted about security rules, choose locked mode , then click Enable .
  4. Once the database instance has been created, select the Rules tab, then update the rules configuration with the following:
     {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }

For more information on how Security Rules work (including documentation on the "auth" variable), see the Realtime Database security documentation .

Configure Cloud Storage for Firebase

  1. In the Firebase console , select Storage from the left-side navigation panel.
  2. Click Get Started to enable Cloud Storage for your project.
  3. Follow the steps in the dialog to set up your bucket, using the suggested defaults.

Connect to Firebase resources

In an earlier step of this codelab, you added the following to MainActivity.kt . This conditional block connected your Android project to the Firebase Emulator Suite.

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

If you want to connect your app to your new real Firebase project and its real Firebase resources, you can either remove this block or run your app in release mode so that BuildConfig.DEBUG is false .