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

Remember: 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

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

Checking out new code

Remember to always run npm install after checking out new code from the repository. That way, new dependencies will be installed.

Translation

This tutorial has been used to enable translation.

I couldn't get the per-component translation thing working (where you embed it in <i18n> tags), so all translations go into the /locales/[languagecode].json files.

There's a simple translation example in /components/ObservationList.js:

<template>
  <div class="hello">
    <h1>{{ $t('startpage') }}</h1>
    <router-link to="/observation" custom v-slot="{navigate}">
      <button type="button" class="btn btn-primary" @click="navigate">+</button>
    </router-link>
    
    </div>
</template>

(TODO: Update this documentation when code in ObservationList changes)

Change the startup language in the app here in /i18n.js:

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'nb', // Here you can customize
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

To translate in JavaScript, refer as this.$i18n.t, e.g.:

lstPOI.push({pointOfInterestId:'undefined',name: this.$i18n.t("mapobservation.label.noPOIselected")});

Adding Internationalization

npm install vue-i18n --save

Troubleshooting

Error when running cordova emulate android

If seeing this error message

adb: failed to install [...]/vipsobservationapp/platforms/android/app/build/outputs/apk/debug/app-debug.apk: Failure [INSTALL_FAILED_VERSION_DOWNGRADE]`

...The easiest way to fix it is to wipe the emulator for data, using this command:

emulator -avd Pixel_3a_API_30_x86 -wipe-data

Replace your emulator name with the example above

Android publishing

Notes and docs

Developer account for Google Play

https://stackoverflow.com/questions/69357694/unable-to-build-app-bundle-aab-in-cordova

https://cordova.apache.org/docs/en/11.x/guide/platforms/android/plugin.html

https://developer.android.com/guide/app-bundle

https://developer.android.com/studio/publish#unknown-sources

Building a production version (signing etc).

Signing the app

For NIBIO, a signing key was originally created sometime in 2021, but it has been lost. After contacting Google Play Developer Support, we received instructions for how to generate a new key (example code):

keytool -genkeypair -alias upload -keyalg RSA -keysize 2048 -validity 9125 -keystore keystore.jks

...so we did this, and stored the keystore securely (in a dev project folder)

We then extracted the PEM to send to Google (example code)

keytool -export -rfc -alias upload -file upload_certificate.pem -keystore keystore.jks