ขั้นตอนการเขียนแอพเพื่อสแกนบาร์โค้ด

ขั้นตอนการทำการเขียนแอพเพื่อสแกนบาร์โค้ด

ขั้นตอนที่  1  สร้างโปรเจคขึ้นมาใหม่โดยใช้ชื่อ  Mobile4_17

ขั้นตอนที่  2  ปรับ  AlignHorizontal ให้เป็น  Center  ปรับ  AlignVertical ให้เป็น  Top  เปลี่ยน  ScreenOrientation  ให้เป็น  Portrait  ในช่อง  Title  เปลี่ยนให้เป็น Barcode Scanner

ขั้นตอนที่  3  ลาก  TextBox  มาวางยังหน้าจอ

ขั้นตอนที่  4  เลือก  Layout  เลือก  HorizontalArrangement เพื่อให้วาง  Button 2 อันได้  ลาก  Button  มาวาง

ขั้นตอนที่  5  ลาก BarcodeScanner มาวาง   ลาก  Clock  มาวาง เพราะเราต้องใช้วันเวลาบอกเวลาที่สแกน

ขั้นตอนที่  6  ไปที่  Social  ลาก  Sharing  มาวางเพื่อให้ข้อมูลที่สแกนได้แชร์ไปยังแอพอื่นๆ

ขั้นตอนที่  7  ให้เรากำหนด  Property  แต่ละ  component 

ขั้นตอนที่  8  เริ่มจาก  TextBox  ให้เรากำหนด  Height  ให้เป็น  Fill  parent  และ  Widht  ให้เป็น  90 Percent  เช็คถูกที่ช่อง  MultiLine  กำหนด  Hint  ข้อความว่า  ไม่มีข้อความ

ขั้นตอนที่  9  เลือก  HorizontalArrangement ปรับ  AlignHorizontal ให้เป็น Center  ปรับ  AlignVertical  ให้เป็น  Center  เช่นเดียวกัน  ส่วน  Height  กำหนดให้เป็น  80  Pixels  ให้มากกว่าความสูงของปุ่มเวลาแสดงผลปุ่มจะได้ไม่ดูติดกับ  TextBox  จนเกินไป

ขั้นตอนที่  10   เลือก  Button1  ปุ่มนี้เราจะให้เป็นปุ่มสแกนบาร์โค้ด  ให้เลือกที่  Image เลือก  Upload File เลือกไฟล์ภาพที่เราจะเอามาทำปุ่มสแกนบาร์โค้ด  และกำหนด  Height  และ  Width  ให้มีขนาด  64  ในช่อง  Text  ให้ลบข้อความทิ้งไป

 ขั้นตอนที่  11  ให้เราเลือก  BarcodeScanner1  และเอาเช็คถูกออกเป็นการใช้งานบาร์โค้ดของแอพนี้เองถ้าหากเช็คถูกไว้จะหมายความว่าให้ไปเปิดแอพสแกนบาร์โค้ดอื่นที่มีในเครื่องขึ้นมาใช้งาน

ขั้นตอนที่  12  ให้เราเอาเช็คถูกหน้า  TimerAlwasFires และ  TimerEnabled  ออก เพื่อไม่ให้ตัวจับเวลาหรือ  Timer  ทำงาน

ขั้นตอนที่  13  เข้าที่  Blocks  ไปที่ปุ่ม  Scan  ลาก  Do  When  Click  มาวาง 

คลิก  BarcodeScanner ลาก Do  Scan  มาไว้ใน  Do  When 

เลือก  When AfterScan  มาวางเอาเมาส์ชี้ที่  result  และให้เลือก  get  result  ออกมา 

เลือก  TextBox  ให้ลาก  Set  Text  มาวางใน  Do  when 

เลือก  Text  ลาก  Join  ออกมาวาง

ไปที่ Clock ลาก Call Clock Now  ออกมา และลากบล็อก  FormatDateTime  ออกมา

ลาก Call  Clock  Now  มาต่อ  FormatDateTime 

ให้ทำการขยายช่อง  Join  เป็น  5  ช่อง

เอา  String  เปล่าๆมาใส่ในช่องที่  2  และ  4

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

String  ช่องที่ 2 ให้กดสเปคบาร์ 1 ครั้งใส่เครื่องหมายลบและกดสเปคบาร์อี 1 ครั้งจากนั้นกด  Enter

String  ช่องที่ 4  ใส่ \n  เพื่อให้ขึ้นบรรทัดใหม่

จากนั้นกด  TextBox  ลาก  text  มาวางในช่องที่ 5

จากนั้น  กดที่ปุ่ม Shar ลาก Do When Click  มาวาง  คลิกที่  Sharing  ลาก  ShareMessage  มาวาง  จากนั้นให้  Duplicate  TextBox  ออกมาวางที่  ShareMessage

หรือทำตามรูปข่างล้างนี้

ทดลองการทำงาน

1        1.   ทำการสแกน QR Code  ของ  Appinventor

          2. จากนั้นทำการติดตั้ง  App  ของเราลงมือถือจะได้ไอคอนที่เราทำไว้ขึ้นมา

          3.  ทดลองสแกนโค้ดของผลิตภัณฑ์ต่างๆรอบตัว  จะได้รหัส  วัน/เดือน/ปี  และเวลาขึ้นแสดงที่หน้าจอ