8월의 주요 개발 목표는 다음과 같았다.

  • 테스트 결과 게시판 기능 제한
  • 교화 프로그램 시청 (마음 채우기 = 유튜브 영상 시청)
  • 알림 기능 추가
  • 기타 레이아웃 보완 및 디버깅

 


 

테스트 결과 기능 제한

학교폭력 진단테스트 결과를 바탕으로 마음 온도를 산출한다.

마음 온도가 낮은 사용자는 학교폭력 관련 영상 (교화 프로그램) 시청을 통해 마음 온도를 높이고

60점 이상을 달성해야 게시판 기능을 이용할 수 있게 제한하도록 구현했다.

 

 

테스트 결과 가해 정도에 따라 마음 온도가 산출되는데

이때 마음 온도가 60점 보다 낮으면 마음 채우기 안내 페이지로 이동하며

60점 이상을 달성하기 전까진 게시판 접근이 제한된다.

 

 

교화 프로그램 시청 (마음 채우기)

 

유튜브에 있는 학교폭력 영상을 앱 안에서 시청할 수 있도록 YouTube API를 활용하여 기능을 구현했다.

유튜브 썸네일은 YouTubeThumbnailView를 이용했고 각 영상의 제목, 설명, 시청 여부를 함께 표시한다.

전체 영상 개수와 시청한 영상 개수도 상단에 표시했다.

 

(YouTubeThumbnailView 공식 문서 : https://developers.google.cn/youtube/android/player/reference/com/google/android/youtube/player/YouTubeThumbnailView.html?hl=ko

 

YouTubeThumbnailView  |  YouTube for Android  |  Google Developers

Javadoc API documentation for YouTube Android Player API.

developers.google.cn

 

영상 목록도 진단테스트와 마찬가지로 ListView를 이용하여 Adapter 패턴을 적용했다.

 

 

영상 시청 화면으로 이동하면 유튜브 영상 플레이어와 (YouTubePlayerView 이용) 누적 시청 시간을 나타내는 seekbar을 확인할 수 있다.

 

영상 시청 시간을 체크하도록 구현하는 부분이 생각보다 어려웠는데

단순히 현재의 영상 타임라인을 구하는 것은 쉽지만만약 제대로 시청하지 않고 타임라인을 건너뛰어서 영상의 맨 뒤로 이동하면 그것을 알 수 있는 방법이 없었기 때문이다.

 

 

따라서 나는 스레드를 이용해서 직접 이 코드를 구현했다.

 

영상 시청 화면 액티비티는 YouTubeBaseActivity를 상속받았고YoutubePlayerView에 setPlaybackEventListener, setPlayerStateChangeListener를 설정하여영상 재생 상태와 사용자로 인한 이벤트에 대한 처리를 할 수 있었다.

 

👇

 

 

GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱 - GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

github.com

 

이것과 스레드를 이용해서 만든 누적 시청 시간 카운터를 연결했다.카운터는 1초에 1번씩 영상 재생 상태를 확인하여 누적 시간을 카운트한다.

 

👇

 

 

GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱 - GitHub - askges20/Maeumi: 2021 한이음 ICT 멘토링 프로젝트 [21_HF114] : Android Studio 앱

github.com

 

최대한 YouTube API 자체에서 제공하는 메소드를 활용하고 싶었는데

이 부분은 아무리 구글링해봐도 실제 누적 시청 시간을 구하는 코드가 없는 것 같았다.

 

(혹시나 저와 같은 어려움을 겪고 있는 개발자분이 있으시다면 제 코드를 참고해보시길...!)

 

 

 

그렇게 정직하게 영상을 끝까지 시청해야만 마음 온도가 5점씩 오르고,

60점을 달성하면 위와 같은 팝업창으로 사용자에게 기능 해제를 알리도록 구현했다.

 

 

게시판 카테고리 세분화

기존 게시판은 자유게시판과 익명게시판으로 나뉘어져서 익명게시판은 댓글이 없다는 점에서 차이가 있었다.

그런데 이렇게 게시판을 나누는 것은 사용자 입장에서 큰 의미가 없을 것 같아서

게시판을 어떻게 수정할까 고민하다가 카테고리를 조금 더 늘리기로 했다.

 

 

질문, 꿀팁 게시판이 추가되어 게시판 카테고리가 총 4개로 늘었다.

원래는 마음 온도에 따라 기능 제한을 할 때 일부 카테고리만 제한 or 댓글 작성만 제한하는 것으로 얘기를 했었는데

다시 회의를 거쳐서 기능 제한 시에는 게시판 자체를 접근하지 못하는 것으로 계획을 변경했다.

 

그게 개발자 입장에서 구현할 때 가장 편한 방법이기도 하고

사용자 입장에서 댓글을 달지 못하더라도 게시글 내용을 확인할 수 있으면

기능 제한을 해제하기 위해 마음 채우기 기능을 이용하고 싶다는 동기부여가 되지 않을 것 같았기 때문이다.

 

 

알림 기능

앱이 전체적으로 정적이라는 생각이 들어서, 어떻게 하면 동적으로 만들 수 있을까 고민해보니

기능 제한 또는 내 게시글에 새로운 댓글이 추가되었다는 것을 알리는 알림 기능의 구현이 필요해보였다.

 

 

회원가입 / 댓글 달렸을 때 / 마음 온도 60점 달성 시 알림이 추가되도록 했고

알림을 길게 누르면 개별 알림 삭제가 가능하도록 했다.

 

 

기타 개선 사항

  • 일기장, 게시판에 등록된 이미지 확대 기능 (image-zoom-view 라이브러리 활용)
  • 게시판 레이아웃 보완, 유효성 검사
  • 디버깅 및 오류 픽스 (댓글 알림을 클릭해서 해당 게시글로 이동했을 때 DB에서 공감 수를 제대로 받아오지 못하는 현상 해결 등)

 


 

8월 개발 일지 목록

  • 8/1 ~ 8/2 (로딩 화면 DB 데이터 조회 문제 해결, 챗봇에서 일기장으로 이동)
 

2021.08.01 - 08.02 개발 일지 (로딩 화면 DB 데이터 조회 문제 해결, 챗봇에서 일기장으로 이동)

1. 로딩 화면(스플래시 화면)에서 firebase DB 데이터 불러오는 문제 해결 - 스레드의 run 메소드 안에 DB 조회 코드가 들어있던 것이 문제... 스레드 밖으로 해당 코드를 뺐더니 해결! - 하지만 지금은

askges20.tistory.com

 

  • 8/6 (마음 온도 산출, 마음 채우기 안내, 메인화면 디자인 보완)
 

2021.08.06 개발 일지 (마음 온도 산출, 마음 채우기 안내, 메인화면 디자인 보완)

테스트 결과를 바탕으로 마음 온도를 산출하고, 마음 채우기 페이지를 안내하는 것을 중점적으로 구현했다!!😎 1. 테스트 결과 확인 후 마음 온도 DB에 저장 2. 테스트 결과 화면에 "마음 채우기

askges20.tistory.com

 

  • 8/8 (YouTube API 적용 완료, 챗봇 링크 활성화, 게시판 카테고리 세분화, 게시판 기능 제한)
 

2021.08.08 개발 일지 (YouTube API 적용 완료, 챗봇 링크 활성화, 게시판 카테고리 세분화, 게시판 기능

회의 내용 오늘 오전 9시에 회의에서 마음 채우기 프로그램의 영상 개수, 마음 온도 높이는 기준과 게시판에 대해 얘기했다. 교화 프로그램(마음 채우기)에서 제공할 영상의 개수는 10개, 사용자

askges20.tistory.com

 

  • 8/9 ~ 8/10 (마음 채우기 유튜브 영상 시청 기능)
 

2021.08.09 - 08.10 개발 일지 (마음 채우기 유튜브 영상 시청 기능)

안드로이드 스튜디오에서 YouTube API를 이용하여 유튜브 영상을 앱 화면에 띄우는 것은 어제 완료했었다. 오늘은 본격적으로 마음 채우기 (영상 시청) 기능을 구현했다. 구현하면서 고려한 점 1.

askges20.tistory.com

 

  • 8/12 ~ 8/13 (에뮬레이션 이용, 마음 채우기 팝업 추가, 화면 회전 방지)
 

2021.08.12 - 08.13 개발 일지 (에뮬레이션 이용, 마음 채우기 팝업 추가, 화면 회전 방지)

며칠 전에 YouTube API 연결을 시도할 때만 해도 갈 길이 멀다고 생각했는데 생각보다 빠른 기간 안에 기능을 거의 다 구현한 듯 하다. 오늘은 주로 영상 시청 관련 디테일을 추가하고, 디버깅을 하

askges20.tistory.com

 

  • 8/14 ~ 8/15 (게시판 레이아웃 보완, 유효성 검사, image-zoom-view 적용)
 

2021.08.14 - 08.15 개발 일지 (게시판 레이아웃 보완, 유효성 검사, image-zoom-view 적용)

앱에서 제공할 기능들은 다 완성한 상태라 이제 앱 전반적인 레이아웃과 디자인만 보완하면 될 듯 하다. 그래서 오늘은 게시판 레이아웃을 전체적으로 손보고 유효성 검사를 추가했다. 개발 내

askges20.tistory.com

 

  • 8/16 ~ 8/17 (알림 기능 추가)
 

2021.08.16 - 08.17 개발 일지 (알림 기능 추가)

앱에서 게시판이라는 커뮤니티 기능을 제공해서 글을 작성하고 댓글로 소통할 수 있긴 하지만 어딘가 정적이라는 느낌이 들어서 해결 방법을 여러가지 생각해보았고 그 결과 알림 기능을 추가

askges20.tistory.com

 

이 외에도 앱 레이아웃 개선 등을 했는데 자잘한 오류를 픽스하는 과정이라 개발 일지는 따로 작성하지 않았다.

 


 

한이음 공모전 참가

8월 30일까지 한이음 공모전 참가 서류를 제출해야해서 8월 중순부터 말까지는 계속 개발보고서와 제작설계서를 작성했다.

7월 중간점검때 제출하기 위해 중간보고서를 한번 작성하긴 했지만

7~8월에 워낙 많은 기능을 구현했다보니 추가 작성해야할 내용이 꽤 많았다.

팀원 모두 열심히 작성한 덕분에 마감일로부터 4일 전인 8월 26일에 접수 완료😎

 

 

9월 이후 계획

이제 기능 자체는 구현이 모두 완료되었으니, 주변 지인들에게 배포하여 사용자 테스트를 진행하며 피드백을 받아보려 한다.

몇 달간 개발을 하다보니 이미 메인화면, 기타 화면의 UI에 너무 익숙해졌다...

사용자 테스트를 통해 앱을 아예 처음 접하는 사용자가 객관적으로 평가를 해줄 필요성을 느꼈다.

UI/UX를 개선해서 2차 공모전 접수 시 시연 영상을 촬영할 수 있도록 해야겠다.

 

추가로 2학기에 교내에서 진행하는 비교과 프로그램에도 참가할 예정이다.

1학기 비교과 프로그램에서 시작한 프로젝트인데 이렇게 개발을 거의 마무리하고 공모전에 참가하게 되다니ㅎㅎ

비교과 프로그램에서 두 차례에 걸쳐 공모전 참가 관련 컨설팅도 해준다고 하니 도움이 될 것이라고 기대한다.

 

막학기에 취준도 하면서, 한이음 프로젝트도 끝까지 열심히 참여해서 이번 학기에 마무리하자 파이팅!😉

여름방학 기간에 집중적으로 마음이 앱 개발을 진행했다!

앱 개발 기획 시 생각했던 주요 기능은 AI 상담 채팅, 진단테스트, 일기장, 게시판이 있었고

7월에 해당 기능들을 모두 구현했다.

 

또한 한이음 중간점검 보고서 제출 마감일이 7월 19일까지라서 중간보고서와 제작설계서를 작성했었다.

 


 

게시판

6월에 게시판 레이아웃 틀을 잡고 게시글 등록 기능을 구현했었고

7월에는 다음과 같은 기능들을 구현하여 게시판 개발을 마무리했다.

  • 게시글 수정/삭제 기능
  • 댓글 등록/삭제 기능
  • 공감 기능
  • 댓글 수, 공감 수 출력

 

현재 게시판은 자유게시판과 익명게시판으로 나뉜다.

추후에 진단테스트 결과에 따라 마음 온도가 낮게 나온 사용자에 대해 게시판 기능 제한을 둘 예정인데

게시판의 분류가 애매하다는 생각이 들어서 어떻게 변경할지 고민할 필요가 있었다.

 

게시글 목록과 글 내용 페이지

 

진단테스트

진단테스트 문항은 JSON 파일에 저장해놓고, parsing하여 화면에 출력하도록 했다.

게시판과 마찬가지로 RecyclerView를 이용해서 구현하였는데

 

처음 구현하고 나서 테스트를 해보니 사용자가 선택한 응답의 체크 표시가 사라지고,

응답하지 않은 문항에 체크가 되어있는 이상한 현상이 있었다.

 

다행히도 이러한 현상에 대해 다룬 포스팅을 찾을 수 있었다.

https://kawaiineko.tistory.com/19

 

[android] Listview Checkbox 스크롤 후 체크 이상현상 해결법

안드로이드 개발은 쉬우면서도 어렵다. 이게 무슨 개소리냐면 머리로 구상한대로만 진행된다면 정말 그 어떤 코딩보다도 쉬운데 구상한대로 진행하다보면 꼭 생각지도 못한 문제가 발생한다.

kawaiineko.tistory.com

 

RecyclerView의 재사용 처리로 인해 이러한 현상이 발생하는 것이라고 한다.

체크한 응답이 코드상에서 저장은 되는데, 화면에 출력될 때 이상하게 나오는거라

화면에 선택했던 응답에 체크 표시를 하도록 코드를 추가함으로써 해결할 수 있었다.

 

테스트 진행 화면과 결과 화면

 

AI 상담 채팅

앱의 핵심 기능이라고 할 수 있는 AI 상담 채팅 기능!

학교폭력 관련 앱이므로 앱 이용자와 전문가가 직접 상담을 할 수 있다면 좋겠지만 지금 우리가 구현하긴 힘들다고 생각되어

이것의 대체 방안으로 AI 학교폭력 상담 채팅 기능을 제공하기로 한 것이다.

 

Google Dialogflow 챗봇 API를 이용하여 기능 구현을 했는데

구글 서비스 계정에서 문제가 여러 차례 발생하여 Android Studio와 연동하기까지 많은 어려움이 있었다.

지금은 다행히 해당 문제를 해결하여 연동이 완료되었고

앱에서 Dialogflow에 채팅을 전송하고, 응답을 받는 코드 구현 방법을 유튜브에서 찾을 수 있어서 쉽게 구현했다.

 

다만, 원래 Dialogflow는 Custom payload를 이용하여 카드 형식으로 Dialogflow에 보낼 채팅을 선택할 수 있었는데

앱으로 구현할 땐 그러한 응답 형식을 구현할 수 없었다.

사용자가 메세지를 1개 보내면 그에 대한 챗봇 응답 1개만 텍스트 형식으로 받을 수 있는 로직이었기 때문이다.

따라서 웰컴 메세지 (채팅을 시작할 때 첫 메세지) 를 추가하여 사용자에게 예상 질문 목록을 보여주는 것으로 보완했다.

 

채팅 내역은 Firebase DB에 저장하고 불러오도록 코드를 작성하였으며

채팅 내역 전체 삭제 기능을 추가하여 편하게 웰컴 메세지를 다시 확인할 수 있도록 하였다.

 

채팅 화면, 웰컴 메세지, 채팅 내역 전체 삭제 기능

 

기타 개발

  • 사이드바 추가 (Navigation Drawer 이용)
  • 로그아웃 기능 추가 (Firebase Authentication 이용)
  • 앱 디자인 개선

 

8월에는 진단테스트 결과에 따른 기능 제한과 마음 채우기 (영상 시청) 기능 구현을 주 목표로 할 것이고

그 외 앱의 디자인 개선과 각 기능의 완성도를 높이기 위해 다양한 방법을 생각해보아야겠다.

 


 

7월 개발 일지 목록

  • 7/1 (게시글 수정/삭제, 댓글 등록/조회 기능 구현)
 

2021.07.01 개발 일지 (게시글 수정/삭제, 댓글 등록/조회)

1. 게시글 내용 페이지 - 게시글 목록 불러오는 것까지 구현했었는데 이제 각 게시물 카드를 터치했을 때 게시글 세부 내용을 확인하는 페이지로 이동하도록 추가함 2. 게시글 수정 및 삭제 - 작

askges20.tistory.com

 

  • 7/2 (댓글 목록 레이아웃 수정, 댓글 삭제 기능 추가)
 

2021.07.02 개발 일지 (데이터 중복 출력 오류 해결, 댓글 삭제 기능)

1. 댓글 목록 ListView height 조절 - ScrollView 안에 모든 요소를 넣고 그 중에서 ListView가 있는 구조인데 ListView만 스크롤이 되고 전체 ScrollView는 스크롤이 되지 않는 상태였음 - ListView의 각 item들..

askges20.tistory.com

 

  • 7/4 (Android Studio - Firebase 다시 연결)
 

2021.07.04 개발 일지 (Android Studio - Firebase DB 다시 연결)

새로운 Firebase 프로젝트 DB와 안드로이드 스튜디오 연결하기 오늘은 회의가 있는 날이었다. 일기장, 게시판 주요 기능 구현은 거의 다 마친 상태에서 앞으로 구현해야할 기능들에 대해 얘기를 나

askges20.tistory.com

 

  • 7/10 (상담 채팅 레이아웃 구성, 로그인 유지 구현, 마이페이지 사용자 정보 출력)
 

2021.07.10 개발 일지 (1:1 상담 레이아웃 구성, 로그인 유지, 마이페이지 사용자 정보 출력)

1. 1:1 상담 채팅(dialogflow) - 앱 내의 레이아웃 구현 - https://www.youtube.com/watch?v=zVxDBBCdpfY 이 영상에 나온 방법대로 구현 - 메세지 전송 시 화면에 해당 메세지가 출력되는 상태 - 현재 dialo..

askges20.tistory.com

 

  • 7/11 ~ 7/12 (게시판 사용자 아이디 출력, 앱 테마 및 디자인 개선, 진단테스트 기능 구현)
 

2021.7.11 - 7.12 개발 일지 (게시판에 사용자 아이디 반영, 앱 테마 및 디자인 개선, 진단테스트 기능

새벽 시간에 완전 집중해서 개발했다!! 덕분에 많은 진전이 있었다. 슬슬 앱의 디자인적인 요소를 신경써야할거 같아서 폰트나 테마를 수정해봤고 주요 기능인 진단테스트 구현을 하루만에 거

askges20.tistory.com

 

  • 7/13 (Android Studio - Dialogflow 연결 완료, 채팅 내역 Firebase DB에 저장, 불러오기)
 

2021.07.13 개발 일지 (Android Studio - Dialogflow 연결 완료)

1. 게시글 작성 페이지 레이아웃 수정 2. Dialogflow - Android Studio 연결 완료 3. 1:1 상담 채팅 내역 Firebase DB 저장 4. 1:1 상담 채팅 내역 Firebase DB에서 읽어오고 화면에 띄우기 어제는 정말 감격스러..

askges20.tistory.com

 

  • 7/14 ~ 7/15 (Firebase Authentication 로그아웃 기능 구현)
 

2021.07.14 - 7.15 개발 일지 (로그아웃 기능 구현)

1. 로그아웃 기능 추가 - 마이페이지에 로그아웃 버튼 추가 - 파이어베이스 Authentication에서 로그아웃 필요 FirebaseAuth.getInstance().signOut(); - 로그아웃을 진행하면 기존에 실행되던 액티비티를 모두

askges20.tistory.com

 

  • 7/19 (게시판 공감 기능 추가, 사이드바 추가, 채팅 날짜 출력)
 

2021.07.19 개발 일지 (게시판 공감 기능 추가, 사이드바 구현, 채팅 날짜 표시)

일주일 전에 정보처리기사 실기 시험 보고나서 한동안 아무 의욕 없이 지내다가 오늘에서야 다시 의욕이 되돌아온듯 하다. 그동안 많이 쉰만큼 오늘은 12시간동안 빡세게 개발했지!⭐🤸‍♀️

askges20.tistory.com

 

  • 7/24 (게시판 댓글 개수 출력, 익명게시판 댓글 영역 삭제)
 

2021.07.24 개발 일지 (댓글 개수 표시, 익명게시판 댓글 영역 제거)

1. 자유게시판 댓글 개수 표시 - 공감 개수 표시는 지난번에 구현 완료했었고 이번에 댓글 개수 표시까지 완료함 2. 익명게시판 목록에서 댓글 개수 표시X, 글 내용 페이지에서 댓글 영역 제거 3.

askges20.tistory.com

 

  • 7/29 (진단테스트 결과 내용 추가, 채팅 전체 삭제 기능 구현, 채팅 웰컴 메세지 출력)
 

2021.07.29 개발 일지 (진단테스트 결과 상세 내용, 채팅 전체 삭제, 채팅 웰컴 메세지 추가)

1. 진단테스트 결과 출력 - 테스트 점수에 따라 피해, 가해 정도를 [아주 약함 / 약함 / 보통 / 심함 / 아주 심함]으로 분류하여 상세 진단 내용 출력 - 프로그레스바로 최대 점수 중 몇 점을 차지했

askges20.tistory.com

 

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

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

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

 

알림을 추가하는 경우는 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를 이용해서 영상 시청 기능을 제공하고,

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

+ Recent posts