Wasteman is a simple web app designed to help you report flytipping and uncollected rubbish bins.
It is built in Python, HTML, CSS, JavaScript and MySQL.
The frontend is designed in Nicepages, and consists of 8 webpages made in HTML, CSS and with JavaScript.
The backend is done using Flask, Jinja, MySQL, and deployed as a Docker image on Google Cloud.
You need to have Python installed, and install the requirements file with the command: pip3 install -r requirements.txt
Open a command prompt in the folder that contains the app.py file, and type in the following command: python3 app.py.
You can then navigate to 127.0.0.1:8080 on your browser and you will be able to use the app.
-
Needs to request camera permissions and display camera feed, store a picture in PNG, needs a space to write what the item is (max 150 characters), and it needs to request and record the location in 2 coordinates, latitude and longitude, as well as the ID of the user (generated by DB), and a status (collected/pending - automatically set to pending).
-
There needs to be a server tha that handles the interaction with the DB and with the webpage. Must have stored queries to the DB, separation of resources.
-
The information is stored in a MySQL DB, the pictures need a separate server to store them in with a pointer in the DB.
-
There need to be user profiles, one admin/collector, one regular user. Each profile needs a unique ID generated by the DB, the regular users only have POST to DB for new entries, and can only fetch locations for their own ID. The admin, is allowed to change status (collected/pending).
-
The different locations collected by a user must be displayed on a separate screen as a map. The admin needs to see all the locations collected on the map.
-
The map needs to be a Google map plugin, ideally that can plot a route between the different points on the map
The frontend is divided in HTML, CSS and Javascript. The HTML shows the content of the page, the CSS the formatting, and the JS does the logic behind the webpage. JS is only used for submitting report and displaying the point on the Google maps, all other pages are static.
The backend consists of a Python server made in Flask. There server communicates with the JavaScript in the pages using linked variables in the Python code, that allows it to receive the data from the reporting page and also submit the data to the page with the map on it. The Flask app also contains stored procedures to communicate with the MySQL DB.
The database consists of two tables, one of users, one of reports. The tables are linked by 2 foreign keys: USER_ID and REPORT_ID.
Will add user authentication, functioning Google Maps, and camera feed on report page.