The Order Management App is a mobile app which is meant to run on a worker's tablet or mobile phone. We therefore need to package the app as an Android App Package, or short APK. In the following, we will show and go through one example of how you could package an app so that you can run it on an Android device, using the cross-platform native runtime for web apps, capacitor.
We are using the node package manager (npm) in this example, so if you want to follow along, we recommend you do too!
In order to package an app for Android, you need to set up an Android development environment, which includes downloading Android Studio and the Java Development Kit (JDK).
The first thing you need to do, is navigate into the app folder called order-management. Once in there, run
npm run ui:order-management:buildand wait for it to be finished. This command has now created a new folder
releasecontaining the built app.
Next, please navigate back out of the order-management folder into the root of the directory. From there, please install
- Once that is finished, you need to add a config file for
capacitorwhich you can conveniently do using the
This command will prompt you to enter the name of your app (e.g. Order Management App) and the app ID (e.g. com.actyx.orderManagement).
There are a few rules that need to be followed regarding the app ID. It must have at least two segments (one or more dots), each segment must start with a letter, all characters must be alphanumeric or an underscore [a-zA-Z0-9_].
- When you are finished, open the newly created
capacitor.config.jsonin the project root folder and change the field
webDirto the name of the build directory that you created earlier
You are now all set for the final part of this packaging guide.
With the command
npx cap add androidyou add the needed
androiddirectories to the project and with the command
npx cap open androidwhich will open up Android Studio for you.
Now, inside Android studio navigate to app > res > xml and add a file called
network_security_config.xml. Paste the following
xmlcode into the file:
In the Android studio Project/Android view, the folder
res is displayed as
- Now the only thing left is to tell your Android manifest about the newly created
network_security_config.xmlfile, so please add the highlighted line below to your
- The last thing you need to to is to navigate to
Build Bundle(s) / APK(s)>
Build APK(s)and wait for the APK to be finished being built.
Depending on your Android studio setup you may encounter a few errors here. Following these steps should do the trick though:
- install additional Android platform (29) using the SDK manager
Reload from Disk
Sync Project with Gradle Files
Invalidate caches and restart
If you still encounter issues with Android studio, please refer to the Android Developer Documentation, this is probably not a problem related to Actyx.
You have now turned your React app into an Android apk 🎉.
In our scenario, the dashboard app displays the order status. In the real-world factory, this dashboard would be a TV, powered by some industry PC, probably running Windows. Also here, you have multiple different packaging possibilities such as Cordova or React-Native. In this example, we will show you how you could do it using Electron.
- The first thing you need to do in order to add electron to your react app, you need to add a few dependencies to the root directory, so please type in the following commands into your terminal:
- Now that you have installed all necessary dependencies, please open up
package.jsoninside the root directory and change the field
mainlike the following.
- Next, create a
main.jsinside the root directory and paste in the following code:
- Now, inside the
package.jsonfile, add a command to run the electron app inside the
- Finally, to run the app on your machine, simply run
npm run electron-react. A new app window should open and load your app.
- Once that is finished, simply run
npm run makeand your application will be packaged into a native app package.
Being a headless app, we will turn the Wago Connector App into a Docker image that can be run on all sorts of headless devices. In order to create the Docker image, you need to have Docker installed on your machine. For more information, visit the Docker documentation.
A docker image is created using the
docker build command.
Additionally, you need a Dockerfile, and a Docker compose file.
These file essentially gives instructions to Docker how the image should be built.
We have created these files for you, you can find them inside the
- To build the Docker image, you now simply have to run the following npm command:
Alternatively, you can also use the
docker build command:
- To check whether the image was successfully built, type in
docker image lsinto the terminal — you should now see the image appear in the terminal window.
- If you see the image wago-connector-amd64 in your terminal window, you can now run the docker image. One thing to note is that Docker has a separate network. However, in order for the image to talk to Actyx (and in particular with the Event Service on port 4243), you need to pass this information as an environment variable so that Docker knows, where to look for the required port:
Docker does not support
host.docker.internal on Linux. Therefore, please run the image with
network=host as an argument to the
docker run command.
If everything worked, you should now see something similar to this: