Lab 9. Firebase & Dashboard Hosting

This laboratory tutorial shows you how to:

• Send sensor data securely to Firebase Realtime Database over HTTPS.
• Deploy a password-protected web dashboard (Firebase Auth) to:
  • View the sensor readings.
  • Control the on-board NeoPixel LED (on/off + color).

1. In pioarduino, create a New Project.
2. Choose an ESP32-C6 board that matches your Sparrow (e.g. esp32-c6-devkitm-1).
3. Framework: Arduino.

Edit the generated platformio.ini to look similar to this (adjust board if needed):

platformio.ini

[env:sparrow]
; Community fork of espressif32 platform w/ Arduino core 3.x for ESP32-C6
platform = https://github.com/pioarduino/platform-espressif32/releases/download/54.03.20/platform-espressif32.zip
 
board = esp32-c6-devkitm-1
framework = arduino
 
monitor_speed = 115200
 
build_flags =
  -D ARDUINO_USB_MODE=1
  -D ARDUINO_USB_CDC_ON_BOOT=1
  -D ESP32_C6_env
 
; We'll need Wire (built-in), math, etc. For the RGB LED we'll pull Adafruit NeoPixel.
lib_deps =
  adafruit/Adafruit NeoPixel @ ^1.12.0
  bblanchon/ArduinoJson
  adafruit/Adafruit BME680 Library @ ^2.0.5
  adafruit/Adafruit Unified Sensor
  adafruit/Adafruit BusIO

We will put the firmware in src/main.cpp.

1. Go to: https://firebase.google.com/
2. Click Go to console.
3. Click Add project.
4. Enter a project name, for example: sparrow-lab.
5. Enable or disable Google Analytics as you prefer.
6. Finish project creation.

1. In the Firebase console, open your project.
2. In the left menu, go to Build → Realtime Database.
3. Click Create database.
4. Choose a region (e.g. europe-west1 or us-central1).
5. Start in locked mode (recommended).

Note the generated database URL, it will look like:

https://YOUR_PROJECT_ID-default-rtdb.REGION.firebasedatabase.app

We will call this FIREBASE_DB_URL in the firmware.

1. In the Firebase console, go to Build → Authentication → Sign-in method.
2. Enable Email/Password.
3. Save.

Then go to the Users tab and create these accounts:

• Device account: device@sparrow.local
• Admin account: admin@sparrow.local

Both will use normal passwords of your choice. The device account will be hard-coded in the firmware (fine for lab use).

1. In the project overview, click the Web (</>) icon (Add app).
2. Give it a name, e.g. sparrow-dashboard.
3. Register the app.

Firebase will show you a JavaScript config object like:

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456",
};

Copy this; we will use:

• apiKey
• databaseURL
• projectId

We will store data in Realtime Database like this:

{
  "devices": {
    "sparrow-01": {
      "telemetry": {
        "-Nx123...": {
          "timestamp": 1730000000000,
          "temperature": 23.5,
          "humidity": 45.2,
          "pressure": 1008.3
        }
      },
      "led": {
        "state": "on",
        "color": "#ff00aa"
      }
    }
  }
}

Paths used:

• ESP32 sends BME680 data to:
  • /devices/sparrow-01/telemetry
• The web app reads that telemetry.
• The web app writes LED commands to:
  • /devices/sparrow-01/led
• The ESP32 reads /devices/sparrow-01/led and updates the NeoPixel.

In the Firebase console, go to Realtime Database → Rules and set:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

This means:

• Only authenticated users can read and write.
• The ESP32 authenticates using Firebase Auth REST (email/password).
• The dashboard authenticates via Firebase JS SDK (email/password).

Thus all data access is password protected.

On boot, the firmware will:

1. Connect to Wi-Fi.
2. Authenticate via Firebase Auth REST API using device@sparrow.local and its password.
3. Obtain an ID token.
4. Periodically:
   • Read BME680 (temperature, humidity, pressure).
   • POST telemetry to Realtime Database via HTTPS REST.
   • Poll the LED node and update the NeoPixel.

We will use:

• WiFiClientSecure for HTTPS.
• We have embedded a proper CA certificate.
• The certificate is the full Google TLS root (GTS Root R1, cross-signed by GlobalSign) captured from a live identitytoolkit.googleapis.com chain and reverted to setCACert using that PEM

Edit src/main.cpp, get the code here. Fill in your credentials:

• Wi-Fi SSID and password.
• Firebase apiKey and databaseURL.
• Device email and password.
• Device ID: sparrow-01.

1. Build and upload the firmware.
2. In the serial monitor, verify:
   * Wi-Fi connects.
   * Firebase sign-in succeeds.
   * POST/GET requests show HTTP 200.
3. In Firebase console → Realtime Database, you should see data appearing under:
   * ''/devices/sparrow-01/telemetry''

If you see sign-in or HTTPS errors, double-check:

• FIREBASE_API_KEY
• FIREBASE_DB_URL
• Device email/password.
• Wi-Fi credentials.

We will build a simple dashboard with:

• Login form (email/password via Firebase Auth).
• Live display of latest BME680 reading.
• History table (last 20 entries).
• LED controls (on/off + color picker).

The dashboard is protected because:

• Database rules require auth != null.
• The page uses Firebase Auth to sign in users.

Create a folder for the dashboard, for example:

dashboard/
  public/
    index.html
    app.js
    chart.umd.min.js

Firebase Hosting will serve the public/ folder.

Create dashboard/public/index.html with the code from here.

Create dashboard/public/app.js and paste this.

Replace the firebaseConfig values with those from your Firebase console.

Create dashboard/public/chart.umd.min.js. You need this for rendering the charts locally.

The code is here.

Install Firebase CLI globally:

npm install -g firebase-tools

Log in and initialize hosting:

firebase login
cd dashboard
firebase init hosting

When prompted:

• Which project? → choose your sparrow-lab project.
• Public directory? → public
• Configure as single-page app (rewrite all urls to /index.html)? → y

This will create firebase.json and other files.

From inside dashboard:

firebase deploy --only hosting

After deployment you will get a Hosting URL like:

https://sparrow-lab.web.app

Open that URL in a browser and:

1. Log in with ''admin@sparrow.local'' and its password.
2. You should see:
   * Latest reading section.
   * History table.
   * NeoPixel control panel.
3. With the Sparrow powered and connected, BME680 data should appear.
4. Changing the LED state/color should update the on-board NeoPixel within a few seconds.