การประยุกต์ใช้ Web viewer และ เว็บไซต์

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

Web viewer และ  เว็บไซต์

จัดทำโดย นาย สมประสงค์ นาคพิมพ์  รหัสนักศึกษา 5931280069 เลขที่12 ปวส.2 กลุ่ม 3

ขั้นตอนการทำ Web viewer และ เว็บไซต์ มีขั้นตอนดังนี้

1.เปิดไฟล์ Notepad ขึ้นมา

2.เขียนโค้ด ว่า <img src=" (นำชื่อไฟล์รูปของคุณมาใส่ในที่ว่างนี้)   .jpg" width="500" height="500">

3.กด File  และกด Save As   การ Save จะต้อง Save เป็น .html

 และรูปที่โหลดมาจะต้องอยู่ในไฟล์เดียวกัน

4.พิมพ์ค้นหา MIT App Inventor 2  หรือ คัดลอกที่ลิงก์นี้ได้เลย http://ai2.appinventor.mit.edu

5.เมื่อเราเข้าเว็บไซต์  MIT App Inventor 2 แล้วให้ทำการ  New Project ขึ้นมาใหม่เพื่อเริ่มงานใหม่

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

7..เลือกแล้วจากนั้นให้เราลาก Web Viewer  เข้าที Screen 1

8.กดที่ Upload File.. และ เลือกไฟล์ รูปที่คุณเตรียมไว้

 9.คลิกที่ Web Viewer 1     และ   พิมพ์ว่า file:///android_asset/ และตามชื่อที่คุณทำ  จะต้องลงท้ายด้วย  .html

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

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

 หน้าตา APP

 เปิดใช้งาน

สรุป ความรู้เกี่ยวกับ MIT App Inventor 2

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

จัดทำโดย นาย สมประสงค์ นาคพิมพ์  รหัสนักศึกษา 5931280069 เลขที่12 ปวส.2 กลุ่ม 3

    การใช้งานโปรแกรม MIT App Inventor นี้ จะต้องสร้าง Project ใหม่เสมอ

ขั้นตอนการสร้าง New Project

1.คลิกที่ Project > New Project

2.หลังจากนั้นจะปรากฏกล่องข้อความให้เรากรอกชื่อ Project ที่เราจะสร้างชิ้นงานใหม่ ที่ Project name ตั้งชื่ออะไรก็ได้ที่คุณต้องการ

จากนั้นทำการเอาเครื่องมือมาวางบน Screen

หลังจากนั้น เป็นการเขียนโปรแกรมบน Blocks

จากภาพเป็นการเอาจิ๊กซอมาต่อกันเป็นคำสั่งเพื่อให้แสดงผล

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

จากนั้นจะขึ้น QR-Code ให้เราสแกนเพื่อดาวน์โหลดใส่สมาร์ทโฟน 

จากนั้นใช้โปรแกรม MIT AI2 Companion บนสมาร์ทโฟนสแกนQR Code เพื่อดาว์นโหลด

เมื่อทดลงลองโปรแกรมจะขึ้นหน้าApplication ที่เราออกแบบ

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

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

Web viewer และ BarcodeScanner

จัดทำโดย นาย สมประสงค์ นาคพิมพ์  รหัสนักศึกษา 5931280069 เลขที่12 ปวส.2 กลุ่ม 3

ขั้นตอนการทำ Web viewer และ BarcodeScanner มีขั้นตอนดังนี้
1.พิมพ์ค้นหา MIT App Inventor 2  หรือ คัดลอกที่ลิงก์นี้ได้เลย http://ai2.appinventor.mit.edu

2.เมื่อเราเข้าเว็บไซต์  MIT App Inventor 2 แล้วให้ทำการ  New Project ขึ้นมาใหม่เพื่อเริ่มงานใหม่

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

4.เลือกแล้วจากนั้นให้เราลาก Button , Label และ WebViewer  เข้าที Screen 1

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

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

7.ใส่ code ตามนี้

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

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

หน้าตาAPP

 กดสแกน

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

นาย สมประสงค์ นาคพิมพ์  รหัสนักศึกษา 5931280069 เลขที่12 ปวส.2 กลุ่ม 3