[앱시트 입문] 04. 앱 만들어보기 - (3) 댓글과 좋아요 기능

안녕하세요.

저번 글에 이어서 커뮤니티 앱을 계속 만들어 보겠습니다. 저번 시간까지는 템플릿 앱을 만들고, 만들어진 템플릿 앱의 데이터를 변형해서 유머, 자유, 베스트, 정보, 나눔의 각 게시글 데이터가 구분되어 표시되도록 설정해 보았습니다.

혹시 저번 글을 못보신 분들이 있다면 아래 링크에서 먼저 내용을 확인해 주세요!

[앱시트 입문] 02. 앱 만들어보기 - (1) 앱 생성

[앱시트 입문] 03. 앱 만들어보기 - (2) 데이터 자르기

오늘은 댓글과 좋아요 기능을 구현해 보도록 하겠습니다. 또, 베스트 게시판에서 좋아요 갯수가 많은 순서대로 표시하도록 수정해 볼게요.

그럼 시작해볼까요?

 

 

● 댓글 구현하기

사실 저희는 이미 데이터를 다 준비해놓은 상황이기 때문에 설정만 잘 해주면 댓글 구현은 끝납니다. 먼저 댓글을 달 수 있게 댓글 달기 버튼을 추가해 주겠습니다.

버튼 추가는 Behavior 메뉴에서 가능한데요, New Action 버튼을 눌러 아래와 같이 새로운 버튼을 추가해 주었습니다.

저는 이 버튼을 눌렀을 때 해당 게시물에 대한 댓글을 작성할 수 있도록 하고 싶은데요, 그래서 Do this 항목에는 App:go to another view within this app 을 선택한 후, Target을 LINKTOFORM("댓글_Form", "PID", [PID]) 로 설정했습니다.

여기서 Target 란에 들어간 부분을 수식(formula)이라고 부르는데요, LINKTOFORM이라는 함수는 다음과 같이 설명이 돼 있습니다.

LINKTOFORM: 한 개 이상의 값을 미리 지정한 상태로 앱에 있는 특정 폼 화면으로 이동합니다.
  예 - LINKTOFORM("Some Form View", "Date", TODAY(), "Color", [_THISROW].[Color])
       => Date 값은 TODAY(), Color 값은 [_THISROW].[Color] 가 입력된 "Some Form View"라는 화면을 실행시킨다

이런 수식(formula) 작성 방법의 경우 별도 글에서 제대로 정리해 드릴 예정입니다. 지금은 일단 따라해보고, 어떤 결과가 나오는지 확인해 보면 좋을 것 같습니다. 적용된 화면은 이렇게 보입니다.

이처럼 '댓글 작성'이라는 버튼이 각 게시물에 표시가 됩니다. 버튼을 누르면, 아래처럼 PID가 1이라는 값으로 채워진 댓글 Form 화면이 보입니다.

내용을 입력하여 댓글을 입력해 보겠습니다. 저장 버튼을 누르면 댓글 등록이 완료되지만 아직 게시글 화면에는 댓글이 표시되지 않고 있네요.

댓글을 표시해주기 위해 Data 메뉴의 Columns 에서 게시글 테이블에 대한 가상 열(Virtual column)을 추가해 주도록 하겠습니다. 등록된 해당 열을 통해 댓글을 불러오면 됩니다.

Add Virtual Column 버튼을 누르면 가상 열이 추가됩니다.

여기에서는 수식(formula)으로 REF_ROWS("댓글", "PID")를 넣어 주었는데요, 댓글 테이블의 행 중 PID가 같은 행들만 리스트로 가져오라는 의미입니다.

REF_ROWS(): 특정 테이블이나 데이터 슬라이스에서 지정한 참조값과 일치하는 행들을 가져옵니다.
  예 - REF_ROWS("Order Details", "Order ID")
      => Order Details 테이블에서 Order ID 가 일치하는 행들을 가져옵니다.

이렇게 댓글을 추가해 주면 게시글 디테일 화면(게시글을 눌렀을 때 나오는 화면)에 댓글이 아래와 같이 표시됩니다.

 

 

● 좋아요 구현하기

좋아요도 댓글과 유사하게 Behavior 메뉴에서 좋아요 라는 버튼을 만들어주도록 하겠습니다.

저는 Data: add a new row to another table using values from this row 를 선택해 주었습니다. 현재 테이블인 게시글 테이블의 값을 이용해서 좋아요 테이블에 새로운 행을 추가하겠다는 의미입니다. [PID], USEREMAIL(), NOW(), 1 과 같이 필요한 값을 입력해준 뒤 저장 버튼을 눌렀습니다.

이처럼 좋아요 버튼이 생겼는데요, 해당 게시글에 대한 좋아요가 몇개인지 확인하기 위해서 새로운 가상 열(Virtual Column)을 추가해 주도록 하겠습니다.

여기서 똑같이 REF_ROWS() 함수를 사용했습니다. 그리고 지금 필요한 것은 좋아요 리스트가 아닌, 좋아요의 갯수이기 때문에 COUNT() 함수를 활용하여 리스트의 갯수만 가져오도록 하겠습니다.

이후 앱을 동기화해주면 아래와 같이 좋아요의 갯수가 표시됩니다.

 

 

● 좋아요가 많은 게시글부터 표시

좋아요를 만들어 주었으니 베스트 게시판을 수정해 보겠습니다. 모든 게시글 중 좋아요가 많은 게시글부터 표시하도록 설정해 보겠습니다. 방법은 생각보다 간단합니다. 먼저 UX 메뉴의 Views 탭으로 간 후, 베스트 를 클릭하여 화면 설정을 열어줍니다. 이후 Sort by, Group by 및 Group aggregate 메뉴를 통해 사용자에게 보여줄 데이터의 순서 및 형식을 조절할 수 있습니다.

이렇게 설정하고 테스트를 위해 정보 게시글에 좋아요를 3개 누르고, 유머 게시글에 좋아요를 2개 누른 후 앱을 동기화해 주었습니다(다른 게시글은 0개). 그랬더니 아래와 같이 화면이 표시되었습니다.

원하는대로 잘 정렬된 것을 확인할 수 있습니다.

오늘은 댓글과 좋아요 기능, 베스트 게시판 정렬을 해보았습니다. 여러 가지 수식이 지금은 낯설게 느껴지시겠지만 공부하고 앱을 만들다 보면 점점 익숙해 지실 거예요! 앱이 지금은 별로 예쁘거나 실용성이 있는 것 같지는 않아서, 다음 시간에는 앱을 좀더 꾸며주도록 하겠습니다. 앱을 잘 꾸미면 사용자 입장에서도 원하는 메뉴를 쉽게 찾아서 볼 수가 있고, 보기에도 예뻐서 더 좋은 앱으로 바뀐답니다. 같이 열심히 공부해 보아요~