[Kotlin] Firebase 동작 방식 이해 (예제 앱 만들기) - Realtime Database

3. DB에 데이터 삽입 기능 구현

Realtime Database를 이용하기 위해 게시판 기능을 구현해 볼 것이다.

 

먼저, BoardList 화면과 BoardWrite 화면 생성!

List 화면에는 '글쓰기' 버튼을 만들어준다.

 

activity_board_list.xml 전체코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".BoardListActivity">

    <Button
        android:id="@+id/writeBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="글쓰기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

글쓰기 버튼을 누르면 BoardWriteActivity로 이동할 수 있도록 코드를 작성해준다.

Main 화면에서 로그인 버튼을 눌렀을 때 BoardListActivity로 이동하는 코드도 똑같은 방법으로 작성해주면 된다. (코드 생략)

 

BoardListActivity 전체코드

package com.example.mysampleapp

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class BoardListActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_board_list)

        // writeBtn 누르면 BoardWriteActivity로 이동
        val writeBtn = findViewById<Button>(R.id.writeBtn)
        writeBtn.setOnClickListener {

            val intent = Intent(this, BoardWriteActivity::class.java)
            startActivity(intent)

        }
    }
}

 

 

실행 화면

 

회원가입 했던 email, password 입력 후 로그인 버튼 클릭

→ BoardListActivity 페이지로 이동

→ 글쓰기 버튼 클릭

→ BoardWriteActivity 페이지로 이동

 

 

기본적인 구현을 끝냈으니 Firebase에 가서 Realtime Database를 이용해보자!

이번에는 Firebase 사이드바에 있는 Realtime Database를 들어가서 데이터베이스 만들기를 해주면 된다. (잠금 모드로 시작)

 

규칙은 true / false를 통해 수정 가능하다.

 

마지막으로 프로젝트랑 연결해줘야 하는데 Authentication에서처럼 사이트를 보고 따라하면 된다.

https://firebase.google.com/docs/database/android/start 사이트를 참고해서 dependency 추가 및 이용 방법 확인!!

 

BoardWriteActivity 전체코드

package com.example.mysampleapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class BoardWriteActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_board_write)

        val writeBtn:Button = findViewById(R.id.writeUploadBtn)
        writeBtn.setOnClickListener {

            val database = Firebase.database
            val myRef = database.getReference("message")

            myRef.setValue("Hello, World!")

        }
    }
}

 

위릐 코드를 작성한 후에 실행하면 '완료' 버튼을 눌렀을 때, 아래와 같이 DB에 "Hello, World!"가 들어갈 것이다!!

 

DB에 잘 들어가는 것을 확인했으니 이제 우리가 입력한 Text가 들어가도록 코드를 수정해주면 된다.

 

BoardWriteActivity 수정코드

	val writeBtn:Button = findViewById(R.id.writeUploadBtn)
        writeBtn.setOnClickListener {

            val writeText = findViewById<EditText>(R.id.writeTextArea)

            val database = Firebase.database
            val myRef = database.getReference("message")

            myRef.push().setValue(writeText.text.toString())

        }

 

 

다음과 같이 직접 작성한 내용이 DB에 들어갈 것이다 ㅎㅎ

String 값 앞에 있는 괴상한 문자들은 문서의 고유한 키 값이다.

 

DB에 Model 형태로 데이터를 넣는 것도 가능하다.

Model Kotlin 파일을 하나 생성해준 후 코드를 다음처럼 작성한다.

 

Model 전체코드

package com.example.mysampleapp

data class Model (
    val title : String = ""
)

 

그리고는 BoardWriteActivity 코드를 수정해준다.

 

BoardWriteActivity 수정코드

            myRef.push().setValue(
                Model(writeText.text.toString())
            )

 

DB에 데이터 집어넣기 끝~~~~~

---

4. DB에서 데이터 받아오기 기능 구현

DB에서 데이터를 받아와 ListView 형태로 BoardListActivity에 띄울 것이다.

이 포스트는 Firebase의 동작 방식을 이해하기 위함이므로 ListView 생성 과정은 패스하겠다!!

 

Firebase Realtime Database에서 데이터를 받아오기 위해선 https://firebase.google.com/docs/database/android/read-and-write 사이트의 '데이터 읽기' 부분을 참고 하면 된다.

 

깔끔하게 정리하기 위해 fun getData() 데이터를 받아오는 함수를 하나 만들어주었다.

 

BoardListActivity 전체코드

package com.example.mysampleapp

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.ListView
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class BoardListActivity : AppCompatActivity() {

    lateinit var LVAdapter : ListViewAdapter

    val list = mutableListOf<Model>()

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_board_list)

        // writeBtn 누르면 BoardWriteActivity로 이동
        val writeBtn = findViewById<Button>(R.id.writeBtn)
        writeBtn.setOnClickListener {

            val intent = Intent(this, BoardWriteActivity::class.java)
            startActivity(intent)

        }

        LVAdapter = ListViewAdapter(list)

        val lv = findViewById<ListView>(R.id.lv)
        lv.adapter = LVAdapter

        getData()

    }

    // DB에서 데이터 받아오는 함수 생성
    fun getData() {

        val database = Firebase.database
        val myRef = database.getReference("board")

        val postListener = object : ValueEventListener {
            override fun onDataChange(dataSnapshot: DataSnapshot) {
                for (dataModel in dataSnapshot.children) {
                    val item = dataModel.getValue(Model::class.java)
                    list.add(item!!)
                }

                // 데이터를 다 받아온 후 ListView 동기화
                LVAdapter.notifyDataSetChanged()
            }

            override fun onCancelled(databaseError: DatabaseError) {
                Log.w("BoardListActivity", "loadPost:onCancelled", databaseError.toException())
            }
        }
        myRef.addValueEventListener(postListener)

    }
}

 

 

나눠서 설명해보자면,,

 

1. 데이터를 집어넣었던 DB를 가져온다.

val database = Firebase.database
val myRef = database.getReference("board")

 

2. 사이트를 참고해 데이터 읽기 코드를 작성한다.

*dataModel을 Log로 찍어보면 → DB에 있는 데이터들의 key, value 값들이 전부 찍힌다.

 

3. dataModel에서 getValue를 통해 value(작성 내용) 값들만 받아와 리스트에 넣어준다.

4. Firebase는 비동기이므로 데이터를 받아온 후에 꼭 ListView 동기화!!✨

val postListener = object : ValueEventListener {
    override fun onDataChange(dataSnapshot: DataSnapshot) {
        for (dataModel in dataSnapshot.children) {
            val item = dataModel.getValue(Model::class.java)
            list.add(item!!)
        }

        // 데이터를 다 받아온 후 ListView 동기화
        LVAdapter.notifyDataSetChanged()
    }

    override fun onCancelled(databaseError: DatabaseError) {
        Log.w("BoardListActivity", "loadPost:onCancelled", databaseError.toException())
    }
}

 

 

ListView를 잘 생성해주었다면 다음과 같이 내가 쓴 글이 BoardListActivity 화면에 List로 나올 것이다.

 

실행 화면