[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 134

การพัฒนา Application “Enjoy Melody”

ขอสังเกต : เพื่อฝกการใชเคร่ืองมือ ดานมัลติมีเดีย

1. Click เลือก New เพื่อเร่ิม Project ใหม

2. หนาตาง New App Inventor for Android Project จะปรากฏขึ้น ตั้งชื่อ Project “Enjoy

Melody” (ไมเวนวรรค)

3. Click เพื่อ Active Screen 1 แลวทําการตั้งคาตาง ๆ เชน BackGroundImage โดยการ

Upload ภาพขึ้นไปบน Server / ตั้งคาการเปดปด Application โดยการกําหนด

CloseScreenAnimation / เปลีย่น Icon (upload file ภาพ นามสกุล .png) ตั้งคา

ScreenOrientation (เปนแนวนอน) และ เปลี่ยนชื่อ Title ของ Application

4. Click Upload File ที่ใชในการสราง Application ทั้งหมด (Up ไดทีละ File)

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 135

5. Click ลาก Horizontal Arrangement มาวางบนหนาจอ Screen1

6. Click ลาก Label มาวางภายในกรอบ Horizontal Arrangement

7. Click ลาก TableArrangement มาวางใตกรอบ Horizontal Arrangement ดานบน กําหนด

ขนาดตารางเปน Columns 8 และ Row ขนาด 1 ปรับ ขนาดตารางโดยกําหนด Width เปน Fill

Parent และ Height เปน 180 Pixels

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 136

8. Click ลาก Button วางลงไปในชอง TableArrangement จนครบ 8 Button

9. Click เพื่อ Active แตละ Button ใน Component ปรับขนาดตามตัวอยาง โดยใลระดับขนาด

จากสงูไปตํ่า (ขนาดมาตรฐาน คือ 55X110 Pixels)

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 137

10. Click เพื่อ Active แตละ Button อีกครั้ง ใหลบขอความในชอง “Text” ในสวนของ

Properties

11. Click เพื่อ Active แตละ Button อีกครั้ง แลวเลือกภาพที่ได Upload ไปตอนตน (ไลเรียง

ตามลําดับ Melody )

เรียงลําดับตัว Melody ของแตละ Button ที่จะนํามาทําเปน Button ดังน้ี

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 138

Button จะถูกเปลี่ยนเปนภาพ ตามลําดับ Melody และ ภาพพื้นหลังทีส่วยงาม

12. Click เพื่อ Active “Lebal1” ที่ลากมาวางในข้ันตอนลําดับที่ 6 และใหกําหนดใสขอความ

“Enjoy Melody” ปรับขนาดของตัวอักษร (Front Size เปน 30)

ปรับขนาดของ กรอบ Horizontal Arrangement ใหเทากับขนาดหนาจอ โดยกําหนดที่

Width และ Height

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 139

13. Click ลาก Sound จาก กลุมของเครื่องมือ Media มาวางบน Screen (จะไมปรากฏใน Screen

แตจะแสดงไวใต Screen)

14. Click เพื่อ Active แตละ Button ใน Components แลวเปลี่ยนช่ือใหสอดคลองกบั ช่ือของ

Melody (C6 – F5) ที่กํากับไวบนภาพของแปน ของ Application

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 140

15. Click ลาก Sound มาวางจนครบ 8

16. Click เพื่อ Active Sound แตละตัวใน Components แลวเปลี่ยนช่ือ ใหสอดคลองกบั ช่ือของ

Melody (C6 – F5) ที่กํากับไวบนภาพของแปน ของ Application เชนเดียวกัน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 141

17. Click เพื่อ Active Sound แตละตัวใน Components แลว เลือก File เสียง (.mp3) ที่ได

Upload ในข้ันตอนแรก ๆ เลอืก File เสียง ใหตรงกับ ช่ือของ “Sound….”

18. Click ที่ Screen 1 เพื่อต้ังคา รายละเอียดสวนการติดตอผูใช (GUI) อีกครัง้ หากยังไมได

ดําเนินการในข้ันตอนที ่5

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 142

19. Click เลือก Open the Blocks Editor เพื่อเปด Blocks Editor เขาไปจัดการทํางานของ

Application

20. Click เลือก My Blocks แลวเลือก Block “ .Click” ของ Button แตละตัว เลือกมาวางยังพื้นที่

วาง ๆ ใน Blocks Editor

21. Click เลือก My Blocks แลว Click เลอืก Block “Sound…” (A5-G5) ใหเลือก Block

“Sound….Play” ของ Sound แตละตัวมาวางบนพื้นที่วางของ Blocks Editor

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 143

22. ตอ Block ตาง ๆ เขาดวยกัน (ดังรูป)

23. Click New Emulator เพื่อเปด Emulator ดูผลลัพธและการทํางานของ Application

24. Click Connect to Device เพื่อเช่ือมตอ Emulator กับ งานที่พัฒนาใน App Inventor

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 8

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 144

ผลลัพธของ Application ที่สรางข้ึน

QR Code ใชสําหรบั Scan เพื่อติดต้ัง Application ลงบนอุปกรณที่มรีะบบ ปฏิบัติการ Android