20204-2112 การพัฒนาโปรแกรมบนอุปกรณ์พกพา

ส่วนเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจุฬาลงกรณราชวทิ ยาลยั

คูม ือประกอบการอบรม

การพฒั นา Moblile Application บนระบบปฎบิ ตั ิการ Android

นายนพดล เพ็ญประชมุ นกั วชิ าการคอมพวิ เตอร

กลุมงานเทคโนโลยกี ารศึกษา
สวนเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ

มหาวิทยาลัยมหาจฬุ าลงกรณราชวิทยาลยั

สารบัญ หนา
สารบัญ 1
แนะนํา การพฒั นา Moblile Application 3
การพฒั นาแอพพลเิ คชน่ั ดวย AppInventor 3
6
ตดิ ต้ัง JAVA JRE 13
ตดิ ตัง้ โปรแกรม App Inventor 18
การสมัคร Google Account 20
ออกแบบและเขียนคําส่ังดว ย AppInventor 25
สวนการออกแบบ(Components) 27
สวนการเขยี นโคด ( Blocks Editor) 30
ตวั อยา งของบล็อกคาํ สง่ั ท่ใี ชแ ทนการเขยี นโคด 31
ขัน้ ตอนการรนั App ผา น Emulator 32
การนาํ ออกโปรเจค (Export Project) 33
การนําเขา โปรเจค (Import Project) 41
เร่ิมตนเขยี นโปรแกรมแรก Hello World 47
การอัพโหลดไฟลมลั ตมิ ีเดยี 50
เขียนคําส่ังควบคุม Application Sound 53
ติดตง้ั แอพพลเิ คช่ันลงบนอปุ กรณแอนดรอยด
แหลงอา งอิง

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพวิ เตอร์

1

แนะนํา การพฒั นา Moblile Application บนระบบปฎิบัตกิ าร Android

แอนดรอยด (Android) เปน ระบบปฏบิ ตั กิ ารที่มพี ้นื ฐานอยบู นลินุกซ ในอดตี ถูกออกแบบมาสําหรับ
อุปกรณท่ีใชจอสัมผัส เชน สมารต โฟน และแท็บเล็ตคอมพิวเตอร ปจจุบนั ไดแพรไ ปยังอปุ กรณหลายชนิดเพราะ
เปน มาตรฐานเปด เชน Nikon S800C กลอ งดิจติ อลระบบแอนดรอยด หมอ หงุ ขา ว Panasonic ระบบแอนดรอยด
และ Smart TV ระบบแอนดรอยด รวมถงึ กลองเสยี บตอ TV ทาํ ใหสามารถใชร ะบบแอนดรอยดไ ดดวย Android
Wear นาฬิกาขอ มือระบบแอนดรอด เปน ตน ถกู คดิ คน และพฒั นาโดยบรษิ ทั แอนดรอยด (Android, Inc.) ซ่งึ ตอมา
กเู กลิ ไดท าํ การซอ้ื ตอ บริษทั ในป พ.ศ. 2548 แอนดรอยดถ ูกเปด ตัวเม่ือ ป พ.ศ. 2550 พรอ มกบั การกอตง้ั โอเพน
แฮนดเซตอัลไลแอนซ ซง่ึ เปนกลมุ ของบรษิ ทั ผลิตฮารด แวร, ซอฟตแวร และการสอื่ สารคมนาคม ทีร่ วมมอื กนั
สรา งมาตรฐานเปด สําหรับอปุ กรณพกพาโดยสมารตโฟนทีใ่ ชระบบปฏิบตั ิการแอนดรอยดเ ครอ่ื งแรกของโลก
คอื เอชทีซี ดรีม วางจําหนายเมือ่ ป พ.ศ. 2551

แอนดรอยดเ ปนระบบปฏบิ ตั ิการโอเพนซอรซ และกูเกลิ ไดเผยแพรภ ายใตล ขิ สทิ ธอิ์ าปาเช[6] ซง่ึ โอเพน
ซอรซจะอนญุ าตใหผ ูผ ลติ ปรับแตง และวางจําหนายได (ภายใตเ งอื่ นไขที่กเู กลิ กาํ หนด) รวมไปถึงนักพฒั นาและ
ผใู หบริการเครอื ขา ยดว ย อกี ทั้งแอนดรอยดย ังเปน ระบบปฏิบตั กิ ารทร่ี วมนักพัฒนาทีเ่ ขยี นโปรแกรมประยุกต
มากมาย ภายใตภ าษาจาวา ในเดือนตลุ าคม พ.ศ. 2555 มีโปรแกรมมากกวา 700,000 โปรแกรมสําหรบั แอน
ดรอยด และยอดดาวนโ หลดจากกูเกลิ เพลย มากถึง 2.5 หม่นื ลา นครง้ั จากการสํารวจในชว งเดือน เมษายน ถึง
พฤษภาคม ในป พ.ศ. 2556 พบวาแอนดรอยดเ ปน ระบบปฏบิ ัตกิ ารทีน่ ักพฒั นาเลอื กท่ีจะพฒั นาโปรแกรมมาก
ท่สี ุด ถึง 71%

ปจ จยั เหลา น้ที าํ ใหแอนดรอยดเปน ระบบปฏิบัตกิ ารท่ใี ชกันอยางแพรหลายในปจ จุบันนาํ หนาซิมเบยี น
ในไตรมาสท่ี 4 ของป พ.ศ. 2553 และยังเปนทางเลือกของผูผลติ ท่ีจะใชซอฟตแวร ที่มีราคาตา่ํ , ตอบสนองความ
ตอ งการของผูใชไดดี สาํ หรบั อปุ กรณใ นสมยั ใหม แมวาแอนดรอยดจ ะดเู หมือนไดรับการพฒั นาเพ่อื ใชก บั
สมารต โฟนและแท็บเล็ต แตมนั ยงั สามารถใชไ ดก ับโทรทัศน, เครือ่ งเลนวิดีโอเกม, กลอ งดจิ ทิ ัล และอุปกรณ
อเิ ล็กทรอนกิ สอน่ื ๆ แอนดรอยดเปน ระบบเปด ทาํ ใหนักพฒั นาสามารถพัฒนาคณุ สมบตั ใิ หมๆ ไดตลอดเวลา

สว นแบง ทางการตลาดของสมารตโฟนแอนดรอยด นาํ โดยซัมซุง มากถงึ 64% ในเดือนมนี าคม พ.ศ.
2556 เดือนกรกฎาคม พ.ศ. 2556 มีอุปกรณท่ีใชร ะบบปฏิบัติการแอนดรอยดมากถึง 11,868 รุน จาก 8 เวอรชัน
ของระบบปฏบิ ตั กิ ารแอนดรอยด ความสาํ เรจ็ ของระบบปฏบิ ตั ิการทาํ ใหเ กิดคดีดานการละเมิดสทิ ธบิ ัตรท่เี รยี ก
กันวา "สงครามสมารต โฟน" (smartphone wars) ระหวา งบริษัทผูผ ลติ ในเดอื นพฤษภาคม พ.ศ. 2556 โปรแกรม 4.8
หม่นื ลานโปรแกรมไดรบั การติดต้ังบนอุปกรณจ ากกเู กลิ เพลย และในวันที่ 3 กนั ยายน พ.ศ. 2556 มีอปุ กรณทใ่ี ช
ระบบปฏิบตั กิ ารแอนดรอยด 1 พนั ลานเครอ่ื ง ไดถ ูกเปดใชง าน

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

2

รูปภาพที่ 1 หนา จอหลักของแอนดรอยด 5.0 โลลปิ อ ป

Google รวมมือกับ MIT พฒั นาโปรแกรม App Inventor ใชส าํ หรบั พัฒนาโปรแกรมบนมอื ถอื Android โดย
โปรแกรมนจ้ี ะใหบ รกิ ารผานอินเตอรเนต็ (App Inventor server) โดยขอมูลของโปรเจกตา งๆ จากผูใช จะถกู เกบ็ ไว
ท่เี ครอื่ งแมข ายท่ใี หบริการ (Cloud computing)

Google เปด ใหบรกิ าร App Inventor ตง้ั แต 15 ธ.ค. 2553 กอนทห่ี ยุดใหบ รกิ าร 31 ธ.ค. 2554
แลว สงให MIT ทําตอ โดยเนนทางดา นการศึกษา ในนามของ MIT App Inventor และเปดใหท ดลองใชเ ม่อื 4
มี.ค. 2555

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพวิ เตอร์

3

รูปภาพท่ี 2 แสดงไดอะแกรมแสดงการทาํ งานของ AppInventor

การพฒั นาแอพพลเิ คชั่นดวย AppInventor
• ติดตงั้ JAVA JRE
• ตดิ ตงั้ โปรแกรม App Inventor
• ออกแบบและเขยี นคาํ สัง่ ดว ย AppInventor
• ตดิ ต้ังแอพพลเิ คชั่นลงบนอปุ กรณแอนดรอยด

ตดิ ต้งั JAVA JRE

เคร่ืองมือตัวแรกท่ีจาํ เปน ตองติดตัง้ ลงบนคอมพิวเตอร คือ Java JRE ซึ่งจะทําหนาที่ในการเปดไฟลที่ได
จากการดาวนโหลดจากเว็บไซด appInventor.mit.edu แนะนาํ ใหใชงาน เวอรช ่ันลา สุดซ่งึ สามารถดาวนโ หลดได
จากเว็บไซด www.java.com ปจ จบุ นั เวอรชั่นลา สดุ อยูท ี่ 7u79

การตดิ ตง้ั โปรแกรมจาวาสามารถทําได 2 วิธดี วยกันคือ
1. ติดต้ังผา นเวบ็ ไซด (web installer)
2. ติดตั้งแบบออฟไลน (offline install )
1) ตดิ ตงั้ ผานเวบ็ ไซด (web installer) จําเปนตองมกี ารเชอื่ มตอ กับเครอื ขายอินเตอรเ นต็ อยูต ลอดจนกวาการตดิ ต้ัง
จะสาํ เร็จ โดยมีขั้นตอนการดาวนโ หลดและติดต้ังดังน้ี

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพวิ เตอร์

4

หลังจากทีเ่ ขาสูเว็บไซดจะปรากฏหนา ตา งหลักของเวบ็ ไซดด ังภาพ ใหเราคลิกเลือกที่ Free Java
Download เพ่ือทําการดาวนโหลดและติดตงั้ Java ลงในเครือ่ งคอมพิวเตอร

รูปภาพที่ 3 แสดง Java ปลัก๊ อนิ

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

5

รปู ภาพที่ 4 แสดงหนา ดาวนโหลด Java ปล๊กั อนิ

2. ติดต้งั แบบออฟไลน (offline install ) ก็คอื การดาวนโหลดไฟลต ดิ ต้ังมาเก็บไวในเคร่ือง
คอมพิวเตอรกอ น และทําการติดต้งั ภายหลัง สามารถดาวนโ หลดไฟลจ าวาสาํ หรบั ใชใ นการติดตง้ั ไดท่ี
http://java.com/en/download/manual.jsp

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

6

รูปภาพท่ี 5 แสดงหนาดาวนโ หลด Java ปลัก๊ อิน ในสว นเลอื กระบบปฎบิ ตั กิ าร

การติดตง้ั App Inventer

เริม่ ตนเขา ไปท่ี http://www.appinventor.mit.edu/ เปนเว็บไซตห ลักในการเขาใชง านโปรแกรม
และดาวนโ หลดโปรแกรมสาํ หรับติดตั้งลงบนคอมพิวเตอร

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพิวเตอร์

7

รปู ภาพท่ี 6 แสดงหนา แรกของเวบ็ ไซต MIT App Inventor

ดาวนโ หลด aiStarter โดนเลอ่ื นเมาสไปท่ี เมนลู ง้ิ ค Resources -> AI Classic (V1) แลว คลิ๊กที่
Setup

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพิวเตอร์

8

คลกิ ที่ ขอที่ 2.Install App Inventor Software

รูปภาะที่ 7 แสดงหนาดาวนโ หลด App Inventor Software

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

9

รปู ภาพท่ี 8 แสดงหนาคลิก Download ตวั ตดิ ตั้ง

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

10

รูปภาพที่ 9 แสดงไฟลโปรแกรม

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

11

คลกิ Next เพื่อเขาสูขน้ั ตอนถดั ไป

รปู ภาพท่ี 10 แสดงหนาติดตงั้ โปรแกรม
คลกิ I Agree เพ่อื ยอมรับขอตกลงในการเขา ใชง านโปรแกรม AppInventor

รปู ภพท่ี 11 แสดงหนาขั้นตอนตดิ ต้งั โปรแกรม

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

12

เลอื กตําแหนงสําหรับตดิ ตงั้ โปรแกรม

รปู ภาพท่ี 12 แสดงหนาขั้นตอนตดิ ต้ังโปรแกรม

คลกิ ที่ปมุ Install เพอ่ื ทําการตดิ ตั้งโปรแกรม

รูปภาพที่ 13 แสดงหนา ขั้นตอนตดิ ต้งั โปรแกรม

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

13

รอใหโ ปรแกรมรนั ไปสกั ระยะหนึ่งแลว จะข้นึ ใหกด Finish เปนการเสรจ็ สนิ้ การติดต้ังโปรแกรม

รูปภาพที่ 14 แสดงหนา ข้ันตอนตดิ ตง้ั โปรแกรม

การสมัคร Google Account

ในการเขา ใชง าน App Inventor นน้ั มคี วามจาํ เปนตองลงชอ่ื ในการเขา ใชงานกอน จึงจะสามารถใช
งานได โดยในทนี่ ีเ้ ราสามารถใชช ื่อบัญชจี ากทาง Google ซ่ึงก็คอื Google Account นั่นเอง และนอกจากนยี้ ัง
สามารถใช Gmail Accounts ในการเขา ใชง านได ซงึ่ ถา ผูใชม บี ญั ชีของ Google อยแู ลว หรือวามี Gmail อยู
แลว ก็สามารถลงชอ่ื เขา ใชง าน AppInventor ไดเลย โดยไมจําเปนตองสมัครบญั ชีผูใชใ หม แตสาํ หรบั ผูท ี่ยังไม
มีบญั ชีผูใชงานของ Google กส็ ามารถสมคั รใหมไดตามขน้ั ตอนตอ ไปน้ี

รูปภาพท่ี 15 แสดงหนา บัญชี google

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

14

ขน้ั ตอนการสมัครเพ่อื ขอใช Google Account เรมิ่ ตน ไปที่ URL https://accounts.google.com/ จะ
ปรากฏหนา จอดังภาพ

รูปภาพที่ 16 แสดงหนาหลักบญั ชี Gooogle หลงั จากเขา สรู ะบบ

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

15

กรอกขอ มลู เพื่อสรา งบญั ชี Google ของคณุ

กรอกข้อมลู ให้ครบ
รูปภาพที่ 17 แสดงหนาสมัครสมาชกิ Gmail

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพวิ เตอร์

16

หลังจากสรา งบัญชผี ใู ชงานเสรจ็ เรยี บรอ ยแลว กจ็ ะไดบ ญั ชที ีส่ ามารถนาํ ไปใชในการ Login เพ่ือเขา ใชงาน
โปรแกรม AppInventor ไดแลว

รปู ภาพที่ 18 แสดงหนาลอ็ คอนิ เขา สูระบบบัญชขี องฉนั

ขนั้ ตอนตอ ไป ติดต้งั App Inventer Emulator โดยไปดาวนโหลดโปรแกรมที่ Url
http://appinventor.mit.edu/explore/ai2/setup-emulator.html

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

17

รปู ภาพท่ี 19 แสดงตวั ติดต้ัง App Inventor Emulator

พอติดตง้ั เสรจ็ จะเห็น Icon aiStarter บนหนา จอ

รูปภาพที่ 20 แสดง icon ของ Emulator

หลงั จากทเี่ ราไดทําการตดิ ต้งั โปรแกรม และตั้งคา การใชงานรวมกนั ระหวางโทรศัพทม ือถอื แอน
ดรอยดรว มกบั คอมพวิ เตอรเ รียบรอ ยแลว ข้นั ตอนตอ ไปเปนขน้ั ตอนในการพฒั นาแอพพลิเคช่นั กอ นอ่ืนเปด
โปรแกรมเว็บบราวเซอรแ ละไปทีเ่ วบ็ ไซด http://www.appinventor.mit.edu/

คลกิ เลอื ก Create apps! ทีอ่ ยบู ริเวณดา นบนขวามอื

รปู ภาพท่ี 21 แสดงหนาแรกเรม่ิ การ Create Apps

หลังจากลงชื่อเขา ใชงานเสรจ็ เรยี บรอ ยแลวจะปรากฏหนาตางดงั ภาพ แสดงวาเราสามารถเขาใชง าน
โปรแกรม App Inventor ไดแ ลว

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

18

รูปภาพที่ 22 แสดงโปรเจคท้ังหมด

ออกแบบและเขยี นคาํ ส่ังดวย AppInventor

สรา งโปรเจค็
ขั้นตอนการสรา งโปรเจ็คใหมสามารถสรางโดยการคลิกที่ Start new project จากนน้ั ต้งั ชอ่ื ไฟล

Project Name ในทีน่ ต้ี ้ังชอ่ื เปน Hello World จากนั้นคลกิ ท่ี OK จะไดโ ปรเจ็คใหม

รปู ภาพท่ี 23 แสดงการ Create new App Inventor project

หลกั จากสรา งโปรเจ็คใหมเ รียบรอ ย โปรแกรม App Inventor จะเขาสหู นา ตางการออกแบบโดยอัตโนมัติ

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

19

รูปภาพท่ี 24 แสดงภาพเครอื่ งมือสําหรบั การทาํ งาน ในการสรางวัตถุ ออกแบบหนา ตา Apps

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

20

สวนการออกแบบ(Components)

User Interface เปน เครือ่ งมือพืน้ ฐานท่ีใชง าน
เปน ประจําประกอบดวย
Button = ปุม กด
CheckBox= เชค็ เลือก
DatePicker = ปอปอพั แสดงวนั ท่ี
Image = เลอื กรปู ภาพ
Label = ใสข อความ
ListPicker = สาํ หรับรายการเลือก
ListPicker = แสดงรายการ
Notifier = ขอความแจง เตือน
PasswordTextBox = รหสั ผา น
Slider = สไลด
Spinner = แสดงเปน วงลอ หมุน
TextBox = กลองขอ ความ
TimePicker = ปมุ ปอปอัพทแ่ี สดงเวลา
WebViewer = แสดงเวบ็ เบาเซอร

รูปภาพท่ี 25 แสดงแทบ็ User Interface แทบ็ การออกแบบ

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพวิ เตอร์

21

Layout ใชจ ัดการเกีย่ วกับการวางตาแหนงของ
เครือ่ งมอื ตา งๆ ซึ่งจะ ชวยใหการจดั การกับ
แอปพลิเคชน่ั รวมถึงชว ยใหก ารเขยี นโปรแกรมทําได
งายข้นึ ดว ย ในหมวดนี้ประกอบดว ย
HorizontalArrangement = การจดั เรียงแนวนอน
TableArrangement = การจัดตาราง
VerticalArrangement = การจัดเรยี งแนวต้ัง

รูปภาพที่ 26 แสดงแท็บ Layout แทบ็ เลเอาต

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

22

Media เปนหมวดเครอ่ื งมือท่ใี ชจัดการกบั มัลติมเี ดยี
ทัง้ ภาพและเสยี ง ประกอบดว ย

Camcorder = ใชบ นั ทึกวิดโี อ
Camera = ถา ยภาพ
ImagePicker = เลือกภาพแกลเลอร่ีภาพ
Player = เลนสือ่
Sound = เสยี ง
SoundRecorder = บนั ทกึ เสียง
SpeechRecognizer = แปลงเสียง
TextToSpeech = แปลงขอ ความเปนเสยี ง
VideoPlayer = ใชเ ลน วดิ ีโอ

YandexTranslate = แปลภาษา

รปู ภาพที่ 27 แสดงแทบ็ Media

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

23

Drawing and Animation ประกอบดว ย Ball ,Image
Sprite เปน เครอ่ื งมอื ใชจัดการกบั ภาพเคลอ่ื นไหวแอนิเมชั่น

Ball = ลูกบอล
Canvas = แคนวาส

ImageSprite = ภาพเคลื่อนไหว

รปู ภาพที่ 28 แสดงแท็บ Drawing and Animation

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

24

Social เปนเครื่องมอื ท่ใี ชง านดานการติดตอ สือ่ สาร แสดง
รายช่อื อีเมลล หมายเลข
โทรศัพท ฯลฯ ประกอบดว ย

ContactPicker = รายช่อื ผตู ดิ ตอ
EmailPicker = เพม่ิ ระบบชื่ออีเมล
PhoneCall = เรยี กผา นมอื ถอื
PhoneNumberPicker = เพ่มิ

รปู ภาพท่ี 29 แสดงแท็บ Social

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

25

Storage แทบ็ การจัดเกบ็ ข้อมูล

File = ไฟล์
FusiontablesControl = ควบคมุ ตารางฟิ วชน่ั
TinyDB = ฐานข้อมลู
TinyWeb = เว็บ

รปู ภาพท่ี 30 แสดงแทบ็ การจดั เกบ็ ชอมลู

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

26

สว นการเขียนโคด (Blocks Editor)

หลงั จากท่ีทาํ การเลอื กจัดวางคอมโพเนนททจ่ี ะใชสาํ หรบั โปรเจคครบแลว ผูใ ชจ ะสามารถเขียนโคด
คาํ สง่ั สําหรับแอพพลิเคชันไดใ นสว นการเขียนโคด (App Inventor Blocks Editor) สาํ หรับพน้ื ท่ีการทํางานใน
สว นหนา จอการเขียนโคด แสดงดังภาพ 7 ซ่ึงจะประกอบไปดว ยคําส่งั ทอ่ี ยูใ นรูปของบลอ็ กรวบรวมไวบ ริเวณ
ดา นซา ยของหนา จอ ผูใชส ามารถเลือกคาํ ส่งั ที่ตองการโดยการคลิกลากบลอ็ กคําสงั่ มาวางไวใ นโปรเจคคอื
บรเิ วณทเ่ี ปน พ้นื ท่วี างตรงกลางหนาจอ ตัวอยา งของบลอ็ กคาํ ส่ังดงั แสดงในภาพ 8 ซึง่ จะเปน คาํ สงั่ พ้นื ฐานท่ีผใู ช
จะนาํ มาใชใ นการสรา งแอพพลิเคชันขนึ้ มา บลอ็ กเหลา นี้จะถูกแยกและจดั แบง ออกเปน กลุมๆ ตามลกั ษณะของ
คาํ ส่ัง ตวั อยา งเชน บลอ็ กขอ ความท่ใี ชในการทํางานทเ่ี กยี่ วของกับขอ ความที่เปน สายอกั ขระ บล็อกทาง
คณิตศาสตรทใี่ ชใ นการทาํ งานท่เี กีย่ วของกับฟงกช นั ทางคณติ ศาสตร ตัวเลข หรอื เครอื่ งหมายทางคณิตศาสตร
เปนตน App Inventor ยังสามารถสรางกระบวนการทํางาน (procedure) และตัวแปร (variable) ไดโดยการ
เลอื กใชบลอ็ กในสว นที่เก่ียวกับการสรา งกระบวนการทํางานและเหตกุ ารณ (event handler) ที่เกิดกบั คอม
โพเนนท โดยบลอ็ กที่เกีย่ วของกับคอมโพเนนทจ ะถูกจัดเตรียมไวใ หต ามคอมโพเนนททีผ่ ใู ชเ ลอื กนาํ มาวางไวใ น
โปรเจคและจดั เก็บรวมกนั ไวในแท็บ My Blocks แยกไวต างหาก บล็อกทีเ่ ก่ยี วของกบั คอมโพเนนทเ หลาน้ีจะ
แบงออกไดเปน 4 แบบตามประเภทของคําสงั่ คอื ประเภทการเรียกคาคุณสมบตั จิ ากคอมโพเนนท (property
getter) ประเภทการกาํ หนดคาคุณสมบัตใิ หก ับคอมโพเนนท (property setter) ประเภทเหตกุ ารณ (event
handler) และประเภทการเรยี กใชก ระบวนการทาํ งาน (method call)

รูปภาพที่ 31 แสดงรปู แบบการเขยี นโปรแกรมบล็อ

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

27

ตวั อยา งของบลอ็ กคําสงั่ ที่ใชแทนการเขียนโคด

การเรยี กคาคุณสมบตั ิจากคอมโพเนนท (property getter) บล็อกประเภททใี่ ชเรยี กคาคุณสมบัตจิ าก
คอมโพเนนทจะมลี ักษณะเปน ชอ งตอ อยูทางดา นซายดงั ภาพ 9 โดยการทาํ งานจะทาํ การอานคา คุณสมบตั ิจาก
คอมโพเนนทแ ลวสง คา นนั้ กลับมาในรูปของขอความ ตัวเลข หรอื คา ทางตรรกศาสตร แตใ นบางคอมโพเนนท
อาจมคี าท่มี ีรปู แบบท่ีซับซอ นมากกวาเชน คา GPS จากคอมโพเนนทตรวจจับตาํ แหนง (Location Sensor)
เปนตน ซึ่งจะมรี ูปแบบเฉพาะแตกตางกันไป แตทง้ั น้กี ารอา นคานนั้ ทําไดง า ยมาก ถงึ แมจะเปนการอา นคา GPS
ซงึ่ โดยปกติมกี ระบวนการทํางานท่ซี ับซอน แตผูใชสามารถอา นคา GPS ไดผานคอมโพเนนทตรวจจับตาํ แหนง
เหมอื นอา นคา ขอความจากกลอ งขอ ความ ดวยกระบวนการนี้ทําใหม ั่นใจไดว า ผูใชจ ะไมตอ งกังวลในเรอื่ งความ
ซบั ซอนของการเขา ถึงคา และขอมูลตา งๆ ทีต่ อ งการ

รปู ภาพท่ี 32 แสดงตวั อยางของบลอ็ กคําสัง่ ประเภทที่ใชเรยี กคาคุณสมบัติจากคอมโพเนนท (property getter)

การกําหนดคา คณุ สมบัติใหกับคอมโพเนนท (property setter) บล็อกประเภททีใ่ ชก าํ หนดคา
คณุ สมบตั ิใหกับคอมโพเนนทจ ะมีลักษณะเปน ชองตอ อยูท างดานขวาดังภาพ 10 โดยจะสามารถทําการ
กําหนดคา หรือเปลีย่ นแปลงคา คณุ สมบตั ใิ หกับคอมโพเนนททีต่ องการดว ยคา ของบล็อกทนี่ าํ มาตอ เขา กับชอ ง
ตอทอ่ี ยูทางดา นขวา ชอ งตอนจี้ ะมรี ูปรางเปนชองรบั ซง่ึ จะตอเขา ไดพอดกี ับบลอ็ กที่มีรปู รางเหมือนบลอ็ ก
ประเภทที่ใชเ รียกคา คณุ สมบตั ิจากคอมโพเนนท ซ่งึ จะทําใหผใู ชเ ลือกบลอ็ กทจี่ ะนํามาตอ เขา ดว ยกนั ไดอยาง
งา ยไดและลดขอ ผดิ พลาดในการเลือกตอ บล็อกทีไ่ มถูกตอ ง

รปู ภาพที่ 33 แสดงตวั อยางของบล็อกคาํ สงั่ ประเภทท่ใี ชกําหนดคา คุณสมบัตใิ หกบั คอมโพเนนท (property
setter)

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

28

เหตกุ ารณ (event handler) บล็อกประเภทเหตุการณจ ะมีลกั ษณะเปนชอ งตอ อยทู างดานลางดงั ภาพ
11 ซึ่งบลอ็ กประเภทนจี้ ะทํางานเมื่อเกิดเหตกุ ารณตา งๆ ข้ึนกบั คอมโพเนนท เชน การคลกิ ท่ปี ุม ซ่ึงจะทํางาน
ตามบลอ็ กคาํ สั่งท่ีตอ ลงไปทางดานลา งภายในบล็อกเหตกุ ารณ ตวั อยา งเชนในภาพ 11 แสดงใหเ หน็ ถงึ
เหตุการณเ ม่ือมกี ารคลิกปุม แลว ใหมีการแสดงหนาตางขอ ความโตตอบขนึ้ มาเพ่ือเตือนใหผ ูใชทําการปอ นขอมูล
ลงในกลอ งขอ ความ เปน ตน

รปู ภาพท่ี 34 แสดงตวั อยา งของบล็อกคาํ ส่งั ประเภทเหตกุ ารณ (event handler)

การเรียกใชก ระบวนการทํางาน (method call) บล็อกประเภทเรยี กใชกระบวนการทาํ งานจะมี
ลกั ษณะเหมอื นกับบลอ็ กประเภททีใ่ ชเรียกคาคณุ สมบตั จิ ากคอมโพเนนทท ่ีมีลักษณะเปน ชอ งตอ อยูทาง
ดา นซา ย บล็อกประเภทน้ีจะถกู สรางขึน้ เมือ่ ผูใ ชไ ดม กี ารสรา งกระบวนการทาํ งานโดยอาศัยบล็อกประเภท
กระบวนการทํางานในการสรางดงั ภาพ 12 เชน การสรางฟงกช นั การทาํ งาน การสรางตวั แปร เปน ตน และจะ
มีชื่อเรยี กเฉพาะตัวตามทีผ่ ูใชเปนผูตัง้ ให เมือ่ มีการสรา งกระบวนการทํางานขึน้ บล็อกประเภทเรียกใช
กระบวนการทํางานก็จะถูกสรา งข้ึนและปรากฏในตัวเลอื กเพ่อื ใหผ ใู ชเลอื กท่มี าวางลงในโปรเจคเมื่อตอ งการให
เกิดการเรยี นใชก ระบวนการทาํ งานดังกลาว

รูปภาพท่ี 35 แสดงตวั อยางของบล็อกคําส่ังประเภทกระบวนการทาํ งาน

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพวิ เตอร์

29

ทดสอบ Run โปรแกรมที่เราพฒั นาผา น Emulator โดยไปที่ Connect -> Emulator

รูปภาพที่ 36 แสดงการเชื่อมตอ Emulator
เมอื่ เลือกเสร็จจะขน้ึ Connecting

รปู ภาพท่ี 37 แสดงสถานะรอการเช่ือมตอ

aiStarter เรมิ่ ทาํ งาน

รปู ภาพที่ 38 แสดง aiStarter เรม่ิ ทาํ งาน

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพวิ เตอร์

30

ขน้ั ตอนการรัน App ผาน Emulator

รปู ภาพท่ี 39 ขนั้ ตอนการรนั App ผา น Emulator

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพิวเตอร์

31

ผลการรนั App ผาน Emulator

รปู ภาพที่ 40 แสดงผลการรัน App ผา น Emulator

การนําออกโปรเจค (Export Project)
ไฟลโปรเจ็คท่ถี ูกสรา งขึน้ และพัฒนาอยนู น้ั เราสามารถทําการนาํ โปรเจคออกเพ่ือเก็บไฟลน นั้ ไวใ ชใน

การพัฒนาตอไปได อกี ท้งั ยงั สามารถนาํ ไฟลท ไี่ ดไ ปใชก ับคอมพิวเตอรเ ครอื่ งอนื่ ไดด วย ข้นั ตอน นําออกทาํ ได
งายๆดังนค้ี อื คลิกเลือกที่ Project จากนั้นทําเครอ่ื งหมายถูกหนา โปรเจค็ ทต่ี อ งการ เสรจ็ แลว คลกิ ที่หวั ขอ
Project จากน้นั เลอื ก Export selected Project(.aia) to my computer เพื่อนําโปรเจคออก

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพิวเตอร์

32

รปู ภาพท่ี 41 แสดงการนาํ ออกโปรเจค

การนาํ เขา โปรเจค (Import Project)
การนาํ เขา โปรเจค นน้ั จะเปนการนําไฟลโ ปรเจ็คทเ่ี ราไดจดั เก็บเอาไว มาใชงาน เพอ่ื แกไข หรอื พัฒนา

ตอ โดยไปท่ี Projects จากนั้นที่หัวขอ Import project(.aia) เพือ่ ทําการนําเขาโปรเจค

รปู ภาพท่ี 42 แสดงการนําเขา โปรเจค

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพิวเตอร์

33

หลงั จากเลือกแลว จะขึน้ ปอปอัพข้นึ มาใหเ ราเลือกไฟลโ ปรเจคทีจ่ ะนาํ เขาไปแกไขตอ

รปู ภาพท่ี 43 แสดงการนาํ เขาโปรเจค

หลงั จากทีไ่ ดท าํ การนาํ เขาไฟลเ สร็จส้ินแลว จากนัน้ กจ็ ะเขาสหู นาตา งของการพัฒนาตอ ไป

รปู ภาพที่ 44 แสดงผลการนาํ เขา โปรเจค

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพิวเตอร์

34

เริม่ ตน เขียนโปรแกรมแรก Hello World

หลงั จากทที่ ําความรจู กั กับ AppInventor แลว ตอ ไปมาทองสรา งโปรแกรมแรกของเรา กบั โปรแกรม
Hello Word

รปู ภาพท่ี 45 แสดงตัวอยา งโปรแกรม Hello Word

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

35

รูปภาพที่ 46 แสดงหนาสําหรับเขียนโปแกรมแบบบล็อค

เลอื กบล็อกท่ตี อ งการ ในทนี่ ี้คือ Button. Click จากน้นั ลากไปวาง ทอ่ี ยใู นเครื่องมือ Button มาวางบรเิ วณ
พน้ื ทีว่ า ง

รูปภาพท่ี 47 แสดงหนา ใชบลอ็ กเหตุการณ Button1

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

36

หลังจากลากมาวางเรียบรอยแลว จะปรากฏดังภาพ

รูปภาพท่ี 48แสดงหนาใชบ ล็อคเหตกุ ารณ Button. Click
คลิกลากเครือ่ งมือ Label1 แลว set lebel1.Text to ไปไวในบล็อก Button1.Click

รปู ภาพที่ 49 แสดงหนาใชเ ครือ่ งมือเหตุการณ ขอ ความ Label

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพิวเตอร์

37

การลากบลอ็ กไปวางตอ กนั นัน้ จะตองวางใหไดลงตัวพอดกี ับบล็อกอื่น ดงั ภาพ

รปู ภาพที่ 50 แสดงหนาใชบลอ็ ค set lebel1.Text to

คลกิ เครือ่ งมอื Text แลว บลอ็ กใสข อ ความ (“”)วางตอทา ย Set label1 เพอื่ ใชในการแสดงขอความ

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

38

รปู ภาพที่ 51 แสดงหนา ใชบ ลอ็ ค Text

รปู ภาพที่ 52 แสดงหนา ใชบล็อคการเขียนโปรแกรมแสดงขอความ
คลิกทบ่ี ล็อกทีว่ างตอแลวใสข อ ความวา สวสั ดชี าวโลก

รูปภาพที่ 53 แสดงหนา ใชบล็อคตวั อยางการใช Text
ทดสอบ App ทเ่ี ขียนดว ยการจําลองดวย Emulator

รปู ภาพท่ี 54 แสดงทดสอบ App ท่เี ขียนดว ยการจําลองดวย Emulator

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพวิ เตอร์

39

รอสกั ครู จะปรากฏหนา ตาง emulator ข้ึนมา

รปู ภาพที่ 55 แสดงผลทดสอบ App ที่เขียนดว ยการจาํ ลองดว ย Emulator

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

40

รปู ภาพที่ 56 แสดงผลทดสอบ App ที่เขยี นดวยการจาํ ลองดวย Emulator

สว่ นเทคโนโลยีสารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วิชาการคอมพวิ เตอร์

41

เม่ือโปรแกรมทาํ การเชอื่ มตอกบั emulator เปนท่เี รยี บรอ ยแลว ก็จะแสดงหนาตาโปรแกรมที่เราไดท ําการ
ออกแบบไว

รปู ภาพที่ 57 แสดงผลทดสอบ App ผาน emulator

จากนนั้ เรมิ่ ตน้ ทดสอบการทาํ งานของโปรแกรม โดยการคลกิ ทป่ี มุ่ Text Button1 กจ็ ะมขี อ้ ความ สวสั ดี
ชาว ปรากฏขน้ึ แทนท่ี Text for label1

รปู ภาพที่ 58 แสดงผลทดสอบ App Hello Word ผาน emulator

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

42

การอัพโหลดไฟลม ลั ตมิ ีเดยี

Application Sound แอฟฟริเคชน่ั แสดงเสยี งสตั ว โดยมขี นั้ ตอนดงั ตอ ไปนี้
 สรางโปรเจคใหม

o คลกิ ปมุ Start new project
o ตัง้ ชอ่ื โปรเจค Animal Sound
o กดปมุ OK

รูปภาพที่ 59 แสดงหนาการสรางโปรเจคใหม

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

43

สรา งหนาจอของ Application ลาก Label มาวางบนหนา จอแลวพิมพว า Animal Sound

รูปภาพท่ี 60 แสดงการใช Components Application Sound
ลากคอมโพเนน ท HorizontalArrangement มาใส พรอ มต้ังคา Properties AlignHorizontal =
Center Width = Fill parent

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

44

ลากคอมโพเนนท Button มาใสแ ลว เปล่ยี นช่อื ใหตรงกับชื่อสัตว พรอมตัง้ คา Properties Heigth =
150 Pixels Width = 150 Pixels

รปู ภาพที่ 61 แสดงการใช Components Application Sound

สว่ นเทคโนโลยีสารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพวิ เตอร์

45

อัพโหลดรูปภาพใสตรงคอมโพเนน Button

รูปภาพที่ 62 แสดงการใช Components Application Sound

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพิวเตอร์

46

หลงั จากอพั โหลดเสร็จแลวใหเ ปลย่ี นชอ่ื คอมโพเนน Button ใหต รงกับรูปภาพ เชน
ButtonCat

รปู ภาพที่ 63 แสดงการใช Components Application Sound
ต้งั ตา คอมโพเนน Button ในสว นของ Properties Heigth = 150 Pixels Width = 150 Pixels ลากคอมโพ
เนนท Sound มาใส พรอมตง้ั คา Properties Source ไปท่ไี ฟลเ สียงสตั วต า งๆ

สว่ นเทคโนโลยสี ารสนเทศ สํานกั หอสมดุ และเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพญ็ ประชมุ
นกั วชิ าการคอมพิวเตอร์

47

เขียนคําสง่ั ควบคุม Application หนา หลกั

คลิกท่ี Button แตล ะ Button แลว ลาก Blocks ดงั รปู มาวางบนหนาตาง Viewer

รปู ภาพที่ 64 แสดงการเขยี นชดุ คําสั่ง Application Sound

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหาจฬุ าลงกรณราชวทิ ยาลยั | นายนพดล เพญ็ ประชมุ
นกั วิชาการคอมพวิ เตอร์

48

คลกิ ที่ ท่หี ลุม Sound แลว ละ Sound แลวลาก call Sound play แตละอันมาวางตาม Blocks

รปู ภาพที่ 65 แสดงการเขยี นชดุ คาํ สั่ง Application Sound

หลงั จากลาก Block Sound ท้งั หมดมาวางกจ็ ะไดต ามรูปภาพ

รูปภาพท่ี 66 แสดงการเขียนชุดคาํ สั่ง Application Sound

สว่ นเทคโนโลยสี ารสนเทศ สาํ นกั หอสมดุ และเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหาจฬุ าลงกรณราชวิทยาลยั | นายนพดล เพ็ญประชมุ
นกั วชิ าการคอมพวิ เตอร์