Firebase Android Codelab - בנה צ'אט ידידותי

1. סקירה כללית

צילום מסך

תמונה: אפליקציית Working Friendly Chat.

ברוכים הבאים למעבדת הקוד של Friendly Chat. במעבדת קוד זה תלמד כיצד להשתמש בפלטפורמת Firebase כדי ליצור אפליקציית צ'אט באנדרואיד.

מה תלמד

  • כיצד להשתמש באימות Firebase כדי לאפשר למשתמשים להיכנס.
  • כיצד לסנכרן נתונים באמצעות מסד הנתונים בזמן אמת של Firebase.
  • כיצד לאחסן קבצים בינאריים ב-Cloud Storage for Firebase.
  • כיצד להשתמש ב-Firebase Local Emulator Suite כדי לפתח אפליקציית אנדרואיד עם Firebase.

מה אתה צריך

  • גרסת Android Studio האחרונה.
  • אמולטור אנדרואיד עם אנדרואיד 5.0+.
  • Node.js גרסה 10 ומעלה (כדי להשתמש בחבילת האמולטור).
  • Java 8 ומעלה. כדי להתקין Java השתמש בהוראות אלה; כדי לבדוק את הגרסה שלך, הפעל java -version .
  • היכרות עם שפת התכנות קוטלין.

2. קבל את הקוד לדוגמה

שכפל את המאגר

שכבו את מאגר GitHub משורת הפקודה:

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

ייבא לאנדרואיד סטודיו

ב-Android Studio, בחר קובץ > פתח , ולאחר מכן בחר את ספריית build-android-start ( android_studio_folder ) מהספרייה שבה הורדת את הקוד לדוגמה.

כעת אמור להיות לך פרויקט build-android-start פתוח ב-Android Studio. אם אתה רואה אזהרה לגבי חסר קובץ google-services.json , אל תדאג. זה יתווסף בשלב מאוחר יותר.

בדוק תלות

במעבדת הקוד הזה כבר נוספו עבורך כל התלות שתצטרך, אבל חשוב להבין כיצד להוסיף את Firebase SDK לאפליקציה שלך:

build.gradle.kts

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

app/build.gradle.kts

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.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    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.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

3. התקן את Firebase CLI

במעבדת הקוד הזה תשתמש ב- Firebase Emulator Suite כדי לחקות מקומית את Firebase Auth, את מסד הנתונים בזמן אמת ואחסון בענן. זה מספק סביבת פיתוח מקומית בטוחה, מהירה וללא עלות לבניית האפליקציה שלך.

התקן את Firebase CLI

ראשית תצטרך להתקין את Firebase CLI . אם אתה משתמש ב-macOS או Linux, אתה יכול להפעיל את הפקודה cURL הבאה:

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

אם אתה משתמש ב-Windows, קרא את הוראות ההתקנה כדי לקבל קובץ בינארי עצמאי או כדי להתקין באמצעות npm .

לאחר שהתקנת את ה-CLI, הפעלת firebase --version אמורה לדווח על גרסה של 9.0.0 ומעלה:

$ firebase --version
9.0.0

התחברות

הפעל firebase login כדי לחבר את ה-CLI לחשבון Google שלך. פעולה זו תפתח חלון דפדפן חדש להשלמת תהליך הכניסה. הקפד לבחור באותו חשבון שבו השתמשת בעת יצירת פרויקט Firebase מוקדם יותר.

4. התחבר ל-Firebase Emulator Suite

הפעל את האמולטורים

בטרמינל שלך, הפעל את הפקודה הבאה מהשורש של ספריית codelab-friendlychat-android המקומית שלך:

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

אתה אמור לראות כמה יומנים כאלה. ערכי היציאה הוגדרו בקובץ firebase.json , שנכלל בקוד הדוגמה המשובט.

$ 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.

נווט אל http://localhost:4000 בדפדפן האינטרנט שלך כדי להציג את ממשק המשתמש של Firebase Emulator Suite:

Emulator Suite UI בית

השאר את emulators:start פועלת עבור שאר ה-codelab.

חבר את האפליקציה שלך

ב-Android Studio, פתח את MainActivity.kt , ואז הוסף את הקוד הבא בתוך שיטת onCreate :

// 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. הפעל את אפליקציית המתנע

הוסף את google-services.json

כדי שאפליקציית Android שלך תתחבר ל-Firebase, עליך להוסיף קובץ google-services.json בתוך תיקיית app של פרויקט Android שלך. למטרות מעבדת קוד זה, סיפקנו קובץ JSON מדומה שיאפשר לך להתחבר ל-Firebase Emulator Suite.

העתק את הקובץ mock-google-services.json לתיקיית build-android-start/app בתור google-services.json :

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

בשלב האחרון של מעבדת הקוד הזה, תלמד כיצד ליצור פרויקט Firebase אמיתי ואפליקציית Firebase Android כך שתוכל להחליף את קובץ ה-JSON המדומה הזה בתצורה משלך.

הפעל את האפליקציה

כעת, לאחר שייבאת את הפרויקט ל-Android Studio והוספת קובץ JSON לתצורת Firebase, אתה מוכן להפעיל את האפליקציה בפעם הראשונה.

  1. הפעל את אמולטור האנדרואיד שלך.
  2. ב-Android Studio, לחץ על הפעל ( לבצע ) בסרגל הכלים.

האפליקציה אמורה להפעיל באמולטור אנדרואיד שלך. בשלב זה, אתה אמור לראות רשימת הודעות ריקה, ושליחה וקבלה של הודעות לא יפעלו. בשלב הבא של מעבדת הקוד הזה, תאמת משתמשים כדי שיוכלו להשתמש ב-Friendly Chat.

6. הפעל אימות

אפליקציה זו תשתמש ב-Firebase Realtime Database כדי לאחסן את כל הודעות הצ'אט. עם זאת, לפני שנוסיף נתונים, עלינו לוודא שהאפליקציה מאובטחת ושרק משתמשים מאומתים יכולים לפרסם הודעות. בשלב זה, נפעיל את אימות Firebase ונקבע את כללי האבטחה של מסדי נתונים בזמן אמת.

הוסף פונקציונליות כניסה בסיסית

בשלב הבא נוסיף קוד אימות Firebase בסיסי לאפליקציה כדי לזהות משתמשים וליישם מסך כניסה.

בדוק את המשתמש הנוכחי

תחילה הוסף את משתנה המופע הבא למחלקה MainActivity.kt :

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

כעת הבה נשנה את MainActivity כדי לשלוח את המשתמש למסך הכניסה בכל פעם שהוא פותח את האפליקציה ואינו מאומת. הוסף את הדברים הבאים לשיטת onCreate() לאחר binding יצורף לתצוגה:

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
}

אנחנו גם רוצים לבדוק אם המשתמש מחובר במהלך onStart() :

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
    }
}

לאחר מכן יישם את השיטות getUserPhotoUrl() ו- getUserName() כדי להחזיר את המידע המתאים על משתמש Firebase המאומת כעת:

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
}

לאחר מכן יישם את שיטת signOut() כדי לטפל בלחצן היציאה:

MainActivity.kt

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

כעת יש לנו את כל ההיגיון כדי לשלוח את המשתמש למסך הכניסה בעת הצורך. בשלב הבא עלינו ליישם את מסך הכניסה כדי לאמת משתמשים כראוי.

יישם את מסך הכניסה

פתח את הקובץ SignInActivity.kt . כאן נעשה שימוש בלחצן כניסה פשוט להפעלת אימות. בסעיף זה, תשתמש ב-FirebaseUI כדי ליישם את ההיגיון לכניסה.

הוסף משתנה מופע Auth במחלקה SignInActivity תחת ההערה // Firebase instance variables :

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

לאחר מכן, ערוך את השיטה onCreate() כדי לאתחל את Firebase באותו אופן שעשית ב- MainActivity :

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

הוסף שדה ActivityResultLauncher ל- SignInActivity :

SignInActivity.kt

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

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

לאחר מכן, ערוך את שיטת onStart() כדי להפעיל את זרימת הכניסה של FirebaseUI:

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()
    }
}

לאחר מכן, יישם את שיטת onSignInResult כדי לטפל בתוצאת הכניסה. אם תוצאת הכניסה הצליחה, המשך אל MainActivity :

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)
        }
    }
}

זהו זה! הטמעת אימות עם FirebaseUI בכמה קריאות שיטה בלבד וללא צורך בניהול כל תצורה בצד השרת.

בדוק את העבודה שלך

הפעל את האפליקציה באמולטור אנדרואיד שלך. אתה אמור להישלח מיד למסך הכניסה. הקש על הלחצן היכנס באמצעות דוא"ל ולאחר מכן צור חשבון. אם הכל מיושם כהלכה, אתה אמור להישלח למסך ההודעות.

לאחר הכניסה, פתח את ממשק המשתמש של Firebase Emulator Suite בדפדפן שלך, ולאחר מכן לחץ על הכרטיסייה אימות כדי לראות את חשבון המשתמש המחובר הראשון הזה.

7. קרא הודעות

בשלב זה, נוסיף פונקציונליות לקריאה והצגה של הודעות המאוחסנות במסד נתונים בזמן אמת.

ייבא הודעות לדוגמה

  1. בממשק המשתמש של Firebase Emulator Suite, בחר בכרטיסייה מסד נתונים בזמן אמת .
  2. גרור ושחרר את הקובץ initial_messages.json מהעותק המקומי שלך של מאגר codelab לתוך מציג הנתונים.

כעת אמורות להיות לך כמה הודעות מתחת לצומת messages של מסד הנתונים.

קרא נתונים

סנכרן הודעות

בחלק זה אנו מוסיפים קוד המסנכרן הודעות חדשות שנוספו לממשק המשתמש של האפליקציה על ידי:

  • אתחול מסד הנתונים בזמן אמת של Firebase והוספת מאזין לטיפול בשינויים שנעשו בנתונים.
  • עדכון מתאם RecyclerView כך שהודעות חדשות יוצגו.
  • הוספת משתני המופע של Database עם משתני המופע האחרים של Firebase במחלקה MainActivity :

MainActivity.kt

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

שנה את השיטה onCreate() של MainActivity שלך תחת ההערה // Initialize Realtime Database and FirebaseRecyclerAdapter עם הקוד המוגדר להלן. קוד זה מוסיף את כל ההודעות הקיימות ממסד הנתונים בזמן אמת ולאחר מכן מאזין לערכים צאצאים חדשים מתחת לנתיב messages במסד הנתונים שלך בזמן אמת של Firebase. זה מוסיף אלמנט חדש לממשק המשתמש עבור כל הודעה:

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)
)

הבא במחלקה FriendlyMessageAdapter.kt יישם את שיטת bind() בתוך המחלקה הפנימית MessageViewHolder() :

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)
        }
    }
    ...
}

אנחנו צריכים גם להציג הודעות שהן תמונות, אז גם ליישם את שיטת bind() בתוך המחלקה הפנימית ImageMessageViewHolder() :

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)
        }
    }
}

לבסוף, בחזרה ב- MainActivity , התחל והפסק להאזין לעדכונים ממסד הנתונים של Firebase Realtime. עדכן את השיטות onPause() ו- onResume() ב- MainActivity כפי שמוצג להלן:

MainActivity.kt

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

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

בדוק סנכרון הודעות

  1. לחץ על הפעל ( לבצע ).
  2. ב-Emulator Suite UI, חזור לכרטיסייה Realtime Database , ולאחר מכן הוסף ידנית הודעה חדשה. אשר שההודעה מופיעה באפליקציית Android שלך:

מזל טוב, זה עתה הוספת מסד נתונים בזמן אמת לאפליקציה שלך!

8. שלח הודעות

יישום שליחת הודעות טקסט

בחלק זה, תוסיף את היכולת של משתמשי האפליקציה לשלוח הודעות טקסט. קטע הקוד למטה מאזין לאירועי לחיצה על כפתור השליחה, יוצר אובייקט FriendlyMessage חדש עם התוכן של שדה ההודעה ודוחף את ההודעה למסד הנתונים. שיטת push() מוסיפה מזהה שנוצר אוטומטית לנתיב האובייקט הנדחף. המזהים האלה הם עוקבים מה שמבטיח שההודעות החדשות יתווספו לסוף הרשימה.

עדכן את מאזין הקליק של כפתור השליחה בשיטת onCreate() במחלקה MainActivity . קוד זה נמצא כבר בתחתית המתודה onCreate() . עדכן את גוף onClick() כך שיתאים לקוד שלהלן:

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("")
}

יישום שליחת הודעת תמונה

בחלק זה, תוסיף את היכולת של משתמשי אפליקציה לשלוח הודעות תמונה. יצירת הודעת תמונה מתבצעת עם השלבים הבאים:

  • בחר תמונה
  • טפל בבחירת תמונה
  • כתוב הודעת תמונה זמנית למסד הנתונים בזמן אמת
  • התחל להעלות תמונה שנבחרה
  • עדכן את כתובת האתר של הודעת התמונה לזו של התמונה שהועלתה, לאחר השלמת ההעלאה

בחר תמונה

כדי להוסיף תמונות מעבד קוד זה משתמש ב-Cloud Storage for Firebase. אחסון בענן הוא מקום טוב לאחסון הנתונים הבינאריים של האפליקציה שלך.

טפל בבחירת תמונה וכתוב הודעה זמנית

לאחר שהמשתמש בחר תמונה, הבחירה של התמונה Intent מופעלת. זה כבר מיושם בקוד בסוף השיטה onCreate() . בסיום זה קורא לשיטת onImageSelected() של MainActivity . באמצעות קטע הקוד למטה, תכתוב הודעה עם כתובת אתר של תמונה זמנית למסד הנתונים המציינת שהתמונה מועלית.

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)
                    })
}

העלה תמונה ועדכן הודעה

הוסף את השיטה putImageInStorage() ל- MainActivity . זה נקרא ב- onImageSelected() כדי להתחיל את העלאת התמונה שנבחרה. לאחר השלמת ההעלאה תעדכן את ההודעה כדי להשתמש בתמונה המתאימה.

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
            )
        }
}

בדיקת שליחת הודעות

  1. ב-Android Studio, לחץ על לבצע כפתור הפעלה .
  2. באמולטור אנדרואיד, הזן הודעה ולאחר מכן הקש על כפתור השליחה. ההודעה החדשה צריכה להיות גלויה בממשק המשתמש של האפליקציה ובממשק המשתמש של Firebase Emulator Suite.
  3. באמולטור אנדרואיד, הקש על תמונת "+" כדי לבחור תמונה מהמכשיר שלך. ההודעה החדשה צריכה להיות גלויה תחילה עם תמונת מציין מיקום, ולאחר מכן עם התמונה שנבחרה לאחר השלמת העלאת התמונה. ההודעה החדשה צריכה להיות גלויה גם ב-Emulator Suite UI, במיוחד כאובייקט בכרטיסייה Realtime Database וכבלוב בכרטיסייה Storage.

9. מזל טוב!

זה עתה בנית אפליקציית צ'אט בזמן אמת באמצעות Firebase!

מה שלמדת

  • אימות Firebase
  • מסד נתונים בזמן אמת של Firebase
  • אחסון בענן עבור Firebase

לאחר מכן, נסה להשתמש במה שלמדת במעבדת הקוד הזה כדי להוסיף את Firebase לאפליקציית Android משלך! למידע נוסף על Firebase, בקר בכתובת firebase.google.com .

אם אתה רוצה ללמוד כיצד להגדיר פרויקט Firebase אמיתי ולהשתמש במשאבי Firebase אמיתיים (במקום פרויקט הדגמה ורק משאבים מדומים), המשך לשלב הבא.

הערה: גם לאחר הקמת פרויקט Firebase אמיתי ובמיוחד כאשר אתה מתחיל לבנות אפליקציה אמיתית, אנו ממליצים להשתמש בחבילת Firebase Local Emulator Suite לפיתוח ובדיקה.

10. אופציונלי: צור והגדר פרוייקט Firebase

בשלב זה, תיצור פרויקט Firebase אמיתי ואפליקציית Firebase ל-Android לשימוש עם מעבדת קוד זה. אתה גם תוסיף את תצורת Firebase הספציפית לאפליקציה שלך לאפליקציה שלך. ולבסוף, תגדיר משאבי Firebase אמיתיים לשימוש עם האפליקציה שלך.

צור פרויקט Firebase

  1. בדפדפן שלך, עבור אל מסוף Firebase .
  2. בחר הוסף פרויקט .
  3. בחר או הזן שם פרויקט. אתה יכול להשתמש בכל שם שאתה רוצה.
  4. אינך זקוק ל-Google Analytics עבור מעבדת הקוד הזה, אז אתה יכול לדלג על הפעלתו עבור הפרויקט שלך.
  5. לחץ על צור פרויקט . כשהפרויקט שלך מוכן, לחץ על המשך .

הוסף את Firebase לפרויקט Android שלך

לפני שתתחיל בשלב זה, קבל את ה-hash SHA1 של האפליקציה שלך. הפעל את הפקודה הבאה מספריית build-android-start המקומית שלך כדי לקבוע את ה-SHA1 של מפתח ניפוי הבאגים שלך:

./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

אתה אמור לראות פלט כמו האמור לעיל. השורה החשובה היא ה-hash SHA1 . אם אינך מצליח למצוא את ה-Hash שלך SHA1, עיין בדף זה למידע נוסף.

חזור למסוף Firebase ובצע את השלבים הבאים כדי לרשום את פרויקט ה-Android שלך בפרויקט Firebase שלך:

  1. ממסך הסקירה הכללית של הפרויקט החדש שלך, לחץ על סמל אנדרואיד כדי להפעיל את זרימת העבודה של ההגדרה: הוסף אפליקציית אנדרואיד
  2. במסך הבא, הזן com.google.firebase.codelab.friendlychat כשם החבילה עבור האפליקציה שלך.
  3. לחץ על הרשום אפליקציה ולאחר מכן לחץ על הורד את google-services.json כדי להוריד את קובץ התצורה של Firebase.
  4. העתק את הקובץ google-services.json לספריית app של פרויקט האנדרואיד שלך.
  5. דלג על השלבים הבאים המוצגים בזרימת העבודה של ההתקנה של הקונסולה (הם כבר בוצעו עבורך בפרויקט build-android-start ).
  6. ודא שכל התלות זמינה לאפליקציה שלך על ידי סנכרון הפרויקט שלך עם קבצי Gradle. מסרגל הכלים של Android Studio, בחר קובץ > סנכרון פרויקט עם קבצי Gradle . ייתכן שתצטרך גם להפעיל את Build/Clean Project ואת Build/Rebuild Project כדי ששינויי התצורה יתבצעו.

הגדר את אימות Firebase

לפני שהאפליקציה שלך תוכל לגשת לממשקי ה-API של Firebase Authentication בשם המשתמשים שלך, עליך להפעיל את Firebase Authentication ואת ספקי הכניסה שבהם ברצונך להשתמש באפליקציה שלך.

  1. במסוף Firebase , בחר אימות בחלונית הניווט בצד שמאל.
  2. בחר בכרטיסייה שיטת כניסה .
  3. לחץ על דוא"ל/סיסמה ולאחר מכן סובב את המתג למצב מופעל (כחול).
  4. לחץ על Google ולאחר מכן העבר את המתג למצב מופעל (כחול) והגדר דוא"ל לתמיכה בפרויקט.

אם אתה מקבל שגיאות מאוחר יותר במעבדת הקוד הזה עם ההודעה "CONFIGURATION_NOT_FOUND", חזור לשלב זה ובדוק שוב את עבודתך.

הגדר מסד נתונים בזמן אמת

האפליקציה במעבדת קוד זה מאחסנת הודעות צ'אט במסד הנתונים של Firebase Realtime. בסעיף זה, ניצור מסד נתונים ונקבע את האבטחה שלו באמצעות שפת תצורה של JSON הנקראת Firebase Security Rules.

  1. במסוף Firebase , בחר מסד נתונים בזמן אמת בחלונית הניווט בצד שמאל.
  2. לחץ על צור מסד נתונים כדי ליצור מופע חדש של מסד נתונים בזמן אמת. כאשר תתבקש, בחר את אזור us-central1 ולאחר מכן לחץ על הבא .
  3. כשתתבקש לגבי כללי אבטחה, בחר במצב נעול ולאחר מכן לחץ על הפעל .
  4. לאחר יצירת מופע מסד הנתונים, בחר את הכרטיסייה כללים , ולאחר מכן עדכן את תצורת הכללים עם הפריטים הבאים:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

למידע נוסף על אופן הפעולה של כללי אבטחה (כולל תיעוד על המשתנה "auth"), עיין בתיעוד האבטחה של מסד נתונים בזמן אמת .

הגדר אחסון בענן עבור Firebase

  1. במסוף Firebase , בחר Storage בחלונית הניווט בצד שמאל.
  2. לחץ על התחל כדי להפעיל Cloud Storage עבור הפרויקט שלך.
  3. בצע את השלבים בתיבת הדו-שיח כדי להגדיר את הדלי שלך, תוך שימוש בברירות המחדל המוצעות.

התחבר למשאבי Firebase

בשלב מוקדם יותר של מעבדת קוד זה, הוספת את הדברים הבאים ל- MainActivity.kt . החסימה המותנית הזו חיברה את פרויקט האנדרואיד שלך ל-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)
}

אם ברצונך לחבר את האפליקציה שלך לפרויקט Firebase האמיתי החדש שלך ולמשאבי Firebase האמיתיים שלו, תוכל להסיר את החסימה הזו או להפעיל את האפליקציה במצב שחרור כך ש- BuildConfig.DEBUG יהיה false .