HealthKit und Google Fit in React Native vereinen

Im rasant wachsenden Bereich der Gesundheitstechnologie erwarten Nutzerinnen und Nutzer, dass ihre Apps nahtlos mit ihren zentralen Gesundheitsökosystemen verbunden sind – Apple Health und Google Fit. Für React-Native-Entwicklerinnen und -Entwickler stellt das eine besondere Herausforderung dar: Wie erstellen Sie eine einzige, elegante Lösung für zwei sehr unterschiedliche native Plattformen? Dieses Tutorial führt Sie durch den Aufbau einer robusten, einheitlichen API, um Gesundheitsdaten von Nutzerinnen und Nutzern sicher zu lesen und zu schreiben.

Wir werden eine React-Native-Anwendung erstellen, die Folgendes kann:

• Die Berechtigung der Nutzerin bzw. des Nutzers zum Zugriff auf Gesundheitsdaten anfordern.
• Tägliche Schrittzahlen und aktuelle Herzfrequenzmessungen auslesen.
• Eine abgeschlossene Trainingseinheit in den nativen Gesundheitsspeicher schreiben.
• Plattformspezifische Logik in einem einheitlichen Dienst abstrahieren.

Dieser Leitfaden richtet sich an Entwicklerinnen und Entwickler mit Grundkenntnissen in React Native. Wir arbeiten mit einem Bare-React-Native-Setup, um die volle Kontrolle über die nativen Projektkonfigurationen zu haben.

Warum das für Entwicklerinnen und Entwickler wichtig ist:

• Verbesserte Nutzererfahrung: Die Integration mit dem Gesundheitsspeicher auf Betriebssystemebene bietet eine nahtlose Erfahrung, da Nutzerinnen und Nutzer alle ihre Gesundheitsdaten an einem Ort sehen können.
• Datenreiche Anwendungen: Nutzen Sie wertvolle Gesundheitsdaten, um personalisierte Einblicke, Coaching und Funktionen bereitzustellen.
• Höhere App-Bindung: Apps, die Teil der täglichen Gesundheitsroutine einer Nutzerin oder eines Nutzers werden, werden mit größerer Wahrscheinlichkeit beibehalten.

Das Problem verstehen

Apple HealthKit (iOS) und der neue Nachfolger von Google Fit, Health Connect (Android), sind leistungsstarke, aber grundlegend unterschiedliche APIs. Eine naive Implementierung würde zu verflochtenem, plattformspezifischem Code führen, der sich durch Ihre gesamte App zieht.

• Plattformunterschiede: Unter iOS verwenden wir react-native-health, eine ausgereifte Bibliothek für HealthKit. Unter Android hat sich die Landschaft von der Google-Fit-API zur moderneren und datenschutzorientierteren Health-Connect-API verschoben, für die wir react-native-health-connect verwenden.
• Berechtigungsmodelle: Jede Plattform hat ihren eigenen spezifischen Ablauf zur Anforderung von Berechtigungen, der sorgfältig behandelt werden muss.
• Datenstrukturen: Die Art und Weise, wie Daten strukturiert und abgefragt werden, unterscheidet sich zwischen HealthKit und Health Connect.

Unser Ansatz besteht darin, eine Abstraktionsschicht „Health Service“ zu erstellen. Diese Schicht stellt dem Rest unserer Anwendung eine Reihe einfacher, einheitlicher Methoden bereit (z. B. getStepCount(), saveWorkout()). Intern erkennt sie das Betriebssystem und ruft die passende native Bibliothek auf.

Voraussetzungen

• Node.js und Watchman: Stellen Sie sicher, dass Node.js (LTS-Version) und Watchman installiert sind.
• React-Native-Umgebung: Eine ordnungsgemäß konfigurierte Entwicklungsumgebung für iOS und Android (Xcode und Android Studio). Folgen Sie dem offiziellen Leitfaden zur Einrichtung der React-Native-Umgebung.
• Physische Geräte: Der Zugriff auf ein physisches iPhone und ein Android-Gerät wird dringend empfohlen. Simulatoren verfügen nur über eingeschränkte oder gar keine Gesundheitsdaten.
• React-Native-Version: 0.71 oder höher wird empfohlen.

Schritt 1: Projekteinrichtung und Installation der Bibliotheken

Erstellen wir zunächst ein neues React-Native-Projekt.

npx react-native@latest init HealthApp
cd HealthApp

Nun installieren wir die erforderlichen Bibliotheken für jede Plattform.

# For Apple HealthKit on iOS
npm install react-native-health

# For Health Connect on Android
npm install react-native-health-connect

Für iOS müssen wir außerdem die Pods installieren.

cd ios && pod install && cd ..

Schritt 2: Native iOS-Konfiguration (react-native-health)

Was wir tun

Wir müssen das native iOS-Projekt so konfigurieren, dass HealthKit aktiviert wird und die Nutzerin bzw. der Nutzer erfährt, warum wir Zugriff auf ihre bzw. seine Gesundheitsdaten anfordern.

Umsetzung

1. HealthKit in Xcode aktivieren:

   • Öffnen Sie /ios/HealthApp.xcworkspace in Xcode.
   • Wählen Sie im Navigator das Projekt HealthApp und anschließend das Target HealthApp.
   • Wechseln Sie zum Tab „Signing & Capabilities“.
   • Klicken Sie auf + Capability und doppelklicken Sie auf HealthKit. Dadurch wird die Capability hinzugefügt und eine .entitlements-Datei erstellt.

2. Nutzungsbeschreibungen zu Info.plist hinzufügen:

   • Öffnen Sie in Xcode die Datei Info.plist.
   • Fügen Sie zwei neue Schlüssel hinzu, indem Sie auf das Symbol + klicken:
     • Privacy - Health Share Usage Description: Setzen Sie den Wert auf eine nutzerfreundliche Nachricht, z. B. „Wir müssen Ihre Gesundheitsdaten lesen, um personalisierte Einblicke bereitzustellen.“
     • Privacy - Health Update Usage Description: Setzen Sie den Wert auf „Wir müssen Trainingsdaten schreiben, um Ihre Aktivität in Apple Health zu erfassen.“

So funktioniert es

Durch das Aktivieren der HealthKit-Capability teilen wir iOS mit, dass unsere App mit dem HealthKit-Speicher interagieren möchte. Die Einträge in Info.plist sind für den Datenschutz entscheidend; iOS zeigt diese Texte der Nutzerin bzw. dem Nutzer an, wenn unsere App erstmals eine Berechtigung anfordert. Ohne diese Einträge stürzt die App ab.

Schritt 3: Native Android-Konfiguration (react-native-health-connect)

Was wir tun

Unter Android müssen wir die Absicht unserer App deklarieren, Health Connect zu verwenden, und die genauen Berechtigungen angeben, die wir in der AndroidManifest.xml anfordern.

Umsetzung

1. AndroidManifest.xml konfigurieren:

   • Öffnen Sie /android/app/src/main/AndroidManifest.xml.
   • Fügen Sie die erforderlichen Berechtigungen innerhalb des Tags <manifest> hinzu.

   <!-- Required to specify which Health Connect permissions the app can request -->
   <uses-permission android:name="android.permission.health.READ_STEPS" />
   <uses-permission android:name="android.permission.health.READ_HEART_RATE" />
   <uses-permission android:name="android.permission.health.WRITE_EXERCISE" />
   <uses-permission android:name="android.permission.health.READ_EXERCISE" />
   

   • Fügen Sie innerhalb des Tags <application> einen Intent-Filter hinzu, um den Bildschirm zur Begründung der Health-Connect-Berechtigungen zu verarbeiten.

   <activity
       android:name=".MainActivity"
       android:exported="true">
       <!-- ... existing intent-filter ... -->
       <intent-filter>
           <action android:name="android.health.connect.action.ACTION_HEALTH_CONNECT_SETTINGS" />
       </intent-filter>
   </activity>
   

So funktioniert es

Die Tags <uses-permission> informieren das Android-Betriebssystem und den Google Play Store über die sensiblen Daten, auf die Ihre App zugreifen könnte. Der intent-filter ermöglicht Ihrer App, korrekt per Deep Link zum Bildschirm für die Verwaltung der Health-Connect-Berechtigungen zu gelangen, was ein erforderlicher Teil des Nutzerablaufs ist.

Schritt 4: Einen einheitlichen Health-API-Dienst erstellen

Hier abstrahieren wir die Plattformunterschiede.

Was wir tun

Wir erstellen eine einzelne JavaScript-Datei, src/services/HealthService.js, die unseren React-Komponenten einen konsistenten Satz von Funktionen bereitstellt. Dieser Dienst ruft intern je nach Platform.OS die passende Bibliothek auf.

Umsetzung

Erstellen Sie ein neues Verzeichnis src/services und eine Datei HealthService.js.

// src/services/HealthService.js
import { Platform } from 'react-native';
import AppleHealthKit from 'react-native-health';
import {
  initialize,
  requestPermission,
  readRecords,
  writeRecords,
} from 'react-native-health-connect';

// Define permissions for both platforms
const permissions = {
  ios: {
    permissions: {
      read: [
        AppleHealthKit.Constants.Permissions.Steps,
        AppleHealthKit.Constants.Permissions.HeartRate,
        AppleHealthKit.Constants.Permissions.Workout,
      ],
      write: [AppleHealthKit.Constants.Permissions.Workout],
    },
  },
  android: {
    permissions: [
      { accessType: 'read', recordType: 'Steps' },
      { accessType: 'read', recordType: 'HeartRate' },
      { accessType: 'write', recordType: 'ExerciseSession' },
      { accessType: 'read', recordType: 'ExerciseSession' },
    ],
  },
};

const requestPermissions = async () => {
  if (Platform.OS === 'ios') {
    return new Promise((resolve, reject) => {
      AppleHealthKit.initHealthKit(permissions.ios, (error, results) => {
        if (error) {
          console.log('[ERROR] Failed to grant permissions!', error);
          return reject(error);
        }
        resolve(results);
      });
    });
  } else {
    try {
      await initialize();
      const granted = await requestPermission(permissions.android);
      return granted;
    } catch (error) {
      console.log('[ERROR] Failed to grant permissions!', error);
      throw error;
    }
  }
};

const getDailyStepCount = async () => {
  const today = new Date();
  if (Platform.OS === 'ios') {
    return new Promise((resolve, reject) => {
      const options = { date: today.toISOString() };
      AppleHealthKit.getStepCount(options, (err, result) => {
        if (err) {
          return reject(err);
        }
        resolve(result.value);
      });
    });
  } else {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const records = await readRecords('Steps', {
        timeRangeFilter: {
          operator: 'between',
          startTime: today.toISOString(),
          endTime: new Date().toISOString(),
        },
      });
      return records.reduce((sum, record) => sum + record.count, 0);
  }
};


// Other methods (getHeartRate, saveWorkout) will go here...

export default {
  requestPermissions,
  getDailyStepCount,
  // ... export other methods
};

So funktioniert es

Die Funktion requestPermissions verwendet Platform.OS, um zu entscheiden, ob AppleHealthKit.initHealthKit oder requestPermission von react-native-health-connect aufgerufen wird. Wir haben die Berechtigungen für beide Plattformen strukturiert definiert. Die Funktion getDailyStepCount geht genauso vor und passt Optionen sowie die Verarbeitung der Antwort an jede Bibliothek an.

Schritt 5: Daten lesen und schreiben

Vervollständigen wir unsere HealthService.js mit Funktionen für Herzfrequenz und Trainingseinheiten.

Was wir tun

Wir fügen unserem Dienst getHeartRateSamples und saveWorkout hinzu und berücksichtigen dabei erneut die Plattformunterschiede.

Umsetzung

Fügen Sie die folgenden Funktionen zu src/services/HealthService.js hinzu.

// ... inside src/services/HealthService.js

const getHeartRateSamples = async () => {
  const now = new Date();
  const yesterday = new Date();
  yesterday.setDate(now.getDate() - 1);

  if (Platform.OS === 'ios') {
    return new Promise((resolve, reject) => {
      const options = {
        startDate: yesterday.toISOString(),
        endDate: now.toISOString(),
      };
      AppleHealthKit.getHeartRateSamples(options, (err, results) => {
        if (err) {
          return reject(err);
        }
        resolve(results);
      });
    });
  } else {
    const records = await readRecords('HeartRate', {
      timeRangeFilter: {
        operator: 'between',
        startTime: yesterday.toISOString(),
        endTime: now.toISOString(),
      },
    });
    return records.map(record => ({
      value: record.samples[0].beatsPerMinute,
      endDate: record.time,
    }));
  }
};

const saveWorkout = async () => {
  const startTime = new Date();
  startTime.setHours(startTime.getHours() - 1); // 1-hour workout
  const endTime = new Date();

  if (Platform.OS === 'ios') {
    return new Promise((resolve, reject) => {
      const options = {
        type: AppleHealthKit.Constants.Activities.Running,
        startDate: startTime.toISOString(),
        endDate: endTime.toISOString(),
        energyBurned: 300, // in calories
        totalDistance: 5, // in kilometers
      };
      AppleHealthKit.saveWorkout(options, (err, result) => {
        if (err) {
          return reject(err);
        }
        resolve(result);
      });
    });
  } else {
    const records = await writeRecords([
      {
        recordType: 'ExerciseSession',
        startTime: startTime.toISOString(),
        endTime: endTime.toISOString(),
        exerciseType: 'Running',
        title: 'Morning Run',
      },
    ]);
    return records;
  }
};

export default {
  requestPermissions,
  getDailyStepCount,
  getHeartRateSamples,
  saveWorkout,
};

Alles zusammenführen

Verwenden wir nun unseren neuen Dienst in einer React-Komponente.

Umsetzung

Ersetzen Sie den Inhalt Ihrer App.tsx (oder App.js) durch Folgendes:

// App.tsx
import React, { useState, useEffect } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  Button,
  View,
} from 'react-native';
import HealthService from './src/services/HealthService';

const App = () => {
  const [hasPermissions, setHasPermissions] = useState(false);
  const [steps, setSteps] = useState(0);
  const [heartRate, setHeartRate] = useState(0);

  useEffect(() => {
    // Check for permissions on component mount
    HealthService.requestPermissions().then(setHasPermissions).catch(console.error);
  }, []);

  const fetchHealthData = () => {
    if (!hasPermissions) {
      alert('Permissions not granted!');
      return;
    }

    HealthService.getDailyStepCount()
      .then(setSteps)
      .catch(err => console.error('Steps Error:', err));

    HealthService.getHeartRateSamples()
      .then(samples => {
        if (samples.length > 0) {
          setHeartRate(samples[samples.length - 1].value);
        }
      })
      .catch(err => console.error('Heart Rate Error:', err));
  };

  const handleSaveWorkout = () => {
    HealthService.saveWorkout()
      .then(() => alert('Workout saved successfully!'))
      .catch(err => console.error('Workout Save Error:', err));
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle={'dark-content'} />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.section}>
          <Text style={styles.title}>React Native Health Demo</Text>
          <Text>Permissions Granted: {hasPermissions ? '✅' : '❌'}</Text>
        </View>
        <View style={styles.section}>
          <Button title="Fetch Health Data" onPress={fetchHealthData} />
          <Text style={styles.dataText}>Steps Today: {steps}</Text>
          <Text style={styles.dataText}>Latest Heart Rate: {heartRate} BPM</Text>
        </View>
        <View style={styles.section}>
          <Button title="Save a Test Workout" onPress={handleSaveWorkout} />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  section: {
    padding: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 8,
  },
  dataText: {
    fontSize: 18,
    marginTop: 8,
  },
});

export default App;

Führen Sie Ihre App nun auf einem physischen Gerät aus.

npx react-native run-ios --device="Your iPhone Name"
npx react-native run-android --deviceId="Your Device ID"

Sie sollten zur Erteilung von Gesundheitsberechtigungen aufgefordert werden. Nachdem Sie diese erteilt haben, können Sie Daten abrufen und eine Test-Trainingseinheit speichern!

Bewährte Sicherheitspraktiken

Die Arbeit mit Gesundheitsdaten bringt große Verantwortung mit sich.

• Minimalen Umfang anfordern: Fordern Sie nur die Berechtigungen an, die Sie für die Funktionalität Ihrer App unbedingt benötigen. Nutzerinnen und Nutzer sind gegenüber Apps misstrauisch, die alles anfordern.
• Erklären Sie den Grund: Erklären Sie der Nutzerin bzw. dem Nutzer vor dem Berechtigungsdialog in einem Modal oder auf einem Bildschirm, warum Sie ihre bzw. seine Daten benötigen und was Sie damit tun werden.
• Datenschutz: Senden Sie niemals rohe HealthKit- oder Health-Connect-Daten ohne ausdrückliche Einwilligung der Nutzerin bzw. des Nutzers und eine klare Datenschutzerklärung an Ihre Server. Anonymisieren oder aggregieren Sie Daten, wann immer möglich.
• Ablehnungen elegant behandeln: Nutzerinnen und Nutzer können Berechtigungen verweigern. Ihre App sollte nicht abstürzen. Zeigen Sie stattdessen eine Meldung an, die erklärt, dass bestimmte Funktionen nicht verfügbar sind, und bieten Sie eine Verknüpfung zu den Einstellungen an, um Berechtigungen später zu aktivieren.
• HIPAA: Wenn Ihre App im klinischen Kontext in den USA eingesetzt werden soll, müssen Sie die Vorschriften des HIPAA (Health Insurance Portability and Accountability Act) kennen, die Datenschutz und Sicherheit geschützter Gesundheitsinformationen regeln.

Fazit

Sie haben erfolgreich eine plattformübergreifende React-Native-App erstellt, die sowohl mit Apple HealthKit als auch mit Googles Health Connect integriert ist. Durch die Erstellung eines einheitlichen API-Dienstes haben Sie Ihre Anwendungslogik sauber und wartbar gehalten und den plattformspezifischen Code an einer Stelle isoliert. Diese Architektur erleichtert es, künftig Unterstützung für neue Gesundheitskennzahlen hinzuzufügen.

Der nächste Schritt besteht darin, weitere Datentypen zu erkunden, ansprechende Visualisierungen mit diesen Daten zu erstellen und Funktionen zu entwickeln, die Ihren Nutzerinnen und Nutzern auf ihrem Weg zu mehr Gesundheit echten Mehrwert bieten.

Ressourcen

• react-native-health (iOS): GitHub-Repository
• react-native-health-connect (Android): npm-Paket
• Apple-HealthKit-Dokumentation: Entwicklerdokumentation
• Google-Health-Connect-Dokumentation: Entwicklerdokumentation

Kurzreferenz

Häufig gestellte Fragen

F: Wie weiß ich, ob das auf mich zutrifft? A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrer Gesundheitsdienstleisterin bzw. Ihrem Gesundheitsdienstleister, um Ihre individuellen Risikofaktoren einzuschätzen und geeignete nächste Schritte festzulegen.

F: Was sollte ich meine Ärztin bzw. meinen Arzt fragen? A: Gute Fragen sind: „Was bedeuten meine Ergebnisse?“, „Welche Möglichkeiten habe ich?“, „Welche Änderungen des Lebensstils würden helfen?“ und „Wann sollte ich zur Nachuntersuchung kommen?“

F: Gibt es Änderungen des Lebensstils, die helfen können? A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), erholsamer Schlaf (7–9 Stunden), Stressbewältigung und der Verzicht auf Tabak.

Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich Bildungszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie stets eine qualifizierte Gesundheitsdienstleisterin bzw. einen qualifizierten Gesundheitsdienstleister, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Versorgung treffen. Die individuellen Umstände sind unterschiedlich, und was für eine Person angemessen ist, muss für eine andere nicht angemessen sein.

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