ใบงานที่ 4 สรุปการทำWebViewer(MIT)

 ใบงานที่ 4
สรุปความรู้ สรุปการทำWebViewer MIT App Inventor 2
จัดทำโดย นายเฉลิมชัย  เฉลยศาล  รหัสนักศึกษา 5931280058 เลขที่ 6 ปวส.2 กลุ่ม 3

ขั้นตอนที่ 1.สร้างโฟลเดอร์ตั้งชื่อว่าindex

ขันตอนที่ 2.นำรูปตัวเองไม่ว่างที่โฟลเดอร์ที่เราตั้งชื่อว่าindex

ขั้นตอนที่ 3..เปิดNotepadขึ้นมาเเล้วพิมพ์ตามนี้

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img

ขั้นตอนที่ 4.คัดลอกชื่อรูปตัวเอง

ขั้นตอนที่ 5.ว่างชื่อรูปเองตัวที่นี้

ขั้นตอนที่ 6.บันทึกไว้ที่โฟลเดอร์ตั้งชื่อว่าindexตามนี้

เสร็จเเล้วทดลองเปิดด้วยเว็บเบราว์เซอร์

ขั้นตอนที่ 7.เข้าเว็บไซต์ http://ai2.appinventor.mit.edu/ ลงชื่อเข้าใช้ จะได้หน้าจอดังภาพข้างล่าง

ขั้นตอนที่ 8.กด new project เพื่อทำการสร้างโปรเจคใหม่

เเล้งตั้งชื่อให้เรียบร้อยเสร็จเเล้วจะได้เเบบนี้

จากหน้า Screen จะประกอบด้วยเครื่งมือดังนี้

1.WebViewer

จากนั้นUpload File index.html ที่เราสร้างไว้ตามนี้

1.

2.

3.

4.

เสร็จเเล้วจะมีไฟล์ index.html ปรากฎดังรูปนี้

จากนั้นพิมพ์ตามนี้

file:///android_asset/index.html

ใส่ในช่อง HomeUrl

จากนั้นทำการทดลองแอปพลิเคชั่น ด้วยการ Build

 ทำการสแกนแล้วดาวน์โหลดติดตั้งแอปพลิเคชั่นให้เรียบร้อย จากนั้นทดลองใช้

สรุปความรู้ MIT App Inventor 2

ใบงานที่ 3 

สรุปความรู้ MIT App Inventor 2

จัดทำโดย นายเฉลิมชัย  เฉลยศาล  รหัสนักศึกษา 5931280058 เลขที่ 6 ปวส.2 กลุ่ม 3

การใช้งานโปรแกรม MIT App Inventor นี้ จะต้องสร้าง Project ใหม่เสมอ
ขั้นตอนการสร้าง New Project
1.คลิกที่ Project > New Project

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

จากหน้า Screen จะประกอบด้วยเครื่งมือดังนี้

1.Button

2.TextBox

3.TinyDB

4.TinyWebDB

5.Notifier

6.SpeechRecognizer

7.TextToSpeech

จากนั้นนำอุปกรณ์ที่แนะนำขั้นต้นมาวางที่ Screen จากนั้นนำ Button และ Label มาวางดังรูป แล้วเปลี่ยนโหมดการเขียนโปรแกรมไปที่ Block

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

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

*ในตัวอย่างคือการสั่ง Button ต่างๆให้ทำงานเมื่อถูกคลิก

4. หน้าตาของโค้ดเมื่อทำการเขียนเรีบร้อย

จากนั้นทำการทดลองแอปพลิเคชั่น ด้วยการ Build

 ทำการสแกนแล้วดาวน์โหลดแอปพลิเคชั่น จากนั้นทดลองใช้

ทดลองกรอกข้อความลงใน Textbox แล้วกด Enter 
เมื่อกดปุ่ม OK จะมี PopUp แสดงขึ้นมา
เมื่อกดปุ่ม Goto จะมีเสียงพูดตามที่เราพิมพ์
เมื่อกดปุ่ม Voice จะสามารถพูดแล้วจะมีข้อความที่เราพูดขึ้นใน Textbox

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

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

จัดทำโดย นายเฉลิมชัย  เฉลยศาล  รหัสนักศึกษา 5931280058 เลขที่6 ปวส.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

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

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

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

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

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

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

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