บทที่ 1

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

Week 2 การเขียน Flowchart การทางาน และเขยี นโปรแกรมอีเวนต์ คาส่ัง ด้วย Block code

วตั ถปุ ระสงค์การเรียนรู้ 1. มคี วามรู้ความเข้าใจเก่ียวกบั การเขียน โฟลว์ชารต์การทางานของแอปพลเิ คชัน และการ เขยี นคาส่ังอเี วนตต์ า่ งๆ 2. สามารถสร้าง Flowchart การทางานของแอป พลิเคชันได้ 3. สามารถสรา้ งเขียนคาส่ังอเี วนตท์ ่ีเก่ยี วขอ้ งกับ แอปพลเิ คชันได้ ส่งิ ท่จี ะไดจ้ ากบทเรียนน้ี (T1-2) หน้า Login และหนา้ รายการสินค้า

การเขียน Flowchart การทางาน การเขียน Flowchart ผังงาน คอื แผนงานท่มี ีการใช้สญั ลักษณ์ รูปภาพและลูกศรท่แี สดงถงึ ขัน้ ตอนการ ทางานของโปรแกรมหรือระบบทีละขนั้ ตอน รวมไปถงึ ทศิ ทางการไหลของขอ้ มูล ตัง้ แต่ แรกจนได้ผลลัพธ์ตามท่ีต้องการ

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

การเขียน Flowchart การทางาน สญั ลกั ษณ์ท่ีใช้ในการเขียน Flowchart จุ ดเร่ิมต้น (Start) / รบั ข้อมูล / แสดงผลข้อมูล การตัดสนิ ใจ (Decision) การปฏิบัติงาน/กจิ กรรม จุ ดสิ้นสุด (Stop) (Process) จุ ดเช่ือมตอ่ (ภายใน) รบั ขอ้ มูลเข้า และแสดงผลโดย แสดงเอกสาร เส้นทางการไหล ใช้ฐานขอ้ มูล

การเขียน Flowchart การทางาน โครงสรา้ งของ Flowchart • การทางานแบบตามลาดบั (Sequence) • การเลอื กกระทาตามเง่ือนไข (Selection) • การทาซ้า (Interation)

การเขียน Flowchart การทางาน โครงสร้างแบบเป็นลาดับ (Sequence) • เป็นลกั ษณะขนั้ ตอนการทางานทลี ะ ขนั้ ตอนลาดบั • เขยี นให้ทางานจากบนลงล่าง • ไมม่ ที างแยกไปทศิ ทางใด

การเขียน Flowchart การทางาน เร่ิมต้น ตวั อย่าง แบบเป็นลาดับ (Sequence) นาอาหารเข้า ไมโครเวฟ การอุน่ อาหารด้วยเตาไมโครเวฟ ขนั้ ตอนการทางาน ตัง้ ระดบั ความ • นาอาหารเข้าเตาโมโครเวฟ รอ้ นและเวลา • ตัง้ ระดับความร้อนและระยะเวลาท่ีต้องการอุ่น • เตาไมโครเวฟเร่มิ อุน่ อาหาร เตาไมโครเวฟอุ ่น • เตาไมโครเวฟสง่ สัญญาณเสียงเตือนอาหาร อาหาร สุก เตือนอาหารสกุ ดว้ ย • นาอาหารท่ีอุน่ สกุ แล้วออกจากเตาไมโครเวฟ สัญญาณเสยี ง นาอาหารออกจากเตา ไมโครเวฟ ส้ินสุด

การเขียน Flowchart การทางาน เร่ิมตน้ INPUT นาอาหารเข้า PROCESS ไมโครเวฟ OUTPUT ตงั้ ระดับความ รอ้ นและเวลา เตาไมโครเวฟอุ น่ อาหาร เตือนอาหารสุกดว้ ย สัญญาณเสียง นาอาหารออกจากเตา ไมโครเวฟ สิน้ สดุ

การเขยี น Flowchart การทางาน ใบงานท่ี 1.1 • เขียน Flowchart การเปิ ดแอปสแกน QR Code

การเขยี น Flowchart การทางาน โครงสรา้ งแบบการเลอื กกระทาตามเง่อื นไข (Selection) • เลือกกระทาตามเง่อื นไขการตดั สินใจ คือ เง่อื นไขใช่ (yes) และไม่ใช่ (no) การเลือกกระทาตามเง่ือนไข (Selection) • คาสงั่ ท่ีใช้ คือ IF-THEN

เร่มิ ต้น การเขียน Flowchart การทางาน นาสนิ ค้าใหพ้ นกั งาน คิดเงิน โครงสรา้ งแบบการเลือกกระทาตามเง่อื นไข (Selection) การชาระเงินค่าสนิ คา้ ท่ี 7-Eleven แสดงยอกชาระเงนิ ขนั้ ตอนการทางาน สมาชิก? เป็น บอกหมายเลข/แตะบัตร • นาสนิ ค้าให้พนกั งานคดิ เงนิ สมาชิก • แสดงจานวนเงินท่ีต้องชาระบนหนา้ จอของ ไมเ่ ป็น เคร่อื งคิดเงิน จ่ายเงินสด • การเป็นสมาชิก • ชาระเงนิ รับสนิ คา้ ใบเสร็จ สนิ้ สดุ

การเขียน Flowchart การทางาน ใบงานท่ี 1.2 • เขียน Flowchart การเปิ ดแอปถ่ายรูป

การเขียน Flowchart การทางาน เร่ิมต้น หยอดเหรียญ ตามจานวนเงนิ โครงสรา้ งแบบการทาซ้า (Interation) ดหู มายเลขสถานี ท่ตี อ้ งการ ไม่ได้ ตรวจสอบ การซ้ือบัตรโดยสารรถไฟฟ้า BTS ผา่ นเคร่อื งจาหน่ายบตั ร กดหมายเลข เหรยี ญ ขนั้ ตอนการทางาน สถานี 1. ดูหมายเลขสถานีท่ตี อ้ งการ ได้ 2. กดหมายเลขสถานีปลายทางท่ีตอ้ งการ แสดงจานวนเงนิ 3. หนา้ จอของเคร่ืองจาหนา่ ยจะแสดงจานวนเงินท่ตี ้องชาระ ท่ตี ้องชาระ ตรวจสอบ ไมค่ รบ 4. หยอดเหรียญลงในช่ องรับเหรยี ญตามจานวน จานวนเงิน 5. ตรวจสอบเหรียญว่าถกู ตอ้ งหรือไม่ ถา้ ใช่ ใหท้ าขอ้ 6 ถา้ ครบ ไมใ่ ช่ กลบั ไปทาขอ้ 4 6. ตรวจสอบเหรียญกบั จานวนเงินท่ตี ้องชาระ ถ้าครบทาข้อ รับบัตรโดยสาร 7 ถา้ ไมค่ รบทาข้อ 4 สิ้นสดุ 7. รบั บตั รโดยสารรถไฟฟ้า BTS จากช่ องรับบตั ร

การเขียน Flowchart การทางาน ใบงานท่ี 1.3 • เขียน Flowchart การล็อกอินเข้าส่แู อป

การเขียนโปรแกรมอีเวนต์ คาสงั่ ตา่ งๆ อีเวนต์ (Event) คอื เม่อื เกิดเหตกุ ารณใ์ ดขน้ึ จะให้ แอปทางานตอบสนองอะไรบา้ ง เช่ น คลิกป่ ุมแลว้ จะ เกิด... การเกดิ อีเวนต์ อาจเกิดข้ึนได้หลายทาง ได้แก่ • เกดิ ขน้ึ โดยอัตโนมตั ิ เช่ น เม่อื แอปเร่ิมทางาน • เกดิ จากผูใ้ ช้ เช่ น การกดป่ ุม การป้ อนขอ้ มูล • เกดิ จากคาส่งั ก่อนหน้า เช่ น การถ่ายภาพ

อีเวนตท์ ่เี กดิ ข้ึนโดยอตั โนมัติ ตัวอยา่ ง อีเวนตเ์ ก่ียวขอ้ งกบั หน้าจอ Initialize อเี วนตท์ ่ีเกดิ ขนึ้ เพ่ือเตรียมงานต่าๆท่ี จาเป็น เช่ น อ่านข้อมูลจากฐานขอ้ มูล

อีเวนตท์ ่เี กดิ จากผู้ใช้ ตัวอยา่ ง อีเวนตเ์ ก่ยี วขอ้ งกบั การคลกิ ป่ ุม/แตะป่ ุม (Click and Touch) Click Lock Click Touch Up Touch Down อเี วนตท์ ่เี กดิ ขึ้นเม่อื มี อีเวนต์ท่เี กิดขึน้ เม่ือมกี าร อีเวนต์ท่ีเกิดขน้ึ เม่ือ อเี วนต์ท่ีเกดิ ขึน้ เม่ือ แตะป่ ุมนานกวา่ ทารคลิก การคลิก ท่วั ไป ก่อนจะยกน้ิวออก ยกนิ้วออก นิ้วเร่มิ แตะป่ ุม

อีเวนตท์ ่ีเกิดจากคาสงั่ กอ่ นหนา้ Do Scan ตวั อย่าง อีเวนตเ์ ก่ยี วข้องกับการถ่ายรูปภาพ หรือสแกนโค้ด คาส่ังท่สี ่ังให้เปิ ดกลอ้ ง Take Picture เพ่อื สแกนบารโ์ คด้ คาส่ังท่ีส่งั ใหเ้ ปิ ดกล้อง After Scan เพ่อื ถา่ ยภาพน่ิง อีเวนต์ท่ีเกดิ ข้นึ เม่ือผูใ้ ช้ สแกนบารโ์ ค้ดได้สาเรจ็ After Picture อเี วนตท์ ่เี กดิ ขนึ้ เม่ือผู้ใช้ กดป่ ุมชัตเตอร์เพ่อื ถา่ ยภาพ

ความสมั พันธ์ระหวา่ ง Flowchart กบั Event จากใบงานท่ี 1.1 เร่ิมตน้ การเปิ ดแอปสแกน QR Code Do Scan คาส่ังท่สี ่ังใหเ้ ปิ ดกลอ้ ง After Scan ส่องสแกน อีเวนต์ท่เี กดิ ข้ึนเม่อื แปลงขอ้ มูล เพ่อื สแกนบารโ์ ค้ด ผูใ้ ช้สแกนบาร์โคด้ ได้ ข้อมูลท่ไี ด้ สาเร็จ สิ้นสุด

ความสมั พันธ์ระหวา่ ง Flowchart กบั Event จากใบงานท่ี 1.1 เร่ิมตน้ การเปิ ดแอปสแกน QR Code Do Scan คาส่ังท่สี ่ังใหเ้ ปิ ดกลอ้ ง After Scan ส่องสแกน อีเวนต์ท่เี กดิ ข้ึนเม่อื แปลงขอ้ มูล เพ่อื สแกนบารโ์ ค้ด ผูใ้ ช้สแกนบาร์โคด้ ได้ ข้อมูลท่ไี ด้ สาเร็จ สิ้นสุด

ความสัมพันธร์ ะหว่าง Flowchart กบั Event เร่มิ ตน้ Click จากใบงานท่ี 1.3 ช่ือผูใ้ ช้งาน และ อเี วนตท์ ่ีเกิดขน้ึ เม่อื มีการคลิก การลอ็ กอินเข้าสแู่ อป รหสั ผ่าน If-else ไม่ถูกตอ้ ง ตรวจสอบ คาส่งั ท่ีใช้ ความถกู ต้อง เปรยี บเทยี บเง่ือนไข ถกู ตอ้ ง แสดงข้อมูล สน้ิ สดุ

ใบงานท่ี 1.4 จากงาน Workshop บทเรยี นท่แี ล้ว หนา้ Splash Screen ให้ 1. เพ่ิมป่ ุมวางไว้กลางหนา้ จอด้านลา่ ง พรอ้ มแสดงข้อความ Click! บนป่ ุม 2. เขยี นโฟลว์ชารต์อเี วนตข์ องป่ ุม เม่ือ คลิกป่ ุมแลว้ จะเปล่ียนไปยังหนา้ Screen2

ใบงานท่ี 1.4 เรียกใช้ Textbox ในบลอ็ ก เร่มิ ตน้ การต่อบลอ็ กโค้ด Text แล้วกาหนดช่ือหนา้ สกรนี ท่ี คลกิ ปุ่ม ต้องการเปล่ียน เปล่ียนหนา้ เรยี กใช้อีเวนต์ Click ของคอมโพเนนท์ Button แสดงหน้า Screen2 เรียกใช้คาส่งั open another screen screenname ส้ินสดุ ในบล็อก Control เพ่อื ส่งั ให้เปล่ียนไปยังหน้าสกรีนท่กี าหนด

ใบงานท่ี 1.5 จากใบงานท่ี 1.4 ให้สร้างหนา้ สกรนี Login ดงั น้ี

ออกแบบ UI • Vertical Arrangement จดั เลย์ เอาตภ์ ายในตามแนวตงั้ • Horizontal Arrangement จัดเลย์ เอาต์ภายในตามแนวนอน • Label แสดงข้อความ • Text Box ป้ อนขอ้ มูล • Button ป่ ุม คอมโนเนนท์ท่ีใช้ • Notifier แจ้งเตอื น

Flowchart การทางานของระบบ เร่มิ ตน้ ช่ือผูใ้ ช้งาน และ คอมโพเนนท์ Notifier รหสั ผ่าน ไมถ่ ูกตอ้ ง ตรวจสอบ ความถกู ตอ้ ง ถูกตอ้ ง แสดงข้อมูล สิน้ สดุ

กาหนดพรอ๊ พเพอร์ต้ี Screen-Login พร็อพเพอรต์ ้ี ค่าท่กี าหนด Sizing Resposize Align Horizontal Center Align Vertical Center Screen Orientation Portrait Title Visible ลบเคร่อื งหมายถกู

กาหนดพรอ๊ พเพอร์ต้ี Vertical Arrangement พร็อพเพอรต์ ้ี ค่าท่กี าหนด Align Horizontal Left Align Vertical Center Height Fill parent Weight 70%

กาหนดพรอ๊ พเพอร์ต้ี Vertical Arrangement พร็อพเพอรต์ ้ี ค่าท่กี าหนด Align Horizontal Left Align Vertical Center Height Fill parent Weight 70%

กาหนดพรอ๊ พเพอร์ต้ี Label Space Space Textbox Button Textbox Label Button HA (Horizontal Arrangement) Button Space Space

กาหนดพรอ๊ พเพอรต์ ี้ Label พร็อพเพอรต์ ้ี คา่ ท่กี าหนด Text Email Text Color Gray Label พรอ็ พเพอรต์ ี้ ค่าท่ีกาหนด Text Password Text Color Gray

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

กาหนดพรอ๊ พเพอร์ต้ี Textbox-Login_Password Textbox-Login_Email พรอ็ พเพอรต์ ี้ คา่ ท่กี าหนด พร็อพเพอรต์ ้ี คา่ ท่กี าหนด Font Size 16 Font Size 16 Width Fill parent Width Fill parent Hint ลบออก Hint ลบออก Input Type Password: 2 Input Type Email: 4

กาหนดพรอ๊ พเพอรต์ ี้ Button-BtnShowHidePassword พรอ็ พเพอรต์ ี้ ค่าท่กี าหนด Background Color None (ไม่มสี ี) Font Size 16 Horizontal Arrangement Font Typeface Material Icons พร็อพเพอรต์ ี้ ค่าท่กี าหนด Height 48px Align Vertical Center Weight 48px Height Fill parent Text &#xe8f4 Text Color Dark Gray HTML Format เคร่ืองหมายถูก

กาหนดพรอ๊ พเพอรต์ ี้ Button-BtnLogin Button-BtnGoogleSignIn พรอ็ พเพอรต์ ี้ ค่าท่ีกาหนด Background Color Teal พร็อพเพอรต์ ี้ คา่ ท่กี าหนด Font Size 14 Background Color Light Gray Weight Fill parent Font Size 14 Shape Rectangular Weight Fill parent Text LOG IN Shape Rectangular Text Log in with Google Text Color Dark Gray

อัปโหลดไฟลใ์ ส่ใน Assets • ไฟล์ภาพโลโก้ของ Google

อีเวนต์และคาสั่งท่ีเก่ยี วขอ้ ง Screen อีเวนต์ Initialize เกดิ ข้นึ เม่อื เปิดแอป Button อีเวนต์ Click เกดิ ขึ้นเม่ือมีการคลกิ ปุ่ม

ตอ่ บล็อกคาสั่ง Button - BtnGoogleSignIn คาส่งั With Icon From Picture ใช้สร้างปุ่มท่ีมีทัง้ ภาพโลโก้ และข้อความบนปุ่ม ตาแหน่งภาพโลโก้ ช่ือไฟล์ภาพโลโก้

ตอ่ บลอ็ กคาส่งั Button - BtnShowHidePassword เม่อื ผู้ใช้คลกิ ปุ่ม กจ็ ะตรวจสอบสถานะปุ่มเปน็ แบบ 1 (แสดงรหสั ผ่าน) หรือแบบ 2 (ซ่อนรหัสผา่ น) หาก Input Type เป็น 1 กจ็ ะเปล่ียนเป็น 2 เพ่ือซ่อนรหสั ผ่าน และเปล่ียนรูปปุ่ม หาก Input Type เปน็ 2 ก็จะเปล่ยี นเป็น 1 เพ่ือแสดงรหสั ผ่าน และเปล่ยี นรูปปุ่ม

ต่อบลอ็ กคาส่งั Button - BtnLogin คาส่งั Is empty ตรวจสอบ คาส่งั Show Alert วา่ Login_Email ว่างหรือไม่ ใช้แสดงไดอะล็อก เม่ือผูใ้ ช้คลิกปุ่ม ก็จะตรวจสอบ Email ก่อน แจง้ เตอื น คาส่งั Request Focus ทา ใหเ้ คอรเ์ ซอรไ์ ปรอท่ชี ่อง คาส่ัง Show Keyboard ใช้ แสดงคียบ์ อรด์ ออกมา

ต่อบลอ็ กคาสงั่ Button - BtnLogin คาส่ัง Is empty ตรวจสอบ คาส่ัง Show Alert วา่ Login_Pwd ว่างหรอื ไม่ ใช้แสดงไดอะลอ็ ก จากนนั้ ก็จะตรวจสอบ Password แจง้ เตือน คาส่ัง Request Focus ทา ให้เคอรเ์ ซอรไ์ ปรอท่ีช่อง คาส่ัง Hide Keyboard ใช่้ ซ่ อนคีย์บอร์ด

สร้างฟั งกช์ ันข้นึ มาตรวจสอบ ลากบลอ็ กคาส่งั do ไปวาง เลือก Procedures ตัง้ ช่ือฟังกช์ ัน

สรา้ งฟั งกช์ ันขึ้นมาตรวจสอบ พารามิเตอรท์ ่ีกาหนด กาหนดคา่ พารามเิ ตอร์ (Parameter) เพ่ือรบั ขอ้ มูลท่ีส่งเขา้ มา กาหนดช่ือพารามเิ ตอร์ คลกิ ไอคอน ลากไปวางในบล็อก

เรียกใช้ฟั งกช์ ันท่สี ร้างขน้ึ ลากบลอ็ กคาส่งั call ไปวาง เลือก Procedures

เรยี กใช้ฟั งก์ชันท่ีสร้างขึ้น กาหนดคา่ อาร์กวิ เมนต์ (Argument) เพ่ือส่งข้อมูลไปใช้งานในฟังก์ชัน ส่งขอ้ มูล Email สง่ ข้อมูล Password

สรา้ งฟั งกช์ ันข้ึนมาตรวจสอบ คาส่งั get อ่านค่าพารามเิ ตอรท์ ่ี อารก์ วิ เมนตส์ ง่ มา ตรวจสอบ Email วา่ ตรงกับท่กี าหนดหรอื ไม่ และ ตรวจสอบ Password วา่ ตรงกับท่ีกาหนดหรอื ไม่ เปล่ียนไปยังหนา้ ท่กี าหนด

Workshop หนา้ รายการสนิ คา้ (T2-1) ใหส้ ร้างหนา้ รายการสนิ คา้ (กาหนดหน้าช่ือ Home) ดังรูปแบบ List view ในกลุ่ม Layout