คํา สั่ง make a list ใน MIT App Inventor มี หน้าที่ สํา คั ญ อย่างไร

We’ve updated our privacy policy so that we are compliant with changing global privacy regulations and to provide you with insight into the limited ways in which we use your data.

You can read the details below. By accepting, you agree to the updated privacy policy.

Thank you!

View updated privacy policy

We've encountered a problem, please try again.

การเขียนแอพหรือเรียกให้ทางการคือ Mobile Application ในปัจจุบันมีเครื่องมือในการช่วยเขียนมากมาย ไม่ว่าจะเขียนด้วยภาษา JAVA หรือเขียนด้วยภาษา html แต่การเขียนโปรแกรมเหล่านั้นยังต้องอาศัยทักษะการเขียนโปรแกรมอยู่

      ในวันนี้มีทางออกสำหรับผู้ที่ต้องการสร้างแอปโดยที่ไม่ต้องเขียนโปรแกรมครับ แต่ความสามารถก็ไม่น้อยหน้าในการเขียนโปรแกรม เป็นลักษณะของการลากวาง block ชุดคำสั่งคล้ายกับการต่อจิกซอว์เรียกให้เป็นทางการว่า Block Programming นั้นคือโปรแกรม App Inventor 2

App Inventor 2  สามารเข้าไปใช้งานออนไลน์ได้เลยไม่ต้องลงโปรแกรม (มีแบบออฟไลน์ที่ไม่ต้องต่อเน็ตด้วย) ที่ http://ai2.appinventor.mit.edu โดยจะต้องใช้อีเมล์ Gmail ในการล๊อกอินเข้าสู่ระบบ ก็จะพบหน้าจอแบบนี้ครับ

หน้าจอโปรแกรม App Inventor 2

App Inventor จะมีหน้าจออยู่สองส่วน คือส่วนของออกแบบหน้าจอ จะเรียนว่า Designer และส่วนของการลากวาง Block คำสั่งลักษณะเหมือนต่อจิกซอว์ จะเรียกว่า Blocks

หน้าจอส่วนของ Block ของโปรแกรม App Inventor

การสร้างแอพในส่วนหน้าจอ Designer นั้น เราจะลาก Component (คอมโพแนน) ที่อยู่ในกล่อง Palette(พาเลท) ด้านซ้ายมือ ลากมาวางส่วนของ Viewer( วิวเวอร์) ซึ่งเป็นที่แสดงผลของหน้าจอแอพ โดยเราสามารถกำหนดว่าคอมโพแนนแต่ละตัวมี Properties (คุณสมบัติ) อย่างไรบ้าง

สาธิตการลาก Component มายังส่วนหน้าจอ ของ App Inventor 2

อะไรคือ Component ? อะไรคือ Properties ? งงกันมั้ยครับ

Component คือวัตถุที่จะถูกวางบนหน้าจอแอพที่เราออกแบบจะมีทั้งแสดงผลบนหน้าจอและส่วนของการทำงานภายใน Component จะเก็บใน Palette โดยแยกตามประเภทของ component ประเภทต่างๆ ดังนี้

• User Interface   เป็นส่วนที่แสดงบนหน้าจอจะเป็นส่วนที่ใช้ติดต่อระหว่างผู้ใช้แอพกับตัวแอพ พูดง่ายๆ คือส่วนที่เราจะมองเห็นหรือสั่งให้แอพทำอะไร โต้ตอบแสดงผลกับผู้ใช้ ทั้งหมดจะถูกเก็บไว้ส่วนนี้ เช่น ปุ่ม , การพิม์ข้อความ, การใส่ภาพและอื่นๆ 
• Layout  เป็นส่วนที่จะมาจัดวางการแสดงผลของหน้าจอว่าจะวางยังไรให้สวยงาม โดยทั่วไปเราจะลากส่วนนี้มาวางเป็นสัดสวนก่อนแล้วค่อยลากคอมโพแนนส่วน User Interface มาวาง
• Media เป็นส่วนของการใช้งานด้านมีเดีย ไม่ว่าจะเป็นการเล่นเสียง เล่นวิดีโอ  ถ่ายรูป อัดเสียงและอีกมากมาย 
• Drawing and Animation จะเป็นส่วนของการวาดรูปและการทำให้ภาพเกิดการเคลื่อนไหว
• Sensors  จะเป็นส่วนที่ใช้ทำงานร่วมกับเซ็นเซอร์ของอุปกรณ์ เช่น เซ็นเซอร์ความเร็ว เซ็นเซอร์GPS เซ็นเซอร์เข็มทิศ
• Social เป็นส่วนของของการเขียนโปรแกรมเกี่ยวกับการโทรออก การส่ง sms การเรียกดูสมุดโทรศัพท์และส่วนของแชร์ไปยังโปรแกรมสังคอมออนไลน์ 
• Storage เป็นส่วนการเรียกใช้ฐานข้อมูลในการจัดเก็บข้อมูล การจัดเก็บไฟล์
• Connectivity เป็นส่วนการเรียนกใช้บลูทูธ การติดต่อกับ java app 

รายละเอียดแต่ละประเภทของ Component จะอธิบายอย่างละเอียดอีกครั้งในตอนต่อไปนะครับ 

ในแต่ละ Component  เราสามารถที่จะกำหนดคุณสมบัติของมันได้ด้วยว่าต้องการคุณสมบัติยังไร ซึ่งสามารถกำหนดคุณสมบัติในแต่ละ Component ได้ในส่วนของ Properties

การกำหนดคุณสมบัติของคอมโพแนนซ์ ในส่วยของ Properties

การกำหนด Properties จะมีหน้าที่ที่ค่อยบอกว่า Component ของเรานั้นจะมีคุณสมบัติอย่างไร เช่น ปุ่ม จะมีขนาดตัวอักษรเท่าไหร่?  พื้นหลังสีอะไร? มีข้อความบนปุ่มเขียนว่ายังไร?

เมื่อเรารู้จักส่วนของ Designer แล้ว เดี่ยวจะมาทำความรู้จักส่วนของ Blocks ซึ่งจะเป็นส่วนของการที่จะบอกให้แอพของที่เราจะสร้างนั้น มีกระบวนการทำงานยังไร เช่นหลักจากที่ กดคลิกที่ปุ่มแล้วให้ทำอะไร,การกำหนดค่าตัวแปรมีชื่อตัวแปรอะไรมีค่าเท่าเริ่มต้นเท่าไหร่ ,การคำนวนบวกเลขแล้วแสดงผลหน้าจออย่างไร เป็นต้น

ตัวอยาการต่อจิกซอให้คอมโพแนนทำงานเมื่อมีการกดคลิก

ฺblock ใน App Inventor ใช้งานยังไร? มีรูปแบบอะไรบ้าง?  สำหรับผู้ที่เริ่มใช้งานใหม่ๆ อาจจะดูงงๆกับรูปแบบของ block ที่จะมาใช้งาน การแบ่งกลุ่มรูปแบบของ Block ดังนี้

• เรียกค่าคุณสมบัติของ Component (property getter)

สิ่งที่เราทราบก่อนหน้านี้คือทุกๆ Component ที่เราจะเรียนใช้งานจะมีคุณสมบัติและสามารถแก้ไขมันได้เพิ่มเติม  หากเราต้องการนำส่วนของคุณสมบัตินั้นมาใช้ เราสามารถเรียกใช้ Block ลักษณะดังนี้ (สังเกต block จะเป็นสีเขียวอ่อน)

• กำหนดค่าคุณสมบัติของ Component (property setter)

การกำหนดคุณสมบัติของ Component นอกจากที่เราสามารถกำหนดค่าจากส่วน Designer แล้ว ในส่วนของ Block ก็สามารถกำหนดค่าได้เช่นกันโดยใช้ Block ลักษณะดังนี้  (สังเกต block จะเป็นสีเขียวเข้ม)

• มีการดำเนินเหตุการณ์กับ Component (event handler) 

การดำเนินเหตุการณ์ คืออะไร ? ถ้าสังเกตการทำงานของแอพ เช่นในการคลิกเมนูเพื่อแสดงหน้าที่เราต้องการ หรือการเลือกคำตอบของข้อสอบ สิ่งเหล่านี้คือเป็นลักษณะการดำเนินเหตุการณ์ เช่นถ้าคลิกปุ่มนี้ แล้วให้มันทำอะไรต่อ , หากเป็นการเริ่มต้นเปิดหน้าจอแอพแล้วให้มันดำเนินการยังไร   เราสามารถเรียกใช้ Block ลักษณะดังนี้ (สังเกต block จะเป็นน้ำตาล)

โดยการวางชุดคำสั่งในส่วนของ Block จะสัมพันธ์กับ Component ในส่วนของ Designer  ว่ากันง่ายๆคือ  Component ไหนที่จะเรียกใช้ในการลากวางชุดคำสั่งในหน้า Block จะต้องลาก Component ที่เกี่ยวข้องมาวางใน Viewer ในหน้า Designer เสียก่อน

นอกจากนี้ Block ที่เป็นส่วนของการคำนวน ส่วนของข้อความ การกำหนดสี การกำหนดตัวแปร การควบคุมและอื่นๆ จะเป็น Block ถูกสร้างขึ้นมาให้อัตโนมัติโดยที่เราไม่ต้องไปสร้าง Component ก่อน

หากเอามา Block แต่ละแบบที่ผมอธิบายมาต่อกัน จะได้ชุดคำสั่งที่ทำงานได้ประมาณนี้

พอหอมปากหอมคอเกี่ยวการแนะนำภาพรวมของการ App Inventor 2 ในตอนหน้าจะมาแนะนำส่วนของการทดสอบแอพที่เราสร้างด้วยตัว emulator และการทดสอบผ่านมือถือจริง ขอบคุณที่อ่านนะครับ