บทที่ 3 ขั้นตอนการด าเนินงาน

3.1 การเตรียมความพร้อม โดยสรุป สิ่งที่ต้องเตรียมความพร้อมก่อนใช้งาน App Inventor คือ

1. เครื่องคอมพิวเตอร์ และ ระบบปฏิบัติการ 2. เบราว์เซอร์ ที่ติดตั้ง Java 3. โปรแกรม App Inventor Setup 4. ไดรเวอร์ของโทรศัพท์ Android (เฉพาะ Windows) ระบบปฏิบัติการใช้ได้ทั้ง Windows, Mac OS, Linux ส่วนเบราว์เซอร์ (Browser) มีอยู่หลายโปรแกรม (ควรใช้เวอร์ชั่นล่าสุด)

ก่อนพัฒนาแอพพลิเคชั่น ผู้ใช้จะต้องมี user account ของ Gmail ก่อน ดังนั้นเพื่อความสะดวกให้ท่านสมัครอีเมล์ของ Gmail เพ่ือท างานเข้าสู่ระบบการพัฒนาแอพพลิเคชั่นของ App Inventor 3.2 ความต้องการของระบบ 1.ระบบปฏิบัติการ - Macintosh : Mac OSX 10.5,10.6 (Intel) - Windows : WindowsXP,Windows Vista,Windows7 - GNU/Linux : Ubuntu 8+, Debian 5+ 2. โปรแกรม Browser - Mozilla Firefox11.0 - Apple Safari 5.0 and higher - Google Chrome4.0 and higher - Microsoft Internet Explorer 6 and higher โปรแกรมอ่ืนๆ - appinventor_setup_installer_v_1_2 - Jdk- 7u3-windows-i586 สว่นโทรศัพท์นอกเหนือจากนี้ ต้องติดตั้งไดรเวอร์ (USB driver) จากผู้ผลิตโทรศัพท์แต่ละยี่ห้อตรวจสอบได้ วิธีตรวจสอบว่า ไดรเวอร์ได้ติดตั้งเรียบร้อยแล้ว

2

เปิดหน้าต่าง Command Prompt (cmd) เปลี่ยนไดเรกทอรี่ (cd) ไปยัง C:\Program Files (x86)\AppInventor\commands-for-Appinventor ส าหรับ Windows 32-bit หรือ C:\Program Files\AppInventor\commands-for-Appinventor ส าหรับ Windows 64-bit

ต่อสาย USB ของโทรศัพท์มือถือเข้ากับคอมพิวเตอร์ ที่หน้าต่าง Command Prompt พิมพ์ค าสั่ง adb devices จะเห็นข้อความ daemon not

running ตามด้วย daemon stated successfully และ ตามด้วยระหัสโทรศัพท์ที่ต่อกับคอมพิวเตอร์อยู่ เช่น HT99TP800054 แสดงว่าไดรเวอร์ท างาน และคอมพิวเตอร์ก็สามารถติดต่อกับโทรศัพท์ได้แล้ว

แต่ถ้าไม่มีรายชื่อรายการโทรศัพท์เลย แสดงว่าไดรเวอร์ไม่ท างาน ต้องลองลงไดรเวอร์ใหม่ อาจต้องหาข้อมูลในการลงไดรเวอร์โทรศัพท์รุ่นที่ใช้งานอยู่ ในเน็ต หรือลองดูท่ี troubleshooting page หรือค้นจาก App Inventor User Forum ในหัวข้อ Getting set up and connecting your phone

สุดท้ายตรวจที่โทรศัพท์ดูว่าท างานถูกต้องหรือยัง

1. แตะปุ่ม Home เพ่ือไปยังหน้าต่าง Home 2. แตะปุ่ม Menu -> Settings -> Applications 3. ถ้าปรากฏ Unknown sources แตะเลือกที่กล่องสี่เหลี่ยม (ตามรูป)

ภาพที่ 3-1 การตรวจสอบโทรศัพท์ดูว่าท างานถูกต้องหรือไม่

3

4. แตะเลือก Development 5. แตะเลือก USB Debugging และ Stay Awake จากนั้นต่อโทรศัพท์เข้ากับคอมพิวเตอร์ด้วยสาย USB จะเห็น 2 ข้อความปรากฏ บริเวณ notifications (ด้านบนของจอโทรศัพท์) USB Connected หมายความว่าโทรศัพท์ต่อกับคอมพิวเตอร์แล้ว USB Debugging Connected หมายถึง App Inventor ในคอมพิวเตอร์เข้าควบคุมโทรศัพท์ได้

แล้วเท่านี้ก็พร้อมเขียนโปรแกรมแรกกันแล้ว 3.3 จัดเตรียมระบบ 1. ท าการติดตั้ง jdk-7u3-windows-i586ไปดาวโหลดได้ที่ http://www.java.com/ 2. ดาวน์โหลดและติดตั้ง App Inventor เพ่ือเป็นเครื่องมือส าหรับ Emulator ในเครื่องคอมพิวเตอร์ของท่าน -http://appinventor.googlelabs.com/learn/setup/setupwindows.html - appinventor_setup_installer_v_1_2.exe 3.4 เข้าสู่ระบบ เมื่อท าการจัดเตรียมระบบเรียบร้อยแล้ว ต่อไปก็ท าการเข้าสู่ระบบ App Inventor ได้โดยไปที ่http://www.appinventor.mit.edu/

App Inventor server เป็นเครื่องที่ให้บริการและเก็บงานโปรเจคต่างๆ ที่ผู้ใช้สร้างขึ้นมา ผู้ใช้พัฒนาโปรแกรมมือถือ Android โดยสร้างโปรเจคและเขียนโปรแกรมบนเว็บเบราว์เซอร์ ที่เชื่อมต่อไปยัง App Inventor server เมื่อได้โปรแกรมมา ก็สามารถทดสอบกับโปรแกรมมือถือจ าลอง (Android emulator) หรือโทรศัพท์มือถือ Android

3.5 ขั้นตอนการสร้างโปรแกรม

ขั้นตอนการสร้างโปรแกรม (ตามภาพ) เริ่มจากออกแบบหน้าตาโปรแกรมบนมือถือ ด้วยโปรแกรม App Inventor Designer ซึ่งใช้ส าหรับสร้างส่วนโปรแกรมต่างๆ (components) เพ่ือใช้งานในโปรแกรมมือถือที่จะสร้างข้ึน จากนั้นเขียนโปรแกรมให้แต่ละส่วนโปรแกรม ด้วยโปรแกรม App Inventor Blocks Editor ซึ่งใช้วิธีการต่อบล็อกค าสั่ง เพ่ือให้ส่วนโปรแกรมนั้นๆ ท าหน้าที่ของมัน ตามที่ออกแบบเอาไว้ ระหว่างเขียนโปรแกรม อาจมีการแก้ไข เพ่ิมเติม หรือลบบางส่วนโปรแกรมออกไป ท าให้ต้องแก้ไขโปรแกรม (debug) จนกว่าจะได้โปรแกรมตามที่ออกแบบไว้ เมื่อทุกส่วนโปรแกรมถูกสร้างเสร็จแล้ว ก็ได้เวลาทดสอบการใช้งาน โดยการติดตั้งโปรแกรมลงไปบนมือถือ

4

Android แล้วทดสอบการใช้งานผ่านมือถือจริงๆ แต่ถ้าไม่มีมือถือ ก็ยังสามารถทดสอบได้ ผ่านโปรแกรมมือถือจ าลอง (Android emulator) ในคอมพิวเตอร์แทน

ขั้นตอนการสร้างโปรแกรม (ตามภาพ) เริ่มจากออกแบบหน้าตาโปรแกรมบนมือถือ ด้วยโปรแกรม App Inventor Designer ซึ่งใช้ส าหรับสร้างส่วนโปรแกรมต่างๆ (components) เพ่ือใช้งานในโปรแกรมมือถือที่จะสร้างข้ึน จากนั้นเขียนโปรแกรมให้แต่ละส่วนโปรแกรม ด้วยโปรแกรม App Inventor Blocks Editor ซึ่งใช้วิธีการต่อบล็อกค าสั่ง เพ่ือให้ส่วนโปรแกรมนั้นๆ ท าหน้าที่ของมัน ตามที่ออกแบบเอาไว้ ระหว่างเขียนโปรแกรม อาจมีการแก้ไข เพ่ิมเติม หรือลบบางส่วนโปรแกรมออกไป ท าให้ต้องแก้ไขโปรแกรม (debug) จนกว่าจะได้โปรแกรมตามที่ออกแบบไว้ เมื่อทุกส่วนโปรแกรมถูกสร้างเสร็จแล้ว ก็ได้เวลาทดสอบการใช้งาน โดยการติดตั้งโปรแกรมลงไปบนมือถือ Android แล้วทดสอบการใช้งานผ่านมือถือจริงๆ แต่ถ้าไม่มีมือถือ ก็ยังสามารถทดสอบได้ ผ่านโปรแกรมมือถือจ าลอง (Android emulator) ในคอมพิวเตอร์แทน

การเขียนโปรแกรมบนสมาร์ทโฟนและแท็บเล็ต Android ด้วย App inventor ในภาพรวมแสดงได้ตามรูปล่างนี้

ภาพที่ 3-2 รูปแบบการท างานโปรแกรมบนสมาร์ทโฟนและแท็บเล็ต

5

3.6 ขั้นตอนโดยสรุปของวิธีการพัฒนาแอปพลิเคชั่นด้วย App Inventor 3.6.1. เริ่มต้นใช้งาน App Inventor ด้วยการล็อกอินเพ่ือเข้าสู่ระบบ 3.6.2. เปิดโปรแกรมเว็บบราวเซอร์ขึ้นมา พิมพ์ URL ไปที่ appinventor.googlelabs.com หลังจากนั้นท าการเข้าระบบด้วยการใส่ชื่ออีเมลล์และรหัสผ่าน โดยอีเมลล์ที่ใช้เป็นเมลล์ที่ได้สมัครไว้กับทาง google เสร็จแล้วท าการคลิกที่ปุ่ม Sign in เพ่ือเข้าสู่ระบบ

ภาพที่ 3-3 ท าการเข้าระบบ

3.6.3. จะปรากฏหน้าต่างมุมมองของการออกแบบ เครื่องมือต่างๆของ App Inventor ดังภาพ ซึ่งแบ่งออกเป็นส่วนหลักๆ ได้ดังนี้

ภาพที่ 3-4 การออกแบบ เครื่องมือต่างๆของ App Inventor

6

1. แสดงช่ือของแอปพลิเคชั่นที่ก าลังพัฒนาอยู่ เป็นชื่อที่ได้จากการตั้ง ตอนที่สร้างโปรเจกใหม่ 2. แถบ Palette เป็นแถบเครื่องมือที่รวมเครื่องมือทั้งหมดที่ใช้ในการออกแบบหน้าตา และเครื่องมือที่ใช้การท างานด้านต่างๆ ของแอปพลิเคชั่น ซึ่งแบ่งเป็นหมวดหมู่ย่อยๆ ได้อีก เช่น 3.6.4. Basic เป็นเครื่องมือพื้นฐานที่ใช้งานเป็นประจ า ประกอบด้วย Label, button, Canvas,CheckBox, Clock, Image, Label, ListPicker, PasswordTextBox, TextBox, TinyDB ซึ่งในบทความนี้จะกล่าวถึงเครื่องมือบางตัวที่ใช้ในตัวอย่างนี้เท่านั้น

ภาพที ่3-5 เครื่องมือพ้ืนฐานที่ใช้งานเป็นประจ า

3.6.5. Media เป็นหมวดเครื่องมือที่ใช้จัดการกับมัลติมีเดียทั้งภาพและเสียง ประกอบด้วย Camera, Player, Image Picker, Sound, VideoPlayer

ภาพที่ 3-6 เครื่องมือที่ใช้จัดการกับมัลติมีเดียทั้งภาพและเสียง

7

3.6.6 Animation ประกอบด้วย Ball ,Image Sprite เป็นเครื่องมือใช้จัดการกับภาพเคลื่อนไหวแอนิเมชั่น

ภาพที่ 3-7 เครื่องมือใช้จัดการกับภาพเคลื่อนไหวแอนิเมชั่น

3.6.7 Social เป็นเครื่องมือที่ใช้งานด้านการติดต่อสื่อสาร แสดงรายชื่อ อีเมลล์ หมายเลข โทรศัพท์ ฯลฯ ประกอบด้วย Contract Picker , EmailPicker,PhoneCall, PhoneNumeberPicker, Texting ,Twitter

ภาพที่ 3- 8 เครื่องมือที่ใช้งานด้านการติดต่อสื่อสาร แสดงรายชื่อ อีเมลล์ หมายเลข

3.6.8 Sensers เป็นหมวดของเครื่องมือที่ใช้ติดต่อกับตัวตรวจจับที่อยู่ภายในอุปกรณ์แอน ดรอยด์ประกอบด้วย AccelerometerSenser, LocationSenser และ OrientationSensor ใช้ในการวัดความเร่ง ความเอียง และตรวจจับต าแหน่งที่ตั้ง เครื่องมือเหล่านี้จะมาพร้อมกับอุปกรณ์แอนดรอยด์รุ่นใหม่ๆ

ภาพที่ 3-9 เครื่องมือที่ใช้ติดต่อกับตัวตรวจจับที่อยู่ภายในอุปกรณ์แอนดรอยด์

8

3.6.9 Screen Arrangement ใช้จัดการเก่ียวกับการวางต าแหน่งของเครื่องมือต่างๆ ซึ่งจะ ช่วยให้การจัดการกับแอปพลิเคชั่น รวมถึงช่วยให้การเขียนโปรแกรมท าได้ง่ายขึ้นด้วย ในหมวดนี้ประกอบด้วย HorizontalArrangement - การวางต าแหน่งในแนวนอน, Table Arrangement - การวางแบบตาราง และ Vertical Arrangement – การวางต าแหน่งในแนวตั้ง

ภาพที่ 3-10 การวางต าแหน่งของเครื่องมือต่างๆ

3.6.10 LEGO MINSTORMS เป็นหมวดเครื่องมือที่ออกแบบมาเพ่ือใช้พัฒนาแอปพลิเคชั่นบน

บอร์ดควบคุม NXT ของ LEGO เช่น NxtDrive ส าหรับขับมอเตอร์, NxtColorSensor ส าหรับตัวตรวจจับส,ีNxtSoundSensor ส าหรับตัวตรวจจับเสียง, NxtUltrasonicSensor ส าหรับตัววัดระยะทางด้วยคลื่นความถี่เหนือเสียงหรืออัลตร้าโซนิก

ภาพที่ 3-11 เครื่องมือที่ออกแบบมาเพ่ือใช้พัฒนาแอปพลิเคชั่น

9

3.6.11 Other stuff เป็นกลุ่มของเครื่องมือเสริม ซึ่งอาจมีเพ่ิมข้ึนได้อนาคต

ภาพที่ 3-12 เครื่องมือเสริม

Bluetooth Client และ Bluetooth Server - ใช้ในการติดต่อกับอุปกรณ์บลูทูธ Notifier - ใช้ตรวจสอบการท างานของโปรแกรมและแสดงข้อความผิดพลาดของการท างาน Speech Recognizer - วิเคราะห์เสียงพูด เพ่ือเปลี่ยนให้เป็นข้อความ TextToSpeech – เปลี่ยนข้อความให้เป็นเสียงพ

3.6.12 Not ready for prime time เป็นกลุ่มของเครื่องมือที่ยังอยู่ในระหว่างการพัฒนา และยังไม่พร้อมใช้งานในขณะนี้ ประกอบด้วย FusiontablesControl, GameClient, SoundRecorder, Voting,WebViewer

ภาพที 3-13 เครื่องมือที่ยังอยู่ในระหว่างการพัฒนา และยังไม่พร้อมใช้งานในขณะนี้

10

3.7 ส่วนหัวของโปรเจกประกอบด้วย 3.7.1 My Project เป็นเมนูแสดงรายชื่อไฟล์โปรเจกทั้งหมดที่ถูกสร้างไว้ เพ่ิมลบ แก้ไข ได้

ภาพที่ 3- 14 เมนูแสดงรายชื่อไฟล์โปรเจก

3.7.2. Design เป็นส่วนของการแสดงเครื่องมือทั้งหมดที่ส าคัญในการพัฒนาแอปพลิเคชั่น มีส่วนประกอบหลักดังนี้ Palette รวมเครื่องมือต่างๆ ที่ใช้ในการพัฒนาโปรเจก, Viewer แสดงหน้าตาของแอปพลิเคชั่นที่ได้จากการออกแบบ, Components แสดงรายชื่อเครื่องมือที่ใช้ในโปรเจก, Properties แสดงคณุสมบัติและความสามารถต่างๆ ของเครื่องมือแต่ละตัวที่ใช้งาน

ภาพที่ 3-15 เครื่องมือทั้งหมดที่ส าคัญในการพัฒนาแอปพลิเคชั่น

11

3.7.3. Learn แสดงเนื้อหา รายละเอียดต่างๆ ของการเรียนรู้เกี่ยวกับการใช้งาน App Inventor

ภาพที่ 3-16 เนื้อหา รายละเอียดต่างๆ ของการเรียนรู้เกี่ยวกับการใช้งาน App Inventor

3.7.4. Viewer เป็นมุมมองส าหรับแสดงหน้าตาแอปพลิเคชั่นที่ก าลังพัฒนาอยู่ ซึ่งในกรณีสร้างโปรเจกใหม่ จะเห็นเป็นพ้ืนที่ว่างเปล่า

ภาพที่ 3- 17 หน้าตาแอปพลิเคชั่น

12

3.7.5. พื้นที่ที่ใช้ส าหรับออกแบบหน้าตาและพัฒนาแอปพลิเคชั่น

ภาพที่ 3- 18 ออกแบบหน้าตาและพัฒนาแอปพลิเคชั่น

3.7.6. กรอบแสดงรายช่ือเครื่องมือทั้งหมดที่มีอยู่ในแอปพลิเคชั่น

ภาพที่ 3-19 รายช่ือเครื่องมือทั้งหมดที่มีอยู่ในแอปพลิเคชั่น

3.8. เครื่องมือที่ส าคัญและจ าเป็นต้องใช้งานทุกครั้งที่พัฒนาโปรเจก ประกอบด้วย 3.8.1. Open the Blocks Editor เป็นปุ่มเรียกเปิดหน้าต่าง Block Editor เพ่ือ แก้ไข แอปพลิเคชั่น 3.8.2. Package for Phone เมนูเลือกการแสดงผลลัพธ์

3.8.3. Show Barcode เมื่อคลิกเลือกจะแสดงบาร์โค้ดของลิงก์ท่ีใช้ในการดาวน์โหลด

13

ภาพที่ 3- 20 เครื่องมือที่ส าคัญๆ

3.8.4. Download to this Computer เป็นค าสั่งดาวน์โหลดโปรแกรมไปยังคอมพิวเตอร์ซึ่งจะได้ไฟล์นามสกุล .apk ที่น าไปติดตั้งบนโทรศัพท์เคลื่อนที่ระบบปฏิบัติการแอนดรอยด์ได้

ภาพที่ 3- 21 ค าสั่งดาวน์โหลดโปรแกรมไปยังคอมพิวเตอร์

3.8.5. Download to Connected Phone ใช้ดาวน์โหลดโปรแกรมไปยังโทรศัพท์เคลื่อนที่และติดตั้ง ซึ่งจะได้แอปพลิเคชั่นที่พร้อมท างานได้เลย 1. Properties แสดงคุณสมบัติการท างานของเครื่องมือแต่ละตัว

2. แสดงช่ือผู้ใช้งาน หลังจาก login เข้าสู่ระบบ

14

3.9. การสร้างโปรเจกใหม่ 3.9.1. คลิกเลือกท่ีเมนู My Projects จะปรากฏหน้าต่างโปรแกรมแสดงรายชื่อแอปพลิเคชั่นขึ้นมา คลิก New

ภาพที่ 3- 22 หน้าต่างโปรแกรมแสดงรายชื่อแอปพลิเคชั่น

3.9.2. จะปรากฏหน้าต่าง New App Inventor for Android Project ในช่อง Project name ให้ตั้งชื่อแอปพลิเคชั่นที่ต้องการ ในที่นี้ตั้งชื่อว่า Control blue จากนั้นคลิกที่ปุ่ม OK

ภาพที่ 3- 23 หน้าต่าง New App Inventor for Android Project

15

3.9.3. จะปรากฏชื่อของโปรเจกที่สร้างขึ้นมาใหม่ในรายชื่อของโปรเจกทั้งหมด

ภาพที่ 3- 24 ชื่อของโปรเจกที่สร้างขึ้นมาใหม่

3.10.การดาวน์โหลดไฟล์โปรเจกและการอัพโหลดไฟล์โปรเจก 3.10.1. คลิกไฟล์โปรเจกที่ต้องการดาวน์โหลด หลงัจากนั้นคลิกเลือกที่ Download Source แล้วเลือกพ้ืนที่ที่ต้องการจัดเก็บ

ภาพที่ 3- 25 โปรเจกที่ต้องการดาวน์โหลด

16

3.10.2. หลังจากดาวน์โหลดแล้ว จะได้ไฟล์ที่ถูกบีบอัดเป็นไฟล์นามสกุล .zip เป็นชื่อเดียวกับไฟล์โปรเจก

ภาพที่ 3-26 ไฟล์ที่ถูกบีบอัด

3.10.3. จะได้ไฟล์ ControlBlue.zip ซึ่งเป็นไฟล์ที่ได้จากการดาวน์โหลด ผู้ใช้งานสามารถน าไฟล์ที่ได้ไปแจกจ่ายให้กับผู้อ่ืน เพ่ือดัดแปลงแก้ไขต่อได้ 3.10.4. การอัพโหลดไฟล์มีจุดประสงค์เพ่ือน าไฟล์ที่ต้องการนี้อัพโหลดขึ้นเซิร์ฟเวอร์ ซึ่งไฟล์นั้นจะเป็นไฟล์ที่ถูกบีบอัด ก่อนอื่นให้คลิกเลือกที่ More Actions จะปรากฏรายการให้เลือก 2 รายการ คลิกเลือกท่ี Upload Source

ภาพที่ 3- 27 อัพโหลดขึ้นเซิร์ฟเวอร์

17

3.10.5. จะปรากฏหน้าต่าง Upload Project ขึ้นมา ให้เลือกไฟล์ที่ต้องการอัพโหลด หลังจากนั้น คลิกท่ีปุ่ม OK

ภาพที่ 3-28 หน้าต่าง Upload Project

3.10.6. หลังจากท่ีอัพโหลดไฟล์ส าเร็จแล้ว จะปรากฏรายชื่อของไฟล์นั้นขึ้นมาแสดงอยู่ในรายชื่อของ Projectsทั้งหมด แสดงว่าการอัพโหลดเสร็จสิ้น 3.11. ตัวอย่างการพัฒนาแอปพลิเคชั่นเพื่อควบคุมการท างานของบอร์ด ControlBLUE-04 หลังจากท่ีได้กล่าวถึง เครื่องมือพื้นฐาน เมนูค าสั่ง และการใช้งานเบื้องต้นแล้ว ต่อไปจะเป็นตัวอย่างการพัฒนาแอปพลิเคชั่น เพ่ือน าไปควบคุมอุปกรณ์ภายนอก ซึ่งใช้การสื่อสารข้อมูลแบบไร้สายผ่านสัญญาณ บลูทูธ โดยมีหลักการท างานคือ ใช้โทรศัพท์เคลื่อนที่ที่มีระบบปฏิบัติการแอนดรอยด์ท าหน้าที่ส่งสัญญาณผ่านบลูทูธไปยังบอร์ดควบคุม ControlBLUE-04 ที่ติดตั้งโมดูล ZX-BLUETOOTH ส าหรับสื่อสารข้อมูลกับอุปกรณ์แอนดรอยด์ 3.11.1 ออกแบบหน้าตาของแอปพลิเคชั่น 1. เริ่มต้นด้วยการคลิกเลือกเครื่องมือ Image และ HorizontalArrangement

ภาพที่ 3-29 การน า เครื่องมือ Image มาใส่ เพ่ือโชว์ภาพที่ต้องการ

18

2. คลิกเลือกเครื่องมือ List Picker ในหมวด Basic แล้วลากไปวางไว้บริเวณพ้ืนที่ว่างที่ใช้ในการพัฒนาแอปพลิเคชั่น เปลี่ยนชื่อข้อความ เปลี่ยนขนาดตัวอักษร และเปลี่ยนขนาดความกว้างดังแสดงในภาพ

ภาพที่ 3-30 ออกแบบหน้าตาของแอปพลิเคชั่น

3. หลังจากแก้ไขเรียบร้อยแล้ว จะปรากฏข้อความบนปุ่มกดเป็น เขื่อมต่อกับบลูทูธ ขนาดของตัวอักษร 20 และขนาดความกว้างของปุ่มกดจะเต็มหน้าจอพัฒนาพอดี

ภาพที่ 3-31 ปุ่มกดเป็น Connect

19

4. ควรตั้งชื่อปุ่มของเครื่องมือให้ง่ายต่อการจ า ขั้นตอนการเปลี่ยนชื่อท าได้ดังนี้ เลือกเครื่องมือที่ต้องการจะเปลี่ยนชื่อ ในที่นี้คือ ListPicker1 หลงัจากนั้นคลิกที่ Rename

ภาพที่ 3-32 ขั้นตอนการเปลี่ยนชื่อ

5. จะปรากฏหน้าต่าง Rename Component ขึ้น ให้เปลี่ยนชื่อตามต้องการ ในตัวอย่างนี้เปลี่ยนชื่อเป็น CONNECT เพ่ือให้สอดคล้องกับการท างานของตัวมันเอง แก้ไขชื่อใหม่ลงไปที่ช่อง New name หลังจากนั้นคลิกปุ่ม OK

ภาพที่ 3-33 เปลี่ยนชื่อตามต้องการ

20

6. หลังจากเปลี่ยนชื่อแล้ว จะปรากฏชื่อใหม่ที่ได้ตั้งไว้แสดงให้เห็นดังภาพ

ภาพที่ 3-34 เปลี่ยนชื่อเป็นชื่อใหม่

7. TableArrangement เป็นเครื่องมือที่จะช่วยจัดระเบียบหน้าตาของแอปพลิเคชั่น ช่วยให้การท างานง่ายขึ้น และยังช่วยให้การเขียนโปรแกรมสั้นลงด้วย ลักษณะการท างานจะคล้ายๆ กับการรวมกลุ่มอุปกรณ์หรือจับกลุ่มนั่นเอง ท าการเลือก Vertical Arrangement แล้วลากไปวางไว้ยังบริเวณพ้ืนที่ว่างที่ใช้ส าหรับพัฒนาโปรแกรม

ภาพที่ 3-35 เครื่องมือที่จะช่วยจัดระเบียบหน้าตาของแอปพลิเคชั่น

21

8. ตั้งค่าคุณสมบัติเริ่มต้นให้กับ TableArrangement ใหม่ให้เป็นดังภาพ โดยเปลี่ยนค่า Width ให้เป็น Fill Parent

ภาพที่ 3- 36 การตั้งค่าคุณสมบัติเริ่มต้นให้กับ TableArrangement

9. หลังจากท่ีเปลี่ยนคุณสมบัติของ TableArrangement แล้วจะปรากฏดังภาพ

ภพาที่ 3- 37 เปลี่ยนคุณสมบัติของ TableArrangement

22

10. ขั้นตอนต่อไปนี้เป็นการน าเครื่องมือ Label ไปวางไว้ในพ้ืนที่ว่างภายใน TableArrangement

ภพาที่ 3- 38 การน าเครื่องมือ Label ไปวางไว้ในพ้ืนที่ว่างภายใน TableArrangement

11. ก าหนดคุณสมบัติต่างๆ ของ Button1 โดยให้เปลี่ยนขนาดตัวอักษร, ข้อความที่ปรากฏบนปุ่มกด, ความกว้าง และชื่อประจ าตัว ดังรูป

ภาพที่ 3- 39 ก าหนดคุณสมบัติต่างๆ ของ Button1

23

12. หลังจากเปลี่ยนแปลงค่าคุณสมบัติต่างๆ ของ Button แล้ว จะได้ผลลัพธ์ดังรูป

ภาพที่ 3-40 การเปลี่ยนแปลงค่าคุณสมบัติต่างๆ ของ Button

13. ถ้าต้องการ ตกแต่งปุ่ม ให้สวยงาม ให้กดที่ Image แล้ว กด Upload new… แล้วเลือกไฟล์

รูปที่ต้องการ

ภาพที่ 3-41 การตกแต่งปุ่มต่างๆให้สวยงาม

24

14. หลังจากท่ีเลือกไฟล์รูปที่ต้องการ ก็จะได้ปุ่มที่สวยงาม

ภาพที่ 3-42 การตกแต่งปุ่มให้สวยงาม

15. ถ้าต้องการเปลี่ยนสีตัวอักษร เลือกที่ Text Color แล้วเลือกสีตามที่ต้องการ

ภาพที่ 3-43 การเปลี่ยนสีตัวอักษร

25

16. Bluetooth Client เป็นเครื่องมือส าคัญที่ต้องใช้เพ่ือช่วยในการเชื่อมต่อกับบลูทูธ วิธีกาเรียก ใช้งานก็เหมือนกับอุปกรณ์ท่ีผ่านมาคือ ลากแล้ววางบริเวณหน้าต่างแอปพลิเคชั่น จะปรากฏสัญลักษณ์บลูทูธบริเวณด้านล่างของหน้าต่างแอปพลิเคชั่น Notifier เป็นเครื่องมือที่ใช้ในการแสดงข้อความแจ้งเตือนในกรณีท่ีแอปพลิเคชั่นท างานผิด พลาด ให้ลาก Notifier จากแถบเครื่องมือ ไปวางบริเวณพ้ืนที่ว่างที่ใช้พัฒนาแอปพลิเคชั่น จากนั้นจะปรากฏรูปไอคอนที่บริเวณด้านล่าง BluetoothClient1 ดังรูป เป็นอันเสร็จสิ้นดังรูป

ภาพที่ 3-44 เครื่องมือส าคัญที่ต้องใช้เพื่อช่วยในการเชื่อมต่อกับบลูทูธและเครื่องมือที่ใช้ในการแสดงข้อความแจ้งเตือนในกรณีท่ีแอปพลิเคชั่นท างานผิดพลาดที่กล่าวมาท้ังหมดเป็นเพียงแนวทางในการออกแบบหน้าตาของแอปพลิเคชั่นเท่านั้น โดยขอกล่าวถึงเครื่องมือในภาพรวม และไม่ได้กล่าวถึงเครื่องมือทั้งหมด ผู้ที่สนใจจะพัฒนาแอปพลิเคชั่นในลักษณะนี้ควรศึกษาหาข้อมูลเพ่ิมเติม

26

17. หลังจากตกแต่งหรือออกแบบ From เสร็จแล้วจะได้ดังรูป

ภาพที่ 3-45 การออกแบบ From ให้สวยงาม

3.11.2 ขั้นตอนการพัฒนาโปรแกรม หลังจากท่ีเสร็จสิ้นกระบวนการในการออกแบบหน้าตาของแอปพลิเคชั่นแล้ว ล าดับต่อไปเป็นการเริ่ม ต้นพัฒนาโปรแกรม ซึ่งมีข้ันตอนดังนี้

1. เริ่มต้นด้วยการคลิกที่ Open the Blocks Editors เพ่ือเปิดหน้าต่าง Block Editor ขึ้นมา

ภาพที่ 3-46 Open the Blocks Editors เพ่ือเปิดหน้าต่าง Block Editor

27

2. จะปรากฏหน้าต่าง Downloading application ขึ้นมา หลังจากนั้นจะแสดงข้อความเพ่ือถามว่า ต้องการให้ App Inventor for Android Blocks Editor ท างานหรือไม่ ให้คลิกเลือกที่ปุ่ม Run เพ่ือสั่งให้ท างาน

ภาพที่ 3-47 หน้าต่าง Downloading application และ App Inventor for Android Blocks Editor ท างานหรือไม่ ให้คลิกเลือกท่ีปุ่ม Run เพ่ือสั่งให้ท างาน

3. จะปรากฏหน้าต่าง App Inventor for Android Blocks Editor : Control Blue

ภาพที่ 3-48 หน้าต่าง App Inventor for Android Blocks Editor : ControlBlue

28

4. แสดงรายการเครื่องมือพื้นฐานในหมวด Built-In อันเป็นเครื่องมือที่ส่วนใหญ่จะต้องใช้เป็น ประจ า ประกอบด้วย Definition,Text,List,Math,Logic,Control,Colors เครื่องมือแต่ละตัวมีหน้าที่การท างานและคุณสมบัติที่แตกต่างกันไป

ภาพที่ 3-49 เครื่องมือพื้นฐานในหมวด Built-In

5. ที่แท็บ My Blocks จะแสดงรายการของเครื่องมือที่ได้ออกแบบไว้ที่หน้าต่าง Design ในเครื่องมือแต่ละตัวก็จะมีหน้าที่การท างานและคุณสมบัติที่แตกต่างกันไป

ภาพที่ 3-50 My Blocks แสดงรายการของเครื่องมือที่ได้ออกแบบไว้ที่หน้าต่าง Design

29

6. ที่แท็บ Advancde มีเครื่องมือพิเศษที่ออกแบบมาเพ่ิมเติมเพ่ือให้ใช้งานในระดับที่ซับซ้อนขึ้น

ภาพที่ 3-51 Advancde เครื่องมือพิเศษที่ออกแบบมาเพ่ิมเติม

7. ลากบล็อก Disconnect.Click, BluetoothCilent1.Disconnect, CONNECT.Visible, true, VerticalArrangement1.Visible และ false ไปวางบนพื้นที่ว่าง

ภาพที่ 3-52 อธิบายการท างานของบล็อกนี้ได้ว่า เมื่อมีการคลิกท่ีปุ่ม Disconnect การเชื่อมต่อบลูทูธจะถูกยกเลิกปุ่ม CONNECT จะแสดงขึ้นบนหน้าจอ และปุ่ม ON1 ถึง ON4 และ Relay OFF จะไม่แสดงผล

30

8. ลากบล็อกที่เหลือไปวางยังพ้ืนที่ว่าง

ภาพที่ 3-53 การลากบล็อกท่ีเหลือไปวางยังพ้ืนที่ว่าง

อธิบายการท างานได้ดังนี้ เมื่อปุ่ม ON1 ถูกคลิก โปรแกรมจะส่งค่าของตัวอักษร A ผ่าน บลูทูธของโทรศัพท์ไปยังบอร์ดไมโครคอนโทรลเลอร์ที่มีการติดตั้งโมดูลบลูทูธไว้เพื่อคอยตรวจสอบข้อมูลที่จะถูกส่งมาจากโทรศัพท์ เพ่ือท าการเปิดไฟ

9. ลากบล็อกที่เหลือไปวางยังพ้ืนที่ว่าง

ภาพที่ 3-54 การลากบล็อกท่ีเหลือไปวางยังพ้ืนที่ว่าง

อธิบายการท างานได้ดังนี้ เมื่อปุ่ม OFF1 ถูกคลิก โปรแกรมจะส่งค่าของตัวอักษร a ผ่าน

31

บลูทูธของโทรศัพท์ไปยังบอร์ดไมโครคอนโทรลเลอร์ที่มีการติดตั้งโมดูลบลูทูธไว้เพื่อคอยตรวจสอบข้อมูลที่จะถูกส่งมาจากโทรศัพท์ เพ่ือท าการปิดไฟ

10. ลากบล็อกที่เหลือไปวางยังพ้ืนที่ว่าง

ภาพที่ 3-55 การลากบล็อกท่ีเหลือไปวางยังพ้ืนที่ว่าง

อธิบายการท างานได้ดังนี้ เมื่อปุ่ม RELAYON ถูกคลิก โปรแกรมจะส่งค่าของตัวอักษร A B C D ทั้งหมด ผ่านบลูทูธของโทรศัพท์ไปยังบอร์ดไมโครคอนโทรลเลอร์ที่มีการติดตั้งโมดูลบลูทูธไว้เพ่ือคอยตรวจสอบข้อมูลที่จะถูกส่งมาจากโทรศัพท์ เพ่ือท าการเปิดไฟทั้งหมด

11. ลากบล็อกที่เหลือไปวางยังพ้ืนที่ว่าง

ภาพที่ 3-56 การลากบล็อกท่ีเหลือไปวางยังพ้ืนที่ว่าง

อธิบายการท างานได้ดังนี้ เมื่อปุ่ม RELAYOFF ถูกคลิก โปรแกรมจะส่งค่าของตัวอักษร a b c d ทั้งหมด ผ่านบลูทูธของโทรศัพท์ไปยังบอร์ดไมโครคอนโทรลเลอร์ที่มีการติดตั้งโมดูลบลูทูธไว้เพ่ือคอยตรวจสอบข้อมูลที่จะถูกส่งมาจากโทรศัพท์ เพ่ือท าการปิดไฟทั้งหมด

32

12. ลากบล็อกที่เหลือไปวางยังพ้ืนที่ว่าง

ภาพที่ 3-57 การลากบล็อกท่ีเหลือไปวางยังพ้ืนที่ว่าง

อธิบายการท างานได้ดังนี้ เมื่อปุ่ม DISCONNECT ถูกคลิก โปรแกรมจะหยุดการเชื่อมต่อของบลูทูธของโทรศัพท์ไปยังบอร์ดไมโครคอนโทรลเลอร์ที่มีการติดตั้งโมดูลบลูทูธไว้

3.11.3. ทดสอบการท างานบนอีมูเลเตอร์ 1. คลิกเลือกท่ี New emulator จะปรากฏหน้าต่าง Emulator ขึ้นมา หน้าตาจะคล้ายๆ กับหน้าจอของโทรศัพท์เคลื่อนที่ที่ติดตั้งระบบปฏิบัติการแอนดรอยด์

ภาพที่ 3-58 คลิกเลือกท่ี New emulator จะปรากฏหน้าต่าง Emulator

33

2. ที่เมน ูConnect to device จะแสดงรายการของอุปกรณ์ ซึ่งตอนนี้จะเห็นว่า มีสองรายการเนื่องจากยังไม่ได้เชื่อมต่อกับโทรศัพท์เคลื่อนที่ 4 เมื่อเลือกเมนู Reset connections เป็นการสั่งให้ยกเลิกการเชื่อมต่อปัจจุบัน และสั่งให้โปรแกรมเริ่มการเชื่อมต่อใหม่ ส่วนใหญ่จะเลือกใช้ในเวลาที่โปรแกรมมีปัญหาหรือในกรณีท่ีต้องการยกเลิกการเชื่อมต่อปัจจุบัน เพ่ือเชื่อมต่อกับอุปกรณ์อ่ืนๆ

ภาพที่ 3-59 เมน ูConnect to device จะแสดงรายการของอุปกรณ์ และเมนู Reset connections เป็นการสั่งให้ยกเลิกการเชื่อมต่อปัจจุบัน และสั่งให้โปรแกรมเริ่มการเชื่อมต่อใหม่ 3. เมื่อเลือกค าสั่ง emulators -5554 เป็นการสั่งให้แอปพลิเคชั่นแสดงผลการท างานบนหน้าจอของ emulator เพ่ือทดสอบการท างานของแอปพลิเคชั่น หรือพูดง่ายๆ ว่า เป็นการจ าลองการท างานนั่นเอง โดยการท างานของอีมูเลเตอร์ จะคล้ายกับการท างานจริงบนโทรศัพท์เคลื่อนที่ ดังรูป

ภาพที่ 3-60 การทดสอบการท างานของแอปพลิเคชั่น

34

4. ที่หน้าต่าง Design คลิกเลือกไปที่ Download to this Computer เพ่ือดาวน์โหลดและติดตั้งแอปพลิเคชั่น

ภาพที่ 3-61 การดาวน์โหลดแอปพลิเคชั่น

5.ก าลังท าการดาวน์โหลดไฟล์

ภาพที่ 3-62 ไฟล์ก าลังถูกดาวน์โหลด

35

6. ไฟล์แอพพลิเคชั่น

ภาพที่ 3-63 ไฟล์ถูกดาวน์โหลดมายัง Computer แล้ว

7. หลังจากท่ีได้ไฟล์แอพพลิเคชั่นแล้ว น าไปติดตั้งที่แท็บเล็ตก็เรียบร้อยแล้ว

ภาพที่ 3-64 Icon แอพพลิเคชั่น

36

3.11.4. เพิ่มเติมในส่วนโค้ด 1. แบบ From เพ่ิมในส่วนของเรื่องเวลา

ภาพที่ 3-65 การเพ่ิมเครื่องมือ Clock ในการใช้จับเวลา

2. เป็นโค้ดท่ีท าให้ส่วนนาฬิกาท างาน

ภาพที่ 3-66 ท าให้เครื่องมือ Clock ท างาน

37

3. เป็นโค้ดในส่วนการตั้งเวลา ที่สามารถก าหนดหรือตั้งเวลาลบและบวก (เป็น ชม.)

ภาพที่ 3-67 การก าหนดเวลาลบและบวก (เป็น ชม.)

4. เป็นโค้ดในส่วนการตั้งเวลา ที่สามารถก าหนดหรือตั้งเวลาลบและบวก (เป็น นาที.)

ภาพที่ 3-68 การก าหนดเวลาลบและบวก (เป็น นาที.)

38

5. หน้าตา From ที่ออกแบบใหม่

ภาพที่ 3-69 แบบ From ใหม ่

39

3.11.5. ทดสอบการท างานกับฮาร์ดแวร์จริง การใช้งาน

1. เปิดอุปกรณ์ท่ีใช้ส่งสัญญาณ

BLUETOOTH Board ControlBLUE-04

ภาพที่ 3-70 อุปกรณ์ที่ใช้ส่งสัญญาณ

BLUETOOTH Board ControlBLUE-04

2. ท าการจับคู่อุปกรณ์ BLUETOOTH

ภาพที่ 3-71 การจับคู่อุปกรณ์ BLUETOOTH ระหว่าง Tablet กับ BLUETOOTH Board

ControlBLUE-04

40

3. เสียบปลั๊กไฟ และเปิดสวิทช์ไฟ

ภาพที่ 3-72 อุปกรณ์ท้ังหมด

4. เมื่อท าการเชื่อมต่อบลูทูธและจับคู่อุปกรณ์แล้ว ให้ท าการเปิดแอพพลิเคชั่นขึ้นมา

ภาพที่ 3-73 แอพพลิเคชั่น LIGHTCONTROLLER

41

5. กดปุม่ “เชื่อมต่อกบับลทููธ” โปรแกรมจะเริม่ท ำกำรจบัคู่อุปกรณ์ส่งสญัญำณทธูทนัท ี

ภาพที่ 3-74 กำรจบัคู่อุปกรณ์ส่งสญัญำณทธู

6. ท าการตั้งเวลาหรือก าหนดเวลาที่เราต้องการจะปิดไฟ แล้วกดท่ีปุ่มเปิด เวลาที่ก าหนดจะ

ท างานเริ่มนับถอยหลัง

ภาพที่ 3-75 การตั้งเวลาปิดไฟ

42

7. เมื่อเวลานับถอยหลังจนหมด เลขที่ก าหนดจะกลายเป็นศูนย์ เพื่อเริ่มค่าใหม่

ภาพที่ 3-76 กลับสู่ค่าเริ่มต้นเมื่อเวลาหมด

8. ผลการท างาน

ภาพที่ 3-70 ผลการท างาน

43