Weather and Quality Control for Seismic
This project is about a tool for seismic/geophysical data acquisition companies to use weather data and a support blog to plan their operations, daily activities on crew and interactions with the client.
Index
Site Live Link (https://pp4-ci-wqcs.herokuapp.com/)
1. Project Goals
2. Considerations
3. Project Board
4. User Experience
5. Data Model
6. Design Choices
7. Wireframes
8. Technologies used
9. Features
10. Validation
11. Testing
12. Bugs
13. Deployment
14. Credits
15. Acknowledgements
1 . Project Goals
The goal of the project is to create a site that is useful for planning the daily activities of seismic or other geophysical data acquisition.
As weather conditions are important factors that have a direct impact on planning and costs, the idea of the website is to provide a tool to gather and analyse weather information, along with a blog with different topics to discuss usual issues found in this kind of work, in light of solving them in a centralised application, fact that is very valuable in crews with many workers, in remote locations.
As wind and temperature might be the most important factors in terms of impact, they are show separately in two independents groups, with a third group with other weather information where the user can select what to get and analyse.
Also, as remote locations might have difficulties for Internet connections (physical connections in early days, nowadays perhaps cost constraints only) and weather information might be compromised, at least the blog is intended to help on the resolution of issues in a centralised way, using a unique channel, factor that might be critical under usual conditions of work under pressure where "noisy" communications are always unwanted.
Additionally, an instructions page is given to help on the use of the site, and a contact page with a form where the user can send feedback if desired.
Back to Index
2 . Considerations
If opening the project with Gitpod from GitHub (top right green button), please run the following command as new workspaces need to have their dependencies: pip3 install -r requirements.txt
Please keep in mind that the interaction with the database and corresponding display of data is slow, it might take several seconds until the data is display on tables and/or Google Charts.
Back to Index
3 . Project Board
A project board was created in GitHub to help on the planning of the work when building the site; it can be observed here (https://github.com/csc7/PP4_CI_WQCS/projects/1).
In addition, issues can directly be found here (https://github.com/csc7/PP4_CI_WQCS/issues)
Back to Index
4 . User Experience
UX has been addressed around Jesse James Garrett's process, whose five planes involves the following matters:
- STRATEGY: to build a website (product) that helps on the planning and activities of a seismic/geophysical data acquisition crew.
- SCOPE: the minimum viable product needs to include features that allow the user to know the following:
- Instruction page to let the user how to use the site.
- Weather page where the user can gather and analyse weather data from any point in the world that is picked on a map.
- Blog page where the user can use to post issues, comment, send consultations and find solutions.
- Contact page where the user can send feedback or report site issues.
- STRUCTURE: the information is structured as follows:
- Instructions page (index.html).
- Weather page with a map on top left, selection of point top right, current data below this selection panel, and visualization of data on the bottom of this page.
- Blog page where topics are shown on the body.
- Topic pages, corresponding to the topics mentioned above, to read and post comments.
- Contact form page.
- Fixed navigation bar on top.
- Footer.
- Sign-in page.
- Sign-up page.
- Sign-out page.
- 404 page to let the user know of any error while loading the site.
- SKELETON: the information is accessed through a fixed navigation menu on top of the pages.
- SURFACE: the website is based on a contrast between white and RGB(49, 49, 48), with some titles in RGB(76, 76, 211); some other variations close to these three colours are also present to enhance contrast.
User Goals
- To find an interactive website.
- To navigate through a responsive website.
- To have a page where it is possible to get and analyse weather data for planning the work.
- To have a blog where issues can be consulted, posted, commented and solved.
- To be able to contact the site administrator, owner and/or developer if desired.
Back to Index
Site Owner Goals
- To provide an interactive website.
- To provide a responsive website.
- To provide a tool to plan the data acquisition activities.
- To provide a tool to solve issues found during data acquisition works.
- To give users the chance to contact the site administrator, owner and/or developer.
- To provide a basic and scalable tool and framework for planning seismic/geophysical data acquisition activities on a remote crew.
Back to Index
User Stories
User stories are divided into the following three groups:
-
First time users
- As a user, I want to have a description of the site with instructions, so I know how to use it and refer to them if needed.
- As a user, I want to have a weather application so I can find a place on the world and get its current weather information.
- As a user, I want to be able to select the location for the weather information on a map, so I can find the location visually.
- As a user, I want to be able to select the location for the weather information on the same map manually, so I can go directly to the place if I have the coordinates.
- As a user, I want to be able to analyse the weather information in three groups (wind, temperature and "other"), so I immediately get the most relevant data (wind and temperature) for the planning of the work.
- As a user, I want to be able to display the weather information for the last 5, 15 or all days, so I can focus on the segment I consider most important.
- As a user, I want to be able to display the weather information on charts, so it is more convenient for interpretation and a visualization.
- As a user, I want to have a blog so I can discuss HSE matters (including incidents) during data acquisition.
- As a user, I want to have a blog so I can discuss issues related to the facilities of the base camp with the Camp Boss.
- As a user, I want to have a blog so I can get help on IT related issues on crew.
- As a user, I want to have a blog so I can discuss general technical issues during data acquisition.
- As a user, I want to have a blog so I can discuss survey matters.
- As a user, I want to have a blog so I can discuss management matters of the crew.
- As a user, I want to have a blog so I can discuss the ongoing tasks related to the QA/QC of the data being acquired.
- As a user, I want to have a blog so I can discuss the ongoing tasks related to the processing of the data being acquired.
- As a user, I want to have a blog so I can discuss the status of the vehicles on crew and its mechanical issues (if any).
- As a user, I want to have a blog so I can check the personnel available on crew.
- As a user, I want to be able to contact the site administrator and/or owner and/or developer, so I can send feedback to them.
- As a user, I want to be able to find the sign-up button easily, so I can quickly access the site.
-
Returning users
- As a returning user, I want to be able to contact the site administrator and/or owner and/or developer, so I can send feedback to them.
- As a returning user, I want a navigation menu on top and always visible, so I can access any content on the website from there and do not need to use the back button of the browser.
- As a returning user, I want to be able to find the sign-in and sign-out buttons easily, so I can quickly access the site.
- As a returning user, I want to have a way to contact the developer so I can contribute and/or indicate errors or bugs.
- As a returning user, I want to be informed if the contact form goes through, so I know if my message is sent or it is not.
-
Site Owner
- As owner, I want to provide a description of the site, with instructions, so users know how to use it.
- As owner, I want to create a tool that provides weather information around the world, so users can use it to plan seismic/geophysical data acquisition activities, or any other work that depends on weather conditions.
- As owner, I want to create a blog, in the same tool, so users can present, discuss, solve issues and find solutions about their daily activities on crew.
- As owner, I want to receive feedback from users, so I can take actions in response to them if needed.
- As owner, I want to provide a navigation menu on top and always visible, so users can access any content at any time without needing the back button.
- As owner, I want to give as many options to be contacted as possible, so users can choose forms or links in the footer to send their consultations and/or feedback in a very fast way.
- As owner, I want to have users registered and ask them to sign-in to access all site capabilities, so the site is accessible to members of the crew and an administrator (e.g., a member of the management team like the Party Manager or Admin) can act as moderator.
- As owner, I want to set the basis of a product, so I can improve it in the future and adapt it to specific crews or projects.
- As owner, along with other points of this section, I want to show my work and give the option to users to contact me if they wish.
- As owner, I want to provide a responsive website, so user can access it from any device without any constraint to navigate, find and/or use the website.
- As owner, I want to inform users if they consultation/message was successfully sent, so they know if they need to resend it or they do not.
Back to Index
User Requirements and Expectations
- A fixed and responsive navigation menu on top.
- A dedicated page for the instructions.
- A dedicated page for the weather information.
- A dedicated page for blog.
- A dedicated page for the contact form.
- A footer with contact links to the developer.
- Use of Django templates/pages for sign-up, sign-in, sign-out.
Back to Index
5 . Data Model
The project is based in data provided by OpenWeather (https://openweathermap.org/) and Django models for the support (blog) page. Design and structure of Post and Comment tables are copied from the Code Institute "I Think Therefore I Blog" project. The following chart shows the data involved and how they are related:
The following are the tables involved in the relational model, along with data types and measurement units.
Find OpenWeather API information here (https://openweathermap.org/current).
Since the planning should be based on date and time, all entries and tables are related to the Weather Data and Time table, whose primary key (ID) relates the data to the specific date and time.
-
WEATHER DATA AND TIME
- ID: integer, primary key
- Date: date
- Time: custom field (time)
-
WEATHER WIND DATA
- ID: integer
- Wind Speed: float, meter/second
- Wind Direction: float, degrees
- Rec ID: integer, foreign key
-
WEATHER TEMPERATURE DATA
- ID: integer
- Temperature: float, Kelvin, converted to Celsius
- Feels Like: float, Kelvin, converted to Celsius
- Minimum Temperature: float, Kelvin, converted to Celsius
- Maximum Temperature: float, Kelvin, converted to Celsius
- Rec ID: integer, foreign key
-
WEATHER OTHER DATA
- ID: integer
- Pressure: float, hPa (atmospheric pressure)
- Humidity: float, percentage
- Visibility: float, meters
- Sky: float, cloudiness, percentage
- Main: text, weather parameters (rain, snow, etc.)
- Description: text, weather condition
- Sunrise: custom (time), sunrise time, UNIX, UTC
- Sunset: custom (time), sunset time, UNIX, UTC
- Rec ID: integer, foreign key
-
POST
- ID: integer, primary key
- Title: text
- Slug: text
- Author: text
- Feature Image: image
- Excerpt: text
- Updated: date
- Content: text
- Created: date
- Status: integer
- Like: boolean
-
COMMENT
- ID: integer, primary key
- Name: text
- E-mail: text
- Body: text
- Created: date
- Approved: boolean
- Post: integer, foreign key
-
CONTACT FORM
- ID: integer, primary key
- Date: date
- Time: custom (time)
- Name: text
- Surname: text
- E-mail: text
- Description: text
Back to Index
6 . Design Choices
The design was planned to cover screen sizes from 320x568px to 1920x1370px.
Colours
White and RGB(49, 49, 48), with some titles in RGB(76, 76, 211). Other variations close to these three colours are also present to enhance contrast. The background of the body was set to RGB(236, 238, 238) in order to have a good contrast as well.
Back to Index
Fonts
Google fonts (please see credits section below) were implemented on the website. Heebo (Medium 500) for titles and Oxygen (Regular 400) for paragraphs. Sans-serif font is used as a back-up in case the previous font cannot be loaded.
Back to Index
Structure
The metadata includes the following keywords to help search engines to find the website: Seismic, geophysical, acquisition, processing, crew, field, weather, technical support, database, wind, temperature, Code Institute, software development, student, full-stack course, milestone project.
The website consists of four pages (with subpages for the blog topics), organised in a header, a body and a footer. Django templates/pages have been used for sign-up, sign-in, sign-out and 404.
Wireframes were developed at the beginning in order to have a first design of the website.
-
Header
In order to achieve the goals related to easiness and/or simplicity, a fixed navigation area in the header is provided. In the same area, a logo with the idea of the website is place to the left. The header contains the logo on the left, the navigation bar with the four links to the body pages in the middle and the sign-up, sign-in and sign-out buttons on the right.
-
Body
The body of the pages are structured as follows for each of the pages:
-
Instructions:
It contains a description of the main purpose of the website and three sections with instructions for each of the other pages: Weather, Blog and Contact.
-
Weather:
It has a map on top left, selection of point on top right, current data below this selection panel, and a visualization panel of the data on the bottom of this page, below a row panel to select the amount of days to visualise and other data to show.
-
Blog:
It contains boxes with each topic of the blog to access.
-
Contact:
It has a simple contact form with name, surname, e-mail and description fields.
-
Footer
The footer contains links for social media (LinkedIn and GitHub) and e-mail. It is designed to remain at the bottom of the pages to have the links visible to promote the developer of the website.
Back to Index
7 . Wireframes
Wireframes were developed in order to gather goals, user stories, requirements and expectations, and have the design references for desktop, tablet and mobile devices. Please check the PDFs files for each case in the following links:
PDF File for Desktop Wireframe
Back to Index
8 . Technologies Used
The following languages, software and tools were implemented using Windows 10 Pro:
Languages
-
HTML
-
CSS
-
JavaScript
-
Python
Back to Index
Software, Frameworks, Applications and Other Tools
-
GitHub
-
Gitpod
-
Django 3.2
-
jQuery
-
django-allauth
-
PostgreSQL
-
Font Awesome (v5.15)
-
Bootstrap (v4.0)
-
unittest
-
Balsamiq Wireframes (v4.2.4, Editor Version 2.6.0)
-
ERDPlus, to make the data model graph
-
Google Fonts
-
W3C Markup Validation Service
-
W3C CSS Validation Service
-
JSHint (version 2.13.0)
-
JavaScript AJAX
-
WAVE Web Accessibility Evaluation Tool
-
Google Lighthouse (used in Google, Microsoft Edge and Firefox)
-
Google Chrome, version 97.0.4692.71, Official Build, 64-bit (and its development tool)
-
Microsoft Edge, version 97.0.1072.62, Official build, 64-bit (and its development tool)
-
Firefox, 96.0.3, 64-bit (and its development tool)
-
Microsoft Internet Explorer, version 2004, OS Build 19041.1415, Microsoft Corporation
Back to Index
9 . Features
The site consists of four pages, where each of them is divided in three parts: header, body and footer. The features contained in each of the pages and parts are the following ones:
-
Fixed navigation menu
It is in the header, fixed on all pages to facilitate navigation, and responsive.
User Stories Addressed by this Feature: 19; 21; 29; 33 and 34.
Please check "11. Testing of User Stories" for more details.
-
Instructions App
They can be found in the Instructions page (home), they explain how to use the weather and blog pages.
User Stories Addressed by this Feature: 1; 25; 33 and 34.
Please check "11. Testing of User Stories" for more details.
-
Weather App
It can be found in the Weather page and allows users to collect and analyse weather information.
User Stories Addressed by this Feature: 2; 3; 4; 5; 6; 7; 26; 33 and 34.
Please check "11. Testing of User Stories" for more details.
-
Blog App
It can be found in the Blog page and allows users to send and consult issues they find in their daily activities and find solutions for them.
User Stories Addressed by this Feature: 8; 9; 10; 11; 12; 13; 14; 15; 16; 17; 27; 33 and 34.
Please check "11. Testing of User Stories" for more details.
-
Contact App
It can be found in the Contact and allows users to contact the website developer. It prevents the form to be sent with incomplete fields, informs the user if the message goes through and disables the send button in order not to send the consultation more than once.
User Stories Addressed by this Feature: 18; 20; 28; 30; 33 and 34.
Please check "11. Testing of User Stories" for more details.
-
Footer
It is located at the bottom of all pages, containing icons with links to LinkedIn, GitHub and e-mail application (to automatically load developer's e-mail address in the addressee field).
User Stories Addressed by this Feature: 18; 20; 23; 28; 30; 33 and 34.
Please check "11. Testing of User Stories" for more details.
-
Registration
They are Django complementary tools and pages to have registration options in the site for users. There are sign-in, sign-up and sign-out pages that work as interfaces for this purpose.
User Stories Addressed by this Feature: 19; 24; 31; 33; 34; and 35.
Please check "11. Testing of User Stories" for more details.
Back to Index
10 . Validation
Development tools of Google Chrome (Version 97.0.4692.71, Official Build, 64-bit), Microsoft Edge (Version 97.0.1072.62, Official build, 64-bit) and Firefox (Version 96.0.3, 64-bit) have been used to test the behaviour of the website for screen sizes between 320x568px to 1920x1370px.
The website was tested using these browsers and also Microsoft Internet Explorer (Version 2004, OS Build 19041.1415, Microsoft Corporation). Samsung Internet (version 15.0.2.47) was also used to test the website. In addition, some users have collaborated checking the website in the cell phones, mostly with Android-based operating systems.
Devices used for testing and validation include Dell and Samsung cell phones. Operative systems include Windows 10 Enterprise (remote desktop), Windows 10 Pro and Android. Processors for desktop and laptops were Intel.
The following tools were used to validate the files of the website:
HTML Files
https://validator.w3.org/ was used to validate the new HTML files (those not being part of the Django framework). To test them, unique HTML files base+index, base+weather, base+blog and base+contact were created. The files were validated and accepted only when errors were related to control characters.
Errors corrected using this service:
- base.html:
- Id body for body tag changed as it needs to have a different name; corrected after using the validator.
- Instructions Page (index.html):
- All images were missing the "alt" attribute; they were added after using the validator.
- Weather Page:
- Duplicated id ("s-d-o-4") identified, one of the changed to "s-d-o-5" after using the validator.
- Table headers "th" were not included in a "tr" tag; included after using the validator.
- Blog Page:
- Image was missing the "alt" attribute; added after using the validator.
- Contact Page:
- No errors found.
Back to Index
CSS File
https://jigsaw.w3.org/css-validator/ was used to validate the CSS file.
http://jigsaw.w3.org/css-validator/validator$link or http://jigsaw.w3.org/css-validator/check/referer (for HTML/XML document only)
Please check the evidence below:
Back to Index
JavaScript Files
https://jshint.com/ was used to validate the JavaScript files. Please check the parameters used for validation and evidence below:
Weather Page (weather.js JavaScript file). Please note that google is an external variable from Google
Back to Index
Python Files
PEP8 was used to check the files written in Python, with "All right" results.
The tool can be accessed with this link: http://pep8online.com .
- Django Project Files
- Instructions App
- Weather App
- Blog App
- Contact App
Back to Index
Accessibility
https://wave.webaim.org/ was used to validate accessibility. Although there are warnings, all pages contain zero errors. Please check evidence below:
Back to Index
Performance
Google Lighthouse (used in Google, Microsoft Edge and Firefox) were used to evaluate the performance of the pages. Please check the results below:
Back to Index
11 . Testing
Testing of Python files with unittest
The data model and Python files were tested with unittest; it was used to test the assignation of values to the fields of each table of the data model.
31 tests were written and succesfully executed in 0.005 seconds.
Back to Index
Testing of User Stories
First time users
The following are testing of User Stories previously described above:
- As a user, I want to have a description of the site with instructions, so I know how to use it and refer to them if needed.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Instructions App | Include steps to use the site, separated by sections | Design Instructions App/Page with separated steps and sections | Same as expected result |
- As a user, I want to have a weather application so I can find a place on the world and get its current weather information.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Include Esri/ArcGIS map on the Weather App to select/pick a location | Get coordinates of picked location/place | Works as expected |
- As a user, I want to be able to select the location for the weather information on a map, so I can find the location visually.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Include Esri/ArcGIS map on the Weather App to select/pick a location | Get coordinates of picked location/place | Works as expected |
- As a user, I want to be able to select the location for the weather information on the same map manually, so I can go directly to the place if I have the coordinates.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Include to input field to assign latitude and longitude for the Esri/ArcGIS map on the Weather App | Map moves to input latitude and longitude assigned manually | Works as expected |
- As a user, I want to be able to analyse the weather information in three groups (wind, temperature and "other"), so I immediately get the most relevant data (wind and temperature) for the planning of the work.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Divide the weather information in three groups: wind, temperature and other | Three different charts and tables with the corresponding information | Works as expected |
- As a user, I want to be able to display the weather information for the last 5, 15 or all days, so I can focus on the segment I consider most important.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Give option to select 5, 15 or all days/data | Show selection | Works as expected |
- As a user, I want to be able to display the weather information on charts, so it is more convenient for interpretation and a visualization.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Add Google Charts | Show selected data on charts | Works as expected |
- As a user, I want to have a blog so I can discuss HSE matters (including incidents) during data acquisition.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include HSE topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss issues related to the facilities of the base camp with the Camp Boss.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include camp-boss/facilities topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can get help on IT related issues on crew.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include IT-support topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss general technical issues during data acquisition.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include technical issues topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss survey matters.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include survey topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss management matters of the crew.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include management topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss the ongoing tasks related to the QA/QC of the data being acquired.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include data QA/QC topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss the ongoing tasks related to the processing of the data being acquired.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include processing topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can discuss the status of the vehicles on crew and its mechanical issues (if any).
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include mechanics topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to have a blog so I can check the personnel available on crew.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Include personnel (POB, for personnel on board) topic in Blog App | Dedicated page to send consultations, comments and/or find solutions | Works as expected |
- As a user, I want to be able to contact the site administrator and/or owner and/or developer, so I can send feedback to them.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App / Footer | Include Contact App/page and contact links in the footer | Working Contact App/page and links in footer | Works as expected |
- As a user, I want to be able to find the sign-in button easily, so I can quickly access the site.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Fixed navigation menu | Include sign-in button in fixed top menu | Access sign-in page | Works as expected |
-
Returning users
- As a returning user, I want to be able to contact the site administrator and/or owner and/or developer, so I can send feedback to them.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App / Footer | Include Contact App/page and contact links in the footer | Working Contact App/page and links in footer | Works as expected |
- As a returning user, I want a navigation menu on top and always visible, so I can access any content on the website from there and do not need to use the back button of the browser.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Fixed navigation menu | Include links to all apps of the site on top, along with sign-in, sign-up and sign-out options | Access different apps and sign-in/sign-up/sign-out options | Works as expected |
- As a returning user, I want to be able to find the sign-in and sign-out buttons easily, so I can quickly access the site.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Fixed navigation menu | Include sign-in, sign-up and sign-out options in fixed top menu | Access sign-in, sign-up and sign-out options from the menu | Works as expected |
- As a returning user, I want to have a way to contact the developer so I can contribute and/or indicate errors or bugs.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App / Footer | Include Contact App/page and contact links in the footer | Working Contact App/page and links in footer | Works as expected |
- As a returning user, I want to be informed if the contact form goes through, so I know if my message is sent or it is not.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App | Include a page that informs the user if the message has been sent, along with the data sent (so it works as a confirmation) | Page showing up after sending the data with the contact form | Works as expected |
-
Site Owner
- As owner, I want to provide a description of the site, with instructions, so users know how to use it.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Instructions App | Include steps to use the site, separated by sections | Design Instructions App/Page with separated steps and sections | Same as expected result |
- As owner, I want to create a tool that provides weather information around the world, so users can use it to plan seismic/geophysical data acquisition activities, or any other work that depends on weather conditions.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Weather App | Develop a weather app/page with selection of location for weather and display of data with tables and charts | Displayed information on selected location according to user preferences | Works as expected |
- As owner, I want to create a blog, in the same tool, so users can present, discuss, solve issues and find solutions about their daily activities on crew.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Blog App | Develop a blot page that works as support for sending consultations, tickets and/or comment and find solutions for the daily activities of the work | Show information for every work topic and interact with user | Works as expected |
- As owner, I want to receive feedback from users, so I can take actions in response to them if needed.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App / Footer | Include Contact App/page and contact links in the footer | Working Contact App/page and links in footer | Works as expected |
- As owner, I want to provide a navigation menu on top and always visible, so users can access any content at any time without needing the back button.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Fixed navigation menu | Include links to all apps of the site on top, along with sign-in, sign-up and sign-out options | Access different apps and sign-in/sign-up/sign-out options | Works as expected |
- As owner, I want to give as many options to be contacted as possible, so users can choose forms or links in the footer to send their consultations and/or feedback in a very fast way.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App / Footer | Include Contact App/page and contact links in the footer | Working Contact App/page and links in footer | Works as expected |
- As owner, I want to have users registered and ask them to sign-in to access all site capabilities, so the site is accessible to members of the crew and an administrator (e.g., a member of the management team like the Party Manager or Admin) can act as moderator.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Registration | Apply Django options for user registration | Registered users and ability to manage them in Django Administration | Works as expected |
- As owner, I want to set the basis of a product, so I can improve it in the future and adapt it to specific crews or projects.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Site | Build site according to goals | Use and feedback from users | Ongoing |
- As owner, along with other points of this section, I want to show my work and give the option to users to contact me if they wish.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Site | Build site according to goals | Use and feedback from users | Ongoing |
- As owner, I want to provide a responsive website, so user can access it from any device without any constraint to navigate, find and/or use the website.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Website | Responsive design | Responsive behaviour of site for different screen sizes and devices | Works as expected |
- As owner, I want to inform users if they consultation/message was successfully sent, so they know if they need to resend it or they do not.
FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
---|---|---|---|
Contact App | Include a page that informs the user if the message has been sent, along with the data sent (so it works as a confirmation) | Page showing up after sending the data with the contact form | Works as expected |
Back to Index
12 . Bugs
Some bugs were related to design, positioning and tags of elements in the page, with variables in Django templates among them. Also, many minor bugs were solved just by assigning the correct property and/or by trial and error.
Bugs that required more time and specific solutions were the following ones:
Bug | Solution |
---|---|
It was not possible to log into an administration account in Django. | The issue arises for Django version 4; solved with the help of Code Institute Tutor Assistance (Alan) on December 20th, 2021, at 15:55, by assigning the workspace URL to the variable CSRF_TRUSTED_ORIGINS in the settings.py file. |
The pages of the website could not be loaded all together, only either instructions and blog pages together, or weather and contact pages together, never the four pages together. | The issue was solved by changing the order of elements in the urlpatterns variable in the app (app_blog) urls.py file from Blog/(Post Detail)/Instructions/Weather/Contact to Instructions/Weather/Contact/Blog/(Post Detail); solution found on https://stackoverflow.com/questions/36429144/page-not-found-404-no-post-matches-the-given-query, on December 23rd, 2021, at 03:20. |
It was not possible to convert data (sent to views.py with AJAX, with POST) to float, even after trying with JSON.stringify(). | Solved by deleting "dataType: 'json'," line, as the method seems to pass strings, which can be easily converted to float (before, a "ul" element was being received). Reference: https://stackoverflow.com/questions/1969476/ajax-success-event-not-working; accessed on January 4th, 2022, at 21:10. |
Django models in app_weather could not be migrated because of wrongly deleting migrations file, causing a deleted column not registered/available in the files when reversing the migrations. | Issue solved with the help of Code Institute Tutor Assistance (Igor) by deleting the Postgres database, creating a new one, deleting all migrations files in all applications (except each init.py), making migrations, migrating and creating superuser again. |
There were some issues with the deployment in Heroku, apparently because of changes in Gitpod. | The issue was solved with the help of the Code Institute Tutor Assistance by installing Django version 3.2 (instead of version 4.0), creating a new workspace in Gitpod, and generating a new requirements.txt file. |
It was not possible to test the accessibility of the weather.html file; when using https://wave.webaim.org/, the weather app/page stopped working (even if it was working right before using the validator), even when they are in different windows and/or browsers; the validator reads a "ul" string/tag, while the app/page reads the correct string. | The issue was solved with the help of the Code Institute Tutor Assistance by working with try/except options; however, the resulting "FieldError" could not be addressed and a general "except" was used. In addition, query of data was carried out outside the "context" variable of the views.py file of the weather app. |
Data with DateField format for Django data models could not be tested. | To test, the code addresses a shift of one position in the instantiated class (since the class DataAndTimeForData does not assign a value to date); the issue could be related to a change of date format in the Django configuration that was not reverted back, although this reason cannot be confirmed. |
Esri/ArcGIS map does not pan/zoom in touch screen cell devices. | The issue is still under investigation, it could be related to specific versions of the API, JavaScript and/or browsers, although it cannot yet be confirmed. |
Back to Index
13 . Deployment
The website was fully written in Gitpod, permanently tested with Gitpod preview, and periodically deployed to GigHub Pages (in a main branch) and Heroku.
The fully deployed website, accessible by anyone, is found here, whose URL is https://pp4-ci-wqcs.herokuapp.com/ . Its repository is found here, whose URL is https://github.com/csc7/PP4_CI_WQCS.
The site requires access to OpenWeather and Google Chart API, whose configuration have been carried out following the instructions of their developers:
OpenWeather: https://openweathermap.org/current Google Charts: https://developers.google.com/chart/interactive/docs/gallery/linechart
Follow these steps to deploy in Heroku platform:
1 - Create JSON file (use the command line "npm init" as a wizard, installing the Heroku CLI in Gitpod if necessary and if this environment is being used) to be able to run JavaScript on Heroku. More details in Heroku site, https://devcenter.heroku.com/articles/deploying-nodejs#:~:text=To%20create%20a%20package.,json%20file .
2 - Include dependencies in a requirements.txt file, which is used by Heroku to install the dependencies. Use this command: "pip3 freeze > requirements.txt"
3 - Create new app from the dashboard of your Heroku account.
4 - Go to settings of the apps (do that before deploying the code).
5 - Ignore this step if you do not use credentials to access other services. In Config Vars, create a new one giving the name of CREDS, and assign to content of the JSON file with credentials to its value.
6 - Go to Buildpacks and add Python and Node.js, in that order, keeping Python on top and NodeJS below.
7 - Go to the deploy sections of the app, select GitHub as the Deployment method, assign a name for the repository to connect to GitHub, and connect.
8 - Go to the bottom and select whether you want automatic (rebuilding for each commit) or manual deployment.
You will get a button with a link to your app if successfully deployed.
After first deployment, several updates have been carried out before the final version. These updates were implemented in the deployed website from Gitpod, just by using the "push" command for every commit (change) in the ongoing development.
The project repository can be forked from GitHub (https://github.com/csc7/PP4_CI_WQCS), please check for the "Fork" button, top-right of the page, to achieve this task.
Back to Index
14 . Credits
-
Code Institute:
-
I have used the learning material in the course as a guide and reference.
-
"I Think Therefore I Blog" project:
- models.py file copied from this project on December 20th, 2022 at 13:34.
- admin.py file copied from this project on December 20th, 2022 at 17:31.
- views.py file copied from this project on December 20th, 2022 at 17:50.
- blog.html file copied from Code Institute "I Think Therefore I Blog" project, index.html file, on December 20th, 2022 at 18:01.
- urls.py in app folder (/app_blog), file copied from this project on December 20th, 2022 at 18:09.
- post_detail.htm file, copied from this project on December 20th, 2022 at 18:58.
-
Tutor Assistance: Django models in app_weather could not be migrated as a result of wrongly deleting migrations file; issue solved with the help of Code Institute Tutor Assistance (Igor) by deleting the Postgres database, creating a new one, deleting all migrations files in all applications (except each init.py), making migrations, migrating and creating superuser again.
-
Tutor Assistance: to reinstall Django version 3.2 (from version 4.0) after changes in Gitpod.
-
Tutor Assistance: to deal with deployment and DEBUG issues.
-
-
Balsamiq Wireframes: I have used it to create all the wireframes.
-
Jesse James Garrett's process for user experience.
-
Bootstrap:
-
Bootstrap Navbar, copied from https://getbootstrap.com/docs/4.0/components/navbar/ on July 8th, 2021, at 00:35, and December 7th, 2021, 04:00; menu content modified.
-
Bootstrap CSS link: code copied on December 7th, 2021, 01:50 from Code Institute lessons; ""
-
Bootstrap Scripts - copied on December 7th, 2021, 06:21 from https://getbootstrap.com/docs/4.0/getting-started/introduction/ .
-
Bootstrap Navs (for footer): Copied on December 7th, 2021, 05:00 from https://getbootstrap.com/docs/4.0/components/navs/; content modified.
-
To centre elements in Navs and Navbar: justify-content-center class. Copied on July 8th, 2021, 03:43 from https://getbootstrap.com/docs/4.0/components/navs/ .
-
Button trigger modal: code copied on December 7th, 2021, 08:34 from https://getbootstrap.com/docs/4.0/components/modal/; content modified.
-
-
Django-allauth: https://django-allauth.readthedocs.io/en/latest/, installed on December 23rd, 2021, at 11:32.
-
Django Documentation:
-
To add a second database: https://docs.djangoproject.com/en/4.0/intro/tutorial02/; accessed on December 28th, 2021, 19:30.
-
To define a second database: https://docs.djangoproject.com/en/4.0/topics/db/multi-db/; accessed on December 28th, 2021, 20:10.
-
-
ERD:
- ERDPlus, to make the data model graph, https://erdplus.com/standalone
-
ESRI:
-
Code for maps and picking of latitude and longitude, by LloydBronn, (01-05-2017 10:00 AM): https://community.esri.com/t5/arcgis-api-for-javascript-questions/mouse-click-to-get-map-point-or-x-y/m-p/516073#M48139; copied and modified on December 8th, 2021, 04:00.
-
Produce a map with ESRI: https://developers.arcgis.com/javascript/latest/display-a-map/; accessed on December 8th, 2021, 2:30.
-
https://developers.arcgis.com/javascript/latest/query-a-feature-layer-sql/; accessed on December 8th, 2021, 2:35.
-
-
Font Awesome:
-
Font Awesome Script / Kit, link copied on December 7th, 2021, 05:07 from Font Awesome personal account.
-
Icon for LinkedIn: link copied on December 7th, 2021, 05:50 from https://fontawesome.com/v5.15/icons/linkedin?style=brands ().
-
Icon for GitHub: link copied on December 7th, 2021, 05:52 from https://fontawesome.com/v5.15/icons/github-square?style=brands ().
-
Icon for E-mail/Envelope: link copied on December 7th, 2021, 05:53 from https://fontawesome.com/v5.15/icons/envelope-square?style=solid ().
-
Icon for website logo (wind), downloaded on December 7th, 2021, 09:15, from https://fontawesome.com/v5.15/icons/wind?style=solid .
-
Icons for each topic in the blog page: https://fontawesome.com/, "i" tags copied on January 21st, 2022, starting at 16:00, URL above each "i" tag:
- https://fontawesome.com/v5.15/icons/drafting-compass?style=solid
- https://fontawesome.com/v5.15/icons/laptop?style=solid
- https://fontawesome.com/v5.15/icons/trailer?style=solid
- https://fontawesome.com/v5.15/icons/hard-hat?style=solid
- https://fontawesome.com/v5.15/icons/map-marker-alt?style=solid
- https://fontawesome.com/v5.15/icons/user-tie?style=solid
- https://fontawesome.com/v5.15/icons/calendar-check?style=regular
- https://fontawesome.com/v5.15/icons/wave-square?style=solid
- https://fontawesome.com/v5.15/icons/wrench?style=solid
- https://fontawesome.com/v5.15/icons/users?style=solid
-
-
Google:
-
Google Fonts: Heebo (Medium 500) and Oxygen (Regular 400), first imported on December 7th, 2021, 08:01, from: https://fonts.google.com/; (<style> @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500&family=Oxygen&display=swap');</style>).
-
Google Charts: Line Charts, copied and modified from https://developers.google.com/chart/interactive/docs/gallery/linechart on January 5th, 2022, at 20:40.
-
-
Heroku:
- To deply Node.js in Heroku: https://devcenter.heroku.com/articles/deploying-nodejs#:~:text=To%20create%20a%20package.,json%20file .
-
jQuery:
- Checked several methods at https://api.jquery.com/, https://jquery.com/ .
-
MDN Web Docs Moz://a;
- To perform an action when an input field changes: https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event; accessed on January 7th, 2022, at 18:17.
-
OpenWeather:
- © 2012 — 2021 OpenWeather ® All rights reserved. This team provides the API for the weather information of the site. Web: https://openweathermap.org/ . Current Weather Data API: https://openweathermap.org/current .
-
Python unittest:
- As reference for testing in Python: https://docs.python.org/3/library/unittest.html .
-
Stack Overflow:
-
To reverse the order of columns after a specific Bootstrap breakpoint: https://stackoverflow.com/questions/50768176/order-div-breakpoint-mobile-bootstrap-4?noredirect=1&lq=1; accessed on December 7th, 2021, at 08:30.
-
To solve "multipleDefine" errors by loading ArcGIS and Dojo JS at the end: https://stackoverflow.com/questions/16600063/dojo-1-9-build-multipledefine-error-while-loading-locale; accessed on December 7th, 2021, at 05:50.
-
Investigating two blocks in template HTML file for Flask: https://stackoverflow.com/questions/1242239/multiple-blocks-of-same-name-in-jinja2; accessed on December 12th, 2021, at 07:20.
-
To fix the template views: https://stackoverflow.com/questions/36429144/page-not-found-404-no-post-matches-the-given-query, accessed on December 23rd, 2021, at 03:20.
-
To send data from template to Django views: https://stackoverflow.com/questions/49885711/passing-json-data-to-django-using-ajax, on January 1st, 2022. https://stackoverflow.com/questions/6506897/csrf-token-missing-or-incorrect-while-post-parameter-via-ajax-in-django, on January 1st, 2022. https://stackoverflow.com/questions/42354001/json-object-must-be-str-bytes-or-bytearray-not-dict, on January 1st, 2022. https://stackoverflow.com/questions/4681202/what-is-a-django-queryset, on January 1st, 2022. https://stackoverflow.com/questions/32304893/how-to-parse-json-data-with-ajax-post-in-django-view, on January 1st, 2022.
-
To add record to Django database: https://stackoverflow.com/questions/35602049/how-to-insert-data-to-django-database-from-views-py-file/35602287, on January 1st, 2022.
-
To read date in Unix UTC format: https://stackoverflow.com/questions/847185/convert-a-unix-timestamp-to-time-in-javascript, accessed on January 3rd, 2022, at 13;00.
-
To check if request is AJAX: Check if request is AJAX, accessed on January 4th, 2022, at 2058, in https://stackoverflow.com/questions/8508602/check-if-request-is-ajax-in-python .
-
To solve the issue of sending data, from weather.js to to views.py (app_weather) with AJAX, that can be convertible to float: https://stackoverflow.com/questions/1969476/ajax-success-event-not-working; accessed on January 4th, 2022, at 21:10.
-
To update "div" element instead of whole page with AJAX: https://stackoverflow.com/questions/18490026/refresh-reload-the-content-in-div-using-jquery-ajax; accessed on January 4th, 2022, at 21:20.
-
To get date in Python: https://stackoverflow.com/questions/32490629/getting-todays-date-in-yyyy-mm-dd-in-python, copied on January 12th, 2022, at 18:40.
-
To load static folder for favicon in HTML head: https://stackoverflow.com/questions/35054230/custom-tag-not-loaded-in-template, accessed on January 22nd, at 15:05.
-
To count records in a database table: https://stackoverflow.com/questions/15635790/how-to-count-the-number-of-rows-in-a-database-table-in-django, accessed on January 22nd, at 18:47.
-
-
W3C®. Copyright © 2021 W3C ® (MIT, ERCIM, Keio, Beihang):
- How to introduce author in anchor element: https://www.w3.org/TR/2011/WD-html5-author-20110809/the-link-element.html, accessed on August 4th, 2021, at 00:06.
-
W3Schools (Powered by W3.CSS), https://www.w3schools.com/:
- Intro to AJAX: https://www.w3schools.com/js/js_ajax_intro.asp, on January 1st, 2022.
Back to Index
15 . Acknowledgements
I would like to acknowledge and thank the following people for being part of this project and for helping me in the development of it:
- To my wife and family, for always supporting and helping.
- Code Institute, for providing knowledge, guide, content and tools.
- My mentor, Mo, for helping with very valuable guide and support.
- Code Institute Tutor Assistance for helping when needed.
- Code Institute community in Slack for permanently being an online reference.
- All the valuable information provided by the sources mentioned above in the credits.