trackit-issue-tracker

所属分类:PostgreSQL
开发工具:HTML
文件大小:8289KB
下载次数:0
上传日期:2022-12-08 03:54:05
上 传 者sh-1993
说明:  TrackIt问题跟踪器| Django,Stripe,PostgreSQL,dc.js
(TrackIt Issue Tracker | Django, Stripe, PostgreSQL, dc.js)

文件列表:
.travis.yml (218, 2021-10-18)
Procfile (45, 2021-10-18)
accounts (0, 2021-10-18)
accounts\__init__.py (0, 2021-10-18)
accounts\admin.py (121, 2021-10-18)
accounts\apps.py (91, 2021-10-18)
accounts\forms.py (1632, 2021-10-18)
accounts\migrations (0, 2021-10-18)
accounts\migrations\__init__.py (0, 2021-10-18)
accounts\models.py (1016, 2021-10-18)
accounts\templates (0, 2021-10-18)
accounts\templates\index.html (9313, 2021-10-18)
accounts\templates\login.html (751, 2021-10-18)
accounts\templates\profile.html (7224, 2021-10-18)
accounts\templates\registration.html (971, 2021-10-18)
accounts\templates\user_list.html (6755, 2021-10-18)
accounts\test_accounts.py (633, 2021-10-18)
accounts\test_views.py (1738, 2021-10-18)
accounts\urls.py (882, 2021-10-18)
accounts\views.py (5802, 2021-10-18)
checkout (0, 2021-10-18)
checkout\__init__.py (0, 2021-10-18)
checkout\admin.py (299, 2021-10-18)
checkout\apps.py (91, 2021-10-18)
checkout\forms.py (1655, 2021-10-18)
checkout\migrations (0, 2021-10-18)
checkout\migrations\0001_initial.py (1446, 2021-10-18)
checkout\migrations\0002_auto_20200310_2130.py (622, 2021-10-18)
checkout\migrations\0003_auto_20200323_1407.py (473, 2021-10-18)
checkout\migrations\__init__.py (0, 2021-10-18)
checkout\models.py (962, 2021-10-18)
checkout\templates (0, 2021-10-18)
checkout\templates\checkout.html (4290, 2021-10-18)
checkout\test_forms.py (633, 2021-10-18)
checkout\test_views.py (538, 2021-10-18)
checkout\urls.py (123, 2021-10-18)
checkout\views.py (2328, 2021-10-18)
custom_storages.py (252, 2021-10-18)
... ...

[![Build Status](https://travis-ci.org/tdunn891/trackit-issue-tracker.svg?branch=master)](https://travis-ci.org/tdunn891/trackit-issue-tracker) # [TrackIt Issue Tracker](https://django-issue-tracker-1.herokuapp.com/) [1]: https://tdunn891.github.io/trackit-issue-tracker [2]: https://github.com/tdunn891/trackit-issue-tracker/blob/master/trackit.gif [![Trackit GIF][2]][1] ## Purpose TrackIt was developed to provide organisations of all types an intuitive, lightweight system to log, track and resolve issues without the admin burden. In a live environment, this application would be deployed within an organisation. For example, a non-technical employee (Submitter) submits a 'Bug' to flag an internal software issue. A technical staff member (Assignee) is then assigned the Ticket and works to resolve. Or say an employee has a time-saving idea for a new software feature, they can submit a 'Feature Request' which is then assigned and tracked through to implementation. As proof of concept, the site itself was used track bugs and features during development. ## Contents 1. [**UX**](#ux) - [**5 Planes of UX**](#5-planes-of-ux) - [**User Stories**](#user-stories) 2. [**Features**](#features) - [**Existing Features**](#existing-features) - [**Potential Future Features**](#potential-future-features) 3. [**Databases**](#databases) - [**Data Models**](#data-models) - [**Data Migration**](#data-migration) 4. [**Technologies**](#technologies) 5. [**Testing**](#testing) - [**Automated Testing**](#unit-testing) - [**Manual Testing**](#manual-testing) - [**Code Validation**](#code-validation) - [**Audits**](#audits) 6. [**Deployment**](#deployment) - [**Heroku**](#heroku) - [**Local Deployment**](#local-deployment) - [**Development vs Production Versions**](#development-vs-production-versions) 7. [**Credits**](#credits) - [**Content**](#content) - [**Media**](#media) - [**Acknowledgements**](#acknowledgements) ## UX ### 5 Planes of UX #### Strategy Setting the UX strategy requires understanding the needs of the target users: Ticket Submitters want: - a straightforward ticket submission process - feedback to be assured that their issue is being worked - to spend minimal time on the site so they can return to their core tasks Ticket Assignees want: - Lots of detail about the ticket, including screenshots - Input from other users who may be experiencing the same Bug or want the same Feature Request - Ability to reassign to another Assignee if required - Graphs to gain insights - for example High Priority or aging tickets that require attention Taking the above into account, the User Experience must be clean, fast, and intuitive. #### Scope ##### Functional Specifications Existing issue trackers were researched (eg Jira, GitHub Issues) to identify key functionality users expect: - Submitting and tracking of 'Bugs' and 'Feature Requests' through to resolution. - Contributions from other users to speed up resolution. - Dashboard View of all tickets - KANBAN View ##### Content Requirements - Data tables - Input boxes for ticket filtering - DC.js, D3.js and crossfilter for dashboard charts - Dropdowns for selecting and editing fields - File Upload buttons #### Structure ##### Interaction Design - Unobtrusive navigation bar, always accessible and fixed to top - On mobile and tablet devices, navigation links collapse into a menu button - All interactive elements provide feedback to the user to encourage interaction and confirm user actions - Each row in tickets table changes opacity on hover - Navigation and pagination links change opacity on hover - All buttons have border transition on hover - Tooltips on icons on hover - Form validation exists for relevant fields - Dropdown messages confirm: User Logged In , User Logged Out, Ticket Added, Ticket Edited, Ticket Upvoted, Comment Submitted, Payment Provided. ##### Information Architecture - A multipage architecture was used to break up the large amount of information presented in the site. For example, the Add Ticket, Edit Ticket and Checkout pages require many fields and so require separate pages. - Pagination is employed in the tickets table to reduce cognitive overload. User can select how many tickets to display per page via dropdown. #### Skeleton ##### Wireframes Two sets of wireframes were created in the early development stage to set out the structure and layout on different device sizes. [Desktop & Mobile Wireframes](https://github.com/tdunn891/milestone-4/tree/master/wireframes) #### Surface Colours: Intuitive ticket colours used consistently to represent Ticket Status - Green: Resolved, Yellow: In Progress, Grey: Cancelled, Blue: New. ### User Stories As a Guest User... - I want to quickly learn the key features of the site - I want to know if sign up is free and which features are behind a paywall - I want to see a visual preview of the features before having to sign up - I want to know if this site is credible and used by well-known organisations - I want to see some customer testimonials - I want my initial questions to be answered - I want to be able to contact the developer for further information As a Registered User... - I want to submit a Feature Request that would improve my productivity - I want to submit a Bug I am experiencing without being distracted from my core tasks - I want to be able to check how many free tickets submissions I have remaining in the month on my Basic plan - I want to see a list of all tickets I have raised - I want the option to see all tickets in a KANBAN-style column view - I want to contribute to the resolution of an open issue by leaving a comment under it - I want to raise the profile of an existing ticket by upvoting it - I want the ability to unlock PRO features via online credit card payment - I want to control which personal information I share with other users - I want to be able to upload a profile image so my colleagues can put a face to the name - I want to access contact details of other users - I want to be able to request Staff access As a Registered Staff (Admin) User: - I want to easily contact a ticket's Assignee by launching a draft email from the ticket view - I want to graphically identify which tickets require attention, ie. aged and high priority tickets - I want to see which tickets have the most upvotes, to help inform work prioritisation ## Features ### Pages #### Home The Home page provides a quick introduction to the site, featuring minimal, easy to digest sections on Features, User Testimonials, Trusted By, Plans and Frequently Asked Questions. If the user is not signed in, the call to action buttons are to **Create Free Account**. If the user is already signed in, their username and profile picture will be displayed in the navigation bar and links to the Account page. If the user is signed in but not a Pro User, the call to action buttons are to **Go PRO**, The Go PRO buttons link to the Checkout page, where the user can pay to upgrade their account. ![Home View](static/images/home-view.png) #### Tickets The Tickets page allows sorting and filtering of existing tickets, and a link to create a new ticket. The table shows key information for each ticket. Clicking on the row opens the **View Ticket** page for further details. Each field can be sorted both directions, and general and field-specific search input is available. ![Tickets View](static/images/tickets-view.png) #### View Ticket The View Ticket page provides additional ticket information, including the Description, Tags, Days to Resolve (if Resolved), Age (if not Resolved) and Recent Activity. If the user is the Submitter or Staff, the **Edit Ticket** and **Status** buttons will be displayed and the user will have permission to change the Status via the dropdown, and to access the Edit Ticket page. The **Upvote** button displays how many upvotes the ticket has received, and increments on click. Profile pictures for Submitter and Assignee are displayed. The **Change History** tab allows the user to see a timeline of what has changed, when, and by whom. The **Recent Activity** section shows this in a more intuitive way. The **Comments** section displayed below the ticket allows anyone to leave a comment, which helps to speed up resolution of the ticket. ![View Ticket](static/images/view-ticket.png) #### Add Ticket Basic users can submit up to 10 tickets per month via the Add Ticket form. A message is displayed showing how many they have used in current month: ![Add Ticket Basic User](static/images/add-ticket-basic-user.png) #### Edit Ticket The Edit ticket form is accessible by the ticket's Submitter and Staff. Possible edits include reassigning the ticket, upgrading/downgrading its Priority, editing Description, Tags, Summary, uploading a screenshot. #### Dashboard Dashboard page allows visual interaction with the tickets data across 6 interconnected charts. Clicking a segment on the row and pie charts or dragging to select a date range will filter all charts. ![Dashboard](static/images/dashboard-view.png) #### KANBAN (PRO Feature) Tickets are displayed in KANBAN columns by Status: New, In Progress, Resolved, Cancelled. Given that Cancelled tickets may be less important to some users, the 'Hide Cancelled' checkbox hides them. If Basic users click the KANBAN navigation link, they are redirected to Checkout page: ![KANBAN Basic User](static/images/kanban-go-pro.png) ###### CI Assessors: please be sure to Go PRO with a test Stripe payment to access KANBAN. #### Checkout The user can upgrade their account from Basic to PRO by online credit card payment, processed by Stripe. On successful payment: ![Checkout](static/images/pro-successfully-paid.png) #### Team The Team page acts as an address book of users of the site, listing some key details. Users are split into Submitters and Staff. #### Account The Account page is where users can view and edit their account information. Users can upload a profile picture from their device, add First and Last Names, add personal Zoom Meeting IDs. The user's account status (Basic or PRO) is displayed, including a 'Go PRO' button if basic user. Submitters can request Admin Access via a link. ![Account](static/images/my-account.png) ### Existing Features - Submit a ticket - Edit a ticket - View, search and filter tickets in table view - View any ticket in further detail - Upvote any ticket - Leave a comment on any ticket - View list of other users and their details - Update their own details, including First Name, Last Name, Zoom Meeting ID - Upload a profile image - Explore tickets in Dashboard view - Visualise tickets in KANBAN - Pay to upgrade account to PRO, which allows unlimited ticket submissions per month, and KANBAN view ### Potential Future Features - Make tickets in KANBAN View draggable, so that ticket status can be changed via dragging into other column - Add filters and searching to KANBAN View, including a toggle to show only My Tickets - Limit upvotes to 1 per user per ticket. Add tooltip to show which users who have upvoted - if more than 3 users, display eg. 'Joe and 4 others'. - Add phone number field to user profile with ability to click to call via 'callto:' - Additional graphs in Dashboard view, including Age vs Priority bubble chart - Allow the Assignee to set an Estimated Resolved Date for each ticket - Reset Password function - Dark Mode setting toggle in Account page ## Databases Sqlite3 was used during development. For deployment, data tables and data was migrated to a PostgreSQL database. ### Data Models #### Accounts App In order to record additional user fields, a Profile model was created: Profile Model | Field | Type | Notes | | :------------------ | :------------ | :--------------------------------------------------- | | is_pro_user | BooleanField | If user has paid to upgrade to PRO account. | | pro_user_since_date | DateTimeField | Records date user went PRO. | | image | ImageField | Profile image, which is referred to throughout site. | | zoom_id | CharField | Zoom Personal Meeting ID | #### Tickets App Ticket Model | Field | Type | Notes | | :------------ | :---------------------------- | :---------------------------------------------------------- | | ticket_type | CharField | Choices: Bug or Feature | | summary | CharField | Short summary of ticket | | created_date | DateTimeField | Autoadds date and time of ticket creation | | resolved_date | DateTimeField | Date and time set recorded when ticket is set to 'Resolved' | | priority | CharField | Choices: Low, Medium, High | | submitted_by | ForeignKey(User) | Linked to User Model | | assigned_to | ForeignKey(User) | Linked to User Model | | description | TextField | | | tags | 'TaggableManager' Django App | Django app to save comma-separated tags. | | upvotes | IntegerField | Count of upvotes. | | screenshot | ImageField | Image file related to ticket. | | history | 'HistorialRecords' Django App | Django app to record field changes. | Note on API: Using the Django REST Framework, the Django data models are serialised to JSON via a serializers so that the data can be consumed by dashboard.js to display the charts. Comment Model | Field | Type | Notes | | :----------- | :----------------- | :------------------------------- | | ticket | ForeignKey(Ticket) | Linked to Ticket Model | | user | ForeignKey(User) | Linked to User Model | | comment_body | CharField | Comment body text | | date | DateTimeField | Date and time comment was posted | #### Checkout App Order Model | Field | Type | | :-------------- | :-------- | | full_name | CharField | | phone_number | CharField | | country | CharField | | postcode | CharField | | town_or_city | CharField | | street_address1 | CharField | | street_address2 | CharField | | county | CharField | | date | DateField | OrderLineItem Model | Field | Type | | :------- | :---------------- | | order | ForeignKey(Order) | | product | CharField | | quantity | IntegerField | ### Data Migration To ensure a rich dataset for assessment purposes, testing data (including users, tickets) was migrated from sqlite3 to the PostgreSQL database using the following method: Dump existing data into json format: `python3 manage.py dumpdata > datadump.json` Change DATABASES in settings.py to Postgres, then migrate: `python3 manage.py migrate --run-syncdb` Exclude contenttype data: ``` python3 manage.py shell >>> from django.contrib.contenttypes.models import ContentType >>> ContentType.objects.all().delete() >>> quit() ``` Load json data into PostgreSQL: `python3 manage.py loaddata datadump.json` ## Technologies - [Autoprefixer CSS Online](https://autoprefixer.github.io/) : add vendor prefixes - [AWS S3](https://aws.amazon.com/s3/) : cloud object storage service for static and media files - [Balsamiq](https://balsamiq.com/) : wireframes development - [Bootstrap](https://bootstrap.com/) : responsive webpages on all devices - [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools) : device responsiveness and audits - [crossfilter](https://github.com/crossfilter/crossfilter) : enables filters to be applied to all graphs - [CSS3](https://www.w3.org/Style/CSS/Overview.en.html) : styling language - [d3js.org](https://d3.js) : Javascript charting library - [DataTables.net](https://datatables.net) : pagination and filtering of tables - [DBDiagram](https://dbdiagram.io/) : mapping database relationships - [DBeaver](https://dbeaver.io) : database tool to confirm successful data migration from sqlite3 - [dc.js](https://dc.js) : charting Javascript library built on d3.js - [Django](https://django.io/) : high-level Python Web framework - [Django Crispy Forms](https://django-crispy-forms.readthedocs.io/) : Django form styling - [Django REST Framework](https://www.django-rest-framework.org/) : API data source for dashboard charts - [Django Simple History](https://django-simple-history.readthedocs.io) : tracking changes to model fields - [Git](https://git-scm.com/) : version control - [GitHub](https://github.com) : code repository and source branch used in deployment - [Heroku](https://www.heroku.com) : deployment - [jQuery](https://jquery.com/) : manipulate HTML elements - [LazyLoad](https://github.com/verlok/lazyload) : lazy loading of images - [Material Icons](https://material.io/) : icons and fonts - [PEP8 Validator](http://pep8online.com/) : validation of Python - [Pillow](https://pillow.readthedocs.io) : processing images in database - [PostgreSQL](https://www.postgresql.org/) : relational production database - [Stripe](https://stripe.com/) : accept online payments - [Travis](https://travis-ci.org) : continuous integration - [VSCode](https://code.visualstudio.com) : preferred code editor - [W3C Validator](https://jigsaw.w3.org) : validation of HTML & CSS ## Testing Extensive unit and manual testing was conducted to ensure the site functions and looks well on all major browsers (Chrome, Firefox, Safari, Edge) and device sizes. ### Automated Testing Django testing framework was used to conduct 34 tests. See test_xx.py files for the tests run. Travis Continuous Integration is set up to confirm the build passes on each deployment. ### Manual Testing The following manual tests passed on Desktop, Tablet and Mobile (via Chrome DevTools): ##### Home - If no user is logged in, 3 'Create Free Account' buttons are displayed - If Basic user is logged in, 3 'Go PRO' buttons are displayed. - If Pro user is logged in, 3 'Go PRO' buttons are hidden. ##### Tickets - Global search input filters in all fields. - Reset filters button reloads page. - All field-specific search boxes filter correctly. - Clicking headings orders by that field. Clicking again changes order direction. - Pagination and 'Show x tickets' per page functions correctly. - All columns are visible or accessible via horizontal scroll. - Row colours represent status. - Raise Ticket button takes user to Add Ticket page. ##### Dashboard - All 6 charts display with adequate padding. - All 6 charts be filtered on click, or range selection. - Display updates to show how many tickets are filtered - eg. 12 of 25 Tickets. ##### KANBAN - If user is not PRO user, redirect to Checkout page. - 'Hide Cancelled' checkbox toggles Cancelled column. - Ticket count and counts for each column (ticket status) are correct. - Quick update dropdown updates status a ... ...

近期下载者

相关文件


收藏者