เรียกใช้แอปแรกบนโปรแกรมจำลอง
สร้าง เปิดใช้ และดู Hello World บนหน้าจอ
เรียกใช้แอปแรกบนโปรแกรมจำลอง เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
ได้เวลาเห็นผลการทำงาน
คุณเขียน Composable แล้ว ตอนนี้มาลองเรียกใช้กัน อีกไม่กี่นาทีคุณจะได้เห็น Hello World ปรากฏบนโทรศัพท์เสมือนภายใน Android Studio 🚀
setContent เชื่อมต่อส่วนติดต่อผู้ใช้ของคุณ
แอป Compose ทุกแอปเริ่มต้นที่ MainActivity ซึ่ง setContent จะเชื่อมโครงสร้างต้นไม้ของ Composable เข้ากับหน้าจอ นี่คือสะพานเชื่อมระหว่าง Android กับ Compose
setContent {
Greeting("World")
}เลือกเป้าหมายสำหรับเรียกใช้
ในแถบเครื่องมือ ให้เลือกอุปกรณ์ที่จะใช้เรียกใช้แอป ซึ่งอาจเป็นอีมูเลเตอร์หรือโทรศัพท์ที่เสียบอยู่ Android Studio จะแสดงเป้าหมายที่พร้อมใช้งานทั้งหมดในเมนูแบบเลื่อนลง
กดปุ่ม Run สีเขียว
กดลูกศร Run สีเขียว (หรือ Shift+F10) Android Studio จะสร้างแอป ติดตั้งลงในอุปกรณ์ และเปิดใช้งานโดยอัตโนมัติ
Gradle สร้าง APK
เบื้องหลังนั้น Gradle จะคอมไพล์โค้ดของคุณและรวมเป็นแอปที่ติดตั้งได้ การสร้างครั้งแรกจะใช้เวลานาน ส่วนครั้งถัดไปจะเร็วขึ้นมาก
Hello World ปรากฏขึ้น
อีมูเลเตอร์เริ่มทำงาน แอปของคุณติดตั้งแล้ว และ Greeting ปรากฏบนหน้าจอ ข้อความนี้มาจากฟังก์ชัน Composable ของคุณโดยตรง 🎉
ตัวอย่างกับการเรียกใช้จริง
แผง @Preview จะแสดงส่วนติดต่อผู้ใช้อย่างรวดเร็วโดยไม่ต้องติดตั้ง การเรียกใช้บนอุปกรณ์คือการทำงานจริง พร้อมการโต้ตอบและพฤติกรรมจริงอย่างครบถ้วน
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}แก้ไขแล้วเรียกใช้อีกครั้ง
เปลี่ยนข้อความแล้วกด Run อีกครั้ง แอปจะอัปเดต วงจรแก้ไขและเรียกใช้ที่กระชับนี้คือวิธีที่ช่วยให้คุณปรับปรุงหน้าจอจริงได้อย่างรวดเร็ว
ดู Logcat
Logcat ที่ด้านล่างจะแสดงบันทึกจากแอปที่กำลังทำงาน เมื่อเกิดสิ่งผิดปกติ ที่นี่คือจุดแรกที่คุณควรดูเพื่อค้นหาเบาะแส
การสร้างครั้งแรกรู้สึกช้า
ไม่ต้องกังวลหากการเปิดใช้งานครั้งแรกใช้เวลาสักพัก Gradle กำลังดาวน์โหลดและเก็บไลบรารีไว้ในแคช การเรียกใช้ครั้งต่อ ๆ ไปจะใช้แคชนั้นซ้ำและทำงานได้อย่างรวดเร็ว
หยุดและเปิดใช้งานใหม่ได้ทุกเมื่อ
ใช้ปุ่ม Stop สีแดงเพื่อหยุดแอป จากนั้นกด Run อีกครั้งเพื่อเปิดใหม่ คุณจะควบคุมวงจรการสร้างและทดสอบได้อย่างเต็มที่
ตรวจสอบความเข้าใจอย่างรวดเร็ว
มาทบทวนกันว่าอะไรเชื่อม Composable ของคุณเข้ากับหน้าจอ
สรุป: แอปแรกของคุณ
คุณทำได้แล้ว! setContent เชื่อมส่วนติดต่อผู้ใช้ของคุณเข้าด้วยกัน Run สร้างและติดตั้งแอปให้ และ Hello World ก็ปรากฏขึ้น ตอนนี้คุณสามารถแก้ไข เรียกใช้อีกครั้ง และดู Logcat ไปพร้อมกันได้
คำถามที่พบบ่อย
บทเรียน “เรียกใช้แอปแรกบนโปรแกรมจำลอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เรียกใช้แอปแรกบนโปรแกรมจำลอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เรียกใช้แอปแรกบนโปรแกรมจำลอง”
สร้าง เปิดใช้ และดู Hello World บนหน้าจอ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เรียกใช้แอปแรกบนโปรแกรมจำลอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สิ่งที่ Compose มาแทนที่: ลาก่อน XML
- ตั้งค่า Android Studio สำหรับ Compose
- กายวิภาคของฟังก์ชัน @Composable
- เรียกใช้แอปแรกบนโปรแกรมจำลอง