Knowledge Base

What is the Frontline Connector template?

The Frontline Connector is primarily used to integrate customer data into workflows and allows for easy communication with mobile devices running Frontline Workplace. It serves as a connector between the Frontline suite and the customer IT. To facilitate backend integrations with Frontline, a Frontline Connector project template is offered as a basis for development.

The Frontline Connector template is a Java + Spring Boot project, using Angular for the frontend portion. The template comes with a full implementation of the Frontline Command Center API and contains classes for device communication. 

For xPick, which is Frontline's warehouse logistics solution, it additionally comes with a full implementation of the Vision Pick Interface (an interface specification the customer can develop against). Finally, it also contains a file upload interface for picking orders (CSV or Excel files) and article images providing the distinct advantage of requiring no customer-side development for quick and easy proof-of-concept.

Initial setup

The following steps allow the user to run the Frontline Connector template from an Integrated Development Environment (IDE):

1. From the Downloads section, download the latest Connector Template.
2. Import it into the IDE (tested with IntelliJ Idea). When importing libraries exclude the swagger-codegen-cli library.
3. Once the IDE detects Maven:
   1. Run the install lifecycle phase.
   2. Run the compile lifecycle phase.
4. Create a run configuration using the IntegrationService class and configure the following environment variable:   UBIMAX_HOME = <Path to a HD Folder where the Application will store logs, configuration files etc.>.
5. Run it in debug mode. When first running the template the startup will fail, but the file xservice.properties will be created in the "<UBIMAX_HOME>\config\configuration\" folder which will be used to make Frontline Connector configurable without having to recompile. The following properties need to be provided:
   1. xserver.api.key: Access the Frontline Command Center with the "sysadmin" user.
   2. server.ssl.enabled and the other SSL properties can be configured like for the Frontline Command Center.
   3. service.port: The port on which the Frontline Connector runs.
   4. xserver.remote.address: The full URL (hostname + port unless you are using the standard port 443) of the Frontline Command Center you want to connect to, for example,https://192.168.133.45:444.
   5. integration-service.url: The full URL of the Frontline Connector, for example,https://192.168.133.45:445.
   6. integration-service.url.external: The full URL of the Frontline Connector, for example,https://192.168.133.45:445 This property is required whenever the Frontline Command Center runs on Port 443.
   7. fc.db.url: For example,jdbc:mysql://<DB Hostname/IP>/<Database name>
   8. db.username, db.password
   9. In the terminal change to \webapp and run npm install and npm run build
6. After setting these properties the initial setup should be finished. 

Running the template after the initial setup

1. Select the run configuration and run it in debug mode.
2. (Optional) When working on the frontend, in order to apply changes: in the terminal change to "\webapp" and run "npm run build" again

First steps in the project

The most relevant package for development is the com.teamviewer.connector.service package. In order to communicate with devices running Frontline Workplace, the RequestHandler classes will be used, for example, for xInspect or xMake the class: service.inspection.implemention.DefaultInspectionRequestHandler

For the Picking use case, there are two fully implemented RequestHandlers. The class service.picking.implementation.FileBasedPickOrderRequestHandler contains the ready-to-use implementation of the picking logic when using the CSV or Excel order upload, while the service.picking.implementation.RestBasedPickOrderRequestHandler contains the implementation of the Vision Pick Interface.

Which RequestHandler receives which message from the devices is handled by the ServiceController classes, for example: service.picking.PickOrderServiceController

TemplateHttpConnector can be used to send HTTP requests to the customer's backend.

In order to have a good starting point, you can take a look at our Hello Machine example, consisting of a small workflow, a modified DefaultInspectionHandler, and a simple Node-Red endpoint. In this example, the Frontline Worker inspects a machine in the field. They scan a barcode from the machine using a smart glass. The barcode gets passed on to the Frontline Connector, which sends a REST request to the Node-Red endpoint containing machine diagnostics data. This data is finally displayed on the smart glass.