การประยุกต์ใช้ Web viewer และ BarcodeScaner

ใบงานที่ 2 การประยุกต์ใช้Web viewer และ BarcodeScanner


การประยุกต์ใช้ Web viewer และ BarcodeScanner ดังนี้

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

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

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

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

                               

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

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

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

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

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

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

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

 นี่คือ แอพลิเเคชั้น ทีี่ได้

10. ทดลองใช้

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

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

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

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

จะได้ประมานนี้ นะครับ

                                        นายกฤษฎาพงษ์  คำมี เลขที่ 5 ชั้น ปวส.2 กลุ่ม3 แผนกวิชาอิเล็กทรอนิกส์