React Native Apps – Neuer Standard für Barcode Scanning mit Scanbot

Einleitung

Seit seiner Veröffentlichung im Jahr 2013 gewinnt React in der Welt der Softwareentwicklung immer mehr an Bedeutung. Reactive Design Pattern ist ein bekannter Begriff geworden, obwohl dessen Entstehung leicht umstritten war.

Im Jahr 2015 tauchte auch das Entwicklungsteam von Facebook in die Welt der mobilen Entwicklung ein und schuf sein Framework namens React Native. Über die letzten Jahre hat sich React Native als eine beeindruckende Kraft in der plattformübergreifenden mobilen Entwicklung erwiesen. Lassen Sie uns mit React Native eine Barcode Scanner App erstellen.

Erste Schritte mit React

Tools

Zunächst einmal funktioniert React Native nicht wie auf magische Weise. Für den Laien ist es nur eine Schicht über der nativen iOS- und Android-Anwendung, die eine einheitliche API zum Rendern von Views bietet. Daher benötigen wir die gleichen grundlegenden mobilen Entwicklungswerkzeuge, wie bei der Entwicklung in Java oder Objective-C:

• Xcode & CocoaPods
• Android Studio

Zudem ist es ratsam, Java und den Path auf Ihre Umgebung einzustellen. Wenn Sie eine saubere Version von Android Studio nutzen und keine vorherigen Java- oder Gradle-bezogenen Installationen vorgenommen haben, sollte dies nicht notwendig sein. Dies lässt die React CLI wissen, welches Java verwendet werden soll, wenn Sie mehrere Versionen davon heruntergeladen haben. OpenJDK 8, welches Sie einfach herunterladen und installieren können, ist die vorteilhafteste Option für die Android-Entwicklung (11 sollte in Ordnung sein, 14 ist schwierig mit älteren Versionen von Gradle).

Auf Mac oder Linux wechseln Sie nun zu /Users/$USER/ und öffnen .bash_profile, .zshrc oder .bashrc mit Ihrem bevorzugten Texteditor, um die folgenden Zeilen hinzuzufügen:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home
export ANDROID_HOME=/Users/$USER/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Danach geben Sie source <filename> ein, um die Datei neu zu laden.

Beachten Sie, dass platform-tools ebenfalls dem Pfad hinzugefügt wurde. Das ist nicht erforderlich, aber sehr praktisch, um alle möglichen Dinge zu debuggen, vor allem zeigt der Befehl adb devices an, ob Sie ein debuggbares Gerät zur Verfügung haben oder nicht.

Und schließlich die Programme, die für die ordnungsgemäße Funktion der React Native-Layer erforderlich sind:

• Node.js
• Watchman

Installieren Sie alles bevorzugterweise über brew. Das Einrichten ist relativ simpel. Installieren Sie zuerst brew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Gehen Sie sicher, das brew aktuell ist und installieren Sie node:

brew update
brew install node

Nun sind Sie fast bereit, mit dem Coden zu beginnen. Ein letzter Hinweis aus dem React Native environment setup guide:

React Native hat eine integrierte Befehlszeilen-Schnittstelle. Anstatt eine bestimmte Version der CLI global zu installieren und zu verwalten, empfehlen wir Ihnen, zur Laufzeit über npx, welches im Lieferumfang von Node.js enthalten ist, auf die aktuelle Version zuzugreifen. Mit npx react-native <command> wird die aktuelle, stabile Version der CLI heruntergeladen und zum Zeitpunkt der Ausführung des Befehls durchgeführt.

Hello World!

Der schwierige Teil war das Einrichten der Umgebung. Von nun an wird die Integration reibungslos vonstattengehen. Wir werden für dieses Beispiel Typescript verwenden, da dies der heutzutage empfohlene Standard beim Schreiben von JavaScript ist. Führen Sie die folgenden Schritte aus:

npx react-native init ScanbotApp --template react-native-template-typescript

Das sollte ein paar Minuten dauern, aber es ist auch ein fantastischer Einzeiler, der alles für Sie tut: Vom Erstellen und Konfigurieren der nativen Projekte bis zur npm-Installation. Nachdem dies erledigt ist:

cd ScanbotApp
react-native run-android

Scanbot SDK

Jetzt kommen wir endlich zu den guten Sachen - Scanbot! Wenn Sie das lesen, wissen Sie wahrscheinlich, was npm ist. Ihre "Hello World"-Anwendung hat eine Datei namens package.json, die alle vorhandenen Dependencies definiert. Wie Sie sehen können, definiert React Native selbst bereits eine Menge von ihnen - alles von Linters, über Typescript bis hin zur jsx-Syntax.

Fügen wir noch eine weitere Dependency hinzu (bei den dependencies und nicht bei den devDependencies, da wir das Scanbot SDK auch während der Laufzeit benötigen, nicht nur zu Entwicklungszwecken. Installieren Sie es dann über npm install:

"react-native-scanbot-sdk": "4.1.0"

iOS

Da das Scanbot SDK für React Native ein Wrapper der nativen Version ist, besteht ein zusätzlicher Schritt darin, auch das native SDK herunterzuladen. Ab der React Native Version 0.62 werden die nativen Abhängigkeiten automatisch aufgelöst. Sie müssen nichts zum Podfile (Natives iOS Äquivalent von package.json) hinzufügen, aber Sie müssen trotzdem in den iOS-Ordner gehen und die nativen Abhängigkeiten installieren:

cd ios
pod install

Das war fast zu einfach, nicht wahr? Nun, es ist noch nicht vorbei.

Android

Um die Gradle-Level Anforderungen zu konfigurieren, empfehlen wir Android Studio, da es ein besseres Syntax-Highlighting und eine visuelle Oberfläche bietet. Sie können natürlich jeden beliebigen Text-Editor nutzen, auch Notepad wird das gewünschte Ergebnis liefern.

Für die Konfiguration von Anforderungen auf Gradle-Ebene empfehlen wir die Verwendung von Android Studio, da es eine bessere Syntaxhervorhebung und eine visuelle Schnittstelle bietet. Sie können natürlich auch einen beliebigen Texteditor verwenden - sogar Notepad ist geeignet.

Zuerst sollten Sie MultiDex aktivieren. Dies tun Sie, indem Sie  multiDexEnabled true wie folgt in Ihre  android/app/build.gradle hinzufügen:

defaultConfig {
	applicationId "com.scanbotapp"
  minSdkVersion rootProject.ext.minSdkVersion
  targetSdkVersion rootProject.ext.targetSdkVersion
  versionCode 1
  versionName "1.0"
  multiDexEnabled true
}

Die Aktivierung von MultiDex ist nur eine schicke Art zu sagen: "Ja, ich weiß, dass diese Anwendung ein schwergewichtiges ML-basiertes SDK zum Scannen von Dokumenten hat und es ist mir egal".

Innerhalb derselben Datei sollten Sie zudem spezifizieren, dass die erste Instanz von  libc++_shared.so wie folgt auf demselben Level der defaultConfig ausgewählt wird:

packagingOptions {
	pickFirst '**/libc++_shared.so'
}

Dies muss angegeben werden, da viele Abhängigkeiten von Drittanbietern über native Binaries verfügen, die die gemeinsam genutzte C++-Bibliothek verwenden (im Kontext von Gradle ist React Native selbst eine dritte Abhängigkeit die diese verwendet, ebenso wie das Scanbot SDK).

Ebenso sollten Sie android:largeHeap=”true” hinzufügen, unter dem application tag von der android/app/src/main/AndroidManifest.xml Datei. Wie folgt:

<application
  	android:largeHeap="true"
    android:name=".MainApplication"
    ...

Als Nächstes müssen Sie den Scanbot SDK Pfad zu Ihrem application-Level Gradle hinzufügen (android/build.gradle). So weiß Gradle genau, wo unser SDK zu finden ist:

allprojects {
	repositories {
  	...
    // Scanbot SDK Maven repositories:
    maven { url 'https://nexus.scanbot.io/nexus/content/repositories/releases/' }
    maven { url 'https://nexus.scanbot.io/nexus/content/repositories/snapshots/' }
	}
}

Genau dort, in Ihrem application-level Gradle, sollten Sie auch die minSdkVersion auf 21 erhöhen, da dies eine Anforderung für die neueste Version des Scanbot SDK darstellt (und das ist, sofern nicht ausdrücklich anders gewünscht, im Allgemeinen eine gute Idee - die Unterstützung der Abwärtskompatibilität unter Android 5.0 ist ein Albtraum).

Und zuletzt legen Sie fest, wo react-native-scanbot-sdk sich in Ihrem Repository befindet. Dies wird erreicht, indem man die folgenden Zeilen zur android/settings.gradle hinzufügt:

include ':react-native-scanbot-sdk'
project(':react-native-scanbot-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-scanbot-sdk/android/app')

React-Native

Falls Sie dieselbe App-Vorlage nutzen, sollten Sie auch in der Lage sein, das Folgende durchzuführen. Der Einfachheit halber fügen Sie der TextView einen Click-Handler hinzu, zum Beispiel wird die folgende Zeile:

<Text style={styles.sectionTitle} >Step One</Text>

zu:

<Text
	style={styles.sectionTitle}
	onPress={() => {
		console.log('Hello click-handler!');
	}}>
	Step One
</Text>

Dann lassen Sie uns einfach eine globale Variable erstellen, um zu entscheiden, was unser Click-Handler tun soll:

let initialized = false;

Nun, da die Grundlagen aus dem Weg geräumt sind, ist es an der Zeit, mit dem SDK zu arbeiten.

Bevor Sie beginnen, sollten Sie die Importe definieren. Für dieses Beispiel benötigen Sie nur drei Dinge. Das SDK selbst und dann zwei Options- und Konfigurationsklassen:

import ScanbotSDK, {
	BarcodeScannerConfiguration,
	InitializationOptions,
} from 'react-native-scanbot-sdk/src';

Der erste richtige Schritt ist die Initialisierung. Dies geht wie folgt:

const options: InitializationOptions = {
	licenseKey: '',
};
await ScanbotSDK.initializeSDK(options);

Um den QR- und Barcode-Scanner zu starten, sieht der Codeschnipsel wie folgt aus:

const configuration: BarcodeScannerConfiguration = {};
const result = await ScanbotSDK.UI.startBarcodeScanner(configuration);

Nur zur Übersicht, Ihr vollständiges onPress sollte so aussehen:

onPress={async () => {
	if (!initialized) {
  	const options: InitializationOptions = {
    	licenseKey: '',
      };
      await ScanbotSDK.initializeSDK(options);
      initialized = true;
      Alert.alert("SDK initialized", "Press me again to start Barcode Scanner");
	} else {
		const configuration: BarcodeScannerConfiguration = {};
		const result = await ScanbotSDK.UI.startBarcodeScanner(configuration);
		if (result?.barcodes?.length > 0) {
			Alert.alert("Barcode detected", result.barcodes[0].text);
		}
	}
}}>

Zusammenfassung & Referenzen

Während jede plattformübergreifende Lösung Ihre Probleme hat, wie z.B. interne Inkonsistenzen, gestaltet die Einfachheit und Eleganz von React die Softwareentwicklung sehr reibungslos und unterhaltsam.

Wenn Sie mehr über die Möglichkeiten von React Native und das Scanbot SDK wissen möchten, schauen Sie sich die folgenden Links an:

• Entdecken Sie die Funktionen des Scanbot SDK in unserer Demo App
• Werfen Sie einen Blick in unsere umfangreiche Dokumentation