[안드로이드 sns앱 만들기] NearBy 실행 화면 (3)

1. 로그인 / 회원가입 기능 

 

• 이메일과 비밀번호를 입력하여 계정을 생성합니다.
• 이메일이 형식에 맞지 않거나 비밀번호가 6자리 이상이 아니면 파이어베이스에 계정이 생성되지 않도록 하였습니다.
• 회원 가입을 완료하면 Firestore database의 users 컬렉션에 해당 계정의 userId 이름으로 된 문서가 새로 생성됩니다.
• 이후, 프로필 사진을 갤러리에서 불러와 프로필 사진과 닉네임을 설정할 수 있습니다. 
• 프로필 사진 설정 시, 사용자가 올린 사진을 바로 화면에 적용하는 방식을 이용해, 사용자의 편의성을 높였습니다.
• 이때 닉네임 중복 확인을 하는데, 중복된 닉네임이 있다면 중복되었다는 토스트를 띄워줍니다.

2.  메인 페이지  

• bottom navigation을 구현하였습니다. mainListFragment,mapsFragment,friendsListFragment,profileFragment 간의 이동이 가능합니다.
• 현재 위치를 중심으로 MutableLiveData<List<Post>> livePostList에 포스트를 가져옵니다. mapsFragment와 mainlistFragment에서는 observer를 이용해 게시물 리스트를 참조합니다.
• FCM 토큰을 설정하고,알림 채널에 연결하였습니다.
• 뒤로 가기를 눌렀을 때 한 번 더 물어보게 설정하였습니다.

3. 게시물 띄우기

• 리사이클러뷰에 포스트 객체를 넣어 게시물을 띄웁니다.
• 리사이클러뷰 안에 리사이클러뷰를 넣어 한포스트에는 1개이상의 이미지가 들어있을 수 있고 가로로 넘겨 다음 이미지를 볼 수 있습니다.
• 게시물은 프로필사진,날짜,내용 텍스트,태그,닉네임,위치 등으로 이루어져있습니다.
• 필터버튼을 눌러 게시물을 필터링 할수 있습니다. 지도화면과 필터 내용을 공유합니다

4.지도 화면 

 

• 참조한 포스트 리스트에서 포스트 객체들을 지도에 마커로 띄웁니다.
• 클러스터 기능을 이용하여 일정 수준 이상 핀치 아웃되면 여러개의 마커를 하나의 클러스터로 합칩니다.
• 클러스터나 마커를 클릭하면 해당 클러스터에 포함된 미리보기창이 하단에 리사이클러뷰에 뜹니다
• 버튼을 눌러 해당게시물을 보거나 작성자의 프로필을 볼 수 있습니다
• gmap의 api를 이용해 현재 위치 새로고침,현재위치 추적 기능을 활성화 해 놓았습니다.

5.게시물 업로드 

• 게시물을 업로드 할 때 갤러리에 있는 사진을 불러와 업로드할 수 있습니다.이때 사진의 개수는 한 장을 불러올 수 있고 한 게시물에 여러개의 사진을 첨부할 수도 있습니다. 여러 개의 사진을 불러오면 이를 리사이클러뷰로 띄워 바로 확인할 수 있게 했습니다. 이때 사진을 업로드 하는 버튼은 맨 오른쪽으로 밀려나도록 구현했습니다.
• 사진과 함께 올라갈 택스트, 날짜, 공개범위를 설정할 수 있습니다.
• 날짜는 어느 날이든 설정할 수 있으며, 공개 범위는 전체 공개, 비공개, 친구에게만 공개하도록 설정할 수 있습니다.
• 공개 범위를 설정하면 필터링 기능을 통해 게시물이 분류됩니다. 그러면 메인 리스트를 가져올 때 자동으로 필터링됩니다.

6. 프로필뷰 페이지

 

• 연결된 Firebase auth 에서 userID를 받아와 해당 user 문서에서 프로필 사진, 닉네임, following 수, post 수 등을 가져와 각 post의 대표사진을 리사이클러뷰로 띄우는 작업을 하였습니다. 

7.친구 리스트 페이지

• 친구 리스트를 만들어 Firebase auth에 있는 userID에서 프로필 사진, 닉네임, 게시물 수를 가져옵니다. 이를 어댑터와 연결해 하나의 리사이클러뷰로 만들었습니다. 이때 자신의 계정에서 followings 필드에 추가된 친구 수만큼 리사이클러뷰로 띄웁니다.
• 하나의 리스트를 FriendsListFragment와 FriendsEditActivity에 모두 띄워줍니다.
• 이 두 화면은 FriendsListFragment에 있는 “편집” 버튼으로 이동할 수 있습니다.
• FriendsListFragment에 뜨는 리스트는 “삭제” 버튼을 비활성화 하였고, FriendsEditAcitivity에 뜨는 리스트는 “삭제” 버튼을 활성화했습니다. 삭제 시, 다이얼로그를 띄워 한 번 더 확인하고, 변경된 리스트를 FriendsListFragment에서도 동일하게 작동되게 하였습니다.

8. 필터링 기능 

• 기간,게시글의 거리,태그 3가지 항목을 이용하여 게시물을 필터링 할 수 있습니다.
• 기간, 게시글 거리는 하나씩만 선택 가능하고 태그는 다중선택 가능합니다.
•  filteredPosts = postList.stream().filter() 다음과 같은 코드로 필터링 합니다.

9.알림 기능

• FCM과 firebase function을 이용해 좋아요,댓글,팔로우에 대한 알림 보낼수 있게 하였습니다.
• firebase cli를 이용해 서버에 자바스크립트 코드를 deploy했습니다.
• 좋아요감지,댓글감지,팔로우감지 세가지의 함수가 있으며 firestore에서 데이터 변경을 감지해 적절한 알림을 FCM토큰으로 보냅니다.

10. 단일 게시물 페이지 

• SinglePostPage Activity는 NearBy에서 단일 포스트를 띄워야하는 모든 뷰에 연결되어 사용되고 있습니다. 
• 접근하려는 해당 post로부터 postId 값을 String으로 전달받아 Activity를 실행하는 구조를 가지고 있습니다. Firestore database에 해당 postId에 접근하여 post 객체 한 개를 가져와 뿌리는 형식입니다. 
• 이는 Mainpage의 List를 띄우는 뷰와 매우 유사하게 되어 있어 코드 재사용에 중점을 두어 고민하였습니다.
•  MainPage의 Post 객체 여러개로 이루어진 배열로 되어 있는 구조로 리사이클러뷰로 객체 하나씩 뿌려주고 있지만, SinglePostPage는 하나의 객체만을 대상으로 하는 부분이 차이점이었습니다.
• 그렇기 때문에 Mainpage에서 사용한 Post 객체와 리사이클러뷰를 재사용하여 코드의 효율성을 높였습니다. 이는 추후에 친구 프로필뷰를 연결시키는 작업 등의 기능을 수정하고 추가하면서 재사용성의 힘을 더욱 느꼈습니다.
• 게시물에 접근하는 현재 UserId와 게시물을 올린 사람의 UserId를 비교하여 동일하다면 게시물을 삭제할 수 있는 기능도 Menu app bar를 통해 구현하였습니다. 삭제 시 Post 문서 전체와 User 문서 내의 postIds 필드에 있는 해당 postId가 동시에 삭제됩니다.

11. 친구 프로필뷰 페이지 

• 친구 프로필뷰 페이지는 자신의 프로필뷰 페이지와 다르게 UserId를 받아와 firebase에서 해당 user 문서를 찾아 프로필 뷰를 구성해주는 Activity 입니다.
• FriendProfile Activity는 NearBy에서 프로필 사진을 클릭했을 때, 친구의 profile을 접근해야 하는 상황에 사용되고 있습니다.
• 친구 프로필뷰에 접근하는 현재 UserId와 친구 프로필뷰 페이지로 접근할 때 받아오는 UserId를 비교하여 같은 값이라면 팔로우 버튼을 보이지 않게 만들어 자신을 followings 필드에 추가하는 예외 사항을 처리하였습니다.