![](https://www.daydev.com/wp-content/uploads/2018/11/Screen-Shot-2018-11-21-at-11.36.00-AM.png)
บทเรียนเบื้องต้นสำหรับสร้าง Comic Book Shelf ด้วย Firebase และ Android Studio เพื่อสร้างแอปพลิเคชันอ่านหนังสือ PDF อย่างง่ายและจัดการด้วย Firebase
ศึกษาบทเรียนก่อนหน้านี้เกี่ยวกับการสร้าง Adapter, Model และ Picasso ไปจนถึงการเชื่อมต่อ Firebase ที่บทความ:
- เขียนแอพฯ ควบคุม Arduino ด้วย Android ผ่าน Firebase RealTime Database
- เขียนแอพ Android ดึง JSON มาเล่นกับ RecyclerView และ Picasso
คราวนี้ให้เราเตรียมไฟล์ PDF ที่เป็น Ebook อัพขึ้นผ่าน Storage ของ Firebase (ปล. ระบบนี้ไม่ได้ทำระบบ DRM:Data Right Management นะแค่ทำแอปพลิเคชันอ่าน Pdf ง่ายๆ ที่เป็นรูปแบบ Book Shelf หรือตู้หนังสือแค่นั้น)
เมื่ออัพโหลด PDF ไปบน Firebase Storage แล้วให้จัดการสร้าง Sample Real-Time Database ขึ้นมาให้ได้โครงสร้างตามภาพนี้:
หรือดู Preview แบบ JSON ให้เป็นแบบ Link นี้: https://enet5-7f9f6.firebaseio.com/bookshelf.json
บทเรียนนี้ให้ปรับ Rule แบบมักง่ายไปก่อนเพื่อให้ใครก็แก้ไข เขียนได้ให้เป็น
{ "rules": { ".read": true, ".write": true } }
ต่อมาให้ทำการสร้างแอพพลิเคชันขึ้นมาใหม่เป็น Empty Activity ทำการเชื่อมต่อ Firebase โดยไปที่ เมนู: Tools-> Firebase
หลังจากนั้นเลือก Realtime Database
ทำตามขั้นตอนที่ 1 และ ขั้นตอนที่ 2 โดยมันจะมีการบังคับให้เราเข้าระบบ Google บัญชีที่เราใช้ในการทำ Firebase อยู่อีกทั้งขั้นตอนนี้จะมีการ Sync ตัว Gradle ให้ด้วยเรียบร้อย:
เมื่อเสร็จแล้วซ่อนหน้าต่าง Assistance นี้ออกไป
ขั้นตอนต่อมาให้เราเตรียมพร้อมการสร้างโปรเจ็คของเราให้ประกาศตัวแปรต่อไปนี้ที่คลาส MainActivity.java
private static final String TAG = "FireComic"; private List<DataModel> response_data; private DataAdapter dataAdapter; private RecyclerView mRecyclerView; private FirebaseDatabase firebaseDatabase; private DatabaseReference databaseReference;
มันจะขึ้นตัก Error สีแดงที่ DataAdapter นำเมาส์ไปวางไว้แล้วกด Alt+Enter เพื่อเพิ่มคลาส DataAdapter.java ขึ้นมา เช่นกันมันจะขึ้นที่ DataModel ให้ทำขั้นตอนเดียวกันเพื่อสร้าง Class ใหม่ชื่อ DataModel.java ด้วย ดังนั้นโปรเจ็คนี้เราจะได้ ไฟล์ Class ทั้งหมด:
ไปที่ Layout ให้เราสร้าง RecycleView ขึ้นมาที่ไฟล์ activity_main.xml ดังนี้:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="top" android:orientation="vertical" tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintVertical_bias="1.0"> </android.support.v7.widget.RecyclerView> </LinearLayout>
เปิด Class ที่ชื่อ DataAdapter.java ขึ้นมาเขียนคำสั่งต่อไปนี้:
import android.support.annotation.NonNull; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.squareup.picasso.Picasso; import java.util.List; public class DataAdapter extends RecyclerView.Adapter<DataAdapter.DataViewHolder> { private List<DataModel> dataModelList; public DataAdapter(List<DataModel> result) { this.dataModelList = result; } @Override public DataAdapter.DataViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { return new DataViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.content_read,viewGroup,false)); } @Override public void onBindViewHolder(final DataViewHolder dataViewHolder, final int i) { DataModel dataModel = dataModelList.get(i); dataViewHolder.textTitle.setText(dataModel.title); Picasso.get().load(dataModel.photos) .error(R.mipmap.ic_launcher) .placeholder(R.mipmap.ic_launcher) .into(dataViewHolder.imageView); } @Override public int getItemCount() { return dataModelList.size(); } public class DataViewHolder extends RecyclerView.ViewHolder { TextView textTitle; ImageView imageView; public DataViewHolder(View itemView) { super(itemView); textTitle = itemView.findViewById(R.id.title); imageView = itemView.findViewById(R.id.thumbnail); } } }
โดยมันจะบังคับให้เราสร้าง Layout ใหม่ขึ้นมาชื่อว่า content_read.xml ให้เราสร้างขึ้นมาหลังจากนั้นให้แก้ไข XML ของ content_read.xml เป็นดังนี้:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="170dp" android:layout_height="300dp" android:layout_marginLeft="20dp" android:layout_marginTop="10dp" android:orientation="horizontal" android:padding="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/thumbnail" android:layout_width="match_parent" android:layout_height="240dp" android:scaleType="centerCrop" /> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:textAlignment="center" android:textColor="@color/cardview_dark_background" android:textSize="16sp" /> </LinearLayout> </LinearLayout>
ถ้าหากไม่เกิดข้อผิดพลาดใดๆ ให้ไปที่ DataModel.java แก้ไขไฟล์นี้เป็น:
import java.util.HashMap; import java.util.Map; public class DataModel { String title,desc,photos,key; public DataModel(){ } public DataModel(String title, String desc, String photos, String key) { this.title = title; this.desc = desc; this.photos = photos; this.key = key; } public Map<String, Object> toMap(){ HashMap<String, Object> result = new HashMap<>(); result.put("title",title); result.put("content",desc); result.put("photos",photos); result.put("key",key); return result; } }
เพื่อทำการ Map ตัว Key ที่เราใช้ใน Firebase ให้ตรงกับหน้าจอที่จะปรากฏขึ้นในระบบ เมื่อเสร็จขั้นตอนนี้แล้วให้เราไปที่ MainActivity.java เพิ่มคำสั่งต่อไปนี้ในOnCreate() เมธอด:
firebaseDatabase = FirebaseDatabase.getInstance(); databaseReference = firebaseDatabase.getReference("bookshelf/data"); response_data = new ArrayList<>(); mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView); int numberOfColumns = 2; mRecyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); dataAdapter = new DataAdapter(response_data); mRecyclerView.setAdapter(dataAdapter); bindingData();
พิจารณาว่า
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView); int numberOfColumns = 2; mRecyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
คือการแสดงผลของ RecyclerView ปกติของเราให้เป็น Vertical แนวดิ่งแต่แบ่ง คอลัมน์ของแถวเป็น 2 คอลัมน์นั่นเอง
เพิ่มเมธอด bindingData() ใหม่ใน MainActivity.java
private void bindingData() { databaseReference.addChildEventListener(new ChildEventListener() { @Override public void onChildAdded(DataSnapshot dataSnapshot, String s) { response_data.add(dataSnapshot.getValue(DataModel.class)); dataAdapter.notifyDataSetChanged(); } @Override public void onChildChanged(DataSnapshot dataSnapshot, String s) { } @Override public void onChildRemoved(DataSnapshot dataSnapshot) { } @Override public void onChildMoved(DataSnapshot dataSnapshot, String s) { } @Override public void onCancelled(DatabaseError databaseError) { } }); }
ทำฟังกืชันการนับจำนวน Item ของ Firebase เพิ่มเข้าไป ต่อท้ายก่อนปิดคลาส:
private int getIemIndex(DataModel dataModel){ int index = -1; for(int i =0; i < response_data.size(); i++){ if(response_data.get(i).key.equals(dataModel.key)){ index = i; break; } } return index; }
ทดสอบการทำงานโดย run ตัว Android Studio ขึ้นมาถ้าไม่มีข้อผิดพลาดจะเป็นดังนี้:
บทเรียนต่อไปเราจะทำหน้าอ่านไฟล์ PDF เมื่อกด ที่หน้าปกของ PDF แต่ละตัว โดยเราต้องแก้ไข PDF URL เข้าไปใน Firebase ด้วยเช่นกัน
บทเรียนตอนที่ 2: Android Studio กับการทำระบบ Bookshelf ร่วมกับ Firebase เบื้องต้น ตอนที่ 2
สำหรับคนที่ไม่อยากโหลด PDF แต่มีภาพ Image หลายๆ ภาพให้ไปที่บทเรียนที่ 3 เลยข้ามบทที่ 2 ไป
บทเรียนตอนที่ 3: Android Studio กับการทำระบบ Bookshelf ร่วมกับ Firebase เบื้องต้น ตอนที่ 3
3 Comments