วิชา การพัฒนาโปรแกรมประยุกต์บนอุปกรณ์พกพา 1: โปรแกรม 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 ลงในสมาร์ทโฟน แล้วทำการทดลองใช้งานและดูผลลัพท์ที่เกิดขึ้น