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

1. บทนำ

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

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

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

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

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

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

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

หน้าจอ Make it So Add Taskทำให้เป็นหน้าจอหลัก

คุณจะเพิ่มคุณสมบัติบางอย่างที่ขาดหายไปในแอพนี้:

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

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

  • วิธีใช้ Firebase Authentication, Performance Monitoring, Remote Config และ 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

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

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

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

จากนั้นทำตามขั้นตอนเหล่านี้:

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

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

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

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

  1. จากเมนู Build ให้เลือก Firestore จากนั้นคลิก Create Database
  2. เปิดใช้ งาน Start ในโหมดการผลิต แล้วคลิก Next
  3. เมื่อได้รับแจ้ง ให้เลือกตำแหน่งที่จะจัดเก็บข้อมูล Cloud Firestore ของคุณ เมื่อพัฒนาแอปที่ใช้งานจริง คุณจะต้องให้สิ่งนี้อยู่ในภูมิภาคที่ใกล้เคียงกับผู้ใช้ส่วนใหญ่ของคุณ และเหมือนกันกับบริการ Firebase อื่นๆ เช่น ฟังก์ชั่น สำหรับ Codelab นี้ คุณจะคงภูมิภาคเริ่มต้นไว้หรือเลือกภูมิภาคที่ใกล้เคียงที่สุดก็ได้
  4. คลิก เปิดใช้งาน เพื่อจัดเตรียมฐานข้อมูล 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 Emulator หรืออุปกรณ์ Android จริง)

3. การรับรองความถูกต้องของ Firebase

คุณจะเพิ่มคุณสมบัติใด

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

ถึงเวลารหัส!

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

รุ่น/บริการ/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 ให้มีลักษณะดังนี้:

หน้าจอ/การตั้งค่า/SettingsViewModel.kt

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

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

หน้าจอ/การตั้งค่า/SettingsScreen.kt

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

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

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

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

หน้าจอการตั้งค่า Make it Soทำให้มันหน้าจอลงทะเบียน

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

4. คลาวด์ไฟร์สโตร์

คุณจะเพิ่มคุณสมบัติใด

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

ถึงเวลารหัส!

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

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

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

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

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

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

รุ่น/บริการ/Performance.kt

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

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

รุ่น/บริการ/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 และดำเนินการในส่วนถัดไปเพื่อทดสอบว่าทำงานตามที่คาดไว้หรือไม่

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

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

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

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

คุณจะเพิ่มคุณสมบัติใด

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

ถึงเวลารหัส!

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

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

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

รุ่น/บริการ/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 หรือพฤติกรรมของแอปในภายหลัง เมื่อผู้ใช้กำลังทำอะไรบางอย่าง!

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

หน้าจอ/งาน/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 :

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

val options by viewModel.options

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

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

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

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

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

ลองเปลี่ยนค่าสองสามครั้งในคอนโซลแล้วรีสตาร์ทแอป นั่นเป็นวิธีที่ง่ายในการเปิดตัวคุณสมบัติใหม่ในแอปของคุณโดยใช้ Remote Config!

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

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

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

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

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