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

By Admin
191
14 ส.ค. 2569

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

บทเรียนการสร้างแอปพลิเคชันเบื้องต้นสำหรับนักเรียนชั้น ม.2 ในภารกิจที่ 4 นักเรียนจะได้เรียนรู้กระบวนการทำงานหลักของโปรแกรม (Input -> Process -> Output) โดยการเขียนบล็อกคำสั่งดักจับเหตุการณ์การกดปุ่ม (Event Handler) เพื่อนำข้อความจากผู้ใช้งานไปบันทึกลงในตัวแปร List และสั่งให้ระบบแสดงผลข้อมูลทั้งหมดออกมาบนหน้าจอผ่าน ListView อย่างถูกต้อง

ภารกิจที่ 4: เสกข้อความลงหน้าจอ (Input & Output)

🎯 ภารกิจ: เขียนโค้ดให้แอปนำข้อความที่เราพิมพ์ ไปเก็บลงในหน่วยความจำ และแสดงผลออกมาให้เห็นบนหน้าจอทันที

💡 แนวคิด: การทำงานพื้นฐานของโปรแกรมคือ รับข้อมูล (Input) ➡️ ประมวลผลเก็บลงความจำ (Process) ➡️ แสดงผลออกทางหน้าจอ (Output)

1. ดักจับเหตุการณ์ "เมื่อกดปุ่มบันทึก"

สร้างปุ่มสั่งการทำงาน:

1. ไปที่เมนูซ้ายมือ (ช่อง Blocks) คลิกที่ btn_Save
2. ลากบล็อกสีเหลืองอันบนสุดที่ชื่อว่า when btn_Save.Click do มาวางบนพื้นที่ว่าง
👉 บล็อกนี้คือประตูด่านแรก โค้ดที่อยู่ข้างในจะทำงานก็ต่อเมื่อเราเอานิ้วแตะปุ่ม "บันทึกการบ้าน" เท่านั้น

2. นำข้อความไปจดลงในสมุด (Add items to list)

STEP 2
  1. ไปที่หมวด Lists (สีฟ้า) ลากบล็อก add items to list มาใส่ในบล็อกสีเหลือง (ให้โดนงับไว้)
  2. ช่อง list: เอาเมาส์ไปชี้ตรงคำว่า HomeworkList (ที่บล็อกสีส้มอันเก่า) แล้วลาก get global HomeworkList มาต่อ
  3. ช่อง item: คลิกที่ txt_Input (ซ้ายมือ) เลื่อนหาบล็อกสีเขียวอ่อน txt_Input.Text แล้วลากมาต่อท้าย

3. สั่งให้โชว์รายการบนหน้าจอ (Update ListView)

ดึงสมุดความจำมาแผ่ให้ดูบนกระดาน:

1. คลิกที่ lvw_Homework (ซ้ายมือ)
2. ลากบล็อกสีเขียวเข้ม set lvw_Homework.Elements to มาต่อไว้ด้านล่าง (แต่อยู่ในกรอบสีเหลือง)
3. เอาเมาส์ไปชี้คำว่า HomeworkList อีกครั้ง แล้วลาก get global HomeworkList มาต่อที่ด้านหลัง

4. เคลียร์ช่องพิมพ์ให้สะอาด (UX Bonus)

ลบข้อความเก่าทิ้ง เพื่อรอพิมพ์การบ้านข้อต่อไป:

1. คลิกที่ txt_Input ลากบล็อก set txt_Input.Text to มาต่อล่างสุด
2. ไปที่หมวด Text (สีชมพู) ลากบล็อกข้อความว่าง " " (อันบนสุด) มาต่อด้านหลัง

📱 ถึงเวลาทดสอบ! ให้นักเรียนเชื่อมต่อ MIT AI2 Companion แล้วลองพิมพ์การบ้านกดยืนยันดูได้เลยครับ ข้อความจะไปเด้งโชว์ด้านล่างทันที!

แชร์ :

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