week4 API กับรูปแบบข้อมูล JSON

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

Week 4 API กับรูปแบบข้อมูล JSON

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

รู้จักกับ API API (Application Programming Interface) คือ ช่ องทางติดต่อส่อื สาร • ช่ วยในการเข้าถึงข้อมูลตา่ ง ๆ • นาขอ้ มูลตา่ ง ๆ ออกมาใช้งาน • สง่ ข้อมูลเขา้ ไปจดั เกบ็ โดยเจ้าของโปรแกรมท่ีมี API จะกาหนด ขอบเขตในการเขา้ ถงึ บรกิ ารต่าง ๆ

รู้จักกบั API ปัจจุบนั API ถกู ใช้งานใน application เพ่อื ส่อื สารกบั user โดยไม่จาเป็นตอ้ งมีความรู้ บริษัทหลายบรษิ ัทมกี ารเปิ ด API ใหภ้ ายนอก เขา้ มาใช้งาน เช่ น facebook, google, twitter ผูพ้ ัฒนาระบบท่สี นใจ สามารถ นาเอา API เหล่าน้ไี ปไปตอ่ ยอดได้

ตวั อยา่ ง API ในปัจจุบัน API รายงานสถานการณ์ COVID-19 เวบ็ ไซตท์ ่ีนา API มาแสดง

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

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

รูปแบบข้อมูลใน JSON โดยท่ี .. \"name/key\" คือ ช่ือท่จี ะใช้ในการอ้างอิงถึง value { สามารถเป็นตัวแปรชนดิ string ตวั เลข และจาเปน็ ต้อง \"key/name\" : \"value1\", อยูภ่ ายใต้ \" \" \"key/name\" : \"value2\" \"value\" คอื ข้อมูลตา่ งๆตอ้ งการเกบ็ ลงใน collection สามารถเป็นตัวแปรชนิด string, number, object, } array, boolean, null

ตวั อยา่ ง ขอ้ มูลในรูปแบบ JSON { \"name\" : \"Jothanan\", { \"age\" : 28, \"key\" : \"value1\", “province\" : “Nonthaburi\" \"name\" : \"value2\" } }

ท่มี า : https://covid19.th-stat.com/api/open/today ตัวอย่าง ขอ้ มูลในรูปแบบ JSON key/name value {\"Confirmed\":61699,\"Recovered\":34402,\"Hospitalized\":27119,\"Deaths\":178}, ขอ้ มูลชุดท่ี 1 ขอ้ มูลชุดท่ี 2 ค่ันชุดข้อมูล { \"Confirmed“ : 61699, \"Recovered“ : 34402, \"Hospitalized“ : 27119, \"Deaths“ : 178 }

อีเวนต์และคาสัง่ ท่เี ก่ยี วข้องกับ JSON คาส่งั GetStringInArray สาหรบั ดงึ หรืออ่าน kay/name ท่ีเลือก JSON คาส่ัง ParseJSON สาหรบั แปลง JSON

การสร้าง แอป รายงานสถานการณ์ COVID-19

WORKSHOP : ออกแบบ UI • Horizontal Arrangement จดั เลย์ เอาตภ์ ายในตามแนวนอน • Vertical Arrangement จัดเลย์ เอาต์ภายในตามแนวตัง้ • Label แสดงข้อความ คอมโนเนนท์ท่ีใช้ • Web เช่ือมตอ่ กับเว็บปลายทาง • JsonTools จดั การกับข้อมูล JSON ท่ี ไดร้ บั

ลองมือสรา้ งแอป Label Label สร้างแอปดังภาพ LLaabbeell Horizontal Label Arrangement Space Vertical Arrangement

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

กาหนดพรอ๊ พเพอรต์ ี้ Label พรอ็ พเพอรต์ ี้ คา่ ท่กี าหนด Font Size 20 Width 90% Text 0 Teat Alignment Center

กาหนดพรอ๊ พเพอร์ตี้ Label-LblUpdate พรอ็ พเพอรต์ ี้ ค่าท่ีกาหนด Font Size 16 Horizontal Arrangement Width 90% พร็อพเพอรต์ ้ี คา่ ท่กี าหนด Text ข้อมูลอัปเดต: Align Horizontal Center Teat Alignment Left Height Fill parent Visible ลบเคร่ืองหมาย ถูก Weight 90% Label พร็อพเพอรต์ ี้ คา่ ท่ีกาหนด Font Size 16 Width 90% Text ข้อมูลอปั เดต: Teat Alignment Left

กาหนดพรอ๊ พเพอรต์ ้ี Vertical Arrangement พร็อพเพอรต์ ้ี ค่าท่กี าหนด Align Horizontal Center VA_Confirmed VA_Recovered Align Vertical Center VA_Hospitalized VA_Deaths Height 150px Weight 90%

กาหนดพรอ๊ พเพอร์ตี้ Label พรอ็ พเพอรต์ ี้ ค่าท่กี าหนด Label Font Size 18 พร็อพเพอรต์ ี้ คา่ ท่กี าหนด Width Fil parent Font Size 44 Text ติดเช้ือเพ่มิ ข้นึ Width Fil parent Teat Alignment Center Text ลบออก Text Color Dark Gray Teat Alignment Center Text Color เลือกสีตามต้องการ LblNewConfirmed LblRecovered LblHospitalized LblDeaths

กาหนดพรอ๊ พเพอร์ต้ี Label: ตัง้ ช่ือ LblConfirmed พรอ็ พเพอรต์ ้ี คา่ ท่กี าหนด LblNewRecovered LblNewHospitalized Font Size 18 LblNewDeaths Width Fil parent Text ลบออก Teat Alignment Center Text Color Dark Gray

กาหนดพรอ๊ พเพอรต์ ้ี

การเพ่มิ คอมโพเนนท์ คอมโนเนนท์ JSONTools จะตอ้ งดาวน์ โหลดและตดิ ตงั้ เพ่ิมเติม สามารถดาวน์ โหลดได้ท่ี http://shorturl.at/bfpKU คลิกปุ่ม Import extension เลอื ก Extension

การเพ่ิมคอมโพเนนท์ เลอื กไฟล์ แล้วคลิกปุ่ม คลกิ ปุ่ม ตกลง IMPORT FORM FILE จะได้คอมโพเนนต์ JSONTools

อีเวนต์และคาส่ังท่ีเก่ียวขอ้ งคอมโพเนนต์ Web Web คาส่ัง Post Text ใช้อ่านค่าข้อมูลจากเวบ็ อเี วนต์ Got Text เกิดข้นึ หลงั จากอา่ นข้อมูล

อีเวนต์และคาสั่งท่ีเก่ียวข้องคอมโพเนนต์ JSONTools JSONTools คาส่งั ParseJSON ใช้แปลงขอ้ มูลจาก JSON คาส่ัง ParseJSON ใช้อา่ นข้อมูลส่วนท่ีเปน็ Key ในรูปแบบอาร์เรย์

ท่ีมา : https://covid19.th-stat.com/api/open/today ตอ่ บลอ็ กคาส่งั เช่ือมตอ่ API คาส่ัง Set…URL to ใช้เช่ือมตอ่ API

ตอ่ บลอ็ กคาส่งั เช่ือมตอ่ API ท่ีมา : https://covid19.th-stat.com/api/open/today อา่ นขอ้ มูลท่ีได้รบั

ตอ่ บลอ็ กคาส่งั GetStringInArray – อ่านข้อมูลจาก Key/Name เม่อื อ่านแลว้ นามาแสดงใน Label ช่ือ LblUpdate อา่ นค่า Key ท่ีช่ือ UpdateDate

ตอ่ บลอ็ กคาสงั่ GetStringInArray – อา่ นข้อมูลจาก Key/Name เม่อื อ่านแลว้ นามาแสดงใน Label ช่ือ LblConfirmed อ่านค่า Key ท่ีช่ือ Confirmed เม่ืออ่านแลว้ นามาแสดงใน Label ช่ือ LblNewConfirmed อ่านคา่ Key ท่ีช่ือ NewConfirmed

ตอ่ บลอ็ กคาสงั่ GetStringInArray – อ่านขอ้ มูลจาก Key/Name เม่อื อ่านแลว้ นามาแสดงใน Label ช่ือ LblRecovered อา่ นค่า Key ท่ชี ่ือ Recovered เม่ืออ่านแลว้ นามาแสดงใน Label ช่ือ LblNewRecovered อ่านคา่ Key ท่ชี ่ือ NewRecovered

ตอ่ บลอ็ กคาสงั่ GetStringInArray – อ่านขอ้ มูลจาก Key/Name เม่อื อ่านแลว้ นามาแสดงใน Label ช่ือ LblHospitalized อ่านคา่ Key ท่ชี ่ือ Hospitalized เม่ืออา่ นแลว้ นามาแสดงใน Label ช่ือ LblNewHospitalized อา่ นค่า Key ท่ีช่ือ NewHospitalized

ตอ่ บล็อกคาสั่ง GetStringInArray – อา่ นข้อมูลจาก Key/Name เม่อื อา่ นแลว้ นามาแสดงใน Label ช่ือ LblDealths อ่านคา่ Key ท่ชี ่ือ Dealths เม่อื อ่านแลว้ นามาแสดงใน Label ช่ือ LblNewDealths อ่านค่า Key ท่ีช่ือ NewDealths

การสร้าง แอป ล็อกอนิ ด้วย Email และ Password

WORKSHOP : ออกแบบ UI • Horizontal Arrangement จัดเลย์ เอาตภ์ ายในตามแนวนอน • Vertical Arrangement จัดเลย์ เอาต์ภายในตามแนวตงั้ • Label แสดงขอ้ ความ • Textbox ป้ อนข้อมูล • Button ป่ ุมสง่ ขอ้ มูล

ลองมือสร้างแอป Label สร้างแอปดังภาพ Button BTeuxtttobnox Label LBaubtteol n Tesxptbaocex Horizontal Arrangement space space Vertical Arrangement

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

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

กาหนดพรอ๊ พเพอรต์ ี้ Label Textbox : Login_Email พรอ็ พเพอรต์ ี้ คา่ ท่ีกาหนด พร็อพเพอรต์ ้ี ค่าท่ีกาหนด Font size 16 Font size 16 Text Email: Hint ลบอก Text Alignment Left Text ลบออก Text Color Dark Gray Weight Fill parent Space Text Alignment Left พรอ็ พเพอรต์ ี้ ค่าท่ีกาหนด Input Type Email: 4 Height 10px

Label พร็อพเพอรต์ ี้ คา่ ท่ีกาหนด กาหนดพรอ๊ พเพอร์ต้ี Font size 16 Text Password: Textbox : Login_Pwd Text Alignment Left พร็อพเพอรต์ ี้ ค่าท่ีกาหนด Text Color Dark Gray Font size 16 Button: BtnShowHidePwd Hint ลบอก พร็อพเพอรต์ ี้ ค่าท่กี าหนด Text ลบออก Font size 16 Weight Fill parent Font Typeface Material Icons Text Alignment Left Height / Weight 40px Input Type Password: 2 Text Arrangement Center Text &#xe8f4 Space Text Color Dark Gray HTML Format เคร่ืองหมายถูก พร็อพเพอรต์ ี้ ค่าท่ีกาหนด Height 10px Background color None

Button: BtnLoginGoogle กาหนดพรอ๊ พเพอร์ตี้ พรอ็ พเพอรต์ ี้ ค่าท่กี าหนด Font size 16 Button: BtnLogin Weight Fill parent พรอ็ พเพอรต์ ี้ คา่ ท่กี าหนด Background color สีตามต้องการ Font size 16 Text Log in with google Weight Fill parent Text Alignment Center Background สีตามต้องการ Text LOG IN Label: LblSignup Text Alignment Center พร็อพเพอรต์ ้ี ค่าท่กี าหนด Font size 14 Space Text Sign up พรอ็ พเพอรต์ ้ี คา่ ท่กี าหนด Text Alignment Center Height 10px Text Color Black

ตอ่ บล็อกคาสง่ั ตรวจสอบขอ้ มูล Email/Password อันดบั แรกจะทาการตรวจสอบค่าวา่ งในช่ อง Email และ Password กอ่ น โดยใช้ IF ในการตรวจสอบ เง่อื นไข ถ้าช่อง Login_Email ว่างหรอื ไมม่ ขี ้อมูล ถ้าช่อง Login_Pwd วา่ งหรอื ไมม่ ีข้อมูล

ตอ่ บล็อกคาสงั่ ตรวจสอบขอ้ มูล Email/Password ถา้ ว่างไม่มีข้อมูล ใหแ้ จ้งผูใ้ ช้ และกลับไปโกกัสท่ีช่ อง Email .ใหโ้ ฟกสั ท่ี Login_Email

ตอ่ บล็อกคาส่ัง ตรวจสอบขอ้ มูล Email/Password ถ้าไม่วา่ งมขี อ้ มูล ใหต้ รวจสอบวา่ Email ตรงกบั ท่กี าหนดคอื [email protected] และ Password ตรง กบั ท่กี าหนดคือ 12345 หรือไม่ ถา้ ไมต่ รงใหแ้ จง้ ผู้ใช้งาน .ให้โฟกสั ท่ี Login_Email

ตอ่ บลอ็ กคาสง่ั ตรวจสอบขอ้ มูล Email/Password ถ้าตรงใหเ้ ปล่ียนไปหนา้ Screen2 .เปล่ยี นไปหน้า Screen2

ตอ่ บลอ็ กคาส่ัง ตรวจสอบป่ ุม ShowHidePassword ถา้ ประเภท Login_Pwd เป็น 1 ให้สถานป่ ุมเป็น 2 และแสดงไอคอนตาเปิ ด ถ้าประเภท Login_Pwd เป็น 2 ใหส้ ถานป่ ุมเป็น 1 และแสดงไอคอนตาปิ ด

Workshop หนา้ บันทึกขอ้ มูลสมคั ร สมาชิกผูใ้ ช้งานดว้ ย Firebase (T3) ให้สร้างหน้า สมัครสมาชิกผูใ้ ช้งาน และทาการบนั ทกึ ขอ้ มูลแบบ Firebase