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

1. บทนำ

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

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

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

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

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

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

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

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

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

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

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

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

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

2. ดาวน์โหลดแอปตัวอย่างและตั้งค่า Firebase

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

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

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

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

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

คอนโซล Firebase

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

เพิ่มแอป Android ลงในโปรเจ็กต์ Firebase

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

เลือกตัวเลือก Android ดังที่แสดงที่นี่

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

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

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

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

ตั้งค่าการตรวจสอบสิทธิ์

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

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

ตั้งค่า Cloud Firestore

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

  1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกฐานข้อมูล Firestore
  2. คลิกสร้างฐานข้อมูล
  3. ตั้งค่ารหัสฐานข้อมูลเป็น (default)
  4. เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
    สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้
  5. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎความปลอดภัย
    ในขั้นตอนถัดไปของส่วนนี้ คุณจะเพิ่มกฎความปลอดภัยเพื่อรักษาความปลอดภัยให้กับข้อมูล อย่าเผยแพร่หรือเปิดเผยแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับฐานข้อมูล
  6. คลิกสร้าง

ใช้เวลาสักครู่ในการสร้างกฎความปลอดภัยที่มีประสิทธิภาพให้กับฐานข้อมูล Firestore

  1. เปิดแดชบอร์ด Firestore แล้วไปที่แท็บกฎ
  2. อัปเดตกฎความปลอดภัยให้มีหน้าตาดังต่อไปนี้
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 จะจัดเรียงใหม่เพื่อแสดงตัวเลือกตามสถานะการตรวจสอบสิทธิ์ใหม่ของผู้ใช้

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

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

หน้าจอการตั้งค่า "ทำให้เป็นเช่นนั้น" หน้าจอลงชื่อสมัครใช้ของ Make it So

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

4. Cloud Firestore

คุณกำลังจะเพิ่มฟีเจอร์ใด

สำหรับ Cloud Firestore คุณจะเพิ่ม Listener ลงในคอลเล็กชัน Firestore ที่เก็บเอกสารซึ่งแสดงงานใน Make it So เมื่อเพิ่ม 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 ตรงกับในบริการ ดังนี้

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

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

screens/tasks/TasksScreen.kt

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

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

screens/tasks/TasksScreen.kt

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

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

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

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

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

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

ถึงเวลาเขียนโค้ดแล้ว

หากเปิดไฟล์ 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) ในโค้ดแล็บนี้

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 So แล้วไปยังส่วนถัดไปเพื่อทดสอบว่าทํางานตามที่คาดไว้หรือไม่

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

หลังจากเพิ่มการติดตามที่กําหนดเองเสร็จแล้ว ให้เรียกใช้แอปและตรวจสอบว่าคุณใช้ฟีเจอร์ที่ต้องการวัดผล 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:

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

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

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

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

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

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