หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างแอป Android ด้วย Firebase และ Jetpack Compose

1. บทนำ

อัปเดตล่าสุด 16-11-2022

การสร้างแอป Android ด้วย Firebase และ Jetpack Compose

ใน Codelab นี้ คุณจะได้สร้างแอป Android ชื่อ Make It So UI ของแอปนี้สร้างขึ้นทั้งหมดด้วย Jetpack Compose ซึ่งเป็นชุดเครื่องมือสมัยใหม่ของ Android สำหรับการสร้าง UI แบบเนทีฟ ใช้งานง่ายและใช้โค้ดน้อยกว่าการเขียนไฟล์ .xml และเชื่อมโยงกับกิจกรรม, Fragments หรือ View

ขั้นตอนแรกในการทำความเข้าใจว่า Firebase และ Jetpack Compose ทำงานร่วมกันได้ดีเพียงใดคือการทำความเข้าใจสถาปัตยกรรม Android สมัยใหม่ สถาปัตยกรรมที่ดีทำให้ระบบเข้าใจง่าย พัฒนาง่าย และดูแลรักษาได้ง่าย เพราะทำให้เห็นได้อย่างชัดเจนว่าองค์ประกอบต่างๆ มีการจัดระเบียบและสื่อสารถึงกันอย่างไร ในโลกของ Android สถาปัตยกรรมที่แนะนำเรียกว่า Model - View - ViewModel โมเดลแสดงถึงเลเยอร์ที่เข้าถึงข้อมูลในแอปพลิเคชัน มุมมองคือเลเยอร์ UI และไม่ควรทราบข้อมูลใดเกี่ยวกับตรรกะทางธุรกิจ และ ViewModel เป็นจุดที่มีการใช้ตรรกะทางธุรกิจ ซึ่งบางครั้งต้องใช้ ViewModel เพื่อเรียกใช้เลเยอร์ Model

ขอแนะนำให้อ่านบทความนี้เพื่อทำความเข้าใจวิธีใช้ Model - View - ViewModel กับแอป Android ที่สร้างด้วย Jetpack Compose เพราะจะช่วยให้เข้าใจโค้ดเบสได้ง่ายขึ้นและดำเนินขั้นตอนถัดไปได้ง่ายขึ้น

สิ่งที่คุณจะสร้าง

Make It So เป็นแอปพลิเคชันรายการสิ่งที่ต้องทำที่ใช้งานง่ายซึ่งช่วยให้ผู้ใช้เพิ่มและแก้ไขงาน เพิ่มแฟล็ก ลำดับความสำคัญ และวันที่ครบกำหนด รวมถึงทำเครื่องหมายงานว่าเสร็จแล้วได้ รูปภาพด้านล่างแสดงหน้าหลัก 2 หน้าของแอปพลิเคชันนี้ ได้แก่ หน้าการสร้างงานและหน้าหลักที่มีรายการงานที่สร้างขึ้น

หน้าจอ "เพิ่มงาน" ทำให้เป็นหน้าจอหลัก

คุณจะเพิ่มฟีเจอร์บางอย่างที่ไม่มีในแอปนี้ ได้แก่

ตรวจสอบสิทธิ์ผู้ใช้ด้วยอีเมลและรหัสผ่าน
เพิ่ม Listener ลงในคอลเล็กชัน Firestore และทำให้ UI ตอบสนองต่อการเปลี่ยนแปลง
เพิ่มการติดตามที่กำหนดเองเพื่อตรวจสอบประสิทธิภาพของโค้ดเฉพาะในแอป
สร้างปุ่มเปิด/ปิดฟีเจอร์โดยใช้การกำหนดค่าระยะไกลและใช้การเปิดตัวแบบทีละขั้นเพื่อเปิดใช้

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

วิธีใช้การตรวจสอบสิทธิ์ของ Firebase, การตรวจสอบประสิทธิภาพ, การกำหนดค่าระยะไกล และ Cloud Firestore ในแอปพลิเคชัน Android ที่ทันสมัย
วิธีทำให้ Firebase API เหมาะกับสถาปัตยกรรม MVVM
วิธีแสดงการเปลี่ยนแปลงที่ทำด้วย Firebase API ใน Compose UI

สิ่งที่คุณต้องมี

Android Studio Flamingo ขึ้นไป
โปรแกรมจำลอง Android ที่มี API 21 ขึ้นไป
คุ้นเคยกับภาษาโปรแกรม Kotlin

2. รับแอปตัวอย่างและตั้งค่า Firebase

รับโค้ดของแอปตัวอย่าง

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

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

ตั้งค่า Firebase

สิ่งแรกที่คุณต้องทำคือไปที่คอนโซล Firebase แล้วสร้างโปรเจ็กต์ Firebase โดยคลิก "+ เพิ่มโปรเจ็กต์" ตามที่คุณเห็นด้านล่าง

คอนโซล Firebase

ทำตามขั้นตอนบนหน้าจอเพื่อสร้างโปรเจ็กต์ให้เสร็จสมบูรณ์

ภายในโปรเจ็กต์ Firebase แต่ละโปรเจ็กต์ คุณสามารถสร้างแอปที่แตกต่างกันสำหรับ Android, iOS, เว็บ, Flutter และ Unity เลือกตัวเลือก Android ดังที่แสดงที่นี่

ภาพรวมโปรเจ็กต์ Firebase

จากนั้นทำตามขั้นตอนต่อไปนี้

ป้อน com.example.makeitso เป็นชื่อแพ็กเกจและป้อนชื่อเล่น (ไม่บังคับ) สำหรับ Codelab นี้ คุณไม่จำเป็นต้องเพิ่มใบรับรองการลงชื่อสำหรับแก้ไขข้อบกพร่อง
คลิกถัดไปเพื่อลงทะเบียนแอปและเข้าถึงไฟล์การกำหนดค่า Firebase
คลิกดาวน์โหลด google-services.json เพื่อดาวน์โหลดไฟล์การกำหนดค่าแล้วบันทึกในไดเรกทอรี make-it-so-android/app
คลิกถัดไป เนื่องจาก Firebase SDK รวมอยู่ในไฟล์ build.gradle ในโปรเจ็กต์ตัวอย่างอยู่แล้ว ให้คลิกถัดไปเพื่อข้ามไปยังขั้นตอนถัดไป
คลิกดำเนินการต่อไปยังคอนโซลเพื่อดำเนินการให้เสร็จสิ้น

ในการทำให้แอป Make it So ทำงานได้อย่างเหมาะสม คุณต้องดำเนินการ 2 อย่างใน Console ก่อนที่จะข้ามไปที่โค้ด ได้แก่ เปิดใช้ผู้ให้บริการการตรวจสอบสิทธิ์และสร้างฐานข้อมูล Firestore ขั้นแรก ให้เปิดใช้การตรวจสอบสิทธิ์เพื่อให้ผู้ใช้สามารถเข้าสู่ระบบแอปได้ โดยทำดังนี้

จากเมนู Build ให้เลือกAuthentication แล้วคลิก Get Started
จากการ์ดวิธีการลงชื่อเข้าใช้ ให้เลือกอีเมล/รหัสผ่าน แล้วเปิดใช้
จากนั้นคลิกเพิ่มผู้ให้บริการใหม่ แล้วเลือกเปิดใช้ไม่ระบุตัวตน

ต่อไป ให้ตั้งค่า Firestore คุณจะใช้ Firestore เพื่อจัดเก็บงานของผู้ใช้ที่ลงชื่อเข้าใช้ ผู้ใช้แต่ละรายจะได้รับเอกสารของตนเองภายในคอลเล็กชันของฐานข้อมูล

จากเมนู Build ให้เลือก Firestore แล้วคลิก Createฐานข้อมูล
เปิดใช้เริ่มต้นในโหมดที่ใช้งานจริงต่อไป แล้วคลิกถัดไป
เมื่อมีข้อความแจ้ง ให้เลือกตำแหน่งที่จะเก็บข้อมูล Cloud Firestore เมื่อพัฒนาแอปเวอร์ชันที่ใช้งานจริง จะต้องให้แอปอยู่ในภูมิภาคที่ใกล้กับผู้ใช้ส่วนใหญ่ของคุณ และมีลักษณะคล้ายกับบริการ Firebase อื่นๆ เช่น ฟังก์ชัน สำหรับ Codelab นี้ คุณสามารถเก็บภูมิภาคเริ่มต้นไว้หรือเลือกภูมิภาคที่ใกล้กับคุณมากที่สุด
คลิกเปิดใช้เพื่อจัดสรรฐานข้อมูล Firestore

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

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

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

เรียกใช้แอปพลิเคชัน

ตอนนี้คุณพร้อมที่จะเรียกใช้แอปพลิเคชันแล้ว เปิดโฟลเดอร์ make-it-so-android/start ใน Android Studio แล้วเรียกใช้แอป (ซึ่งทำได้โดยใช้โปรแกรมจำลอง Android หรืออุปกรณ์ Android จริง)

3. การตรวจสอบสิทธิ์ Firebase

คุณจะเพิ่มฟีเจอร์ใด

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

ได้เวลาเขียนโค้ดแล้ว

ทันทีที่ผู้ใช้สร้างบัญชี ด้วยการพิมพ์อีเมลและรหัสผ่าน คุณจะต้องขอข้อมูลเข้าสู่ระบบอีเมลจาก Firebase Authentication API จากนั้นจึงลิงก์ข้อมูลเข้าสู่ระบบใหม่กับบัญชีที่ไม่ระบุตัวตน เปิดไฟล์ AccountServiceImpl.kt ใน Android Studio และอัปเดตฟังก์ชัน linkAccount ให้มีลักษณะดังต่อไปนี้

model/service/impl/AccountServiceImpl.kt

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

ตอนนี้ให้เปิด SignUpViewModel.kt และเรียกฟังก์ชัน linkAccount ของบริการภายในบล็อก launchCatching ของฟังก์ชัน onSignUpClick ดังนี้

screen/sign_up/SignUpViewModel.kt

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

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

ทันทีที่ SettingsScreen เปิดขึ้นอีกครั้ง คุณต้องตรวจสอบว่าตัวเลือกลงชื่อเข้าใช้และสร้างบัญชีหายไปแล้ว เพราะตอนนี้ผู้ใช้ได้รับการตรวจสอบสิทธิ์แล้ว ลองทำแบบนี้ให้ SettingsViewModel ฟังสถานะผู้ใช้ปัจจุบัน (พร้อมใช้งานใน AccountService.kt) เพื่อตรวจสอบว่าบัญชีไม่ระบุตัวตนหรือไม่ หากต้องการอัปเดต uiState ใน SettingsViewModel.kt ให้มีลักษณะดังต่อไปนี้

Screen/settings/SettingsViewModel.kt

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

สิ่งสุดท้ายที่คุณต้องทำคืออัปเดต uiState ใน SettingsScreen.kt เพื่อรวบรวมสถานะที่ SettingsViewModel ปล่อยออกมา ดังนี้

screen/settings/SettingsScreen.kt

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

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

ได้เวลาทดสอบแล้ว

เรียกใช้เครื่องมือทำให้เป็นอย่างนั้น แล้วไปที่การตั้งค่าโดยคลิกไอคอนรูปเฟืองที่มุมขวาบนของหน้าจอ จากที่นั่น ให้คลิกตัวเลือกสร้างบัญชี ดังนี้

หน้าจอการตั้งค่า "กำหนดให้เป็นสิ่งนั้น" หน้าจอลงชื่อสมัครใช้ "เลือกเป็น "ง่ายๆ"

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

4. Cloud Firestore

คุณจะเพิ่มฟีเจอร์ใด

สำหรับ Cloud Firestore คุณจะเพิ่ม Listener ลงในคอลเล็กชัน Firestore ที่จัดเก็บเอกสารที่แสดงงานที่แสดงใน Make it เมื่อเพิ่ม Listener นี้แล้ว คุณจะได้รับการอัปเดตทั้งหมดในคอลเล็กชันนี้

ได้เวลาเขียนโค้ดแล้ว

อัปเดต Flow ที่มีใน StorageServiceImpl.kt ให้มีลักษณะดังนี้

model/service/impl/StorageServiceImpl.kt

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

โค้ดนี้กำลังเพิ่ม Listener ลงในคอลเล็กชันงานโดยอิงตาม user.id งานแต่ละงานจะแสดงด้วยเอกสารในคอลเล็กชันชื่อ tasks และแต่ละงานจะมีช่องชื่อ userId โปรดทราบว่าระบบจะปล่อย Flow ใหม่หากสถานะของ currentUser เปลี่ยนแปลง (เช่น ออกจากระบบ)

ตอนนี้คุณต้องทำให้ Flow ใน TasksViewModel.kt แสดงผลเหมือนกับในบริการดังนี้

หน้าจอ/งาน/TasksViewModel.kt

val tasks = storageService.tasks

และขั้นตอนสุดท้ายคือการสร้าง composable function ใน TasksScreens.kt ซึ่งเป็นตัวแทนของ UI โปรดตระหนักถึงขั้นตอนนี้และรวบรวมเป็นสถานะ ทุกครั้งที่สถานะเปลี่ยนแปลง ฟังก์ชัน Composable จะเขียนใหม่โดยอัตโนมัติ และแสดงสถานะล่าสุดแก่ผู้ใช้ เพิ่มใน TasksScreen composable function:

Screen/tasks/TasksScreen.kt

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

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

Screen/tasks/TasksScreen.kt

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

ได้เวลาทดสอบแล้ว

หากต้องการทดสอบว่าได้ผลหรือไม่ ให้เพิ่มงานใหม่โดยใช้แอป (โดยคลิกที่ปุ่มเพิ่มที่มุมขวาล่างของหน้าจอ) เมื่อสร้างงานเสร็จแล้ว งานควรปรากฏในคอลเล็กชัน Firestore ในคอนโซล Firestore หากคุณเข้าสู่ระบบฟีเจอร์ Make it So ในอุปกรณ์อื่นๆ ด้วยบัญชีเดียวกัน คุณจะสามารถแก้ไขรายการสิ่งที่ต้องทำและดูการอัปเดตดังกล่าวในอุปกรณ์ทุกเครื่องได้แบบเรียลไทม์

5. การตรวจสอบประสิทธิภาพ

คุณจะเพิ่มฟีเจอร์ใด

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

ได้เวลาเขียนโค้ดแล้ว

หากเปิดไฟล์ Performance.kt คุณจะเห็นฟังก์ชันในบรรทัดชื่อการติดตาม ฟังก์ชันนี้เรียกใช้ Performance Monitoring API เพื่อสร้างการติดตามที่กำหนดเอง โดยส่งต่อชื่อการติดตามเป็นพารามิเตอร์ พารามิเตอร์อื่นๆ ที่คุณเห็นคือบล็อกโค้ดที่คุณต้องการตรวจสอบ เมตริกเริ่มต้นที่รวบรวมสำหรับการติดตามแต่ละรายการคือเวลาที่ใช้ในการเรียกใช้อย่างสมบูรณ์

model/service/Performance.kt

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

คุณเลือกได้ว่าส่วนใดของฐานของโค้ดที่คิดว่าสำคัญในการวัดและเพิ่มการติดตามที่กำหนดเอง ต่อไปนี้คือตัวอย่างการเพิ่มการติดตามที่กำหนดเองในฟังก์ชัน linkAccount ที่คุณเห็นก่อนหน้านี้ (ใน AccountServiceImpl.kt) ใน Codelab นี้

model/service/impl/AccountServiceImpl.kt

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

ตอนนี้ถึงตาคุณแล้ว! เพิ่มการติดตามที่กำหนดเองลงในแอป Make it แล้วดำเนินการต่อในส่วนถัดไปเพื่อทดสอบว่าทำงานได้ตามที่คาดไว้

ได้เวลาทดสอบแล้ว

หลังจากเพิ่มการติดตามที่กําหนดเองเสร็จแล้ว ให้เรียกใช้แอปและใช้ฟีเจอร์ที่ต้องการวัดอีก 2-3 ครั้ง จากนั้นไปที่คอนโซล Firebase แล้วไปที่แดชบอร์ดประสิทธิภาพ ที่ด้านล่างของหน้าจอ คุณจะเห็นแท็บ 3 แท็บ ได้แก่ คำขอเครือข่าย การติดตามที่กำหนดเอง และการแสดงผลหน้าจอ

ไปที่แท็บการติดตามที่กำหนดเอง และตรวจสอบว่าการติดตามที่คุณเพิ่มในฐานของโค้ดปรากฏขึ้นในแท็บดังกล่าว และดูว่าโดยปกติแล้วจะใช้เวลาเท่าใดในการดำเนินการโค้ดเหล่านี้

6. การกำหนดค่าระยะไกล

คุณจะเพิ่มฟีเจอร์ใด

การกำหนดค่าระยะไกลมีกรณีการใช้งานมากมาย ตั้งแต่การเปลี่ยนรูปลักษณ์ของแอปจากระยะไกลไปจนถึงการกำหนดค่าลักษณะการทำงานที่แตกต่างกันสำหรับกลุ่มผู้ใช้แต่ละกลุ่ม ใน Codelab นี้ คุณจะใช้การกำหนดค่าระยะไกลเพื่อสร้างปุ่มสลับฟีเจอร์ที่จะแสดงหรือซ่อนฟีเจอร์แก้ไขงานใหม่ในแอป Make it

ได้เวลาเขียนโค้ดแล้ว

สิ่งแรกที่ต้องทำคือสร้างการกำหนดค่าในคอนโซล Firebase โดยต้องไปที่แดชบอร์ดการกำหนดค่าระยะไกล แล้วคลิกปุ่มเพิ่มพารามิเตอร์ กรอกข้อมูลในฟิลด์ต่างๆ ตามภาพด้านล่าง:

กล่องโต้ตอบการสร้างพารามิเตอร์การกำหนดค่าระยะไกล

เมื่อกรอกข้อมูลครบทุกช่องแล้ว ให้คลิกปุ่มบันทึก แล้วคลิกเผยแพร่ เมื่อสร้างพารามิเตอร์และพร้อมใช้งานในฐานของโค้ดแล้ว คุณจะต้องเพิ่มโค้ดที่จะดึงข้อมูลค่าใหม่ไปยังแอปของคุณ เปิดไฟล์ ConfigurationServiceImpl.kt และอัปเดตการใช้งานฟังก์ชัน 2 อย่างนี้

model/service/impl/ConfigurationServiceImpl.kt

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

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

ฟังก์ชันแรกจะดึงค่าจากเซิร์ฟเวอร์ และจะเรียกใช้ทันทีที่แอปเริ่มทำงานใน SplashViewModel.kt ซึ่งเป็นวิธีที่ดีที่สุดในการตรวจสอบว่าค่าที่เป็นปัจจุบันที่สุดจะอยู่ในหน้าจอทั้งหมดตั้งแต่ต้น ผู้ใช้จะไม่ได้รับประสบการณ์การใช้งานที่ดีหากคุณเปลี่ยน UI หรือลักษณะการทำงานของแอปในภายหลังเมื่อผู้ใช้กำลังทำบางอย่างอยู่

ฟังก์ชันที่ 2 จะแสดงค่าบูลีนที่เผยแพร่สำหรับพารามิเตอร์ที่คุณเพิ่งสร้างในคอนโซล และคุณจะต้องเรียกข้อมูลนี้ใน TasksViewModel.kt ด้วยการเพิ่มค่าต่อไปนี้ในฟังก์ชัน loadTaskOptions:

หน้าจอ/งาน/TasksViewModel.kt

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

คุณกำลังดึงค่าในบรรทัดแรก และใช้ค่านั้นโหลดตัวเลือกเมนูสำหรับรายการงานในบรรทัดที่ 2 หากค่าเป็น false หมายความว่าเมนูจะไม่มีตัวเลือกแก้ไข ตอนนี้คุณมีรายการตัวเลือกแล้ว คุณต้องทำให้ UI แสดงได้อย่างถูกต้อง ขณะสร้างแอปด้วย Jetpack Compose คุณต้องมองหา composable function ที่ประกาศว่า UI ของ TasksScreen ควรมีลักษณะอย่างไร ดังนั้น ให้เปิดไฟล์ TasksScreen.kt และอัปเดต LazyColum ให้ชี้ไปยังตัวเลือกที่มีอยู่ใน TasksViewModel.kt

Screen/tasks/TasksScreen.kt

val options by viewModel.options

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

TaskItem เป็น composable function อีกแบบหนึ่งที่ประกาศว่า UI ของงานหนึ่งๆ ควรมีลักษณะอย่างไร และแต่ละงานจะมีเมนูพร้อมตัวเลือกจะปรากฏขึ้นเมื่อผู้ใช้คลิกที่ไอคอน 3 จุดที่ตอนท้าย

ได้เวลาทดสอบแล้ว

ตอนนี้คุณพร้อมที่จะเรียกใช้แอปแล้ว ตรวจสอบว่าค่าที่คุณเผยแพร่โดยใช้คอนโซล Firebase ตรงกับลักษณะการทำงานของแอป ดังนี้

หากเป็น false คุณจะเห็นเพียง 2 ตัวเลือกเมื่อคลิกไอคอน 3 จุด
หากเป็น true คุณจะเห็น 3 ตัวเลือกเมื่อคลิกไอคอน 3 จุด

ลองเปลี่ยนค่า 2-3 ครั้งใน Console แล้วรีสตาร์ทแอป การเปิดตัวฟีเจอร์ใหม่ในแอปโดยใช้การกำหนดค่าระยะไกลจึงทำได้ง่ายมาก

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

ยินดีด้วย คุณสร้างแอป Android ด้วย Firebase และ Jetpack Compose เรียบร้อยแล้ว

คุณได้เพิ่มการตรวจสอบสิทธิ์ของ Firebase, การตรวจสอบประสิทธิภาพ, การกำหนดค่าระยะไกล และ Cloud Firestore ลงในแอป Android ที่สร้างด้วย Jetpack Compose สำหรับ UI โดยเฉพาะ และได้ทำให้การตั้งค่าดังกล่าวสอดคล้องกับสถาปัตยกรรม MVVM ที่แนะนำแล้ว

สร้างแอป Android ด้วย Firebase และ Jetpack Compose

1. บทนำ

การสร้างแอป Android ด้วย Firebase และ Jetpack Compose

สิ่งที่คุณจะสร้าง

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

สิ่งที่คุณต้องมี

2. รับแอปตัวอย่างและตั้งค่า Firebase

รับโค้ดของแอปตัวอย่าง

ตั้งค่า Firebase

เรียกใช้แอปพลิเคชัน

3. การตรวจสอบสิทธิ์ Firebase

คุณจะเพิ่มฟีเจอร์ใด

ได้เวลาเขียนโค้ดแล้ว

ได้เวลาทดสอบแล้ว

4. Cloud Firestore

คุณจะเพิ่มฟีเจอร์ใด

ได้เวลาเขียนโค้ดแล้ว

ได้เวลาทดสอบแล้ว

5. การตรวจสอบประสิทธิภาพ

คุณจะเพิ่มฟีเจอร์ใด

ได้เวลาเขียนโค้ดแล้ว

ได้เวลาทดสอบแล้ว

6. การกำหนดค่าระยะไกล

คุณจะเพิ่มฟีเจอร์ใด

ได้เวลาเขียนโค้ดแล้ว

ได้เวลาทดสอบแล้ว

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

อ่านเพิ่มเติม

เอกสารอ้างอิง