Integración de dispositivos periféricos

Esta sección proporciona información sobre cómo configurar la integración entre la aplicación Sterling Store Engagement y dispositivos periféricos como, por ejemplo, escáneres de código de barras.

Acerca de la aplicación Sterling Store Engagement

Sterling Store Engagement es una aplicación basada en web que proporciona a los usuarios una interfaz con muchas características para garantizar una experiencia de gestión de tiendas eficiente y transparente. Está desarrollada con HTML5, AngularJS, y Bootstrap CSS y puede utilizarse en multitud de dispositivos.

Necesidad de integración con dispositivos periféricos

La mayoría de las operaciones de la tienda implican la exploración de códigos de barras para productos, cupones, etc. Además, la aplicación Sterling Store Engagement debe interactuar con dispositivos de pago, responder a notificaciones, etc. Por lo tanto, es necesario que la aplicación IBM Store Engagement responda a eventos de dispositivos/servicios externos como, por ejemplo, escáneres, etc.

Solución

Solo las aplicaciones nativas de un dispositivo o una plataforma pueden comunicarse directamente con dispositivos periféricos como, por ejemplo, los escáneres de código de barras. Sin embargo, las aplicaciones híbridas permiten incorporar aplicaciones web estándar dentro de un contenedor nativo para que puedan comunicarse con dispositivos externos. Por lo tanto, podemos incluir la aplicación Sterling Store Engagement dentro de una aplicación derivadora nativa utilizando tecnología híbrida.

Características de soporte en la aplicación

Para dar soporte a la integración con dispositivos periféricos, la aplicación proporciona los siguientes componentes de forma predeterminada:

Servicio iscBarcodeScanner : proporciona un método de programa de utilidad denominado placeBarcodeToElement para pasar los datos de código de barras a las pantallas de la aplicación.
Directiva iscBarcodeScanner : se puede utilizar como un atributo para el campo de entrada para escuchar sucesos de escáner de código de barras. Consulte la documentación de JavaScript™ para obtener más información.
Proveedor de iscCordova : proporciona un método de programa de utilidad denominado registerPluginInitialization para registrar el código de inicialización del plugin.
Servicio iscPrint : proporciona un método de programa de utilidad denominado printHtmlOutputCustom que se puede utilizar para manejar la impresión con una lógica personalizada.

Creación de una aplicación híbrida utilizando Apache Cordova

Nota: La aplicación se ha probado en las plataformas Android y iOS y no en Windows™.

configuración del entorno

Asegúrese de que ha instalado 17.3 o una versión posterior de la aplicación Sterling Store Engagement .
Descargue e instale Node.js. Para más información, véase https://nodejs.org/en/download/.
Nota: La característica se ha probado con Node.js versión 5. Sin embargo, puede utilizar la versión más reciente de Node.js en el momento de configurar el entorno.
Instale la versión más reciente de Apache Cordova. Para más información, consulte las instrucciones específicas de la plataforma disponibles en https://cordova.apache.org/docs/en/latest/.
Instale herramientas específicas de la plataforma. Por ejemplo, Xcode para la plataforma iOS y Android SDK para la plataforma Android .

Configuración del proyecto Cordova

Cree una carpeta de espacio de trabajo.
```
cd <cordova_project_container_folder>
```
Cree un proyecto de Cordova.
```
cordova create <project_name> <package_name> <folder_name>
```
Por ejemplo: cordova create StoreAppDemo com.ibm.ise.StoreAppDemo StoreAppDemo
Instale plataformas.
```
cordova platforms add ios
cordova platforms add android
```
Nota: especifique la versión, si es necesario.
Instale los plugins de Cordova.
```
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console
```
1. Instale los plugins base si es necesario. Para más información, visite Cordova Plugins
2. Instale los plugins de dispositivo periférico.
  Nota: Póngase en contacto con el proveedor de dispositivos periféricos para controladores y plugins de Cordova.
Modifique el archivo config.xml de Cordova presente en <project_folder> de la forma siguiente:
1. Establezca el valor del atributo src en el elemento content para que apunte al URLde la aplicación. Por ejemplo:
```
<content src="http://localhost:8080/wscdev/store/login.do?landingpage=customerservice"/>
```
2. Actualice los elementos siguientes de forma adecuada para permitir que la aplicación acceda a los URL:
```
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
```
  Nota: Si la aplicación sólo debe acceder a determinados URL, en lugar de *, proporcione los URL.
3. Establezca un valor adecuado para que AppendUserAgent cargue plugins de Cordova específicos de la plataforma.
```
<preference name="AppendUserAgent" value="<UserAgentName>" />
```
  Nota: El<UserAgentName>debe tener "cordova" como prefijo. Por ejemplo:cordova-ios,cordova-android.
4. Configure los valores del proyecto, si los especifican los plugins proporcionados por los proveedores de dispositivos periféricos.
5. Siga las instrucciones adicionales proporcionadas por los plugins que ha instalado.
Cree y despliegue la aplicación en el dispositivo. Para obtener más información, consulte

Cambios del lado de la aplicación

Nota:

El proceso de minificación angular sólo tiene en cuenta las carpetas siguientes bajo el directorio <Runtime>/extensions/wsc/webpages/ngstore/:

jsps, shared, store

Por lo tanto, asegúrese de que el código personalizado y las carpetas están presentes en cualquiera de las carpetas mencionadas. En los fragmentos de código proporcionados en esta sección, consideremos shared, que se debe crear, si todavía no lo ha hecho.

Copie el contenido de <cordova_project folder>/platforms/<platform>/platform_www en la carpeta <Runtime>/extensions/wsc/webpages/ngstore/shared/<UserAgentName> .
Notas:
- UserAgentName es el valor establecido para la preferencia AppendUserAgent en config.xml.
- Si está creando el proyecto para varias plataformas, repita el paso para cada plataforma.

Añada entradas en customer_overrides.properties para cargar los archivos de plugin de cordova.

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

Por ejemplo:

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

Nota: Si está alojando los plugins de cordova en un servidor diferente, puede proporcionar el URLadecuado.

Por ejemplo:


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

Añada store-cordova-<feature/plugin>.config.js en la carpeta <Runtime>/extensions/wsc/webpages/ngstore/store/config

Ejemplo: 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);
        }
    }]);
}]);

Cree y despliegue las personalizaciones. Para obtener más información, consulte Despliegue y despliegue de personalizaciones.