คู่มือการอบรมครู การพัฒนาสื่อการเรียนการสอน ด้วย MIT App Inventor

เอกสารประกอบการอบรมการสร้าง Apps for Android ด้วย MIT App Inventor : อ.สมชาติ แผ่อำนาจ
~ 0 ~
คู่มือการอบรม
การพัฒนาส่อื การเรยี นการสอน ด้วย MIT App Inventor
วันที่ 6-9 ตุลาคม 2557
ณ อุตรดษิ ถด์ รุณี จ.อุตรดษิ ถ 

~ 1 ~
สารบัญ
1. MIT App Inventor คืออะไร 3
2. การตั้งค่าและเปิดใช้งานโปรแกรม MIT App Inventor 4
3. การใช้งานโปรแกรม MIT App Inventor และการทดสอบโปรแกรมผ่าน Emulator 8
4. การเขียนโปรแกรม แก้ไขโปรแกรมด้วย Block Editor 11
5. Workshop1 การสร้าง Apps เปลี่ยนสี 13
6. Workshop2 การสร้าง Apps ทายตัวเลข 15
7. Workshop3 การสร้าง Apps หนังสือแนะนำสถานที่ท่องเที่ยว 19
8. Workshop4 การพัฒนา Apps สื่อการเรียนการสอน 23
9. การดาวน์โหลดแอพไปใช้งาน 35
10. การแก้ไขปัญหาที่เกิดขึ้นระหว่างการสร้างแอพ 37
11. เกี่ยวกับผู้จัดทำ 39
12. แหล่งอ้างอิง 39

~ 2 ~
สิ่งที่จะได้เรียนรู้ในบทเรียนนี้
1. MIT App Inventor คืออะไร
2. การตั้งค่าและเปิดใช้งานโปรแกรม MIT App Inventor
3. การใช้งานโปรแกรม MIT App Inventor และการทดสอบโปรแกรมผ่าน Emulator
4. การเขียนโปรแกรม แก้ไขโปรแกรมด้วย Block Editor
5. Workshop1 การสร้าง Apps เปลี่ยนสี
6. Workshop2 การสร้าง Apps ทายตัวเลข
7. Workshop3 การสร้าง Apps หนังสือแนะนำสถานที่ท่องเที่ยว
8. Workshop4 การสร้าง Apps
9. การดาวน์โหลดแอพไปใช้งาน
10. การแก้ไขปัญหาที่เกิดขึ้นระหว่างการสร้างแอพ
ระยะเวลาสำหรับการฝึกอบรม 20 ชม.
กลุ่มเป้าหมาย กลุ่มคนทั่วไป และผู้มีความรู้เบื่องต้นเกี่ยวกับคอมพิวเตอร์

~ 3 ~
MIT App Inventor คืออะไร
App Inventor เป็นเครื่องมือที่ใช้สำหรับสร้างแอพพลิเคชันสำหรับสมาร์ทโฟนและแท็บเล็ตที่เป็น
ระบบปฏิบัติการ Android ซึ่งบริษัท Google ร่วมมือกับ MIT พัฒนาโปรแกรม App inventor ขึ้น ต่อมา
Google ถอนตัวออกมาและยกให้ MIT พัฒนาต่อเอง (โดยเน้นกลุ่มผู้ใช้ด้านการศึกษามากกว่า) ในนาม MIT
App inventor
ส่วนโปรแกรม AppInventor-46ict พัฒนาโดย อ.ยุทธนา แม่นผล โรงเรียนบ้านศรีมงคล สพท.
สุรินทร์ เขต 3 โดยพัฒนาให้สามารถทำงานรันบนระบบปฏิบัติการ Windows แบบออฟไลน์ได้ ไม่
จำเป็นต้องทำบนระบบอินเตอร์เน็ต ทำให้ใช้งานง่ายสำหรับผู้ศึกษา
App inventor ใช้หลักการคล้ายๆ กับ Scratch แต่ซับซ้อนกว่า โดยลักษณะการเขียนโปรแกรมแบบ
Visual Programming คือ เขียนโปรแกรมด้วยการต่อบล็อกคำสั่ง เน้นการออกแบบเพื่อแก้ปัญหา (problem
solving) ด้วยการสร้างโปรแกรมที่ผู้เรียนสนใจ บนโทรศัพท์มือถือสมาร์ทโฟน และปัจจุบันพบว่านักเรียนหรือ
เด็กวัยรุ่นใช้สมาร์ทโฟนโดยทั่วไปกันอยู่แล้ว
App inventor จึงเป็นอีกโปรแกรมหนึ่ง ที่เหมาะสำหรับใช้ในการสอนเขียนโปรแกรม ให้นักเรียนใน
ระดับมัธยมปลาย หรือระดับมหาวิทยาลัย โดยเฉพาะผู้ที่ไม่เคยเขียนโปรแกรมมาก่อนหรือไม่ได้เรียนอยู่ในสาย
คอมพิวเตอร์ การเขียนโปรแกรมบนสมาร์ทโฟนและแท็บเล็ต Android ด้วย App inventor ในภาพรวม
แสดงได้ตามรูปล่างนี้
App Inventor servers เป็นเครื่องที่ให้บริการและเก็บงานโปรเจกต่างๆ ที่ผู้ใช้สร้างขึ้นมา ผู้ใช้พัฒนา
โปรแกรมมือถือ Android โดยสร้างโปรเจกและเขียนโปรแกรมบนเว็บเบราว์เซอร์ ที่เชื่อมต่อไปยัง App

Inventor servers เมื่อได้โปรแกรมมา ก็สามารถทดสอบกับโปรแกรมมือถือจำลอง (Android emulator)
หรือโทรศัพท์มือถือ Android จริงๆ ก็ได้
ขั้นตอนการสร้างโปรแกรม (ตามภาพ) เริ่มจากออกแบบหน้าตาโปรแกรมบนมือถือ ด้วยโปรแกรม
App Inventor Designer ซึ่งใช้สำหรับสร้างส่วนโปรแกรมต่างๆ (components) เพื่อใช้งานในโปรแกรมมือ
ถือที่จะสร้างขึ้น จากนั้นเขียนโปรแกรมให้แต่ละส่วนโปรแกรม ด้วยโปรแกรม App Inventor Blocks Editor
ซึ่งใช้วิธีการต่อบล็อกคำสั่ง เพื่อให้ส่วนโปรแกรมนั้นๆ ทำหน้าที่ของมัน ตามที่ออกแบบเอาไว้ ระหว่างเขียน
โปรแกรม อาจมีการแก้ไข เพิ่มเติม หรือลบบางส่วนโปรแกรมออกไป ทำให้ต้องแก้ไขโปรแกรม (debug)
จนกว่าจะได้โปรแกรมตามที่ออกแบบไว้ เมื่อทุกส่วนโปรแกรมถูกสร้างเสร็จแล้ว ก็ได้เวลาทดสอบการใช้งาน
โดยการติดตั้งโปรแกรมลงไปบนมือถือ Android แล้วทดสอบการใช้งานผ่านมือถือจริงๆ แต่ถ้าไม่มีมือถือ ก็ยัง
สามารถทดสอบได้ ผ่านโปรแกรมมือถือจำลอง (Android emulator) ในคอมพิวเตอร์แทน
การตั้งค่าและเปิดใช้งานโปรแกรม MIT App Inventor
1. ติดตั้งโปรแกรม ติดตั้ง JAVA โดยเลือกติดตั้งตามระบบปฏิบัติการที่มีในเครื่อง เช่น ระบบ 32bit
และ 64bit
2. ติดตั้ง 1appinventor_setup_installer_v_1_2.exe หรือสามารถดาวน์โหลดโปรแกรมจาก
เว็บไซต์ (http://appinventor.mit.edu/explore/install-app-inventor-software.html)
3. แตกไฟล์ AppInventor46ict version 2.zip ไปวางไว้ใน C: ก็จะได้ C:AppInvento
~ 4 ~

4. เข้าไปตั้งค่าโปรแกรมคลิกขวาที่ MyComputer > Properties แล้วเลือก System protection
คลิกแท็บ Advance แล้วเลือก Enviroment Variables…
5. จากนั้นคลิก New แล้วกรอก variable name เป็น _JAVA_OPTIONS และค่า variable
value เป็น –Xmx1024m
~ 5 ~

6. จากนั้นคลิกที่แท็บ System variable ปุ่ม New แล้วใส่ค่า variable name ว่า JAVA_HOME
และใส่ตำแหน่งของโปรแกรม JAVA ลงไป คือ c:ProgramFilesJavajdk1.7.0_25
~ 6 ~
7. เปิดโฟล์เดอร์ C:AppInventor แล้วดับเบิ้ลคลิกรันไฟล์
a. startAI.cmd เพื่อรันโปรแกรม
b. launch-buildserver32.cmd (32bit) หรือ launch-buildserver.cmd (64bit) เพื่อ
จำลองเซอร์เวอร์ในเครื่องเราเอง
8. เปิดเว็บBrowser แล้วพิมพ์ URL คือ localhost:8888 จากนั้นกรอกอีเมล์ แล้วกด Login

~ 7 ~
9. ก็จะเข้าสู่หน้าต่างเพื่อเริ่มการทำงาน ดังรูป

~ 8 ~
การใช้งานโปรแกรม MIT App Inventor
1. อธิบายหน้าตาของโปรแกรม
 ส่วนเมนูหลัก ประกอบด้วย คำสั่ง โปรเจ๊ก ออกแบบ และเรียนรู้
 ส่วนเมนูโปรแกรม ประกอบด้วย คำสั่ง สร้าง ลบ ดาวน์โหลดทุกโปรเจ๊ก งานอื่นๆ เช่น ดาวน์โหลด
อัพโหลด
 ส่วนพื้นที่แสดงโปรเจ็ก
2. คลิกปุ่ม สร้าง เพื่อสร้างโปรเจ๊กใหม่ และตั้งชื่อโปรเจ๊ก เช่น MyApp (ต้องใช้ภาษาอังกฤษ)
3. เข้าสู่หน้าโปรเจ๊ก องค์ประกอบดังนี้
4. ตั้งค่าพื้นหลังของแอพของหน้า Screen 1 โดยกำหนดพื้นหลังเป็นรูปภาพ คลิกเปลี่ยน
Backgroundimages บนแท็บ คุณสมบัติ

~ 9 ~
5. แนะนำเครื่องมือสำหรับการทำงาน ในการสร้างวัตถุ ออกแบบหน้าตา Apps
Basic แท็บพื้นฐาน
Button = ปุ่มสำหรับกด
Canvas = พื้นที่ว่าง
CheckBox= เช็คเลือก
Clock = แสดงเวลา
Image = เลือกรูปภาพ
Label = ใส่ข้อความ
ListPicker = สำหรับรายการเลือก
PasswordTextBox = รหัสผ่าน
Slider = สไลด์
TextBox = กล่องข้อความ
TinyDB = ฐานข้อมูล
6. คลิกปุ่ม Label ลากมาวางบน Screen1 และแก้ไข คุณสมบัติ Text แก้เป็น “บทเรียน
คอมพิวเตอร์ช่วยสอน” , เปลี่ยนสีข้อความ(TextColor) สีพื้นหลัง(Background) และขนาด
ข้อความ(FontSize)

~ 10 ~
7. เปลี่ยนชื่อตัวแปรสำหรับ Label1 เป็น Title
8. แทรกรูปภาพของบน Apps คลิกลาก Images มาวางบน Screen1 จากนั้นอัพโหลดไฟล์รูปโดย
คลิก Picture > อัพโหลด > เลือกไฟล์ หาไฟล์ที่ต้องการจากนั้นกด เปิด แล้วกด ตกลง

9. การแทรกปุ่มสำหรับคลิก คลิกลาก Button มาวางบน Screen1 แล้วแก้ไขคุณสมบัติ อัพรูปภาพ
ไปแทนที่ปุ่ม คลิก Images > อัพโหลด > เลือกไฟล์
จากนั้นเปลี่ยนชื่อปุ่ม เป็น BtSearch
~ 11 ~
การเขียนโปรแกรม แก้ไขโปรแกรมด้วย Block Editor
1. คลิกแท็บ เปิดตัวแก้ไขบล็อก บนเมนูด้านบน
2. มันก็จะดาวน์โหลดไฟล์ Java ไว้ในเครื่องให้กด ยอมรับ แล้วเปิดไฟล์

3. หน้าตาของ Block Editor สำหรับเขียนโปรแกรม คลิกที่ My Blocks เพื่อดูว่ามีวัตถุอะไรบ้างที่
เราได้ทำไว้ ได้แก่ Title Crete(ข้อความ) Image1(รูปภาพ) และ BtSearch(ค้นหา)
~ 12 ~
4. คลิกเลือก BtSearch แล้ว ลาก When BtSearch.Click do มาวางบนที่ว่าง
5. คลิก Screen 1 แล้วลาก set Screen1.BackgroundColor to มาวาง
คลิกบนที่ว่าง เลือก Color > Red ให้ได้ดังรูป
6. คลิกปุ่ม New emulator เลือก Emulator เป็น emulator-5544

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

~ 14 ~
WorkShop1 สร้างแอพเปลี่ยนสี
1. เปิดโปรแกรม App Inventor จากนั้นคลิก สร้าง โปรเจ๊ก แล้วตั้งชื่อโปรแกรม ว่า ColorChange
แล้วกดปุ่ม ตกลง
2. จากนั้นเลือกคลิกปุ่ม Button ลากมาวางบนพื้นที่ทำงาน เพื่อสร้างปุ่ม
3. ตั้งเปลี่ยนชื่อปุ่มเป็น RedButton
4. พิมพ์ข้อความลงบนปุ่มว่า สีแดง ใส่สีแดงให้พื้นปุ่ม และตัวหนังสือสีขาว ปรับขนาดตามต้องการ

5. ทำในข้อ 2-4 อีกรอบ แต่ตั้งชื่อปุ่มว่า GreenButton พิมพ์ข้อความว่า สีเขียว ใส่สีพื้นและสีข้อความ
~ 15 ~
6. คลิกเปิด BlockEditor จากนั้นใส่คำสั่งให้กับปุ่มสีแดงและสีเขียวดังรูป
7. ลองรันโปรแกรมก็จะได้ดังรูป เมื่อคลิกปุ่มสีแดงสีพื้นจะเป็นสีแดง เมื่อคลิกปุ่มสีเขียวพื้นจะเปลี่ยนเป็น
สีเขียว

~ 16 ~
WorkShop2 สร้างแอพเกมทายตัวเลข
1. สร้างโปรเจ๊กใหม่ คลิก “สร้าง” โปรเจ๊ก ตั้งชื่อโปรเจ๊กว่า RandomNumber
2. คลิกลาก Label มาไว้บนพื้นที่ทำงาน แล้วพิมพ์ข้อความบนพื้นที่ทำงาน เช่น เกมทายตัวเลข ลอง
ทายกันดู ปรับแต่งข้อความตามต้องการ
คลิกลาก Screen Arrangement แบบ HorizontalArrangement มาวางบนพื้นที่ทำงาน ตั้งค่าความยาวเติม
เต็ม และแนวการจัดวาง กลาง

ลาก TextBox มาวางบนพื้นทีทำงาน เปลี่ยนชื่อเป็น NumberTextbox และลากปุ่ม Button มาวางบนพื้นที่
ทำงาน เปลี่ยนชื่อเป็น CheckButton
ลาก Label มาวางบนพื้นที่ทำงานเพื่อสร้างกล่องข้อความไว้แสดงผลลัพธ์ เปลี่ยนชื่อเป็น ResultLabel ตั้งค่า
ความยาวเติมเต็ม ส่วนสูง 24 จัดกลาง
3. เปิดตัว Block Editor เพื่อเขียนโค๊ตคำสั่ง เริ่มจากกำหนดตัวแปร X เป็น 0 โดยคลิก
Define>Variable แล้วเปลี่ยนชื่อเป็นตัวแปร x ใส่ค่าตัวแปรเป็น 0
4. เลือก Screen1>Screen1.lnitialize ลากมาวาง คลิกพื้นที่ว่างเลือก x [to] จากนั้นใส่คำสั่ง random
integer ใส่ค่าระหว่าง 0-10 เพื่อสุ่มตัวเลข
~ 17 ~

5. เลือกปุ่ม CheckButton> CheckButton.Click ลากมาวางบนพื้นที่ว่าง จากนั้นทำการตรวจสอบคือ
ถ้า NumberTextbox.Text < x ให้แสดง ResultLabel.Text เป็นคำว่า “Too Low!!!”
ถ้า NumberTextbox.Text < x ให้แสดง ResultLabel.Text เป็นคำว่า “Too High!!!”
ถ้า NumberTextbox.Text < x ให้แสดง ResultLabel.Text เป็นคำว่า “Correct”
ตัวอย่างแสดงผลการทำงาน เมื่อกรอกตัวเลขแรก สมมติว่า 3 มันน้อยกว่าก็จะแสดง Too Low เมื่อ
กรอก 9 มันมากกว่าก็จะแสดง Too High และเมื่อกรอกตรงกับจำนวนที่สุ่ม ก็จะขึ้นว่า Correct
~ 18 ~

~ 19 ~
WorkShop3 สร้างแอพหนังสือท่องเที่ยว แม่สะเรียง
1. สร้างโปรเจ๊กใหม่ ตั้งชื่อว่า MaesariangBook
2. แท็บ สื่อ อัพโหลด ไฟล์รูปภาพที่จะใช้ทำหนังสือท่องเที่ยว ไฟล์รูปภาพ 0-6 .jpg ทั้งหมด
3. ตั้งพื้นหลังของแอพ Screen1 เป็น 0.jpg
4. ลาก Canvas มาใส่บนพื้นที่ทำงาน แก้ไขชื่อ Canvas เป็น Page แล้วกด ตกลง

~ 20 ~
5. เป็นพื้นหลังของ Canvas Page ให้เป็นรูปภาพ 0.jpg
6. คลิกเปิด Block Editor แล้วเลือกคำสั่ง Page > Page.Flung ลากมาวางบนพื้นที่ทำงาน ,
ลาก ifelse then-do else-do มาต่อช่อง do ถ้ามีการปัดหน้าซ้าย ให้ภาพพื้นหลังเปลี่ยน (xvel<0)ต่อคำสั่ง
ให้ได้ดังรูป
7. ตั้งตัวแปรใหม่ คลิก Definition>variable ไว้เก็บหน้าปัจจุบัน แล้วตั้งชื่อ CurrentPage ใส่ค่า 0
สร้างอีกตัวแปรหนึ่งไว้เก็บจำนวนหน้าทั้งหมด แล้วตั้งชื่อ TotalPage ใส่ค่าข้อมูล 6

8. ถ้ามีการปัดหน้าโปรแกรมต้องเพิ่ม CurrentPage +1 เปลี่ยนพื้นหลังเรียกใช้งานตัวแปร
CurrentPage .jpg
9. ถ้าปัดหน้าขวา โปรแกรมต้องลดค่า CurrentPage -1 เปลี่ยนพื้นหลังเรียกใช้งานตัวแปร
CurrentPage .jpg
10. กรณีที่ถึงหน้าสูงสุดโปรแกรมจะทำงานต่อไม่ได้ดังนั้นต้องตั้งค่าให้เริ่มนับ 0 ใหม่ คำสั่ง
~ 21 ~
If CurrentPage > TotalPage
Then-do CurrentPage = 0 ดังนี้
11. กรณีที่ปัดขวาจนถึงหน้าต่ำสุด โปรแกรมจะทำงานต่อไม่ได้ดังนั้นต้องตั้งค่าให้เป็นค่าสูงสุดของ
หน้าเพิ่มวนรอบ

~ 22 ~
12. คำสั่งรวมทั้งหมดเป็นดังรูป
13. สำเร็จแล้วครับ แอพหนังสือท่องเที่ยว แม่สะเรียง สามารถปัดหน้าซ้าย-ขวาเพื่อดูข้อมูลได้
# ข้อเสนอแนะเพิ่มเติม บางทีเวลาไปเปิดใช้งานจริงภาพเล็กไม่เต็มจอ ดังนั้นจึงต้องใส่คำสั่งเพิ่มให้ปรับขยาย
ตามขนาดของจอที่แตกต่างกัน คำสั่งดังภาพ

~ 23 ~
WorkShop4 สร้างแอพบทเรียนคอมพิวเตอร์ช่วยสอน
สร้างโปรเจ๊กใหม่ ตั้งชื่อเป็นชื่อสื่อที่ต้องการสร้าง เช่น AppMath
ออกแบบหน้าตาของบทเรียน โดย ใส่ชื่อบทเรียน รูปภาพประกอบ และใส่ปุ่ม(Button) เมนูบทเรียน
ใส่คำสั่งให้กับปุ่ม เมื่อคลิกปุ่มก็จะเปิดหน้าอื่น
ทำการเพิ่มหน้าจอ คลิกปุ่ม เพิ่มหน้าจอ

~ 24 ~
หน้าที่ 2 ใส่จุดประสงค์การเรียนรู้
หน้าที่ 3 เป็นบทเรียน ผู้สอนสามารถใส่บทเรียนเป็นหนังสือที่สามารถเปิดหน้าได้
คลิก เพิ่มหน้าจอ แล้วตั้งชื่อ s4 จากนั้นใส่โจทย์สำหรับทำแบบฝึกหัด โดยมีคำอธิบาย เวลาในการทำข้อสอบ
(NumberLabel) และโจทย์(QuestionLabel)กับตัวเลือก(Button a,b,c,d)

สร้าง VerticalArrangement ตั้งชื่อว่า QuestionGroup จากนั้นนำข้อความ Label มาใส่ได้แก่ โจทย์
(QSet) ตัวเลือกที่ 1(ASet) ตัวเลือกที่ 2(BSet) ตัวเลือกที่ 3(CSet) ตัวเลือกที่ 4(DSet) และ คำตอบ
(AnswerSet) และตั้งค่า QuestionGroup ที่ Visible เป็น hidden เพื่อซ่อนข้อสอบไว้
เปิด Block Editor แล้วกำหนดตัวแปล โดย Define > Variable แล้วสร้างตัวแปล Qlist, Alist, Blist, Clist,
Dlist และ Answerlist
นำข้อมูลมาเก็บในตัวแปล ที่สร้างไว้โดยใช้คำสั่ง Built-in > Lists > list from csv row เก็บข้อมูล Text เช่น
1,2,3
~ 25 ~

MyBlock > s4 > s4.Initialize ลากมาวาง และนำข้อมูลจาก QSet.Text มาไว้ในตัวแปล Qlist คำสั่งดังรูป
Qlist[to] > list from csv row > QSet.text
~ 26 ~
ทำเช่นเดียวกันกับทุกตัวแปลในข้อก่อนนี้
ดูข้อมูลที่ได้ระหว่างรันโปรแกรม โดยคลิกขวาที่ Alist > Watch จากนั้นรันโปรแกรม ข้อมูลจะถูกดึงมาแสดง
แทน 1,2,3 เดิม

สร้าง Built-in > Procedure ตั้งชื่อว่า GetQuestion แล้วนำ Qlist,Alist,Blist,Clist,Dlist,Anslist
นำข้อมูลมาใส่เพื่อแสดงบน หน้าจอ (แต่ยังไม่สมบูรณ์ เนื่องจากแสดงทั้งหมด ซึ่งเราต้องการเพียงข้อเดียว)
~ 27 ~

แก้ไขโดยให้เลือกแสดงเฉพาะ ข้อเดียว Built-in > List > Select list item ใส่ค่า list เป็น Qlist และค่า
index เป็น 1
~ 28 ~
ทำเช่นเดียวกันกับ a,b,c,d
สร้างตัวแปล Define > Variable ตั้งชื่อว่า CurrentNumber ใส่ค่าเป็น 1

~ 29 ~
นำค่า CurrentNumber มาใส่แทนค่า 1 เดิม
สร้าง Built-in > Procedure ตั้งชื่อว่า GetQestion แล้วนำ QuestionLabel,a,b,c,d มาใส่
สร้างตัวแปร define>variable ตั้งชื่อว่า TotalQuestion ใส่ค่า 5

ใส่คำสั่งให้กับปุ่ม NextButton คือ ถ้าคลิกปุ่มนี้ ให้ CurrentNumber มีค่าเพิ่ม 1 แล้วก็ตรวจสอบว่าถ้า
CurrentNumber > TotalQuestion ให้ CurrentNumber เท่ากับ TotalQuestion
ส่วนปุ่ม BackButton ให้ CurrentNumber ลดค่าลง 1
~ 30 ~
กำหนดให้ปุ่ม CheckButton แสดง โดยใช้คำสั่ง CheckButton.Visible เป็น true

~ 31 ~
สร้างตัวแปร Selectlist แล้วนำ Make a list มาต่อ เพิ่มคำสั่งที่ s4.initalize ตามรูป
ใส่คำสั่งให้ปุ่ม a,b,c,d เมื่อคลิกปุ่ม
จากนั้นลาก Other Staff > Notifier มาวางบนพื้นที่ทำงานเพื้อให้แสดงข้อความเตือนได้
ใส่คำสั่งแสดงเมื่อเลือกคำตอบให้กับปุ่ม a ,b ,c, d

~ 32 ~
สร้างตัวแปร Score ใส่ค่า 0 และกำหนดคำสั่งให้กับปุ่ม CheckButton ดังรูป
กำหนดให้แสดงข้อความผลลัพธ์เมื่อคลิกปุ่ม CheckButton และเริ่มนับคะแนนใหม่เป็น 0
ลาก Clock มาวางบนพื้นที่หน้าจอ และเอาเช็คหน้า TimeEnabled ออก

จากนั้น ใส่คำสั่งเพิ่มใน s4 .lnitialize ว่า Clock1.TimerEnabled เป็น True และใส่คำสั่งให้ Clock1.Timer
ดังรูป
~ 33 ~
สร้าง Presedure ว่า CheckAnswer แล้วเรียกใช้งานใน ปุ่ม CheckButton และนาฬิกา Clock1
นำ for range จาก s4.initialize มาวางต่อ GetQuestion

~ 34 ~
ใส่คำสั่งเพิ่มเติมให้กับกระบวนการ CheckAnswer ดังรูป
เพิ่มคำสั่ง NumberLabel.Text ให้เปลี่ยนตาม CurrentNumber
จากนั้นลองทำแบบฝึกหัดดู โดยคลิก New emulator แล้วเลือก emulator 5554

~ 35 ~
สร้างหน้า 5 หน้าผู้จัดทำ โดยคลิก เพิ่มหน้าจอ

~ 36 ~
การดาวโหลด Apps เพื่อใช้กับโทรศัพท์ Android
คลิกสร้าง APK > ดาวน์โหลด
กำลังประมวลผล รอจนกว่าจะครบ 100%
สามารถนำเอา ไฟล์ apk ที่ได้ไปติดตั้งกับอุปกรณ์โทรศัพท์ Android ได้เลย

~ 37 ~
แก้ปัญหาที่เกิดขึ้นระหว่างการสร้าง Apps
1) ความปลอดภัยของระบบ
คลิกรันเพื่อเข้าโปรแกรม
2) ปัญหาไม่สามารถเปิดโปรแกรมได้
เปิดเข้าไปที่ Control Panel > Java

~ 38 ~
คลิกเลือก Genaral > Setting
เอาเครื่องหมายเช็คถูกหน้า Keep temporary files on my computer. ออก

~ 39 ~
เกี่ยวกับผู้จัดทำ
นายสมชาติ แผ่อำนาจ ตำแหน่ง ครู โรงเรียนแม่สะเรียง “บริพัตรศึกษา”
จบปริญญาตรี สาขาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยราชภัฏเชียงใหม่
จบป.บัณฑิตวิชาชีพครู มหาวิทยาลัยราชภัฏเชียงใหม่ (โครงการ สควค.)
กำลังศึกษา ปริญญาโท มหาวิทยาลัยสุโขทัยธรรมาธิราช สาขาเทคโนโลยีสื่อสารการศึกษา
ติดต่อครูสมชาติ แผ่อำนาจ
เว็บบล็อก http://krusomchart.wordpress.com
Facebook https://www.facebook.com/pages/คุณครูสมชาติ-แผ่อำนาจ/440481672663455
ขอขอบคุณ แหล่งอ้างอิง
 การสร้าง App invertor อ.ยุทธนา แม่นผล
https://plus.google.com/108787084391304065369/posts
 . MIT App Inventor เขียนโปรแกรมบนมือถือ http://kidsangsan.com/2012/07/04/mit-app-inventor%
E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B9%8
2%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1%E0
%B8%9A%E0%B8%99%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%96%E0%B8%
B7%E0%B8%AD/ เข้าถึงเมื่อวันที่ 30 สิงหาคม 2557. MIT App Inventor เขียนโปรแกรมบนมือถือ

คู่มือการอบรมครู การพัฒนาสื่อการเรียนการสอน ด้วย MIT App Inventor

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à คู่มือการอบรมครู การพัฒนาสื่อการเรียนการสอน ด้วย MIT App Inventor

Similaire à คู่มือการอบรมครู การพัฒนาสื่อการเรียนการสอน ด้วย MIT App Inventor (20)

Plus de Somchart Phaeumnart

Plus de Somchart Phaeumnart (20)

คู่มือการอบรมครู การพัฒนาสื่อการเรียนการสอน ด้วย MIT App Inventor