อาจารยผ์ ู ส้ อน การพฒั นาโปรแกรมบน อุปกรณพ์ กพาเบอื้ งตน้ อ.จีระสิทธ์ิ อึง้ รัตนวงศ์ แผนกคอมพิวเตอรธ์ ุรกจิ 6mkbyur (3/1) , aniujvj (3/2) 062-5548444 pno-ball
Week 5 การจัดการกบั ข้อมูลแบบ Firebase
วัตถปุ ระสงคก์ ารเรยี นรู้ 1. มีความรูค้ วามเขา้ ใจเก่ียวกบั การบนั ทกึ ขอ้ มูลลง ใน Firebase 2. สามารถสรา้ งแอปพลิเคชันท่ีเก่ียวข้องกบั การ บันทกึ ขอ้ มูลใน Firebase ได้ ส่งิ ท่จี ะได้จากบทเรียนน้ี (T2-2) หน้าสมคั รสมาชิก
รู้จักกับ Firebase Firebase คอื บรกิ ารหน่งึ ของ Google เป็นการ บรกิ ารข้อมูลแบบออนไลนใ์ นรูปแบบตา่ งๆ เช่ น • Firebase Authentication สาหรับทาระบบ ลอ็ กอนิ • Firebase Real-time Database สาหรบั การ ใช้งานระบบฐานขอ้ มูลแบบ Real-Time • Firebase Storage สาหรับการอปั โหลด/ ดาวนโ์ หลดไฟล์จากพนื้ ท่ีจัดเก็บไฟลบ์ น คลาวด์
ขนั้ ตอนการ Firebase ก่อนจะเร่ิมใช้งาน Firebase จะตอ้ งเซตอัปโปร เจกต์และเปิ ดการใช้งาน Firebase Real-Time Database กอ่ น โดยมขี ัน้ ตอนดังนี้ Authentication Real-Time Database
เซตอัปโปรเจกต์ใน Firebase ไปท่ี https://console.firebase.google.com/ คลิกท่ี Add project
เซตอัปโปรเจกต์ใน Firebase ตัง้ ช่ือโปรเจกต์ แล้วคลกิ ปุ่ม Continue
เซตอัปโปรเจกต์ใน Firebase คลิกปุ่ม Continue
เซตอัปโปรเจกต์ใน Firebase เลอื ก Default แลว้ คลิกปุ่ม Create project
เซตอัปโปรเจกต์ใน Firebase เม่อื สร้างโปรเจกต์ เสรจ็ แลว้ ให้ คลิกปุ่ม Continue
เซตอัปโปรเจกต์ใน Fireจbะแaสsดeงหนา้ Overview ของโปรเจกต์ ซ่ึงจะมบี รกิ ารต่างๆ ใหเ้ ลือกใช้
เซตอัป Firebase Realtime Database คลกิ ท่ี Realtime Database คลกิ ท่ี Create Database
เซตอัป Firebase Authentication Authentication เป็นส่วนท่ีช่ วยให้สามารถ สร้างแอปท่มี รี ะบบ Sign-up, Log-in และ จัดการยูสเซอรใ์ นระบบได้ โดยอาศัยบรกิ าร ระบบคลาวด์ ไม่ตอ้ งมเี ซิร์ฟเวอร์เอง ไม่ว่าจะ เป็นการลอ็ กอินด้วย Email , Telephone , Google , Facebook , twitter หรอื อ่ืนๆ
เซตอัป Firebase Authentication คลิกท่ี Authentication คลกิ ท่ี Get started
เซตอัป Firebase Authentication คลิกท่ี Google
เซตอัป Firebase Authentication คลิกท่ี Enable
เซตอัป Firebase Authentication คลิกท่ี Project settings
เซตอัป Firebase Authentication ระบุอีเมล
เซตอัป Firebase Authentication เลอื กระบบโทรศพั ท์ android
เซตอัป Firebase Authentication กาหนดในสว่ น Package Name ของหนา้ Screen ระบุ Package Name
เซตอัป Firebase Authentication ดใู ดท้ ่ี Setting ในสว่ น Keystore SHA-1 ระบุ SHA-1 เสร็จ แล้ว คลกิ ปุ่ม Register app
เซตอัป Firebase Authentication คลิกปุ่ม Download ไฟล์ google-service.json แลว้ คลิกปุ่ม Next
อีเวนต์และคาส่ังท่เี ก่ยี วข้องกบั Firebase Authentication Log In/ Sign In คาส่งั Google Sign In สาหรับตรวจสอบ อีเวนต์ Login Failed จะเกดิ ขน้ึ เม่ือตรวจสอบ การล็อกอนิ ด้วย Google แลว้ ล็อกอนิ ไม่สาเรจ็ อเี วนต์ Login Success จะเกิดขึน้ เม่อื ตรวจสอบแลว้ ลอ็ กอินสาเรจ็
อีเวนตแ์ ละคาสัง่ ท่เี ก่ยี วขอ้ งกับ Firebase Authentication Sign Up คาส่ัง Email Password Sign Up สาหรับ อเี วนต์ Signup Failed จะเกิดขน้ึ เม่ือ ตรวจสอบการ Sign Up ด้วย Google ตรวจสอบแลว้ Sign Up ไมส่ าเรจ็ อีเวนต์ Signup Success จะเกิดข้นึ เม่อื ตรวจสอบแล้ว Sign Up สาเร็จ
อปั โหลดไฟล์ google-service.json
การสรา้ ง แอป ล็อกอิน ด้วย Google
ตอ่ บล็อกคาสง่ั แสดงไอคอนท่ีป่ ุม ถ้าตอ้ งการใหไ้ อคอนต่างๆ แสดงบนป่ ุม จะตอ้ งใช้คาส่งั With Icon From Picture ช่ือไฟลภ์ าพไอคอน
ลองมือสรา้ งแอป Label สร้างแอปดังภาพ image Label
กาหนดพรอ๊ พเพอร์ต้ี Image: ImgPicture พร็อพเพอรต์ ี้ ค่าท่กี าหนด Height 80px Label: LblName Weight 80px พร็อพเพอรต์ ้ี ค่าท่ีกาหนด Label: LblEmail Font size 16 Text Name พร็อพเพอรต์ ้ี ค่าท่กี าหนด Text Alignment Center Font size 16 Text Color Dark Gray Text Email Text Alignment Center Text Color Dark Gray
ตอ่ บลอ็ กคาสัง่ ลอ็ กอินดว้ ย Google เม่ือตอ้ งการใหแ้ สดงหนา้ ตา่ งเลอื ก Username ของ Google เพ่ือล็อกอิน จะตอ้ งใช้คาส่งั Google Sign In
ตอ่ บล็อกคาสัง่ เม่ือลอ็ กอนิ ไม่สาเรจ็ ในกรณีท่ลี ็อกอนิ ไมส่ าเรจ็ หรอื เกดิ ข้อผดิ พลาด จะตอ้ งใช้คาส่งั Login Failed
ตอ่ บลอ็ กคาสัง่ เม่ือล็อกอนิ สาเรจ็ ในกรณีท่ีล็อกอนิ สาเร็จ จะตอ้ งใช้คาส่ัง Login Success เม่ือล็อกอนิ สาเรจ็ ใหน้ าขอ้ มูล name, email และ profile Picture มาเกบ็ ไวใ้ นลสิ ต์ โดยสร้างดว้ ยคาส่ัง make a list
ตอ่ บลอ็ กคาสง่ั นาขอ้ มูลลสิ ต์ไปใช้งาน ขอ้ มูลในลิสต์ สามารถนาไปใช้งานได้ โดยตอ้ งใช้คาส่งั select list item list และกาหนด index ให้ ถกู ตอ้ งตามลาดบั ข้อมูลในลสิ ต์
แสดงข้อมูลการลอ็ กอนิ ของ Users ใน Authenticaiton
การสร้าง แอป สมคั รสมาชิก ด้วย Firebase
ลองมือสร้างแอป สรา้ งแอปดังภาพ Label Copy VA_Login SLpaabceel
WORKSHOP : ออกแบบ UI • Horizontal Arrangement จัดเลย์ เอาตภ์ ายในตามแนวนอน • Vertical Arrangement จัดเลย์ เอาต์ภายในตามแนวตงั้ • Label แสดงขอ้ ความ • Textbox ป้ อนข้อมูล • Button ป่ ุมสง่ ขอ้ มูล
กาหนดพรอ๊ พเพอร์ตี้ Label: LblLogin พร็อพเพอรต์ ี้ ค่าท่กี าหนด Font Size 16 Width Fill parent Text Sign up Teat Alignment Center Clickable เคร่ืองหมายถกู
กาหนดพรอ๊ พเพอรต์ ี้ Vertical Arrangement พร็อพเพอรต์ ้ี คา่ ท่กี าหนด Align Horizontal Left Align Vertical Top Height Automatic Weight 70% VA_Signup
กาหนดพรอ๊ พเพอร์ต้ี Label Textbox : Signup_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 : Signup_Pwd Text Alignment Left พรอ็ พเพอรต์ ้ี คา่ ท่กี าหนด Text Color Dark Gray Font size 16 Button: BtnShowHidePwd2 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  Space Text Color Dark Gray HTML Format เคร่ืองหมายถูก พรอ็ พเพอรต์ ี้ ค่าท่กี าหนด Height 10px Background color None
กาหนดพรอ๊ พเพอร์ตี้ Button: BtnSignup พร็อพเพอรต์ ี้ คา่ ท่กี าหนด Font size 16 Weight Fill parent Background สีตามต้องการ Text SIGN UP Label: LblLogin Text Alignment Center พรอ็ พเพอรต์ ้ี ค่าท่ีกาหนด Font size 14 Space Text Log in คา่ ท่กี าหนด Text Alignment Center พรอ็ พเพอรต์ ี้ Text Color Black Height 10px
ตอ่ บล็อกคาส่ัง ตรวจสอบการเลอื กใช้ VA อนั ดับแรกหนา้ ตา่ งจะเปล่ยี นไปตามท่ีผูใ้ ช้คลิกเลือกว่าจะ Log In หรือ Sign Up โดยสร้างเป็น ฟั งกช์ ันและกาหนดให้ หน้าต่าง VA_Login มคี ่าเท่ากบั 1 และหน้าตา่ ง VA_Signup มีคา่ เท่ากับ 2
ตอ่ บลอ็ กคาส่ัง กาหนดเร่ิมต้นแสดงหน้า VA_Login ก่อน อนั ดบั ถัดไป กาหนดใหเ้ ร่ิมตน้ แสดงหนา้ VA_Login กอ่ นทกุ ครงั้ โดยกาหนดคา่ เท่ากบั 1
ตอ่ บลอ็ กคาสั่ง อเี วนตใ์ ห้กบั ลงิ ก์ Log In เม่ือคลิกลงิ ก์ Log In ใหไ้ ปยังหนา้ ตา่ ง VA_Login โดยกาหนดคา่ เท่ากับ 1
ตอ่ บลอ็ กคาสง่ั ตรวจสอบข้อมูลว่างใน Signup_Email ในบทเรยี นน้จี ะใช้คาส่ังตรวจสอบค่าว่าง ดว้ ยคาส่งั is empty
ตอ่ บลอ็ กคาส่ัง ตรวจสอบขอ้ มูลวา่ งใน Signup_Pwd ในบทเรียนนจ้ี ะใช้คาส่งั ตรวจสอบคา่ ว่าง ดว้ ยคาส่ัง is empty
ตอ่ บลอ็ กคาสัง่ เกบ็ ข้อมูล Email และ Password จากนนั้ ใหเ้ ก็บขอ้ มูล Email และ Password ด้วยคาส่งั Email Password Sign Up
ตอ่ บลอ็ กคาสั่ง เม่อื Sign up ไมส่ าเรจ็ ในกรณีท่ี Sign up ไมส่ าเรจ็ หรอื เกิดข้อผิดพลาด จะต้องใช้คาส่งั Sign up Failed
ตอ่ บล็อกคาส่ัง เม่ือ Sign up สาเรจ็ ในกรณีท่ี Sign up สาเรจ็ จะตอ้ งใช้คาส่งั Sign up Success เม่ือ Sign up สาเร็จ ใหล้ อ็ กอนิ ด้วย email และ Password ด้วย คาส่งั Email Password Login
Search
