Home / Developer  / Android Developer  / เขียนแอพ Android รับค่า Realtime Database จาก CMS ของ Firebase

เขียนแอพ Android รับค่า Realtime Database จาก CMS ของ Firebase

หลังจากที่เราพัฒนา Web App ด้วย Javascript ร่วมกับ Firebase Database มาสักพักแล้ว รอบนี้เราก็ต้องนำข้อมูลที่เราทำไปโผล่บนแอพฯ Android ของเรา

บทเรียนที่ควรศึกษาก่อนหน้านี้

หากเราศึกษามาหมดแล้วเราจะได้ผลลัพธ์ของเว็บแอพฯ ที่จะเป็น CMS ของเราบน Firebase Hosting ดังนั้นเราลองกรอกข้อมูลเข้าไปใหม่ จัดสรรค์โครงสร้างข้อมูลให้เป็นแอพฯ อะไรสักอย่างที่มีประโยชน์สักนิด

ขายรองเท้านี่แหละ

ดังนั้นโครงสร้างของ ฐานข้อมูล Firebase Database เราจะเป็นดังนี้:

บนหน้าเว็บไซต์เป็นแบบนี้

โครงสร้างของ Firebase Database

โครงสร้างของ Firebase Database

ส่วนนี่โครงสร้างแบบ JSON

ส่วนนี่โครงสร้างแบบ JSON โดยอ้าง node ที่ต้องการดูข้อมูล

จะเห็นว่าเราจะมีข้อมูล Key ของ แต่ละ Node และ thumbnail ที่อ้างไปยัง Storage ของ Firebase ที่เราสร้างแล้ว เราก็เพียงแค่พัฒนาแอพพลิเคชันของเราให้ทำการ Retieve ข้อมูลลงไปแสดงผลก็พอ

สร้าง Project ใหม่ของเราผ่าน Android Studio

เลือกเป็น Empty Activity หลังจากนั้นให้เราติดตั้ง Firebase ลงไปในแอพพลิเคชันของเรา ตามขั้นตอนบนเว็บ https://console.firebase.google.com

ขอข้ามการติดตั้ง goole-services.json ออกไปจากบทความนี้ก่อนเพราะสามารถไปอ่านบทความหลังๆ ได้ที่: http://www.daydev.com/developer/android-developer/firebase-android-studio.html

ไปที่ AndroidManiFest.xml เปิด Permission ของ Internet ให้เรียบร้อย:

เปิดไฟล์ gradle ตัว Project แก้ไขดังนี้

เปิดไฟล์ gradle ตัว Module

เพิ่มสิ่งที่เราจะพัฒนาในบทเรียนเข้าไปให้หมด แล้ว Sync gradle เสีย

ในบทเรียนนี้เราจะใช้ Firebase Database ในการดึงข้อมูลมาแสดงผ่าน Adapter โดยใช้ RecyclerView และ CardView มารับค่าข้อมูล และใช้ Picasso จัดการการเก็บแคชของข้อมูล

สร้าง Class ใหม่ขึ้นมาชื่อว่า DataAdapter.java และ DataModel.java

ในขั้นตอนนี้จะมีการถามหา DataModel เราจะต้องไปสร้าง Model สำหรับเรียกข้อมูลมาเก็บแปลงลง Adapter และมีการเรียกหา Layout ที่ชื่อว่า list_row

ให้ทำการสร้าง Layout ใหม่ขึ้นมาชื่อว่า list_row.xml

สำหรับ DataModel.java นั้นให้ทำการประกาศตัวแปรต่อไปนี้ใน Class

หลังจากนั้นให้ทำการ Create ตัว Constructor โดยการกด Ctrl+Enter หรือ Cmd + Enter เราจะได้ Class ของ DataModel.java ดังนี้

ทำการออกแบบหน้า activity_main.xml ดังนี้:

ไปที่ MainActivity.java ให้เราทำการประกาศตัวแปร Global ดังนี้:

ทำการ Implement ส่วนของ onCreate() ดังนี้:

สร้าง เมธอด ใหม่

กด Ctrl+Enter เพื่อ Override Methods



จะเห็นว่ามีการเรียกไปยัง refernce Database ส่วนของ Node ที่ชื่อว่า app/data ให้ตรงกับส่วนที่เราเก็บข้อมูลไว้ใน Web CMS เมื่อเสร็จขั้นตอนการ setAdapter ของ recyclersView แล้วเราจะต้องสร้าง Method ใหม่ชื่อว่า bindingData();

ใส่เมธอดสำหรับอ้างอิง Index สักหน่อยเผื่อจะนำไปใช้ในการทำ Intent ในอนาคต

ดังนั้นไฟล์ MainActivity.java จะเป็นดังนี้:

กลับไปที่ DataAdapter ให้เพิ่ม code ส่วนของ Picasso เข้าไปที่ //Todo Manage ImageView

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

หน้าจอแอพพลิเคชันของเรา

 

ข้อมูลเพิ่มแบบ Real Time

จะเห็นได้ว่าตอนนี้ เราได้ระบบหลังบ้าน Firebase ในการจัดการช้อมูลบนเว็บไซต์ CMS และนำข้อมูลที่จัดเก็บนั้นมาสร้างระบบ รายการแสดงผลผ่านแอพพลิเคชัน Android ซึ่งเราสามารถสร้างแอพพลิเคชันเข้าระบบ Authentication ของ Android นั้นก็บทความนี้ครับ http://www.daydev.com/developer/android-developer/android-authentication-firebase.html

ตัวอย่างนี้สามารถนำมาใช้เป็นตัวอย่างเพื่อการศึกษา และเป็นการบอกว่า Firebase นั้นเหมาะกับการทำ โครงงานของนักศึกษา หรือ SMEs มากๆ (ยกเว้นนักศึกษาปริญญาตรีวิทยาลัยครีเอทีฟดีไซน์ แอนด์ เอ็นเตอร์เทนเมนต์เทคโนโลยี ที่ผมสังกัดอยู่ ถ้าจะเอามาส่งต้องดีกว่าตัวอย่างนี้)

ดังนั้นใครที่สนใจ Firebase น่าจะได้ Idea ดีๆ ทำอะไรใหม่ๆ ได้จากบทความนี้ครับ

บทความหน้า การยิง Push Notification ผ่าน Firebase นี่แหละ!

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: