☀️ Renewen (팀명: Taiyang)

😊 서비스 소개

• 서비스명: AIoT, LSTM 모델을 활용한 태양광 발전량 예측
• 서비스 설명
  • LSTM 모델을 활용한 태양광 발전량 예측
  • 웹페이지로 실 발전량, 예상 발전량, 기상정보 등 발전소 관리에 용이한 정보 제공
  • IoT 기기로 패널 또는 셀 사진 및 구름 사진을 전송하고 웹페이지에서 확인

📅 프로젝트 기간

2024.02.26 ~ 2024.03.12 (3주)

⭐ 주요 기능

• 로그인/로그아웃/회원가입/회원정보수정
• 발전소 등록/수정/삭제
• 발전소 위치 지도에서 확인
• 발전소별 날씨
• 발전소 현황(예상 발전량/실제 발전량)
• 셀 이미지 확인(셀 상태/센서 데이터)
• 구름형상 이미지 확인
• LSTM모델 소스코드
• Modeling API 소스코드

⛏ 기술스택

⚙ 시스템 아키텍처

📌 회로도

📌 유스케이스 다이어그램

📌 서비스 흐름도

📌 ER다이어그램

📌 LSTM 모델 설계

💻 화면 구성

메인화면

• Renewen 시스템 첫 화면구성

회원가입/로그인/로그아웃/회원정보수정

• 회원가입을 클릭하면 회원 가입할 수 있다.

• 로그인 후 renewen의 다양한 서비스를 사용할 수 있고, 브라우저 위치상 날씨 정보도 확인할 수 있다.

• 개인 정보 수정이 필요할 경우 회원 정보수정 기능을 이용할 수 있다.

발전소 등록

• 발전소 이름, 주소, 상세 주소, 사업자 등록 번호를 입력하면 발전소 등록이 가능하다.

발전소 리스트 수정/삭제

• 등록된 발전소를 리스트를 확인하고, 수정 및 삭제가 가능하다.

• 등록된 발전소는 지도를 통해 확인할 수 있고, 마커를 클릭하면 발전소 정보를 확인할 수 있다.

• 각 발전소별 날씨 정보를 확인할 수 있다.

발전 현황 확인(금일 발전량/금일 발전량 추이)

• 금일 발전량 추이와 실제 금일 발전량을 확인할 수 있다.

발전량 조회

• 등록된 등록소별, 날짜별 발전량을 조회할 수 있고 엑셀 다운로드도 가능하다.

발전소 현황(셀 상태/센서 데이터)

• 등록된 발전소별 셀 상태와 센서 데이터를 확인할 수 있다.

셀 이미지 확인

• 발전소의 발전 셀은 날짜별로 조회 및 이미지 다운로드할 수 있다.

구름형상 이미지 확인

• 발전소와 날짜를 선택하면 당시 구름형상 이미지를 확인할 수 있고, 이미지는 다운로드할 수 있다.

✨ 팀원 역할

이승재	박찬영	박준언	유민지	우리겨레	김현정
Data modeling	DataBase,Full stack	Embedded	Backend	Backend	Frontend
github	github	github	github	github	github

이승재

• 데이터 모델링
• 학습데이터 수집
• 데이터 가공 로직 구현
• 모델링 API 구현
• 데이터 샘플링
• Modeling API 배포
• PPT, 발표
• 기획서, 개요서, 발표집, 폼보드

박찬영

• DataBase,Full stack
• DB 설계, 구축 및 DB 요구사항분석서, 테이블명세 작성
• 리눅스 웹서버, WAS SSL 적용 및 war 배포
• Spring Boot 프로젝트 구축 및 환경설정
• Spring 스케줄링으로 API 호출
• 연동 규격 정의 및 REST API 구축 - IoT 센싱데이터 및 셀 발전량, 촬영 이미지
• 이미지 서버 업로드 및 다운로드 기능
• 금일 발전량 추이, 특정기간 발전량 조회(데이터 조회 및 차트 구현)
• 특정기간 발전량 조회 결과 엑셀 다운로드 기능
• 셀 상태, 발전소 센싱데이터, 기상차트(데이터 조회 및 차트 구현)

박준언

• 임베디드 제작

유민지

• 백엔드
• 회원정보 수정 페이지
• (주소검색API, 위도경도API 사용)발전소 등록 및 수정 페이지
• 발전소 리스트 페이지
• 셀 이미지 페이지
• 구름 형상 이미지 페이지
• 요구사항 정의서
• WBS 및 회의록 작성

우리겨레

• 벡엔드
• 날씨, 지도 오픈 API 호출
• 지도에 발전소 다중 마커 띄우기
• 마커 클릭시 발전소 정보 제공
• 사용자 위치 날씨 제공
• 발전소별 날씨 제공
• 서비스 둘러보기 화면 UI
• 요구사항 정의서 작성
• WBS 및 회의록 작성

김현정

• 프론트엔드
• 상단 로고 이미지 제작
• 금일 발전량 수치화 차트 구현
• 셀 상태별 UI 변화기능 구현
• 발전소 리스트,셀 상태 UI 구성
• 구름형상 페이지 UI구성
• 발전현황 페이지 구현 화면설계서 작성
• PPT

💣 트러블슈팅

● 문제1

Apache 설정 (ssl 인증서 설치된 상태)

가상호스트 및 프록시 설정 (추가 및 수정)

• 경로 : /etc/apache2/sites-enabled/renewen.kr.conf

해결 방안

• 1. Apache 가상호스트 및 프록시 설정
• 2. Permission denied 발생 ⇒ 1024이하 포트 사용하려면 root권한이 필요한데 was(tomcat)에 443 포트로 설정 되어있었기 때문!
• 3. Tomcat server.xml redirectPort 443 => 8443 변경 후 해결 됨

● 문제2

각 발전소별 날씨 정보 제공에 대한 트러블 슈팅

원인

• 1. ${vo.latitude}${vo.longitude}가 HTML의 요소로 인식되지 않음.
• 2. querySelector 메서드에서 호출한 weatherInfoContainer 변수가 null이라는 문제가 발생하여 각 발전소별 날씨 아이콘, 날씨 상태, 기온이 화면에 보이지 않았음.
• 3. 마지막 발전소만 날씨 정보가 나오지 않았음.

해결 방안

• 1. 해당 부분을
     태그로 요소 안에 값을 넣어 줌. 해당 과정을 통해 각 발전소의 위도, 경도 값을 저장하고 JavaScript에서 해당 요소를 찾아서 위도와 경도 값을 찾을 수 있게 함.

${vo.latitude}

${vo.longitude}

• 2. if (weatherInfoContainer) 추가해서 weatherInfoContainer가 null이 아닌지 확인해 줌.

     const weatherInfoContainer = row.querySelector(#weather-info-${index}); if (weatherInfoContainer) { // weatherInfoContainer가 null이 아닌지 확인 const iconElement = weatherInfoContainer.querySelector(".icon"); const descriptionElement = weatherInfoContainer.querySelector(".description"); const temperatureElement = weatherInfoContainer.querySelector(".temperature");

• 3. 마지막 발전소가 출력되지 않은 줄 알았으나 확인해 보니 첫 번째 발전소가 출력되지 않고 있었던 것이었음.

  const weatherInfoContainer = document.querySelector(#weather-info-${index}); 을 const weatherInfoContainer = document.querySelector(#weather-info-${index + 1}); 수정해줌. 그 결과 모든 발전소별 날씨 아이콘, 날씨 상태, 기온이 화면에 나타남.

🏃‍♂️ 발전방향

WEB

• 사업자 번호 API 추가
• 시각화 요소 추가

MODEL

• 모델 고도화로 예측 정확도 향상
• API SERVER 데이터 가공 로직 간소화

EMBEDED

• 모든 기상인자 직접 수집하는 방향
• 구름형상 이미지를 전운량값으로 변환하는 비전인식 적용
• 발전소 별 예측값의 정확도와 기상인자의 정확도 상승시키는 방향