[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 119

จุดประสงคการเรียนรูบทที่ 7

1. เพื่อใหนักศึกษาเขาใจลักษณะของ Clouds Computing Technology

2. เพื่อใหนักศึกษาเขาใจพื้นฐานของ Tools ตาง ๆ ในโปรแกรม App inventor

3. เพื่อใหนักศึกษาสามารถใช CAST Tools : App inventor ในการพัฒนาโปรแกรมประยุกต

เบ้ืองตนได

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 120

บทที่ 7

การพัฒนาโปรแกรมประยุกตแบบเรงดวนดวย App Inventor

การพัฒนาโปรแกรมประยุกตแบบเรงดวย ดวย CASE Tools ในปจจุบันมีหลายเคร่ืองมือที่

อํานวยความสะดวกใหกับนักพัฒนาอยางมาก App Inventor เปนอีกเคร่ืองมือหนึ่งที่สามารถพัฒนา

Application บนระบบปฏิบัติการ Android ที่มีลักษณะคุณสมบัติแบบ Visually Design ที่นักพัฒนา

สามารถพัฒนาแอพพลิเคชันบนแอนดรอยดโดยไมตองอาศัยการ Coding Program เร่ิมตนพัฒนาคร้ัง

แรกที่สถาบัน Massachusetts Institute of Technology โดย Professor David Wolber เปน

ผูพัฒนาระบบรวมกับบริษัท Google ตั้งแตป 2009 จากนั้นGoogle ถอนตัวและยกระบบใหกับทาง

MIT พัฒนาตอ

แนวคิดหลักของการพัฒนาโปรแกรมดวย CASE Tools นี้คือการ มุงเนนพัฒนา Application

ที่นักพัฒนาไมจําเปนตองมีความรูเก่ียวกับการโปรแกรม หรือทักษะเก่ียวกับการเขียนโปรแกรมเชิงวัตถุ

ใด ๆ ก็สามารถพัฒนา Application อยางงายลงบนมือถือ หรืออุปกรณตาง ๆ ได โปรแกรม App

Inventor

ภาพที่ 74 : สัญลักษณโปรแกรม App Inventor ภายใตการพัฒนาของ Massachusetts Institute of

Technology และ Professor David Wolber ผูพัฒนา

ในการพัฒนาโดย App Inventor นั้น นักพัฒนาจะพัฒนาบนบนเว็บเบราวเซอร ที่เชื่อมตอไปยัง App

Inventor Servers โดยอาศัยเทคโนโลยี Cloud computing ที่ใหบริการการเชื่อมตอเพื่อเก็บงานหรือ

โปรเจคตาง ๆ ที่นักพัฒนาสรางขึ้น ทั้งนี้นักพัฒนาสามารถสรางโปรแกรมเพื่อใชงานบนมือถือ

ระบบปฏิบัติการ Android เม่ือพัฒนาแลวเสร็จนักพัฒนาสามารถทีสามารถทดสอบระบบกับโปรแกรม

มือถือจําลอง (Android emulator) หรือโทรศัพทมือถือ Android หรือ Tablet ได ดวยเหตุนี้ App

Inventor จึงเปน CASE Tools ที่มีประสิทธิภาพอยางยิ่งตอการพัฒนา Application ตั้งแตการพัฒนา

โปรแกรมพื้นฐานไปจนโปรแกรมที่มีความซับซอนได

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 121

Cloud computing Technology

ประมวลผลแบบกลุมเมฆ หรือ Cloud computing เปนเทคโนโลยีที่เกิดขึ้นเม่ือไมนาน มีลักษณะของ

การทํางานของผูใชงานคอมพิวเตอรผานอินเทอรเน็ต ที่ใหบริการใดบริการหนึ่งกับผูใช โดยผูใหบริการ

จะแบงปนทรัพยากรใหกับผูตองการใชงานนั้น การประมวลผลแบบกลุมเมฆ เปนลักษณะที่พัฒนาขึ้น

ตอมาจากความคิดและบริการของ Visualization และ web service โดยผูใชงานนั้นไมจําเปนตองมี

ความรูในเชิงเทคนิคใด ๆ ในการทํางานนั้นก็สามารถทํางานบนระบบการประมวลผลแบบกลุมเมฆได

(Danielson, 2008) ลักษณะการทํางานของ Cloud computing รองรับการใหงานระยะไกลโดยมีการ

จัดเก็บขอมูลบน Server สวนกลางที่ใหบริการ เพื่อใหผูใชบริการสามารถใชงานออนไลนได ทุกที่ทุก

เวลา ตัวอยางของการประมวลผลแบบ Cloud computing ที่เปนที่รูจัก เชน Drop box, YouTube,

Face book เปนตน

ภาพที่ 75: ลักษณะของ Cloud computing ที่สามารถเชื่อมตอการใชงานและแชรทรัพยากรอยางเปน

หนึ่งเดียวกัน ภาพที่มา: thumbsup.in.th

App Inventor เปนอีกโปรแกรมหนึ่งที่ใชงานในลักษณะดังกลาว โดยที่ นักพัฒนาสามารถ Login จาก

web browser เพื่อพัฒนา Application จากคอมพิวเตอรตัวใดก็ได ภายใตชื่อ Username Password

เดียวกัน web browser ก็ที่ทําหนาที่เปนตัวกลางในการพัฒนาจะถูกเชื่อมตอไปยัง Server สวนกลาง

ขณะเดียวกัน หากไมมีการเชื่อมตอไปยัง Server สวนกลาง นักพัฒนาสามารถสราง Server จําลองบน

เคร่ืองคอมพิวเตอรได และ Upload งานขึ้นไปยัง Server ในภายหลังไดเชนเดียวกัน จะเห็นไดวา

Cloud Computing Technology ชวยในการจัดสรรทรัพยากรใหกับผูใชงาน ซ่ึงมีประโยชนอยางยิ่งตอ

ทั้งในแงของการพัฒนา และการใชงาน ตาง ๆ ได

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 122

ลักษณะของเทคโนโลยี Cloud computing (Characteristics Cloud computing

Technology)

Cloud computing ที่ใชงานในปจจุบันมีหลายประเภท ทั้งนี้ขึ้นอยูกับการใชงานขององคกร หรือ

หนวยธุรกิจตาง ๆ ซ่ึงสามารถแบงรูปแบบ (Service models) ลักษณะการใชบริการดังตอไปนี้

(Danielson and Krissi, 2015)

Infrastructure-as-a-Service (IaaS)

เปนรูปแบบการใหบริการเฉพาะโครงสรางพื้นฐานตาง ๆ และระบบการจัดเก็บขอมูล (Storage) ซ่ึง

ทํางานบนระบบเสมือน (Virtualization) เพื่อรองรับการใชงานของระบบ Software และ Application

ตาง ๆ ที่ถูกรองขอการใชงาน การใหบริการดวย IaaS มุงเนนไปดานการใหบริการดวยความเร็วในการ

ประมวลผล และมีการทํา Cluster ระบบเพื่อปองกันการเกิดปญหา Down Time เม่ือระบบเครือขายที่

ใหบริการหลักเกิดปญหาขึ้น ทั้งปญหาดานการเชื่อมตอ หรือปญหาจากตัวระบบเอง IaaS แกไขปญหานี้

โดยการเรียกใชงานระบบเครือขายสํารองทําใหการประมวลผลขอมูลเปนไปอยางตอเนื่องและเต็ม

ประสิทธิภาพ อยางไรก็ตาม IaaS มีขอเสียคือ ระบบมีราคาคอนขางสูงมาก

Platform-as-a-Service (PaaS)

เปนรูปแบบการใหบริการดาน Platform สําหรับการพัฒนา Software และ Application โดยที่ผู

ใหบริการ PaaS จะจัดการ Software และ Application เพื่อเตรียมพรอมไวใหผูใชงานไดเรียกใชงาน

ทันทีที่ตองการใช ตัวอยางการใหบริการ เชน Middleware, Central Processing system, Database

Server, Web Application, โดยบริการทั้งหมดทํางานภายใตระบบรักษาความปลอดภัยเครือขาย โดย

ที่ผูใชงานสามารถเรียกใชงานบริการดังกลาวผาน Web Application ได

Software-as-a-Service (SaaS)

เปนรูปแบบการใหบริการในสวนของ Software และ Application ผานทางระบบอินเตอรเน็ต ซ่ึงมี

ลักษณะคลายคลึงกับ การเชา ซ่ึงจะมีการคิดคาบริการตามลักษณะการใชงาน โดยอาจจะพิจารณาจาก

จํานวนผูใชงาน หรือ ระยะเวลาการใชงาน เปนตน ขอดี SaaS ชวยใหผูใชบริการลดคาใชจายในการซ้ือ

ลิขสิทธิ์ของ Software รวมไปถึงคาใชจายในการดูแลรักษาระบบดวย ลักษณะการใชงานทําไดโดยที่เขา

ใชงาน Software หรือ Application โดยการเชื่อมตอผานระบบอินเตอรเน็ต

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 123

ประโยชนของ Cloud computing (Advantage Cloud computing)

1. Application programming interface (API)

ชวยใหการเขาถึงการใชงานดาน Software โดยที่สามารถใชงานสวนการติดตอผูใชงานดวยกันได รอง

กับการใชงานในสวนการติดตอผูใชที่ใชงานบนหนาจอคอมพิวเตอรแบบ Desktop ซ่ึงสามารถอํานวย

ความสะดวกดานการใชงานไดเปนอยางดี

2. Cost reductions

ลดตนทุนในการในการดําเนินงาน โดยใชการใช Cloud computing Technology โดยปกติแลวหาก

นักพัฒนาใชซอฟแวรใด ๆ ก็จําเปนตองมีตนทุนดานซอฟแวร และคอนขางยุงยากเม่ือตองเคลื่อนยาย

ซอฟแวรใด ๆ ไปทํางานในตางสถานที่ตางแผนก Cloud computing Technology ชวยใหนักพัฒนา

สามารถเรียกใชซอฟแวรที่ในทุกสถานที่ไดทั้งนี้จะตองมีระบบเครือขายอินเตอรเน็ตรองรับดวย ซ่ึง

สามารถการใชทรัพยากร หรือการซ้ือลิขสิทธิ์เกินความจําเปนได ตัวอยางที่เห็นไดชัด เชน App

Inventor สามารถเรียกใชผาน Web Browser ไดทุกที่ที่มีการเชื่อมตออินเตอรเน็ตไปยัง Server ได

เปนตน

3. Device and location independence

ความเปนอิสระจากอุปกรณและการเขาถึงระบบ ผูใชงานที่อาศัย Cloud computing Technology มี

อิสระดานการใชงานระบบ ทั้งในลักษณะของอุปกรณ ที่รองรับไดหลาย ๆ Platform นักพัฒนาสามารถ

ใชงานไดในทุกที่ ที่มีการเชื่อมตออินเตอรเน็ตได

4.Maintenance

การบํารุงรักษาระบบ ใน Cloud computing Technology สามารถทําไดงายเนื่องจากระบบไมได

ติดตั้งลงบนอุปกรณใด ๆ และการใชงานก็สามารถใชงานไดจากทุกสถานที่ ดังนั้นขอจํากัดและตนทุนใน

การการบํารุงรักษาระบบจึงนอย ทั้งนี้หนาที่ดังกลาวจะเปนสวนของผูใหบริการ

5.Performance

ประสิทธิภาพในการใชงาน เนื่องจากเปนระบบที่คอนขางมีเสถียรภาพ มีความคงที่ (Consistent) ของ

สถาปตยกรรมระบบ และมีความสอดคลองกันทําให Cloud computing Technology ใชงานไดอยาง

เต็มประสิทธิภาพอยางยิ่ง

6.Productivity

Cloud computing Technology ชวยเพิ่มจํานวนผูใชงานระบบมากขึ้นได แตเดิมการทํางานหากตอง

ใชขอมูลชุดเดียวกัน ขอมูลเหลานี้อาจจะจําเปนตองสงไปดวย E-mail ทีละผูใชงาน ทําใหการทํางาน

คอนขางชา แตเม่ือใชงานดวย Cloud computing Technology ผูใชงานจะสามารถใชงานขอมูลชุด

เดียวกันรวมกันได โดยที่ใชงานและดึงขอมูลเหลานั้นลงบนเคร่ืองคอมพิวเตอรไดทันที

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 124

7.Reliability

Cloud computing Technology มีการปรับปรุงความนาเชื่อถือของระบบ การสรางระบบใหมีความ

คงสภาพ (ไมลม) นอกจากนี้ยังมีการปรับปรุงการใชเว็บไซตใหมีความซํ้าซอนลดลง มีสวนกูคืนขอมูลได

(recovery) ทําใหมีความงายและมีเสถียรภาพตอการใชงานเหมาะสมสําหรับการใชงานมากขึ้น

8. Scalability and elasticity

คุณลักษณะดานความยืดหยุนของ Cloud computing Technology โดยเฉพาะอยางยิ่งขนาดของ

ระบบที่อยูบน Server มีขนาดเหมาะสม และทํางานรองรับความตองการของผูใชแบบ Real-time ได

ตัวอยางเชน การเรียกใช โปรแกรม App Inventor ผานเว็บ โดยที่ผูใชงานเรียกใชงานไดทันที และ

ติดตั้งเพียงซอฟแวรที่จําเปนตองการพัฒนาระบบเทานั้น การทํางานจึงรวดเร็วและสามารถใชงาน

โปรแกรมไดทันที

ข้ันตอนการทํางานของ App Inventor บน Cloud computing Technology

การพัฒนา Application บน CASE Tools ของ App Inventor นั้นรูปแบบการทํางานจะเร่ิมตนที่

นักพัฒนาจะตองเตรียมทรัพยากรที่จะใชงานรวมกับ App Inventor เชนการลง JAVA Runtime หรือ

การติดตั้งโปรแกรม App Inventor ลงในเคร่ืองคอมพิวเตอรที่มีการเชื่อมตอกับระบบอินเตอรเน็ต

(กรณี Online) และติดตั้งแลวระบบก็เชื่อมตอไปยัง App Inventor Server เพื่อใหนักพัฒนาไดสราง

(Creating) งานผาน Web- Browser จากนั้นก็จะเร่ิมการเขียนโปรแกรมคําสั่ง (Coding) ผาน App

Inventor Block Editor โดยการตอบล็อกแบบจิกซอ (ใช Logical เชนเดียวกับการเขียนโปรแกรมอ่ืน)

เม่ือพัฒนาแลวก็จะประมวลผล (Running) กลับไปยัง App Inventor และ Download ลงมายัง

อุปกรณ (Device) เชน โทรศัพทมือถือ เท็ปเลท ที่ใชระบบปฏิบัติการ Android เพื่อใชงาน (Using)

เปนตน

ภาพที่ 76: ขั้นตอนการทํางานของ App Inventor Process บน Cloud computing Technology

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 125

การทํางานของ App Inventor หากนักพัฒนาไมมีอุปกรณที่จะมาเชื่อมตอเพื่อ ดูผลลัพธในการ Run

Application ก็สามารถประมวลผลผาน Emulator ที่ถูกจําลองเปนอุปกรณเพื่อแสดงผล (simulate)

ใหนักพัฒนาเห็นผลลัพธของ Application ที่พัฒนาขึน้ได แตในกรณีที่มีอุปกรณที่ใชระบบปฏิบัติการ

Android ก็สามารถเชื่อมตอผานไดทั้ง WIFI และ USB port ได

ภาพที่ 77: Emulator ที่แสดงผลลัพธผานสวนการติดตอผูใชบนอุปกรณ

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 126

การเตรียมสภาพแวดลอมให App Inventor (Preparing App Inventor environment)

เม่ือนักพัฒนาเร่ิมตนการใชงาน App Inventor เพื่อพัฒนา Application ใด ๆ จําเปนอยางยิ่งที่จะตอง

ติดตั้งสภาพแวดลอมเพื่อที่จะใชงาน ผาน Cloud computing Technology เพื่อติดตอกับ App

Inventor server ของสภาบัน MIT โดยมีขั้นตอนเพื่อตดิตั้งดังตอไปนี้

1. เขาไปที่ http://appinventor.mit.edu/ เพื่อ Download ติดตั้งทรัพยากรตาง ๆ

2. เลือก Resources

3. เลือก Version ของ App Inventor ใหเลือก AI Classic (V1)

4. เลือก Prepare Your System เพื่อเขาไปสูหนาที่ตอง Download ติดตั้งโปรแกรม

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 127

5. เลือก Lunch เพื่อติดตั้ง JAVA Run Time

6. เลือก Install App Inventor Software

7. เลือกติดตั้ง App Inventor ใหตรงกับ ระบบปฏิบัติการที่นักพัฒนาใชงาน ในที่นี้ใหเลือก

Windows

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 128

8. เลือก Download the installer

9. เม่ือติดตั้ง App Inventor แลว ใหกลับมาที่หนาเว็บ Inventor อีกคร้ัง ใหเลือก

10. Click ที่ Address http://beta.appinventor.mit.edu/ เพื่อเร่ิมพัฒนา Application

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 129

11. เมื่อเขาสู http://beta.appinventor.mit.edu/ แลว ผูใชงานจําเปนตอง Login ผานบัญชี

รายชื่อผูใชงานของ Google เทานั้น กรณีมี Account แลวใหใสรายละเอียดลงไป และ Login

หากไมมี Account ใหสมัครและ Login เขาสูระบบอีกคร้ัง

เมื่อเขาสูระบบไดแลว ก็จะปรากฏหนาตางของ App Inventor ซึ่งจะระบุผูใชงาน (User

Account) อยูทางมุมขวาดานบน และมีหนาตางยินดีตอนรับสู App Inventor ปรากฏข้ึน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 130

12. Click เลือก Continue เพื่อเร่ิมพัฒนา

เคร่ืองมอื กลุม Menu Bar

A: แสดงชื่อ ของ Project ที่กําลังพัฒนา B: My Project รายการหนาตางรายชื่อโปรเจคทั้งหมด

C: Design สวนการออกแบบ D: Learn เปนสวนที่เชื่อมตอไปยัง Block เก่ียวกับการพัฒนา

E: Debugging สวนการตรวจสอบความผิดพลาดการตอ Block

F: Open Block Editor เปดสวนการโปรแกรม Block Editor เพื่อเขียนโปรแกรมเชื่อมตอกับ GUI

G: Packet for Phone สวนเชื่อมตอไปยังอุปกรณ เพื่อแสดงผล

H: Save บันทึกโปรเจคงาน

I: Save As บันทึกโปรเจคงานไปยังสวนอ่ืนๆ

J: Check Point บันทึกงานเพื่อกลับมาแกไขตามระยะ

K: Add Screen ใชเพิ่มหนาจอของ Application L: Remove Screen ใชลบหนาจอ Application

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 131

ประเภทของกลุม Panel ของ App Inventor

Palette เปนกลุมของเคร่ืองมือ ที่เก่ียวของกับ เคร่ืองมือเพื่อใชในการจัดการสวนการติดตอผูใชงานมี

หลายประเภท ไดแก

กลุม Basic จะเก่ียวของกับ เคร่ืองมือพื้นฐานที่ใชเพื่อสราง ปุมกด รูปภาพ ขอความ เปนตน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 132

กลุม Media จะเก่ียวของกับ กลุมของเคร่ืองมือที่ใชสําหรับการสราง Multimedia ตาง ๆ เชนการใส

เสียง การสรางภาพเคลื่อนไหว เปนตน

กลุม Animation จะเก่ียวของกับ กลุมของเคร่ืองมือการจัดการ การเคลื่อนไหว ของวัตถุตาง ๆ

กลุม Social จะเก่ียวของกับกลุมของการเชื่อมตอเครือขาย ตาง ๆ เชน การเชื่อมตอดวย E-mail,

Tweeter เปนตน

กลุม Screen Arrangement จะเก่ียวของกับกลุมของการ จัดการตําแหนงตาง ๆ บนหนาจอ ของ

Application ที่พัฒนาขึ้นซ่ึงจะสัมพันธกับ สวนการติดตอผูใช GUI บนอุปกรณที่จะนําไปใชงาน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 133

กลุม Sensors จะเก่ียวของกับกลุมของเคร่ืองมือ ที่ใชสําหรับการตรวจสอบ Sensor ตาง ๆ เชน การ

หาตําแหนงตาง ๆ โดยใช GPS เปนตน

กลุม LEGO จะเก่ียวของกับกลุมของเคร่ืองมือที่ใชสําหรับจัดการ คําสั่งและ Sensor ตาง ๆ

กลุม Other Stuff จะเก่ียวของกับกลุมของเคร่ืองมือที่ใชสําหรับจัดการ เพื่อตั้งคาตั้ง ๆ ใหกับ

Application เชน การตั้งคา Bluetooth การกําหนดการตั้งคาการเตือนตาง ๆ

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 134

กลุม Not ready for prime time จะเก่ียวของกับกลุมของเคร่ืองมือที่ใชสําหรับจัดการเพื่อเติม

คุณลักษณะเพิ่มเติมใหกับ Application เชนการตั้งคา ผูใชงาน การสรางฟงกชั่นบันทึกเสียง เปนตน

Property เปนสวนประกอบของโปรแกรม ที่ใชสําหรับการแสดงคุณลักษณะตาง ๆ ในสวนติดตอ

ผูใชงาน ไดแก การปรับตั้งคา ตั้งๆใหกับ วัตถุบนหนาจอ การปรับสี การกําหนด พื้นหลัง ขนาด เปนตน

Component เปนสวนประกอบของโปรแกรม ที่ใชสําหรับแสดงให ผูพัฒนาทราบวา มีวัตถุใดบาง

หรือมีองคประกอบใด ที่อยูบนหนาจอหรือสวนติดตอผูใชงาน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 135

เคร่ืองมอืควบคมุและจัดการ Block Editor และ การ Simulate Application ผาน Emulator

Block Editor เปนสวนหนึ่งของเคร่ืองมือ ที่ใชงานสําหรับการ ควบคุมคําสั่งการทํางานของ วัตถุตาง ๆ

บน GUI (Screen) ผูใชงานสามารถเรียกใชงานสวนนี้ไดโดยการ เลือก “Open the Block Editor”

Package for Phone ใชสําหรับการ Export งานไปยังอุปกรณ หรือเชื่อมตอไปยัง Emulator เพื่อดู

Application ที่พัฒนาขึ้นได

เม่ือ Click เลือก และ Java File จะถูก Download ลงสูเคร่ืองคอมพิวเตอร

Click Run เพื่อติดตั้ง JAVA

** กรณีที่เคร่ืองคอมพิวเตอรมี JAVA อยูแลว หากเปน Version ที่ไมได Update ให Update ใหเปน

Version ปจจุบันกอน ถาไมติดตั้งจะไมสามารถเรียก Block Editor ขึ้นมาใชงานได

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 136

หนาตางของ Block Editor จะปรากฏขึ้น

หนาตางนี้ใชในการเขียนโคดคําสั่ง โดยเลือกจากเมนูทางซายมือ พื้นที่การทํางานในสวนหนาจอการ

เขียนโคด ประกอบไปดวยคําสั่งที่อยูในรูปของบล็อก โดยผูพัฒนาสามารถเลือกคําสั่งที่ตองการโดยการ

คลิกลากบล็อกคําสั่งมาวางในพื้นที่วางตรงหนาจอ เพื่อประกอบและตอกันเปนชุดคําสั่ง คําสั่งพื้นฐานที่

ผูพัฒนาใชจะนํามาใชในการสรางแอพพลิเคชันขึ้นมา

เมนหูลักที่เปนหมวดหมูของ Block (ชุดคําสั่ง) ในแตละประเภทที่แตกตางกัน แบงไดดังตอไปนี้

Built-In เปนชุดคําสั่งที่รวม Block ที่ประกอบดวย

1. Definition เปน Block ชุดคําสั่งที่เปน Procedure ที่จัดการกระบวนการทํางาน

2. Text เปน Block ชุดคําสั่งที่เก่ียวของกับ การจัดการขอความ ทั้งหมด ซ่ึงจัดการคุณลักษณะ

เชน ขนาดตัวอักษร ความยาว การนับตัวอักษร เปนตน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 137

3. List เปน Block ชุดคําสั่งที่เก่ียวของกับ การสราง List หรือลําดับตาง ๆ ของวัตถุบน GUI

4. Math เปน Block ชุดคําสั่งที่เก่ียวของ ทางคณิตศาสตรที่ใชในการทํางานที่เก่ียวของกับฟงกชัน

ทางคณิตศาสตร ตัวเลข หรือเคร่ืองหมายทางคณิตศาสตร

5. Logic เปน Block ชุดคําสั่งที่เก่ียวของกับ การเปรียบเทียบเง่ือนไขตาง ๆ โดยการใชนิพจน

Boolean เพื่อใหไดผลลัพธ จริง หรือ ไมจริง ใช หรือไมใช เปนตน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 138

6. Control เปน Block ชุดคําสั่งที่เก่ียวของกับการควบคุม ใหเปนไปตามเง่ือนไข IF …Else การ

ทําใหโปรแกรมวนลูป (Loop) หรือใชเพื่อการตรวจสอบ ตัวแปร (variable) ตาง ๆ เปนตน

7. Colors เปน Block ชุดคําสั่งที่เก่ียวของกับการควบคุมเก่ียวกับสี ของวัตถุ

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 139

My Block เปนชุดคําสั่งที่รวม Block คําสั่งที่จะกําหนดคุณสมบัติใหกับแตละคอมโพเนนท (ในหนา

โปรแกรมหลัก มีความสัมพันธกับ Block Editor) ซ่ึงแบงออกไดเปน 4 ไดแกแบบตามประเภทของคําสั่ง

ไดแก ประเภทการเรียกคาคุณสมบัติจากคอมโพเนนท (property getter) ประเภทการกําหนดคา

คุณสมบัติใหกับคอมโพเนนท (property setter) ประเภทเหตุการณ (event handler) และประเภท

การเรียกใชกระบวนการทํางาน (method call)

อยางไรก็ตามในสวนของ My Block จะมีชื่อ แตละคอมโพเนนท ซ่ึงในแตละ Block ก็จะมีคําสั่งที่

แตกตางกันออกไป เชน ถาคอมโพเนนทเปน Button ก็จะมี Block คําสั่งเก่ียวกับการดําเนินการกับ

Block เปนตน

Advanced เปนชุดคําสั่งที่รวม Block คําสั่งที่จะกําหนดคุณสมบัติพิเศษที่นอกเหนือจาก Buit-In จะ

ดําเนินการไดแลว ตัวอยางเชน กําหนดคุณสักษณะพิเศษใหกับ Screen ใหมีการเคลื่อนไหวแบบตาง ๆ

เปนตน

[การพัฒนาโปรแกรมประยุกต์แบบแร่งด่วน] บทที 7

ดร.อรวชิย์ ถินนกุูล | สาขาวชิาการจดัการสมยัใหม่และเทคโนโลยีสารสนเทศ วทิยาลยัศิลปะ สือและเทคโนโลยี 140

การเช่ือมตอ App Inventor ไปยังอุปกรณ

หากตองการเชื่อมตอไปยังอุปกรณเพื่อดูผลลัพธของ Application ที่พัฒนาใหเชื่อตอ โดยการเลือก

Connect to Device กรณีนี้เชื่อมตอกับ Emulator หากผูพัฒนามีอุปกรณก็สามารถ เชื่อมตอกันผาน

WIFI ทําไดโดย

1. ปดมือถือ (Android) ไปที่ Google Play Store ดาวนโหลดโปรแกรม MIT AICompanion

App แลวติดตั้งโปรแกรมนี้ลงบนมือถือ

2. ตั้งคา automatic updating สําหรับโปรแกรม–

*** ขอระวังสําหรัลการเชื่อมตอดวยวิธีนี ้เม่ือใชมือถือตอกับ App Inventor ตองใช WIFI เทานั้น

3. เขาไปที่หนาตางโปรแกรม blocks editor คลิกเลือก “Connect to Device” เลือก “WiFi”

จะมีหนาตางบอกวิธีการเชื่อมตอปรากฏ และจะแสดง รหัสตัวเลข 6 ตัว หรอมกันกับรหัส QR

CODE

4. ปอน Code เพื่อเชื่อมตอกับ App Inventor