FANNY hybrid application

Context

This project is part of the implementation of the FANNY protocol, divided into 2 main distinct projects (the API backend and the hybrid mobile application). A third project (the geolocation simulator) is also available as a development tool or for manual testing. You can learn more about the FANNY protocol itself here.

Application stack

This application uses a stack of many different technologies.

VueJS / NuxtJS

A conjunction of the famous VueJS web component oriented framework and the NuxtJS universal-ready web application framework. This helps writing blazing fast reactive interfaces and component logic.

VuetifyJS

This is a material component framework designed to work well with VueJS.

Capacitor / Ionic-native / Cordova plugins

These 3 technologies are used to provide a bridge towards mobile development. Capacitor has been chosen for its simplicity as much as for the Ionic deep experience in hybrid application development.

Why such a stack ?

As you can see, it is mainly based on web technologies. This way, you can take benefits of the HMR (Hot Module Replacement) during the logic development phase, helping improving the productivity. You can experience your application using a simple browser instead of being forced to compile for a mobile target or emulator. Capacitor is designed to allow multiple targets such as browser, iOS, Android and even Electron apps.

Quick start

The followings steps consider you already have set the bound API backend server. Let's say this API is listening on http://localhost:8000 (default Laravel host and port when serving an app).

• Copy .env.default to .env if you want to work in a development environment
• Add your env variables in it (the .env file is only read while in development mode)

# .env

# Usually used for SEO purposes, you can leave it blank
BASE_URL=
# The API host: here it should be http://localhost:8000
API_HOST=
# A bearer token used to communicate with the API (see the backend conf - outside of this scope)
AUTHORIZATION_TOKEN=
# Used for WebRTC communication as a broker,
# you can set your own PeerJS server host, port and key or leave them blank
PEER_SERVER_HOST=
PEER_SERVER_PORT=
PEER_SERVER_KEY=

• Run yarn to install dependencies
• Run yarn dev if you want to run a development server listening on localhost:3000 (with HMR)
• Create a dist/ directory in the root directory
• Run yarn cap add android to deploy an Android sub-project in the root directory (AndroidStudio required)
• Run yarn cap add iOS to deploy an iOS sub-project in the root directory (MacOS with Xcode required)
• Run yarn resources to generate platform assets
• Run sh set-config.sh to set Android & iOS configurations
• Run yarn cap sync to copy all Cordova plugins to both mobile sub-projects
• Finally run yarn build:native in order to automatically:
  • build your webapp (don't forget to set your env variables since as stated the .env is not read for a production build)
  • copy your assets from the dist/ directory to both mobile sub-projects
  • open one or another of mobile IDE (Xcode or AndroidStudio)

Commands

Install dependencies

$ yarn

Run application with HMR on localhost:3000

$ yarn dev

Run production build and start server

$ yarn build
$ yarn start

Run production build for hybrid application

$ yarn build:native

Run all linters - ESLint + StyleLint (with automatic fix)

$ yarn lint

Run all linters - ESLint + StyleLint (report only)

$ yarn lint:check

Run ESLint (with automatic fix)

$ yarn eslint

Run ESLint (report only)

$ yarn eslint:check

Run StyleLint (with automatic fix)

$ yarn stylelint

Run StyleLint (report only)

$ yarn stylelint:check

Run Prettier (write)

$ yarn prettify

Run Prettier (no write)

$ yarn prettify:check

Run all tests (unit + end-to-end)

$ yarn test

Run end-to-end tests only

$ yarn e2e

Run unit tests only

$ yarn unit

Resources / documentation

See documentation

Changelog

See CHANGELOG

Ideas / improvements / evolution

• Better BackgroundGeolocation config to increase battery saving while not degrading tracking precision
• Adding everything to become GDPR compliant
• Thinking about a public / private random UUIDs regeneration protocol (to improve anonymity) on a fixed or dynamic duration basis
• Trying to make the WebRTC implementation VPN friendly (to improve anonymity as well)
• ...

License

MIT