Hello World

안드로이드 스튜디오에서 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 

3. 영상 시청 기록 DB 저장

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

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

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

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

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

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

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

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

회의 내용

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

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

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

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

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

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

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

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

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

개발 내용

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

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

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

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

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

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

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

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

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

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 자체에서 처리할 수 없는 것들은 안드로이드 스튜디오에서 코드 작성해서 처리해야할듯

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

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

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

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

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

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

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

1. 진단테스트 결과 출력

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 자유게시판 댓글 개수 표시

- 공감 개수 표시는 지난번에 구현 완료했었고 이번에 댓글 개수 표시까지 완료함

2. 익명게시판 목록에서 댓글 개수 표시X, 글 내용 페이지에서 댓글 영역 제거

3. 익명게시판 글 작성자 닉네임 대신 익명으로 뜨도록 함

4. 앱 내부 폰트 변경 (어비미미체)

이로써 게시판 기능은 구현 끝!

이제 테스트, 채팅 기능과 앱 전반적인 디자인에 신경써야할 때인것 같다.

6월 초~중순

6월에는 1학기 마무리를 마무리하는 시점이며 기말고사로 한창 바쁜 시즌이었다.

따라서 6월 초~중순에는 학업에 충실하기로 하여 한이음 프로젝트 개발은 잠시 쉬어가는 타이밍이었다.

종강을 먼저 한 사람부터 앞으로 개발을 하기 위해 공부를 하고 사용할 기술(Dialogflow 등)에 대해 조사하기로 했다.

6월 말

우선 비교적으로 구현이 간단할 것으로 판단되며, CRUD의 유사한 기능을 가지는

일기장, 게시판 기능을 6월까지 마무리하기로 하였고 주요 기능 구현을 마쳤다.

일기장

일기장 기능에서는 기본으로 지원되는 CalendarView보다는 커스텀 캘린더를 만들어 적용하는 것이

디자인적인 면에서 더 낫다고 생각해서 MaterialCalendarView를 이용하여 구현하는 것을 시도하다가

작성한 코드에서 오류가 발생했는데 그 원인을 1~2주간 고민해도 찾지 못했다.

캘린더 구현 부분에서 너무 오랜 시간을 보내고 있는 것으로 판단하여 결국 MaterialCalendarView 사용을 포기하고

다른 커스텀 캘린더 구현 방법을 찾아보기로 했고 다행히도! 유튜브에서 관련 자료를 찾아 해당 방법을 사용하여 구현했다.

게시판

그리고 게시판 기능은 글 작성, 글 목록 조회(DB에서 불러오기) 및 수정/삭제 기능을 구현했다.

게시판은 자유게시판과 익명게시판으로 나뉘는데 fragment 개념을 이용하여 두 게시판을 이동하도록 했다.

아직 로그인/회원가입 구현이 되어있지 않은 상태라 구현이 되고 나면

사용자 계정에 따라 자신이 작성한 글에 대해서만 수정/삭제 권한을 부여할 것이고

각각의 게시글에 대한 댓글 기능, 공감 기능을 추가할 것이다.

7월 계획

여름방학 기간 7~8월에 열심히 개발하여 8월 말까지는 개발을 끝내는 것을 목표로 하고 있다!

7월에 구현을 끝내야할 사항들을 나열해보았다.

• Firebase Authentication을 이용하여 사용자 계정 관리, 로그인/회원가입 기능 구현
• 진단테스트 문항 구성 및 기능 구현
• Dialogflow 챗봇 인텐트 구성 시작, 앱 화면과 연결하기
• 일기 작성 시 사진 첨부 기능 추가하기
• 게시판 댓글, 공감 기능 추가하기
• 앱 디자인, 레이아웃 개선하기

6월 개발 일지

일주일 전에 정보처리기사 실기 시험 보고나서 한동안 아무 의욕 없이 지내다가

오늘에서야 다시 의욕이 되돌아온듯 하다.

그동안 많이 쉰만큼 오늘은 12시간동안 빡세게 개발했지!⭐🤸‍♀️

1. 게시글 공감 기능

- 각 게시글마다 공감 버튼을 누른 사용자의 uid를 Firebase DB에 저장

- 몇 명이 공감을 눌렀는지 실시간으로 반영하여 화면에 표시함

- 금방 구현할줄 알았는데 PostAdapter의 구조 변경이 많이 이루어져서 생각보다 시간이 오래 걸렸던 작업

2. 메인 화면 사이드바 구현

- 메인 화면 좌측 상단 버튼을 클릭하면 사이드바가 나옴

- DrawerLayout, NavigationView를 이용하여 구현 (https://onelight-stay.tistory.com/86 참고)

- NavigationView는 headerLayout(헤더 부분)과 menu(메뉴 부분)를 포함함

- 각 메뉴를 클릭했을 때 해당 페이지로 이동하도록 구현함

3. 1:1 상담 채팅 날짜 표시

- 보통 메신저 앱을 이용할 때 각 날짜를 기준으로 가장 상단 부분에 날짜가 출력됨 → 이것을 구현

- 채팅 시간 표시도 구현할까 했으나, 사람간의 대화도 아닐뿐더러 사용자가 보낸 이후 몇 초만에 챗봇으로부터 답장이 오기 때문에 시간은 그닥 중요하지 않다고 판단하고 구현하지 않았음

4. 다크모드를 적용하지 않도록 수정

- 항상 기본모드로 폰을 사용해서 몰랐는데 다크모드일 때 앱을 접속하면 themes.xml (night)의 테마가 적용되는듯함

- 다크모드를 고려하지 않고 항상 동일한 테마를 제공하기 위해 스플래시.java에 다음 코드를 추가함

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

5. 게시글 삭제 시 관련 댓글, 공감도 DB에서 삭제하도록 코드 추가

- 기존 코드는 글을 삭제했을 때 해당 글의 댓글 데이터를 삭제하는 부분이 없었음

- 따라서 댓글과 오늘 구현한 공감 모두 관련 글이 삭제되면 같이 삭제되도록 구현함

6. 게시글 내용 페이지 드롭다운 메뉴 추가

- 원래는 수정, 삭제 버튼이 글 내용 하단에 있었는데 이것을 드롭다운 메뉴로 변경

7. 익명게시판 게시글 댓글 영역 삭제

- 자유게시판에는 댓글과 공감, 익명게시판에는 공감 기능만 제공할 것이기 때문에 익명게시판 글은 댓글 영역을 안보이도록 setVisibility(View.GONE); 적용

8. 각 페이지의 상단바 통일

- 높이 70dp에 좌측 상단에 뒤로가기 버튼 추가

게시판 공감 기능 구현을 완료하였으니, 댓글 수 출력 이외의 게시판 기능 구현은 모두 완료한 듯 하다!!👍

뭔가 앱다운 앱을 만들고 싶어서 메인 화면에 사이드바를 추가했는데, 생각보다 어렵지 않은 방법이 있어 금방 구현했다.

나중에는 메인 화면 레이아웃을 한번 갈아 엎을 예정이다.

현재 메인 화면은 프로토타입(내가 작성했었음)과 너~~무 똑같아서 좀 단순하달까?? 다채로운 느낌이 들진 않는다.

실제로 출시된 앱들의 메인 화면을 찾아보면서 참고해야겠다!

앱의 기능을 하나씩 구현해나가고, 디자인이 점차 개선되는 것을 보니 뿌듯하다✌