สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 1: ออกแบบโครงสร้างหน้าจอ

By Admin
206
14 ส.ค. 2569

สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 1: ออกแบบโครงสร้างหน้าจอ

บทเรียนการสร้างแอปพลิเคชันเบื้องต้นด้วย MIT App Inventor สำหรับนักเรียนชั้น ม.2 ในภารกิจแรกนี้ นักเรียนจะได้เรียนรู้วิธีการออกแบบหน้าจอผู้ใช้งาน (UI Design) สำหรับแอปพลิเคชันสมุดจดการบ้าน โดยฝึกการจัดวางและตั้งค่าส่วนประกอบพื้นฐาน ได้แก่ ช่องพิมพ์ข้อความ (TextBox), ปุ่มกด (Button) และกระดานแสดงผลรายการ (ListView) เพื่อเตรียมความพร้อมก่อนเข้าสู่การเขียนบล็อกคำสั่ง

ภารกิจที่ 1: สร้างหน้าจอแอปสมุดจดการบ้าน

🎯 ภารกิจ: สร้างโครงสร้างหน้าจอแอป My Homework Tracker ด้วยเครื่องมือพื้นฐาน

💡 แนวคิด: การเตรียมพื้นที่ทำงานและจัดวางส่วนประกอบ (Components) ให้พร้อมสำหรับการเขียนบล็อกคำสั่ง

1. เตรียมพื้นที่ทำงาน (สร้างโปรเจกต์ใหม่)

ขั้นตอนการสร้าง:

1. เข้าเว็บ ai2.appinventor.mit.edu แล้วล็อกอินด้วยบัญชี Google
2. คลิกปุ่ม Start new project
3. ตั้งชื่อโปรเจกต์ว่า MyHomework (ห้ามเว้นวรรค) แล้วกด OK

2. สร้าง "ช่องพิมพ์ข้อความ" (TextBox)

STEP 1
  ลากวาง: ลาก TextBox มาวางบนหน้าจอมือถือจำลอง
  ตั้งชื่อ (Rename): เปลี่ยนชื่อเป็น txt_Input
  Properties: ลบคำในช่อง Hint แล้วพิมพ์ "พิมพ์การบ้านที่นี่..."

3. สร้าง "ปุ่มบันทึก" (Button)

ขั้นตอนการปรับแต่งปุ่ม:

1. ลากวาง: นำ Button มาวางต่อท้ายด้านล่างของช่องพิมพ์ข้อความ
2. ตั้งชื่อ: กดปุ่ม Rename เปลี่ยนชื่อเป็น btn_Save
3. Properties: ไปที่ช่อง Text ให้เปลี่ยนข้อความเป็นคำว่า "บันทึกการบ้าน"

4. สร้าง "กระดานแสดงผล" (ListView)

เตรียมพื้นที่โชว์รายการ:

1. ลากวาง: เลื่อนหา ListView แล้วลากมาวางไว้ล่างสุดของหน้าจอ
2. ตั้งชื่อ: กดปุ่ม Rename เปลี่ยนชื่อเป็น lvw_Homework
3. Properties: ปรับค่า Height และ Width ให้เป็น Fill parent... (ขยายเต็มหน้าจอ)

แชร์ :

เริ่มต้น / สิ้นสุด 💊 แคปซูล	➔	บล็อกเหตุการณ์ / ควบคุม เมื่อคลิก ⛳
รับข้อมูล / แสดงผล ▱ สี่เหลี่ยมด้านขนาน	➔	บล็อกตรวจจับ / รูปลักษณ์ ถาม ... แล้วรอ
ประมวลผล / คำนวณ ▭ สี่เหลี่ยมผืนผ้า	➔	บล็อกตัวแปร / คำนวณ ตั้งค่า [ตัวแปร] เป็น ...