สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 5: แปลงโฉมแอปให้สวยปิ๊ง (UI Makeover)

By Admin
175
14 ส.ค. 2569

สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 5: แปลงโฉมแอปให้สวยปิ๊ง (UI Makeover)

บทเรียนการสร้างแอปพลิเคชันสำหรับนักเรียนชั้น ม.2 ในภารกิจที่ 5 นี้จะเป็นการพักจากการเขียนโค้ด เพื่อเปิดโอกาสให้นักเรียนได้ใช้ความคิดสร้างสรรค์ในการออกแบบและตกแต่งหน้าตาแอปพลิเคชัน (UI Customization) โดยจะได้เรียนรู้การใส่ป้ายข้อความ (Label) การปรับแต่งสีกระดานรายการ (ListView) การซ่อนแถบสถานะ (TitleVisible) และการใส่ไอคอน (App Icon) เพื่อสร้างแรงบันดาลใจและความเป็นเจ้าของผลงาน

ภารกิจที่ 5: แปลงโฉมสมุดจดการบ้าน (UI Makeover)

🎯 ภารกิจ: ตกแต่งหน้าจอแอปพลิเคชันให้สวยงาม น่าใช้งาน และสะท้อนสไตล์ความเป็นตัวเอง

💡 แนวคิด: แอปพลิเคชันที่ดีไม่เพียงแต่ต้องทำงานได้จริง (Function) แต่ต้องมีความสวยงามและดึงดูดผู้ใช้งาน (Design / UI)

1. สร้างป้ายชื่อแอปสุดเท่ (Label)

เพิ่มหัวข้อให้แอปดูโดดเด่น:

1. ไปที่เมนูซ้ายมือ (Palette) ลาก Label มาวางบนสุดของหน้าจอ (เหนือช่องพิมพ์ข้อความ)
2. ไปที่ Properties ปรับ Width ให้เป็น Fill parent... เพื่อให้ป้ายชื่อกว้างเต็มจอ
3. ปรับ TextAlignment เป็น center (จัดกึ่งกลาง)
4. เปลี่ยนข้อความตรง Text เป็นชื่อแอปของนักเรียน เช่น "📚 สมุดจดการบ้านของฉัน"
5. เล่นกับสีสัน! เปลี่ยน BackgroundColor, TextColor และ FontSize ได้ตามใจชอบ

2. ลบความมืดมิดของกระดาน (Customize ListView)

เปลี่ยนสีกระดานรายการ:

  1. คลิกที่ lvw_Homework บนหน้าจอมือถือ
  2. ไปที่ Properties เลื่อนหา BackgroundColor แล้วเปลี่ยนจากสีดำเป็นสีสว่างๆ ที่ชอบ
  3. เลื่อนหา TextColor แล้วเปลี่ยนสีตัวอักษรให้ตัดกับสีพื้นหลัง (เช่น พื้นสว่าง ตัวอักษรสีเข้ม)

3. ซ่อนแถบ Screen1 (TitleVisible)

ทำให้แอปดูเป็นมืออาชีพมากขึ้น:

1. ไปที่ช่อง Components (ตรงกลาง) คลิกเลือก Screen1 (อันบนสุด)
2. ไปที่ช่อง Properties ด้านขวาสุด เลื่อนหน้าจอลงมาด้านล่าง
3. หาคำว่า TitleVisible แล้ว เอาเครื่องหมายถูกออก ☑️ ➡️ ⬜
👉 แถบสีเทาๆ ด้านบนสุดจะถูกซ่อนไป (หมายเหตุ: หากตอนทดสอบแอปผ่าน AI Companion แล้วแถบนี้ยังโผล่อยู่ ไม่ต้องตกใจครับ แถบจะหายไปแบบ 100% ตอนเราติดตั้งแอปจริงในคาบสุดท้ายครับ!)

4. เตรียมและตั้งค่ารูปภาพไอคอน (App Icon)

สร้างโลโก้แอปพลิเคชันของเราเอง:

📌 สเปกรูปภาพที่แนะนำ:
- ต้องเป็น รูปสี่เหลี่ยมจัตุรัส (แนะนำขนาด 512x512 พิกเซล)
- เซฟเป็นไฟล์ .png (ดีที่สุด) หรือ .jpg

📌 วิธีตั้งค่าไอคอน:
ขั้นที่ 1: นำรูปลงคลังสื่อ
1. มองไปที่มุมขวาล่างสุดของหน้าจอ จะเห็นกล่องที่ชื่อว่า Media
2. กดปุ่มสีเขียว Upload File... เลือกรูปโลโก้จากเครื่องแล้วกด OK

ขั้นที่ 2: นำรูปไปตั้งเป็นโลโก้แอป
1. มองไปที่เหนือรูปมือถือจำลอง หาคำว่า Screens: Screen1
2. ถัดจากคำนั้น ให้คลิกที่ ไอคอนรูปเฟืองเล็กๆ ⚙️ (Project Properties)
3. ในหน้าต่างที่เด้งขึ้นมา เลือกหมวด General
4. เลื่อนหาคำว่า Icon คลิกที่ช่องว่าง แล้วเลือก "ชื่อไฟล์รูปภาพ" ที่เราเพิ่งอัปโหลดไว้
5. กดปุ่ม CLOSE ปิดหน้าต่างได้เลย ระบบจะบันทึกให้อัตโนมัติ

🚨 ไม่ต้องตกใจถ้ารูปโลโก้ยังไม่ขึ้น!
หลังจากตั้งค่าเสร็จแล้ว นักเรียน จะยังไม่เห็นรูปไอคอนบนหน้าจอเว็บ และตอนที่ทดสอบผ่านแอปจำลอง (AI Companion) ก็จะยังไม่เห็นเช่นกันครับ!

เพราะสิ่งนี้คือ "โลโก้แอปพลิเคชันของจริง" ที่จะไปโชว์อยู่บน หน้าจอโฮมของโทรศัพท์ หลังจากที่เราทำการ Build (สร้างและติดตั้งแอปถาวร) ในคาบสุดท้ายเท่านั้นครับ ถือว่าทำสเต็ปนี้สำเร็จแล้ว ลุยต่อได้เลย! 🎉

แชร์ :

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