week6 การใช้งาน QR Code Generator

อาจารยผ์ ู ส้ อน การพฒั นาโปรแกรมบน อุปกรณพ์ กพาเบอื้ งตน้ อ.จีระสิทธ์ิ อึง้ รัตนวงศ์ แผนกคอมพิวเตอรธ์ ุรกจิ 6mkbyur (3/1) , aniujvj (3/2) 062-5548444 pno-ball

มีใคร ไม่เคย ใช้ QR Code ในการทาธุรกรรมการเงนิ ?

สงั คมไร้เงนิ สด (Cashless Society)



Week 6 การใช้งาน QR Code Generator

วัตถปุ ระสงคก์ ารเรยี นรู้ 1. มคี วามรูค้ วามเข้าใจเก่ยี วกับระบบ QR Code 2. สามารถสร้างแอป QR Code Generator ได้ 3. สามารถสรา้ งแอปสแกน QR Code ได้ ส่งิ ท่จี ะไดจ้ ากบทเรยี นน้ี (T4) ระบบแอป QR Code Generator

รู้จกั กบั QR Code QR Code คอื บาร์โคด้ 2 มติ ิ ย่อมาจากคาว่า Quick Response สามารถเก็บขอ้ มูลได้ถงึ 4,000 ตัวอกั ษร

ประโยชน์ QR Code •แสดง URL ของเวบ็ ไซต์ •แสดงเบอรโ์ ทรศพั ท์ •แสดงข้อมูลรายละเอยี ดสินคา้ •แสดงข้อมูลช่ือ อเี มล์ • สแกนเพ่ือลงทะเบียน • สแกนเพ่ือชาระเงนิ • ฯลฯ

สร้าง QR Code โดยใช้โดรน เพ่ือโปรโมทเกม https://www.youtube.com/watch?v=mj8uIr4oQRU

สร้าง QR Code โดยใช้โดรน เพ่ือโปรโมทเกม https://www.youtube.com/watch?v=mj8uIr4oQRU

การสรา้ ง แอป QR Code Generator

ขนั้ ตอนการสร้างแอป QR Code Generator กำหนดตัวเลข/ขอ้ ควำม Generate ดว้ ยคำส่ัง QR Code

กำหนดตวั เลข/ขอ้ ควำม Generate ด้วยคำส่ัง QR Code

Flowchart การทางานของระบบ เม่อื แอปเร่มิ ทำงำน ป้อนขอ้ มูล ไมส่ ำเร็จ แปลงขอ้ มูล สำเรจ็ QR Code สิ้นสดุ กำรทำงำน

ออกแบบ UI • Horizontal Arrangement จัดเลย์ เอาตภ์ ายในตามแนวนอน • Label แสดงขอ้ ความ • Text Box ป้ อนขอ้ มูล • Canvas วาดรูป QR Code • Button ป่ ุม

คอมโนเนนทท์ ่ใี ช้ • QR_Code แปลงข้อมูลเป็น QR Code • Canvas วาดรูป • Notifier แจง้ เตอื น

Flowchart การทางานของระบบ เม่ือแอปเร่ิมทำงำน ป้อนขอ้ มูล คอมโพเนนท์ Notifier คอมโพเนนท์ QR_Code ไมส่ ำเรจ็ แปลงขอ้ มูล คอมโพเนนท์ Canvas สำเรจ็ QR Code ส้ินสุดกำรทำงำน

กาหนดพรอ๊ พเพอร์ต้ี Screen พร็อพเพอรต์ ี้ ค่าท่ีกาหนด Sizing Resposize Title Point Generator

กาหนดพรอ๊ พเพอรต์ ี้ Horizontal Arrangement พร็อพเพอรต์ ี้ คา่ ท่กี าหนด Align Horizontal Center Align Vertical Center Height Fill parent Width 90% Background เลอื กสีตาม Color ต้องการ

กาหนดพรอ๊ พเพอรต์ ้ี Label Text Box พรอ็ พเพอรต์ ้ี คา่ ท่ีกาหนด พรอ็ พเพอรต์ ้ี คา่ ท่กี าหนด Text Point Font Size 18 Text Color Gray Text 0 Name lbPoint Name txPoint Font Size 18 Hint Point Input Type Number

กาหนดพรอ๊ พเพอร์ตี้ Button พรอ็ พเพอรต์ ้ี คา่ ท่กี าหนด Background เลอื กสตี าม Color ตอ้ งการ Font Size 18 Text Generate

กาหนดพรอ๊ พเพอร์ตี้ Canvas พร็อพเพอรต์ ้ี คา่ ท่ีกาหนด Width 200px Height 200px

อีเวนต์และคาสัง่ ท่เี ก่ยี วขอ้ ง QR_Code คาส่งั Generate เกิดขึ้นเม่อื ต้องกำรให้ Button อเี วนต์ Click เกิดขน้ึ เม่อื มีกำรคลิกปุ่ม แปลงข้อมูลเป็น QR Code อเี วนต์ Got Response เกิดขึ้นหลงั ใช้ คำส่ัง Generate Qr Code

ต่อบล็อกคาสง่ั Button เม่อื แอปเร่ิมทำงำน ป้ อนข้อมู ล ไม่สำเร็จ แปลงข้อมูล สำเรจ็ QR Code สน้ิ สดุ กำรทำงำน

ตอ่ บล็อกคาสั่ง Button ถำ้ ช่องรับข้อมูลไมว่ ่ำง ให้ กำหนดให้ QR_Code รบั ขอ้ มูลจำกช่องรับข้อมูล ทำตำมคำส่ังใน then เรยี กใช้ฟังกช์ ันคำส่ัง Generate Qr Code ถ้ำช่องรับขอ้ มูลวำ่ ง ใหแ้ จ้งเตอื น เรียกใช้ฟังก์ชัน Show Keyboard เพ่อื แสดงแป้นพมิ พ์

ต่อบล็อกคาสง่ั QR Code เม่อื แอปเร่ิมทำงำน ป้ อนข้อมู ล ไม่สำเร็จ แปลงข้อมูล สำเร็จ QR Code สน้ิ สดุ กำรทำงำน

ตอ่ บล็อกคาสั่ง QR Code ถำ้ แปลงไดส้ ำเร็จ เรยี กใช้ฟังก์ชัน Hide Keyboard เพ่ือซ่อนแป้นพิมพ์ วำดรูป QR Code ท่แี ปลง ได้ในพนื้ ท่ี แจง้ เตือนเม่ือวำดรูป QR Code เสรจ็ แจ้งเตอื นเม่ือวำดรูป QR Code ไมส่ ำเร็จ เรยี กใช้ฟังกช์ ัน Show

การสรา้ ง แอปสแกน QR Code

ขนั้ ตอนการสรา้ งแอปสแกน QR Code QR Code Show Message

ขนั้ ตอนการสรา้ งแอปสแกน QR Code Show Message QR Code

Flowchart การทางานของระบบ เม่ือแอปเร่ิมทำงำน แสกน QR Code ไมส่ ำเร็จ แปลงข้อมูล สำเรจ็ Message Point สิน้ สุดกำรทำงำน

ออกแบบ UI • Horizontal Arrangement จดั เลย์ เอาตภ์ ายในตามแนวนอน • Button ป่ ุม

คอมโนเนนทท์ ่ีใช้ • Barcode_scanner สแกน QR Code/Barcode • Notifier แจ้งเตอื น

Flowchart การทางานของระบบ เม่ือแอปเร่มิ ทำงำน คอมโพเนนท์ Notifier แสกน QR Code คอมโพเนนท์ Barcode_Scanner ไมส่ ำเร็จ แปลงข้อมูล สำเรจ็ Message Point ส้นิ สดุ กำรทำงำน

กาหนดพรอ๊ พเพอร์ต้ี Screen พร็อพเพอรต์ ี้ ค่าท่ีกาหนด Sizing Resposize Title Point Generator

กาหนดพรอ๊ พเพอรต์ ี้ Horizontal Arrangement พร็อพเพอรต์ ี้ คา่ ท่กี าหนด Align Horizontal Center Align Vertical Center Height Fill parent Width 90% Background เลอื กสีตาม Color ต้องการ

กาหนดพรอ๊ พเพอร์ต้ี Button พรอ็ พเพอรต์ ี้ คา่ ท่กี าหนด Background เลือกสตี าม Color ตอ้ งการ Font Size 16 Text สแกน QR Code เพ่อื รับ Point

อีเวนต์และคาสัง่ ท่ีเก่ยี วข้อง QR_Code Button อเี วนต์ After Scann เกดิ ขน้ึ หลังจำก อเี วนต์ Click เกดิ ขน้ึ เม่ือมีกำรคลกิ ปุ่ม สแกน QR Code หรือ Barcode

ตอ่ บล็อกคาสั่ง Button เม่อื แอปเร่ิมทำงำน แสกน QR Code ไมส่ ำเร็จ แปลงขอ้ มูล สำเร็จ Message Point ส้นิ สุดกำรทำงำน

ตอ่ บล็อกคาสั่ง Button เรยี กใช้ฟังก์ชัน เม่ือทำกำรสแกน

ตอ่ บล็อกคาสั่ง QR Code เม่อื แอปเร่มิ ทำงำน แสกน QR Code ไมส่ ำเร็จ แปลงขอ้ มูล สำเรจ็ Message Point ส้นิ สุดกำรทำงำน

ตอ่ บลอ็ กคาส่งั QR Code ถำ้ อำ่ นข้อมูลไดส้ ำเร็จ แจ้งเตือนคะแนนท่ไี ดร้ บั แจง้ เตอื นเม่ือสแกนไม่สำเร็จ

Workshop Member Data+Point System (T4) สำมำรถแสดงขอ้ มูลของผูใ้ ช้งำนหรือสมำชิก และแสดงคะแนน (Point) เป็นไดอะลอ็ กบอ๊ กซ์ก ลำงหน้ำจอ โดยเพ่มิ เติมจำกงำนเดิม