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

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

การแก้ไขสด

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

การแก้ไขสดมี 3 โหมด ได้แก่

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

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

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

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

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

เริ่มต้นใช้งานการแก้ไขสด

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

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

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

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

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

    การเลือกเทมเพลตใน Android Studio
    รูปที่ 1 เทมเพลตที่คุณเลือกได้ สำหรับ Live Edit ให้เลือก Empty Compose Activity
  4. กรอกข้อมูลที่จำเป็นในกล่องโต้ตอบโปรเจ็กต์ใหม่ ได้แก่ ชื่อ ชื่อแพ็กเกจ ตำแหน่งบันทึก SDK ขั้นต่ำ และภาษาการกำหนดค่าบิลด์

    ตัวอย่างการตั้งค่าโปรเจ็กต์จากขั้นตอนที่ 4 ที่ป้อนใน Android Studio
    รูปที่ 2 ตัวอย่างการตั้งค่าโปรเจ็กต์
  5. คลิกเสร็จสิ้น

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

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

    • ใน Windows หรือ Linux ให้ไปที่ไฟล์ > การตั้งค่า > เอดิเตอร์ > การแก้ไขแบบสด
    • ใน macOS ให้ไปที่ Android Studio > การตั้งค่า > เอดิเตอร์ > การแก้ไขแบบสด
  2. เลือกตัวเลือกแก้ไขสดและโหมดที่ต้องการเรียกใช้จากการตั้งค่า

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

    UI ช่องทำเครื่องหมายการแก้ไขสดในการตั้งค่า Android Studio
    รูปที่ 3 แก้ไขการตั้งค่าสด
  3. ในโปรแกรมแก้ไข ให้เปิดไฟล์ MainActivity ซึ่งเป็นจุดแรกเข้าของ แอป

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

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

    UI เครื่องหมายถูกสีเขียวของการแก้ไขสด

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

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

เช่น แก้ไข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)
    )
}

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

การเปลี่ยนแปลงวิธีการทักทายที่ใช้ในอุปกรณ์
รูปที่ 4 อุปกรณ์ทดสอบที่แสดงการเปลี่ยนแปลงการแก้ไขสดในเมธอด Greeting

แก้ปัญหาการแก้ไขสด

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

ไอคอน "แก้ไขสดไม่อัปเดต"
รูปที่ 5 สัญญาณบอกสถานะการแก้ไขสด

ข้อจำกัดของการแก้ไขสด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ขณะนี้การแก้ไขสดไม่รองรับโปรเจ็กต์ Android Automotive

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

  • ปัจจุบันการแก้ไขสดมีสถานะอย่างไร

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

  • ฉันควรใช้การแก้ไขสดเมื่อใด

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Int
  • String
  • Color
  • Dp
  • Boolean

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

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

การเปิดใช้การแก้ไขข้อความโดยตรง

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

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

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

ผู้ใช้คลิกปุ่ม "ใช้การเปลี่ยนแปลง"