데이터에서 그래프까지: 라즈베리 파이로 Flask-SQLite IoT 대시보드 구축

1. 소개

이전 튜토리얼 Python WebServer With Flask and Raspberry Pi에서 센서 데이터를 웹 프론트엔드로 노출하는 법을 배웠습니다. 다음 논리적 단계는 해당 측정값을 영구 저장해 나중에 분석 가능하게 만드는 것입니다.

2. 부품 목록

• 라즈베리 파이 3 - $32.00
• DHT22 온습도 센서 - $9.95
• 4.7kΩ 풀업 저항

3. SQLite 설치

SQLite는 싱글보드 컴퓨터에 이상적인 데이터베이스 엔진입니다: 서버리스, 경량, 완전 오픈소스.

sudo apt-get install sqlite3

작업 디렉토리와 데이터베이스 파일 생성:

mkdir Sensors_Database
cd Sensors_Database
sqlite3 sensorsData.db

SQLite 프롬프트에서 .quit으로 빠져나오면 쉘로 돌아옵니다.

4. DHT 테이블 생성

DHT_data 테이블은 타임스탬프, 온도, 습도를 저장합니다.

sqlite3 sensorsData.db
BEGIN;
CREATE TABLE DHT_data (timestamp DATETIME, temp NUMERIC, hum NUMERIC);
COMMIT;

파이썬으로도 가능:

import sqlite3
con = sqlite3.connect('sensorsData.db')
with con:
    cur = con.cursor()
    cur.execute('DROP TABLE IF EXISTS DHT_data')
    cur.execute('CREATE TABLE DHT_data(timestamp DATETIME, temp NUMERIC, hum NUMERIC)')

5. 샘플 데이터 삽입

SQLite 직접 삽입:

INSERT INTO DHT_data VALUES(datetime('now'), 20.5, 30);

파이썬 벌크 삽입:

with con:
    cur.execute("INSERT INTO DHT_data VALUES(datetime('now'), 20.5, 30)")
    cur.execute("INSERT INTO DHT_data VALUES(datetime('now'), 25.8, 40)")
    cur.execute("INSERT INTO DHT_data VALUES(datetime('now'), 30.3, 50)")

6. DHT22 배선

VCC → 3.3V, Data → GPIO 16, GND → 그라운드, VCC와 Data 사이에 4.7kΩ 풀업 저항 연결.

7. Adafruit DHT 라이브러리 설치

GitHub에서 다운로드 후 설치:

sudo python3 setup.py install

8. 데이터 읽기 및 로깅

센서 읽기, 값 반올림, 데이터베이스 기록하는 최소 스크립트:

import time
import sqlite3
import Adafruit_DHT

DB_NAME = 'sensorsData.db'
SAMPLE_FREQ = 120  # 초
DHT_SENSOR = Adafruit_DHT.DHT22
DHT_PIN = 16

def read_and_log():
    humidity, temperature = Adafruit_DHT.read_retry(DHT_SENSOR, DHT_PIN)
    if humidity is not None and temperature is not None:
        humidity = round(humidity)
        temperature = round(temperature, 1)
        conn = sqlite3.connect(DB_NAME)
        cur = conn.cursor()
        cur.execute("INSERT INTO DHT_data VALUES(datetime('now'), ?, ?)", (temperature, humidity))
        conn.commit()
        conn.close()

for _ in range(3):
    read_and_log()
    time.sleep(SAMPLE_FREQ)

9. 지속적 로깅

실시간 로거용, 전용 터미널에서 실행. 매분 샘플 채취:

import time, sqlite3, Adafruit_DHT
DB = 'sensorsData.db'
SAMPLE_FREQ = 60
while True:
    humidity, temperature = Adafruit_DHT.read_retry(Adafruit_DHT.DHT22, 16)
    if humidity is not None and temperature is not None:
        conn = sqlite3.connect(DB)
        cur = conn.cursor()
        cur.execute("INSERT INTO DHT_data VALUES(datetime('now'), ?, ?)", (round(temperature,1), round(humidity)))
        conn.commit()
        conn.close()
    time.sleep(SAMPLE_FREQ)

10. 데이터베이스 쿼리

대표적 쿼리:

• 전체 행: SELECT * FROM DHT_data
• 최신 항목: SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1
• 온도 > 30°C: SELECT * FROM DHT_data WHERE temp > 30
• 습도 = 29%: SELECT * FROM DHT_data WHERE hum = 29

11. Flask 웹 서버

Flask 설치: sudo apt-get install python3-flask. 프로젝트 구조 생성:

mkdir dhtWebServer
cd dhtWebServer
mkdir templates static

appDhtWebServer.py:

from flask import Flask, render_template
import sqlite3

app = Flask(__name__)

def fetch_latest():
    conn = sqlite3.connect('../sensorsData.db')
    cur = conn.cursor()
    cur.execute('SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1')
    row = cur.fetchone()
    conn.close()
    return row

@app.route('/')
def index():
    time, temp, hum = fetch_latest()
    return render_template('index.html', time=time, temp=temp, hum=hum)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80, debug=False)

템플릿 templates/index.html:

<!DOCTYPE html>
<html>
<head>
<title>DHT Sensor Dashboard</title>
<link rel='stylesheet' href='../static/style.css'>
</head>
<body>
<h1>DHT Sensor Data</h1>
<p>Temperature: {{ temp }} °C</p>
<p>Humidity: {{ hum }} %</p>
<p>Last reading: {{ time }}</p>
<a href='/' class='button'>Refresh</a>
</body>
</html>

12. 게이지로 프론트엔드 강화

JustGage 다운로드 후 justgage.js, raphael-2.1.4.min.js를 static에 배치. 템플릿 업데이트로 애니메이션 게이지 렌더링:

<div id='g1'></div>
<div id='g2'></div>
<script src='../static/raphael-2.1.4.min.js'></script>
<script src='../static/justgage.js'></script>
<script>
new JustGage({id:'g1', value:{{ temp }}, min:-10, max:50, title:'Temperature', label:'°C'});
new JustGage({id:'g2', value:{{ hum }}, min:0, max:100, title:'Humidity', label:'%'});
</script>

13. Matplotlib으로 이력 그래프

Matplotlib 설치: sudo apt-get install python3-matplotlib. 실시간 생성 PNG 이미지 서빙하는 새 Flask 앱 appDhtWebHist.py 생성:

from flask import Flask, render_template, make_response
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
import sqlite3, io

app = Flask(__name__)
DB = '../sensorsData.db'

def get_latest():
    conn = sqlite3.connect(DB)
    cur = conn.cursor()
    cur.execute('SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT 1')
    row = cur.fetchone()
    conn.close()
    return row

def get_history(samples):
    conn = sqlite3.connect(DB)
    cur = conn.cursor()
    cur.execute('SELECT * FROM DHT_data ORDER BY timestamp DESC LIMIT ?', (samples,))
    rows = cur.fetchall()
    conn.close()
    rows.reverse()  # 시간순 정렬
    times, temps, hums = zip(*rows)
    return times, temps, hums

@app.route('/')
def index():
    time, temp, hum = get_latest()
    return render_template('index.html', time=time, temp=temp, hum=hum, samples=100)

@app.route('/plot/temp')
def plot_temp():
    times, temps, _ = get_history(100)
    fig = Figure()
    ax = fig.add_subplot(1,1,1)
    ax.plot(range(len(temps)), temps)
    ax.set_title('Temperature (°C)')
    canvas = FigureCanvas(fig)
    output = io.BytesIO()
    canvas.print_png(output)
    return make_response(output.getvalue(), 200, {'Content-Type':'image/png'})

@app.route('/plot/hum')
def plot_hum():
    _, _, hums = get_history(100)
    fig = Figure()
    ax = fig.add_subplot(1,1,1)
    ax.plot(range(len(hums)), hums)
    ax.set_title('Humidity (%)')
    canvas = FigureCanvas(fig)
    output = io.BytesIO()
    canvas.print_png(output)
    return make_response(output.getvalue(), 200, {'Content-Type':'image/png'})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80, debug=False)

템플릿 templates/index.html에 PNG 라우트 요청하는 두 <img> 태그 포함.

14. 결론

이 엔드투엔드 프로젝트는 저가 센서를 데이터 로깅·모니터링 플랫폼으로 전환하는 방법을 시연합니다: 수집, 저장, 쿼리, 시각화를 로컬 Flask 웹 서버로 모두 처리. 전체 소스 코드는 GitHub, 추가 예제는 MJRoBot.org에서 확인 가능.