Home / Developer  / Android Developer  / เขียนแอพฯ Android เชื่อมต่อ FireBase เป็นฐานข้อมูล

เขียนแอพฯ Android เชื่อมต่อ FireBase เป็นฐานข้อมูล

บทเรียนการพัฒนาแอพพลิเคชันบนระบบปฏิบัติการ Android รอบนี้จะเป็นการใช้งาน FireBase ในส่วนของ Authentication หรือการเข้าระบบด้วยฐานข้อมูล

สำหรับผู้ที่เริ่มต้น สามารถศึกษาบทความการพัฒนาแอพพลิเคชัน Android ได้ที่: บทเรียนการเขียนแอพ Android

สำหรับบทเรียนในวันนี้คือการสร้าง Social Login หรือระบบ Social Authentication เช่นการใช้บัญชี Facebook, Twitter, Google มาเข้าสู่ระบบร่วมกับแอพพลิเคชัน Android ของเราผ่าน Android Studio ร่วมกับ FireBase ดังนั้นก่อนจะศึกษาบทเรียนนี้แนะนำให้ศึกษาบทเรียนก่อนหน้าคือ

การพัฒนาแอพพลิเคชัน Android ร่วมกับ Firebase

ถ้าหากว่าทำความเข้าใจแล้วเรามาเริ่มพัฒนาแอพพลิเคชันกันครับ

สร้าง Project ใหม่บน Android Studio ครับ

firebase-android-social-1

เลือกรูปแบบของ Project เป็น Basic Activity ครับ หลังจากนั้นก็กด Finish เพื่อรอ resources ทั้งหมดพร้อมทำงาน

firebase-android-social-2

เมื่อ Project ของเราพร้อมแล้วให้เปิดไฟล์ AndroidManifest.xml ขึ้นมาเพิ่ม Permission ส่วนของการต่ออินเทอร์เน็ตลงไปครับ

ไฟล์ AndroidManifest.xml จะเป็นดังนี้

นำ App Package ของเรา ในตัวอย่างคือ com.daydev.firebasesociallogin ไป Add ลงใน FireBase console ครับเปิด URL เว็บไซต์ https://console.firebase.google.com ไปที่ Project ของเราที่สร้างไว้

Screen Shot 2016-09-04 at 3.35.33 PM

สร้างแอพใหม่ของเราขึ้นมาบน Firebase ครับ โดยใช้ชื่อ Package ของเราเป็นตัวกำหนด อ้างอิงจากบทความก่อนหน้า: การพัฒนาแอพพลิเคชัน Android ร่วมกับ Firebase

firebase-android-social-3

ใส่ข้อมูล Package ของแอพพลิเคชันของเราลงไป พร้อมตั้งชื่อ NickName ให้กับ Project

firebase-android-social-4

เราจะได้ไฟล์ google-services.json มาให้ทำตามขั้นตอนที่แนะนำจาก Firebase นั่นคือการนำไปวางใน Project ของเรา

 

Screen Shot 2016-08-13 at 8.26.05 AM

ปรับโหมดเป็น Project แล้วนำไปวางใน Path เดียวกับ gradle

firebase-android-social-6

เปิด gradle ขึ้นมาเพื่อตั้งค่าตัว Project ของเราให้รู้จัก Firebase ส่วนแรกคือ gradle ของ Project ใส่ค่าต่อไปนี้ลงใน dependencies ครับ

firebase-android-social-5

ให้ทำการ Sync now แล้วรอ จนเสร็จ ต่อจากนั้นให้ไปที่ gradle ส่วนของ App Module

firebase-android-social-7

แทรกบรรทัดนี้ในส่วนของ dependencies

และแทรกบรรทัดนี้ไว้บรรทัดสุดท้ายของ Mocule: app (Gradle)

ดังนี้

เมื่อเสร็จเรียบร้อยแล้วให้ทำการ Sync ตัว Gradle ครับ (ใช้เวลาสักพัก) ระหว่างนั้นให้ไปที่ Firebase console ครับไปที่เมนู Authentication ตั้งค่า Email/Password ให้เป็น Enabled ครับ

firebase-android-social-8

 

ไปที่ไฟล์ content_main.xml หน้าแรกของแอพพลิเคชันของเราครับให้ ออกแบบ Layout ตามรูปแบบด้วย XML ตัวอย่างดังนี้ครับ

เปิดไฟล์ MainActivity.java ขึ้นมาทำการประกาศส่วนของ firebase Header ของ Auth เข้าไป

ประกาศ Global Variables เพิ่มเพื่อทำการเขียนร่วมกับ UI XML ของเรา

เพิ่ม Code ในเมธอดของ OnCreate() ดังนี้เป็นคำสั่งพื้นฐานในการเก็บข้อมูลจาก textField ไป Store เก็บไว้บน Firebase

ส่วนของการรับค่าจาก TextField ส่งไปยัง FireBase คือ

เพิ่มเมธอดเข้าไปเมื่อส่งข้อมูลเสร็จให้ปิด แอพของเราไปเลยเนื่องจากเราไม่ได้สร้างหน้า ขอบคุณ (สามารถทำได้โดยเพิ่ม Intent เข้าไป

ภาพรวมของ MainActivity.java จะเป็นดังนี้

ทดสอบแอพพลิเคชันของเรากันหน่อย

พิมพ์ข้อมูลเข้าไปในแอพของเรา

เมื่อข้อมูลกรอกเสร็จจะขึ้น Success! ที่เราดักไว้ ให้ไปดูที่ Firebase ส่วนของ Authentation ของเราจะเจอข้อมูลที่เราเพิ่งกรอกเข้าไป

บทเรียนต่อไปจะเป็นการนำข้อมูลใน FireBase มาเข้าระบบอย่างง่ายให้กับแอพพลิเคชันของเรา

Comments

daydevthailand@gmail.com

อาจารย์คณะเทคโนโลยีสารสนเทศ ภาควิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม มหาวิทยาลัยธุรกิจบัณฑิตย์ และ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview