คู มือประกอบการอบรม¸„ู่มือ... · ติดตั้งโปรแกรม App Inventor 6 การสมัคร Google Account

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

คมอประกอบการอบรม การพฒนา 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

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



รอใหโปรแกรมรนไปสกระยะหนงแลวจะขนใหกด Finish เปนการเสรจสนการตดตงโปรแกรม


การสมคร 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

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 ไดแลว

http://www.appinventor.mit.edu/

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


45



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


46



หลงจากอพโหลดเสรจแลวใหเปลยนชอ คอมโพเนน Button ใหตรงกบรปภาพ เชน ButtonCat


ตงตาคอมโพเนน 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


หลงจากลาก Block Sound ทงหมดมาวางกจะไดตามรปภาพ


49



ทดสอบ Application โดยคลกท Connect แลวเลอก รน App.ผาน Emulator


ผลของการทดสอบ Application Animal 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

Documents

คู มือประกอบการอบรม¸„ู่มือ... · ติดตั้งโปรแกรม App Inventor 6 การสมัคร Google Account