[Android] ใช้ Firebase Realtime Database กับ RecyclerView

จากตอนที่แล้วที่ได้ฝึกทำ RecyclerView แบบพื้นฐานไป ทีนี้เราจะลองให้ใช้ดึงข้อมูลจริงๆจากฐานข้อมูลดูบ้าง ซึ่งในที่นี้ผมใช้ Firebase เพราะง่ายและรวดเร็วครับ (ตามอ่านตอนเก่าได้ที่นี่)

[Android] ทำ List ข้อมูลจาก RecyclerView + SnapHelper แบบง่ายๆ

อันดับแรกมาเริ่มติดตั้งตัว Firebase กัน ถ้าหากใครใช้ Android Studio สามารถทำได้ง่ายๆ แค่ไปที่ Tools > Firebase

Tool > Firebase

แล้วเลือกที่ Realtime Database

ทำตาม 2 ขั้นตอนนี้ก็จะเป็นอันใช้ได้แล้ว

ทีนี้ก่อนที่จะไปดึงข้อมูลออกมาแสดง เราต้องมาสร้างหน้าที่จะใส่ข้อมูลลงไปในฐานข้อมูลของเราก่อน

ขั้นแรกกำหนดโครงการของ object ที่เราจะเก็บใน data class (ลองแบบสั้นๆง่ายๆก่อน)

Contact.kt

ส่วนหน้า UI ของการเพิ่มข้อมูลผมทำออกมาให้พอใช้ได้ และตั้ง ID ไว้สำหรับใช้เขียน function ให้ประมาณนี้

เราจะเริ่มทำในส่วนการเก็บของมูลเข้า ซึ่งหลักการก็ไม่มีอะไรมากครับ เพียงแค่รับค่าจาก name_contact และ contact_number แล้วทำการ Save เมื่อกดที่ปุ่ม btn_save_contact

เริ่มจากการ set event click ให้กับปุ่ม save

MainActivity.kt

ประกาศตัวแปรรับค่าเข้ามาแล้วสร้างเป็น object Contact ซึ่ง ID จะเป็นการ random มา ส่วน name กับ tel มาจาก ID ที่สร้างไว้ที่ form

หลังจากนั้นเรียกใช้ service FirebaseDatabase แล้วสร้าง reference ตาม path ที่เราต้องการ ในที่นี้คือ “contacts” แล้วใช้คำสั่ง setValue เพื่อทำการ save object ลงภายใต้ id อีกที และทำการเคลีย field พร้อมกับมี Popup หลัง save เรียบร้อย

เมื่อลองรันแล้วใส่ข้อมูลเข้าไป จะได้หน้าตาข้อมูลจะออกมาประมาณนี้

Firebase Realtime database ตัวอย่างข้อมูล Contact

หลังจากจบตรงส่วนใส่ข้อมูลเข้าไป เราจะมาทำส่วนที่ใช้ list ข้อมูลออกมา แต่ก่อนอื่นต้องมีปุ่มที่จะเปลี่ยนหน้าไปยังหน้า list ข้อมูลออกมาก่อน แค่เพียงเพิ่มให้ปุ่มสามารถคลิกแล้วส่ง Intent จาก Activity ปัจจุบันไปยัง Activity ที่ต้องการ

MainActivity.kt

หลังจากนั้นก็ไปสร้าง RecyclerView ,ViewHolder, Adapter ให้เรียบร้อย (ตรงนี้ขอข้ามไปนะครับ สามารถดูในตอนเก่าได้) ทีนี้มาถึงจุดที่จะดึงข้อมูลออกมาใส่ ผมทำการสร้าง function getListContact ไว้ เพื่อที่จะเรียกใช้ service ของ Firebase

ListContactActivity.kt

จากรูปข้างบนผมให้ดึงมาจาก node contacts แล้ว ให้เรียงตาม name ส่วนตัว listener เราจะต้องมี override มันด้วย ซึ่งทำได้ตามนี้ครับ

ภายใน function onDataChange จะเป็นส่วนที่ดึงข้อมูลออกมา และเมื่อมีการเปลี่ยนแปลงของข้อมูลมันจะ trigger ทำงานเองด้วย ที่เหลือก็แค่นำข้อมูล จาก snapshot มาใส่ array ไว้สักตัวแล้วแสดงมันออกไปด้วยวิธีของ RecyclerView ที่ใช้ adapter ก็เป็นอันเสร็จครับ code เต็มๆจะออกมาหน้าตาประมาณนี้

เมื่อลองเรียกใช้ function getListContact ภายใน onCreate แล้วลองรันดูผลลัพธ์

เมื่อเพิ่ม contact เข้าไปแล้วกดปุ่มเปลี่ยนหน้า จะพบกับ list ที่ออกมาเรียงตามชื่อสวยงามแบบนี้ครับ

สามารถศึกษาเกี่ยวกับ Firebase เพิ่มเติมได้ที่

Installation & Setup on Android | Firebase Realtime Database