1. Overview

2. [User Experience](#User Experience)

   • [User Stories](#User Stories)
   • First Time Visitor Goals
   • Returning Visitor Goals
   • Developer Goals

3. Wireframes

4. Design

5. Features

6. Languages Used

7. Technologies

8. Testing

9. Deployment

10. Credits

Mileage Tracker is a web application that wil be used to track the mileage of a work provided vehicle. There is a need for this in my current workplace, as currently paper based systems are still in use, which is tedious and time consuming.

1. Admin:

• Username : Administrator
• Password : Password1

2. Standard User:

• Username: User
• Password: Password1
• Usernames ARE Case sensitive at this time

• As a user, I want to be able to record the trips I am taking in a given Vehicle
• As a user, I want to be able to edit any of the previous trips I have taken incase of a typo
• As a user, I want the structure of the site to be intuitive and easy to navigate
• As a user, I want to be able to delete a Vehicle when it is no longer in the companies possession
• As a user, I want to be able to access the site on all devices, though this is primarily a mobile app
• As a user, I want access to be restricted for certain actions to Administrators, such as creating new accounts, deleting vehicles and deleting more than the previous mileage record

• A simple and responsive navigation throughout the site
• To be able to register to a mileage record
• To be able to login to the app
• To be able to log out of the app

• To be able to view past trips

• To create a database with POSTGRESQL
• To implement CRUD functionality using flask-sqlalchemy
• To create a responsive, clean and consistent UX
• To not allow users to edit/delete other users mileage records#
• To ensure there is a level of permissions so standard user's cant delete Vehicles and multiple mileage records

As a user, I want to be able to record the trips I am taking in a given Vehicle

Criteria

• Site must have a database that is fully functional

Implementation

• Install postgres database

As a user, I want the structure of the site to be intuitive and easy to navigate

Criteria

• Add a navigation menu
• Have a Register and Login page. The register page will be restricted to Admin accounts.
• Display the vehicles to select from in a structured layout on the home page

Implementation

• The UI/UX for the site has to be consistent, intuitive and responsive across all devices to achieve this

As a user, I want to be able to delete a Vehicle when it is no longer in the companies possession

Criteria

• create a delete button

• ensure the user wants to delete it Implementation

• Implement Delete functionality on the Vehicles table. Only an admin should have access to do this

As a user, I want to be able to access the site on all devices, though this is primarily a mobile app

Criteria

• have responsive site that renders well on all device sizes

Implementation

• Use materlize to ensure it scales well
• Develop with a mobile first approach, so it will always work on larger and small devices

As a user, I want access to be restricted for certain actions to Administrators, such as creating new accounts, deleting vehicles and deleting more than the previous mileage record

Criteria

• implement roles
• implement a separate page for all the admin functions
• restrict addition of roles to admin accounts
• ensure that standard users cant access any of the restricted pages

Implementation

• Alongside flask-login, I will create a decorator to ensure that the user trying to access the route has the admin role.

On initial loading, the login in screen will present itself

The navigation menu will have links to the home page and the admin console. It will also have a log out link that when clicked, logs the user out and returns them to the login page

I've chosen two main colours, to keep the theme simple and consistent. Blue and white.

I will use the standard font for this app, as it is a utilitarian app, not made to look amazing and slow down browsers

In keeping with the minimilistic theme, there is no imagery throughout the app

• The app is created using Python3 and a Flask framework to render the HTML pages.

• The app uses flask-login to implement the account functionality.

• The site is deployed via a Heroku app linked to a GitHub repository.

• The mileage records, user profiles and different vehicles are stored and served using a postgres database.

• The front end is kept simple and light. Using a card method to display different mileage records, which can be expanded to further view the details when clicked on
• The vehicle selection page is also simple, it just lists each registered vehicle as a button, clicking it will take you to the page where you can view the mileage records or enter a new one
• The admin console consists of square cards that are also links to take you to the page to render the desired functionality

• Responsiveness – The site is fully responsive to all screen sizes. This was achieved by using the materialize CSS framework and using this with a mobile first approach. As this is app will primarily be a mobile app, it was import to ensure this functionality worked.

• Navbar – The navbar was also implemented using materialize CSS. This is because it makes the creation of a mobile navigation menu painless and easy. The nav bar doesn't consist of many links, as the main navigation takes place via form and button functionality on the pages.

• Flash messages – I have used flash messages to inform users about events such as creating accounts, logging out, unauthorized access to restricted pages etc.

• On the home page, a list of the available vehicles is presented in a card form. Each one is a clickable button that takes you to another page to view more details on the vehicle.

• On this page, the last 10 mileage records are shown in a card format, allowing the user to view, edit or delete them. Each card is expandable to show all the data for that record.
• Underneath all the records, there is a button to add a new entry that takes you to a form page, where you enter the relevant details and then press enter.
• Forms – The forms on these pages are clear and concise, and responsive across all screen sizes.

• At this time, there is no functionality surrounding password resets. This is because implementing this requires use of an email address and is beyond the scope required for this project. Before it is implemented, this will be resolved
• Restriction of creation of new accounts to administrators. Again, this out of scope of the project requirements, but this will implemented before it is used in my organisation
• At this time, all users can see all vehicles and mileage records, this will be further refined before implementation

• I will create a function to export records within a specified time period to a CSV for easier processing and querying by Admins of the site

• HTML5 Used to structure the and display webpages

• Python3 Used to create the main application functionality by serving data from the database and rendering HTML templates

• CSS3 Used to style individual webpages

• Javscript Used to add some front end interactivity and for the automatic time insertion on the mileage record form

Libraries

• Flask Python web framework

• Werkzeug A comprehensive WSGI web application library installed with Flask

• Flask-Sqlalchemy Flask-SQLalchemy provides the framework for working with flask and databases in python Frameworks -Materlize Used to make a responsive and lightweight front end Database

• PostgreSQL Relational database used to store all the persistent data

Tools

• Visual Studio Code I used visual studio code as the IDE for this website. It has many extensions that make developing easier.

Deployment

• Heroku Heroku is a platform as a service (PaaS) application that provides developers with hosting and data storage in the cloud. There are many tiers of service, though I used the free one.

• The full testing document can be found here Testing

Creating a virtual python environment allows you to only install the packages required for your project and helps to stop system wide packages causing errors within your project. When using VS Code, if there is a venv folder in your project, it will automatically start the virtual environment when you open the terminal.

Note: The process may be different depending upon your own OS - please follow this Python help guide to understand how to create a virtual environment

• After initialising the venv, in your IDE terminal, install the dependencies from the requirements.txt file with the following command:

pip install -r requirements.txt

• Download the postgres client from their website postgreSQL and follow the set up guidance in the wizard.
• If you are using windows, in order to use the PSQL terminal in your IDE, you will need to set up environment variables to point to the terminal application. A Guide to do this can be found here Terminal

• The env.py file should contain the below details:
• when deploying to heroku, these also need to be configured in the config vars section

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "your_secret_key")
os.environ.setdefault("DB_URL", "postgresql:///databasename")

• Please ensure you add in your own SECRET_KEY and DB_URL values.
• Ensure that the env file is in your

• To run the application enter the following command into the terminal window:

python3 app.py

• Ensure you have an account created at Heroku
• Log in to your Heroku account dashboard and create a new app.

• Commit and push your local repository to your GitHub linked repository

• create the Procile and requirements file using the following commands:

echo web: python app.py > Procfile pip3 freeze --local > requirements.txt

• Push your local Git repository to GitHub

• In the Heroku App Settings page, open the section Config Vars

• Add all the variables from the env file as individual vars

• In the Heroku App Deploy page:

  • Select GitHub from the Deployment Method options
  • Select Connect to GitHub
  • Log in to your GitHub account from Heroku to link the App to GitHub
  • Search for and select the repository to be linked in Github
  • Select Connect
  • Select Enable Automatic Deployment from GitHub

• Then create the database in the python shell via heroku:

  • Select more, then Run console
  • Type in 'Python'
  • Once the python shell opens, type 'from mileagetracker import db'
  • then type db.create_all()

• Click Open App in Heroku to launch the App in a new browser window.

Successful deployment Heroku deployment

• Task Manager Tutorial
• Flask documentation for flask-login implementation docs