App integration

CCM19 SDK für React Native

Das CCM19 Software Development Kit (SDK) für React Native ermöglicht eine nahtlose Integration in mobile Anwendungen, die mit diesem Framework entwickelt wurden.

Voraussetzungen

Android >= 8
Java 17 (JRE/JDK)
NPM >= 8.8.0
React Native >= 0.72

Erstellen eines React Native-Projekts

Sie können die React Native Community CLI verwenden, um ein neues Projekt zu erstellen:

npx @react-native-community/cli@latest init YourProjectName

Um ein Projekt mit einer bestimmten React Native-Version zu erstellen, kann der Parameter --version verwendet werden.

npx @react-native-community/cli@latest init YourProjectName --version 0.73.6

Integration

Problem mit der automatischen Verknüpfung nativer Module

Bei der automatischen Verknüpfung (Autolinking) von Modulen in React Native werden manchmal indirekte Abhängigkeiten (transitive Abhängigkeiten) nicht berücksichtigt. Diese Abhängigkeiten sind zwar erforderlich, aber nicht direkt in der package.json des Projekts aufgeführt.

Wenn diese Abhängigkeiten fehlen, kann der Compiler sie nicht finden. Das führt oft zu Problemen wie Build-Fehlern oder unerwarteten Laufzeitfehlern. Dies kann dazu führen, dass die App abstürzt oder bestimmte Funktionen nicht verfügbar sind.

Lösung

Um dieses Problem zu lösen, sollten die fehlenden Abhängigkeiten manuell in die package.json des Projekts eingetragen werden. Dadurch wird sichergestellt, dass der Build-Prozess reibungslos abläuft und die App korrekt funktioniert.

Weitere Details zu diesem Thema finden Sie hier:

Öffnen Sie die package.json des Projekts und fügen Sie die folgenden Abhängigkeiten manuell hinzu:

{
  "dependencies": {
    "@react-native-async-storage/async-storage": ">=1.22.3",
    "@react-native-community/masked-view": ">=0.1.11",
    "@react-navigation/native": ">=6.1.16",
    "@react-navigation/native-stack": ">=6.9.25",
    "@react-navigation/stack": ">=6.3.29",
    "react-native-gesture-handler": ">=2.15.0",
    "react-native-localize": ">=3.3.0",
    "react-native-reanimated": ">=3.15.4",
    "react-native-safe-area-context": ">=4.9.0",
    "react-native-screens": ">=3.34.0"
  }
}

Es wird angenommen, dass die Abhängigkeiten react und react-native bereits vorhanden sind und daher nicht erneut angegeben werden müssen.

Führen Sie npm install aus, um die Abhängigkeiten zu installieren.

SDK zum Projekt hinzufügen

Um das SDK zu verwenden, installiere das Paket @ccm19/sdk-react-native.

Aus dem offiziellen npm-Repository

npm install --save @ccm19/sdk-react-native

Bibliothek in Ihre Anwendung importieren

Um die Bibliothek in Ihre Anwendung zu integrieren, gehen Sie wie folgt vor:

Verbinden Sie die App mit Ihrem CCM19-Account

Um Ihre Installation zu konfigurieren, importieren Sie die Klasse CCM19 in Ihr Hauptmodul und rufen Sie CCM19.configure auf, bevor Ihre App oder das ConsentWidget gerendert wird.

import { CCM19 } from '@ccm19/sdk-react-native';

// […]

CCM19.configure({
  apiKey: 'your-api-key',
  appId: 'your-app-id',
  baseUrl: 'https://cloud.ccm19.com',
});

function App(): React.JSX.Element {
  // […]
}

Die folgenden Eigenschaften sind erforderlich, um die App mit Ihrem Konto zu verbinden:

apiKey: string – Der API-Schlüssel des entsprechenden Benutzerkontos.
appId: string – Die ID des entsprechenden (App-)Projekts.
baseUrl: string – Die Basis-URL zur CCM19-Instanz.

Um das Consent-Widget zu Ihrer App hinzuzufügen, importieren Sie die Komponente ConsentWidget.

import { ConsentWidget } from '@ccm19/sdk-react-native';

Fügen Sie die ConsentWidget-Komponente beispielsweise in Ihre Hauptkomponente ein.

function App(): React.JSX.Element {
  // […]

  return (
    <SafeAreaView>
      {/* […] */}
      <ConsentWidget />
    </SafeAreaView>
  );
}

Wenn der Benutzer bisher nicht mit dem Consent-Widget interagiert hat – das heißt, es existiert keine Consent-Konfiguration – öffnet sich das Consent-Widget automatisch und fordert den Benutzer auf, seine Zustimmungseinstellungen festzulegen.

Es kann sinnvoll sein, Ihren Benutzern die Möglichkeit zu geben, ihre Zustimmungseinstellungen zu ändern oder zu aktualisieren. Dies können Sie durch einen Aufruf von CCM19.openConsentWidget erreichen.

Beispiel:

function App(): React.JSX.Element {
  // […]

  return (
    <SafeAreaView>
      <ScrollView>
        <View>
          <Section title="Your consent">
            {/* Use API function as event listener */}
            <Button title="Change consent" onPress={CCM19.openConsentWidget} />
          </Section>
        </View>
      </ScrollView>
      {/* Place the ConsentWidget component like before */}
      <ConsentWidget />
    </SafeAreaView>
  );
}

Metro starten, dann die App bauen und ausführen

Ausführung auf Android

Um Metro zu starten, führen Sie den folgenden Befehl in einem separaten Terminal aus:

npm start

# Um den Cache zurückzusetzen, verwenden Sie stattdessen diesen Befehl
npm start -- --reset-cache

Führen Sie den folgenden Befehl aus, um die App für Android zu erstellen und auf einem verbundenen Device oder einem laufenden virtuellen Device auszuführen:

npm run android

Ausführung auf iOS

Zuerst müssen Sie die CocoaPods-Konfiguration aktualisieren:

cd ios
pod install

# Switch back to the project's root directory
cd ..

Führen Sie den folgenden Befehl aus, um Metro zu starten, die App zu bauen und auf einem iDevice auszuführen:

npm run ios