[TAVE 스터디 5주차] 메모 앱 만들기

Section 07

---

🗃️ Firebase

firebase란

Google에서 제공하는 백엔드 서비스로, 서버를 직접 구축하지 않아도 로그인, 데이터 저장, 알림, 파일 업로드 등의 기능을 손쉽게 사용할 수 있게 해줌.

기능	설명
Authentication	이메일, 구글, 카카오 등 다양한 로그인/회원가입 기능을 지원
Cloud Firestore	실시간으로 데이터 저장/불러오기 가능한 NoSQL 데이터베이스
Realtime Database	데이터가 실시간으로 동기화되는 JSON 기반 DB
Storage	이미지, 파일 등 대용량 데이터를 저장
Cloud Messaging (FCM)	푸시 알림 기능 제공
Hosting	웹 앱을 Firebase 서버에 바로 배포 가능

Firebase의 구조 (서버 vs 클라이언트)

클라이언트 (Client):

• 앱, 웹 등을 사용하는 사용자
• 사용자가 메모를 작성하면 Firebase를 통해 서버로 데이터를 전송함

서버 (Server):

• Firebase가 자동으로 관리하는 서버
• 개발자가 직접 서버를 만들 필요없이 데이터 저장, 인증 등을 동기화하는 기능을 제공

동기 vs 비동기

동기(Synchronous):

• 한 작업이 끝나야 다음 작업이 실행됨
• 순차적으로 처리되는 방식

비동기(Asynchronous):

• 여러 작업을 동시에 처리할 수 있는 방식
• 기다리지 않고 다음 작업을 바로 수행함

---

🗃️ Firebase Project 만들기

새 프로젝트 세팅 방법

1. Firebase 로그인
2. 새로운 프로젝트 만들기
3. 앱 등록 -> 안드로이드 -> 패키지 이름 넣기(e.g. com.exaple.myapp)
4. google.services.json 다운로드 받아서 app/ 폴더에 넣기
5. Gradle에 코드 붙여넣기

(참고) Gradle에서 두 파일의 차이점

project level	modeule level
전체 프로젝트 설정 (e.g. buildscript/plugins 섹션, 전역 클래스패스)	앱 전용 종속성 (e.g. 'implementation 'com.google.firebase:firebase-auth:xx.x.x')

5. 코드를 붙여넣기 하고 Sync Now 클릭해서 Gradle 동기화
6. Firebase 콘솔 -> Authentication -> 로그인 방법에서 사용할 제공업체(e.g. Email, Google 등)의 사용 설정을 On으로 해줌.

7. firebase 익명 로그인 가이드 라인을 따라서 코드를 안드로이드 스튜이오 프로젝트에 복붙

새로운 유저 등록 결과

(등록 전) Authentication 사용자가 아무도 없는 것을 확인

(로그인 버튼을 누른 후) "MainActivity"에 Uid 값이 찍힘.

(등록 후 파이어베이스) 새로운 익명 유저가 로그에서 본 것과 똑같은 uid로 로그인 된 것을 알 수 있음.

---

🗃️ 날짜 선택 Dialog 만들기

Dialog란?

사용자에게 메시지를 보여주거나, 입력을 받거나, 확인/취소 같은 선택을 요청할 때 사용하는 작은 팝업 창

즉, 현재 화면 위에 잠깐 뜨는 보조 창 → 새로운 액티비티를 띄우지 않고 간단한 상호작용을 구현할 때 사용함.

종류	설명
AlertDialog	가장 기본적인 대화상자. 제목, 메시지, 버튼(확인/취소 등)을 넣을 수 있음
ProgressDialog	로딩 중임을 사용자에게 보여줄 때 사용
DatePickerDialog	날짜 선택창 (달력 형태)
TimePickerDialog	시간 선택창
Custom Dialog	직접 만든 레이아웃(xml)을 사용해 나만의 디자인으로 구성

Dialog 특징

• 현재 액티비티 위에 잠시 뜨지만, 화면 전환은 아님.
• Dialog가 뜬 동안 다른 UI 조작이 제한될 수 있음.
• 사용자가 선택(확인/취소 등)을 하면 Dialog가 자동으로 닫힘.
• 비동기 이벤트(예: Firebase 응답, 네트워크 요청) 결과를 보여줄 때 자주 사용됨.

Dialog 생성 코드

val writeButton = findViewById<ImageView>(R.id.writeBtn)
writeButton.setOnClickListener {

    val mDialogView = LayoutInflater.from(this).inflate(R.layout.custom_dialog, null)
    val mBuilder = AlertDialog.Builder(this)
        .setView(mDialogView)
        .setTitle("운동 메모 다이얼로그")

    mBuilder.show()

}

날짜 선택 버튼 만들기

val DateSelectBtn = mAlertDialog.findViewById<Button>(R.id.dateSelectBtn)

DateSelectBtn?.setOnClickListener {

    val today = GregorianCalendar()
    val year: Int = today.get(Calendar.YEAR)
    val month: Int = today.get(Calendar.MONTH)
    val date: Int = today.get(Calendar.DATE)

    val dlg = DatePickerDialog(this, object: DatePickerDialog.OnDateSetListener{
        override fun onDateSet(
            view: DatePicker?,
            year: Int,
            month: Int,
            dayOfMonth: Int
        ) {
            DateSelectBtn.setText("${year}, ${month+1}, ${dayOfMonth}")
        }
    }, year, month, date)
    dlg.show()
}

month는 0부터 시작 (0=1월, 1=2월, ...)
따라서 ${month+1}처럼 표시해줘야 함!

---

🗃️ Realtime Database 저장하기

1. 데이터베이스 만들기
2. Firebase 안내서에 따라 코드 복사하기 (모듈 수준에 implement 추가, 뭔 코드 추가 )

val saveBtn = mAlertDialog.findViewById<Button>(R.id.saveBtn)
saveBtn?.setOnClickListener {

    val healMemo = mAlertDialog.findViewById<EditText>(R.id.healthMemo)?.text.toString()

    val database = Firebase.database
    // myMemo라는 최상위 경로 참조
    val myRef = database.getReference("myMemo")

    val model = DataModel(dateText, healMemo)

    myRef
        .push()
        .setValue(model)

    mAlertDialog.dismiss()
}

3. save 버튼을 누르면 myMemo라는 최상위 경로에 date와 내가 쓴 메모가 저장됨.

데이터 저장 관련 함수

• setValue() : 지정된 경로에 데이터를 저장, overwrite 방식
• push() : 랜덤한 고유 key를 생성해서 새로운 하위 노드로 저장
• updateChildren() : 데이터의 일부만 수정할 때 사용
• removeValue() : 특정 노드를 삭제

---

🗃️ Realtime Database 불러오기

listView와 Realtime Database

    val dataModelList = mutableListOf<DataModel>()  // 새로운 리스트 생성

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()      
        }

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

        val listView = findViewById<ListView>(R.id.mainLV)

        val adapter_list = ListViewAdapter(dataModelList)

        listView.adapter = adapter_list

        myRef.addValueEventListener(object: ValueEventListener{
            override fun onDataChange(snapshot: DataSnapshot) {
                // 이전에 모델 리스트에 들어있던 값들을 삭제 -> 안그러면 값이 계속 쌓여서 중복 출렫됨
                dataModelList.clear()

                // ??
                for(dataModel in snapshot.children){
                    Log.d("Data:", dataModel.toString())
                    // 데이터모델 리스트에 입력받은 dateModel의 값을 추가
                    dataModelList.add(dataModel.getValue(DataModel::class.java)!!)
                }
                // 리스트 안에 들어있던 모델들을 앱에 출력
                adapter_list.notifyDataSetChanged()
            }

            override fun onCancelled(error: DatabaseError) {
                // 보통 이곳에서는 오류 로그를 남기는 코드를 작성합니다.
                Log.w("WriteActivity", "데이터 로딩 실패: ", error.toException())
            }
        })       

DataSnapshot

• dataSnapshot: 데이터 베이스의 특정 위치에 있는 데이터를 담고 있는 객체 → 그 시점의 데이터 상태를 복사해 놓은 것
• snapshot 메서드 종류
  • snapshot.value : 해당 경로의 데이터 전체를 가져옴
  • snapshot.exits() : 데이터가 존재하는지 확인
  • snapshot.children: 하위 데이터들을 순회
  • snapshot.getValue : 객체 형태로 반환

한 사람의 정보들만 가져오기

// saveButton을 눌렀을 때
val myRef = database.getReference("myMemo").child(Firebase.auth.currentUser!!.uid)

// 이벤트클릭리스너에 child 추가하기
myRef.child(Firebase.auth.currentUser!!.uid).addValueEventListener(object: ValueEventListener{

날짜 순 정렬하는 법

val query = myRef.orderByChild("date")
...
for (data in snapshot.children) {...}

파이어베이스 연동된 상태

---

🗃️ 실행 결과 화면

👾깃허브: github