So habe ich eine smarte Trinkflaschen-App mit React Native und BLE erstellt

In einer Welt vernetzter Geräte hat das Internet der Dinge (IoT) endlose Möglichkeiten eröffnet, innovative und praktische Lösungen für alltägliche Probleme zu schaffen. Dieses Projekt ist ein praktischer Leitfaden zum Bau einer intelligenten Wasserflasche und einer Begleit-App für Mobilgeräte unter Verwendung von React Native und einem ESP32-Mikrocontroller. Wir werden die faszinierende Welt der Bluetooth Low Energy (BLE)-Kommunikation erkunden und lernen, wie eine nahtlose Verbindung zwischen Hardware und Software hergestellt wird.

Dieses Tutorial führt Sie durch den gesamten Prozess – von der Einrichtung des ESP32 und dem Auslesen von Sensordaten bis hin zum Erstellen einer plattformübergreifenden mobilen App mit React Native, um Ihre Wasseraufnahme zu verfolgen und Sie daran zu erinnern, hydriert zu bleiben. Ob Sie ein Mobile-Entwickler sind, der sich für IoT interessiert, oder ein Hardware-Enthusiast, der eine benutzerfreundliche Oberfläche entwickeln möchte – dieses Projekt ist genau das Richtige für Sie.

Das Problem verstehen

Es ist ein häufiges Problem, dass man vergisst, genug Wasser zu trinken. Während es viele Apps gibt, um die Wasseraufnahme zu verfolgen, sind diese auf manuelle Eingaben angewiesen. Eine wirklich „intelligente" Wasserflasche sollte Ihren Konsum automatisch verfolgen und Sie proaktiv daran erinnern, mehr zu trinken.

Die Herausforderung liegt in der Schaffung eines zuverlässigen und energiearmen Kommunikationskanals zwischen der Wasserflasche und einem Smartphone. Hier kommt Bluetooth Low Energy (BLE) ins Spiel. BLE ist ein drahtloses Kommunikationsprotokoll, das für die Nahfeldkommunikation mit geringem Stromverbrauch entwickelt wurde, was es ideal für batteriebetriebene IoT-Geräte wie unsere intelligente Wasserflasche macht.

Unser Ansatz ist es, einen ESP32-Mikrocontroller zu verwenden, um Daten von einem Wasserstandssensor auszulesen und über BLE an eine React-Native-App zu übertragen. Die App zeigt dann die Wasseraufnahme an, verfolgt den Fortschritt hin zu einem Tagesziel und sendet Push-Benachrichtigungen als Erinnerungen.

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

• Software:

  • Node.js (LTS-Version empfohlen)
  • React-Native-Entwicklungsumgebung
  • Arduino IDE mit installiertem ESP32-Board-Manager
  • Einen Code-Editor Ihrer Wahl (z.B. VS Code)

• Hardware:

  • ESP32-Entwicklungsboard
  • Einen Wasserstandssensor (für eine praktische Einrichtung) oder ein Potentiometer (zur Simulation)
  • Steckbrett und Überbrückungskabel
  • Ein Smartphone mit Bluetooth-Funktionalität

Schritt 1: Den ESP32 als BLE-Peripheriegerät einrichten

Zuerst müssen wir den ESP32 so programmieren, dass er als BLE-Peripheriegerät fungiert, das seine Präsenz广播t und Daten für unsere mobile App bereitstellt. Wir definieren einen BLE-Dienst mit einer Eigenschaft für den Wasserstand.

Was wir tun

Wir schreiben einen Arduino-Sketch für den ESP32, der:

1. Einen BLE-Server initialisiert.
2. Einen BLE-Dienst und eine Eigenschaft erstellt, um die Wasserstandsdaten zu speichern.
3. Das Auslesen von einem Wasserstandssensor simuliert.
4. Die Eigenschaft mit dem neuen Wasserstandswert aktualisiert.

Implementierung

// ESP32_BLE_Water_Bottle.ino

#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>

#define SERVICE_UUID        "4fafc201-1fb5-459e-8fcc-c5c9c331914b"
#define CHARACTERISTIC_UUID "beb5483e-36e1-4688-b7f5-ea07361b26a8"

BLECharacteristic *pCharacteristic;
float waterLevel = 100.0; // Ausgangswasserstand

void setup() {
  Serial.begin(115200);
  Serial.println("Starting BLE work!");

  BLEDevice::init("Smart Water Bottle");
  BLEServer *pServer = BLEDevice::createServer();
  BLEService *pService = pServer->createService(SERVICE_UUID);

  pCharacteristic = pService->createCharacteristic(
                      CHARACTERISTIC_UUID,
                      BLECharacteristic::PROPERTY_READ |
                      BLECharacteristic::PROPERTY_NOTIFY
                    );

  pCharacteristic->setValue(String(waterLevel).c_str());
  pService->start();

  BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
  pAdvertising->setScanResponse(true);
  pAdvertising->setMinPreferred(0x06);
  pAdvertising->setMinPreferred(0x12);
  BLEDevice::startAdvertising();
  Serial.println("Characteristic defined! Now you can read it in your phone!");
}

void loop() {
  // Simuliere abnehmenden Wasserstand
  if (waterLevel > 0) {
    waterLevel -= 5.0;
  } else {
    waterLevel = 100.0;
  }

  pCharacteristic->setValue(String(waterLevel).c_str());
  pCharacteristic->notify();
  Serial.print("Water Level: ");
  Serial.println(waterLevel);
  delay(2000);
}

So funktioniert es

• Wir verwenden die BLEDevice-Bibliothek, um den ESP32 als BLE-Gerät mit dem Namen „Smart Water Bottle" zu initialisieren.
• Wir erstellen einen BLE-Dienst mit einer eindeutigen UUID. Dienste sind Sammlungen von Eigenschaften.
• Wir erstellen eine BLE-Eigenschaft mit einer eindeutigen UUID. Eigenschaften sind das, was die eigentlichen Daten enthält. Wir geben ihr READ- und NOTIFY-Eigenschaften, damit unsere App den Wert lesen und Änderungen abonnieren kann.
• In der loop()-Funktion simulieren wir eine Abnahme des Wasserstands und aktualisieren den Wert der Eigenschaft. Die notify()-Funktion sendet den neuen Wert an alle abonnierten Geräte.

Schritt 2: Die React-Native-Begleit-App erstellen

Jetzt erstellen wir die mobile App, die sich mit unserer intelligenten Wasserflasche verbindet und den Wasserstand anzeigt. Wir verwenden die react-native-ble-plx-Bibliothek, um die BLE-Kommunikation zu handhaben.

Was wir tun

1. Ein neues React-Native-Projekt einrichten.
2. react-native-ble-plx installieren und konfigurieren.
3. BLE-Scanning implementieren, um unser ESP32-Gerät zu finden.
4. Sich mit dem Gerät verbinden und die Wasserstandseigenschaft auslesen.
5. Den Wasserstand in der UI der App anzeigen.

Implementierung

Erstellen Sie zunächst ein neues React-Native-Projekt und installieren Sie die erforderliche Bibliothek:

npx react-native init SmartWaterBottleApp
cd SmartWaterBottleApp
npm install react-native-ble-plx

Als Nächstes erstellen wir einen benutzerdefinierten Hook zur Verwaltung unserer BLE-Logik:

// src/hooks/useBLE.js
import { useState } from 'react';
import { BleManager } from 'react-native-ble-plx';

const bleManager = new BleManager();

const useBLE = () => {
  const [device, setDevice] = useState(null);
  const [waterLevel, setWaterLevel] = useState(0);

  const requestPermissions = async () => {
    // Android-Berechtigungen behandeln
  };

  const scanForDevices = () => {
    bleManager.startDeviceScan(null, null, (error, scannedDevice) => {
      if (error) {
        console.error(error);
        return;
      }
      if (scannedDevice && scannedDevice.name === 'Smart Water Bottle') {
        bleManager.stopDeviceScan();
        connectToDevice(scannedDevice);
      }
    });
  };

  const connectToDevice = async (device) => {
    try {
      const connectedDevice = await bleManager.connectToDevice(device.id);
      setDevice(connectedDevice);
      await connectedDevice.discoverAllServicesAndCharacteristics();
      startStreamingData(connectedDevice);
    } catch (error) {
      console.error(error);
    }
  };

  const startStreamingData = (device) => {
    device.monitorCharacteristicForService(
      '4fafc201-1fb5-459e-8fcc-c5c9c331914b', // Service-UUID
      'beb5483e-36e1-4688-b7f5-ea07361b26a8', // Eigenschafts-UUID
      (error, characteristic) => {
        if (error) {
          console.error(error);
          return;
        }
        const decodedValue = atob(characteristic.value);
        setWaterLevel(parseFloat(decodedValue));
      }
    );
  };

  return {
    scanForDevices,
    device,
    waterLevel,
  };
};

export default useBLE;

Jetzt verwenden wir diesen Hook in unserer Hauptkomponente App.js:

// App.js
import React, { useEffect } from 'react';
import { SafeAreaView, Text, Button, View, StyleSheet } from 'react-native';
import useBLE from './src/hooks/useBLE';

const App = () => {
  const { scanForDevices, device, waterLevel } = useBLE();

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Smart Water Bottle</Text>
      <Button title="Scan for Devices" onPress={scanForDevices} />
      {device && (
        <View style={styles.deviceContainer}>
          <Text>Verbunden mit: {device.name}</Text>
          <Text style={styles.waterLevel}>Wasserstand: {waterLevel}%</Text>
        </View>
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  // Ihre Styles hier hinzufügen
});

export default App;

So funktioniert es

• Der useBLE-Hook kapselt die gesamte BLE-Logik.
• scanForDevices startet das Scannen nach BLE-Geräten und filtert nach unserem „Smart Water Bottle".
• Sobald das Gerät gefunden wurde, stellt connectToDevice eine Verbindung her.
• startStreamingData abonniert die Wasserstandseigenschaft. Wann immer der ESP32 eine Benachrichtigung mit einem neuen Wert sendet, wird der waterLevel-Status in unserer App aktualisiert, und die UI wird neu gerendert, um den aktuellen Wasserstand anzuzeigen.

Alles zusammenführen

Jetzt, wenn Sie den ESP32-Code ausführen und dann die React-Native-App starten, können Sie die Schaltfläche „Scan for Devices" drücken. Die App findet Ihre „Smart Water Bottle", verbindet sich damit und beginnt, den simulierten Wasserstand in Echtzeit anzuzeigen.

Für eine praktische Anwendung würden Sie die simulierten Daten im ESP32-Code durch Messungen von einem echten Wasserstandssensor ersetzen. Es gibt verschiedene Sensortypen, die Sie verwenden können, wie z.B. resistive oder Ultraschallsensoren. Das Prinzip bleibt dasselbe: Lesen Sie den Sensorwert, ordnen Sie ihn einem Prozentsatz zu und aktualisieren Sie die BLE-Eigenschaft.

Leistungs- und Sicherheitsaspekte

• Stromverbrauch: BLE ist für geringen Stromverbrauch konzipiert. Zur weiteren Optimierung können Sie das Werbungsintervall auf dem ESP32 und das Verbindungsintervall in Ihrer React-Native-App anpassen.
• Sicherheit: Für eine Produktionsanwendung sollten Sie BLE-Sicherheitsfunktionen wie Pairing und Bonding implementieren, um zu verhindern, dass nicht autorisierte Geräte eine Verbindung zu Ihrer intelligenten Wasserflasche herstellen. Die react-native-ble-plx-Bibliothek stellt APIs zur Handhabung dieser Sicherheitsmaßnahmen bereit.
• Fehlerbehandlung: In einem realen Szenario benötigen Sie eine robuste Fehlerbehandlung für Fälle wie Verbindungsabbrüche, verweigerte Berechtigungen und Datenübertragungsfehler.

Fazit

In diesem Tutorial haben wir erfolgreich einen funktionalen Prototyp einer intelligenten Wasserflasche und einer Begleit-App unter Verwendung von React Native und einem ESP32 gebaut. Wir haben die Grundlagen der BLE-Kommunikation und die Überbrückung der Lücke zwischen Hardware und Software kennengelernt.

Dieses Projekt ist erst der Anfang. Sie können es erweitern, indem Sie Funktionen hinzufügen wie:

• Verfolgung des täglichen Wasseraufnahmeverlaufs.
• Festlegung anpassbarer Hydratationsziele.
• Integration mit Gesundheits- und Fitness-Apps.
• Entwicklung und 3D-Druck eines maßgeschneiderten Gehäuses für die Elektronik.

Die Welt des IoT ist riesig und voller aufregender Möglichkeiten. Ich ermutige Sie, mit diesem Projekt zu experimentieren, verschiedene Sensoren auszuprobieren und Ihre eigenen innovativen vernetzten Geräte zu bauen.

Ressourcen

• React Native BLE PLX Library
• Arduino BLE Library Documentation
• ESP32 BLE with React Native Tutorial
• Another great example project on GitHub

Kurzübersicht

Häufig gestellte Fragen

F: Wie weiß ich, ob dies auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrem Arzt, um Ihre individuellen Risikofaktoren zu bewerten und geeignete nächste Schritte zu bestimmen.

F: Was sollte ich meinen Arzt fragen? A: Gute Fragen sind: „Was bedeuten meine Ergebnisse?", „Was sind meine Optionen?", „Welche Lebensstiländerungen würden helfen?" und „Wann sollte ich nachuntersuchen lassen?"

F: Gibt es Lebensstiländerungen, die helfen können? A: Die meisten Gesundheitszustände profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), качествен Schlaf (7-9 Stunden), Stressmanagement und Vermeidung von Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich zu Bildungszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie immer einen qualifizierten Arzt, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Pflege treffen. Individuelle Umstände variieren, und was für eine Person angemessen ist, ist möglicherweise nicht für eine andere Person geeignet.

Wenn Sie einen medizinischen Notfall erleben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.