การพัฒนาโค้ดซ้ำ

ในฐานะนักพัฒนาแอปบนอุปกรณ์เคลื่อนที่ คุณมักจะพัฒนา UI ของแอปทีละขั้นตอนมากกว่าที่จะพัฒนาทุกอย่างพร้อมกัน Android Studio นำแนวทางนี้มาใช้กับ Jetpack Compose โดยมีเครื่องมือที่ไม่ต้องใช้บิลด์แบบเต็มเพื่อตรวจสอบ แก้ไขค่า และยืนยันผลลัพธ์สุดท้าย

การทำซ้ำ UI ที่มีการใช้งาน AI ช่วย

คุณสามารถใช้ AI Agent ใน Android Studio เพื่อปรับแต่งและเปลี่ยนรูปแบบ UI ของ Compose ซ้ำๆ ได้โดยตรงจากตัวอย่างการออกแบบ คลิกขวาที่ตัวอย่างการเขียน แล้วเลือกการดำเนินการโดย AI อย่างใดอย่างหนึ่งต่อไปนี้

• จับคู่ UI กับรูปภาพเป้าหมาย: เลือกเพื่ออัปโหลดม็อกอัปการออกแบบอ้างอิง จากนั้น Agent จะแนะนำการเปลี่ยนแปลงโค้ดเพื่อให้การติดตั้งใช้งานตรงกับการออกแบบมากที่สุด

• เปลี่ยนรูปแบบ UI: ใช้พรอมต์ภาษาธรรมชาติ (เช่น "เปลี่ยนสีปุ่มเป็นสีน้ำเงิน") เพื่ออธิบายการแก้ไขที่เฉพาะเจาะจงซึ่งคุณต้องการทำกับ UI

การแก้ไขสด

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

การแก้ไขแบบเรียลไทม์มี 3 โหมด ดังนี้

• ด้วยตนเอง: ระบบจะใช้การเปลี่ยนแปลงโค้ดเมื่อมีการพุชด้วยตนเองโดยใช้ Control+' (Command+' ใน macOS)
• Manual on Save: ระบบจะใช้การเปลี่ยนแปลงโค้ดเมื่อบันทึกด้วยตนเองโดยใช้ Control+S (Command+S ใน macOS)
• อัตโนมัติ: ระบบจะใช้การเปลี่ยนแปลงในอุปกรณ์หรือโปรแกรมจำลองเมื่อคุณอัปเดตฟังก์ชันที่ประกอบกันได้

การแก้ไขแบบเรียลไทม์จะมุ่งเน้นไปที่การเปลี่ยนแปลงโค้ดที่เกี่ยวข้องกับ UI และ UX การแก้ไขแบบเรียลไทม์ไม่รองรับการเปลี่ยนแปลง เช่น การอัปเดตซิกเนเจอร์ของเมธอด การเพิ่มเมธอดใหม่ หรือการเปลี่ยนแปลงลำดับชั้นของคลาส ดูข้อมูลเพิ่มเติมได้ที่รายการข้อจำกัดของ Live Edit

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

เวิร์กโฟลว์แนวทางปฏิบัติแนะนำมีดังนี้

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

เริ่มต้นใช้งาน Live Edit

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

ตั้งค่าโปรเจ็กต์ใหม่

1. ก่อนเริ่มต้น โปรดตรวจสอบว่าคุณได้ติดตั้ง Android Studio Giraffe ขึ้นไป และระดับ API ของอุปกรณ์จริงหรือโปรแกรมจำลองอยู่ที่ 30 เป็นอย่างน้อย

2. เปิด Android Studio แล้วเลือกโปรเจ็กต์ใหม่ในกล่องโต้ตอบยินดีต้อนรับสู่ Android Studio หากมีโปรเจ็กต์เปิดอยู่แล้ว คุณสามารถสร้างโปรเจ็กต์ใหม่ได้โดยไปที่ไฟล์ > ใหม่ > โปรเจ็กต์ใหม่

3. เลือกเทมเพลต Empty Compose Activity สำหรับโทรศัพท์และแท็บเล็ต แล้วคลิกถัดไป

   

4. กรอกข้อมูลที่จำเป็นในกล่องโต้ตอบโปรเจ็กต์ใหม่ ซึ่งได้แก่ ชื่อ, ชื่อแพ็กเกจ, ตำแหน่งที่บันทึก, SDK ขั้นต่ำ และภาษาสำหรับการกำหนดค่าบิลด์

   

5. คลิกเสร็จสิ้น

เปิดใช้การแก้ไขสด

1. ไปที่การตั้งค่าเพื่อเปิดใช้การแก้ไขแบบเรียลไทม์

   • ใน Windows หรือ Linux ให้ไปที่ไฟล์ > การตั้งค่า > เอดิเตอร์ > การแก้ไขสด
   • ใน macOS ให้ไปที่ Android Studio > การตั้งค่า > เครื่องมือแก้ไข > Live Edit

2. เลือกตัวเลือกแก้ไขแบบสดและโหมดที่ต้องการเรียกใช้จากการตั้งค่า

   ในโหมดแมนวล ระบบจะพุชการเปลี่ยนแปลงโค้ดทุกครั้งที่คุณกด Control+' (Command+' ใน macOS) ในโหมดบันทึกด้วยตนเอง ระบบจะใช้การเปลี่ยนแปลงโค้ดทุกครั้งที่คุณบันทึกด้วยตนเองโดยใช้ Control+S (Command+S ใน macOS) ในโหมดอัตโนมัติ ระบบจะใช้การเปลี่ยนแปลงโค้ดในอุปกรณ์หรือโปรแกรมจำลองเมื่อคุณทำการเปลี่ยนแปลง

   

3. ในเครื่องมือแก้ไข ให้เปิดไฟล์ MainActivity ซึ่งเป็นจุดแรกเข้าสำหรับแอปของคุณ

4. คลิก Run เพื่อทำให้แอปใช้งานได้

5. หลังจากเปิดการแก้ไขแบบเรียลไทม์ เครื่องหมายถูกสีเขียวอัปเดตแล้วจะปรากฏที่ด้านขวาบนของหน้าต่างเครื่องมืออุปกรณ์ที่ทำงานอยู่

   

ทำการเปลี่ยนแปลงและตรวจสอบ

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

ตัวอย่างเช่น แก้ไขเมธอด Greeting ที่มีอยู่ใน MainActivity เป็นดังนี้

@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello $name!",
        Modifier
            .padding(80.dp) // Outer padding; outside background
            .background(color = Color.Cyan) // Solid element background color
            .padding(16.dp) // Inner padding; inside background, around text)
    )
}
IterativeDevelopmentSnippets.kt

การเปลี่ยนแปลงจะปรากฏในอุปกรณ์ทดสอบทันที ดังที่แสดงในรูปที่ 6

แก้ปัญหาเกี่ยวกับฟีเจอร์แก้ไขสด

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

ข้อจำกัดของ Live Edit

รายการข้อจำกัดในปัจจุบันมีดังนี้

• [ใช้ได้กับ Android Studio Giraffe ขึ้นไปเท่านั้น] การแก้ไขแบบเรียลไทม์ต้องใช้ Compose Runtime 1.3.0 ขึ้นไป หากโปรเจ็กต์ใช้ Compose เวอร์ชันต่ำกว่า ระบบจะปิดใช้การแก้ไขแบบเรียลไทม์

• [ใช้กับ Android Studio Giraffe ขึ้นไปเท่านั้น] การแก้ไขแบบเรียลไทม์ต้องใช้ AGP 8.1.0-alpha05 ขึ้นไป หากโปรเจ็กต์ใช้ AGP เวอร์ชันต่ำกว่า ระบบจะปิดใช้การแก้ไขแบบเรียลไทม์

• การแก้ไขสดต้องใช้อุปกรณ์จริงหรือโปรแกรมจำลองที่ใช้ระดับ API 30 ขึ้นไป

• การแก้ไขแบบเรียลไทม์รองรับเฉพาะการแก้ไขเนื้อหาของฟังก์ชัน ซึ่งหมายความว่าคุณไม่สามารถเปลี่ยนชื่อฟังก์ชันหรือซิกเนเจอร์ เพิ่มหรือนำฟังก์ชันออก หรือเปลี่ยนฟิลด์ที่ไม่ใช่ฟังก์ชันได้

• การแก้ไขสดจะรีเซ็ตสถานะของแอปในครั้งแรกที่คุณเปลี่ยนฟังก์ชัน Compose ในไฟล์ ซึ่งจะเกิดขึ้นหลังจากการเปลี่ยนแปลงโค้ดครั้งแรกเท่านั้น โดยสถานะแอปจะไม่รีเซ็ตเมื่อมีการเปลี่ยนแปลงโค้ดในภายหลังที่คุณทำกับฟังก์ชัน Compose ในไฟล์นั้น

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

• คุณต้องเรียกใช้แบบเต็มเพื่อให้โปรแกรมแก้ไขข้อบกพร่องทำงานในคลาสที่คุณแก้ไขด้วย Live Edit

• แอปที่ทำงานอยู่อาจขัดข้องเมื่อคุณแก้ไขด้วยการแก้ไขสด หากเกิดกรณีนี้ขึ้น คุณสามารถทำให้แอปใช้งานได้อีกครั้งด้วยปุ่มเรียกใช้

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

• ฟังก์ชันที่ไม่สามารถประกอบได้จะได้รับการอัปเดตแบบเรียลไทม์ในอุปกรณ์หรือโปรแกรมจำลอง และจะมีการทริกเกอร์การจัดองค์ประกอบใหม่ทั้งหมด การจัดองค์ประกอบใหม่ทั้งหมดอาจไม่เรียกใช้ฟังก์ชันที่อัปเดต สำหรับฟังก์ชันที่ประกอบกันไม่ได้ คุณต้องทริกเกอร์ฟังก์ชันที่อัปเดตใหม่หรือเรียกใช้แอปอีกครั้ง

• การแก้ไขแบบเรียลไทม์จะไม่กลับมาทำงานอีกครั้งเมื่อรีสตาร์ทแอป คุณต้องเรียกใช้แอปอีกครั้ง

• การแก้ไขแบบเรียลไทม์รองรับเฉพาะกระบวนการที่แก้ไขข้อบกพร่องได้เท่านั้น

• Live Edit ไม่รองรับโปรเจ็กต์ที่ใช้ค่าที่กำหนดเองสำหรับ moduleName ในส่วน kotlinOptions ในการกำหนดค่าบิลด์

• การแก้ไขแบบเรียลไทม์ใช้ไม่ได้กับการติดตั้งใช้งานหลายรายการ ซึ่งหมายความว่าคุณไม่สามารถติดตั้งใช้งานในอุปกรณ์เครื่องหนึ่งแล้วค่อยติดตั้งในอีกเครื่องหนึ่งได้ Live Edit จะทำงานในอุปกรณ์ชุดล่าสุดที่ติดตั้งใช้งานแอปเท่านั้น

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

• ฟีเจอร์ "ใช้การเปลี่ยนแปลง"/"ใช้การเปลี่ยนแปลงโค้ด" ใช้ร่วมกับฟีเจอร์ "แก้ไขแบบเรียลไทม์" ไม่ได้ และต้องรีสตาร์ทแอปที่ทำงานอยู่

• ปัจจุบันการแก้ไขแบบเรียลไทม์ยังไม่รองรับโปรเจ็กต์ Android Automotive

คำถามที่พบบ่อยเกี่ยวกับการแก้ไขแบบเรียลไทม์

• สถานะปัจจุบันของ Live Edit เป็นอย่างไร

  การแก้ไขแบบเรียลไทม์พร้อมใช้งานใน Android Studio Giraffe หากต้องการเปิดใช้ ให้ไปที่ไฟล์ > การตั้งค่า > เอดิเตอร์ > การแก้ไขแบบเรียลไทม์ (Android Studio > การตั้งค่า > เอดิเตอร์ > การแก้ไขแบบเรียลไทม์ใน macOS)

• ฉันควรใช้การแก้ไขแบบเรียลไทม์เมื่อใด

  ใช้ Live Edit เมื่อต้องการดูผลลัพธ์ของการอัปเดตองค์ประกอบ UX (เช่น การอัปเดตตัวแก้ไขและภาพเคลื่อนไหว) ที่มีต่อประสบการณ์การใช้งานแอปโดยรวมอย่างรวดเร็ว

• ฉันควรหลีกเลี่ยงการใช้การแก้ไขแบบสดเมื่อใด

  การแก้ไขแบบเรียลไทม์จะมุ่งเน้นไปที่การเปลี่ยนแปลงโค้ดที่เกี่ยวข้องกับ UI และ UX แต่ไม่รองรับการเปลี่ยนแปลงต่างๆ เช่น การอัปเดตซิกเนเจอร์ของเมธอด การเพิ่มเมธอดใหม่ หรือการเปลี่ยนแปลงลำดับชั้นของคลาส ดูข้อมูลเพิ่มเติมได้ที่ข้อจำกัดของ Live Edit

• ฉันควรใช้ตัวอย่าง Compose เมื่อใด

  ใช้ตัวอย่างการเขียนเมื่อคุณกำลังพัฒนา Composable แต่ละรายการ ฟีเจอร์แสดงตัวอย่างจะแสดงภาพองค์ประกอบ Compose และรีเฟรชโดยอัตโนมัติเพื่อแสดงผลลัพธ์ของการเปลี่ยนแปลงโค้ด นอกจากนี้ เวอร์ชันตัวอย่างยังรองรับการดูองค์ประกอบ UI ภายใต้การกำหนดค่าและสถานะต่างๆ เช่น ธีมมืด ภาษา และขนาดแบบอักษร

การพัฒนาโค้ดแบบวนซ้ำด้วย Compose

Live Edit และ Hot Reload สำหรับ Compose Multiplatform เป็นฟีเจอร์ที่ช่วยประหยัดเวลาและเพิ่มประสิทธิภาพการทำงานเมื่อคุณพัฒนาด้วย Compose อย่างไรก็ตาม ทั้ง 2 อย่างนี้ตอบสนองความต้องการในการพัฒนาที่แตกต่างกัน ดังนี้

• การแก้ไขแบบเรียลไทม์รองรับการพัฒนาซ้ำด้วย Jetpack Compose สำหรับแอปพลิเคชัน Android ซึ่งช่วยให้คุณอัปเดต Composable ในโปรแกรมจำลองและอุปกรณ์จริงได้แบบเรียลไทม์ ฟังก์ชันนี้ช่วยลดการสลับบริบทระหว่างการเขียนและการสร้างแอป ทำให้คุณมุ่งเน้นที่การเขียนโค้ดได้นานขึ้นโดยไม่ถูกรบกวน

• Compose Hot Reload ตอบสนองความต้องการเดียวกัน แต่รองรับแอปพลิเคชันเดสก์ท็อปที่สร้างด้วย Compose Multiplatform ซึ่งช่วยให้คุณทำการเปลี่ยนแปลงโค้ด UI ในแอปพลิเคชัน Compose Multiplatform และดูผลลัพธ์แบบเรียลไทม์ได้โดยการโหลดโค้ดซ้ำอย่างชาญฉลาดเมื่อใดก็ตามที่มีการเปลี่ยนแปลง

แม้ว่าฟีเจอร์ทั้ง 2 อย่างนี้จะใช้เทคโนโลยีหลายอย่างร่วมกันภายในเครื่องมือ Compose และรองรับ Use Case ที่คล้ายกันหลายอย่าง แต่ก็มีความสามารถไม่เหมือนกันเนื่องจากใช้กับการพัฒนา Compose ประเภทต่างๆ

หากกำลังพัฒนาแอป Android คุณควรใช้ Live Edit เพื่อเร่งกระบวนการพัฒนา หากกำลังพัฒนาแอปพลิเคชันบนเดสก์ท็อปโดยใช้ Compose Multiplatform คุณควรใช้ Compose Hot Reload

การแก้ไขลิเทอรัลแบบเรียลไทม์ (เลิกใช้งานแล้ว)

Android Studio สามารถอัปเดตลิเทอรัลค่าคงที่บางรายการที่ใช้ใน Composable ภายในตัวอย่าง โปรแกรมจำลอง และอุปกรณ์จริงได้แบบเรียลไทม์ ตัวอย่างประเภทที่รองรับมีดังนี้

• Int
• String
• Color
• Dp
• Boolean

คุณสามารถดูลิเทอรัลคงที่ซึ่งทริกเกอร์การอัปเดตแบบเรียลไทม์โดยไม่ต้องมีขั้นตอนการคอมไพล์ได้โดยเปิดใช้การตกแต่งลิเทอรัลผ่านตัวบ่งชี้ UI ของการแก้ไขลิเทอรัลแบบเรียลไทม์ ดังนี้

ใช้การเปลี่ยนแปลง

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

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