Firebase Android Codelab - สร้างแชทที่เป็นมิตร

1. ภาพรวม

ภาพหน้าจอ

ภาพ: แอพ Working Friendly Chat

ยินดีต้อนรับสู่ Codelab แชทที่เป็นมิตร ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้แพลตฟอร์ม Firebase เพื่อสร้างแอปแชทบน Android

สิ่งที่คุณจะได้เรียนรู้

  • วิธีใช้ Firebase Authentication เพื่อให้ผู้ใช้ลงชื่อเข้าใช้ได้
  • วิธีซิงค์ข้อมูลโดยใช้ฐานข้อมูลเรียลไทม์ของ Firebase
  • วิธีจัดเก็บไฟล์ไบนารีใน Cloud Storage สำหรับ Firebase
  • วิธีใช้ Firebase Local Emulator Suite เพื่อพัฒนาแอพ Android ด้วย Firebase

สิ่งที่คุณต้องการ

  • สตูดิโอ Android เวอร์ชัน 4.2 ขึ้นไป
  • Android Emulator กับ Android 5.0 ขึ้นไป
  • Java 7 หรือสูงกว่า การติดตั้ง Java ใช้เหล่านี้ คำแนะนำ ; การตรวจสอบรุ่นเรียกใช้ของคุณ java -version
  • คุ้นเคยกับภาษาโปรแกรม Kotlin

2. รับโค้ดตัวอย่าง

โคลนที่เก็บ

โคลนที่เก็บ GitHub จากบรรทัดคำสั่ง:

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

นำเข้าสู่ Android Studio

ใน Android สตูดิโอ, เลือก File> Open แล้วเลือก build-android-start ไดเรกทอรี ( android_studio_folder ) จากไดเร็กทอรีที่คุณดาวน์โหลดโค้ดตัวอย่าง

ตอนนี้คุณควรจะมี build-android-start เปิดโครงการใน Android สตูดิโอ ถ้าคุณเห็นคำเตือนเกี่ยวกับความ google-services.json ไฟล์หายไปไม่ต้องกังวล มันจะถูกเพิ่มในขั้นตอนต่อไป

ตรวจสอบการพึ่งพา

ใน Codelab นี้ มีการเพิ่มการพึ่งพาทั้งหมดที่คุณต้องการแล้ว แต่สิ่งสำคัญคือต้องเข้าใจวิธีเพิ่ม Firebase SDK ในแอปของคุณ:

build.gradle

buildscript {
    // ...

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

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

app/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:19.0.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:26.6.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:7.2.0'
    implementation 'com.firebaseui:firebase-ui-database:7.2.0'
}

3. ติดตั้ง Firebase CLI

เพื่อที่จะเรียกใช้ Firebase Emulator สวีท คุณจะต้องติดตั้งและใช้ Firebase CLI

ติดตั้ง CLI

ตัวเลือก 1 - ติดตั้งด้วย npm

หากคุณมี Node.js และ npm ติดตั้งอยู่บนเครื่องของคุณแล้ว คุณสามารถติดตั้ง CLI ด้วยคำสั่งต่อไปนี้:

npm install -g firebase-tools@latest

ตัวเลือก 2 - ติดตั้งไบนารีแบบสแตนด์อโลน

หากคุณไม่ได้มี Node.js / NPM หรือคุณใหม่ในการพัฒนาแอพพลิคุณสามารถติดตั้ง CLI เป็นไบนารีแบบสแตนด์อโลนดังต่อไปนี้ คำแนะนำสำหรับแพลตฟอร์มของคุณที่นี่

ตรวจสอบการติดตั้ง

เมื่อคุณมี Firebase CLI ติดตั้งเรียกใช้คำสั่งต่อไปนี้เพื่อให้แน่ใจว่าคุณมีรุ่น 9.11.0 หรือสูงกว่า:

firebase --version

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 สวีท UI:

Emulator Suite UI หน้าแรก

ออกจาก emulators:start คำสั่งการทำงานสำหรับส่วนที่เหลือของ codelab ที่

เชื่อมต่อแอพของคุณ

ใน Android สตูดิโอเปิด 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 ของคุณ สำหรับจุดประสงค์ของ Codelab นี้ เราได้จัดเตรียมไฟล์ 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

ในขั้นตอนสุดท้ายของ Codelab นี้ คุณจะได้เรียนรู้วิธีสร้างโปรเจ็กต์ Firebase จริงและแอป Firebase Android เพื่อแทนที่ไฟล์ JSON จำลองด้วยการกำหนดค่าของคุณเอง

เรียกใช้แอพ

เมื่อคุณนำเข้าโปรเจ็กต์ไปยัง Android Studio และเพิ่มไฟล์ JSON การกำหนดค่า Firebase แล้ว คุณก็พร้อมที่จะเรียกใช้แอปเป็นครั้งแรก

  1. เริ่มโปรแกรมจำลอง Android ของคุณ
  2. ในสตูดิโอของ Android คลิก Run ( ดำเนินการ ) ในแถบเครื่องมือ

แอปควรเปิดขึ้นบน Android Emulator ของคุณ ณ จุดนี้ คุณควรเห็นรายการข้อความว่าง และการส่งและรับข้อความจะไม่ทำงาน ในขั้นตอนต่อไปของ Codelab นี้ คุณจะต้องตรวจสอบสิทธิ์ผู้ใช้เพื่อให้สามารถใช้แชทที่เป็นมิตรได้

6. เปิดใช้งานการตรวจสอบสิทธิ์

แอปนี้จะใช้ฐานข้อมูลเรียลไทม์ของ Firebase เพื่อจัดเก็บข้อความแชททั้งหมด ก่อนที่เราจะเพิ่มข้อมูล เราควรตรวจสอบให้แน่ใจว่าแอปนั้นปลอดภัยและมีเพียงผู้ใช้ที่ตรวจสอบสิทธิ์เท่านั้นที่สามารถโพสต์ข้อความได้ ในขั้นตอนนี้ เราจะเปิดใช้การตรวจสอบสิทธิ์ Firebase และกำหนดค่ากฎความปลอดภัยของฐานข้อมูลแบบเรียลไทม์

เพิ่มฟังก์ชันการลงชื่อเข้าใช้พื้นฐาน

ต่อไป เราจะเพิ่มรหัสการตรวจสอบสิทธิ์พื้นฐานของ Firebase ลงในแอปเพื่อตรวจหาผู้ใช้และใช้งานหน้าจอลงชื่อเข้าใช้

ตรวจสอบผู้ใช้ปัจจุบัน

แรกเพิ่มตัวแปรเช่นต่อไปนี้ไป MainActivity.kt ระดับ:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

ตอนนี้ขอปรับเปลี่ยน MainActivity ที่จะส่งผู้ใช้ไปยังหน้าจอลงชื่อเข้าเมื่อใดก็ตามที่พวกเขาเปิด app และไม่ได้รับอนุญาต เพิ่มต่อไปนี้ไป 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 เพื่อใช้ตรรกะในการลงชื่อเข้าใช้

เพิ่มตัวแปรเช่นการตรวจสอบสิทธิ์ใน 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 ในการเรียกใช้เมธอดเพียงไม่กี่เมธอด และไม่จำเป็นต้องจัดการการกำหนดค่าฝั่งเซิร์ฟเวอร์ใดๆ

ทดสอบการทำงานของคุณ

เรียกใช้แอพบน Android Emulator ของคุณ คุณควรถูกส่งไปยังหน้าจอลงชื่อเข้าใช้ทันที แตะลงชื่อเข้าใช้ด้วยปุ่มอีเมลแล้วสร้างบัญชี หากทุกอย่างถูกต้องคุณควรจะถูกส่งไปยังหน้าจอข้อความ

หลังจากการลงนามในการเปิด Firebase Emulator สวีท UI ในเบราว์เซอร์ของคุณแล้วคลิกแท็บการตรวจสอบสิทธิ์เพื่อดูนี้เป็นครั้งแรกที่ลงนามในบัญชีผู้ใช้

7. อ่านข้อความ

ในขั้นตอนนี้ เราจะเพิ่มฟังก์ชันการทำงานเพื่ออ่านและแสดงข้อความที่จัดเก็บไว้ในฐานข้อมูลเรียลไทม์

นำเข้าข้อความตัวอย่าง

  1. ใน Firebase Emulator สวีท UI เลือกแท็บฐานข้อมูลเรียลไทม์
  2. ลากและวาง initial_messages.json ไฟล์จากสำเนาภายในประเทศของคุณที่เก็บ codelab ลงในมุมมองข้อมูล

ตอนนี้คุณควรจะมีข้อความไม่กี่ภายใต้ messages โหนดของฐานข้อมูล

อ่านข้อมูล

ประสานข้อความ

ในส่วนนี้ เราเพิ่มโค้ดที่ซิงโครไนซ์ข้อความที่เพิ่มใหม่ไปยัง UI ของแอปโดย:

  • การเริ่มต้นฐานข้อมูลเรียลไทม์ของ Firebase และเพิ่มผู้ฟังเพื่อจัดการกับการเปลี่ยนแปลงที่ทำกับข้อมูล
  • อัพเดต RecyclerView อะแดปเตอร์เพื่อให้ข้อความใหม่จะแสดง
  • เพิ่มตัวแปรเช่นฐานข้อมูลอื่น ๆ เช่นตัวแปร Firebase คุณใน MainActivity ระดับ:

MainActivity.kt

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

แก้ไข MainActivity ของ onCreate() วิธีการภายใต้ความคิดเห็น // Initialize Realtime Database and FirebaseRecyclerAdapter ด้วยรหัสที่กำหนดไว้ด้านล่าง รหัสนี้จะเพิ่มข้อความที่มีอยู่ทั้งหมดออกจากฐานข้อมูลเรียลไทม์แล้วรอสำหรับรายการเด็กใหม่ภายใต้ messages เส้นทางที่อยู่ในฐานข้อมูลของคุณ Firebase เรียลไทม์ เพิ่มองค์ประกอบใหม่ให้กับ UI สำหรับแต่ละข้อความ:

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 อัพเดท onPause() และ onResume() วิธีการในการ MainActivity ที่แสดงด้านล่าง:

MainActivity.kt

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

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

ทดสอบการซิงค์ข้อความ

  1. คลิกเรียกใช้ ( ดำเนินการ ).
  2. ใน Emulator สวีท UI, กลับไปที่เรียลไทม์แท็บฐานข้อมูลแล้วด้วยตนเองเพิ่มข้อความใหม่ ยืนยันว่าข้อความแสดงขึ้นในแอป Android ของคุณ:

ขอแสดงความยินดี คุณเพิ่งเพิ่มฐานข้อมูลเรียลไทม์ในแอปของคุณ!

8. ส่งข้อความ

ใช้การส่งข้อความ

ในส่วนนี้ คุณจะเพิ่มความสามารถให้ผู้ใช้แอปส่งข้อความ โค้ดข้างล่างนี้ฟังสำหรับการคลิกเหตุการณ์ปุ่มส่งที่สร้างใหม่ FriendlyMessage วัตถุที่มีเนื้อหาของฟิลด์ข้อความและผลักดันข้อความไปยังฐานข้อมูล push() วิธีการเพิ่ม ID สร้างขึ้นโดยอัตโนมัติไปยังเส้นทางวัตถุผลักดันของ รหัสเหล่านี้เป็นแบบเรียงตามลำดับซึ่งทำให้แน่ใจได้ว่าข้อความใหม่จะถูกเพิ่มไปยังส่วนท้ายของรายการ

อัพเดทฟังการคลิกปุ่มส่งใน 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("")
}

ใช้การส่งข้อความรูปภาพ

ในส่วนนี้ คุณจะเพิ่มความสามารถให้ผู้ใช้แอปส่งข้อความรูปภาพได้ การสร้างข้อความรูปภาพทำได้ด้วยขั้นตอนเหล่านี้:

  • เลือกภาพ
  • จัดการการเลือกภาพ
  • เขียนข้อความรูปภาพชั่วคราวไปยังฐานข้อมูลเรียลไทม์
  • เริ่มอัพโหลดภาพที่เลือก
  • อัปเดต URL ข้อความรูปภาพเป็น URL ของรูปภาพที่อัปโหลด เมื่ออัปโหลดเสร็จแล้ว

เลือกรูปภาพ

ในการเพิ่มรูปภาพ Codelab นี้ใช้ Cloud Storage สำหรับ Firebase Cloud Storage เป็นที่ที่ดีในการจัดเก็บข้อมูลไบนารีของแอปของคุณ

จัดการการเลือกรูปภาพและเขียนข้อความชั่วคราว

เมื่อผู้ใช้เลือกภาพการเลือกภาพที่ Intent จะเปิดตัว นี้จะดำเนินการแล้วในรหัสที่ส่วนท้ายของ onCreate() วิธีการ เมื่อเสร็จแล้วก็เรียก MainActivity 's onImageSelected() วิธีการ เมื่อใช้ข้อมูลโค้ดด้านล่าง คุณจะเขียนข้อความที่มี URL รูปภาพชั่วคราวไปยังฐานข้อมูลเพื่อระบุว่ากำลังอัปโหลดรูปภาพ

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. ใน Android Emulator ให้ป้อนข้อความ จากนั้นแตะปุ่มส่ง ข้อความใหม่ควรมองเห็นได้ใน UI ของแอปและใน Firebase Emulator Suite UI
  3. ใน Android Emulator ให้แตะรูปภาพ "+" เพื่อเลือกรูปภาพจากอุปกรณ์ของคุณ ข้อความใหม่ควรปรากฏให้เห็นก่อนด้วยภาพตัวแทน จากนั้นจึงแสดงด้วยภาพที่เลือกเมื่อการอัปโหลดภาพเสร็จสิ้น ข้อความใหม่ควรมองเห็นได้ใน UI ของ Emulator Suite โดยเฉพาะในฐานะออบเจ็กต์ในแท็บฐานข้อมูลเรียลไทม์และแบบหยดในแท็บพื้นที่เก็บข้อมูล

9. ขอแสดงความยินดี!

คุณเพิ่งสร้างแอปพลิเคชันแชทแบบเรียลไทม์โดยใช้ Firebase!

สิ่งที่ได้เรียนรู้

  • การตรวจสอบสิทธิ์ Firebase
  • ฐานข้อมูลเรียลไทม์ของ Firebase
  • ที่เก็บข้อมูลบนคลาวด์สำหรับ Firebase

ต่อไป ลองใช้สิ่งที่คุณเรียนรู้ใน Codelab นี้เพื่อเพิ่ม Firebase ให้กับแอป Android ของคุณเอง! ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Firebase เยี่ยมชม firebase.google.com

หากคุณต้องการที่จะเรียนรู้วิธีการตั้งค่าโครงการ Firebase จริงและใช้ทรัพยากร Firebase จริง (แทนของโครงการสาธิตและทรัพยากรเทิดทูนเท่านั้น) ดำเนินการขั้นตอนต่อไป

หมายเหตุ: แม้หลังจากที่คุณตั้งค่าโครงการ Firebase จริงและโดยเฉพาะอย่างยิ่งเมื่อคุณเริ่มต้นสร้าง app ที่จริงเราขอแนะนำให้ใช้ Firebase ท้องถิ่น Emulator Suite สำหรับการพัฒนาและการทดสอบ

10. ตัวเลือก: สร้างและตั้งค่าโปรเจ็กต์ Firebase

ในขั้นตอนนี้ คุณจะต้องสร้างโปรเจ็กต์ Firebase จริงและแอป Firebase สำหรับ Android เพื่อใช้กับ Codelab นี้ คุณจะเพิ่มการกำหนดค่า Firebase เฉพาะแอปลงในแอปของคุณด้วย และสุดท้าย คุณจะต้องตั้งค่าทรัพยากร Firebase จริงเพื่อใช้กับแอปของคุณ

สร้างโปรเจ็กต์ Firebase

  1. ในเบราว์เซอร์ของคุณไปที่ คอนโซล Firebase
  2. เลือกโครงการเพิ่ม
  3. เลือกหรือป้อนชื่อโครงการ คุณสามารถใช้ชื่อใดก็ได้ที่คุณต้องการ
  4. คุณไม่จำเป็นต้องมี Google Analytics สำหรับ Codelab นี้ คุณจึงสามารถข้ามการเปิดใช้งานสำหรับโครงการของคุณได้
  5. คลิกสร้างโครงการ เมื่อโครงการของคุณพร้อมคลิกดำเนินการต่อ

เพิ่ม Firebase ให้กับโปรเจ็กต์ Android ของคุณ

ก่อนที่คุณจะเริ่มขั้นตอนนี้ ให้รับแฮช 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

คุณควรเห็นผลลัพธ์บางอย่างเช่นด้านบน บรรทัดที่สำคัญคือ SHA1 กัญชา หากคุณไม่สามารถที่จะหากัญชา SHA1 ของคุณให้ดู หน้านี้ สำหรับข้อมูลเพิ่มเติม

กลับไปที่คอนโซล Firebase และทำตามขั้นตอนเหล่านี้เพื่อลงทะเบียนโปรเจ็กต์ Android กับโปรเจ็กต์ Firebase

  1. จากหน้าจอภาพรวมของโปรเจ็กต์ใหม่ของคุณ ให้คลิกไอคอน Android เพื่อเปิดเวิร์กโฟลว์การตั้งค่า: เพิ่มแอพ android
  2. บนหน้าจอถัดไปให้ป้อน com.google.firebase.codelab.friendlychat เป็นชื่อแพคเกจสำหรับแอปของคุณ
  3. คลิกที่สมัครสมาชิก App แล้วคลิกดาวน์โหลด google-services.json ดาวน์โหลดไฟล์การกำหนดค่า Firebase ของคุณ
  4. คัดลอก google-services.json ไฟล์ลงใน app ไดเรกทอรีของโครงการ Android ของคุณ
  5. ข้ามขั้นตอนถัดไปแสดงในเวิร์กโฟลว์การติดตั้งคอนโซล (พวกเขาได้รับการทำมาแล้วสำหรับคุณใน build-android-start โครงการ)
  6. ตรวจสอบให้แน่ใจว่าแอพของคุณมีการอ้างอิงทั้งหมดโดยซิงค์โปรเจ็กต์ของคุณกับไฟล์ Gradle จากแถบเครื่องมือ Android สตูดิโอ, เลือกไฟล์> โครงการ Sync กับไฟล์ Gradle

กำหนดค่าการตรวจสอบสิทธิ์ Firebase

ก่อนที่แอปจะสามารถเข้าถึง Firebase Authentication API ในนามของผู้ใช้ คุณต้องเปิดใช้การตรวจสอบสิทธิ์ Firebase และผู้ให้บริการลงชื่อเข้าใช้ที่คุณต้องการใช้ในแอป

  1. ใน Firebase คอนโซล เลือกรับรองความถูกต้องจากแผงนำทางด้านซ้าย
  2. เลือกเข้าสู่ระบบในแท็บวิธี
  3. คลิกที่อีเมล์ / รหัสผ่านแล้วสลับสวิตช์เพื่อเปิดใช้งาน (สีฟ้า)
  4. คลิก Google แล้วสลับสวิตช์เพื่อเปิดใช้งาน (สีฟ้า) และการตั้งค่าอีเมลสนับสนุนโครงการ

หากคุณได้รับข้อผิดพลาดในภายหลังใน Codelab นี้พร้อมด้วยข้อความ "CONFIGURATION_NOT_FOUND" ให้กลับมาที่ขั้นตอนนี้และตรวจสอบงานของคุณอีกครั้ง

กำหนดค่าฐานข้อมูลเรียลไทม์

แอปใน Codelab นี้เก็บข้อความแชทในฐานข้อมูลเรียลไทม์ของ Firebase ในส่วนนี้ เราจะสร้างฐานข้อมูลและกำหนดค่าความปลอดภัยผ่านภาษาการกำหนดค่า JSON ที่เรียกว่า Firebase Security Rules

  1. ใน คอนโซล Firebase เลือกเรียลไทม์จากฐานข้อมูลแผงนำทางด้านซ้าย
  2. คลิกสร้างฐานข้อมูลเพื่อสร้างอินสแตนฐานข้อมูลเรียลไทม์ใหม่ เมื่อได้รับแจ้งให้เลือก us-central1 ภูมิภาคแล้วคลิกถัดไป
  3. เมื่อได้รับแจ้งเกี่ยวกับกฎความปลอดภัยควรเลือกโหมดล็อกแล้วคลิกเปิดใช้งาน
  4. เมื่อเช่นฐานข้อมูลได้ถูกสร้างขึ้นให้เลือกแท็บกฎแล้วปรับปรุงการกำหนดค่ากฎดังต่อไปนี้:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการรักษาความปลอดภัยกฎการทำงาน (รวมทั้งเอกสารเกี่ยวกับตัวแปร "รับรองความถูกต้อง") ดู เอกสารการรักษาความปลอดภัยฐานข้อมูลเรียลไทม์

กำหนดค่า Cloud Storage สำหรับ Firebase

  1. ใน Firebase คอนโซล เลือกการจัดเก็บจากแผงนำทางด้านซ้าย
  2. คลิกเริ่มต้นการเปิดใช้งานการจัดเก็บเมฆสำหรับโครงการของคุณ
  3. ทำตามขั้นตอนในกล่องโต้ตอบเพื่อตั้งค่าที่เก็บข้อมูลของคุณ โดยใช้ค่าเริ่มต้นที่แนะนำ

เชื่อมต่อกับทรัพยากร Firebase

ในขั้นตอนก่อนหน้านี้ codelab นี้คุณเพิ่มต่อไปนี้เพื่อ MainActivity.kt บล็อกแบบมีเงื่อนไขนี้เชื่อมต่อโปรเจ็กต์ Android ของคุณกับ 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 จริงของคุณทั้งสองสามารถลบบล็อกนี้หรือใช้ app ของคุณในโหมดการเปิดตัวเพื่อให้ BuildConfig.DEBUG เป็น false