Integration von Peripheriegeräten

Dieser Abschnitt enthält Informationen zum Konfigurieren der Integration zwischen der Anwendung Sterling Store Engagement und Peripheriegeräten wie Barcodescanner.

Informationen zur Sterling Store Engagement -Anwendung

Sterling Store Engagement ist eine webbasierte Anwendung, die Benutzern eine Schnittstelle mit vielen Funktionen bietet, um eine effiziente und nahtlose Geschäftsmanagementerfahrung sicherzustellen. Es wurde mit HTML5, AngularJS, und Bootstrap CSS entwickelt und kann auf einer Vielzahl von Geräten verwendet werden.

Notwendigkeit der Integration mit Peripheriegeräten

Die meisten Geschäftsoperationen umfassen das Scannen von Barcodes für Produkte, Coupons usw. Außerdem muss die Anwendung Sterling Store Engagement mit Zahlungsgeräten interagieren, auf Benachrichtigungen reagieren usw. Daher ist es erforderlich, dass die Anwendung IBM Store Engagement auf Ereignisse von externen Geräten/Services wie Scannern usw. reagiert.

Lösung

Nur Anwendungen, die für ein Gerät oder eine Plattform nativ sind, können direkt mit Peripheriegeräten wie Barcodescanner kommunizieren. Hybridanwendungen ermöglichen es jedoch, Standardanwendungen in einen nativen Container einzubetten, sodass sie mit externen Geräten kommunizieren können. Daher können wir die Anwendung Sterling Store Engagement in eine native Wrapperanwendung mit Hybridtechnologie integrieren.

Unterstützende Features in der Anwendung

Zur Unterstützung der Integration mit Peripheriegeräten stellt die Anwendung standardmäßig die folgenden Komponenten bereit:

iscBarcodeScanner -Service: Stellt eine Dienstprogrammmethode namens placeBarcodeToElement bereit, um die Barcodedaten an die Anwendungsanzeigen zu übergeben.
iscBarcodeScanner -Anweisung: Sie kann als Attribut des Eingabefelds für die Empfangsbereitschaft für Barcode-Scannerereignisse verwendet werden. Weitere Informationen finden Sie in der Dokumentation JavaScript™.
iscCordova -Provider: Stellt eine Dienstprogrammmethode mit dem Namen registerPluginInitialization für die Registrierung des Plug-in-Initialisierungscodes bereit.
iscPrint -Service: Stellt eine Dienstprogrammmethode mit dem Namen printHtmlOutputCustom bereit, die für das Drucken mit einer angepassten Logik verwendet werden kann.

Hybridanwendung mit Apache Cordova erstellen

Hinweis: Die Anwendung wurde auf den Plattformen Android und iOS getestet, nicht auf Windows™.

Umgebung einrichten

Stellen Sie sicher, dass Sie 17.3 oder eine höhere Version der Sterling Store Engagement -Anwendung installiert haben.
Laden Sie Node.js herunter und installieren Sie es. Für weitere Informationen, siehe https://nodejs.org/en/download/.
Hinweis: Das Feature wurde mit Node.js Version 5 getestet. Sie können jedoch die neueste Version von Node.js verwenden, wenn Sie Ihre Umgebung einrichten.
Installieren Sie die neueste Version von Apache Cordova. Weitere Informationen finden Sie in den plattformspezifischen Anweisungen, die unter https://cordova.apache.org/docs/en/latest/.
Installieren Sie plattformspezifische Tools. Beispiel: Xcode für die Plattform iOS und Android SDK für die Plattform Android .

Cordova-Projekt einrichten

Erstellen Sie einen Arbeitsbereichsordner.
```
cd <cordova_project_container_folder>
```
Erstellen Sie ein Cordova-Projekt.
```
cordova create <project_name> <package_name> <folder_name>
```
Beispiel: cordova create StoreAppDemo com.ibm.ise.StoreAppDemo StoreAppDemo
Installieren Sie Plattformen.
```
cordova platforms add ios
cordova platforms add android
```
Hinweis: Geben Sie bei Bedarf die Version an.
Installieren Sie Cordova-Plug-ins.
```
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console
```
1. Installieren Sie bei Bedarf die Basis-Plug-ins. Weitere Informationen finden Sie unter Cordova Plugins
2. Plug-ins für Peripheriegeräte installieren.
  Anmerkung: Wenden Sie sich an den Anbieter von Peripheriegeräten für Treiber und Cordova-Plug-ins.
Ändern Sie die Cordova-Datei config.xml in der Datei <project_folder> wie folgt:
1. Legen Sie den Wert des Attributs src im Element content so fest, dass er auf die URLder Anwendung verweist. Beispiel:
```
<content src="http://localhost:8080/wscdev/store/login.do?landingpage=customerservice"/>
```
2. Aktualisieren Sie die folgenden Elemente entsprechend, damit die Anwendung auf die URLs zugreifen kann:
```
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
```
  Hinweis: Wenn die Anwendung nur auf bestimmte URLs zugreifen soll, geben Sie anstelle von * die URLs an.
3. Legen Sie einen entsprechenden Wert für AppendUserAgent fest, um plattformspezifische Cordova-Plugins zu laden.
```
<preference name="AppendUserAgent" value="<UserAgentName>" />
```
  Hinweis :<UserAgentName>sollte "cordova" als Präfix. Beispiel:cordova-ios,cordova-android.
4. Konfigurieren Sie die Projekteinstellungen, sofern sie von den von Anbietern von Peripheriegeräten bereitgestellten Plug-ins angegeben werden.
5. Befolgen Sie alle zusätzlichen Anweisungen, die von den installierten Plug-ins bereitgestellt werden.
Erstellen und implementieren Sie die Anwendung auf dem Gerät. Weitere Informationen finden Sie unter

Anwendungsseitige Änderungen

Hinweis:

Bei der Winkelkompression werden nur die folgenden Ordner unter dem Verzeichnis <Runtime>/extensions/wsc/webpages/ngstore/berücksichtigt:

jsps, shared, store

Stellen Sie daher sicher, dass Ihr angepasster Code und Ihre angepassten Ordner in einem der genannten Ordner vorhanden sind. In den Code-Snippets, die in diesem Abschnitt bereitgestellt werden, betrachten wir shared, das erstellt werden sollte, falls nicht bereits geschehen.

Kopieren Sie den Inhalt von <cordova_project folder>/platforms/<platform>/platform_www in den Ordner <Runtime>/extensions/wsc/webpages/ngstore/shared/<UserAgentName> .
Hinweise:
- UserAgentName ist der für die Vorgabe AppendUserAgent in config.xmlfestgelegte Wert.
- Wenn Sie das Projekt für mehrere Plattformen erstellen, wiederholen Sie den Schritt für jede Plattform.

Fügen Sie in customer_overrides.properties Einträge zum Laden der Cordova-Plug-in-Dateien hinzu.

yfs.wsc.cordova.supportCordovaApp=Y
yfs.wsc.cordova.useragent.<UserAgentName>=./shared/<UserAgentName>/cordova.js

Zum Beispiel:

yfs.wsc.cordova.useragent.cordova_android=./shared/cordova_android/cordova.js
yfs.wsc.cordova.useragent.cordova_ios=./shared/cordova_ios/cordova.js

Hinweis: Wenn Sie die Cordova-Plug-in auf einem anderen Server hostet, können Sie die entsprechende URLangeben.

Zum Beispiel:


yfs.wsc.cordova.useragent.<UserAgentName> = <baseurl>/<UserAgentName>/cordova.js

Fügen Sie store-cordova-<feature/plugin>.config.js im Ordner <Runtime>/extensions/wsc/webpages/ngstore/store/config hinzu.

Beispiel: store-cordova-barcode.config.js

angular.module("store").config(["iscCordovaProvider",function(iscCordovaProvider){
    // Cordova initialization start
    iscCordovaProvider.registerPluginInitialization(["iscBarcodeScanner",function(iscBarcodeScanner){
        if(<check for plugin available>){
            //Initialize the corova barcode plugin if necessary
            // Configure the barcode plugin settings to call a method on barcode scan
            // Refer the plugin documentation for acessing the barcode data.
            // call iscBarcodeScanner.placeBarcodeToElement method pass bardcode data for application
            // eg iscBarcodeScanner.placeBarcodeToElement(data.barcode);
        }
    }]);
}]);

Erstellen und implementieren Sie die Anpassungen. Weitere Informationen finden Sie unter Bereitstellen und Bereitstellen von Anpassungen.