HEC-FE 🦆

[Han River Ecology Collect] Front-End

🦆 한강 생태모아 Front-End

서울의 공원 (https://parks.seoul.go.kr/) 에서 제공하는 한강생태지도의 한강 생태를 기준으로 도감을 구성하였습니다.

🦆 프로젝트 개요

“한강 생태모아”는 어린이들을 대상으로 한 환경 교육과 동시에 생태 도감 기능을 제공하는 애플리케이션입니다.

• ‘AI 기반 객체 인식 기능’은 사진을 찍은 후 AI기반 Classification기능을 활용하여 한강 지역의 곤충, 포유류, 식물 등의 생물을 식별하고 정보를 제공합니다.
• ‘도감 기능’은 사용자가 찍은 사진들을 저장하고, 생물의 도감을 자동으로 생성합니다. 도감에는 찍은 날짜, 위치, 생물의 이름 및 정보 등이 포함됩니다.
• ‘자랑하기 기능’은 사용자들은 도감에 저장된 사진을 손쉽게 앱 내의 SNS에 공유하고, 다른 사용자들과 경쟁하며 도감을 채워나갈 수 있도록 합니다. 이러한 한강 생태 도감 앱을 통해 어린이들에게 다양한 생물이 공존하는 한강 생태교육을 하고, 한강의 생태를 사랑하는 사람들에게 즐거움을 주고자 하였습니다.

📌 기능 구성

1. 자랑하기
2. AI로 생태 분석
3. 도감
4. 마이페이지

📌 사용한 Dart Package

1. image_picker : image_picker를 사용하여 AI 분석 화면 중 갤러리에서 사진을 가져왔습니다.
2. http : http를 사용하여 json 형태의 도감 데이터를 가져왔습니다.
3. get : get을 사용하여 페이지 이동을 구현하였습니다.

📌 UI

✅ 로그인 화면

카카오톡 로그인 화면

✅ AI 분석 화면

사진 선택	갤러리 사진 가져오기	AI 분석 성공할 경우

AI 분석 실패할 경우	시간 및 날짜 선택	도감에 저장하기

✅ 도감 화면

도감 목록	생태 종류별 화면	도감 상세화면

자랑하기 글쓰기	자랑하기 글쓰기

✅ 자랑하기 화면

자랑하기	자랑하기 상세화면

✅ 마이페이지 화면

마이페이지	내 정보 수정	닉네임 변경

로그아웃	탈퇴하기	탈퇴하기

📌 시연 영상