[Mindev 개발공부]Android 20분만에 채팅App만들기 -Firebase(2)

이번글은 회원가입에 대해서 알아보겠습니다.

먼저 간단한 로그인 화면 XML 부터 만들어보겠습니다.

<Main>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.project.firebasesplash.LoginActivity">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp">

        <EditText
            android:id="@+id/edittext_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="아이디" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp">

        <EditText

            android:id="@+id/edittext_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="패스워드" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginActivity_button_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="@color/background_blue"
        android:text="로그인"
        android:textColor="#fff" />

    <Button
        android:id="@+id/loginActivity_button_signup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="@color/basic_Black"
        android:text="회원가입"
        android:textColor="#fff" />
    
</LinearLayout>

이후 로그인하는 Activity에서 회원가입 Activity 로 이동해보겠습니다.

먼저 MainActivity에서 

((Button)findViewById(R.id.loginActivity_button_signup)).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        startActivity(new Intent(LoginActivity.this, SignupActivity.class));
    }
});

회원가입으로 이동해보겠습니다.

이제 회원가입에대한 XML을 만들어 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.project.firebasesplash.SignupActivity">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/signupActivity_edittext_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="이메일" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/signupActivity_edittext_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="이름" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/signupActivity_edittext_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="패스워드" />

    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/signupActivity_button_signup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/background_blue"
        android:elevation="5dp"
        android:text="회원가입"
        android:textColor="@color/basci_White" />

</LinearLayout>

이런식으로 회원가입에 대한 XML을 작성하시게 되면  이제 본격적인 회원가입에대한 코드를 작성해보겠습니다.

private EditText email;
private EditText name;
private EditText password;
private Button signu

먼저 각각 해당 변수를 선언후 

id를 선언해보겠습니다.

email = (EditText) findViewById(R.id.signupActivity_edittext_email);
name = (EditText) findViewById(R.id.signupActivity_edittext_name);
password = (EditText) findViewById(R.id.signupActivity_edittext_password);
signup = (Button) findViewById(R.id.signupActivity_button_signup);

여기서 FireabseAuth 라는걸 사용하게될텐데 첫번째 포스팅 글에 세팅한걸 사용하는거이며 입력한 정보를 firebase에 등록해주는 역활을 하는코드입니다.

createUserWith(EmailAndPassword(email,password) 를받게되며 

addOnCompleteListener(Context,new OnCompleteListener) -> 성공 유무를 할려주는 리스너가 되겠습니다.

FirebaseAuth.getInstance()
        .createUserWithEmailAndPassword(email.getText().toString(), password.getText().toString())
        .addOnCompleteListener(SignupActivity.this, new OnCompleteListener<AuthResult>() {
            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                final String uid = task.getResult().getUser().getUid();
        
            }
        });

여기서 이제 User정보에대한 Model class 를 간단하게 만들어보겠습니다 .

UserModel.class 를 만들어줍니다.

안에내용은 각유저마다 필요한 정보를 정의해주는 모델 클래스입니다.

이후 

FirebaseAuth.getInstance()
        .createUserWithEmailAndPassword(email.getText().toString(), password.getText().toString())
        .addOnCompleteListener(SignupActivity.this, new OnCompleteListener<AuthResult>() {
            @Override
            public void onComplete(@NonNull Task<AuthResult> task) {
                final String uid = task.getResult().getUser().getUid();
                progressDialog.dismiss();
                Toast.makeText(getApplicationContext(), "회원가입을 성공하셨습니다.", Toast.LENGTH_SHORT).show();
                finish();
            }
        });

를 작성해줍니다.

이제 그러면 회원가입에대한 코드는 끝나게되며 빌드를 해보겠습니다.

유저정보를 입력후 회원가입버튼을 눌르게되면  

회원가입 성공 메세지가 나오면 정상적으로 회원가입이 된걸 확인하실수있으며

확실하게 내정보가 firebase Database에 들어간걸 확인하고싶으면 

https://console.firebase.google.com/

에 접속후 내프로젝트를 들어가게 되면

클릭을하게되면 

정보가 정상적으로 들어간걸 확인하실수있습니다.

다음 글은 이제 로그인과정에 대해서 알아보겠습니다.

아래는 저의 github 주소입니다.

 https://github.com/mkw8263