สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 6: คลังสมบัติเก็บความจำ (TinyDB)

By Admin
121
15 ส.ค. 2569

สร้างแอปสมุดจดการบ้าน (My Homework Tracker) ด้วย MIT App Inventor - ภารกิจที่ 6: คลังสมบัติเก็บความจำ (TinyDB)

บทเรียนการสร้างแอปพลิเคชันเบื้องต้นสำหรับนักเรียนชั้น ม.2 ในภารกิจที่ 6 นักเรียนจะได้เรียนรู้การทำงานของฐานข้อมูล (Database) ผ่านเครื่องมือที่ชื่อว่า TinyDB เพื่อบันทึกข้อมูลการบ้านลงในหน่วยความจำของสมาร์ทโฟนแบบถาวร ทำให้ข้อมูลการบ้านไม่สูญหายแม้จะกดออกจากแอปพลิเคชันไปแล้วก็ตาม

ภารกิจที่ 6: คลังสมบัติเก็บความจำ (TinyDB)

🎯 ภารกิจ: เขียนโปรแกรมให้แอปพลิเคชันจดจำการบ้านของเราไว้แบบถาวร ปิดแอปแล้วเปิดใหม่ข้อมูลก็ยังอยู่!

💡 แนวคิด: เราจะใช้ฐานข้อมูลขนาดจิ๋วที่เรียกว่า TinyDB เปรียบเสมือนตู้เซฟส่วนตัวในมือถือ ที่คอยเก็บรักษาสมุดการบ้าน (List) ของเราเอาไว้

1. นำตู้เซฟมาใส่ในแอป (หน้า Designer)

สลับมาที่หน้า Designer (มุมขวาบน):

1. ไปที่เมนูด้านซ้าย เลื่อนหาหมวด Storage (รูปแผ่นดิสก์)
2. ลากเครื่องมือที่ชื่อว่า TinyDB มาปล่อยลงบนหน้าจอมือถือจำลอง
3. สังเกต: TinyDB จะไม่โชว์บนหน้าจอ (Non-visible component) แต่จะไปแอบอยู่ด้านล่างของหน้าจอแทน เพราะมันคือระบบหลังบ้านนั่นเอง!

2. สั่งให้บันทึกลงตู้เซฟ (หน้า Blocks)

สลับมาที่หน้า Blocks: เราจะอัปเดตโค้ดปุ่มบันทึก ให้เซฟข้อมูลลง TinyDB ด้วย

1. คลิกที่ TinyDB1 (เมนูด้านซ้ายล่างสุด)
2. ลากบล็อกสีม่วง call TinyDB1.StoreValue มาต่อไว้ ข้างใน บล็อกปุ่มกด (when btn_Save.Click) ก่อนถึงบล็อกล้างข้อความ
3. ช่อง tag (ตั้งรหัสผ่านตู้เซฟ): ไปที่หมวด Text (สีชมพู) ลากบล็อกข้อความว่าง " " มาต่อ แล้วพิมพ์คำว่า Homework
4. ช่อง valueToStore (ของที่จะเก็บ): เอาเมาส์ชี้ที่ HomeworkList แล้วลาก get global HomeworkList มาต่อ

3. สั่งให้ดึงข้อมูลกลับมาตอนเปิดแอป (Screen Initialize)

เมื่อเปิดแอปพลิเคชันขึ้นมาใหม่ ต้องไปงัดตู้เซฟเอาของเดิมมาโชว์:

1. คลิกที่ Screen1 (เมนูซ้ายมือ) ลากบล็อกสีเหลือง when Screen1.Initialize do ออกมาวางในพื้นที่ว่าง
2. เอาเมาส์ชี้ที่บล็อกสีส้ม `initialize global HomeworkList...` แล้วลาก set global HomeworkList to มาใส่ในกรอบสีเหลือง
3. คลิก TinyDB1 ลากบล็อกสีม่วง call TinyDB1.GetValue มาต่อด้านหลัง
4. ช่อง tag: ก๊อปปี้บล็อกข้อความสีชมพูคำว่า "Homework" (รหัสผ่านตู้เซฟต้องพิมพ์ให้ตรงกันเป๊ะ!) มาต่อ

🚨 จุดระวัง! (ช่อง valueIfTagNotThere):
ช่องนี้คือแผนสำรองสำหรับตอนเปิดแอปครั้งแรก "ห้ามใช้บล็อกข้อความสีชมพูเด็ดขาด" ให้ไปที่หมวด Lists (สีฟ้า) แล้วลากบล็อก create empty list มาต่อแทนครับ เพื่อให้แอปสร้างสมุดหน้าเปล่าขึ้นมารอรับข้อมูล!

5. อัปเดตหน้าจอให้เห็นข้อมูลทันที: ให้คลิกขวาที่บล็อกสีเขียวเข้ม set lvw_Homework.Elements to... เลือก Duplicate (ทำซ้ำ) แล้วนำบล็อกที่ได้มาต่อเป็นลำดับสุดท้าย ให้อยู่ข้างใต้บล็อกสีม่วง TinyDB

🎉 ทดสอบความเจ๋ง!: ลองพิมพ์การบ้านบนมือถือ ปิดแอปทิ้ง แล้วเปิดใหม่ดูสิ... การบ้านยังอยู่ครบถ้วน!

4. 🕵️‍♂️ คลินิกแก้บั๊ก: ปริศนาการบ้านสลับร่าง! (Namespace)

นักเรียน ลองสังเกตดูไหมครับ? ถ้าเราเอาแท็บเล็ตเครื่องที่เราเพิ่งทดสอบเสร็จ ไปให้เพื่อนสแกนคิวอาร์โค้ดทดสอบแอปของเพื่อนบ้าง... สิ่งที่เกิดขึ้นคือ "การบ้านของเรา ไปโผล่ในหน้าจอของเพื่อน!"

🤔 ทำไมถึงเป็นแบบนั้น?
เพราะแอปจำลอง (AI Companion) ในแท็บเล็ต เปรียบเสมือนบ้าน 1 หลัง เมื่อเราลาก TinyDB มาใส่ ระบบจะสร้างตู้เซฟชื่อ TinyDB1 ให้ทุกคนเหมือนกันเป๊ะ! พอเพื่อนมาใช้เครื่องต่อ โค้ดก็สั่งให้ไปงัดตู้เซฟใบเดิม ข้อมูลเลยสลับกันครับ

🛠️ วิธีแก้ปัญหา (สร้างตู้เซฟส่วนตัว):
1. กลับไปที่หน้า Designer แล้วคลิกที่ TinyDB1
2. มองไปที่ช่อง Properties ด้านขวาสุด หาคำว่า Namespace (แปลว่า ชื่อพื้นที่เก็บข้อมูล)
3. ลบคำว่า TinyDB1 ทิ้ง แล้วพิมพ์ "ชื่อเล่นภาษาอังกฤษของนักเรียน" ลงไปแทน (เช่น MarioDB, NannoDB)
4. ลองเชื่อมต่อมือถือใหม่อีกครั้ง! คราวนี้ระบบจะสร้างตู้เซฟใบใหม่ที่เป็นชื่อของเราคนเดียว ข้อมูลไม่ตีกับเพื่อนแน่นอนครับ!

แชร์ :

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