-
Tor-Einar Skog authoredTor-Einar Skog authored
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 thencordova 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:
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