ส่วนประกอบของโปรแกรม App Inventor

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

การสร้างแอพพลิเคชันจะแบ่งการทำงานออกเป็นสองส่วน คือ ส่วนออกแบบ (App Inventor Designer) ที่จะให้เราเลือกคอมโพเนนท์ที่ต้องการสำหรับที่จะให้สร้างแอพพลิเคชัน ส่วนที่สองเป็นส่วนการเขียนโค้ด (App Inventor Blocks Editor) ที่ให้เราเขียนโค้ดด้วยการต่อบล๊อกต่างๆ เข้าด้วยกันเป็นคำสั่ง ซึ่งจะเป็นการกำหนดพฤติกรรมหรือเหตุการณ์ที่เกิดขึ้นกับคอมโพเนนท์ การเขียนโปรแกรมจะเสมือนการต่อชิ้นส่วนตัวต่อจิ๊กซอว์เข้าด้วยกัน ในแต่ละขั้นตอนการสร้างจะสามารถทำการทดสอบได้ทุกขณะ และเมื่อสร้างเสร็จสมบูรณ์แล้วจะสามารถแพ็คเกจแอพพลิเคชันเพื่อนำไปใช้งานบนโทรศัพท์ระบบปฏิบัติการ Android เครื่องใดก็ได้ หรือหากไม่มีโทรศัพท์ระบบปฏิบัติการ Android ก็สามารถที่จะทดสอบได้บนโทรศัพท์จำลองที่ทำงานอยู่บนคอมพิวเตอร์ซึ่งจะมีลักษณะการทำงานเหมือนโทรศัพท์จริงทุกประการ สภาพแวดล้อมในการพัฒนาด้วยโปรแกรม App Inventor นั้น สนับสนุนระบบปฏิบัติการที่หลากหลาย ไม่ว่าจะเป็นระบบปฏิบัติการ Mac OS X, GNU / Linux และระบบปฏิบัติการ Windows และแอพพลิเคชันที่สร้างขึ้นนั้นสามารถติดตั้งและทำงานได้บนโทรศัพท์ระบบปฏิบัติการ Android หลากหลายรุ่นที่เป็นที่นิยมในปัจจุบัน

 

ภาพ 1 แอพพลิเคชันที่สร้างขึ้นด้วยโปรแกรม App Inventor ในหน้าต่างเว็บเบราเซอร์

1.1.1   ส่วนออกแบบ (App Inventor Designer)

ในขั้นตอนแรกของการสร้างแอพพลิเคชันด้วย App Inventor เริ่มจากการเลือกคอมโพเนนท์ที่ต้องการและจัดวางลงในส่วนของการออกแบบโดยจะทำผ่านส่วนของการออกแบบ (App Inventor Designer) ดังที่แสดงในภาพที่ 1 แสดงให้เห็นถึงแอพพลิเคชันที่สร้างขึ้นในหน้าต่างเว็บเบราเซอร์ โดยด้านซ้ายจะเป็นส่วนของคอมโพเนนท์ที่ App Inventor เตรียมไว้ให้จัดเรียงเป็นหมวดหมู่ เช่น ปุ่ม (button) ข้อความ (label) กล่องข้อความ (text box) เป็นต้น ผู้ใช้ทำการเพิ่มคอมโพเนนท์ที่เลือกด้วยการคลิกลากลงไปวางไว้ในโปรเจค

ภาพ 2 หน้าจอการจัดการโปรเจค (My Projects)

อินเตอร์เฟสบนหน้าเว็บ App Inventor นั้นจะประกอบด้วยแท็บที่จะปรากฏในส่วนบนของหน้าเว็บซึ่งจะใช้ในการเข้าไปจัดการโปรเจค (My Projects) ส่วนการออกแบบ (Design) ส่วนการเรียนรู้คำสั่ง (Learn) ในหน้าจอการจัดการโปรเจคดังภาพ 2 จะสามารถเข้าไปจัดการสร้าง ลบ ดาวน์โหลด หรือเลือกโปรเจคที่สร้างและได้ทำการบันทึกไว้เพื่อกลับมาแก้ไขในหน้าจอส่วนการออกแบบได้

 

ภาพ 3 หน้าจอส่วนคอมโพเนนท์ที่มีให้เลือก

 

 

ภาพ 4 หน้าจอการออกแบบ (Viewer)

 

ในส่วนหน้าจอการออกแบบ ปุ่มที่อยู่ทางด้านบนจะใช้เพื่อการบันทึกโปรเจคในลักษณะต่างๆ การเพิ่มและลบหน้าจอ Screen ปุ่มสำหรับการเปิดส่วนการเขียนโค้ด (Open the Blocks Editor) และการจัดแพ็คเกจแอพพลิเคชันเพื่อนำไปใช้งานบนโทรศัพท์ระบบปฏิบัติการ Android ต่อไป ในการสร้างแอพพลิเคชันที่หน้าจอส่วนการออกแบบนี้ ผู้ใช้จะเลือกคอมโพเนนท์ที่อยู่ทางด้านซ้ายของหน้าจอดังภาพ 3 คลิกลากเพื่อนำมาวางลงในส่วน Viewer ที่อยู่ตรงกลางหน้าจอดังภาพ 4 หลังจากนั้นคอมโพเนนท์ที่เลือกนำมาวางจะปรากฏในส่วน Viewer ตามมุมมองของผู้ใช้ซึ่งสามารถเลือกจัดวางลงในตำแหน่งที่เหมาะสมได้ตามต้องการ และคอมโพเนนท์นั้นยังปรากฏในส่วนรายการคอนโพเนนท์ (Components) ดังภาพ 5 เรียงกันเป็นรายการเพื่อให้ดูง่ายและสามารถเลือกคอมโพเนนท์ที่ต้องการกำหนดคุณสมบัติจากรายการนี้แล้วกำหนดคุณสมบัติต่างๆ ที่หน้าจอส่วนคุณสมบัติ (Properties) ดังภาพ 6 ซึ่งจะเป็นคุณสมบัติเฉพาะของคอมโพเนนท์นั้นๆ

ภาพ 5 หน้าจอส่วนคอมโพเนนท์ (Components) ที่เลือกนำมาใช้ในโปรเจค

ภาพ 6 หน้าจอส่วนคุณสมบัติของคอมโพเนนท์ (Properties)

นอกจากในกลุ่มของคอมโพเนนท์ทั่วไปแล้วยังมีคอมโพเนนท์ที่มองไม่เห็น (Non-Visible Components) ซึ่งเมื่อนำมาวางในหน้าจอ Viewer แล้วจะไม่ปรากฎคอมโพเนนท์ดังกล่าวที่หน้าจอ Viewer แต่จะปรากฏที่หน้าจอรายการคอมโพเนนท์แทน คอมโพเนนท์ที่มองไม่เห็นนี้จะประกอบไปด้วยคอมโพเนนท์ในกลุ่ม Sersors ซึ่งประกอบไปด้วยคอมโพเนนท์ที่เกี่ยวข้องกับการเรียกใช้ตัวตรวจจับต่างๆ ที่มีอยู่ในโทรศัพท์ เช่น ระบบ GPS หรือ Accelerometers เป็นต้น กลุ่ม Notifiers ซึ่งเกี่ยวข้องกับความสามารถในการแจ้งเตือนต่างๆ หรือการเขียนบันทึกกิจกรรมของโทรศัพท์ ซึ่งคอมโพเนนท์ในกลุ่ม Notifiers นั้นจะมองไม่เห็นหรือถูกซ่อนไว้ แต่จะสามารถมองเห็นได้เมื่อเกิดการแจ้งเตือนหรือสอบถามโดยมีการโต้ตอบกับผู้ใช้ในรูปของข้อความ เสียง ปุ่ม หรือช่องสำหรับกรอกข้อมูล ที่จะแสดงให้ผู้ใช้เห็นเป็นครั้งคราวเท่านั้น กลุ่ม Clocks ซึ่งเกี่ยวข้องกับฟังก์ชันของเวลา ตัวจับเวลา และการตั้งค่าเวลา กลุ่ม ActivityStarters ซึ่งเกี่ยวข้องกับการสั่งให้แอพพลิเคชั่นอื่นที่ติดตั้งอยู่ในโทรศัพท์ทำงาน เช่น โปรแกรมอ่านบาร์โค้ด (barcode scanner) หรือโปรแกรมอ่านออกเสียงจากข้อความ (text to speech) เป็นต้น กลุ่ม Web Services เช่น คอมโพเนนท์เกี่ยวกับเกมส์ออนไลน์ (Game Client) คอมโพเนนท์เกี่ยวกับฐานข้อมูลบนเว็บ และคอมโพเนนท์เกี่ยวกับการใช้บริการ Twitter เป็นต้น

ภาพ 7 หน้าจอส่วนการเขียนโค้ด (App Inventor Blocks Editor)

1.1.2   ส่วนการเขียนโค้ด (App Inventor Blocks Editor)

หลังจากที่ทำการเลือกจัดวางคอมโพเนนท์ที่จะใช้สำหรับโปรเจคครบแล้ว ผู้ใช้จะสามารถเขียนโค้ดคำสั่งสำหรับแอพพลิเคชันได้ในส่วนการเขียนโค้ด (App Inventor Blocks Editor) สำหรับพื้นที่การทำงานในส่วนหน้าจอการเขียนโค้ดแสดงดังภาพ 7 ซึ่งจะประกอบไปด้วยคำสั่งที่อยู่ในรูปของบล็อกรวบรวมไว้บริเวณด้านซ้ายของหน้าจอ ผู้ใช้สามารถเลือกคำสั่งที่ต้องการโดยการคลิกลากบล็อกคำสั่งมาวางไว้ในโปรเจคคือบริเวณที่เป็นพื้นที่วางตรงกลางหน้าจอ ตัวอย่างของบล็อกคำสั่งดังแสดงในภาพ 8 ซึ่งจะเป็นคำสั่งพื้นฐานที่ผู้ใช้จะนำมาใช้ในการสร้างแอพพลิเคชันขึ้นมา บล็อกเหล่านี้จะถูกแยกและจัดแบ่งออกเป็นกลุ่มๆ ตามลักษณะของคำสั่ง ตัวอย่างเช่น บล็อกข้อความที่ใช้ในการทำงานที่เกี่ยวข้องกับข้อความที่เป็นสายอักขระ บล็อกทางคณิตศาสตร์ที่ใช้ในการทำงานที่เกี่ยวข้องกับฟังก์ชันทางคณิตศาสตร์ ตัวเลข หรือเครื่องหมายทางคณิตศาสตร์ เป็นต้น App Inventor ยังสามารถสร้างกระบวนการทำงาน (procedure) และตัวแปร (variable) ได้โดยการเลือกใช้บล็อกในส่วนที่เกี่ยวกับการสร้างกระบวนการทำงานและเหตุการณ์ (event handler) ที่เกิดกับคอมโพเนนท์ โดยบล็อกที่เกี่ยวข้องกับคอมโพเนนท์จะถูกจัดเตรียมไว้ให้ตามคอมโพเนนท์ที่ผู้ใช้เลือกนำมาวางไว้ในโปรเจคและจัดเก็บรวมกันไว้ในแท็บ My Blocks แยกไว้ต่างหาก บล็อกที่เกี่ยวข้องกับคอมโพเนนท์เหล่านี้จะแบ่งออกได้เป็น 4 แบบตามประเภทของคำสั่ง คือ ประเภทการเรียกค่าคุณสมบัติจากคอมโพเนนท์ (property getter) ประเภทการกำหนดค่าคุณสมบัติให้กับคอมโพเนนท์ (property setter) ประเภทเหตุการณ์ (event handler) และประเภทการเรียกใช้กระบวนการทำงาน (method call)

ภาพ 8 ตัวอย่างของบล็อกคำสั่งที่ใช้แทนการเขียนโค้ด

1)  การเรียกค่าคุณสมบัติจากคอมโพเนนท์ (property getter) บล็อกประเภทที่ใช้เรียกค่าคุณสมบัติจากคอมโพเนนท์จะมีลักษณะเป็นช่องต่ออยู่ทางด้านซ้ายดังภาพ 9 โดยการทำงานจะทำการอ่านค่าคุณสมบัติจากคอมโพเนนท์แล้วส่งค่านั้นกลับมาในรูปของข้อความ ตัวเลข หรือค่าทางตรรกศาสตร์ แต่ในบางคอมโพเนนท์อาจมีค่าที่มีรูปแบบที่ซับซ้อนมากกว่าเช่น ค่า GPS จากคอมโพเนนท์ตรวจจับตำแหน่ง (Location Sensor) เป็นต้น ซึ่งจะมีรูปแบบเฉพาะแตกต่างกันไป แต่ทั้งนี้การอ่านค่านั้นทำได้ง่ายมาก ถึงแม้จะเป็นการอ่านค่า GPS ซึ่งโดยปกติมีกระบวนการทำงานที่ซับซ้อน แต่ผู้ใช้สามารถอ่านค่า GPS ได้ผ่านคอมโพเนนท์ตรวจจับตำแหน่งเหมือนอ่านค่าข้อความจากกล่องข้อความ ด้วยกระบวนการนี้ทำให้มั่นใจได้ว่าผู้ใช้จะไม่ต้องกังวลในเรื่องความซับซ้อนของการเข้าถึงค่าและข้อมูลต่างๆ ที่ต้องการ

ภาพ 9 ตัวอย่างของบล็อกคำสั่งประเภทที่ใช้เรียกค่าคุณสมบัติจากคอมโพเนนท์ (property getter)

2) การกำหนดค่าคุณสมบัติให้กับคอมโพเนนท์ (property setter) บล็อกประเภทที่ใช้กำหนดค่าคุณสมบัติให้กับคอมโพเนนท์จะมีลักษณะเป็นช่องต่ออยู่ทางด้านขวาดังภาพ 10 โดยจะสามารถทำการกำหนดค่าหรือเปลี่ยนแปลงค่าคุณสมบัติให้กับคอมโพเนนท์ที่ต้องการด้วยค่าของบล็อกที่นำมาต่อเข้ากับช่องต่อที่อยู่ทางด้านขวา ช่องต่อนี้จะมีรูปร่างเป็นช่องรับซึ่งจะต่อเข้าได้พอดีกับบล็อกที่มีรูปร่างเหมือนบล็อกประเภทที่ใช้เรียกค่าคุณสมบัติจากคอมโพเนนท์ ซึ่งจะทำให้ผู้ใช้เลือกบล็อกที่จะนำมาต่อเข้าด้วยกันได้อย่างง่ายได้และลดข้อผิดพลาดในการเลือกต่อบล็อกที่ไม่ถูกต้อง

ภาพ 10 ตัวอย่างของบล็อกคำสั่งประเภทที่ใช้กำหนดค่าคุณสมบัติให้กับคอมโพเนนท์ (property setter)

3)  เหตุการณ์ (event handler) บล็อกประเภทเหตุการณ์จะมีลักษณะเป็นช่องต่ออยู่ทางด้านล่างดังภาพ 11 ซึ่งบล็อกประเภทนี้จะทำงานเมื่อเกิดเหตุการณ์ต่างๆ ขึ้นกับคอมโพเนนท์ เช่น การคลิกที่ปุ่ม ซึ่งจะทำงานตามบล็อกคำสั่งที่ต่อลงไปทางด้านล่างภายในบล็อกเหตุการณ์ ตัวอย่างเช่นในภาพ 11 แสดงให้เห็นถึงเหตุการณ์เมื่อมีการคลิกปุ่มแล้วให้มีการแสดงหน้าต่างข้อความโต้ตอบขึ้นมาเพื่อเตือนให้ผู้ใช้ทำการป้อนข้อมูลลงในกล่องข้อความ เป็นต้น

ภาพ 11 ตัวอย่างของบล็อกคำสั่งประเภทเหตุการณ์ (event handler)

4)  การเรียกใช้กระบวนการทำงาน (method call) บล็อกประเภทเรียกใช้กระบวนการทำงานจะมีลักษณะเหมือนกับบล็อกประเภทที่ใช้เรียกค่าคุณสมบัติจากคอมโพเนนท์ที่มีลักษณะเป็นช่องต่ออยู่ทางด้านซ้าย บล็อกประเภทนี้จะถูกสร้างขึ้นเมื่อผู้ใช้ได้มีการสร้างกระบวนการทำงานโดยอาศัยบล็อกประเภทกระบวนการทำงานในการสร้างดังภาพ 12 เช่น การสร้างฟังก์ชันการทำงาน การสร้างตัวแปร เป็นต้น และจะมีชื่อเรียกเฉพาะตัวตามที่ผู้ใช้เป็นผู้ตั้งให้ เมื่อมีการสร้างกระบวนการทำงานขึ้น บล็อกประเภทเรียกใช้กระบวนการทำงานก็จะถูกสร้างขึ้นและปรากฏในตัวเลือกเพื่อให้ผู้ใช้เลือกที่มาวางลงในโปรเจคเมื่อต้องการให้เกิดการเรียนใช้กระบวนการทำงานดังกล่าว

ภาพ 12 ตัวอย่างของบล็อกคำสั่งประเภทกระบวนการทำงาน

1.1.3   ส่วนของการแพ็คเกจและการเรียกใช้งานแอพพลิเคชัน

เมื่อแอพพลิเคชันได้ถูกออกแบบและทำการเขียนโค้ดคำสั่งเป็นที่เรียบร้อยแล้ว ผู้ใช้สามารถสั่งให้โปรแกรม App Inventor ทำการแพ็คเกจแอพพลิเคชันดังกล่าวให้อยู่รูปของไฟล์ที่พร้อมจะนำไปติดตั้งเพื่อนำไปติดตั้งบนโทรศัพท์ระบบปฏิบัติการ Android ต่อไป ผู้ใช้เพียงเลือกคลิกที่ปุ่ม Package for Phone ที่อยู่ในด้านบนของหน้าจอส่วนออกแบบ โปรแกรม App Inventor จะทำการแพ็คเกจบนเซิร์ฟเวอร์ App Inventor และส่งไฟล์ที่พร้อมจะนำไปติดตั้งออกมาให้ผู้ใช้ทำการดาวน์โหลดเก็บไว้ในเครื่องคอมพิวเตอร์เพื่อจะนำไปติดตั้งและเรียกใช้งานบนโทรศัพท์ระบบปฏิบัติการ Android เครื่องใดก็ได้ หรือหากไม่มีโทรศัพท์ระบบปฏิบัติการ Android ก็สามารถที่จะทดสอบการทำงานของแอพพลิเคชันได้บนโทรศัพท์จำลองที่ทำงานอยู่บนคอมพิวเตอร์ซึ่งจะมีลักษณะการทำงานเหมือนโทรศัพท์จริงทุกประการดังภาพ 13

ภาพ 13 โทรศัพท์จำลองระบบปฏิบัติการ Android