เปลี่ยนหน้าจอสมาร์ตโฟนที่ว่างเปล่าให้กลายเป็นแอปพลิเคชัน
UI & Layout (แอปพลิเคชันเครื่องคิดเลข)
เมื่อเราสร้างโปรเจกต์ใหม่ใน MIT App Inventor สำเร็จ หน้าต่างแรกที่เราจะได้เจอคือโหมด Designer (การออกแบบ) ครับ โหมดนี้เปรียบเสมือนเวทีที่เราจะนำปุ่มต่างๆ มาจัดเรียงให้เป็นหน้าตาของแอปพลิเคชันตามที่เราจินตนาการไว้ครับ!
ก่อนจะเริ่มลากปุ่ม เราต้องรู้จักเครื่องมือรอบตัวเราให้ครบก่อนครับ หน้าจอ Designer แบ่งออกเป็น 4 ส่วนหลักๆ ได้แก่:
อยู่ซ้ายสุด เป็นที่เก็บชิ้นส่วนทั้งหมดที่เราใช้สร้างแอป เช่น ปุ่มกด (Button), กล่องข้อความ (TextBox) หรือรูปภาพ
อยู่ตรงกลาง คือหน้าจอสมาร์ตโฟนจำลอง เป็นพื้นที่ว่างๆ ที่เราจะใช้ลากเครื่องมือจาก Palette มาวาง
ถัดมาทางขวา จะแสดงรายชื่อชิ้นส่วนที่เราลากมาวางไว้บนหน้าจอทั้งหมด ช่วยให้เราไม่สับสนเวลาชิ้นส่วนเยอะๆ
อยู่ขวาสุด ใช้ปรับแต่งชิ้นส่วนที่เราคลิกเลือก เช่น เปลี่ยนสีปุ่ม เปลี่ยนข้อความ หรือปรับขนาดตัวอักษร
ใน MIT App Inventor เมื่อเราลากปุ่มมาวางบนหน้าจอ ชิ้นส่วนต่างๆ จะถูกบังคับให้เรียงต่อกันจากบนลงล่าง (แนวตั้ง) เสมอ! แล้วถ้าเราอยากสร้างปุ่มเครื่องคิดเลขที่ต้องมีปุ่มบวก ลบ คูณ หาร วาง "เรียงติดกันในแนวนอน" จะทำอย่างไร?
💡 คำตอบคือ ต้องใช้เครื่องมือจัดการ Layout ครับ!
มาจัดโครงสร้างหน้าจอแอปพลิเคชันเครื่องคิดเลขอย่างง่ายด้วยชิ้นส่วน (Component) พื้นฐานกันครับ!
📝 ขั้นตอนการออกแบบหน้าจอ (UI Design Steps):
Text ให้เป็นเครื่องหมาย +, -, *, / ตามลำดับ (สามารถปรับขนาดฟอนต์ให้ใหญ่ขึ้นได้ที่ช่อง FontSize)ทดสอบความเข้าใจเรื่องส่วนประกอบหน้าจอและการจัดวางเลย์เอาต์
ข้อที่ 1: ในหน้าจอการทำงานของ MIT App Inventor เครื่องมือที่ใช้สำหรับ "หยิบหรือลาก" ปุ่มกด (Button) และช่องข้อความ (TextBox) ออกมาใช้งาน มีชื่อเรียกว่าอะไร?
ข้อที่ 2: หากนักเรียนนำปุ่ม (Button) มาวางบนหน้าจอ แล้วต้องการ "เปลี่ยนข้อความบนปุ่มจากคำว่า Text for Button1 ให้กลายเป็นเครื่องหมายบวก (+)" นักเรียนต้องไปแก้ไขที่ส่วนใด?
ข้อที่ 3: โดยปกติแล้ว เมื่อเราลากชิ้นส่วนหลายๆ ชิ้นมาวางบนหน้าจอจำลอง (Viewer) ของ MIT App Inventor ชิ้นส่วนเหล่านั้นจะถูกจัดเรียงในลักษณะใดโดยอัตโนมัติ?
ข้อที่ 4: จากปัญหาในข้อ 3 หากนักเรียนต้องการให้ปุ่ม + และปุ่ม - "วางเรียงต่อกันในแนวนอน (ซ้ายไปขวา)" นักเรียนจะต้องใช้งานเครื่องมือใดจากหมวด Layout เข้ามาช่วย?
ข้อที่ 5: ในการสร้างหน้าจอแอปพลิเคชันเครื่องคิดเลข ชิ้นส่วน (Component) ใดมีความเหมาะสมที่สุดในการใช้เป็น "พื้นที่แสดงผลลัพธ์การคำนวณ" และ "ให้ผู้ใช้พิมพ์ตัวเลข"?
หากนักเรียนหรือคุณครูพบจุดที่ควรแก้ไขในบทเรียน/แบบทดสอบนี้ หรือมีข้อเสนอแนะเพิ่มเติม สามารถแจ้งครูพิสิฐเพื่อนำไปปรับปรุงเนื้อหาให้สมบูรณ์ยิ่งขึ้นได้เลยครับ
(ขอบคุณที่ร่วมเป็นส่วนหนึ่งในการพัฒนาการเรียนรู้ไปด้วยกันครับ)
SmartyQuizKids | แพลตฟอร์มการเรียนรู้แห่งอนาคต เนื้อหาบนเว็บไซต์นี้จัดทำขึ้นเพื่อการศึกษาโดยไม่แสวงหาผลกำไร อ้างอิงโครงสร้างเนื้อหาจากหลักสูตรแกนกลางฯ (สสวท.) โดยนำมาสรุปและเรียบเรียงใหม่เพื่อความเข้าใจที่ง่ายขึ้น ภาพประกอบสร้างสรรค์โดยเทคโนโลยี AI ที่ได้รับสิทธิ์การใช้งานอย่างถูกต้อง หากเจ้าของลิขสิทธิ์ท่านใดพบข้อผิดพลาดประการใด สามารถแจ้งผู้ดูแลระบบเพื่อดำเนินการแก้ไขได้ตลอดเวลา
© 2023 Smartyquizkids.com
All Rights Reserved.
