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

• User Goals

• Site Owner Goals

• User Stories

• User Requirements and Expectations

5. Data Model

6. Design Choices

• Colours

• Fonts

• Structure

7. Wireframes

8. Technologies used

• Languages

• Software, Frameworks, Applications and Other Tools

9. Features

10. Validation

• HTML Files

• CSS File

• JavaScript Files

• Python Files

• Accessibility

• Performance

11. Testing

• Testing of Python Files with unittest

• Testing of User Stories

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

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. As a user, I want to have a blog so I can discuss HSE matters (including incidents) during data acquisition.
9. 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.
10. As a user, I want to have a blog so I can get help on IT related issues on crew.
11. As a user, I want to have a blog so I can discuss general technical issues during data acquisition.
12. As a user, I want to have a blog so I can discuss survey matters.
13. As a user, I want to have a blog so I can discuss management matters of the crew.
14. 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.
15. 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.
16. 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).
17. As a user, I want to have a blog so I can check the personnel available on crew.
18. 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.
19. As a user, I want to be able to find the sign-up button easily, so I can quickly access the site.

• Returning users

20. 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.
21. 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.
22. 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.
23. As a returning user, I want to have a way to contact the developer so I can contribute and/or indicate errors or bugs.
24. 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

25. As owner, I want to provide a description of the site, with instructions, so users know how to use it.
26. 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.
27. 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.
28. As owner, I want to receive feedback from users, so I can take actions in response to them if needed.
29. 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.
30. 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.
31. 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.
32. 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.
33. 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.
34. 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.
35. 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

PDF File for Tablet Wireframe

PDF File for Cell 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:

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:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. As a user, I want to have a blog so I can discuss HSE matters (including incidents) during data acquisition.

9. 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.

10. As a user, I want to have a blog so I can get help on IT related issues on crew.

11. As a user, I want to have a blog so I can discuss general technical issues during data acquisition.

12. As a user, I want to have a blog so I can discuss survey matters.

13. As a user, I want to have a blog so I can discuss management matters of the crew.

14. 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.

15. 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.

16. 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).

17. As a user, I want to have a blog so I can check the personnel available on crew.

18. 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.

19. As a user, I want to be able to find the sign-in button easily, so I can quickly access the site.

• Returning users

20. 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.

21. 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.

22. 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.

23. As a returning user, I want to have a way to contact the developer so I can contribute and/or indicate errors or bugs.

24. 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

25. As owner, I want to provide a description of the site, with instructions, so users know how to use it.

26. 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.

27. 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.

28. As owner, I want to receive feedback from users, so I can take actions in response to them if needed.

29. 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.

30. 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.

31. 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.

32. 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.

33. 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.

34. 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.

35. 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

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:

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.

Back to Index