예제 앱 만들기(2) - 데이터바인딩, 로그인, 로그아웃

저번에 만든 회원가입 예제는 이미 이메일과 패스워드를 정해놓았기 때문에 그 정해놓은 이메일과 패스워드로만 회원가입이 되었었다.

이번에는 사용자가 입력한 이메일과 비밀번호로 회원가입이 되도록 해볼것이다

 

사용자가 입력한 이메일과 비밀번호를 받아오는 방법이 2가지가 있는데 두방법 다 해볼것이다

 

1) 첫번째 방법 -> findViewById 사용

package com.example.mysampleapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.ktx.Firebase


class MainActivity : AppCompatActivity() {

    private lateinit var auth : FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {

        auth = Firebase.auth

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


        // 회원가입하기 버튼 눌렀을때
        val joinBtnClicked = findViewById<Button>(R.id.joinBtn)
        joinBtnClicked.setOnClickListener {

            //첫번째 방법
            val email = findViewById<EditText>(R.id.emailArea)
            val pwd = findViewById<EditText>(R.id.pwdArea)


            auth.createUserWithEmailAndPassword(email.text.toString(), pwd.text.toString())
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Toast.makeText(this, "ok", Toast.LENGTH_SHORT).show()
                    } else {
                        Toast.makeText(this, "no", Toast.LENGTH_SHORT).show()
                       
                    }
                }
        }
    }
}

MainActivity.kt

 

 

2) 두번째 방법 -> binding 사용

 

두번째 방법은 binding을 사용하는 것이기때문에 build.gradle(app)으로 가서 데이터바인딩을 할수있도록 아래 코드를 추가해준다 

buildFeatures{
    dataBinding = true
}

build.gradle(app)

 

 

그리고 activity_main.xml로 돌아가서 전체코드를 layout으로 감싸준다

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <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"
        tools:context=".MainActivity"
        android:orientation="vertical">

        <EditText
            android:id="@+id/emailArea"
            android:hint="email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <EditText
            android:id="@+id/pwdArea"
            android:hint="password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/joinBtn"
            android:text="회원가입"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

</layout>

activity_main.xml

 

 

그런다음 다시 MainActivity로 돌아가서 binding을 사용해서 아래와같이 코드를 짜준다

package com.example.mysampleapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.databinding.DataBindingUtil
import com.example.mysampleapp.databinding.ActivityMainBinding
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.ktx.Firebase


class MainActivity : AppCompatActivity() {

    private lateinit var auth : FirebaseAuth

    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {

        auth = Firebase.auth

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main)


        // 회원가입하기 버튼 눌렀을때
        val joinBtnClicked = findViewById<Button>(R.id.joinBtn)
        joinBtnClicked.setOnClickListener {

//            //첫번째 방법
//            val email = findViewById<EditText>(R.id.emailArea)
//            val pwd = findViewById<EditText>(R.id.pwdArea)

             //두번째 방법
            val email = binding.emailArea
            val pwd = binding.pwdArea


            auth.createUserWithEmailAndPassword(email.text.toString(), pwd.text.toString())
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Toast.makeText(this, "ok", Toast.LENGTH_SHORT).show()
                    } else {
                        Toast.makeText(this, "no", Toast.LENGTH_SHORT).show()
                       
                    }
                }
        }
    }
}

MainActivity.kt

 

binding을 사용하면 findViewById를 사용하지않고 바로 객체에 접근을 할수있다는 장점이 있다

 

지금까지 한 회원가입의 기능이 로그인의 기능까지 포함하고있다. 회원가입을 하면서 동시에 로그인을 시켜버려서 UID값까지 받아올수있다. 

 

 

이제 로그아웃과 로그인기능을 구현해줄것이다

main_activity.xml에 로그아웃과 로그인버튼을 추가해준다

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <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"
        tools:context=".MainActivity"
        android:orientation="vertical">

        <EditText
            android:id="@+id/emailArea"
            android:hint="email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <EditText
            android:id="@+id/pwdArea"
            android:hint="password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/joinBtn"
            android:text="회원가입"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/logoutBtn"
            android:text="Logout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <Button
            android:id="@+id/loginBtn"
            android:text="Login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>

</layout>

main_activity.xml

 

 

main_activity.xml

 

 

 

 

MainActivity로 가서 로그아웃과 로그인에 해당하는 코드를 짜준다

package com.example.mysampleapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.databinding.DataBindingUtil
import com.example.mysampleapp.databinding.ActivityMainBinding
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.ktx.Firebase


class MainActivity : AppCompatActivity() {

    private lateinit var auth : FirebaseAuth

    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {

        auth = Firebase.auth

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main)


        // 회원가입하기 버튼 눌렀을때
        val joinBtnClicked = findViewById<Button>(R.id.joinBtn)
        joinBtnClicked.setOnClickListener {

//            //첫번째 방법
//            val email = findViewById<EditText>(R.id.emailArea)
//            val pwd = findViewById<EditText>(R.id.pwdArea)

             //두번째 방법
            val email = binding.emailArea
            val pwd = binding.pwdArea


            auth.createUserWithEmailAndPassword(email.text.toString(), pwd.text.toString())
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Toast.makeText(this, "ok", Toast.LENGTH_SHORT).show()
                    } else {
                        Toast.makeText(this, "no", Toast.LENGTH_SHORT).show()
                       
                    }
                }
        }

        // logoutBtn버튼 눌렀을때
        binding.logoutBtn.setOnClickListener {
            //로그아웃
            auth.signOut()
            Toast.makeText(this, auth.currentUser?.uid.toString(), Toast.LENGTH_SHORT).show()
        }

        // loginBtn 버튼 눌렀을때
        binding.loginBtn.setOnClickListener {

            val email = binding.emailArea
            val pwd = binding.pwdArea

            // 로그인
            auth.signInWithEmailAndPassword(email.text.toString(), pwd.text.toString())
                .addOnCompleteListener(this) { task ->
                    if (task.isSuccessful) {
                        Toast.makeText(this, "ok", Toast.LENGTH_SHORT).show()
                        Toast.makeText(this, auth.currentUser?.uid.toString(), Toast.LENGTH_SHORT).show()

                    } else {
                        Toast.makeText(this, "no", Toast.LENGTH_SHORT).show()

                    }
                }
        }


    }
}

MainActivity.kt

 

토스트 메시지로 UID를 넣어준것은 UID값을 받아올수있다는것을 알려주기 위해서 넣어본것이다

 

이렇게하면 회원가입,로그인,로그아웃 기능이 구현되서 파이어베이스에도 등록이 되는것을 확인할수있다

지금은 흐름이 어떻게되는지만 파악하기 위한것이기때문에 간단하게 만들어봤다