วันอาทิตย์ที่ 29 ตุลาคม พ.ศ. 2560

โปรแกรม MIT Appinventor2


ใบงานที่ 2 การพัฒนาโปรแกรมประยุกต์และอุปกรณ์พกพา 1
จัดทำโดย นางสาวชลธิชา  เสือคง  รหัสนักศึกษา 5931280052 เลขที่ 2 ปวส.2 กลุ่ม 3


สำหรับโปรแกรมออนไลน์ที่ใช้ออกแบบหรือสร้าง Application บนมือถือและแท็บเล็ต ที่เป็นระบบปฏิบัติการ Android อย่างโปรแกรม APP INVENTOR นั้น ทาง Google ได้รว่มมือกับ MIT พัฒนาโปรแกรมนี้ขึ้นมา 
App inventor ใช้หลักการคล้ายๆ กับ Scratch แต่ซับซ้อนกว่า โดยลักษณะการเขียนโปรแกรมแบบ Visual Programming  คือ เขียนโปรแกรมด้วยการต่อบล็อกคำสั่ง เน้นการออกแบบเพื่อแก้ปัญหา ด้วยการสร้างโปรแกรมที่ผู้เรียนสนใจ บนโทรศัพท์มือถือสมาร์ทโฟน App inventor จึงเป็นอีกโปรแกรมหนึ่ง ที่เหมาะสำหรับใช้ในการสอนเขียนโปรแกรม ให้นักเรียนในระดับมัธยมปลาย หรือระดับมหาวิทยาลัย และสามารถที่จะนำไปต่อยอดได้หลากหลาย

เครื่องมือและคำสั่งต่างๆ
แท็บเครื่องมือนี้ จะอยู่ซ้ายมือของหน้าจอ โดยอยู่ในหัวข้อต่างๆ ดังนี้

 User Interface





















โดยเครื่องมือที่จะถูกนำมาใช้บ่อย ก็คือ Button Label TextBox และ Image

Layout









 Layout คือการจัดวางบล็อกต่างๆ ให้อยู่ในตำแหน่งที่เราต้องการได้เพราะโปรแกรม Appinventor นั้นไม่สามารถที่จะนำบล็อกไปวางตำแหน่งใดๆได้โดยการลากวาง จึงต้องมีเครื่องมือ Layout มาช่วยในการจัดบล็อกให้ง่ายขึ้นตัวอย่างเช่น หากเราต้องการวาง Button ให้อยู่ ขนานกันซ้ายขวา เราจะไม่สามารถทำได้หากไม่ใช้ Layout  ดังตัวอย่างที่ 1


ในตัวอย่างนี้ยังไม่มีการนำ Layuot มาใช้ จึงทำให้ไม่สามารถจัดวางให้ Button ทั้งสองอยู่ข้างกันได้
 
ตัวอย่างที่ 1

ในตัวอย่างที่ 2 นี้ ได้มีการนำ Layout  ส่วนของ HorizontalScollArragement มาใช้จึงทำให้ Button ทั้งสองอยู่ข้างกัน และจัดให้อยู่กึ่งกลาง
ตัวอย่างที่ 2 

Media              


















ในส่วนของ Media นั้นคือสื่อต่างๆ ที่เราสามารถออกแบบคำสั่งให้ทำงานตามที่เราต้องการได้ เช่น การอ่านตามข้อความ การกรอกข้อมูลด้วยเสียง เป็นต้น
      
ในส่วนของการจัดวาง Button ต่างๆนั้น เราจะอยู่ในส่วนของ Designer หากเราต้องการเขียนคำสั่งต่างๆลงไป เราจะต้องเปลี่ยนโหมดเป็น Blocks

 ซึ่งเมื่อเราเข้าไปที่โหมด Block หน้าตาของโปรแกรมก็จะเปลี่ยนไปทันที


 และเครื่องมือต่างๆก็จะจอยู่ซ้ายมือของหน้าจอโปรแกรมเช่นเดิม

 Control คือการควบคุมคำสั่งต่างๆ เมื่อเราคลิกที่ Control ก็จะมีคำสั่งควบคุมขึ้นมาให้เราเลือกใช้ตามความต้องการและความเหมาะสม
Logic คือตัวเลือก ใช่ ไม่ จริง เท็จ 
Text คือข้อความที่เราต้องการให้แสดง  เป็นต้น

ตัวอย่าง การเขียนโปรแกรม

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

เมื่อเราเขียนคำสั่งต่างๆลงไปจะได้หน้าตาแบบนี้ การเขียนคำสั่งในโปรแกรม Appinventor นั้นจะคล้ายกับการต่อ จิ้กซอว์  สังเกตในกรอบสีแดง จะมีข้อความ "ข้อความที่คุณพิมพ์คือ" โดยโปรปกรมที่เขียน คือโปรแกรมเปิด-ปิด ไฟ LED ด้วยคำสั่ง On-Off และการกรอกข้อความแล้วให้มีเสียงอ่านตาม และสั่งการพิมพ์ด้วยเสียง

เมื่อเราเขียนคำสั่งต่างๆเรียบร้อยแล้ว ขั้นตอนต่อไปคือการทดลองโปรแกรมว่าสามารถใช้คำสั่งต่างๆ ได้ตามที่เราตั้งไว้หรือไม่ ทำตามขั้นตอนดังนี้










เพิ่มคำอธิบายภาพ
1. เลือก Build แล้วเลือก App (provide QR code for .apk) จากนั้นรอให้โปรแกรม Compile เมื่อโปรแกรม Compile เรียบร้อยจะขึ้น QR code ให้เราสแกนเพื่อดาวน์โหลด Application ที่เราออกแบบ


การทดลองใช้ Application 
เมื่อเราทำการออกแบบ Aplication เรียบร้อยแล้ว ขั้นตอนต่อไปให้ทำการดาวน์โหลด Application MIT ใน Google play store

หน้าตาโปรแกรม MIT

 เมื่อเข้า โปรแกรมแล้วจะขึ้นหน้านี้ ให้เลือกที่ Scan QR code แล้วทำการ สแกนอาร์โคดที่ Compile ไว้ทีแรก 
เมื่อเราสแกนเรียบร้อยแล้ว จะขึ้นหน้าต่างเพื่อดาวน์โหลดแอปพิเคชั่น ให้กด ติดตั้ง

เมื่อติดตั้งเรียบร้อยแล้ว ให้เปิดโปรแกรมทันที ให้กด เปิด

เราจะได้หน้าโปรแกรมที่เราออกแบบในตอนแรก จากนั้นให้ทดลองใช้คำสั่ง ON LED ว่าตรงตามที่เราต้องการหรือไม่




นางสาวชลธิชา เสือคง เลขที่ 2 ชั้น ปวส 2 กลุ่ม 3 แผนกวิชาอิเล็กทรอนิกส์ สาขาคอมพิวเตอร์ฮาร์ดแวร์












ไม่มีความคิดเห็น:

แสดงความคิดเห็น