This project is a fictional service, based on a real-world application, which offers a possible user-experience.
An issue tracker web application that tracks bugs and feature requests.
An Issue tracking web application system that allows the user's to record and follow the progress of every bug or feature-request identified until the problem gets resolved. Additionally, there is the inclusion of an option for user's to donate money to fund work on future bugs and features requests.
The core focus of this project is on functional app logic created with Python while utilising the Django framework.
- Ability to create tickets for bugs and feature requests.
- View and edit existing tickets.
- Ability to send monetary donations.
- See what the site is about and its motivation before joining.
- View documentation to how the site functions and any faq's.
- Alternative to sign in/sign up with a nearby profile
- See a rundown of as of recently made tickets on users landing page
- Make/alter/update/erase own-tickets for a bug/highlight demand.
- Make/alter/update/erase own-remarks for a bug/highlight demand.
- Donate towards an element
- View and perform activities on the site on a cell phone efficiently.
Research to understand what apps of similar scope were already doing in terms of functionality. Results provided a list of what I consider to be feasible options for functionality implementations to acknowledge and consider pre-production.
- Choosing a multiple page application (MPA) takes into consideration the choice to make new content and spot it on new pages. Multi-page apps can incorporate as much data as required, for this situation, many tickets, name enrolment page, donations page, account profile, with no page confinements. To say it necessarily, because there is a fair amount of content and features included on the application, I feel that an MPA is the best decision.
- Being as this is a multi-page application, a server needs to reload most assets, for example, HTML, CSS, and Python with each interaction. When loading another page, the browser completely reloads page information and downloads all assets once more. Reloading happens even after rehashed segments throughout all pages (for example the header/navigation) which influences Speed and Execution.
- Please note, except a slight difference in page/scale responsiveness, desktop applies the same UI.
- This image represents the standard UI across most modern mobile devices.
Opted for a neutral style template with a sketched type design to project a more industrial look to the application got achieved via the use of Bootswatch framework for the theme and standard Bootstrap for the UI components base.
- A navigation bar takes up space and a fixed one even more. Due to a lot of content on display in the form of tickets, etc., I deemed it not necessary to adjust the navigation as there was no real advantage.
-
The generation of a bespoke colour was accomplished by blending RGB and Hex colours to those of a video background via the use of HTML & CSS.
A colour encyclopedia provided by ColorHexa was used to generate matching colour palettes.
A placeholder image service provided by Placeholder.com was used to provide a list of colours for reference in the README file.
-
HTML is a semantic markup language utilised as the shell of the site.
-
CSS represents Cascading Style Sheets used on the design of the site.
-
Python was utilised to compose the game logic.
-
Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
-
PostgreSQL is a general-purpose object-relational database management system. It allows you to add custom functions developed using different programming languages, in this case, Python.
-
jQuery for HTML document traversal and manipulation, event handling.
-
JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience.
-
Bootstrap utilised for developing the entire UI.
-
Font Awesome is the source for all icons.
-
Stripe is am online payment systems for making secure payments.
-
Dj Database URL enables interface with a database URL permit to utilise DATABASE_URL condition variable to arrange our Django application.
-
Whitenoise permits to serve static records from Heroku without depending on different administrations.
-
Gunicorn is a Python WSGI HTTP Server for UNIX.
-
Bootswatch used for styling generic Bootstrap components.
Heroku Postgres database was utilised for the deployed app.
- Login & Sign Up
- Ticket List
- View Ticket Details
- Comment on own tickets
- Comment on user profile
- Edit/Delete tickets
- Edit/Delete user profile
- Open new tickets based on bugs or feature requests
- Donate towards the application
- Superusers/admins can gain access via the admin panel and perform, data amendments.
- Password Update
- Username and password update
- Presently it is just conceivable to add remarks identified with the ticket; it could likewise be intriguing to enable clients to answer legitimately to a particular remark
- Internal chat feature for users to interact with one another
- Avatar integration for user profile
-
HTML
-
CSS
-
Python
-
Phones
- Galaxy Note 3 (simulation and actual device)
- Galaxy Note 9
- Galaxy S5
- Galaxy S9/S9+
- iPhone 5/SE
- iPhone 6/7/8 (simulated and real device)
- iPhone 6/7/8 Plus
- iPhone X
- LG Optimus L70
- Microsoft Lumia 550
- Microsoft Lumia 950
- Nexus 5X
- Nexus 6P
- Nokia 8110 4G
- Pixel 2
- Pixel 2 XL
-
Tablets
- iPad (simulation and actual device)
- iPad Mini
- iPad Pro (10.5-inch)
- iPad Pro (12.9-inch) (simulated and real device)
- Kindle Fire HDX
- Nexus 10
- Nexus 7
-
Laptops
- MacBook Pro (simulated and real device)
- Asus UX 305 (simulation and actual device)
-
Televisions
- 1080p Full HD Television (simulated and real device)
- Website responsiveness was also tested by resizing the window with every addition of a new code sequence.
-
External links to third party websites.
-
Checked button sizes so, they were responsive and large enough to be clicked.
-
Spell checked all text content.
-
HTML and CSS validation via w3.org.
-
Checked margins and padding of the container (sections) to ensure the content within it did not look disproportionate on various screen sizes, individually smaller devices.
Manual testing was embraced for this application and acceptably passed. An example of the tests directed are as per the following:
-
Tested route catches and hyperlinks all through the page.
-
Tested the rationale of the application by looking at expected conduct against the database record information.
-
Tested the responsiveness of the application on various programs and after that utilising multiple gadgets.
-
Registration
-
Leave an obligatory field clear
-
Input data using an invalid format
-
Apply username that as of now exists
-
Apply non-coordinating passwords
-
-
Login
-
Supplement wrong username/password
-
Supplement username that doesn't align with the password
-
Supplement password that doesn't align with the username
-
-
User Profile
-
Clear and leave an obligatory field blank
-
Input data using an invalid format
-
Apply and keep note data
-
-
Create Ticket
-
Clear and leave an obligatory field blank
-
Apply and save notes in the details field
-
Checked button size so, it was responsive and large enough to be clicked.
-
-
Ticket Details
-
Delete specific and entire ticket data
-
Navigate to
edit ticket
function via a button -
Checked button size so, it was responsive and large enough to be clicked.
-
-
Donations
-
Supplement non-substantial card number
-
Supplement a past date for card expiry date
-
Supplement non-substantial CVC.
On occasion, the CVC instalments are acknowledged, notwithstanding when CVC is left clear or notwithstanding when a not substantial CVC is embedded. According to Stripe Rules documentation.
- A table from the Bootstrap framework caused a compatibility issue with Heroku due to its large size. Adding a custom media to condense the size; made the app more responsive on mobiles.
See the Acknowledgements section for the credit given to my assistance in solving the problem.
- Initially, the file structure was quite different from the current set up; however, upon deployment to Heroku, it became an issue as the app malfunction via incorrect routing and crashing. For these reasons, the reconfiguration of file structure was necessary.
The problem was most likely because of sessions not being persisted over page loads, due to the utilisation of the session engine. In hindsight, the built-in Django user authentication model should have been preferred for user authentication.
- When tickets get deleted, the numeral system does not reconfigure. For example, if there are tickets and number two is removed, the application will not subtract from the numeral status of ticket number three to account for ticket number two's removal.
-
Make a
requirements.txt
file utilizing the terminal command 'pip freeze >requirements.txt
-
Make a
Procfile
with the terminal commandecho web: python app.py > Procfile
Example: web: gunicorn project.wsgi:application
-
git add
andgit commit
the new prerequisites from the requirements.txt file and Procfile, then 'git push' the undertaking to GitHub. -
Go to the Heroku website.
-
Make another app on the Heroku website by tapping the "New" button on your dashboard. Name your app, followed by selecting Europe as your region.
-
Select application
-
Make a point to add
your-app-name
provided byHeroku
when you created your app and apply it to theALLOWED HOSTS
section located in theproduction.py
file situated in thesettings
folder.
# Allowed Hosts
ALLOWED_HOSTS = [
'127.0.0.1',
'your-app-name',
]
-
In the "Deployment Method" section, check to see if the application is connected already to GitHub. If not connected, then click the relevant button to link the Heroku website to the dashboard.
-
Affirm the connecting of the Heroku application to the right GitHub repository.
-
In the application dashboard, click on
Settings
>Reveal Config Vars
-
Set the accompanying config vars:
- Add
whitenoise
with pip install
pip install whitenoise
- Add
whitenoise
to theMIDDLEWARE
section of located inbase.py
MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
]
-
In Heroku, access the
resources tab
then inaddons
search forHeroku Postgres
-
In your application, configure
settings.py
as follows:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': 'string',
'USER': 'string',
'PASSWORD': 'string',
'HOST': 'manny.db.elephantsql.com',
'PORT': '5432'
}
}
-
In the Heroku application dashboard, click on
Settings
>Reveal Config Vars
-
Set the accompanying config vars which should also include the
database_url
-
Log in to
Heroku CLI
login Heroku
Follow the remaining instructions which appear in your terminal.
- From the console run the following command:
heroku run python manage.py migrate --app your-app-name
The command above is for a WINDOWS operating system. However, depending on your operating system (OS), the
python
command might need changing too withpython3
Follow this instruction wherever you need to utilise this method. Also, please follow the correct documentation regarding your OS.
- Create a
superuser
heroku python manage.py createsuperuser --app your-app-name
-
Any progressions made to modals when the
makemigrations
command is run locally require obligatory submission of your migration files and deployment of the newer versions. Afterwards, runheroku run python manage.py migrate app your-app-name
to create migrations in a development environment. -
Ordinarily, you would likewise need to introduce dj-database-url, a bundle that enables us to interface with a database url, and psycopg2 yet these bundles ought to be as of now introduced after the requirements.txt establishment
- Open in terminal
- Change the present working directory to the area where you wish to place the cloned directory.
- Clone the repository or use the link below.
git clone https://github.com/sipostudent/Milestone-Project-5.git
Deploy your changes, make some changes to the code you just cloned and deploy them to Heroku using Git.
- A live demonstration is accessible by clicking here.
-
Download the project onto a PC and open with a source-code editor.
-
CD to your prefered directory, for example,
cd Desktop
and create a virtual environment.
python -m venv venv
This makes a duplicate of Python in whichever directory you ran the order in, setting it in a folder named venv.
- For utilising the virtual environment,
activate
venv\Scripts\activate
The command above is for a WINDOWS operating system. However, if you are on a MAC or LINUX operating system (OS), the
venv\Scripts\activate
command will need changing too withvenv\bin\activate
For further details, please refer to the correct documentation regarding your OS.
You would then be able to start introducing any new modules without influencing the framework default Python or other virtual environments.
- Install all of the prerequisites shown in the requirements.txt file via opening a Command-line interface (CLI) and navigating to the project root or by opening an integrated terminal and entering the following command:
Please Note: The CLI method for interacting with a computer may vary dependant upon the operating system in use.
- On the off chance that you are finished working in the virtual condition for the occasion, you can
deactivate
deactivate
The 'deactivate' direction returns you to the framework's default Python translator with all its introduced libraries.
To erase a virtual environment, simply erase its folder.
- Install all of the prerequisites shown in the requirements.txt file via opening a Command-line interface (CLI) and navigating to the project root or by opening an integrated terminal and entering the following command:
Please Note: The CLI method for interacting with a computer may vary dependant upon the operating system in use.
pip install -r requirements.txt
- Initiate the app by entering the following command into a relevant terminal:
python manage.py runserver
A message in your terminal will inform you that the project is now running with the following message:
Running on http://127.0.0.1:8000/ (Press CTRL+C to quit)
- To display the project, open the above URL or
localhost:8000
- Except for the app (online cookbook) recipes, all written content is original and created by the code author (Sipo Charles).
-
I received inspiration for this project from performing various Google Image search, which led me to various issue-tracker applications, but mostly from my interaction with other students on Code Institute's Full Stack Software Development Programme.
-
Special thanks to fellow Code Institute colleague Anna Greaves for assistance with a bespoke media query which was utilised to improve the responsiveness of the application. Sean Murphy for breaking down complex Django framework concepts and being a guide in the reconfiguration of file structure which was necessary for successful Heroku deployment. Last but not least, Simen Daehlin for his consistent on-call technical support regarding any & all matters.
This project is for educational purposes only.