Home / Developer  / Android Developer  / Android Studio กับการทำระบบ Bookshelf ร่วมกับ Firebase เบื้องต้น ตอนที่ 3

Android Studio กับการทำระบบ Bookshelf ร่วมกับ Firebase เบื้องต้น ตอนที่ 3

บทเรียนภาคเสริมสำหรับผู้ที่ต้องการพัฒนาแอปพลิเคชันอ่านการ์ตูนออนไลน์ด้วย Android และ Firebase แต่เปลี่ยนจาก PDF เป็น Image List แทน

ศึกษาบทความก่อนหน้า: Android Studio กับการทำระบบ Bookshelf ร่วมกับ Firebase เบื้องต้น ตอนที่ 1

เราจะได้หน้าจอการทำงานของแอปพลิเคชันเราดังนี้:

ซึ่งในบทความตอนที่ 2 (Link: Android Studio กับการทำระบบ Bookshelf ร่วมกับ Firebase เบื้องต้น ตอนที่ 2) เราจะใช้ Firebase จัดการ Storage ที่เก็บ Path Location ของไฟล์ PDF มาแสดงผลด้วย Google Docs API ผ่าน WebView แต่ในบทความนี้ถือว่าเป็นภาคแยกแทน ซึ่งจะเปลี่ยนโครงสร้าง Firebase ใหม่ให้เป็น Image List หรือ ภาพ Jpeg หรือ Png ทีละภาพเก็บบน Firebase

ดังนั้น:

ลืมบทความตอน 2 เสีย ถ้าใครต้องการทำ comic แบบภาพหลายๆ ภาพเป็นต้น

เริ่มต้นให้เราเพิ่มรูปภาพ Comic แต่ละหน้าเข้าไปยัง Firebase ให้เป็นโครงสร้างดังนี้:

ใส่ใน Key00002 ในตัวอย่าง สัก 4 หน้า โครงสร้าง JSON จะเป็นแบบนี้: https://enet5-7f9f6.firebaseio.com/bookshelf/data/key00002.json

ไปที่ Android Studio ให้ทำการเพิ่ม Empty Activity ใหม่ขึ้นมาว่า ComicActivity.java

ให้ออกแบบหน้าจอ Layout ของ activity_comic.xml ดังนี้:

ต่อมาให้เราไปที่ DataModel.java ให้เขียนแก้ไข Class จากบทเรียนตอนที่ 1 ใหม่ให้เป็นแบบนี้:

เพิ่ม photo เข้าไป (อย่าสัปสนกับ photos) ตัว photo นี้เอาไว้เรียก Key ของ ภาพการ์ตูนแต่ละหน้า ส่วน photos คือภาพเปิดของหน้าปกภาพเดียว (ลองเทียบกับ โครงสร้าง firebase ข้างบน, ขออภัยที่ตั้งตัวแปรให้งงสำหรับมือใหม่ไก่อ่อน)

ไปที่ ComicActivity.java ให้ทำการเพิ่มตัวแปรต่อไปนี้เป็น Global

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

ให้ทำการสร้าง Class ชื่อ ComicDataAdapter.java เสีย หลังจากนั้นให้แก้ไขไฟล์นี้โดยอ้างอิงบทเรียนที่ 1 ใหม่อีกที:

ระบบจะทำการบังคับให้เราสร้าง Layout ใหม่ขึ้นมาชื่อว่า pages.xml

แก้ไข Layout ของ pages.xml ดังนี้:

เมื่อเสร็จเรียบร้อยแล้วให้เปิดไฟล์ DataAdapter.java ขึ้นมา แก้ไขส่วนของ onBindViewHolder() ให้เป็นดังนี้:

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

หลังจากนั้นจึงใช้ Position ที่เป็นตัวแปร i ในการอ้างอิงส่งตำแหน่งของ ArrayList ที่เลือกส่งผ่าน Intent ไป

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

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

เพิ่มคำสั่งในเมธอดใหม่ comicBindingData()

ดังนั้นคลาสของ ComicActivity.java จะเป็นดังนี้:

ทดสอบแอปพลิเคชันของเราให้คลิกที่หน้าปก แล้วลองเลื่อนอ่านดู สามารถเปลี่ยนเป็น Slide แนวนอนได้นะแค่เปลี่ยน

เลื่อนอ่านดูจะเห็น View ต่อเนื่องกัน อ่านเพลินๆ

เสร็จแล้วครับ การสร้างแอปพลิเคชัน Android ด้วย Firebase ทำแอปพลิเคชันอ่านการ์ตูนง่ายๆ ประยุกต์ใช้ทำ Ebook ทั้งแบบ PDF และ แบบ Image List

ปล. ใครที่ขอ Source Code ขอบอกว่า ทำตามครับ ค่อยๆ อ่าน ถ้าทำตามยังทำไม่ได้ก็ไปทำอย่างอื่นดีกว่าครับ : )

Comments

daydevthailand@gmail.com

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

Review overview
%d bloggers like this: