Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย
คมอประกอบการอบรม การพฒนา Moblile Application บนระบบปฎบตการ Android
นายนพดล เพญประชม นกวชาการคอมพวเตอร
กลมงานเทคโนโลยการศกษา
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ
มหาวทยาลยมหาจฬาลงกรณราชวทยาลย
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
สารบญ
หนา
สารบญ แนะนา การพฒนา Moblile Application 1 การพฒนาแอพพลเคชนดวย AppInventor 3
ตดตง JAVA JRE 3 ตดตงโปรแกรม App Inventor 6
การสมคร Google Account 13 ออกแบบและเขยนคาสงดวย AppInventor 18
สวนการออกแบบ(Components) 20 สวนการเขยนโคด ( Blocks Editor) 25 ตวอยางของบลอกคาสงทใชแทนการเขยนโคด 27 ขนตอนการรน App ผาน Emulator 30
การนาออกโปรเจค (Export Project) 31 การนาเขาโปรเจค (Import Project) 32 เรมตนเขยนโปรแกรมแรก Hello World 33 การอพโหลดไฟลมลตมเดย 41
เขยนคาสงควบคม Application Sound 47 ตดตงแอพพลเคชนลงบนอปกรณแอนดรอยด 50 แหลงอางอง 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)
รปภาพท 25 แสดงแทบ User Interface แทบการออกแบบ
User Interface เปนเครองมอพนฐานทใชงานเปนประจาประกอบดวย Button = ปมกด
CheckBox= เชคเลอก
DatePicker = ปอปอพแสดงวนท Image = เลอกรปภาพ
Label = ใสขอความ
ListPicker = สาหรบรายการเลอก
ListPicker = แสดงรายการ
Notifier = ขอความแจงเตอน PasswordTextBox = รหสผาน
Slider = สไลด Spinner = แสดงเปนวงลอหมน TextBox = กลองขอความ
TimePicker = ปมปอปอพทแสดงเวลา
WebViewer = แสดงเวบเบาเซอร
21
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
รปภาพท 26 แสดงแทบ Layout แทบเลเอาต
Layout ใชจดการเกยวกบการวางตาแหนงของเครองมอตางๆ ซงจะ ชวยใหการจดการกบแอปพลเคชน รวมถงชวยใหการเขยนโปรแกรมทาไดงายขนดวย ในหมวดนประกอบดวย HorizontalArrangement = การจดเรยงแนวนอน
TableArrangement = การจดตาราง
VerticalArrangement = การจดเรยงแนวตง
22
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
รปภาพท 27 แสดงแทบ Media
Media เปนหมวดเครองมอทใชจดการกบมลตมเดยทงภาพและเสยง ประกอบดวย
Camcorder = ใชบนทกวดโอ Camera = ถายภาพ
ImagePicker = เลอกภาพแกลเลอรภาพ
Player = เลนสอ Sound = เสยง SoundRecorder = บนทกเสยง SpeechRecognizer = แปลงเสยง TextToSpeech = แปลงขอความเปนเสยง VideoPlayer = ใชเลนวดโอ
YandexTranslate = แปลภาษา
23
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
รปภาพท 28 แสดงแทบ Drawing and Animation
Drawing and Animation ประกอบดวย Ball ,Image Sprite เปนเครองมอใชจดการกบภาพเคลอนไหวแอนเมชน
Ball = ลกบอล
Canvas = แคนวาส
ImageSprite = ภาพเคลอนไหว
24
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
รปภาพท 29 แสดงแทบ Social
Social เปนเครองมอทใชงานดานการตดตอสอสาร แสดงรายชอ อเมลล หมายเลข โทรศพท ฯลฯ ประกอบดวย
ContactPicker = รายชอผตดตอ EmailPicker = เพมระบบชออเมล PhoneCall = เรยกผานมอถอ PhoneNumberPicker = เพม
25
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
รปภาพท 30 แสดงแทบการจดเกบชอมล
Storage แทบการจดเกบขอมล
File = ไฟล
FusiontablesControl = ควบคมตารางฟวชน
TinyDB = ฐานขอมล
TinyWeb = เวบ
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
49
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
ทดสอบ Application โดยคลกท Connect แลวเลอก รน App.ผาน Emulator
รปภาพท 67 แสดงการเขยนชดคาสง Application Sound
ผลของการทดสอบ Application Animal Sound เวลาคลกทรปสตว กจะมเสยงสตวนนๆดงขน
รปภาพท 68 แสดงการเขยนชดคาสง Application Sound
50
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
ตดตงแอพพลเคชนลงบนอปกรณแอนดรอยด Build Application ทเราพฒนา เพอตดตงใชงานจรงบนเครองSmartphone
รปภาพท 69 Build Application ทเราพฒนา
รอจนกวาจะ Preparing application icon เสรจสมบรณ 100%
รปภาพท 70 แสดง Progress Bar
ไฟล App ทเราไดจะเปนนามสกล.apk
รปภาพท 71 แสดงไฟล App เปนนามสกล.apk
51
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
ทาการตดตง Application บนSmartphone ระบบปฎบตการ Android
รปภาพท 72 การตดตงบน Smartphone
หลงจากตดตงเสรจสน คลกท icon Animal Sound เพอเปด Application
52
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
รปภาพท 73 ไอคอน App ทเราตดตงบน Smartphone
ผลรน Application บน Smartphone Android
รปภาพท 74 แสดงผลของ Application บน Smartphone
53
สวนเทคโนโลยสารสนเทศ สานกหอสมดและเทคโนโลยสารสนเทศ มหาวทยาลยมหาจฬาลงกรณราชวทยาลย | นายนพดล เพญประชม
นกวชาการคอมพวเตอร
แหลงอางอง David Wolber,Hal Abelson, Ellen Spertus & Liz Looney (2011). App Inventor 2: Create your own Android Apps. Publisher: O'Reilly Media. Massachusetts Institute of Technology. 2559. (ออนไลน).
แหลงทมา : http://appinventor.mit.edu/. 30 มกราคม 2558 ยทธนา แมนผล. 2559. (ออนไลน).
แหลงทมา : https://plus.google.com/108787084391304065369/posts. 1 มกราคม 2559