IAMMETER 에너지 대시보드를 5분 안에 직접 구축하기

많은 IAMMETER 사용자들은 결국 자신의 모니터링 인터페이스를 커스터마이징하고 싶어 합니다. 예를 들어:

모니터링 대시보드에 회사 로고를 추가하여 프레젠테이션이나 고객 프로젝트에 활용
유효 전력, 무효 전력 또는 전류와 같은 특정 파라미터만 표시
에너지 데이터를 표현하기 위한 더 시각적으로 매력적인 차트 생성
여러 IAMMETER 미터를 모니터링하는 대형 화면 에너지 모니터링 대시보드 구축
자체 시스템을 위한 맞춤형 태양광 및 에너지 모니터링 인터페이스 제작

이러한 커스터마이징 요구를 지원하기 위해 IAMMETER는 오픈소스 프로젝트를 출시했습니다:

👉 /newsshow/iammeter-app-store-launched

이 프로젝트는 IAMMETER API 및 로컬 인터페이스를 기반으로 구축되어, 사용자가 자신만의 애플리케이션을 개발할 수 있도록 합니다.

과거에는 이러한 커스터마이징에 프로그래밍 지식이 필요했습니다.

하지만 이제 AI의 도움으로 상황이 달라졌습니다.

개발자가 아니더라도 불과 몇 분 만에 자신만의 IAMMETER Static App 에너지 대시보드를 구축할 수 있습니다.

video tutorial

AI로 IAMMETER 대시보드 구축하기

먼저 IAMMETER GPT 어시스턴트를 열어보세요:

https://chatgpt.com/g/g-68e9cc3b83408191901b66b524ba5373-iammeter-assistant

그런 다음 다음과 같이 요청하기만 하면 됩니다:

please give me a static app, monitor the power value of the single phase meter. let me configure the IP and refresh interval in this dashboard.

다음과 같은 모든 요구사항을 직접 설명할 수 있습니다:

무효 전력(Reactive Power) 모니터링
NEM(순 에너지 측정) 판독값 표시
전문적인 태양광 모니터링 대시보드 생성
대화형 차트 추가
여러 IAMMETER 미터 모니터링

요청에 "static app" 또는 "dashboard" 키워드가 포함되어 있으면, IAMMETER GPT 어시스턴트는 Static App을 생성하려는 것을 이해합니다.

그러면 어시스턴트가 완전한 HTML 기반 에너지 모니터링 대시보드를 생성합니다.

생성된 대시보드 미리보기

다음은 IAMMETER GPT 어시스턴트와의 대화 예시입니다.

AI를 사용하여 정적 에너지 모니터링 대시보드를 생성하는 IAMMETER GPT 어시스턴트

인터페이스에서 생성된 Static App을 바로 미리 볼 수 있습니다.

변경이 필요하면 대화를 이어가며 AI에게 수정을 요청하기만 하면 됩니다.

Static App 다운로드 및 실행

생성된 대시보드가 마음에 들면:

다운로드를 클릭하세요
생성된 HTML 파일을 저장하세요
브라우저에서 로컬로 열어보세요

브라우저에서 로컬로 실행되는 IAMMETER 정적 HTML 대시보드(에너지 모니터링)

설치가 필요 없습니다.

IAMMETER Static App이 필요한 이유

Static App은 매우 간단하면서도 강력합니다.

서버 불필요
설치 불필요
단 하나의 HTML 파일만 있으면 됩니다
모든 최신 브라우저에서 작동

따라서 Static App은 다음과 같은 용도에 이상적입니다:

에너지 모니터링 대시보드
태양광 모니터링 대시보드
전기 사용량 시각화
다중 미터 모니터링 화면

AI의 도움으로 맞춤형 대시보드 구축의 장벽은 사실상 사라졌습니다.

이제 한계는 여러분의 상상력뿐입니다.

예시: 간단한 IAMMETER Static Dashboard

다음은 Static App이 IAMMETER 미터에서 데이터를 읽을 수 있는 방법을 보여주는 간단한 예시입니다.

<!DOCTYPE html>
<html>
<head>
<title>IAMMETER Power Monitor</title>
</head>

<body>

<h2>IAMMETER Power Dashboard</h2>

Power: <span id="power">loading...</span> W

<script>

const meterIP = "192.168.1.6";

function updatePower(){

fetch(`http://${meterIP}/monitorjson`)
.then(res=>res.json())
.then(data=>{
document.getElementById("power").innerText=data.Data[0].P;
});

}

setInterval(updatePower,3000);
updatePower();

</script>

</body>
</html>

AI의 도움을 받으면 이를 쉽게 차트와 여러 미터를 갖춘 완전한 에너지 모니터링 대시보드로 확장할 수 있습니다.