วิธีการสร้างappinventor 2

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 อ้างอิงจาก: http://programmingappinventor.wordpress.com/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-app-inventor/%E0%B8%AA%E0%B9%88%E0%B8%A7%E0%B8%99%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B8%81%E0%B8%AD%E0%B8%9A%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1-app-inventor/