webapp

This repo implements the Plant Tracer web application. The top-level planttracer.com website is currently a static HTML site. This repo runs in a sub-domain https://app.planttracer.com/ and provides the app that runs in a browser on a mobile phone or desktop.

Code

The application consists of two parts, both of which are contained in this repo:

1. A web client written in JavaScript using the JQuery framework. Most of the app is located in (deploy/app/static/)[deploy/app/static/], although these JavaScript files require some variables set on the HTML pages served out of (deploy/app/templates/)[deploy/app/templates/] to function.

2. A back-end application written in Python using the Flask framework. This application can be served using an Apache webserver with the gunicorn application server, or using Amazon Lambda or another serverless framework.

Data Storage

Server-side storage is provided by Amazon S3 and Amazon DynamoDB. For local development and Github Actions, the Makefile will install Minio (a full-featured S3 clone) and Amazon's DynamoDBlocal (a minimal clone):

Movies, individual movie frames, and zip files containing movie frames are stored in Amazon S3.

Course data, account data, and movie frame annotations are stored in Amazon DynamoDB.

Client-side storage:

Authentication tokens are stored in a client cookie called api_key.

The user's current course is currently stored in the database, but should be moved to the client cookie.

Data Flows

Movies, movie frames, and ZIP files are downloaded from AWS S3 directly to the client using signed HTTP GET requests generated by the Python code running on the server.

Uploads of movies and movie frames are from the JavaScript client directly to S3 using signed HTTP POST commands.

The remaining static and dynamic content is downloaded from the server to the client using HTTP GET commands.

This design makes it easy to move from the server-based architecture to the AWS Lambda-based architecture, as Lambda limits HTTP GET and POST responses to 6MB and uploads to around 256KB. In a pure Lambda deployment, static content should probably be moved to a CDN.

Installation

Installation on a Virtual Machine

This repo is designed to be checked out to $HOME/webapp in the service account of the user that is running the application. The application runs out of the git repo. On a typical Amazon EC2 VM this will be /home/ec2-user/webapp.

Once it is checked out, be sure to set the (environment variables)[docs/EnvironmentVariables.rst].

Installation on a Developer's Machine

For testing, this repo can be checked out anywhere, e.g. $HOME/gits/webapp.

Once it is checked out, you will run:

make install-ubuntu # if you are on Ubuntu
make install-macos  # if you are on MacOS
make bin/mino       # to download and install minio
make bin/DynamoDBLocal.jar # to download and install DynamoDBLocal

Once you have things installed, you can try:

make make-local-demo
make run-local-demo

If that works, you can try the full-blown experience with:

make run-local

At this point is is probably a good idea to read the entire Makefile

Linux and macOS Prequisities

This code should run out-of-the-box on most Linux and macOS systems.

• Python 3.11 or above
• pip (The Makefile creates and runs out of a virtual environment)
• OpenCV (use opencv-python-headless)

To install prerequisites:

make install-ubuntu or make install-macos as appropriate.

Environment Variables

These variables are specific to Planttracer and must be set:

PLANTTRACER_S3_BUCKET - The S3 bucket to use, e.g. s3://planttrancer-demo

DYNAMODB_TABLE_PREFIX - The prefix to use for the DynamoDB tables.

DEMO_COURSE_ID - If set, Planttracer runs in demo mode, and this is the ID of the demo course.

PLANTTRACER_CREDENTIALS - A configuration file that has email credentials

Planttracer also uses these AWS environment variables, which are set to the local host or AWS as appropriate.

AWS_DEFAULT_REGION

AWS_SECRET_ACCESS_KEY

AWS_ACCESS_KEY_ID

AWS_ENDPOINT_URL_S3

AWS_ENDPOINT_URL_DYNAMODB