คู่มือสอน MIT App Inventor 2

เอกสารประกอบการอบรมการสราง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอาํ นาจ

คมู อื การอบรม
การสรา ง Apps for Android ดว ย MIT App Inventor

จดั ทําโดย
อ.สมชาติ แผอ าํ นาจ

ตําแหนง ครู
วันที่ 6-9 ตุลาคม 2556
คา ยวิทยาศาสตรน ักเรยี นหองเรยี นพเิ ศษวิทยาศาสตร ระดับชน้ั ม.5
เครือขายกลุมภาคเหนอื ตอนบน
ณ โรงเรียนแมส ะเรยี ง “บริพตั รศึกษา” อ.แมส ะเรียง จ.แมฮองสอน

~0~

เอกสารประกอบการอบรมการสรา ง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอาํ นาจ
สง่ิ ท่จี ะไดเ รียนรใู นบทเรียนนี้

1. การต้ังคาและเปด ใชงานโปรแกรม MIT App Inventor
2. การใชง านโปรแกรม MIT App Inventor และการทดสอบโปรแกรมผา น Emulator
3. การเขยี นโปรแกรม แกไ ขโปรแกรมดวย Block Editor
4. การดาวนโหลดแอพไปใชง าน
การตง้ั คาและเปด ใชง านโปรแกรม MIT App Inventor

1. เร่มิ ตนคดั ลอก AppInventor46ict version 2.zip ไปวางไวใน C:\ กจ็ ะได C:\AppInventor
2. เปด โฟลเดอร C:\AppInventor แลวดบั เบิ้ลคลกิ รันไฟล

a. startAI.cmd เพ่ือรันโปรแกรม
b. launch-buildserver32.cmd (32bit) หรือ launch-buildserver.cmd (64bit) เพือ่

จําลองเซอรเวอรใ นเครื่องเราเอง

3. เปดเว็บBrowser แลวพิมพ URL คือ localhost:8888 จากนัน้ กรอกอเี มล แลว กด Login

~1~

เอกสารประกอบการอบรมการสรา ง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอํานาจ
4. กจ็ ะเขา สหู นา ตางเพอ่ื เริ่มการทาํ งาน ดงั รูป

การใชง านโปรแกรม MIT App Inventor
1. อธิบายหนาตาของโปรแกรม

 สวนเมนูหลัก ประกอบดว ย คาํ สัง่ โปรเจก ออกแบบ และเรียนรู
 สว นเมนโู ปรแกรม ประกอบดว ย คาํ ส่ัง สรา ง ลบ ดาวนโหลดทกุ โปรเจก งานอนื่ ๆ เชน ดาวนโ หลด

อพั โหลด
 สวนพืน้ ท่ีแสดงโปรเจ็ก

2. คลกิ ปุม สราง เพือ่ สรา งโปรเจกใหม และตง้ั ชอ่ื โปรเจก เชน MyApp (ตองใชภ าษาอังกฤษ)

3. เขาสหู นาโปรเจก องคป ระกอบดังนี้

~2~

เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอ าํ นาจ
4. ตงั้ คา พ้นื หลังของแอพของหนา Screen 1 โดยกาํ หนดพื้นหลังเปนรูปภาพ คลกิ เปลยี่ น
Backgroundimages บนแท็บ คุณสมบตั ิ

~3~

เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอ าํ นาจ

5. แนะนําเครื่องมอื สาํ หรบั การทํางาน ในการสรางวัตถุ ออกแบบหนา ตา Apps

Basic แท็บพื้นฐาน
Button = ปุมสาํ หรับกด
Canvas = พ้ืนทีว่ า ง
CheckBox= เช็คเลือก
Clock = แสดงเวลา
Image = เลือกรูปภาพ
Label = ใสขอความ
ListPicker = สําหรับรายการเลอื ก
PasswordTextBox = รหัสผา น
Slider = สไลด
TextBox = กลอ งขอความ
TinyDB = ฐานขอมลู

6. คลกิ ปุม Label ลากมาวางบน Screen1 และแกไข คุณสมบัติ Text แกเปน “บทเรยี น
คอมพิวเตอรชว ยสอน” , เปลย่ี นสขี อ ความ(TextColor) สีพ้นื หลัง(Background) และขนาด
ขอ ความ(FontSize)

7. เปลย่ี นช่อื ตวั แปรสาํ หรับ Label1 เปน Title

~4~

เอกสารประกอบการอบรมการสรา ง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอํานาจ

8. แทรกรปู ภาพของบน Apps คลกิ ลาก Images มาวางบน Screen1 จากนน้ั อพั โหลดไฟลร ูปโดย
คลิก Picture > อพั โหลด > เลือกไฟล หาไฟลท ่ตี องการจากน้นั กด เปด แลว กด ตกลง

9. การแทรกปุมสาํ หรับคลิก คลิกลาก Button มาวางบน Screen1 แลวแกไขคณุ สมบัติ อัพรปู ภาพ
ไปแทนท่ปี ุม คลกิ Images > อพั โหลด > เลอื กไฟล
จากน้นั เปลี่ยนชือ่ ปมุ เปน BtSearch

~5~

เอกสารประกอบการอบรมการสรา ง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอ ํานาจ
การเขียนโปรแกรม แกไ ขโปรแกรมดว ย Block Editor

1. คลิกแทบ็ เปด ตัวแกไ ขบลอ็ ก บนเมนดู านบน

2. มนั กจ็ ะดาวนโ หลดไฟล Java ไวใ นเครื่องใหกด ยอมรับ แลวเปด ไฟล

3. หนา ตาของ Block Editor สาํ หรบั เขยี นโปรแกรม คลกิ ท่ี My Blocks เพื่อดูวา มวี ตั ถุอะไรบา งท่ี
เราไดท ําไว ไดแก Title Crete(ขอ ความ) Image1(รปู ภาพ) และ BtSearch(คน หา)

4. คลกิ เลือก BtSearch แลว ลาก When BtSearch.Click do มาวางบนที่วาง

~6~

เอกสารประกอบการอบรมการสราง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอ ํานาจ
5. คลกิ Screen 1 แลว ลาก set Screen1.BackgroundColor to มาวาง

คลิกบนทวี่ าง เลอื ก Color > Red ใหไ ดดงั รูป

6. คลกิ ปุม New emulator เลือก Emulator เปน emulator-5544

7. ลองทดสอบโปรแกรม คลกิ ปมุ แลวจะเปลี่ยนสีพืน้ หลังเปนสี

~7~

เอกสารประกอบการอบรมการสราง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอ าํ นาจ
WorkShop สรางแอพหนงั สอื ทองเทีย่ ว แมส ะเรียง

1. สรา งโปรเจกใหม ต้งั ชอื่ วา MaesariangBook

2. แท็บ สื่อ อพั โหลด ไฟลรูปภาพทีจ่ ะใชท าํ หนังสือทองเที่ยว ไฟลรูปภาพ 0-6 .jpg ทง้ั หมด

3. ตั้งพน้ื หลงั ของแอพ Screen1 เปน 0.jpg

~8~

เอกสารประกอบการอบรมการสราง Apps for Android ดวย MIT App Inventor : อ.สมชาติ แผอ าํ นาจ
4. ลาก Canvas มาใสบ นพ้นื ท่ีทํางาน แกไขช่อื Canvas เปน Page แลว กด ตกลง

5. เปน พ้ืนหลังของ Canvas Page ใหเปนรปู ภาพ 0.jpg

6. คลิกเปด Block Editor แลวเลือกคําส่ัง Page > Page.Flung ลากมาวางบนพน้ื ท่ที ํางาน ,
ลาก ifelse then-do else-do มาตอชอ ง do ถามกี ารปด หนา ซา ย ใหภาพพืน้ หลงั เปลย่ี น (xvel<0)ตอคาํ ส่ัง
ใหไดดงั รปู

~9~

เอกสารประกอบการอบรมการสรา ง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอํานาจ
7. ต้ังตัวแปรใหม คลกิ Definition>variable ไวเ ก็บหนา ปจจุบัน แลวต้งั ช่อื CurrentPage ใสคา 0
สรางอีกตวั แปรหนึ่งไวเกบ็ จาํ นวนหนา ทั้งหมด แลว ตั้งชอ่ื TotalPage ใสคา ขอ มลู 6

8. ถา มีการปด หนาโปรแกรมตองเพ่ิม CurrentPage +1 เปลีย่ นพน้ื หลังเรียกใชง านตัวแปร
CurrentPage .jpg

9. ถาปดหนาขวา โปรแกรมตองลดคา CurrentPage -1 เปลย่ี นพนื้ หลังเรียกใชง านตวั แปร
CurrentPage .jpg

10. กรณีท่ถี ึงหนา สูงสดุ โปรแกรมจะทาํ งานตอไมไ ดด ังนัน้ ตองตง้ั คาใหเริม่ นับ 0 ใหม คาํ สั่ง
If CurrentPage > TotalPage
Then-do CurrentPage = 0 ดงั น้ี

~ 10 ~

เอกสารประกอบการอบรมการสราง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอ ํานาจ
11. กรณที ีป่ ดขวาจนถึงหนาตา่ํ สดุ โปรแกรมจะทํางานตอไมไ ดดงั น้ันตองตัง้ คา ใหเปนคา สงู สดุ ของ
หนาเพ่มิ วนรอบ

~ 11 ~

เอกสารประกอบการอบรมการสราง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอ าํ นาจ
12. คําสัง่ รวมทง้ั หมดเปน ดังรูป

13. สาํ เรจ็ แลวครับ แอพหนังสือทองเทยี่ ว แมสะเรยี ง สามารถปด หนาซาย-ขวาเพ่ือดูขอ มูลได

~ 12 ~

เอกสารประกอบการอบรมการสรา ง Apps for Android ดว ย MIT App Inventor : อ.สมชาติ แผอ าํ นาจ
# ขอเสนอแนะเพมิ่ เตมิ บางทีเวลาไปเปดใชง านจรงิ ภาพเล็กไมเ ตม็ จอ ดงั นัน้ จึงตอ งใสคําสง่ั เพิ่มให
ปรบั ขยายตามขนาดของจอที่แตกตางกนั คําส่ังดังภาพ

เกย่ี วกับผจู ัดทํา
นายสมชาติ แผอํานาจ ตําแหนง ครู โรงเรียนแมสะเรียง “บริพัตรศึกษา”
จบปริญญาตรี สาขาวทิ ยาการคอมพวิ เตอร มหาวทิ ยาลยั ราชภฏั เชียงใหม
จบป.บณั ฑติ วชิ าชพี ครู มหาวทิ ยาลัยราชภัฏเชยี งใหม (โครงการ สควค.)
ติดตอ ครสู มชาติ แผอํานาจ
เว็บบลอ็ ก http://krusomchart.wordpress.com
Facebook https://www.facebook.com/pages/คณุ ครูสมชาต-ิ แผอ าํ นาจ/440481672663455

ขอขอบคุณ แหลงอา งองิ
 การสราง App invertor อ.ยุทธนา แมนผล
https://plus.google.com/108787084391304065369/posts

~ 13 ~