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

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

1. บทนำ

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

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

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

ขั้นตอนแรกในการทำความเข้าใจว่า 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 ใน UI ของ Compose

สิ่งที่ต้องมี

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

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

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

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

เลือกตัวเลือก Android ดังที่เห็นที่นี่

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

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

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

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

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

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

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

ตั้งค่า Cloud Firestore

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

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

ใช้เวลาสักครู่ในการสร้างกฎความปลอดภัยที่มีประสิทธิภาพให้กับฐานข้อมูล 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 จริง)

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

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

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

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

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

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

screens/sign_up/SignUpViewModel.kt

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

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

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

screens/settings/SettingsViewModel.kt

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

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

screens/settings/SettingsScreen.kt

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

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

ถึงเวลาทดสอบ

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

หน้าจอการตั้งค่า "ทำให้เป็นเช่นนั้น" หน้าจอลงชื่อสมัครใช้ของ 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())

เมื่อฟังก์ชันคอมโพสิเบิลมีสิทธิ์เข้าถึงสถานะเหล่านี้ คุณจะอัปเดต 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. การกำหนดค่าระยะไกล

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

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

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

สิ่งแรกที่ต้องทำคือสร้างการกําหนดค่าในคอนโซล 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)
}

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

screens/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 ที่แนะนํา

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

1. บทนำ

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

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

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

สิ่งที่ต้องมี

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

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

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

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

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

ตั้งค่า Cloud Firestore

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

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

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

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

ถึงเวลาทดสอบ

4. Cloud Firestore

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

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

ถึงเวลาทดสอบ

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

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

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

ถึงเวลาทดสอบ

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

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

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

ถึงเวลาทดสอบ

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

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

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