[안드로이드] 파이어베이스로 찜하기 만들기

https://github.com/lnjky/fashion_people

GitHub - lnjky/fashion_people: 패션 추천 어플

코드 전체를 보려면 위에 링크를 통해 확인할 수 있습니다.

---

이전의 피드 만들기에 이어서 작성한 글입니다.

https://loasd.tistory.com/79

[안드로이드] 파이어베이스로 피드만들기 - 1

https://loasd.tistory.com/80

[안드로이드] 파이어베이스로 피드 만들기 - 2

---

피드를 만들었으니 여기서 찜하기 기능을 추가해보려고 한다.

우선 리사이클러뷰의 item에 OnClickListener를 추가해준다.

이렇게 아이템을 만들었었는데 별을 누를시 화면이 전환되게 만들어준다.

            item_upload_star.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Intent intent = new Intent(view.getContext(), SaveActivity.class);
                    Uri uri = Uri.parse(item_upload_url.getText().toString());
                    intent.putExtra("uri", uri); // contents:// 이렇게 나와서 이걸 url로 바꾸는 방법을 찾아내야 함
                    view.getContext().startActivity(intent);
                }
            });

그리고 이렇게 클릭했을 때 클릭한 아이템의 이미지URI를 같이 전송해주면서 화면이 전환되게 해준다.

이는 찜하는 액티비티에서 그 사진을 볼 수 있게 하기 위해서이다.

 

UploadAdapter에서 이렇게 설정해주고 이제 액티비티와 XML을 만들어주면 된다.

XML은 이렇게 만들어 주었다.

중앙에 찜하기를 누른 사진이 크게 나오고 밑에 코멘트도 저장할 수 있게 하였다.

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=".SaveActivity">


    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar">

    </include>

    <ImageView
        android:id="@+id/iv_back"
        android:layout_width="40dp"
        android:layout_height="33dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/ic_baseline_arrow_back_24"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar"
        app:layout_constraintEnd_toStartOf="@+id/tv_post_title"
        app:layout_constraintHorizontal_bias="0.064"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.481">

    </ImageView>

    <TextView
        android:id="@+id/tv_save_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/koreanah1_r"
        android:text="찜 하기"
        android:textColor="@color/white"
        android:textSize="25dp"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/toolbar" />

    <Button
        android:id="@+id/btn_save"
        android:layout_width="54dp"
        android:layout_height="31dp"
        android:background="@drawable/edit_bg"
        android:fontFamily="@font/koreanah1_r"
        android:text="저장"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar"
        app:layout_constraintEnd_toEndOf="@+id/toolbar"
        app:layout_constraintHorizontal_bias="0.777"
        app:layout_constraintStart_toEndOf="@+id/tv_save_title"
        app:layout_constraintTop_toTopOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.517" />

    <ImageView
        android:id="@+id/iv_save_image"
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:scaleType="centerInside"
        android:src="@drawable/add_image_512"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar">

    </ImageView>

    <TextView

        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="코멘트"
        android:gravity="center"
        android:background="#B388FF"
        android:textColor="@color/white"
        android:textSize="24dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_save_image">

    </TextView>

    <EditText
        android:id="@+id/et_save_comment"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/button_round"
        android:gravity="left"
        android:hint="찜할때 적고싶은 내용을 작성하세요"
        android:padding="4dp"
        android:textSize="16dp"
        app:layout_constraintTop_toBottomOf="@+id/textView2">

    </EditText>

</androidx.constraintlayout.widget.ConstraintLayout>

 

그리고 액티비티를 만들어주면 된다.

우선 이름을 SaveActivity로 만들어주었고 코드 전체는 이렇다.

package com.example.styleplt;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.example.styleplt.utility.FirebaseID;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.FieldValue;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.SetOptions;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;
import com.google.firebase.storage.UploadTask;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class SaveActivity extends AppCompatActivity {


    private FirebaseAuth mAuth = FirebaseAuth.getInstance();
    private FirebaseStorage mStorage = FirebaseStorage.getInstance();
    private FirebaseFirestore mStore = FirebaseFirestore.getInstance();

    private StorageReference storageRef = mStorage.getReference();

    private String documentId = mAuth.getCurrentUser().getUid();
    long now = System.currentTimeMillis();
    java.util.Date mDate = new Date(now);
    // 날짜, 시간의 형식 설정
    SimpleDateFormat simpleDateFormat1 = new SimpleDateFormat("yyyy.MM.dd hh:mm:ss");
    String current_time = simpleDateFormat1.format(mDate);

    String uploadID = mStore.collection(FirebaseID.upload).document().getId();
    private String nickname;

    private ImageView iv_back, iv_save_image;
    private Button btn_save;
    private EditText et_save_comment;

    private Uri uri;
    private String type;
    private String saveID = mStore.collection(FirebaseID.post).document().getId();

    private UploadTask uploadTask = null; // 파일 업로드하는 객체
    private String imageFileName;// 파일 업로드하는 객체

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_save);

        iv_back = findViewById(R.id.iv_back);
        btn_save = findViewById(R.id.btn_save);
        iv_save_image = findViewById(R.id.iv_save_image);
        et_save_comment = findViewById(R.id.et_save_comment);

        Intent intent = getIntent();
        uri = getIntent().getParcelableExtra("uri");
        Log.d("uri : ", String.valueOf(uri));
        // url을 통해 받아온 사진 띄우기
        Glide.with(this).load(uri).into(iv_save_image);

        iv_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(); // 인텐트 객체 생성하고
                setResult(RESULT_OK, intent); // 응답 보내기
                finish(); // 현재 액티비티 없애기
            }
        });

        // 현재 사용자의 데이터 가져오기
        if (mAuth.getCurrentUser() != null) {
            mStore.collection(FirebaseID.user).document(mAuth.getCurrentUser().getUid())
                    .get()
                    .addOnCompleteListener(new OnCompleteListener<DocumentSnapshot>() {
                        @Override
                        public void onComplete(@NonNull Task<DocumentSnapshot> task) {
                            if (task.isSuccessful()) {
                                DocumentSnapshot document = task.getResult();
                                if (document.exists()) {
                                    Log.d("TAG", "Document is exists");
                                    nickname = (String) document.getData().get(FirebaseID.nickname);
                                } else
                                    Log.d("TAG", "Document is not exists");
                            }
                        }
                    });
        }

        btn_save.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //작성한 글, 닉네임 등을 파이어스토어의 upload 컬렉션에 올리는 코드
                Map<String, Object> data = new HashMap<>();
                data.put(FirebaseID.documentId, mAuth.getCurrentUser().getUid());
                data.put(FirebaseID.nickname, nickname);
                data.put(FirebaseID.contents, et_save_comment.getText().toString());
                data.put(FirebaseID.image, uri);
                data.put(FirebaseID.time, FieldValue.serverTimestamp());
                data.put(FirebaseID.timestamp, current_time);
                data.put(FirebaseID.collectionId, uploadID);
                mStore.collection(FirebaseID.save).document(documentId).collection("uploaded").document().set(data, SetOptions.merge());

                getIntent().getExtras().clear();
                finish();
            }
        });

    }

우선 위에서부터 차근차근 보도록 하자.

        Intent intent = getIntent();
        uri = getIntent().getParcelableExtra("uri");
        Log.d("uri : ", String.valueOf(uri));
        // url을 통해 받아온 사진 띄우기
        Glide.with(this).load(uri).into(iv_save_image);

어댑터에서 OnClickListener를 통해 uri를 intent해주었기 때문에 그걸 바다오고

Glide를 통해 이미지를 세팅해주었다.

        btn_save.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //작성한 글, 닉네임 등을 파이어스토어의 upload 컬렉션에 올리는 코드
                Map<String, Object> data = new HashMap<>();
                data.put(FirebaseID.documentId, mAuth.getCurrentUser().getUid());
                data.put(FirebaseID.nickname, nickname);
                data.put(FirebaseID.contents, et_save_comment.getText().toString());
                data.put(FirebaseID.image, uri);
                data.put(FirebaseID.time, FieldValue.serverTimestamp());
                data.put(FirebaseID.timestamp, current_time);
                data.put(FirebaseID.collectionId, uploadID);
                mStore.collection(FirebaseID.save).document(documentId).collection("uploaded").document().set(data, SetOptions.merge());

                getIntent().getExtras().clear();
                finish();
            }
        });

그리고 저장버튼을 클릭시 현재 사용자의 정보와 Edit Text에 입력한 내용 그리고 이미지의 uri를 파이어스토어에 업로드해준다.

이 때 경로를 save - documentId - uploaded - document(랜덤)으로 설정해주었다.

그리고 다른 사진을 봤을 때 혹시나 겹치지 않을까 해서  Intent받은 것을 지워주고 액티비티를 종료시켜준다.

실제로 실행했을 때의 사진을 보도록 하자.

여기서 별을 눌러서 찜하기로 들어간다.

그리고 Edit Text에 예시라고 작성한 후 저장을 눌러준다.

이렇게 하면 파이어스토어에 내용들이 저장이 될것이다.

 

아래는 저장을 눌렀을 때의 파이어스토어의 사진이다.

save - documentId - uploaded - 랜덤document가 생성되었고 contents에 "예시"라고 작성한것이 들어갔다.

그리고 image에는 uri가 입력된 것을 확인할 수 있다.