บทเรียนที่ 1: ก้าวแรกสู่โลกนักพัฒนาแอปด้วย MIT App Inventor

By Admin
91
11 ส.ค. 2569

บทเรียนที่ 1: ก้าวแรกสู่โลกนักพัฒนาแอปด้วย MIT App Inventor

บทเรียนเริ่มต้นสำหรับการพัฒนาแอปพลิเคชันด้วย MIT App Inventor (Micro-learning) แนะนำขั้นตอนการเตรียมความพร้อมก่อนสร้างแอปจริง เรียนรู้วิธีการล็อกอินผ่าน Google Account การตั้งค่าเมนูเป็นภาษาไทย และวิธีเชื่อมต่อหน้าจอคอมพิวเตอร์กับแท็บเล็ตด้วยแอปพลิเคชัน AI Companion เพื่อดูผลลัพธ์แบบเรียลไทม์

บทเรียน: ก้าวแรกสู่โลกนักพัฒนาแอป (Mission 1)

🚀 บทเรียนที่ 1: ก้าวแรกสู่การเป็นนักพัฒนาแอป

เตรียมพื้นที่ทำงาน (Workspace) ให้พร้อม ก่อนลุยโปรเจกต์จริง!

1. บันได 3 ขั้น สู่การเป็น Junior Developer

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

1. ล็อกอินเข้าสู่ระบบ
(Authentication)
✅ ยืนยันตัวตนด้วย Google Account

2. ลุยเมนูภาษาอังกฤษ!
(English Interface)
✅ ฝึกคำศัพท์โปรแกรมเมอร์ของแท้

3. ซิงก์อุปกรณ์ทดสอบ
(Device Syncing)
⭐ เชื่อมต่อแท็บเล็ตด้วย AI Companion

2. อุปกรณ์คู่กายนักพัฒนา (Developer Tools)

ในการทำงานด้วย MIT App Inventor เราจะต้องใช้งานอุปกรณ์ 2 ชิ้นร่วมกันแบบ Real-time คือ:

💻

1. คอมพิวเตอร์ (พื้นที่ออกแบบ & เขียนโค้ด)

ใช้สำหรับลากวางส่วนประกอบต่างๆ และต่อบล็อกคำสั่งตรรกะ (Logic) ซึ่งเป็นสมองของแอปพลิเคชัน

📱

2. แท็บเล็ต (อุปกรณ์ทดสอบผลลัพธ์)

ใช้แอป MIT AI2 Companion สแกน QR Code เพื่อทดสอบการทำงานของแอปที่เราเขียนขึ้นมาจริงๆ

🎯 3. ภารกิจส่งงาน: Mission 1

ให้นักเรียนทำตามขั้นตอนเพื่อเปิดระบบใช้งาน และแคปภาพหน้าจอส่งครูครับ:

📌 เป้าหมายภารกิจ: "สร้างโปรเจกต์ใหม่และซิงก์อุปกรณ์ให้สำเร็จ!"

เมื่อนักเรียนทำตามขั้นตอนครบถ้วน หน้าจอแท็บเล็ตของนักเรียนจะต้องว่างเปล่า เป็นสีขาวเหมือนกับหน้าจอจำลอง (Screen1) ในคอมพิวเตอร์แบบเป๊ะๆ

🛠 สเต็ปการลงมือทำ (Do & Check):

เปิด Google Chrome เข้าไปที่เว็บไซต์ ai2.appinventor.mit.edu แล้ว Login ด้วยอีเมลของนักเรียน
หากมีหน้าต่างต้อนรับโผล่ขึ้นมา ให้กดยอมรับข้อตกลง หรือกดปุ่ม Continue เพื่อเข้าสู่หน้าจอหลัก
คลิกปุ่ม Start new project (เริ่มโครงการใหม่) และตั้งชื่อว่า MyFirstApp (ข้อควรระวัง: ห้ามเว้นวรรคเด็ดขาด)
รอสักครู่ ระบบจะพานักเรียนเข้าสู่หน้าออกแบบ (Designer)
มองที่แถบเมนูด้านบน เลือก Connect > AI Companion จะมี QR Code ปรากฏขึ้นมาบนจอคอมพิวเตอร์
หยิบแท็บเล็ตเปิดแอปรูปผึ้ง (MIT AI2 Companion) กดปุ่มสีฟ้า (scan QR code) แล้วสแกนที่หน้าจอคอม
แคปหน้าจอ (Screenshot) คอมพิวเตอร์ของนักเรียน ส่งใน Google Classroom ได้เลย! 🎉

แชร์ :

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