mobile4-5

ใบงานที่ 4 การสร้างแอพเพื่อสแกนบาร์โค้ด

วัตถุประสงค์
1. เพื่อศึกษาวิธีเขียนแอพเพื่อเก็บข้อมูลจากบาร์โค้ดของสินค้า

2. สามารถบอกขั้นตอนการสร้างแอพเพื่อเก็บข้อมูลที่ได้จากการอ่านบาร์โค้ด

3. สามารถเขียนแอพเพื่อเก็บและเรียกดูข้อมูลที่ได้จากการอ่านบาร์โค้ด

เนื้อหา

ให้นักศึกษา เขียนขั้นตอนการพัฒนาแอพด้วย App inventor เพื่อสแกนบาร์โค้ดพร้อมแสดงข้อมูลที่เก็บไว้ได้

การทดลอง

1.ให้บอกขั้นตอนการเข้าสร้าง App เพื่อสแกนบาร์โค้ดจากฉลากสินค้าให้อยู่ในรูปของตัวเลข

ขั้นตอนแรกเข้าไปที่ google แล้วเข้าไปที่ 

http://appinventor.mit.edu/explore/#

แล้วเข้าไปที่  ปุ่มสีส้มมุมขวามือ

จากนั้นก็กรอก Gmail เข้าไป

ขั้นตอนต่อไปเข้าไปที่  Projects และ Start new project

ตั้งชื่องาน mobile 4

ลาก TextBox มาวาง ใช้สำหรับแสดงข้อมูลที่สแกนได้

คลิก Layout ลาก horizontalarrangement มาวาง

จากนั้นลาก Botton มาวางสองปุ่ม

คลิกที่ Sansors ลาก Barcodescanner และClock มาวาง

คลิกที่ Social ลาก Sharing มาวาง

คลิกปุ่ม Botton เพื่อใส่รูปภาพ

คลิกที่ Barcodescanner แล้วเอาเครื่องหมายถูกออก

คลิกที่ Clock แล้วเอาเครื่องหมายถูกออก

คลิกที่ Blocks ไปที่ปุ่ม Botton1 ลาก whan Click มาวาง

คลิกที่ BarcodeScanner ลาก DoScan มาไว้ใน when

คลิกที่ BarcodeScanner ลาก AfterScan มาวาง

คลิก result ลาก get ออกมาวาง

คลิกที่ TextBox ลาก set Text มาวาง

คลิก Text เลือก join

ไปที่ Clock ลาก now และFormatDateTime มาต่อ join และลากnow มาต่อ FormatDateTime ดังรูป

ขยายช่อง join เพิ่มเป็น 5 ช่อง

คลิก Text เอา sting เปล่าๆมาใส่ใช่องที่2และ4

เอา result มาใส่ในช่องที่3

ช่องแรกของ Sting ใส่เครื่องหมายลบ ช่องที่2ใส่\n 

จากนั้นคลิกที่ TextBox ลาก Text มาวางในช่องที่5

คลิกปุ่ม Botton2 ลากwhen Click มาวาง

คลิก Sharing เลือกSharMessage แล้วลาก TexeBox มาวางต่อSharMessage

ไปที่ Build และเลือกอันแรก

จากนั้นเข้าโทรศัพท์ไปยังแอพ

เข้าไปที่ Scan QR code

ที่ตรงหน้าจอ

จากนั้นแอพที่เราเขียนก็จะไปแสดงผลบนโทรศัพท์

คลิกที่ไอคอนบาร์โค้ดเพื่อสแกนบาร์โค้ดสินค้า

สินค้าที่เราสแกนจะโชว์อยู่ที่หน้าจอ

DownLoadLink: (APK and AIA)