본문 바로가기
토이프로젝트

농산물 실시간 경매 가격 조회앱 출시기 - 농실농실

반응형

최근 코드드림에서는 농산물 실시간 경매 가격 조회 서비스를 개발했습니다.

기획에 참고한 기존 앱들에 광고가 너무 많아(사용이 힘들정도로) 이번에는 광고 없이 앱을 출시하기로 했고, 출시된 앱은 광고 없이 사용이 가능합니다. 앱과 더불어 웹 버전도 개발을 했습니다.

제공되는 기능은 다음과 같습니다. 앱 설치 후 편하게 사용해보세요.

  • 실시간 경매 가격 조회
  • 정산 가격 조회
  • 기간별 정산 가격 통계 조회

 

[Android]

 

농실농실 - 실시간 농산물 가격 조회앱 - Google Play 앱

농산물 실시간 & 정산 가격을 확인해 보세요

play.google.com

 

[iOS]

 

‎농실농실 - 실시간 농산물 가격 조회앱

‎농산물 실시간 가격과 정산/통계 정보를 확인해 보세요. 자주 검색하는 부류/품목/품종을 등록해두고 간편하게 사용할 수 있습니다. ■ 실시간 조회 : 도매시장 실시간 경락 정보를 제공합니

apps.apple.com

 

[웹 버전]

 

농실농실 - 실시간 농산물 가격 조회

실시간 농산물 가격을 확인해 보세요!

nongsil.codedream.co.kr

*웹 버전은 자동 광고가 포함되어 있습니다.

 

농실농실의 앱 기획과 개발 과정을 짧게 소개합니다.

 

기획

개발에 들어가기 앞서 기존 스토어에 자주 사용되는 앱들을 확인했습니다. 주로 사용되는 기능은 실시간 경매가 조회, 정산 가격 조회였습니다. 다만 앞서 언급했듯이 일정 클릭수마다 광고가 조회됐고 사용에 불편함을 많이 느꼈습니다.

조회를 위해 필요한 검색 조건은 도매시장/법인/부류/품목/품종코드로 확인됐습니다.

도매시장 통합홈페이지 OpenAPI

 

모든 데이터는 도매유통정보시스템 공공데이터 Open API를 통해 불러올 수 있었습니다.

실제 앱에 구현된 화면은 도매시장 통합홈페이지의 아래 메뉴와 같습니다.

도매시장 통합홈페이지 실시간 경매현황/비교

 

개발에 필요한 API는 다음과 같이 정리됐습니다.

  • 도매시장 정산 가격 정보
  • 도매시장 실시간 경락 정보
  • 정산가격 기간별 도매시장별 품목별 총물량총금액
  • 도매시장 코드 조회
  • 법인 코드 조회

 

개발

처음 개발 회의에서는 웹 뷰도 언급됐었지만 네이티브와 웹 뷰의 차이를 어느정도 느끼고 있던 탓에 웹/앱을 분리하여 개발하기로 했습니다.

 

Next.js를 사용해 웹을 개발했고, 앱은 Flutter를 사용했습니다.

웹 배포는 Vercel을 사용했습니다. Next.js 호스팅 중에서 무료로는 Vercel 만한게 없는 것 같아요.

 

도매유통정보시스템의 공공데이터 API를 사용하기 위해서는 신청 아이피가 필요했는데 모바일앱에서 다이렉트로 API를 호출해서 사용하는 것은 불가능하다는 답변을 받았습니다. 따라서 API를 호출할 별도의 서버가 필요했고, Vercel은 고정 IP 사용이 불가능해서 API 서버로는 사용이 불가능해보였습니다.

한국농수산식품유통공사 도매시장부의 답변

 

회의 끝에 Spring Boot를 이용해 API 서버를 구축하기로 했고 구축한 서버는 Cafe24의 Tomcat JSP 호스팅을 통해 배포했습니다. 

(하루 1.5GB 웹 트래픽이 허용되는데 5.28기준, 아직까지는 사용에 문제가 없어보입니다)

https://hosting.cafe24.com/?controller=new_product_page&page=language#detail-compare

 

 

이번 프로젝트에서는 기존에 사용해보지 못했던 기능들을 사용해보기로 했습니다.

[앱]

  • 페이지 이동에 go_router 사용하기
  • Riverpod으로 상태 관리하기
  • StatefulWidget 대신 ConsumerStatefulWidget 사용하기 => provider 수신을 위한 ref를 위젯 내의 모든 라이프사이클에서 사용이 가능했습니다.
  • 디렉토리 관리하기 => 화면을 screens로 묶어서 관리하고 provider/service/models 등등 각 기능을 디렉토리로 묶어서 관리했습니다.


[웹]

  • Context API로 전역 상태 관리하기
  • React Hook 제작하여 사용하기(검색, 달력등)
  • 검색에 debounce사용으로 성능 개선하기

 

 

웹 개발이 먼저 진행됐고 웹 디자인을 베이스로 앱 디자인을 맞췄습니다.

농실농실_웹

 

최종적으로 개발된 앱 화면입니다.

 

 

이렇게 또 하나의 프로젝트가 마무리되었습니다.

다음에 더 유익한 프로젝트로 찾아뵙겠습니다.

반응형