โปรแกรม MIT Appinventor2

ใบงานที่ 2 การประยุกต์ใช้

Web viewer และ BarcodeScanner

จัดทำโดย นางสาวชลธิชา  เสือคง  รหัสนักศึกษา 5931280052 เลขที่ 2 ปวส.2 กลุ่ม 3

ในบล็อกแรกได้มีคำอธิบายเกี่ยวกับ ai2appinventor อยู่บ้างงแล้ว สำหรับบล็อกนี้ก็จะมาอธิบายเพิ่มเติมเกี่ยวกับ Tools ต่างๆ ที่ได้เรียนรู้มา 

เริ่มแรกเลยก็คือการ สร้าง New Project ขึ้นมาใหม่เพราะการใช้งานนั้น ต่างกันและการใช้คำสั่งก็จะเพิ่มขึ้น หากกลับไปใช้ Project เดิมนั้นอาจทำให้เกิดการสับสนได้ มาเริ่มขั้นที่ 1 กันเลย

1.  เมื่อเรา เข้าเว็บไซต์ ai2appinventor แล้วให้ทำการ New Project ขึ้นมาใหม่

2. เมื่อทำการ New Project แล้วให้ตั้งชื่อตามที่ต้องการ แต่ควรจะสื่อความหมายในสิ่งที่เรากำลังจะทำ เช่นในครั้งนี้เราจะทำแอปพิเคชั่นเกี่ยวกับการสแกนบาร์โค้ด ก็ควรตั้งให้ใกล้เคียงที่สุด เช่น BarcodeScanner Scanner เป็นต้น

3.เมื่อเราสร้าง New Project ขึ้นใหม่เสร็จเรียบร้อยแล้วจะขึ้นหน้า Screen 1 เราสามารถที่จะเปลี่ยนชื่อในจุดนี้ได้ตามที่เราต้องการ จากนั้นให้เราลาก Button และ Label มาวางไว้ที่ 

Screen 1  แล้วปรับการจัดวางให้เหมาะสมสวยงาม แล้วเปลี่ยนชื่อ Button 

                                                 การเปลี่ยนชื่อ Screen

                                  

4.  ที่แถบเครื่องมือ เลือกที่ Sensors แล้วลาก BarcodeScanner มาวางไว้ที่ Screen 1 

**เมื่อนำเครื่องมือมาวางครบที่ต้องการแล้ว ที่หน้าจอ Screen1 จะมี 1 Button กับอีก 1 Label ให้สังเกตที่ BarcodeScanner ที่เรานำมาวาง จะไม่โชว์ที่ Screen1 เพราะเป็นการทำงานเบื้องหลังนั่นเอง

5. จากนั้นให้เปลี่ยนโหมดไปที่ Blocks 

6. เมื่อเปลี่ยนโหมดมาที่ Blocks  เราจะต้องทำการเขียนโค้ด เพื่อสั่งให้ Application ทำงานตามที่เราต้องการ 

 

                   **การเขียนโค้ดคำสั่ง จะคล้ายกับการต่อจิ้กซอว ดังที่เห็นในรูปภาพตัวอย่าง ซึ่งความหมายของโค้ด When Button1 Click do call BarcodeScanner1 ก็คือ เมื่อ Button1 ถูกคลิก ตัว BarcodeScanner จะถูกเรียกมาใช้งานทันที 

              **ความหมายของโค้ดด้านบนคือ เมื่อ BarcodeScanner1 ทำการ Scan แล้วให้ Label1 ทำการแสดงข้อมูลการสแกนขึ้นมา ดังตัวอย่างด้านล่าง

             **เมื่อเราได้ทำการเขียนโค้ดเพื่อสั่งการแอปพลิเคชั่นเรียบร้อยแล้ว จะได้โค้ดดังตัวอย่างนี้

7.  จากนั้นทำการ Build  ตามขั้นตอนดังนี้

 

 8. จากนั้นโปรแกรมจะทำการ Compile โค้ดที่ทำการเขียน หลังจากนั้นจะขึ้น QRCode ให้เราสแกนเพื่อดาวน์โหลดใส่สมาร์ทโฟน 

 

9. จากนั้นให้เราทำการสแกนโค้ดเพื่อดาวน์โหลดแอปพิเคชั่นที่เราสร้างขึ้นมา แล้วทดลองใช้ 

 

 

 

 

 **จากนั้นเราจะได้ Application ที่เราทำการสร้างขึ้นมาเอง

10. ทดลองใช้

**เมื่อเข้าไปใน Application จะปรากฏหน้าจอดังตัวอย่าง จากนั้นให้ลองทำการ Scan โดยคลิกที่ Scanner  แล้วเข้าใน Google หาเว็บสร้าง Barcode แล้วทดลองสแกนดู

**ตามข้อความที่กรอกเพื่อสร้างบาร์โคด คือ mindcholticha จากนั้นทำการสแกนแล้วตรวจสอบข้อความว่าตรงกันหรือไม่
** เว็บสร้างบาร์โค้ด   http://www.barcode-generator.org/ 

เมื่อที่หน้าจอขึ้นข้อความที่ถูกต้องนั่นหมายความว่าเราเขียนโค้ดถูกต้อง 

11. ทำการแก้ไขโปรแกรมโดยการ เพิ่ม Web Viewer เข้าไปใน Application ด้วย 

ที่ UserInterface เลือก Web Viewer  ลากมาวางไว้ที่หน้าโปรแกรม 

12. จากนั้นเปลี่ยนไปที่โหมด Blocks เพื่อเขียนโค้ดการทำงานของ Application 

**จะสังเกตได้ว่าจะมีโค้ดเพิ่มมาเมื่อทำการแสกน นั่นคือมีการเรียก WebViewer มาใช้นั่นเอง

13.จากนั้นทำการ Build อีกครั้งเพื่อ Compile แล้วนำ QRCode มาสแกนเพื่อดาวน์โหลด Application ลงในสมาร์ทโฟน แล้วทำการทดลองใช้งานและดูผลลัพท์ที่เกิดขึ้น 

14. เมื่อได้ Application มาแล้ว ให้ทำการสร้างบาร์โค้ด โดยการสร้างบาร์โค้ดนั้นให้ทดลองสร้างโดยการใส่ที่อยู่ เว็บใดเว็บหนึ่ง แล้วทำการแสกนบาร์โค้ดนั้น 

**จากตัวอย่างจะเห็นได้ว่าใช้ที่อยู่เว็บในการสร้างบาร์โค้ด จากนั้นทำการสแกนแล้วดูผลลัพธ์

**จากผลลัพธ์ จะเห็นได้ว่าเราสามารถสแกนเพื่อเข้าเว็บไซต์ต่างๆได้ ทั้งนี้สามารถนำไปใช้ให้เกิดประโยชน์ได้มากมายในหลายๆกรณี 

นางสาวชลธิชา  เสือคง เลขที่ 2 ปวส.2 กลุ่ม 3 วิทยาลัยเทคนิคพิษณุโลก 

โปรแกรม 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 แผนกวิชาอิเล็กทรอนิกส์ สาขาคอมพิวเตอร์ฮาร์ดแวร์