해당 프로젝트는 단순 공부, 기록용입니다. 버블을 배우고있는 강좌에서 피그마 파일을 제공했으며, 앱의 기능에서 몇 가지만을 추가하여 진행합니다.
채팅 기능
채팅방 구성
• 페이지의 Type of content는 채팅방으로 설정합니다. 상대방의 닉네임, 매너온도와 상품 정보를 상단 바에 고정합니다.
• 채팅 부분은 리피팅 그룹으로 만들고 Type of content를 채팅메세지로 설정합니다.
• 메세지 그룹에 컨디셔널을 넣어 사용자가 보낸 메세지의 경우 배경색과 텍스트 색을 바꿔줍니다.
• 메세지를 보낸 시간 텍스트 역시 2개를 준비해서 사용자에 따라 위치가 바뀌도록 합니다. 리피팅 그룹 안의 그룹을 사용자에 따라 내부 정렬을 바꿔주는 컨디셔널 역시 추가합니다.
• 위의 설정 등을 통해 사진과 같이 평범한 채팅방을 만들 수 있습니다.
Reverse Repeating Group 플러그인
• 깔끔한 채팅 기능을 위해 Reverse Repeating Group 플러그인을 활용합니다.
• 리피팅 그룹과 그 안의 가장 밖의 그룹에 ID Attribute로 이름을 설정해 줍니다. 플러그인을 페이지 안에 그려놓고 id를 그대로 적습니다.
시간 설정
• 오후 10:00 의 형식으로 시간을 표현하는 방법입니다. 오전 / 오후는 custom format을 tt로 설정하고 find & replace로 am을 오전으로, pm을 오후로 바꿔놓으면 됩니다. 00:00 ~ 12:00의 형태는 hh:MM으로 설정해주면 됩니다.
• 다음은 2024년 03월 27일의 형식으로 시간을 표현하는 방법입니다. yyyy년 mm월 dd일로 설정해주면 됩니다. 이전 셀의 날짜와 비교하여 날짜가 같다면 텍스트를 보이지 않게 설정하는 방법도 알아보겠습니다.
• 이전 셀의 index를 가져오기 위해 input 박스를 만들어 initial contnet를 다이내믹밸류로 current cell’s index + 1로 설정해줍니다. content format을 integer로 설정합니다.
• 다음으로 이전 셀의 날짜를 가져옵니다. input 박스를 만들어 리피팅 그룹의 ‘input 이전 셀의 index’ 번째 메세지의 creation date를 불러옵니다. format을 yy-mm-dd로 설정합니다.
• 이전 셀의 날짜를 input에 저장했으니 현재 셀의 creation date와 일치한다면 보이지 않도록 설정합니다. format을 일치시켜 비교해줘야 합니다.
워크플로우 설정
• 메세지 보내기 이미지 클릭 시 새로운 채팅메세지를 만들어줍니다. 메세지는 input 메세지 보내기’s value를 넣어줍니다. 다음 단계에서 현재 채팅방에 만들어진 채팅메세지를 추가해줍니다.
• 상대방 채팅 메세지의 앞쪽에 위치한 프로필 이미지를 클릭 시 상대방의 프로필 페이지로 넘어가는 워크플로우를 추가합니다. 현재 채팅방의 참여자 중 current 유저를 빼주면 상대방만 남게 됩니다.
• 상품정보 그룹과 약속잡기 그룹 클릭 시 약속잡기 페이지와 item 페이지로 넘어가도록 합니다.
채팅방 목록 페이지
구성
• data source를 현재 유저의 채팅방으로 하는 리피팅 그룹을 만들어줍니다. 상대방의 닉네임, 프로필이미지, 설정동네 등을 텍스트에 넣어줍니다. Type of content가 채팅방이기 때문에 상품 썸네일 등을 가져올 수 있습니다.
• 채팅방의 채팅메세지 중 가장 마지막 아이템의 메세지를 보여줍니다.
워크플로우
• 리피팅 그룹의 셀을 클릭하면 해당 셀의 채팅방으로 보내주는 워크플로우를 설정합니다.
약속잡기
구성
• 채팅 참여자의 정보를 불러오기 위해 페이지의 Type of content는 채팅방으로 설정합니다.
• Date/TimePicker로 약속을 잡을 날짜를 선택할 수 있도록 합니다. 드롭다운을 이용하여 알람을 몇 분전에 보낼지 선택할 수 있도록 합니다. static choices를 통해 미리 설정해둔 항목들만 선택 가능합니다.
워크플로우
• 채팅방에 약속을 잡았다는 메세지를 보내주기 위해서 드롭다운, Date/Time Picker의 값을 가져와야합니다. 멀티 인풋 박스를 활용하여 메세지를 보내줄 형식에 맞춰 다이내믹 밸류를 넣어줍니다.
• 완료 버튼을 눌렀을 때 만들어진 멀티인풋을 메세지로하는 채팅메세지를 채팅방에 추가해줍니다.
Schedule API
• 약속을 잡고 메세지를 보낸 후에 메일을 보내주는 기능을 api를 통해 구현해보겠습니다.
• Backend workflows에서 General > New API workflow를 선택합니다. 워크플로우의 이름을 알림보내기라고 설정합니다. 백엔드워크플로우에서 프론트의 값들을 바로 가져올 수 없기 때문에 필요한 값들을 Add a new parameter을 통해 가져옵니다. Key 값은 임의로 생성할 수 있으며 파라미터를 생성 시 두 번째 사진처럼 해당 값을 설정할 수 있습니다.
• 약속잡기 페이지 워크플로우로 돌아와 Custom Events > Schedule API Workflow 기능을 step3로 설정합니다. Scheduled date에는 언제 알림보내기 워크플로우가 작동할 지 선택하는 기능입니다. 드롭다운에서 선택한 시간만큼 전에 알림을 보내줘야 하는데 -minutes 기능이 없어서 새로 인풋 박스를 만들어 드롭다운의 값에 (-)를 곱한 값을 저장해줘야 합니다. 그 다음에 백엔드 워크플로우에서 필요로 하는 값들을 다이내믹밸류를 통해 넣어줍니다.
• 값들을 가져왔으니 백엔드 워크플로우에서 send email 기능을 통해 약속잡기를 완료한 유저와 상대방의 이메일로 메일을 보내줍니다. 메일 제목과 내용을 작성할 수 있습니다.
관련 게시물
버블로 중고거래 앱 구현하기 1편 – 기본 설정과 데이터 추가하기
버블로 중고거래 앱 구현하기 2편 – 회원가입/로그인 페이지 구성하기
버블로 중고거래 앱 구현하기 3편 – Reusable element 만들기 & 홈 페이지 구성하기
버블로 중고거래 앱 구현하기 4편 – 동네 설정 기능 추가하기 & 상품 등록 페이지 만들기
버블로 중고거래 앱 구현하기 5편 – 상품 상세 페이지 & 상품 검색 페이지 구성하기