11주 차 ESP32와 Firebase를 활용한 웹 페이지 만들기 - park-02/2024-1_Smart-Devices GitHub Wiki

목차

  • Database
  • Firebase
  • 실습[1]
  • 실습[2]
  • 실습[3]
  • 실습[4]
  • 후기

Database

Database란?

데이터베이스는 전자적으로 저장되고 체계적인 데이터 모음입니다. 이 모음에는 단어, 숫자, 이미지, 비디오 및 파일과 같은 다양한 유형의 데이터가 포함될 수 있습니다. 이러한 데이터를 저장, 검색 및 편집하기 위해 DBMS(데이터베이스 관리 시스템)라는 소프트웨어가 사용됩니다. 데이터베이스는 컴퓨터 시스템에서 모든 DBMS, 데이터베이스 시스템 또는 데이터베이스와 관련된 응용 프로그램을 가리킬 수 있습니다.

DBMS: Database Management System

데이터베이스 관리 시스템(DBMS: Database Management System)은 데이터베이스에 접근하여 데이터베이스의 정의, 조작, 제어 등 데이터베이스 관리를 지원하는 소프트웨어입니다.

데이터베이스 관리 시스템은 다음과 같은 기능을 제공합니다:

  • 정의 기능은 데이터베이스에 저장될 자료의 구조와 응용 프로그램이 이 구조를 이용하는 방식을 정의합니다. 레코드 구조, 데이터 모형, 물리적 구조 등이 여기에 포함됩니다.
  • 조작 기능은 사용자의 요구에 따라 데이터베이스에 접근하여 저장된 자료를 검색, 갱신, 삽입, 삭제할 수 있도록 합니다. 사용자는 데이터베이스의 데이터를 쉽고 효율적으로 조작할 수 있습니다.
  • 제어 기능은 데이터를 조작하려는 작업이 데이터 무결성을 파괴하지 않도록 작업 요청을 제어합니다. 보안을 유지하고 여러 사용자가 동시에 데이터베이스에 접근하여 정확성을 유지하도록 합니다.

image

Firebase 개요

Firebase란?

Firebase는 Google의 모바일 및 웹 애플리케이션 개발을 위한 백엔드 플랫폼으로, 엔드투엔드 개발 환경을 제공하여 앱 개발 시간을 단축하고 확장 가능한 인프라를 지원합니다. Google이 2014년에 인수한 이후, 인증 및 호스팅 기능을 제공하는 실시간 데이터베이스로 발전하였으며, 이후 클라우드 메시징, 서버리스 컴퓨팅, 광고 및 분석 기능을 추가하여 Cloud Firestore를 출시했습니다. 현재 Firebase는 다양한 SDK를 통해 Apple, Android, JavaScript, C++ 등 여러 플랫폼을 지원하며, 개발자가 백엔드 인프라를 쉽게 확장할 수 있도록 도와줍니다.

image

Firebase의 핵심 기능

Firebase의 주요 기능은 다음과 같습니다:

  • 데이터베이스 관리: NoSQL 실시간 데이터베이스와 Cloud Firestore를 포함하여, 데이터를 실시간으로 관리하고 동기화합니다.
  • 파일 스토리지: 클라우드 스토리지를 통해 파일을 안전하게 저장하고 관리합니다.
  • 클라우드 코드: Firebase Cloud Functions를 사용하여 서버리스 코드를 작성하고 실행합니다.
  • 분석: Firebase Analytics를 통해 애플리케이션의 사용자 활동과 성과를 추적합니다.
  • 확장 가능한 호스팅: Firebase Hosting을 통해 웹 애플리케이션을 배포하고 확장할 수 있습니다.
  • 머신 러닝: Firebase ML Kit을 사용하여 머신 러닝 모델을 애플리케이션에 통합합니다.

Firebase의 주요 이점

  • 간편한 애플리케이션 구축: 백엔드 인프라와 서버 관리를 간소화하여 개발 시간을 단축합니다.
  • 간편한 애플리케이션 릴리스 및 모니터링: Firebase Analytics와 같은 도구를 사용하여 애플리케이션의 성능을 쉽게 모니터링하고 개선할 수 있습니다.
  • 사용자 참여 및 애플리케이션 프로모션: Firebase의 다양한 도구를 사용하여 사용자 참여를 추적하고 애플리케이션을 효과적으로 프로모션할 수 있습니다.

실습[1]

실습 내용

이번 실습에서는 Firebase Realtime Database를 사용하여 ESP32와 통신하고, 외부에서 데이터를 제어하여 내장 LED를 켜고 끄는 실습입니다.

Firebase 프로젝트 만들기

123123

  • 2 위에 화면에 시작하기를 누르고 "프로젝트 만들기"를 선택합니다.

123123

  • 3 프로젝트 이름을 입력한 후, 계속 진행합니다.

Realtime Database 설정

  • 1 Firebase 콘솔에서 "빌드 > Realtime Database" 섹션으로 이동한 후 "데이터베이스 만들기"를 클릭하면 Firebase 프로젝트에 Realtime Database가 만들어집니다.

123123 123123

  • 2 Firebase 콘솔에서 Realtime Database를 만든 후, 데이터베이스의 위치를 설정하고 테스트 모드로 사용 설정해야 합니다.

123123 123123

  • 3 데이터베이스 URL 확인 및 복사: Firebase 콘솔에서 "프로젝트 개요" 페이지로 이동하여 Realtime Database 섹션을 찾습니다. 거기에서 데이터베이스 URL을 확인하고 복사합니다.

123123

  • 3-1 읽기 및 쓰기 규칙 설정: Firebase 콘솔에서 "규칙" 탭으로 이동하여 데이터베이스 보안 규칙을 설정합니다. 예를 들어, 다음과 같이 읽기 및 쓰기 규칙을 설정할 수 있습니다.
    {
    "rules": {
    ".read": true,
    ".write": true
    }
    }

123123

Firebase 인증 등록

  • 1 Firebase 콘솔의 "빌드 → Authentication" 섹션으로 이동하여 시작하기를 클릭합니다.

123123 123123

  • 2 익명(Anonymous) 방식을 선택하고 사용 설정을 On하여 줍니다.

123123 123123

WEB API KEY 받기

  • 1 "프로젝트 설정"으로 이동합니다. 탭에서 웹 API 키를 확인하고 복사해 둡니다.

123123 123123

라이브러리 설치

  • 1 “Firebase ESP32 Client by Mobizt”를 검색하고 설치합니다.

123123

준비물

  • ESP32, ESP32 확장 실드

소스코드

#include <WiFi.h>
#include <FirebaseESP32.h>

//Provide the token generation process info.
#include "addons/TokenHelper.h"
//Provide the RTDB payload printing info and other helper functions.
#include "addons/RTDBHelper.h"

// Firebase 설정
#define FIREBASE_HOST "your_firebase_host"
#define FIREBASE_AUTH "your_firebase_auth"
#define WIFI_SSID "U+NetC8B4"
#define WIFI_PASSWORD "1157004727"

// 내장 LED  설정
#define LED_PIN 2

// Firebase 객체 생성
FirebaseData firebaseData;

FirebaseAuth auth;
FirebaseConfig config;
bool signupOK = false;
unsigned long sendDataPrevMillis = 0;

void setup_wifi() {
  delay(10);
  // Wi-Fi 네트워크에 연결 시작
  Serial.println();
  Serial.print("연결 중인 Wi-Fi: ");
  Serial.println(WIFI_SSID);

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("Wi-Fi 연결됨");
  Serial.println("IP 주소: ");
  Serial.println(WiFi.localIP());
}

void setup() {
  // 시리얼 통신 초기화
  Serial.begin(115200);

  // WiFi 연결
  setup_wifi();

  // API 키를 할당합니다.(필수)
  config.api_key = "API";

  //RTDB URL을 할당합니다.(필수)
  config.database_url = "https://esp32-led-24fc9-default-rtdb.firebaseio.com/";

  /* Sign up */
  if (Firebase.signUp(&config, &auth, "", "")){
    Serial.println("ok");
    signupOK = true;
  }
  else{
    Serial.printf("%s\n", config.signer.signupError.message.c_str());
  }

  //  실행 시간이 필요한 토큰 생성 작업을 위한 콜백 함수를 할당합니다.
  config.token_status_callback = tokenStatusCallback; 

  Firebase.begin(&config, &auth);
  Firebase.reconnectWiFi(true);
  // 내장 LED  설정
  pinMode(LED_PIN, OUTPUT);

  // "/ledState" 경로를 0으로 초기화
  if (Firebase.ready() && signupOK)
  {
    if (Firebase.RTDB.setInt(&firebaseData, "/ledState", 0)){
      Serial.println("PASSED");
      Serial.println("PATH: " + firebaseData.dataPath());
      Serial.println("TYPE: " + firebaseData.dataType());
    }
    else {
      Serial.println("FAILED");
      Serial.println("REASON: " + firebaseData.errorReason());
    }
  }
}
void loop() {
  // Firebase.ready() 함수는 인증 작업을 처리하기 위해 반복적으로 호출되어야 합니다.
  if (Firebase.ready() && signupOK && \
  (millis() - sendDataPrevMillis > 2000 || sendDataPrevMillis == 0))
  {
    sendDataPrevMillis = millis();

    // Firebase에서 LED 상태 가져오기
    int ledState = 0;
    if (Firebase.RTDB.getInt(&firebaseData, "/ledState")) {
      if (firebaseData.dataType() == "int") {
        ledState = firebaseData.intData();
        Serial.println(ledState);
        if (ledState == 1) {
          digitalWrite(LED_PIN, HIGH);
        } else {
          digitalWrite(LED_PIN, LOW);
        }
      }
    }
    else {
        Serial.println(firebaseData.errorReason());
    }
  }
}

동작 원리

이 코드는 Wi-Fi 및 Firebase 관련 라이브러리를 포함합니다.
Firebase 호스트 URL, API 키, Wi-Fi SSID, Wi-Fi 비밀번호를 설정합니다. 내장 LED는 2번 핀에 연결됩니다.
Firebase 인증을 수행하고 실시간 데이터베이스(RTDB) URL을 설정합니다. 회원 가입이 성공하면 signupOK 변수를 true로 설정합니다.
토큰 생성 작업을 위한 콜백 함수를 지정하고, Firebase를 초기화합니다.
Wi-Fi 재연결을 활성화하고, 내장 LED 핀을 출력 모드로 설정합니다. 그리고 "/ledState" 경로에 초기값 0을 설정합니다.
루프에서는 Firebase가 준비된 경우 LED 상태를 읽어와 내장 LED를 제어합니다.
읽어온 LED 상태에 따라 내장 LED 핀을 HIGH 또는 LOW로 설정합니다.

실행

  • ESP32 보드를 컴퓨터에 연결합니다.
  • Arduino IDE에 소스코드를 컴파일하고 업로드합니다.

Firebase의 ledState 값에 따라 ESP32의 내장 LED가 켜지거나 꺼지는 동작을 확인할 수 있습니다.
ledState 값이 1로 설정되면 내장 LED가 켜지고, ledState 값이 0으로 설정되면 내장 LED가 꺼집니다.
이를 통해 Firebase와 ESP32 간의 통신이 원활하게 이루어지고, 원격으로 LED를 제어할 수 있습니다.

KakaoTalk_20240516_003253245.mp4

결과

Firebase Realtime Database와 ESP32를 연결하여 데이터를 읽고 내장 LED를 제어하는 것에 성공했습니다. Firebase 콘솔에서 데이터를 변경하면 ESP32의 LED가 실시간으로 제어되는 것을 확인할 수 있었습니다.


실습[2]

실습 내용

이번 실습에서는 빛 감지 센서 값을 일정 시간 간격으로 읽어오는 실습입니다.

준비물

  • ESP32, ESP32 확장 실드, 빛 감지 센서

빛 감지 센서

조도 센서는 측정된 빛의 세기에 따라 저항값이 변하는 센서입니다. Photoresistor 또는 LDR(Light Dependent Resistor)이라고도 불리며, 빛이 강하면 저항값이 낮아지고, 빛이 약하면 저항값이 높아집니다. 이러한 성질에 따라 아날로그 신호를 발생시키며, 이를 통해 아두이노로 밝기 값을 얻거나 LED로 확인할 수 있게 됩니다.

조도 센서의 작동 원리

조도 센서는 주변의 빛의 강도에 따라 저항값이 변합니다:

  • 빛이 강할 때: 저항값이 낮아집니다.
  • 빛이 약할 때: 저항값이 높아집니다.

이 변화를 통해 아날로그 신호를 생성하게 됩니다. 아날로그 신호는 아두이노 같은 마이크로컨트롤러로 입력되며, 이를 통해 주변 환경의 밝기를 측정하고 다양한 응용 프로그램에 활용할 수 있습니다.

조도 센서를 활용한 프로젝트

밝기 측정 및 디스플레이:

  • 아두이노를 이용하여 조도 센서의 값을 읽어와서 시리얼 모니터에 표시하거나, LCD 디스플레이에 출력할 수 있습니다.

자동 조명 시스템:

  • 주변 환경의 밝기에 따라 LED의 밝기를 자동으로 조절하는 시스템을 만들 수 있습니다. 예를 들어, 방이 어두워지면 LED가 자동으로 켜지고, 밝아지면 꺼지는 기능을 구현할 수 있습니다.

회로연결

ESP32와 Light Sensor를 다음과 같이 연결합니다.

Light Sensor S -> ESP32 S:D34
Light Sensor V -> ESP32 V
Light Sensor G -> ESP32 G

소스코드

int sensorPin = 34;
int value = 0;

void setup() {
  Serial.begin(115200);
}

void loop() {
  value = analogRead(sensorPin);

  Serial.println(value);

  delay(500);
}

동작원리

loop() 함수는 프로그램이 실행되는 동안 계속 반복됩니다.
analogRead(sensorPin)은 sensorPin에서 아날로그 값을 읽어 value 변수에 저장합니다.
Serial.println(value)는 읽어온 센서 값을 시리얼 모니터에 출력합니다.
delay(500)은 0.5초 동안 대기한 후 다시 루프를 반복합니다. 이는 센서 값을 읽고 출력하는 주기를 설정합니다.

실행

  • ESP32 보드를 컴퓨터에 연결합니다.
  • Arduino IDE에 소스코드를 컴파일하고 업로드합니다.

시리얼 모니터

KakaoTalk_20240516_004114166.mp4

시리얼 플로터

KakaoTalk_20240516_004831668.mp4

결과

시리얼 모니터를 열고 값을 확인해보면, 빛 감지 센서를 가렸을 때 값이 감소하고, 빛을 비추어주면 값이 증가하는 것을 볼 수 있습니다.


실습[3]

실습 내용

이번 실습은 ESP32의 타임스탬프를 사용하여 Firebase 실시간 데이터베이스에 데이터 로깅하는 법을 알아보는 실습입니다.

준비물

  • ESP32, ESP32 확장 실드, 빛 감지 센서

회로연결

ESP32와 Light Sensor를 다음과 같이 연결합니다.

Light Sensor S -> ESP32 S:D34
Light Sensor V -> ESP32 V
Light Sensor G -> ESP32 G

소스코드

111111111111111

2222222222222

33333333333

동작 원리

WiFi와 Firebase 설정을 먼저 진행합니다. WiFi의 SSID와 비밀번호, 그리고 Firebase 호스트와 인증 정보를 정의합니다.
getTime() 함수는 현재 epoch 시간을 가져오는 역할을 합니다. NTP 서버를 사용하여 현재 시간을 동기화합니다.
Firebase API 키와 RTDB URL을 설정하고, Firebase 회원 가입을 시도합니다.
Firebase가 준비되고 회원 가입이 성공하면, 1분마다 센서 데이터를 전송하는 작업을 시작합니다.
센서 데이터를 읽어 JSON 형식으로 변환한 후, Firebase Realtime Database에 전송합니다.

실행

  • ESP32 보드를 컴퓨터에 연결합니다.
  • Arduino IDE에 소스코드를 컴파일하고 업로드합니다.

KakaoTalk_20240516_021752253

KakaoTalk_20240516_021812670

결과

Firebase 실시간 데이터베이스의 "room1" 폴더에 20초마다 새로운 노드가 생성되는 것을 확인할 수 있었습니다.


실습[4]

실습 내용

이 실습에서는 ESP32로부터 시간대별로 저장된 빛 센서의 변화량을 실시간으로 표시하는 앱을 만드는 실습입니다.

앱 등록하기

  • 1 “ESP32-LIGHT-SENSOR” 프로젝트를 클릭합니다. KakaoTalk_20240516_022017492

  • 2 웹 앱 아이콘을 선택하여 앱 설정으로 들어갑니다. KakaoTalk_20240516_022043952

  • 3 앱 이름을 정해 주고 "Register app" 버튼을 클랙해 줍니다. KakaoTalk_20240516_022119516

  • 4 "<script> 태그 사용" 을 선택해 줍니다. 그리고 아래에 나타나는 script는 복사합니다. 나중에 html파일 작성 시에 필요합니다.

KakaoTalk_20240516_022227752

소스코드

1111111111111

222222222222

33333333333333

444444444444

실행

아래에 코드는 자신의 Firebase 앱 정보로 업데이트 하는 코드입니다. 그 코드를 복사 하여

KakaoTalk_20240516_023812633

아래 index코드에 자신의 Firebase 앱 정보로 업데이트 하는 코드를 붙여넣기하면

KakaoTalk_20240516_024003818

데이터가 실시간으로 업데이트되는 웹 페이지가 만들어 집니다.

KakaoTalk_20240516_023716523

결과

chrome 등 웹 브라우저 창을 열어줍니다. ESP32에서 Firebase에 전송된 데이터가 실시간으로 업데이트되는 그래프를 확인할 수 있습니다.

실습[4-1] 호스팅

Firebase CLI 설치하기

  • Firebase CLI 다운로드 https://firebase.google.com/docs/cli?hl=ko 링크를 클릭하여 Firebase CLI 다운로드 페이지로 이동합니다: 다운로드 페이지에서 운영 체제에 맞는 Firebase CLI 바이너리 를 다운로드합니다.

KakaoTalk_20240520_232026344

Firebase CLI 실행하기

  • firebase-tools-instant-win.exe를 더블 클릭하여 실행 해 줍니다.

1241234

KakaoTalk_20240520_232138810

Firebase CLI 실행하기

  • Firebase CLI를 다운로드하고 설치한 후, 명령 프롬프트에서 firebase login 명령어를 실행하여 브라우저를 통해 Firebase 계정으로 로그인합니다. 로그인 완료 후, 명령 프롬프트에서 Firebase CLI 명령어를 사용하여 프로젝트를 관리할 수 있습니다.

KakaoTalk_20240520_232138810

Working Directory 생성 및 이동

  • 실행 파일을 프로젝트 폴더로 복사하여 실행하거나 명령어를 사용해 Working Directory를 설정합니다.

image

프로젝트 리스트 확인

  • firebase projects:list 명령어를 실행하여 Firebase 프로젝트 리스트를 확인합니다

KakaoTalk_20240520_233340391

Firebase 프로젝트 초기화

  • firebase init 명령어를 실행하여 프로젝트 및 hosting 설정을 진행합니다.

14124124

Firebase 프로젝트 초기화

  • "Use an existing project”를 선택합니다.
  • 화살표 키로 “ESP32-LIGHT-SENSOR”를 선택 후 엔터를 칩니다.
  • 호스팅 설정은 기본값을 사용할 예정이므로 다음 질문에 모두 엔터를 쳐 종료합니다.

KakaoTalk_20240520_232739281

Firebase 프로젝트에 배포

  • 챕터 7.4.2.에서 작성한 index.html을 d:\project\public 폴더로 복사합니다

KakaoTalk_20240520_233147793

Firebase 프로젝트에 배포

firebase deploy 명령어를 사용하여 웹 앱 호스팅을 시작합니다.

KakaoTalk_20240520_233751807

실행결과

  • CLI 화면에 표시된 Hosting URL을 브라우저에 입력하면, 어디서나 ESP32에서 보내는 빛 센서 값들을 모니터링할 수 있습니다. 이를 통해 웹 브라우저를 통해 실시간으로 빛 센서 데이터를 확인할 수 있습니다.

KakaoTalk_20240520_233733022

후기

  • 이번 실습은 다른 실습에 비하여 오랜 시간을 투자하여 실습을 성공적으로 마무리 했습니다. 이번 실습을 통하여 Firebase Realtime Database를 활용하여 ESP32와의 통신 및 데이터 제어, 빛 감지 센서 값을 읽어오는 방법, 타임스탬프를 활용한 데이터 로깅, 그리고 시간대별로 저장된 데이터를 실시간으로 표시하는 앱 개발 등을 다루었습니다. 이러한 실습을 통해 ESP32와 Firebase를 연동하는 방법과 데이터를 효과적으로 활용하는 방법에 대해 배울 수 있었습니다. 특히, 각각의 실습에서 다양한 기술을 적용하고 결과를 확인하는 과정은 매우 유익했습니다. 이를 통해 개발 환경 구축부터 데이터 처리 및 시각화까지의 전체적인 흐름을 이해할 수 있었습니다.
⚠️ **GitHub.com Fallback** ⚠️