คู่มือการอบรมครู...

เอกสารประกอบการอบรมการสราง 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


~4~

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


~5~

4. เขาไปต้ังคาโปรแกรมคลิกขวาที่ MyComputer > Properties แลวเลือก System protection

คลิกแท็บ Advance แลวเลือก Enviroment Variables…

5. จากน้ันคลิก New แลวกรอก variable name เปน _JAVA_OPTIONS และคา variable

value เปน –Xmx1024m


~6~

6. จากน้ันคลิกที่แท็บ System variable ปุม New แลวใสคา variable name วา JAVA_HOME

และใสตําแหนงของโปรแกรม JAVA ลงไป คือ c:\ProgramFiles\Java\jdk1.7.0_25

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 > อัพโหลด > เลือกไฟล หาไฟลที่ตองการจากน้ันกด เปด แลวกด ตกลง


~11~

9. การแทรกปุมสําหรบัคลิก คลกิลาก Button มาวางบน Screen1 แลวแกไขคุณสมบัติ อัพรูปภาพ

ไปแทนที่ปุม คลิก Images > อัพโหลด > เลือกไฟล

จากน้ันเปลี่ยนช่ือปุม เปน BtSearch

การเขียนโปรแกรม แกไขโปรแกรมดวย Block Editor

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

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


~12~

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

เราไดทําไว ไดแก Title Crete(ขอความ) Image1(รูปภาพ) และ BtSearch(คนหา)

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. พิมพขอความลงบนปุมวา สีแดง ใสสีแดงใหพื้นปุม และตัวหนังสือสีขาว ปรับขนาดตามตองการ


~15~

5. ทําในขอ 2-4 อีกรอบ แตต้ังช่ือปุมวา GreenButton พิมพขอความวา สีเขียว ใสสีพื้นและสีขอความ

6. คลิกเปด BlockEditor จากน้ันใสคําสัง่ใหกบัปุมสีแดงและสีเขียวดังรปู

7. ลองรันโปรแกรมกจ็ะไดดังรูป เมือ่คลิกปุมสีแดงสีพื้นจะเปนสีแดง เมื่อคลิกปุมสีเขียวพื้นจะเปลี่ยนเปน

สีเขียว


~16~

WorkShop2 สรางแอพเกมทายตัวเลข

1. สรางโปรเจกใหม คลิก “สราง” โปรเจก ต้ังช่ือโปรเจกวา RandomNumber

2. คลิกลาก Label มาไวบนพื้นที่ทํางาน แลวพิมพขอความบนพื้นที่ทํางาน เชน เกมทายตัวเลข ลอง

ทายกันดู ปรบัแตงขอความตามตองการ

คลิกลาก Screen Arrangement แบบ HorizontalArrangement มาวางบนพื้นที่ทํางาน ต้ังคาความยาวเติม

เต็ม และแนวการจัดวาง กลาง


~17~

ลาก 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 เพื่อสุมตัวเลข


~18~

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


~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


~21~

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

CurrentPage .jpg

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

CurrentPage .jpg

10. กรณีที่ถึงหนาสงูสุดโปรแกรมจะทํางานตอไมไดดังน้ันตองต้ังคาใหเริ่มนับ 0 ใหม คําสั่ง

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)


~25~

สราง 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


~26~

MyBlock > s4 > s4.Initialize ลากมาวาง และนําขอมลูจาก QSet.Text มาไวในตัวแปล Qlist คําสั่งดังรูป

Qlist[to] > list from csv row > QSet.text

ทําเชนเดียวกันกบัทุกตัวแปลในขอกอนน้ี

ดูขอมูลที่ไดระหวางรันโปรแกรม โดยคลิกขวาที่ Alist > Watch จากน้ันรันโปรแกรม ขอมลูจะถูกดึงมาแสดง

แทน 1,2,3 เดิม


~27~

สราง Built-in > Procedure ต้ังช่ือวา GetQuestion แลวนํา Qlist,Alist,Blist,Clist,Dlist,Anslist

นําขอมูลมาใสเพือ่แสดงบน หนาจอ (แตยังไมสมบรูณ เน่ืองจากแสดงทั้งหมด ซึง่เราตองการเพียงขอเดียว)


~28~

แกไขโดยใหเลอืกแสดงเฉพาะ ขอเดียว Built-in > List > Select list item ใสคา list เปน Qlist และคา

index เปน 1

ทําเชนเดียวกันกบั a,b,c,d

สรางตัวแปล Define > Variable ต้ังช่ือวา CurrentNumber ใสคาเปน 1


~29~

นําคา CurrentNumber มาใสแทนคา 1 เดิม

สราง Built-in > Procedure ต้ังช่ือวา GetQestion แลวนํา QuestionLabel,a,b,c,d มาใส

สรางตัวแปร define>variable ต้ังช่ือวา TotalQuestion ใสคา 5


~30~

ใสคําสั่งใหกับปุม NextButton คือ ถาคลิกปุมน้ี ให CurrentNumber มีคาเพิ่ม 1 แลวก็ตรวจสอบวาถา

CurrentNumber > TotalQuestion ให CurrentNumber เทากบั TotalQuestion

สวนปุม BackButton ให CurrentNumber ลดคาลง 1

กําหนดใหปุม 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 ออก


~33~

จากน้ัน ใสคําสัง่เพิม่ใน s4 .lnitialize วา Clock1.TimerEnabled เปน True และใสคําสั่งให Clock1.Timer

ดังรูป

สราง 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 เขียนโปรแกรมบนมือถือ

คู่มือการอบรมครู...

Education