React NativeとBLEでスマート水筒アプリを作った方法

IoTスマート水筒の作成ガイド。BLEでReact NativeアプリとESP32を接続し、水分摂取量を追跡・リマインダーを送信する方法。

2025年12月21日読了時間 9分

このページの内容

相互接続されたデバイスの世界中、IoT（Internet of Things）は日常的な問題に対する革新的で実用的なソリューションを創出する可能性を無限に広げています。このプロジェクトは、React NativeとESP32マイコンを使用してスマート水瓶とそれに付随するモバイルアプリ構築のための実践ガイドです。Bluetooth Low Energy（BLE）通信の魅力を探求し、ハードウェアとソフトウェア間のシームレスな接続を作成する方法を学びます。

このチュートリアルでは、ESP32のセットアップとセンサーデータの読み取りから、水分摂取量を追跡し水分補給のリマインダーを送信するクロスプラットフォームモバイルアプリの構築まで、全プロセスを説明します。IoTに興味を持つモバイル開発者でも、ユーザーフレンドリーなインターフェースを構築したいハードウェア愛好家でも、このプロジェクトはあなたに適しています。

問題の理解

十分な水を飲むことを忘れることは、一般的によくある問題です。水の摂取量を追跡する多くのアプリがありますが、手動入力に依存しています。真に「スマート」な水瓶は、、消費量を自動的に追跡し、より多く飲むように能動的にリマインダーする必要があります。

課題は、水瓶とスマートフォンの間に信頼性が高く低消費電力の通信チャネルを作成することにあります。ここでBluetooth Low Energy（BLE）の出番です。BLEは、低消費電力での短距離通信用に設計されたワイヤレス通信プロトコルであり、スマート水瓶のようなバッテリー駆動のIoTデバイスに最適です。

私たちの方法は、ESP32マイコンを使用して水位センサーのデータを読み取り、BLE経由でReact Nativeアプリに送信することです。アプリ затем отображает потребление воды, отслеживает прогресс в достижении дневной цели и отправляет push-уведомления в качестве напоминаний.

前提条件

このチュートリアルに従うには、以下が必要です：

ソフトウェア：
- Node.js（LTSバージョン推奨）
- React Native開発環境
- Arduino IDE（ESP32ボードマネージャーインストール済み）
- 任意のコードエディタ（例：VS Code）
ハードウェア：
- ESP32開発ボード
- 水位センサー（実際のセットアップ用）またはポテンショメータ（シミュレーション用）
- ブレッドボードとジャンプワイヤ
- Bluetooth機能を備えたスマートフォン

ステップ1：ESP32をBLEペリフェラルとして設定する

まず、ESP32をBLEペリフェラルとして動作するようにプログラミングする必要があります。BLEペリフェラルは存在を通知し、モバイルアプリにデータを公開します。水位用の特性を持つBLEサービスを定義します。

何をしているのか

ESP32用のArduinoスケッチを書きます：

BLEサーバーを初期化します。
水位データを保持するBLEサービスと特性を作成します。
水位センサーからの読み取りをシミュレートします。
新しい水位値で特性を更新します。

実装

cpp

// 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; // 水位の初期値

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() {
  // 水位が減少するのをシミュレート
  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);
}

動作の仕組み

BLEDeviceライブラリを使用して、ESP32を「Smart Water Bottle」という名前のBLEデバイスとして初期化します。
一意のUUIDを持つBLEサービスを作成します。サービスは特性のコレクションです。
一意のUUIDを持つBLE特性を作成します。特性は実際のデータを保持するものです。アプリが値を読み取り、変更を購読できるように、READとNOTIFYプロパティを与えます。
loop()関数では、水位の低下をシミュレートし、特性の値を更新します。notify()関数は新しい値を購読しているデバイスに送信します。

ステップ2：React Nativeコンパニオンアプリの構築

次に、スマート水瓶に接続して水位を表示するモバイルアプリを作成しましょう。BLE通信を処理するためにreact-native-ble-plxライブラリを使用します。

何をしているのか

新しいReact Nativeプロジェクトを設定します。
react-native-ble-plxをインストールして設定します。
ESP32デバイスを見つけるためのBLEスキャンを実装します。
デバイスに接続し水位特性を読み取ります。
アプリのUIに水位を表示します。

実装

まず、新しいReact Nativeプロジェクトを作成し、必要なライブラリをインストールします：

bash

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

次に、BLEロジックを管理するカスタムフックを作成します：

javascript

// 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権限の処理
  };

  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', // サービスUUID
      'beb5483e-36e1-4688-b7f5-ea07361b26a8', // 特性UUID
      (error, characteristic) => {
        if (error) {
          console.error(error);
          return;
        }
        const decodedValue = atob(characteristic.value);
        setWaterLevel(parseFloat(decodedValue));
      }
    );
  };

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

export default useBLE;

次に、このフックをメインモジュールのApp.jsコンポーネントで使用しましょう：

javascript

// 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>Connected to: {device.name}</Text>
          <Text style={styles.waterLevel}>Water Level: {waterLevel}%</Text>
        </View>
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  // ここにスタイルを追加
});

export default App;

動作の仕組み

useBLEフックはすべてのBLEロジックをカプセル化します。
scanForDevicesはBLEデバイスのスキャンを開始し、「Smart Water Bottle」をフィルタリングします。
デバイスが見つかると、connectToDeviceが接続を確立します。
startStreamingDataは水位特性を購読します。ESP32が新しい値で通知を送信するたびに、アプリのwaterLevel状態が更新され、現在の水位を表示するためにUIが再レンダリングされます。

すべてをまとめる

теперь при запуске кода ESP32 и последующем запуске приложения React Native, нажатие кнопки "Scan for Devices" позволит приложению найти "Smart Water Bottle", подключиться к нему и начать отображать имитируемый уровень воды в реальном времени.

Для реального приложения необходимо заменить симулированные данные в коде ESP32 на показания реального датчика уровня воды. Доступны различные типы датчиков, такие как резистивные или ультразвуковые. Принцип остается тем же: считывайте значение датчика, преобразуйте его в процентное соотношение и обновляйте характеристику BLE.

Соображения производительности и безопасности

Потребляемая мощность: BLE разработан для низкого энергопотребления. Для дополнительной оптимизации можно настроить интервал рекламы на ESP32 и интервал подключения в приложении React Native.
Безопасность: Для производственного приложения следует реализовать функции безопасности BLE, такие как связывание и сопряжение, чтобы не допустить подключения несанкционированных устройств к умной бутылке для воды. Библиотека react-native-ble-plx предоставляет API для обработки этих мер безопасности.
Обработка ошибок: В реальном сценарии требуется надежная обработка ошибок для таких случаев, как разрыв соединения, отказ в разрешениях и ошибки передачи данных.

Заключение

В этом руководстве мы успешно создали функциональный прототип умной бутылки для воды и сопутствующего приложения с использованием React Native и ESP32. Мы изучили основы связи BLE и то, как преодолеть разрыв между оборудованием и программным обеспечением.

Этот проект — только начало. Вы можете расширить его, добавив такие функции, как:

Отслеживание истории ежедневного потребления воды.
Установка настраиваемых целей гидратации.
Интеграция с приложениями для здоровья и фитнеса.
Проектирование и 3D-печать специального корпуса для электроники.

Мир IoT огромен и полон захватывающих возможностей. Я рекомендую вам экспериментировать с этим проектом, исследовать различные датчики и создавать собственные инновационные подключенные устройства.

Ресурсы

クイックリファレンス

項目	重要な情報
トピック	開発
関連性	患者教育と認識
対応	医療提供者との相談
頻度	ケアチームのおすすめに従い
根拠	現在の臨床ガイドラインに基づく

よくある質問

Q: これが自分に該当するかどうかはどのようにわかりますか？ A: あなたの個人的な病歴と家族歴について医療提供者と相談し、個人のリスク因子を評価し、適切な次のステップを決定してください。

Q: 医師に何を聞くべきですか？ A: 良い質問例：「私の結果は何を意味しますか？」「私のオプションは何ですか？」「どんな生活習慣の変化が役に立ちますか？」「いつフォローアップする必要がありますか？」

Q: 雰囲を変える生活変更はありますか？ A: ほとんどの健康状態は、基本的な対策から恩恵を受けます：バランスの取れた栄養、定期的な運動（週150分以上）、質の良い睡眠（7〜9時間）、ストレス管理、タバコの回避。

医療免責事項

この記事は教育目的のみを目的としており、医学的アドバイスを構成するものではありません。健康、治療、またはケアに関する決定する前に、常に資格のある医療提供者と相談してください。個人の状況は異なり、ある人に適しているものが別の人に適しているとは限りません。

救急医療に該当する場合は、直ちに119番（または現地の緊急電話番号）に電話してください。

すべての記事に戻る