앱에서 게시판이라는 커뮤니티 기능을 제공해서 글을 작성하고 댓글로 소통할 수 있긴 하지만

어딘가 정적이라는 느낌이 들어서 해결 방법을 여러가지 생각해보았고

그 결과 알림 기능을 추가하는걸로 결정했다.

 

알림을 추가하는 경우는 3가지로 생각했고, 각 알림을 클릭했을 때 특정 화면으로 넘어가게 설계했다.

1. 회원가입 완료 알림 -> 클릭 시 이용안내 페이지로 이동

2. 작성한 글 새로운 댓글 알림 -> 클릭 시 해당 글 내용 페이지로 이동

3. 마음 온도 60점 이상 달성 시 게시판 기능 해제 알림 -> 클릭 시 게시판으로 이동

 

 

메인 화면 상단바 오른쪽에 알림 아이콘을 추가했다.

읽지 않은 알림이 있으면 사진에 나온 것처럼 빨간색으로,

모든 알림을 읽었으면 회색으로 나온다. (물론 아이콘 모양도 바뀜)

 

 

알림 목록 페이지에서 각 알림 이미지(추후 수정 예정)와 알림 제목, 내용, 날짜, 읽음 여부가 출력된다.

댓글 알림을 클릭하면 해당 게시글 페이지로 이동해서 어떤 글에 달린건지 알 수 있다.

 

 

맨 아래에 있는 마음 온도 60점 달성 알림을 클릭하면 게시판으로 이동한다.

 

 

알림 기능 만드는 것 자체는 어렵지 않아서 2~3시간만에 후다닥 만들었다.

다만 자잘한 오류가 있는 것 같아서 계속 테스트하고 해결해가는 중이다...

앱에서 제공할 기능들은 다 완성한 상태라

이제 앱 전반적인 레이아웃과 디자인만 보완하면 될 듯 하다.

그래서 오늘은 게시판 레이아웃을 전체적으로 손보고 유효성 검사를 추가했다.

 

개발 내용

1. 게시판 카테고리 버튼 TabLayout 적용

게시판 카테고리가 총 4개가 있는데 각 게시판을 fragment로 만들고

상단에 있는 게시판 이름 버튼을 클릭해서 fragment를 불러오는 방식으로 작동한다.

 

버튼 4개를 나열해놓으니 디자인이 투박한 것 같아서 보완하기 위해 구글링해봤는데

내가 원하던 디자인을 구현하는데 필요했던 TabLayout이라는 레이아웃을 찾았다.

 

https://developer.android.com/reference/com/google/android/material/tabs/TabLayout

 

TabLayout  |  Android Developers

 

developer.android.com

 

 

TabLayout 적용 전후 사진을 비교해봤을 때 훨씬 깔끔한 느낌이 든다.

 

2. 게시판 글 작성 레이아웃 수정

제목과 내용을 입력할 때 키보드가 올라오면서 작성하고 있는 부분이 화면에서 안보이는 문제가 있어서

전체적으로 레이아웃을 갈아엎었다.

 

3. 게시판/일기장 사진 클릭 시 확대 페이지로 이동 (image-zoom-view)

일기장에 있던 사진 첨부 기능을 게시판에도 적용하게 되어 한층 더 완성도가 높아지긴 했는데

어딘가 허전한 느낌이 드는 것이다... 그래서 에브리타임이나 네이버 카페에서 글을 확인할 때를 떠올려봤는데

이미지를 클릭했을 때 확대할 수 있는 기능이 들어가면 좋겠다는 생각이 들었다.

검색해보니 image-zoom-view라는 라이브러리가 있어 간편하게 줌 기능을 적용할 수 있었다!!

 

https://github.com/hsmnzaydn/image-zoom-view

 

GitHub - hsmnzaydn/image-zoom-view: Imageview zoom library for android

Imageview zoom library for android. Contribute to hsmnzaydn/image-zoom-view development by creating an account on GitHub.

github.com

 

dependency 추가하고 기존에 ImageView였던 것을 ImageZoomView로 바꾸기만 하면 끝.

 

이미지를 확대할 수 있게 되었다~~

 

4. 게시판 글 작성 취소 팝업 추가

사소한 기능이긴 한데 글 작성하다가 뒤로 가기 버튼을 실수로 눌러서 작성하던 글이 날아가는 것을 방지하기 위해

뒤로 가기 버튼을 눌렀을 때 글 작성 취소 확인 팝업을 추가했다.

 

5. 게시판 글 작성 완료 시 유효성 검사

제목, 내용을 작성하지 않고 글을 등록하는 것을 방지하기 위해 유효성 검사를 추가했다.

며칠 전에 YouTube API 연결을 시도할 때만 해도 갈 길이 멀다고 생각했는데

생각보다 빠른 기간 안에 기능을 거의 다 구현한 듯 하다.

 

오늘은 주로 영상 시청 관련 디테일을 추가하고, 디버깅을 하였다.

개발 내용에 앞서 에뮬레이션 이용 후기를 적도록 하겠다.

 

에뮬레이션 이용 후기

한이음 ICT 멘토링에서 에뮬레이션 이용을 지원해줘서 우리 팀은 8월 2주차 이용을 신청했다.

지원받은 에뮬레이션은 클라우드 기반 테스트 서비스인 Remote TestKit인데 Web 사용 방법과 Client 사용 방법이 있었다.

안드로이드 스튜디오에서 에뮬레이션을 연결하기 위해서는 가상 ADB(Android Debug Bridge) 기능을 이용해야 하므로

Client 사용 방법에 따라 응용 프로그램을 설치하고 이용해보았다.

 

 

응용 프로그램을 실행해보면 대여 가능한 단말기 리스트가 쭉 나오고 단말기 정보로는 통신사, 제조사, 단말기명, OS, 단말 위치 등이 나와있었다.

대여 시간은 30분 또는 60분으로 선택 가능했고 여러 단말기를 대여해서 테스트를 해봤다.

평소에 개발할 땐 하나의 기기에서 테스트를 하는데, 에뮬레이션을 이용하면 다양한 기종의 스마트폰에서 앱을 테스트해볼 수 있다는 점이 좋았다!

 

 

개발 내용

1. 시청한 영상 개수 출력

총 몇 개의 영상이 있고 그 중에서 몇 개의 영상을 시청했는지 사용자에게 보여주도록 하였다.


2. 마음 온도 60점 달성 시 게시판 기능 해제 알림 팝업

마음 채우기 영상을 시청하여 마음 온도가 60점 이상이 될 경우, 게시판 기능이 해제된다.

영상 시청 화면에서 뒤로 가기 버튼을 클릭할 때 영상 시청 완료 팝업 이후 해당 팝업을 띄운다.


3. 이전에 시청했던 영상 팝업 추가

이미 시청했던 영상은 다시 본다고 해도 마음 온도가 오르지 않는다.

따라서 영상 시청 전에 미리 팝업을 띄워 사용자에게 알려주도록 하였다.

다만 마음 채우기 화면은 AppCompatActivity가 아닌 YouTubeBaseActivity를 상속받기 때문에

팝업에 기본 폰트가 적용되지 않는다... 폰트 적용 방법을 찾아봐야겠다.

4. 화면 회전 방지
에뮬레이션으로 테스트하며 이것저것 버튼을 눌러보다가 화면 회전 버튼을 눌렀더니

회전이 되어 화면에 있는 버튼과 각종 레이아웃이 찌부(...)되는 것이다..

그래서 회전 방지하는 방법을 찾아봤는데 AndroidManifest.xml에서 각 액티비티마다 android:screenOrientation="portrait" 를 추가하면 된다고 한다.

<activity android:name=".MainActivity" android:screenOrientation="portrait"/>

이런 식으로 모든 액티비티에 대해 screenOrientation을 추가해줬더니 가로로 회전이 되지 않았다.

 

5. 일기장 캘린더 사라지는 문제 해결

메인화면에서 일기장 화면으로 넘어갈 때 어떨 때는 캘린더가 뜨고, 어떨 때는 안뜨는 버그가 있었다.

열심히 콘솔 찍어보면서 로직 상 잘못된 부분이 없는지 확인해봤는데

로직이 잘못된건 아니었고 스레드를 생성해서 그 안에서 어댑터의 notifyDataSetChanged() 메소드를 실행하며 해결!!

https://stackoverflow.com/questions/24740557/notifydatasetchanged-not-working-on-recyclerview/24740763

 

notifyDataSetChanged not working on RecyclerView

I am getting data from server and then parsing it and storing it in a List. I am using this list for the RecyclerView's adapter. I am using Fragments. I am using a Nexus 5 with KitKat. I am using

stackoverflow.com

이 답변 적어주신 분께 진심 감사합니다...... 스레드 안에서 작동해야 제대로 결과가 반영된다는 사실을 알게 되었다.

안드로이드 스튜디오에서 YouTube API를 이용하여 유튜브 영상을 앱 화면에 띄우는 것은 어제 완료했었다.

오늘은 본격적으로 마음 채우기 (영상 시청) 기능을 구현했다.

 

구현하면서 고려한 점

1. 영상 관련 데이터를 어디에, 어떻게 저장할지

  • 영상 정보(id, 제목, 설명)는 json 파일로 프로젝트 자체에 저장
  • 사용자의 영상 시청 기록은 firebase DB에 저장하기로 함

2. 영상 시청 완료 기준

  • 해당 영상의 길이만큼 시청해야 완료
  • 단, 영상 하단의 스크롤바를 이용하여 시간을 건너뛰는 것을 고려하여 실제로 영상이 재생된 시간을 구해야함

3. 마음 온도 높이는 기준

  • 시청 기록이 없는 영상에 대해서만 마음 온도 증가, 이미 시청 완료한 영상은 마음 온도가 오르지 않음
  • 하나의 영상을 시청했을 때 5점 증가

 

개발 내용

1. 마음 채우기 영상 목록 ListView 구현

지금까지 앱을 개발하면서 RecyclerView, ListView를 많이 이용하였기 때문에

이번에도 Model을 만들고 Adapter을 생성해서 ListView를 만들었다.

 

2. 영상 누적 시청 시간 체크

이 부분을 구현하면서 시간이 꽤 걸렸는데, 앞서 고려한 점에서 언급한 것처럼

영상을 제대로 시청하지 않고 타임라인을 이동하여 영상 시청을 끝내는 것을 방지해야 했다.

실제로 재생된 시간만 리턴하는 메소드를 찾아보았으나 YouTube API에서는 해당 메소드를 제공하지 않는 것으로 보였다.

따라서 스레드를 이용하여 직접 구현하였다.

 

스레드는 1초마다 cnt 값을 높이면서 재생한 시간(초)을 높인다.

이것이 영상의 길이와 일치하게 되면 스레드는 종료되고 영상 시청 완료 처리를 하는 것이다.

영상 재생 시작, 일시정지 후 다시 재생을 할 때 스레드가 동작하도록 하고

일시정지 (또는 정지) 시에는 스레드를 일시중지시키도록 하였다.

 

YouTube API 관련 메소드들은 공식 문서에서 찾아볼 수 있었다

https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer?hl=ko 

 

YouTubePlayer  |  YouTube for Android  |  Google Developers

Javadoc API documentation for YouTube Android Player API.

developers.google.com

 

3. 영상 시청 기록 DB 저장

정상적으로 영상 시청을 완료하고 스레드가 종료되면 firebase DB에 사용자의 uid와 영상의 id 정보를 저장한다.

 

4. 시청 완료한 영상 DB 조회 후 화면에 표시

firebase DB를 조회하여 시청 완료한 영상에 대해서 시청 완료 표시를 한다.

 

5. 영상 시청 화면에서 뒤로가기 버튼 클릭 시 팝업 띄우기

영상 시청을 완료한 후 눌렀을 땐 마음 온도가 올랐다는 팝업을 띄우고

영상 시청 중간에 뒤로가기를 눌렀으면 시청을 완료하지 않았음(마음 온도가 오르지 않음)을 알리는 팝업을 띄운다.

 

6. 메인 화면 메뉴 이미지 추가

메인 화면 디자인을 보완하기 위해 팀원분이 직접 그린 이미지를 추가하였다.

 


 

마음 채우기 화면 (영상 목록 화면), 영상의 시청 완료 여부 확인 가능

 

영상 시청 화면, 시청 시간을 seekbar을 이용해서 나타냈다.

 

영상을 끝까지 시청했을 때 시청 완료 팝업(왼), 중간에 나가는 경우엔 완료되지 않았다는 팝업(오)을 띄운다.

 

이미지를 추가한 메인 화면

회의 내용

오늘 오전 9시에 회의에서 마음 채우기 프로그램의 영상 개수, 마음 온도 높이는 기준과 게시판에 대해 얘기했다.

 

교화 프로그램(마음 채우기)에서 제공할 영상의 개수는 10개,

사용자의 영상 시청 시간을 측정하여 마음 온도를 높이기로 했다.

각 영상마다 시청했는지 체크하는 것을 구현해야하는데 이 부분 구현이 조금 오래 걸릴지도 모르겠다.

 

주요 변동사항은 게시판 기능에 관한 것이었는데,

기존에 있는 자유게시판/익명게시판의 분리, 게시판 기능 제한의 모호성에 대해 논의한 결과

게시판의 카테고리를 세분화하여 질문게시판과 꿀팁게시판을 추가하기로 했고

마음 온도가 60 보다 낮은 사용자는 아예 게시판에 접근이 불가능 (조회도 불가능) 하게 제한하는 것으로 결정했다.

 

그 외 회원가입 시 이메일 인증과 닉네임 중복 체크 추가, 메인 화면의 마음 온도 실시간 반영 등을 구현하기로 했다.

 

개발 내용

1. YouTube API를 이용한 YouTubePlayerView 초기화 문제 해결

- 갤럭시S20+로 테스트를 해봤는데 유튜브 플레이어의 초기화에서 오류가 발생했었음

- 다른 팀원들은 오류가 발생하지 않았는데 어째서 나만...? 고민

   → 구글링 결과, Android 11 (API 30+)는 AndroidManifest.xml에 추가적으로 코드를 작성해야했음

https://github.com/PRNDcompany/YouTubePlayerView/issues/12

 

YouTubePlayerView initialise error : SERVICE_MISSING · Issue #12 · PRNDcompany/YouTubePlayerView

Hi all, yesterday I use this player and got the error hint "error when initial You Tube Player" on the YouTubePlayerView screen, but few days ago it worked fine. So I added YouTubePlayerV...

github.com

 

2. YouTube API 로드 후 썸네일 불러오기, 재생/일시정지 버튼 구현

- cueVideo(String videoId) 메소드를 이용하여 썸네일을 로드할 수 있었음 (아래 링크 참고)

https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer?hl=ko 

 

YouTubePlayer  |  YouTube for Android  |  Google Developers

Javadoc API documentation for YouTube Android Player API.

developers.google.com

마음 채우기 화면에 접속했을 때 영상 썸네일이 자동으로 로드된 모습 (고앵이는 테스트용 영상..ㅎㅎ)

 

3. 챗봇 상담 기관 전화, 웹사이트 링크 활성화

- 챗봇의 응답 중 학교 외에 학교폭력 관련 도움을 받을 수 있는 센터 등의 전화번호, 웹사이트 주소를 포함하는 것이 있음

- 전화번호, 링크를 클릭하여 전화 화면 또는 인터넷으로 이동할 수 있도록 autoLink 속성을 추가함

https://saeatechnote.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-link%EA%B1%B8%EA%B8%B0

 

[android/안드로이드] link걸기

android link걸기 예제 /res/layout/activity_main.xml //자바 파일은 따로 안해도 됨. autoLink : TextView의 속성중 하나로 자동으로 링크가 걸린다. autoLink="none" -..

saeatechnote.tistory.com

전화번호, 웹사이트 url을 터치했을 때 연결 프로그램으로 넘어가는 모습

 

4. 게시판 카테고리 세분화

- 회의 결과에 따라 자유게시판/질문게시판/꿀팁게시판/익명게시판 으로 카테고리를 세분화함

- 익명게시판만 닉네임이 안보이고 댓글 기능을 제공하지 않음

질문게시판, 꿀팁게시판이 추가된 게시판 화면

 

5. 게시판 파이어베이스 DB 구조 변경

기존에 DB 구조는 다음과 같이 루트 하위 구조로 각 게시판이 있었는데

루트

ㄴ자유게시판

ㄴ익명게시판

게시판 카테고리가 늘어나면서 하나로 묶는게 나을 것 같다는 생각이 들었음

 

변경된 구조 :

루트

ㄴ게시판

  ㄴ자유게시판

  ㄴ질문게시판

  ㄴ꿀팁게시판

  ㄴ익명게시판

 

6. 게시판 이용 안내 팝업 추가

- 각 게시판의 용도를 안내하는 내용을 포함

게시판 화면에서 이용 안내를 확인할 수 있음

 

7. 마음 온도가 낮은 사용자의 게시판 기능 제한

- 메인 화면에서 게시판 버튼 클릭 시, 테스트 결과 유무 및 마음 온도 확인

- 마음 온도가 60 보다 낮은 사용자는 게시판을 이용할 수 없으며, 마음 채우기 기능을 이용할 것을 권장하는 팝업을 띄움

마음 온도가 낮은 상태로 게시판 이동 버튼을 클릭했을 때 나오는 팝업

 


 

오전 일찍 회의하고 회의 끝나자마자 개발했더니 이것저것 많이 구현한 듯 하다.

유튜브 API 연결을 하루만에 끝낸게 다행스럽다. (파이어베이스, 다이얼로그 플로우 연결할 때 꽤나 오래 걸렸던 기억이...)

기능 제한도 끝냈으니 이제 마음 채우기 페이지에 영상 목록을 띄우고,

각 영상을 시청할 때마다 마음 온도를 높이는 것 구현을 시작해야겠다!!

테스트 결과를 바탕으로 마음 온도를 산출하고, 마음 채우기 페이지를 안내하는 것을 중점적으로 구현했다!!😎

 

 

1. 테스트 결과 확인 후 마음 온도 DB에 저장

 

2. 테스트 결과 화면에 "마음 채우기 기능 해제" 팝업 띄우기

- 뒤로가기 버튼 클릭 시 팝업 출력

- 이동하기 버튼 클릭 시 마음 채우기 안내 페이지로 이동

 

3. 마음 채우기 안내 페이지 레이아웃 틀 잡기

- 마음 채우기 프로그램의 목적과 방법을 안내할 예정

- 마음 채우러 가기 버튼 클릭 시 영상 시청 화면으로 이동

 

4. 팝업(AlertDialog) 디자인 커스텀

- 커스텀 폰트 지정

- 직사각형 모양 -> 둥근 사각형

 

5. 메인화면 디자인 수정

- 각 버튼마다 아이콘 추가, 배경 색상 변경

 

6. 사이드바 헤더에 유저 닉네임, 학교 출력

 


 

테스트, 상담, 일기장, 게시판 기능을 다 구현해서 주요 기능 구현은 끝난 상태였는데,

생각보다 마음 채우기 (교화 프로그램 시청) 기능을 구현하기 위해 해야할 일들이 많다.

 

테스트 결과를 바탕으로 마음 온도 산출과 DB 저장은 끝냈으니

이제 본격적으로 Youtube API를 이용해서 영상 시청 기능을 제공하고,

게시판의 기능 제한을 구현해야겠다.

1. 로딩 화면(스플래시 화면)에서 firebase DB 데이터 불러오는 문제 해결

- 스레드의 run 메소드 안에 DB 조회 코드가 들어있던 것이 문제... 스레드 밖으로 해당 코드를 뺐더니 해결!

- 하지만 지금은 스레드의 딜레이 시간을 고정으로 준 상태라 그 시간 내에 데이터를 불러오지 못할 수도 있음

- 따라서 확실히 DB 데이터 조회를 완료한 후 액티비티가 이동할 수 있도록 보완할 필요가 있음

 

2. 챗봇 답장 '일기장으로 이동합니다' 출력 시 일기장 액티비티로 이동

- 이 외에도 dialogflow 자체에서 처리할 수 없는 것들은 안드로이드 스튜디오에서 코드 작성해서 처리해야할듯

 

일기장으로 이동합니다 멘트 출력 시 1.5초 뒤 일기장으로 이동

 

3. 진단테스트 안내 문구 추가

- 테스트 진행 전 테스트 목적, 문항 수, 유의사항 등의 안내를 확인할 수 있음

 

진단테스트 안내 화면

 


 

지난 일요일에 회의에서는 테스트 결과에 따라 마음 온도를 어떻게 설정할건지,

마음 온도에 따라 앱 기능의 제한 정도, 게시판 기능의 모호성 등을 논의해보았다.

슬슬 앱의 디자인을 제대로 꾸미기 위해 이모티콘 그림도 각자 그려오기로 했고 (일요일 회의때 대회 진행할 예정 ^_^)

새 기능을 구현하기 위해 각자 역할 분담해서 수행해오기로 했다.

8월 30일까지 한이음 공모전 접수 마감이니까 호다닥 개발해버리자~!😎

1. 진단테스트 결과 출력

- 테스트 점수에 따라 피해, 가해 정도를 [아주 약함 / 약함 / 보통 / 심함 / 아주 심함]으로 분류하여 상세 진단 내용 출력

- 프로그레스바로 최대 점수 중 몇 점을 차지했는지 나타냄

 

피해/가해 정도 결과 상세 내용

 

2. 채팅 내역 전체 삭제 기능 구현

- 상단바에 있는 삭제 버튼을 클릭하면 삭제 안내 팝업이 뜸

- 확인을 클릭하면 지금까지 진행한 모든 채팅 내역이 삭제됨

 

채팅 전체 내역 삭제 팝업

 

3. 채팅 내역이 없을 때 챗봇 웰컴 메세지 출력

- 채팅 화면에 처음 접속했을 때, 또는 채팅 내역 전체 삭제를 진행했을 때 웰컴 메세지를 받음

- 사용자에게 예시 질문을 보여줌으로써 원활한 1:1 상담 채팅을 이용할 수 있도록 함

 

채팅을 처음 시작할 때 웰컴 메세지 출력 (챗봇 가이드 느낌)

 

4. 메인 화면 랜덤 문구 리스트 추가

- strings.xml에 string-array의 item들로 랜덤 문구 리스트를 저장하고 랜덤으로 출력하게 함

 

앱에 접속할 때마다 메인 화면 상단에 사용자를 응원하는 랜덤 문구가 출력된다

 


현재 진단테스트 점수에 따라 결과 상세 내용을 출력하고,

1:1 채팅에서 dialogflow에 작성된 인텐트에 따라 상담을 진행할 수 있는 상태이다.

 

테스트 결과와 챗봇 내용을 구성하고 dialogflow에 옮기기까지 많은 시간이 걸렸을 것 같은데

이것을 무사히 끝낸 팀원들에게 박수를 보낸다👏👏👏... 덕분에 앱의 완성도가 한층 높아진 것 같다!

 

상담 내용 디테일👍

 

7월 한달간 앱의 많은 기능들을 구현했다.

이제 8월에는 교화 프로그램을 통한 마음 온도 조정, 기능 제한, 앱 디자인 보완 등을 중점적으로 다루면 될 것 같다.

+ Recent posts