Integrazione periferica

Questa sezione fornisce informazioni sulla configurazione dell'integrazione tra l'applicazione Sterling™ Store Engagement (Legacy) e dispositivi periferici quali lettori di codici a barre.

Informazioni sull'applicazione Sterling Store Engagement (Legacy)

Sterling Store Engagement (Legacy) è un'applicazione basata sul web che offre agli utenti un'interfaccia ricca di funzionalità per garantire un'esperienza di gestione del negozio efficiente e senza intoppi. È sviluppato con HTML5, AngularJS, e Bootstrap CSS e può essere utilizzato su una serie di dispositivi.

Necessità di integrazione con dispositivi periferici

La maggior parte delle operazioni del negozio richiedono la scansione dei codici a barre per i prodotti, i coupon e così via. Inoltre, l'applicazione Sterling Store Engagement (Legacy) deve interagire con i dispositivi di pagamento, rispondere alle notifiche e così via. Pertanto, è necessario che l'applicazione risponda agli eventi da dispositivi / servizi esterni come gli scanner e così via.

Soluzione

Solo le applicazioni native di un dispositivo o di una piattaforma possono comunicare direttamente con i dispositivi periferici come gli scanner di codici a barre. Tuttavia, le applicazioni ibride consentono di integrare le applicazioni web standard all'interno di un contenitore nativo in modo che possano comunicare con i dispositivi esterni. Pertanto, possiamo incorporare l'applicazione Sterling Store Engagement (Legacy) all'interno di un'applicazione wrapper nativa utilizzando la tecnologia ibrida.

Funzioni di supporto nell'applicazione

Per supportare l'integrazione con periferiche, l'applicazione fornisce i seguenti componenti per impostazione predefinita:
  • Servizio iscBarcodeScanner : fornisce un metodo di utilità denominato placeBarcodeToElement per passare i dati del codice a barre agli schermi dell'applicazione.
  • Direttiva iscBarcodeScanner : può essere utilizzata come attributo per il campo di input per l'ascolto degli eventi dello scanner del codice a barre. Fare riferimento alla documentazione JavaScript per ulteriori informazioni.
  • Provider iscCordova : fornisce un metodo di utilità denominato registerPluginInitialization per registrare il codice di inizializzazione del plugin.
  • Servizio iscPrint : fornisce un metodo di utilità denominato printHtmlOutputCustom che può essere usato per gestire la stampa con una logica personalizzata.

Creazione di un'applicazione ibrida utilizzando Apache Cordova

Nota: l'applicazione è stata testata su piattaforme Android e iOS e non su Windows.
Impostazione dell'ambiente
  1. Assicurati di aver installato l'ultima versione dell'applicazione Sterling Store Engagement (Legacy).
  2. Scaricare e installare Node.js. Fare riferimento a https://nodejs.org/en/download/.
    Nota: la funzione è stata testata con Node.js versione 5. Tuttavia, puoi usare la versione più recente di Node.js al momento della configurazione del tuo ambiente.
  3. Installa la versione più recente di Apache Cordova. Fare riferimento alle istruzioni specifiche per la piattaforma disponibili all'indirizzo https://cordova.apache.org/docs/en/latest/.
  4. Installare strumenti specifici della piattaforma. Ad esempio, Xcode per la piattaforma iOS e Android SDK per la piattaforma Android .
Configurazione del progetto Cordova
  1. Creare una cartella dello spazio di lavoro.
    cd <cordova_project_container_folder>
  2. Crea un progetto Cordova.
    cordova create <project_name> <package_name> <folder_name>

    Ad esempio, cordova create StoreAppDemo com.ibm.ise.StoreAppDemo StoreAppDemo

  3. Installare le piattaforme.
    cordova platforms add ios
cordova platforms add android
    Nota: specificare la versione, se necessario.
  4. Installare i plugin Cordova.
    cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-console
    1. Installare i plugin di base, se necessario. Per ulteriori informazioni, visitare Cordova Plugins
    2. Installare i plugin delle periferiche.
      Nota: contatta il fornitore della periferica per i driver e i plugin Cordova.
  5. Modifica il file Cordova config.xml presente in <project_folder> come segue:
    1. Impostare il valore dell'attributo di src nell'elemento content per puntare all' URLdell'applicazione. Ad esempio:
      <content src="http://localhost:8080/wscdev/store/login.do?landingpage=customerservice"/>
    2. Aggiornare i seguenti elementi in modo appropriato per consentire all'applicazione di accedere agli URL:
      <allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
      Nota: se l'applicazione deve accedere solo a determinati URL, fornire gli URL invece di *.
    3. Imposta un valore appropriato per AppendUserAgent per caricare i plugin Cordova specifici della piattaforma.
      
<preference name="AppendUserAgent" value="<UserAgentName>" />
      Nota: il<UserAgentName>deve avere "cordova" come prefisso. Ad esempio:cordova-ios,cordova-android.
    4. Configurare le impostazioni del progetto, se specificate dai plugin forniti dai fornitori di periferiche.
    5. Seguire le istruzioni aggiuntive fornite dai plugin installati.
  6. Creare e distribuire l'applicazione sul dispositivo. Per ulteriori informazioni, consultare

Modifiche lato applicazione

Nota:
Il processo di minificazione angolare considera solo le seguenti cartelle nella directory <Runtime>/extensions/wsc/webpages/ngstore/:
jsps, shared, store
Pertanto, assicurarsi che il codice personalizzato e le cartelle siano presenti in una qualsiasi delle cartelle menzionate. Nei frammenti di codice forniti in questa sezione, consideriamo shared, che dovrebbe essere creato, se non già.
  1. Copiare il contenuto di <cordova_project folder>/platforms/<platform>/platform_www nella cartella <Runtime>/extensions/wsc/webpages/ngstore/shared/<UserAgentName> .
    Note:
    • UserAgentName è il valore impostato per la preferenza AppendUserAgent in config.xml.
    • Se si sta creando il progetto per più piattaforme, ripetere il passo per ciascuna piattaforma.
  2. Aggiungi voci in customer_overrides.properties per il caricamento dei file di plugin cordova.
    yfs.wsc.cordova.supportCordovaApp=Y
yfs.wsc.cordova.useragent.<UserAgentName>=./shared/<UserAgentName>/cordova.js
    Ad esempio:
    yfs.wsc.cordova.useragent.cordova_android=./shared/cordova_android/cordova.js
yfs.wsc.cordova.useragent.cordova_ios=./shared/cordova_ios/cordova.js
    Nota: se stai ospitando i plugin cordova su un altro server, puoi fornire l' URLappropriato.
    Ad esempio:
    
yfs.wsc.cordova.useragent.<UserAgentName> = <baseurl>/<UserAgentName>/cordova.js
  3. Aggiungere il store-cordova-<feature/plugin>.config.js nella cartella <Runtime>/extensions/wsc/webpages/ngstore/store/config

    Esempio: 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);
        }
    }]);
}]);
  4. Creare e distribuire le personalizzazioni.