Home / Developer  / Android Kotlin  / เขียนแอพฯ Android ด้วย Kotlin ทำ E Book ร่วมกับ Firebase

เขียนแอพฯ Android ด้วย Kotlin ทำ E Book ร่วมกับ Firebase

บทเรียนสำหรับการพัฒนาแอพพลิเคชันแพลตฟอร์ม Android ด้วยภาษา Kotlin ทำ E Book โดยใช้ RecyclerView ร่วมกับ Firebase

ตัวอย่างนี้จะเหมือนตัวอย่างของ Java ส่วนของบทความ:

ดังนั้นเราจะเห็นว่าเราจะต้องสร้างตัวอย่างของ Realtime Database บน Firebase มาก่อนโดยมีโครงสร้างเหมือนตัวอย่างของบทความก่อนหน้าก็จะขอละไว้ไม่อธิบายนะครับ:

หน้าแรกเราจะมี Key หลักที่ประกอบด้วย title คือชื่อการ์ตูน, desc คำโปรย, photos คือหน้าปกเป็นลิงค์ url ภาพ และ สุดท้ายคือ pages ที่จะเป็นการบอกว่าในการ์ตูนตอนนั้นมีหน้าย่อยที่เก็บ หน้าต่างๆ กี่หน้า:

โครงสร้าง Firebase หน้าแรกจะเป็น

URL แบบ JSON: https://enet5-7f9f6.firebaseio.com/bookshelf.json

ส่วนหน้าที่มี pages จะมี photo เป็น Path ของรูปภาพ โดยแบ่งตาม Node ที่เป็น Unique ID แต่ละหน้าตามตัวอย่าง:

URL แบบ JSON ไว้ดูเล่น https://enet5-7f9f6.firebaseio.com/bookshelf/data/key00004.json
ตรวจสอบการเปิด Permission ของ Database ให้ดี ไปที่ Firebase ตั้งค่า Rule ดังนี้:

ต่อมาให้ทำการสร้างแอพพลิเคชันขึ้นมาใหม่เป็น Empty Activity ทำการเชื่อมต่อ Firebase โดยไปที่ เมนู: Tools-> Firebase

เปิด res->values->colours.xml ขึ้นมาทำชุดสีใหม่เล็กน้อย (ข้ามได้ถ้าไม่สำคัญ)

ทำการดาวน์โหลด RecyclerView มาใช้งานหลังจากนั้นให้นำ Widget ไปวาง ทำการเชื่อม ConstraintLayout ทุกมุม ตั้งชื่อ ID ของ RecyclerView ว่า recyclerView

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

ทำการไปที่ MainActivity.kt ประกาศตัวแปรที่ Global Variable ใต้ Class ด้วยคำสั่ง:

ไปที่ onCreate() ทำการ ประกาศตัวแปรรับ findViewById ที่ acitivy_main.xml

ไปที่ เมนู Tools -> Firebase เพื่อเปิดใช้งาน Firebase Assistance 

เปิดเลือก Realtime Database กดที่ Save and retrieve data

เลือก Choose an Existing Firebase or Google Project ของเราที่เคยสร้างไว้

ทำตามขั้นตอนที่ 1 และ ขั้นตอนที่ 2 โดยมันจะมีการบังคับให้เราเข้าระบบ Google บัญชีที่เราใช้ในการทำ Firebase อยู่อีกทั้งขั้นตอนนี้จะมีการ Sync ตัว Gradle ให้ด้วยเรียบร้อย:

เมื่อเสร็จแล้วซ่อนหน้าต่าง Assistance นี้ออกไป แก้ไข Module App ของ Gradle ใหม่เล็กน้อย:

แก้ไขส่วนของ Project Gradle เล็กน้อย แก้ไข Class Path dependencie ดังนี้:

แก้ google-services ที่เป็น 4.1.0 ให้อยู่ใน เวอร์ชันที่เสถียรคือ 4.0.0

แก้ไขเป็น

คลิกขวาที่ Package ของเราเลือก New -> Kotlin File/Class

ตั้งประเภทเป็น Class ตั้งชื่อว่า DataModel, DataAdapter ตรวจสอบตำแหน่ง Class


ไปที่ DataModel.kt ประกาศตัวแปรใน Class ของ DataModel ดังนี้ (สังเกตุมันคือ Key ของ Firebase ของเรา)

เราจะทำ Contructor Class ของตัวแปรทั้งหมดใน Class DataModel จะเป็นดังนี้:

มีการเรียกใช้ Map และ HashMap ในการทำ Dictionary ระหว่าง Key, Value จาก Firebase มาเก็บใน Model ของเรา และสร้าง None Argument Constructor ที่

Constructor คือ สิ่งที่มีไว้สำหรับกำหนดค่าเริ่มต้นให้กับตัวแปร Class ของ object Constructor จะทำงานอัตโนมัติเมื่อมีการ new object ขึ้นมา

ต่อมาเราจะสร้าง res->layout ขึ้นมาใหม่ชื่อว่า model.xml

ออกแบบ model.xml ด้วย text mode ดังนี้:

ปที่ DataAdapter เราจะประกาศฟังก์ชัน ในรอบนี้จะทำงานเรียก DataModel มาปรากฏ และใช้งาน ViewHolder มาจัดการเช่นเดิม และรอบนี้เราจะเรียก List ของ Array ทั้งก้อนมาใส่ โดยใช้ Pattern จาก Class DataModel

ให้ทำการ alt + enter ที่ class ก่อนเพื่อ Implement Memebers ของ Class นี้ให้มีเมธอดหลักของการจัดการ DataAdapter:

เราจะได้ DataAdapter ดังนี้ โดยมีการเรียก ViewHolder เป็น inner Class (inner Function) ส่วนของ ViewHolder นั้นมีการประกาศ widget ของ ImageView และ TextView แล้วผ่านตัวแปร thumbnail, textTitle:

ในเมธอด getItemCount() ให้ใส่ return dataModelList.size เพื่อรับจำนวน Arrays

ไปที่ เมธอด onCreateViewHolder() ให้ลบข้อมูล แล้วใส่ Code ต่อไปนี้ เพื่อทำการสร้าง ViewHolder รายการแต่ละแถวผ่านการแสดงผลด้วย ไฟล์ layout ชื่อ model.xml

ในเมธอด onBindViewHolder() ให้เราสร้างการ เรียกใช้ DataModel ไปยัดข้อมูลง ViewHolder ทีละแถว ส่วนของรูปภาพเราจัดการ Cache ด้วย Picasso (3rd Party การจัดการ แคช ของรูปภาพที่มาจาก Web Service เพื่อลดการโหลดกระตุกของแอพฯ สำหรับการจัดการแคชบนรูปภาพ ImageView Cache มีการดาวน์โหลดรูปภาพภายหลัง Activity เริ่มทำงานโดยเก็บ cache ให้ทันที สามารถใช้งานได้ง่ายทั้งแบบ jar ไว้ใน Project หรือ Build ผ่าน Gradle ตรงๆ ข้อมูลเพิ่มเติม:http://square.github.io/picasso/ )

กลับไปที่ MainActivity.kt เพิ่ม Global var ดังนี้:

ทำการสร้าง LayoutGridManager เป็น 2 ประกาศตัวแปร response_data เป็น mutableList() เป็น ListArray รูปแบบหนึ่ง และองค์ประกอบอื่นๆ ใน onCreate()

ทำการ Create method ใหม่ โดยการกด Alt + Enter ที่ bindingData()

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

ทดสอบการทำงานโดย run ตัว Android Studio ขึ้นมาถ้าไม่มีข้อผิดพลาดจะเป็นดังนี้:

ต่อมาเราจะทำหน้า เนื้อหาข้างใน ไปคลิกขวาที่ apps ให้ทำการเพิ่ม Empty Activity ใหม่ขึ้นมาว่า InformationActivity โดยเราจะแก้ไข activity_information.xml เป็นดังนี้:

ทำการประกาศตัวแปรต่อไปนี้ ใน InformationActivity.kt

ระบบจะทำการบังคับให้เราสร้าง Class ใหม่ชื่อ ComicDataAdapter ขึ้นมา(กด Alt+Enter) ทำตาม Step ภาพด้านล่าง:

Class ชื่อ ComicDataAdapter นั้นให้แก้ไขไฟล์ดังนี้:

มีการทำงานคล้ายกับ DataAdapter แค่ส่วนของ ViewHolder นั้นเราจะแยกใช้อีกตัวคนละชื่อ ดังนั้นใน ComicDataAdapter จะเรียก inner Class ส่วนนี้ว่า DataViewHolder

สร้าง Layout ใหม่ชื่อ pages.xml เป็นหน้าอ่านหนังสือ:

เปิดไฟล์ DataAdapter.kt ให้เพิ่ม Global Var เข้าไปคือ:

และทำการแก้ไขส่วนของ onBindViewHolder() ใน DataAdapter.kt ดังนี้:

เป็นการดึง DataSnapshot ของ Firebase ทั้งหมดมาวน Foreach เพื่อเก็บค่า Key ของข้อมูลเราสำหรับนำไปอ้างเพื่อส่ง Intent โดยตัวอย่างของผมคือการเก็บลง ArrayList ชื่อ mylist

เพิ่มคำสั่ง setOnClickListener เข้าไปให้แตะที่ ViewHolder.itemView.thumbnail แล้วส่ง Intent ค่า Key ไปหน้า InformationActivity:

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

กลับไปยัง InformationActivity.kt ให้เพิ่มคำสั่งต่อไปนี้ใน onCreate()

ทำการสร้าง Method ใหม่ของ comicBindingData()

แก้ไขฟังก์ชัน comicBindingData() ดังนี้: (เหมือน bindingData() ใน MainActivity)

ทดสอบแอพพลิเคชันของเรา โดยการแตะเปลี่ยนหน้า:

กลายเป็นว่า Kotlin Android นั้นสามารถทำงานร่วมกับ Firebase ได้สบายๆ แค่นี้เราก็ได้แอพพลิเคชัน Ebook ที่มีระบบหลังบ้านเป็น Firebase ได้ง่ายแล้วครับ

ไม่ต้องถามหา Source Code นะครับ พยายามทำตาม เพื่อความเข้าใจดีกว่า 🙂

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.