Skip to content
Snippets Groups Projects
README.md 6.35 KiB

VIPS Field Observation App

The Field Pest Observation App for VIPS users

Prerequisites: node, npm, vue-cli and cordova

Make sure you have the correct versions of npm and nodejs Use nvm to install, here's how to install nvm in the first place

Then run:

nvm install --lts
sudo npm install -g @vue/cli --unsafe-perm
sudo npm install -g cordova --unsafe-perm

Build Setup (vuejs)

# install dependencies
npm install

# serve with hot reload at localhost:8080 - only for testing view layer
npm run dev

# build for production with minification - before building with Cordova
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Build/emulate with cordova

# Add browser and android platforms (haven't tested iOS yet)
cordova platform add browser
cordova platform add android

# Test in browser
cordova emulate browser

# Test on Android. Requires correct setup of the Android SDK. 
# Read more here: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
cordova emulate android

Troubleshooting Android platform builds

  • If you upgrade cordova or change the package name of the app (in config.xml), you should reset the platform, using cordova platform remove android and then cordova platform add android

Error message when starting the Android emulator

(When running cordova emulate android)

Command failed with exit code 1: apkanalyzer manifest target-sdk /home/[...]/vipsobservationapp/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema

This can be solved by installing the Android command-line tools, as per these instructions, see screen shot below:

How to install Android CLI tools

Connecting to a local server

While developing, you will want to connect to a local instance of VIPSLogic. This is done by editing the property CONST_URL_DOMAIN in /src/components/CommonUtilLocal.vue. Set it to whatever domain name you wish (e.g. vipslogic-local.no) and then edit your /etc/hosts file to point this to the IP address 10.0.2.2, like this

10.0.2.2        vipslogic-local.no

Develop the code

Don't touch the /www folder!

Normally in Cordova you would put your code here, but this is where vue-cli is putting the things that it builds.

Main template

The main layout is based on a very simple template snatched from Bootstrap. You find it in /html (at the project root level). Everything that Vuejs operates on happens inside the main element

<main id="app" role="main" class="container"></main>

You find all the Vuejs code in the /src folder

Looking at /src/main.js, the Vue app is not started until Cordova fires the deviceready event.

The router components (the "pages" in the Single Page Application that you manage) are found in /src/components. The router (paths + components definitions) is found in /src/router/index.js