/MaskStockClient

[App] 마스크 재고 알리미 클라이언트 for Android

Primary LanguageJava

MaskStockClient

[App] 국내 온라인 마스크 판매처의 판매 정보를 공개하고, 알림을 보내주는 앱입니다. 또한, 위치 한 곳의 근처 약국의 공적마스크 재고 현황정보 서비스도 제공합니다.


📖 Introduction

이번 프로젝트는 실질적으로 출시되어질 mask Client app과
서버측에서 push를 자동으로 보내주는 mask Server app.
그리고 client 앱의 웹뷰에 보여질 mask Web. 이 세 개를 동시에 진행한 프로젝트입니다.

우선 이 Android App개발을 통해 게릴라, 지정시간 판매 마스크의 정보를 빠르게 제공하고, 공적마스크 정보 또한 알려주는 앱 개발을 목표로 하고 있습니다.

  1. Firebase를 통한 PUSH 기능 구현
  2. 하이브리드 앱 형태로 웹뷰 구현
  3. 웹뷰 내 새로고침 버튼, 홈버튼 구현
  4. 웹뷰에 띄울 웹 구현
  5. 공적마스크 재고 알림을 위한 네이버 MAPS API를 통한 기능 구현


👨‍💻 System requirements

기본적으로 Android Studio에서 JAVA언어 기반으로 개발을 진행합니다. 이를위해 Android Studio 설치가 필수적입니다. 또한 안드로이드 SDK Android 10 / API Level 29 을 타겟으로 개발합니다.


📝 Todo list

제작할 코드와 문서들입니다.

  • [💻] 웹뷰 생성
  • [💻] Firebase 프로젝트 생성 및 연동
  • [💻] 앱 내 Notification 처리 코드 작성
  • [💻] PUSH를 자동으로 보내줄 Server측 구현
  • [💻] 웹뷰 새로고침 버튼, 뒤로가기, 메인화면 이동 버튼 구현
  • [💻] 웹뷰에 띄울 웹 사이트 구현
  • [🔨] 웹 서버 변경을 대비한 link.txt파일 생성
  • [🔨] 애드몹 구현
  • [🔨] 로고제작 및 앱 홍보 이미지 제작
  • [🔒] 안드로이드 플레이스토어 출시


📝 웹뷰 생성

웹뷰는 Chromium 기반으로 생성되어지는 웹뷰를 구현하였습니다.
세부 설정은 아래와 같습니다.



📝 Firebase 프로젝트 생성 및 연동

Firebase의 cloud messaging 기능 사용을 위해 firebase에 새 프로젝트를 생성하고 앱을 등록했습니다.


📝 앱 내 Notification 처리 코드 작성

앱에서 PUSH를 받았을때 어떻게 처리를 할지에 관련된 코드를 작성해 두었습니다.
Push Message에 담겨져있는 title, body, contents, from의 정보를 확인하고 가공하여 사용자의 스마트폰에 Notify합니다. MyFirebaseMessagingService.java.


📝 PUSH를 자동으로 보내줄 Server측 구현

서버측에서는 두가지의 기능이 있습니다.

  1. 온라인 판매처의 페이지를 자동으로 크롤링 하여 재고가 들어오면 알림을 push알림을 보내는 기능
  2. 지정 시간 판매처의 경우 지정된 판매시간 5분~10분전 미리 push알림을 보내는 기능

다른 Repository를 만들었지만 firebase의 server 코드가 포함되어져 있어 private로 설정해 두었습니다. 또한 1번 기능의 경우 robots.txt를 통해 crawling이 가능함을 확인했다 하더라도, 쇼핑몰 페이지의 트래픽 부담과 다른 법적인 문제가 있을것 같아 플레이스토어에 앱을 업로드한 이후에는 작동시키지 않았습니다.


📝 웹뷰 새로고침 버튼, 뒤로가기, 메인화면 이동 버튼 구현


  1. 뒤로가기

뒤로가기 버튼 클릭시 메인화면인지 확인하고 메인화면인 상태에서 뒤로가기를 누르면 로딩창과 함께 전면광고를 띄웁니다.
이후 전면광고가 종료되면 종료할지 계속할지를 묻는 다이얼로그가 나타납니다.

  1. 메인화면 이동 버튼

메인화면 이동 버튼을 클릭하면 어떤 화면에서든 메인 웹사이트 로 이동이 가능합니다.
또한 메인 화면 이동시 전면 광고가 뜨게 됩니다.

  1. 새로고침 버튼

마스크 구매의 과정은 새로고침의 반복과 순발력이 필수라고 할 수 있습니다. 그렇기 때문에 구매하기 버튼 근처에 새로고침 버튼을 배치함으로써 빠른 새 로고침을 가능케하고 '구매'버튼이 떳을때 짧은 이동동선을 가져감으로써 더 빠른 구매를 가능케 돕습니다.






📝 웹뷰에 띄울 웹 사이트 구현

웹뷰에 띄울 웹사이트는 다른 repository를 생성해 두었습니다. 이 repository에서 공적마스크 api와 네이버 maps api사용 코드와 사이트맵등을 확인할 수 있습니다.
MaskStock_web.




📝 웹 서버 변경을 대비한 link.txt파일 생성

앱을 하이브리드 앱 형태로 구상하면서 웹뷰에 띄울 메인 웹을 만들어야 했습니다. 그러나 당시 호스팅하고 있는 웹이 없었고 방법을 찾을 수 없어 임시방편으로 CAFE24의 무료 호스팅을 사용해야겠다고 생각했습니다. 그러나 사용자가 늘어나면 무료호스팅만으로는 부족할것이라 생각했고 앱 업데이트 없이도 외부에서도 메인 웹 주소를 바꿀 수 있도록 구조를 변경했습니다.

기존에 안드로이드 스튜디오 내에서 코드를 통해 첫페이지 주소를 정해놓는데 이 주소를 Git 현재 repository에 link.txt에 남겨둡니다. 그러면 이제 앱에서는 앱을 켰을때 link.txt의 내용을 가져와 그 주소를 메인 주소로 사용하는 것입니다.

나중에는 초기에 쓰던 cafe24의 트래픽 증가와 동시접속자 증가로 인해 다른 호스팅 업체의 무제한 트래픽 플랜을 구매하여 이동했고, link.txt의 수정을 통해 메인 웹 주소를 변경하였습니다.
link.txt.




📝 애드몹 구현

애드몹을 통해 총 3곳에 광고를 송출하였습니다.

  1. 하단 배너


2. 종료 직전 전면광고


  1. 메인 화면 이동시 전면광고




📝 로고제작 및 앱 홍보 이미지 제작



로고





이미지


☁️ 결과물


앱 다운받기


위 이미지 클릭 시 출시한 앱 google playstore로 이동됩니다.