AquApp is a web-based platform created to carry out the monitoring and subsequent follow-up of some physical-chemical and biological parameter of water quality of the estuarine bayous and lagoons internal system (or simply lagoon system) of Cartagena de Indias. The platform also calculates the Marine and Estuarine Water Quality Index for Fauna and Flora Preservation (ICAMpff, by its initials in Spanish), which was created by Invemar (Institute for Marine and Coastal Research).

This new version uses loopback 4 and angular. This new version also uses Mongodb, you can install it on your machine, or if you have docker, create a docker container:

docker run -d -p 27017:271017 --name aquappmdb mongo:4.0.4.

You have to map aquappdatabase to 127.0.0.1 in your /etc/hosts (C:\Windows\System32\drivers\etc\hosts in Windows) file, adding the following line:

echo "127.0.0.1 aquappdatabase" >> /etc/hosts

Install loopback cli and angular cli.

npm install -g @loopback/cli
npm install -g @angular/cli

Install their dependencies (run the following command in the api and aquapp directories):

npm install

Start the api

cd api; npm start

To stop it run

npm stop

Start the development server for the frontend:

cd aquapp
ng serve

To stop it just pres CTRL + C.

You need docker installed. Just open the command prompt and cd to the root of the project, then:

docker-compose -f "docker-compose-new-prod.yml" up

Remember to write an .env file in api/ first with the api secret and admin password!, otherwise the app will use placeholders.

SECRET_KEY=pleasefillwithsecretkeysecuence
ADMIN_PASS=thisistheadminpassword
APP_PORT=3000
APP_HOST=0.0.0.0 #bind to any ip

Note for new dev: Why a rewrite?. The api grew too hard to mantain, its previous version wasn't following a standard (thus accumulating technical debt), and it also lacks desing patterns that this new version has (like dependency injection). Regarding the frontend, it needed a rewrite, since the dashboard was awful: No way to add, edit or remove data, edit water bodies, add/remove icampffs, flush/build caches etc... Also, there were lots of repeated code, and I found a better way to integrate leaflet with angular (see ngx-leaflet) as an angular component.