This project is about an e-commerce for geophysical data. It is a FICTITIOUS SITE where the user will be able to buy geophysical data that comprises digital elevation models, gravimetry, resistivity and magnetometry data; along with training, books and software products. Data and products are FICTITIOUS. The project is part of the Code Institute Full-Stack Software Development program.
The goal of the project is to develop an e-commerce for geophysical data, where users can find and buy digital elevation models, gravimetry, resistivity and magnetometry data; along with reports, training (courses and books) and software products. In addition, users can register in the site to track their purchases, contact the site owner and/or developer (also available without having an account), navigate to social network sites of the e-commerce, filter and search products, store them in a wish list, comment them, and pay them using Stripe's payment processing platform.
In addition, it is expected to provide a proper management for the site owner, registering order information and history, and administrating tasks like product updates and interaction with users.
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 displayed.
As stated at the beginning, the site is a fictitious e-commerce. To generate the products, the Natural Earth quick start kit" (50m raster) was downloaded from Natural Earth's website https://www.naturalearthdata.com/downloads/. This kit contains a planisphere from where QGIS was used to filter it by countries, by running the file "products_database_generation_for_QGIS.py" (in the "/tools" folder in the project root directory) in the Python console of QGIS.
Once all countries were filtered, different scale colours were applied for them, one for each category (digital elevation models, gravimetry, resistivity and magnetometry data), to simulate different products. To simulate some "randomness" of the products, some products were randomly deleted (this way, not all countries have the same products).
Then, free images were downloaded from Pexels (please see Credit section for details) and assigned to the remaining products of the e-commerce (reports, training courses, training books and software products).
A Python file was created to build CSV and JSON structures for the Products and Category models (with fields matching their fields, including the name and URL of the images). This file, "build_csv_and_json.py" (in the "/tools" folder in the project root directory), saves the CSV file in the same "/tools" folder and the JSON file in the "/fixtures" folder of the products Django app.
The file build_csc_and_json.py must run in the project "/media" folder, with this folder containing only the images, and with image names starting with the following names: digital elevation models, gravimetry, resistivity and/or magnetometry (otherwise the program will not work, as it would be reading other file names and therefore the "if" statements should be modified). Run it before adding other files to the "/media" folder, or change the name of the folder in the Python file, or modify the "if" statements to read other names.
Since the generated JSON file is already in the "/fixtures" folder, the data can then be loaded into the Django models using the following commands (in this order, since the products are related to categories and therefore the latter must be defined before):
python3 manage.py loaddata categories
python3 manage.py loaddata products
A project board was created in GitHub to help on the planning and follow-up of the work when developing the site; it can be observed here (https://github.com/csc7/PP5_CI_GDEC/projects/1).
In addition, issues can directly be found here (https://github.com/csc7/PP5_CI_GDEC/issues)
UX has been addressed around Jesse James Garrett's process and its five planes:
- STRATEGY: to develop an e-commerce website (product) that makes purchasing of geophysical data simple and intuitive.
- SCOPE: the minimum viable product needs to include features that allow the user to know the following:
- Home page that acts as staring point and welcome page for the site.
- A main navigation menu where, along with a footer, gives access to the main parts of the website, including registration and sign-in for users.
- Images and the products with their associated price for purchasing.
- A method to pay the products, for instance, stripe.
- A database that accounts for all the data in the website and allows interaction of the users with the products (purchase) and their accounts.
- STRUCTURE: the information is structured as follows:
- Home page (act as welcome page).
- Fixed navigation bar on top that allows searching and filtering products for display and buy.
- A page showing the selected or filtered products.
- A page for details of a specific product when selected, giving the option to buy and comment it.
- A bag page with selected products to buy.
- A wish list page.
- A checkout page showing the products the user is about to buy, with the final price to pay, linking with the payment method (e.g., Stripe).
- Footer, showing the main structure of the website and giving access to the social networks of the e-commerce and a field for the user to sign up in the newsletter of the e-commerce (to help on marketing), a contact form, contact information, and general data protection regulation requirements.
- A profile page, including the option to show the purchase history of the user.
- Contact form page.
- Pop-up messages informing the interaction of the user with the website (purchase, sign in, sign out, sign up, errors and success messages as the main ones).
- 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 and products are accessed through a fixed navigation menu on top of the pages and a footer.
- SURFACE: the website is based on a contrast of different tonalities of blue for the header and footer, light blue for body, and fonts in strong dark blue; with red banners (the top one including advertising messages) separating the fixed navigation menu, the body and the footer.
- To easily find and buy products (geophysical data, and training and software products).
- To find an interactive website.
- To navigate through a responsive website.
- To have the website accessible at all times through a fixed navigation menu and a footer.
- To have an account on the website for future purchases or review of past purchases, giving the change to store personal data.
- To be able to contact the site administrator, owner and/or developer if desired.
- To be informed of the events created when navigating the website as soon as they happen.
- To sell geophysical data, and training and software products.
- To promote different products.
- To have the website helping on the marketing of the e-commerce (e.g., linking to contact information and options, social networks, and giving the option to sign up for a newsletter).
- To capture clients.
- To increase the number of users interested in and buying geophysical data, and training and software products.
- To provide an interactive website.
- To provide a responsive website.
- To give users the chance to contact the site administrator, owner and/or developer.
- To provide a scalable e-commerce website to show my current development capabilities.
User stories are divided into the following three groups:
- As a user, I want to find a well-organized and simple site, so I immediately get the whole picture of the site.
- As a user, I want to find a responsive site, so I can easily navigate in it in different devices.
- As a user, I want to receive a confirmation of registration when I sign up, so I know that the process for creating my account went well.
- As a user, I want to be able to contact the site administrator, owner and/or developer, so I can send feedback to them.
- As a user, I want to have access to my account easily, so I can quickly sign in.
- 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, always visible, so I can access the main 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 have access to my account easily, so I can quickly sign in.
- 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 being sent or it is not.
- As a returning user, I want to recover my password easily if I forget it, so I do not worry about remembering and/or keeping it.
- As a returning user, I want to have a history of my purchases, so I know what I have bought and spent through time.
- As a shopper, I want to have the products to buy visible (without many details so I can see more), so I can select them for purchase.
- As a shopper, I want to have access to the product details, so I can access them in case I am not sure about the purchase and/or want to have a better description of the product.
- As a shopper, I want to have a detailed view of my shopping cart, so I know what I am buying and have the current purchase details just before paying.
- As a shopper, I want to have the amount I am spending always visible, so I know how much I am spending.
- As a shopper, I want to have special offers easily accessible, so I can buy them before they disappear if I find them useful.
- As a shopper, I want to have a search field, so I do not spend much time finding the product I want to buy
- As a shopper, I want to have categories of products, so I find a product easily if I do not know its name.
- As a shopper, I want to have prices always visible, so I know the value of the products at all times.
- As a shopper, I want to have the different resolutions of the products visible, close to the product it belongs to, so I can easily select it without further action.
- As a shopper, I want to have a secure payment method, so I can rest assured that the purchase procedure is safe.
- As owner, I want to provide an introductory page, so users know what can be found on the website and what can be purchased.
- As owner, I want to provide an easy process for registration, so I ensure a connection with a potential buyer.
- As owner, I want to provide a search field for products on top, so I require users/shoppers the minimum possible time to find a product (and therefore reduce the risk of leaving).
- As owner, I want to organize products in categories, so users find an organized site and can find products easily.
- 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 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 their consultation/message was successfully sent, so they know if they need to resend it or they do not.
- As owner, I want to inform the user, through an error page, if there is any error when loading the website.
- As developer, 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.
- A home page.
- A responsive navigation throughout the website.
- A fixed navigation top that allows searching and filtering products for display and buy.
- A page showing the selected or filtered products.
- A page for details of a specific product when selected, giving the option to buy it.
- A bag page with selected products to buy.
- A wish list page storing products for a later purchase.
- A checkout page, showing the final price to pay and linking with the payment method (e.g., Stripe).
- A Footer, showing the main structure of the website and giving access to the social networks of the e-commerce and a field for the user to sign up in the newsletter of the e-commerce (to help on marketing), a contact form, contact information, and general data protection regulation requirements.
- A profile page with purchase history.
- A contact form.
- Pop-up messages informing the interaction of the user with the website.
- A Sign-in page.
- A Sign-up page.
- A Sign-out page.
- A 404 page.
The e-commerce business model underlying the application is designed in such a way that a "user" (who is uniquely identified by ID) can buy "products" (that are also uniquely identified by ID and SKU) by sending a "order" (that is uniquely identified by ID and order number). Then, since an order can have many products, and simultaneously a product can be requested by many orders, an "order line item" is created to uniquely relate a specific product to a specific order. This "order line item" divides the many-to-many relation between "order" and "product" in two one-to-many relations ("order-order line item" and "order line item-product"). "Product comments" can be added (related) to each product and to the user who comments
Then, a "category" is created and related to the type of product in order to help on the search of them.
Additionally, a "wish list" allows users to store products for a later purchase.
Finally, a "contact" model is created, unrelated to the previous tables, to contact the site owner in any case, regardless of an order being issued or not being a user.
The project database is built with PostgreSQL and deployed in Heroku platform. Its tables or models are built with Django models and follows the models given by the Code Institute "I Think Therefore I Blog" project. The following chart shows the tables and data involved, and how they are related:
Chart created with ERDPlus (https://erdplus.com/standalone).
The following are the tables involved in the relational model and the field types in each of them.
-
- ID: integer, primary key
- Order Number: char
- User Profile: integer, foreign key
- Full Name: char
- E-mail: e-mail
- Phone Number: char
- Country: country
- Postcode: char
- Town or City: char
- Street Address 1: char
- Street Address 2: char
- County: char
- Date: date
- Delivery Cost: decimal
- Discount: decimal
- Order Total: decimal
- Grand Total: decimal
- Original Bag: text
- Stripe PID: char
-
- ID: integer, primary key
- Order: integer, foreign key
- Product: integer, foreign key
- Product Resolution: char
- Quantity: integer
- Line Item Total: decimal
-
- ID: integer, primary key
- Date: date
- Time: custom (time)
- Full Name: char
- E-mail: e-mail
- Description: char
-
- ID: integer, primary key
- Name: char
- Friendly Name: char
-
- ID: integer, primary key
- Category: integer, foreign key
- SKU: char
- Name: char
- Description: text
- Price: decimal
- Resolution: Boolean
- Rating: decimal
- Image URL: URL
- Image Name: image
-
- ID: integer, primary key
- User: integer, foreign key
- Product: integer, foreign key
- Product Rating Value: integer, foreign key
- Body: text
- Created On: date
- Active: Boolean
-
- ID: integer, primary key
- User: char
- Default Phone Number: char
- Default Street Address 1: char
- Default Street Address 2: char
- Default Town or City: char
- Default County: char
- Default Postcode: char
- Default Country: char
-
- ID: integer, primary key
- User Profile: integer, foreign key
- Product: integer, foreign key
- Product Resolution: char
- Quantity: integer
- Line Item Total: decimal
The design was planned to cover screen sizes from 320x568px to 1920x1370px.
Colours are based on different tonalities of blue for header (fixed navigation menu) and footer, contrasting with a white background for the body (where products and all other content appear). The header (fixed navigation menu) and body, as well as body and footer, are separated by a red banner (the top one containing moving messages with white fonts).
Google fonts (please see credits section below) were implemented on the website; Play (Regular 400 and Bold 700) and Roboto (Regular 400). Play is used for the body; Sans-serif font is used as a back-up in case the previous font cannot be loaded.
The website consists of a header with fixed navigation menu on top, a body and a footer. It is designed to navigate the e-commerce from the header and footer, having them always available. The header is fixed, while the footer is fixed only for screens whose width is greater than 992px, so it does not use space from the body in smaller screen sizes. There are two banners separating the header and body, and the body and footer. The one below the header contains moving messages to advertise special features of the e-commerce at all times.
The metadata in the head tag of the base HTML includes the following keywords to help search engines to find the website: "DEM books, DEM data, DEM software, DEM training, Geophysical data, Buy DEM data, Geophysical book, Buy Resistivity data, Gravimetry data, Buy Gravimetry data, Resistivity books, Buy Magnetometry data, Magnetometry software, Gravimetry books, Buy geophysical data, Magnetometry books, DEM, Geophysical, Code Institute, software development, and full-stack course, milestone project".
The metadata also includes the following description: "Code Institute Student Milestone Project 5, an e-commerce application that sells digital elevation models, gravimetry, magnetometry and resistivity data; along with training, books and software for data acquisition and processing".
Wireframes were developed at the beginning of the project to have a first structure of the e-commerce site and analyse eventual changes. Please see section 7, Wireframes, for images about these wireframes.
In order to achieve the goals related to an easy navigation and finding of products, a fixed navigation menu in the header is implemented, which also contributes on accessibility to the main parts of the e-commerce and on responsiveness. In the same area. The logo of the e-commerce is placed to the left, in the middle there are a search field on top and the navigation menu below, and on the right two icons can be found that link to the account sign-in/sign-up/sign-out and bag.
It is a thin section (height of 25px), from side to side of the screen, in red colour, that separates the header/fixed navigation menu on top from the body. It contains moving messages to advertise special features of the e-commerce at all times.
The products are displayed in this area, from where the products details can be accessed by clicking on the product itself and displayed in the same body.
The body also holds the pages for the bag, the checkout, the success checkout, sign-in, sign-up, sign-out, profile, contact form and 404 pages.
It is another thin section (height of 25px), from side to side of the screen, in red colour, that separates the body from the footer.
The footer contains links contact information of the e-commerce on the left (below the e-commerce logo), a contact form, social media links, links to product categories, links to account sign-in/sign-up/sign-out, General Data Protection Regulation (GDPR) information about the privacy policy and cookies, and an area on the right to sign up for the e-commerce newsletter.
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 image files for each case in the following links:
Desktop Wireframe Image for Home Page
Desktop Wireframe Image for Products Page
Desktop Wireframe Image for Product Details Page
Desktop Wireframe Image for Profile Page
Desktop Wireframe Image for Wish List Page
Desktop Wireframe Image for Bag Page
Desktop Wireframe Image for Checkout Page
Desktop Wireframe Image for Success Checkout Page
Desktop Wireframe Image for Contact Page
Desktop Wireframe Image for Thank You Page
Desktop Wireframe Image for Add Product Page
Desktop Wireframe Image for Edit Product Page
Desktop Wireframe Image for 404 Page
Tablet Wireframe Image for Home Page
Tablet Wireframe Image for Products Page
Tablet Wireframe Image for Product Details Page
Tablet Wireframe Image for Profile Page
Tablet Wireframe Image for Wish List Page
Tablet Wireframe Image for Bag Page
Tablet Wireframe Image for Checkout Page
Desktop Wireframe Image for Success Checkout Page
Tablet Wireframe Image for Contact Page
Tablet Wireframe Image for Thank You Page
Tablet Wireframe Image for Add Product Page
Tablet Wireframe Image for Edit Product Page
Tablet Wireframe Image for 404 Page
Cell Phone Wireframe Image for Home Page
Cell Phone Wireframe Image for Products, Product Details and My Profile Pages
Cell Phone Wireframe Image for Wish List, Bag and Checkout Pages
Cell Phone Wireframe Image for Success Checkout, Contact and Thank You Pages
Cell Phone Wireframe Image for Add Product, Edit Product and 404 Pages
Please check the PDF files for each case in the following links:
Desktop Wireframes PDF
Tablet Wireframes PDF
Cell Phone Wireframes PDF
The development of the project employed the following languages, software, frameworks, applications and tools:
-
https://miniwebtool.com/django-secret-key-generator/ (to generate Django secret keys)
-
https://www.privacypolicygenerator.info/ (to ellaborate the General Data Protection Regulation, GDPR, page)
-
https://www.wordtracker.com/ (to analyze volume and competitors of SEO keywords)
-
https://jsonformatter.org/ (to inspect JSON structures for the product and category data)
-
https://www.xml-sitemaps.com/ (to generate sitemap.xml file)
-
Mailchimp: Marketing Automation & Email Platform, https://mailchimp.com
The features are designed to address the goals, user stories, and user requirements and expectations given in section 4, User Experience.
The features of the site are the following ones:
- Home page
- Products (with product administration for the site owner)
- Product details (with product administration for the site owner and option to comment for users)
- Bag page
- Checkout page
- Secure payment method
- Checkout success page
- Site access (sign-in and sign-out)
- Registration (sign-up)
- Profile with history order
- Contact form
- Footer
- 404 page
These pages are accessible from a fixed navigation menu on top and a footer, and several pop-up messages are included to inform the user of their interactions with the site.
In the second half of the project, two more features were added to improve the user experience and feedback reception:
- Comments
- Wish list
Details of these features, including the user story they cover, are the following:
It is in the header, fixed on all pages to facilitate navigation, and responsiveness.
User Stories Addressed by this Feature: 1; 2; 5; 7, 8, 15, 16, 17, 18, 19, 20, 24, 25, 26, 28, 30, and 33.
Please check "11. Testing of User Stories" for more details.
Fixed Navigation Menu for Desktop Image
Fixed Navigation Menu for Tablet Image
Fixed Navigation Menu for Cell Phones Image
Fixed Navigation Menu, expanded, for Cell Phones Image
It separates the fixed navigation menu and the body of the site, and shows advertising messages for the e-commerce.
User Stories Addressed by this Feature: 1; 2; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Banner with Latest News for Desktop Image
Banner with Latest News for Tablets Image
Banner with Latest News for Cell Phones Image
Banner with Latest News for Cell Phones Image, expanded
It is the welcome page, with a world map image and advertising messages in a Bootstrap carousel.
User Stories Addressed by this Feature: 1; 2; 23; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Check Home Page Desktop Image
Check Home Page Tablet Image
Check Home Page Cell Image
Products appear after selecting categories or searching in the fixed navigation menu; they can be ordered by different criteria. The have an image, price, resolution (if applicable), a short description, and it also gives the site owner the option to edit it.
User Stories Addressed by this Feature: 1; 2; 13; 14; 19; 20; 21; 26; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Check Home Page Desktop Image
Products Image
It can be accessed by clicking on a specific product; it provides detailed information about it, including the price, short description and resolutions available if applicable. It also gives the site owner the option to edit it.
User Stories Addressed by this Feature: 1; 2; 13; 14; 20; 21; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Product Details Image
It can be accessed through the icon in the fixed navigation menu, top right, and shows the current products being purchased/added to the bag.
User Stories Addressed by this Feature: 1; 2; 15; 16; 20; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Bag Page Image
It is presented when the user/shopper finishes the purchase process and is ready to pay.
User Stories Addressed by this Feature: 1; 2; 15; 22; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Checkout Image 1
Checkout Image 2
Checkout Image - 2nd Page
It is the payment process for the e-commerce, powered by Stripe.
User Stories Addressed by this Feature: 1; 2; 22; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Stripe Payment Image
Stripe Payment Image - Checkout
Stripe Payment Image - Checkout 2nd Page
Stripe Payment Image - Checkout Success
It is presented after a successful payment carried out by the user/shopper.
User Stories Addressed by this Feature: 1; 2; 22; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Checkout Success Image
Checkout Success Image 2
They are Django complementary tools and pages to have sigh-in and sign-out options in the site for users.
User Stories Addressed by this Feature: 1; 2; 5; 8; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Sign-in Page Image
Sign-out Page Image
They are Django complementary tools and pages to have a sign-up option for users.
User Stories Addressed by this Feature: 1; 2; 3; 5; 8; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Sign-up Image
It is a page that shows the user information and history order after selected the option in the fixed navigation menu when the user is signed in.
User Stories Addressed by this Feature: 1; 2; 8; 12; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Profile with history order on the right
- ### **Contact form**
It is a contact form in a separate page, accessible from the footer, that gives the option to send a consultation to the site owner, without needing to buy and/or be signed in/up. Its goal is to receive feedback from as many sources as possible.
User Stories Addressed by this Feature: 1; 2; 4; 6; 9; 27; 29; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Contact Form Image
They are Django complementary tools and pages to have a sign-up option for users.
User Stories Addressed by this Feature: 1; 2; 4; 5; 6; 8; 9; 24; 27; 29; 30 and 33.
Please check "11. Testing of User Stories" for more details.
Footer Images
It is a Django complementary tool and page that presents an error page informing the user that something has gone wrong (e.g., wrong address, broken URL).
User Stories Addressed by this Feature: 1; 2; 10; 30; 32 and 33.
Please check "11. Testing of User Stories" for more details.
404 Page Image
404 Page Image
404 Page Image
They are Django complementary messages that informs the user, with pop-ups, that an action has been executed in the site. The action can be adding a product, deleting a product, editing a product (for the site owner), changing the amount of products in the bag, signing in, signing up, signing out and the payment outcome.
User Stories Addressed by this Feature: 1; 2; 3; 10; 30, 31 and 33.
Please check "11. Testing of User Stories" for more details.
Pop-up Status Message Images
It allows users to comment products below its product details.
Check Product Comments Image
It allows users to save products they like or are interested in for future purchases.
Check Wish List Desktop Image
Check Wish List Tablet Image
Check Wish List Cell Image
Development tools of Google Chrome Version 100.0.4896.127 (Official Build, 64-bit), Microsoft Edge (Version 100.0.1185.44, Official build, 64-bit) and Firefox (Version 100.0.1185.44, Official build, 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. 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:
https://validator.w3.org/ was used to validate the new HTML files. Pages were rendered to get the HTML code (otherwise Django templates would alone give errors). When possible (where pages do not require log-in), the page link was tested in the validator.
Home (index.html)
Home (index.html), direct URL input
bag.html
bag.html, direct URL input
checkout.html
checkout_success.html
contact.html
thanks.html
add_product.html
edit_product.html
product_details.html
products.html
profile.html
wish_list.html
404.html
Rendered HTML for Checkout Success
Rendered HTML for Edit Product
Rendered HTML for Product Details
https://jigsaw.w3.org/css-validator/ was used to validate the CSS file.
Please check the evidence below:
base.css File
base.css File (Warnings)
checkout.css File
checkout.css File (Warnings)
profile.css File
profile.css File (Warnings)
No warningshttps://jshint.com/ was used to validate the JavaScript files. Please check the parameters used for validation and evidence below:
Parameters:
Parameters used for JavaScript validation in JSHint version 2.13.3
Files:
To enable/disable country name in forms: country_field_in_profile.js
To cancel delivery: download_data_and_discount_delivery.js
To register in the Mailchimp newsletter: mailchimp_form_submission.js
To let Django admin the name of the image that is going to be changed: notify_image_change_in_admin.js
To control buttons and form in product details: product_details.js
To control buttons and form in product details: product_details.js, with no definition for the CSRFToken
To sort and go to top of page in products: product.js
To control increase/decrease buttons: quantity_incr_decr.js
To control increase/decrease buttons: quantity_incr_decr.js, with no definition for the CSRFToken
To show Django toasts: show_messages.js
To deal with process payment: stripe_elements.js
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 .
Flake8 (command: python3 -m flake8) was run to eliminate the loading of unused libraries.
- Django Project Files
asgi.py
settings.py
urls.py
wsgi.py
- Bag App
admin.py
apps.py
contexts.py
models.py
tests.py
urls.py
views.py
- Checkout App
admin.py
apps.py
forms.py
models.py
signals.py
tests.py
urls.py
views.py
webhook_handler.py
webhooks.py
- Contact App
admin.py
apps.py
forms.py
models.py
tests.py
urls.py
views.py
- Home App
admin.py
apps.py
models.py
tests.py
urls.py
views.py
- Products App
admin.py
apps.py
forms.py
models.py
tests.py
urls.py
views.py
widgets.py
- Profiles App
admin.py
apps.py
forms.py
models.py
tests.py
urls.py
views.py
- Wish App
admin.py
apps.py
contexts.py
models.py
tests.py
urls.py
views.py
- Tools
build_csv_and_json.py
products_database_generation_for_QGIS.py
https://wave.webaim.org/ was used to validate accessibility. Although there are warnings, all pages contain zero errors, except for the special case when the wish list contains the same product with two different resolutions, where the validator presents multiple form labels. Please see bugs section for more details.
Pages were tested with their URLs, directly in the we web page address input in at https://wave.webaim.org/, or through the Wave plugin for Chrome when authentication was needed. Please check evidence below:
Home (index.html)
Home (index.html, logged in)
bag.html
checkout.html (logged in)
checkout_success.html (logged in)
contact.html
contact.html (logged in)
thanks.html
thanks.html (logged in)
add_product.html (logged in)
edit_product.html (logged in)
product_details.html
product_details.html (logged in)
products.html
products.html (logged in)
profile.html (logged in)
wish_list.html
wish_list.html (logged in)
404.html
404.html, direct URL input
Google Lighthouse (in Google Chrome) was used to evaluate the performance of the pages. Please check the results below:
Home for cell phones (79)
Home for desktop (88)
Bag for cell phones (78)
Bag for for desktop (96)
Checkout for cell phones (72)
Checkout for desktop (89)
Success Checkout for cell phones (69)
Success Checkout for desktop (95)
Contact for cell phones (75)
Contact for desktop (92)
Thank You Page for cell phones (79)
Thank You Page for desktop (96)
Add Product for cell phones (79)
Add Product for desktop (97)
Edit Product for cell phones (78)
Edit Product for desktop (95)
Product Details for cell phones (62)
Product Details for desktop (82)
Products for cell phones (77)
Products for desktop (91)
Profile for cell phones (76)
Profile for desktop (84)
Wish List for cell phones (77)
Wish List for desktop (96)
The data models and some Python files were tested with unittest. Coverage.py was used to measure the coverage of these automatic tests.
Coverage of 49% was achieved, with 52 tests successfully executed in 0.347 seconds.
Please see below screenshots of the testing and coverage, the fourth and last links contain the summary.
Screenshot 1 of unittest resuts
Screenshot 2 of unittest results
Screenshot 3 of unittest results
Screenshot 4 of unittest results with summary
Screenshot 1 of coverage results
Screenshot 2 of coverage results
Screenshot 3 of coverage results, with summary
The following are testing of User Stories previously described above:
- As a user, I want to find a well-organized and simple site, so I immediately get the whole picture of the site.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Banner with latest news Home page Products (with product administration for the site owner) Product details (with product administration for the site owner) Bag page Checkout page Secure payment method Checkout success page Site access (sign-in and sign-out) Registration (sign-up) Profile with history order Contact form Footer 404 page Pop-up status messages |
Organize the structure of the site with a fixed navigation menu and footer that includes almost all pages of the site | Navigate to any page of the site from these two features, except to the pages that require a previous step (e.g., adding items to the bag) | Site is fully accessible from top navigation menu and footer; works as expected |
Fixed Navigation Menu for Desktop Image
Fixed Navigation Menu for Tablet Image
Fixed Navigation Menu for Cell Phones Image
Fixed Navigation Menu, expanded, for Cell Phones Image
- As a user, I want to find a responsive site, so I can easily navigate in it in different devices.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Banner with latest news Home page Products (with product administration for the site owner) Product details (with product administration for the site owner) Bag page Checkout page Secure payment method Checkout success page Site access (sign-in and sign-out) Registration (sign-up) Profile with history order Contact form Footer 404 page Pop-up status messages |
Use Bootstrap and media queries to adapt the site design to all screen sizes | Show readable content, while keeping functionality and design, in all screen sizes | Works as expected |
Desktop example: Home
Desktop example: Products
Tablet example: Products
Tablet example: Bag
Cell phone example: Products
Cell phone example: Wish List
- As a user, I want to receive a confirmation of registration when I sign up, so I know that the process for creating my account went well.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Registration (sign-up) Pop-up status messages |
Use Django confirmation page to inform the user of a successful sign-up | Show a successful message on a page after signing up | Works as expected |
Registration, Step 1
Registration, Step 2
Registration, Step 3, Confirmation
- As a user, I want to be able to contact the site administrator, owner and/or developer, so I can send feedback to them.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Contact form Footer |
Implement a contact form in a separated page, give contact options in footer (which is available in all pages of the site) | Access contact form and other options directly from the footer | Works as expected |
Contact Form Link in Footer
Contact Form
- As a user, I want to have access to my account easily, so I can quickly log in.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Site access (sign-in and sign-out) Registration (sign-up) Footer |
Include access links to account in fixed navigation menu and footer | Access sign-in page from these features | Works as expected |
Access Log-in from Top Navigation Menu
Access Log-in from Top Navigation Menu (Smaller Screens)
Access Log-in from Footer
Access Log-in from Footer (Smaller Screens)
- 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 |
|---|---|---|---|
| Fixed navigation menu Contact form Footer |
Similar to user story 4, implement a contact form in a separated page, give as many as possible contact options in footer (which is available in all pages of the site) | Access contact form and other options directly from the footer | Works as expected |
Contact Form Link in Footer
Contact Form
- As a returning user, I want a navigation menu on top, always visible, so I can access the main 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 a fixed navigation menu on top, in the header of pages, with links to main parts of the site | Navigate to the selected sites, without using the back button, without scrolling down, and without manually editing the URL | Works as expected |
Fixed Navigation Menu for Desktop Image
Fixed Navigation Menu for Tablet Image
Fixed Navigation Menu for Cell Phones Image
Fixed Navigation Menu, expanded, for Cell Phones Image
- As a returning user, I want to have access to my account easily, so I can quickly log in.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Site access (sign-in and sign-out) Registration (sign-up) Profile with history order Footer |
Include access links to account in fixed navigation menu and footer | Access sign-in page from these features | Works as expected |
Access Log-in from Top Navigation Menu
Access Log-in from Top Navigation Menu (Smaller Screens)
Access Log-in from Footer
Access Log-in from Footer (Smaller Screens)
- 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 |
|---|---|---|---|
| Fixed navigation menu Contact form Footer |
Similar to user stories 4 and 6, implement a contact form in a separated page and add contact options in the footer | Access contact form and other options directly from the footer | Works as expected |
Contact Form Link in Footer
Contact Form
- As a returning user, I want to be informed if the contact form goes through, so I know if my message is being sent or it is not.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu 404 page Pop-up status messages |
Use a Django confirmation page to inform the user if sending the contact form is successful | Show a successful page after sending the form | Works as expected |
Contact Form Confirmation
- As a returning user, I want to recover my password easily if I forget it, so I do not worry about remembering and/or keeping it.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu |
... | ... | ... |
Recover Forgotten Password, Step 1
Recover Forgotten Password, Step 2
Recover Forgotten Password, Step 3, Confirmation
Recover Forgotten Password, Step 4, Confirmation
Recover Forgotten Password, Step 5, Confirmation
- As a returning user, I want to have a history of my purchases, so I know what I have bought and spent through time.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Profile with history order |
Store orders and link them to the user profile that originated it | Show purchase history in profile | Works as expected |
Purchase History
- As a shopper, I want to have the products to buy visible (without many details so I can see more), so I can select them for purchase.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Products (with product administration for the site owner) Product details (with product administration for the site owner) |
Create a data model where products are viewed in the body of a unique page according to a specific selection | Show all products in a page (in the body) according to the selection and/or sort in the fixed navigation menu | Works as expected |
Products Page
- As a shopper, I want to have access to the product details, so I can access them in case I am not sure about the purchase and/or want to have a better description of the product.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Products (with product administration for the site owner) Product details (with product administration for the site owner) |
Create a view with product details after clicking on the product itself | Show product details in a different page/view | Works as expected |
Product Details
- As a shopper, I want to have a detailed view of my shopping cart, so I know what I am buying and have the current purchase details just before paying.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Bag page Checkout page |
Create a bag app to show the current shopping cart, with a link in the fixed navigation menu | Show shopping cart in a different page/view | Works as expected |
Shopping Bag, top
Shopping Bag, bottom
- As a shopper, I want to have the amount I am spending always visible, so I know how much I am spending.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Bag page |
Compute total of bag and return it to the view containing the fixed navigation menu | Show spent amount, at all times, in fixed navigation menu | Works as expected |
Permanent Spending Amount
- As a shopper, I want to have special offers easily accessible, so I can buy them before they disappear if I find them useful.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu |
Include a link/list item element to special offers in the fixed navigation menu | Access special offers after clicking on this link/list item element of the menu | Works as expected |
Easy Access for Offers
Easy Access for Offers in Checkout
- As a shopper, I want to have a search field, so I do not spend much time finding the product I want to buy
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu |
Include a search field in the fixed navigation menu that looks for products (according to the search criteria) in the backend and return the results to the products page | Show products related to the search criteria | Works as expected |
Search Field for Desktop
Search Field for Smaller Screens
- As a shopper, I want to have categories of products, so I find a product easily if I do not know its name.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Products (with product administration for the site owner) |
Include links/list item elements in the fixed navigation menu that filter the data in the backend according to categories (previously created) and return the result to the products page/view | Show products related to the selected category in the menu | Works as expected |
Products by Categories
Products by Categories, Digital Data
Products by Categories, Reports
Products by Categories, Training
Products by Categories, Software
Products by Categories, Offers
- As a shopper, I want to have prices always visible, so I know the value of the products at all times.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Products (with product administration for the site owner) Product details (with product administration for the site owner) Bag page |
Compute total of bag and return it to the view containing the fixed navigation menu | Show spent amount, at all times, in fixed navigation menu | Works as expected |
Visible Prices in the Bag
Visible Prices in the Product Details
Visible Prices in the Wish List
Visible Prices in Products
- As a shopper, I want to have the different resolutions of the products visible, close to the product it belongs to, so I can easily select it without further action.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Products (with product administration for the site owner) Product details (with product administration for the site owner) |
Add a field in the products model that activate a product feature related to the resolution (if applicable), giving the user the option to select it | Show the different available resolutions for the products (e.g., in a dropdown element), considering them as other product if a different resolution (than the one in the bag) is selected, updating the quantities in the bag accordingly | Works as expected |
Selection of Product Resolution
- As a shopper, I want to have a secure payment method, so I can rest assured that the purchase procedure is safe.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Checkout page Secure payment method heckout success page |
Implement a payment method that is well known and secure | Process payments from users/shoppers | Stripe payments implemented; Works as expected |
Stripe Payment Process right after Purchasing
Stripe Payment Process right after Purchasing, Success Checkout
Stripe Payment Image - Checkout
Stripe Payment Image - Checkout 2nd Page
Stripe Payment Image - Checkout Success
- As owner, I want to provide an introductory page, so users know what can be found on the website and what can be purchased.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Home page |
Design the home page to give a quick overview of the e-commerce | Find the home page, giving the idea of the e-commerce and a few messages to give the user an idea of what can be found in the site | Works as expected |
Home Page Desktop Image
Home Page Tablet Image
Home Page Cell Image
- As owner, I want to provide an easy process for sign-up, so I ensure a connection with a potential buyer.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Footer |
Include a Django app and page to easily register/sign up in the site if the user opts for this, with links to this option in the fixed navigation menu and footer | Access page for sign-up easily from menu and footer, with a few steps to achieve the task | Works as expected |
Easy Sign Up
- As owner, I want to provide a search field for products on top, so I require users/shoppers the minimum possible time to find a product (and therefore reduce the risk of leaving).
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu |
As user story 18, include a search field in the fixed navigation menu that looks for products (according to the search criteria) in the backend and return the results to the products page | Show products related to the search criteria | Works as expected |
Search Field for Desktop
Search Field for Smaller Screens
- As owner, I want to organize products in categories, so users find an organized site and can find products easily.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Products (with product administration for the site owner) |
As user story 19, include links/list item elements in the fixed navigation menu that filter the data in the backend according to categories (previously created) and return the result to the products page/view | Show products related to the selected category in the menu | Works as expected |
Products by Categories
Products by Categories, Digital Data
Products by Categories, Reports
Products by Categories, Training
Products by Categories, Software
Products by Categories, Offers
- 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 |
|---|---|---|---|
| Fixed navigation menu Contact form Footer |
Similar to user stories 4; 6 and 9; implement a contact form in a separated page, give as many as possible contact options in footer (which is available in all pages of the site) | Access contact form and other options directly from the footer | Works as expected |
Contact Form Link in Footer
Contact Form
- 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 |
As user story 7, Include a fixed navigation menu on top, in the header of pages, with links to main parts of the site | Navigate to the selected sites, without using the back button, without scrolling down, and without manually editing the URL | Works as expected |
Fixed Navigation Menu for Desktop Image
Fixed Navigation Menu for Tablet Image
Fixed Navigation Menu for Cell Phones Image
Fixed Navigation Menu, expanded, for Cell Phones Image
- 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 |
|---|---|---|---|
| Fixed navigation menu Contact form Footer |
Similar to user stories 4; 6; 9 and 27; implement a contact form in a separated page, give as many as possible contact options in footer (which is available in all pages of the site) | Access contact form and other options directly from the footer | Works as expected |
Contact Form
Contact Options
- 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 |
|---|---|---|---|
| Fixed navigation menu Banner with latest news Home page Products (with product administration for the site owner) Product details (with product administration for the site owner) Bag page Checkout page Secure payment method Checkout success page Site access (sign-in and sign-out) Registration (sign-up) Profile with history order Contact form Footer 404 page Pop-up status messages |
Similar to user story 2, use Bootstrap and media queries to adapt the site design to all screen sizes | Show readable content, while keeping functionality and design, in all screen sizes | Works as expected |
Desktop example: Home
Desktop example: Products
Tablet example: Products
Tablet example: Bag
Cell phone example: Products
Cell phone example: Wish List
- As owner, I want to inform users if their consultation/message was successfully sent, so they know if they need to resend it or they do not.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu Pop-up status messages |
Similar to user story 10, use a Django confirmation page to inform the user if sending the contact form is successful | Show a successful page after sending the form | Works as expected |
Contact Form Confirmation
- As owner, I want to inform the user, through an error page, if there is any error when loading the website.
| FEATURE | ACTION | EXPECTED RESULT | ACTUAL RESULT |
|---|---|---|---|
| Fixed navigation menu 404 page |
Use Django error page to inform the user if any action when navigating the site produces an error | Show an error message on a page after facing a problem, e.g., a broken URL | Works as expected |
404 Page Image
404 Page Image
404 Page Image
- As developer, 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 |
|---|---|---|---|
| Fixed navigation menu Banner with latest news Home page Products (with product administration for the site owner) Product details (with product administration for the site owner) Bag page Checkout page Secure payment method Checkout success page Site access (sign-in and sign-out) Registration (sign-up) Profile with history order Contact form Footer 404 page Pop-up status messages |
Implement all knowledge gathered so far in full-stack software development, with as many features as possible according to the Code Institute program time frame | Show as many full-stack software development capabilities as possible | Expecting results and feedback |
The search engine optimization is focused on Google search engine since it accounts for more than 90% of user searches.
Basically, Google elaborates a ranking of pages (according to the criteria being searched) and shows them in the result according to this ranking. Algorithms and human ratters are used to position pages in these search results.
In order to have our page in the first results (user will usually not read after the first page of results), we need our page to be highly ranked in the research results.
A way to do it is by including keywords, which can be short-tail (one or two words, highly ranking but giving a lot of "competitors") or long-tail (phrases, more specific to our products or page, but with less ranking). Therefore, the best solution might be considered that one that produces a high volume of results with low competition.
First, a list of important keywords is created, thinking in our buyers and user personas. Then, the most relevant ones are selected based on volume (high) and competition (low).
(April 5th, 2022) (Quality Factor: No e-commerce/No service provider = 1; No e-commerce/service provider after first page= 2; No e-commerce/service provider in first page = 3; E-commerce after first page = 4 E-commerce in first page = 5) Just to have an idea and assign a quantification to the selection, the "Volume" is multiplied by the "Quality Factor" (and divided by 1000000 to have smaller figures). This is a subjective approach; however the results are still interesting:
| Keywords | Volume (from Google.com) | Content, general description (searching in Google.com) | "Quality Factor" | Volume x "Quality Factor" / 1000000 |
|---|---|---|---|---|
| Keywords | Volume (from Google.com) | Content, general description (searching in Google.com) | "Quality Factor" | Volume x "Quality Factor" / 1000000 |
| Geophysical data | 55,300,000 | No e-commerce in first three pages, most science sites | 1 | 55 |
| Digital elevation model | 68,200,000 | No e-commerce in first three pages, software provider in second page | 2 | 136 |
| DEM | 4,950,000,000 | No e-commerce in first three pages, most science sites, data acquisition provider in second page | 2 | 9,900 |
| Magnetometry | 2,010,000 | No e-commerce in first three pages, service providers in first page | 3 | 6 |
| Gravimetry | 22,900,000 | No e-commerce, service providers in third page | 2 | 46 |
| Resistivity | 101,000,000 | No e-commerce in first three pages, book in third page | 2 | 202 |
| Buy geophysical data | 3,940,000 | E-commerce and books on first page | 5 | 20 |
| Buy DEM data | 52,800,000 | E-commerce on first page, science sites | 5 | 264 |
| Buy Magnetometry data | 10,500,000 | E-commerce and data acquisition providers on first page | 5 | 53 |
| Buy Gravimetry data | 15,500,000 | E-commerce and data acquisition providers on first page | 5 | 78 |
| Buy Resistivity data | 24,300,000 | Service providers and e-commerce on first page | 5 | 122 |
| DEM data | 3,870,000,000 | E-commerce on first page (bottom), science sites | 5 | 19,350 |
| Magnetometry data | 10,500,000 | Science sites, equipment in second page, images of equipment on first page | 2 | 21 |
| Gravimetry data | 17,200,000 | E-commerce on first page (top), science sites | 5 | 86 |
| Resistivity data | 17,200,000 | No e-commerce in first three pages, most science sites | 1 | 17 |
| Geophysical book | 30,900,000 | Lot of books and e-commerce right from the top of first page | 5 | 155 |
| Geophysical training | 16,500,000 | Training service provider on first page | 4 | 66 |
| Geophysical data acquisition | 8,740,000 | Science, data acquisition service provider on second page | 3 | 26 |
| Geophysical data | 201,000,000 | Science, e-commerce for paper and books in third page | 4 | 804 |
| DEM acquisition | 113,000,000 | Science | 1 | 113 |
| Magnetometry acquisition | 1,930,000 | Science, equipment on second page | 2 | 4 |
| Gravimetry acquisition | 3,100,000 | Science, with service provider and book and first page | 3 | 9 |
| Resistivity acquisition | 6,810,000 | Science, book in first page and service provider in second one | 3 | 20 |
| DEM processing | 389,000,000 | Science | 1 | 389 |
| Magnetometry processing | 4,810,000 | Service, equipment provider in first page; science | 3 | 14 |
| Gravimetry processing | 7,440,000 | Science | 1 | 7 |
| Resistivity processing | 31,700,000 | Service provider in second page | 2 | 63 |
| DEM books | 6,420,000,000 | E-commerce from first page | 5 | 32,100 |
| Magnetometry books | 1,950,000 | E-commerce from first page | 5 | 10 |
| Gravimetry books | 4,400,000 | E-commerce from first page | 5 | 22 |
| Resistivity books | 11,000,000 | E-commerce from first page | 5 | 55 |
| DEM training | 4,140,000,000 | Science | 1 | 4,140 |
| Magnetometry training | 1,680,000 | Many training courses in first page, service provider in second page, science | 4 | 7 |
| Gravimetry training | 1,840,000 | training courses in first page, science | 4 | 7 |
| Resistivity training | 26,500,000 | Non-related topics from first page (resistance) | 1 | 27 |
| DEM software | 3,640,000,000 | E-commerce in first page, many products | 5 | 18,200 |
| Magnetometry software | 4,770,000 | Service providers, e-commerce and books in first page | 5 | 24 |
| Gravimetry software | 4,890,000 | Science, service provider in first page | 3 | 15 |
| Resistivity software | 11,000,000 | Service providers from first page | 3 | 33 |
SEO Analysis
SEO Analysis (Ordered)
As it can be observed, the following keywords produce high volume of searches with a focus in our e-commerce nature: "DEM books", "DEM data", "DEM software", "DEM training", "Geophysical data".
Then, those with a "quality factor" of 5 (where an e-commerce appears in the first page of a Google search, since we are interested in promoting an e-commerce( are the following ones: "Buy DEM data", "Geophysical book", "Buy Resistivity data", "Gravimetry data", "Buy Gravimetry data", "Resistivity books", "Buy Magnetometry data", "Magnetometry software", "Gravimetry books", "Buy geophysical data", "Magnetometry books".
Also, it can be observed a clear trend for unique words like "DEM", "Geophysical", "Buy" and "Data", so they were analysed as well.
After analysing "DEM" with wordtracker.com, it is observed that it produces a high volume and good competition comparison. Therefore "DEM" is also included as keyword.
Also, after analysing "Geophysical" with wordtracker.com, it is observer a great score for volume and competition, achieving the first place in both for similar keywords.
"Buy" and "Data" are not finally included in the keywords as they are too general.
Therefore, the final keywords for the projects are the following 18 ones: "DEM books", "DEM data", "DEM software", "DEM training", "Geophysical data", "Buy DEM data", "Geophysical book", "Buy Resistivity data", "Gravimetry data", "Buy Gravimetry data", "Resistivity books", "Buy Magnetometry data", "Magnetometry software", "Gravimetry books", "Buy geophysical data", "Magnetometry books", "DEM", "Geophysical".
On the other hand, keyword staffing was also carried out when possible, for example, in headings and "strong" tags. Social links include the attribute "rel" with "noopener" in order to have search engines not including these links in their search rankings. Images include an "alt" attribute as descriptive for the image as possible (including a meaningful file name). In the metadata we include the description of the e-commerce and these 17 keywords.
Finally, we include the sitemap.xml (in the root folder) to increase the chances of a higher rank in search engines and help them on finding relevant content, and a robots.txt to "tell" them where "not to navigate" (which simultaneously increase the ranking of the site since they consider a site that contains a file like this of good quality).
sitemap.xml: created using XML-Sitemaps.com robots.txt: tested with https://support.google.com/webmasters/answer/6062598?hl=en
Reference: Code Institute, SEO lessons.
wordtracker.com analysis for "DEM" keyword
wordtracker.com analysis for "Geophysical" keyword
Since the e-commerce is oriented to a professional and specialized community, the organic growth (which should simultaneously be considered with organic growth) is suitable for LinkedIn. This social network makes possible the interaction with users and allow them to take training related to the products of the GDEC e-commerce. This social network seems to be very suitable for universities and research institutions that use these kind of data.
Similarly, Facebook, achieves the same goal, with better perspective towards advertising and user interaction, and with a higher amount of users.
The page below was built in Facebook with the aim of interacting with potential users, answer consultations, promoting our products, connect to clients and potential clients and have the change to connect to other potential buyers (users) and/or other social networks through them. It was built trying to use as much content from the GDEC site as possible, so there is a good match between the content of the website and the Facebook page.
GDEC Facebook Page
GDEC Facebook Page
As mentioned before, the above strategies should be carried out with a paid strategy, focusing the expenditures (which might not be necessarily high but constant through time) in geophysical exhibitions (like EAGE or SEG among many others), and on those news or science websites that could caught the attention of authorities (since these kind of data are usually used by them).
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 keep the checkbox for cancelling the delivery cost activated, sending the form to the backend but deactivating it immediately after. | The issue was caused by addressing the checkbox with both JavaScript and an "if" statement in the HTML template, strangely requiring an assignment of the "cancel_delivery_cost" twice, one row after the other, likely due to the time taken for the view to be loaded. The issue was solved by addressing the checkbox with an "if" statement only in the checkbox HTML tag. |
| Accessibility validation presents multiple form labels when there is a repeated product in the wish list, with different resolutions. The issue arises because the model assigns the same product ID (since it considers a Boolean field for the resolution, rather than a text one as the wish list does (for "high", "medium" and "low"). Therefore, in the template "for" loop, repeated labels are generated, since they are generated from the IDs of the products. The same reason has caused issues when adding or updating quantities in the wish list or the bag. | The quantities were solved with AJAX posts that read the resolution. A more robust solution would be to refactor the Product model, migrating its resolution field from Boolean to text (so it would be able to identify the three resolutions separately). |
| Increment and decrement controls to update the quantities in the wish list and bag stopped working after validation and refactoring. The issue was caused by the reorganization of the HTML elements, since JavaScript access these controls through element positioning in the page (not through specific ID or classes). | The issue was solved by assigning the correct relative position of the increment and decrement controls in the page. |
| Commented products did not show the user the label of being already commented (whey they have done so). | The issue was solved by rendering the proper relation in the HTML template, through a variable, after defining the proper data relation in the backend to identify a comment to both a specific product and user. |
The website was fully written in Gitpod, permanently tested in Gitpod terminal, and periodically deployed to GigHub Pages (in a main branch) and Heroku Platform (to handle backend languages), where it was migrated from, to Render, in November 2022. 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. Amazon Web Services S3 is also implemented to contain the static files.
The project repository can be forked from GitHub here (https://github.com/csc7/PP5_CI_GDEC), please check for the "Fork" button, top-right of the page, to achieve this task.
The fully deployed program, accessible by anyone, is found here, whose URL is https://pp5-ci-gdec.onrender.com.com/ . Its repository is found here, whose URL is https://github.com/csc7/PP5_CI_GDEC.
Follow these steps to deploy the content of this project:
1 - Create a Heroku app in Heroku website (more intuitive process, selecting "create new app") or using the CLI in Gitpod if you manage the commands for this and use this development environment.
2 - Add Postgres resource to the Heroku app (in Heroku website, "Resources", "add-ons"), where a "Hobby Dev - Free" plan is enough.
3 - In Gitpod (or your development environment), install dj_database_url with this command: pip3 install dj_database_url
4 - In Gitpod (or your development environment), install psycopg2-binary with this command: pip3 install psycopg2-binary
5 - Freeze the environment requirements: pip3 freeze > requirements.txt
6 - Add/Import the following line/pakage in your settings.py file (on top of the file, with other "import" commands): import dj_database_url
7 - In settings.py update the DATABASES variable to the following lines, so the database is read from the local repository in not set up in Heroku; from: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', }
to: if 'DATABASE_URL' in os.environ: DATABASES = { 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) } else DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } }
8 - Connect to Heroku database and run migrations with the following commands:
If you want to verify that effectively all migrations need to be run, execute python3 manage.py showmigrations
Then migrate: python3 manage.py migrate
9 - Load/Import database (categories and products): a) If you use the database of this repository, use the following commands (in this order, since products depends on categories): python3 manage.py loaddata categories python3 manage.py loaddata products
b) If you manually create the database, please follow these steps: Credits: Code Institute:
- Make sure your manage.py file is connected to your mysql database
- Use this command to back up your current database and load it into a db.json file: ./manage.py dumpdata --exclude auth.permission --exclude contenttypes > db.json
- Connect your manage.py file to your postgres database
- Then use this command to load your data from the db.json file into postgres: ./manage.py loaddata db.json
10 - Create superuser in Heroku: python3 manage.py createsuperuser
11 - Install gunicorn to work as a webserver: pip3 install gunicorn
12 - Again, freeze the environment requirements: pip3 freeze > requirements.txt
13 - Create Procfile (just create file and assign "Procfile" as name) in the project root directory and include this line in it: web: gunicorn your_app_name.wsgi:application
14 - Log in into Heroku from the Gitpod CLI with the following line, entering the required information: heroku login (it will require to log in through a different browser) or heroku login -i (to log in directly in the Gitpod CLI)
15 - OPTIONAL: Set DISABLE_COLLECTSTATIC to 1, so Heroku does not load static files when deploying (at this point of the process, in case you want to look the website before deploying in Amazon Web Services): heroku config:set DISABLE_COLLECTSTATIC=1 --app your_app_name
16 - Ensure ALLOWED_HOSTS variable in settings.py file is set as follows: ALLOWED_HOSTS = ['your_app_name.herokuapp.com', 'localhost']
17 - Create a SECRET_KEY, e.g., using https://miniwebtool.com/django-secret-key-generator/. Then assig a SECRET_KEY value in Config Vars of the Settings section in Heroku. Then, in settings.py file, ensure SECRET_KEY variable is set as follows: SECRET_KEY = os.environ.get('SECRET_KEY', '')
18 - Crease Amazon Web Services account (if needed) and S3 bucket. Assign the bucket a name (e.g., your_app_name), with "ACLs enabled", "Block off public access" disables (accepting warning message below), and then set the following variables:
- Properties tab: Static website hosting, using it to host a website, indicating index.html and error.html in the index and error documents.
- Permissions tab:
- CORS configuration (required to have access between Heroku and S3), copying these lines of code: [ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]
- Bucket Policy: click on "Policy Generator" at the bottom and, in the new page, select "S3 Bucket Policy" as the type of policy, assign a start ("*") to "Principal" to allow all of them, "GetObject" in "Actions", paste the ARN of the bucket (found in the "Properties" of the bucket) in the corresponding field, generate policy, copy the resulting code in the "Bucket Policy" that originated this new page, and save.
- Access Control List: enable "List objects" for "Everyone.
19 - Add Amazon Web Services Identify and Access Management (IAM) to create a user to access the S3 bucket and apply the following changes:
- Open IAM from AWS available services.
- Go to "User Groups" (left), "Create group" (top right), assign a name (e.g., manage_your_app_name) and create (bottom).
- Go to "Policies", "Create Policy", go to "JSON" tab, "Import managed policy", select "AmazonS3FullAccess", "Import". In the "Resource" field of the JSON structure, assign the ARN of your app as follows: ... "Resource": [ "arn", "arn/*" ]
- Then click "Next:Tags", "Next:Review" (assign a name, e.g., your_app_name_policy; and a description, e.g., "Access to S3")and "Create Policy". The policy will appear in the list of policies.
- Go to "User Groups", select your app, "Permissions", "Attach Policies" (in "Add Permissions" button), select the one you have just created and click "Add Permissions" on the bottom.
- Go to "Users", "Add user", assign a name (e.g., "your_app_name_access_to_static_files"), select "Programatic access", and "Next:Permissions".
- "Add user to group", select the policy you have just created and click "Next: Tags", then "Next: Review" and finally "Create User".
- IMPORTANT: AFTER ADDING THE USER TO THE GROUP, DOWLOAD THE .CSV FILE AS IT MIGHT NOT BE AVAILABLE LATER. The file is required for authentication for the Django app.
20 - Install boto3 with the following command: pip3 install boto3
21 - Install django-storages with the following command: pip3 install django-storages
22 - Again, freeze the environment requirements: pip3 freeze > requirements.txt
23 - Add storages in INSTALLED APPS of settings.py: 'storages',
24 - Check that the variables of "if 'USE_AWS' in os.environ:" in settings.py correspond to your app name and AWS settings. Please note that you need to have defined the following variables in Config Vars of Heroku (in "Settings"): AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY USE_AWS
IMPORTANT: At this point, DISABLE_COLLECSTATICS of point 15 can be deleted if you opted for enabling it), so Django loads the static files from Amazon Web Services
25 - Check that your "custom_storages.py" file is properly defined according to your app and AWS account.
26 - In the app bucket of your Amazon Web Services account create a folder named "media" (in the same level that the "static" folder is located)
27 - Check that superuser e-mail in Django admin user interface is verified.
28 - Add API keys (STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY) from Stripe to Config Vars in Heroku. Then, in your Stripe account (in "Developers" section, "Webhooks"), "Add endpoint", add the URL of the project, selecting and adding all events. Finally, copy the signing secret of the webhook and assign it to a STRIPE_WH_SECRET in the Config Vars of Heroku. Ensure the variables match the names in the settings.py file.
29 - Add automatic e-mail variables in Config Vars of Heroku (to send automatic e-mails from the app), EMAIL_HOST_PASS (password given by your e-mail service provider) and EMAIL_HOST_USER (the e-mail address from where e-mails are sent).
Replace EMAIL_HOST in settings.py if you are using a different service provider than GMail.
Please note that these are the steps according to the user interface as of April 4th, 2022. There might be changes after a while.
Remember you can commit and push your changes to both GitHub and/or Heroku for GitHub: git add . git commit -m "Your update commit message" git push
for Heroku: If initialization is needed: git init heroku git:remote -a your_app_name
Then: git add . git commit -m "Your update commit message" git push heroku main
You can also set automatic deployments by going to Heroku website, "Deploy" section of your_app_name, and connecting to GitHub (after searching for your_app_name in the corresponding "Connect to GitHub" section and finally clicking on the "Enable Automatic Deploys" button at the bottom).
In settings.py file, you can set the DEBUG variables as follows if you want to control the debug mode from Heroku Config Vars: 'DEVELOPMENT' in os.environ
Heroku Deployment Screenshot
-
Code Institute:
-
I have used the learning material in the course as a guide and reference.
-
"Boutique Ado" project: reference for building this PP5_CI_GDEC website/project, and provision of code as commented out in the code.
-
Tutor Assistance, on several issues (e.g., contexts.py file).
-
Not to include "bag_tools" (Python function based on a Django template) as app; Igor from Code Institute, on Slack, checked on March 16th, 2022, at 2:28.
-
Tutor Assistance, John, to solve Django toasts not showing up, on March 17th, 2022.
-
Tutor Assistance, James, to solve the issue of the total in the shopping bag (with signals after adding/updating the bag), which showed correctly in back end but appeared as zero in HTML template.
-
Tutor Assistance, Sean Murphy, to solve the issue of the cancelled delivery cost not appearing in the checkout page; on April 30th, 2022, at 12:29 PM.
-
-
Balsamiq Wireframes: I have used it to create all the wireframes.
-
Jesse James Garrett's process for user experience.
-
Bootstrap:
-
To find and check components : https://getbootstrap.com/docs/4.0/getting-started/introduction/.
-
Starter template: https://getbootstrap.com/docs/4.4/getting-started/introduction/, copied on March 1st, 2020, at 00:10.
-
Bootstrap v4.6 Toasts, https://getbootstrap.com/docs/4.6/components/toasts/; copied on March 16th, 2022, at 15:00.
-
Bootstrap Carousel, https://getbootstrap.com/docs/4.0/components/carousel/, copied and modified on March 25th, 2022, at 00:30.
-
-
Coverage.py:
To show the coverage of the Django test files; https://coverage.readthedocs.io/en/6.3.2/.
-
Django-allauth: version 0.41.0, https://django-allauth.readthedocs.io/, installed on February 25th, 2022.
-
Django Documentation:
-
Several consultations to check and remember methods, configuration, elements and syntaxis.
-
To limit field content to specific values, https://docs.djangoproject.com/en/4.0/ref/models/fields/, accessed on April 12th, 2022.
-
Pagination by Django Documentaiton: https://docs.djangoproject.com/en/4.0/topics/pagination/, accessed on April 15th, 2022, at 2:00.
-
To show coverage of test files: https://docs.djangoproject.com/en/4.0/topics/testing/advanced/.
-
-
Djangocentral:
- To add a comment feature: copied and modified (except computation of product rating) from https://djangocentral.com/creating-comments-system-with-django/, Abhijeet Pal, Author and Editor in Chief @djangocentral, on April 12th, 2022.
-
ERD:
- ERDPlus, to make the data model graph, https://erdplus.com/standalone
-
Font Awesome:
-
Font Awesome Script / Kit, link copied on March 1st, 2022, 03:29 from Font Awesome personal account.
-
Icon for My Account: link copied on March 1st, 2022, 03:32 from https://fontawesome.com/v4/icon/user.
-
Icon for shopping cart: link copied on March 1st, 2022, 03:35 from https://fontawesome.com/v4/icon/shopping-cart.
-
Icon for GDEC logo: link copied on March 1st, 2022, 04:00 from https://fontawesome.com/v4/icon/paw.
-
Icon for Facebook: link copied on March 1st, 2022, 17:23 from https://fontawesome.com/v4/icon/facebook-square.
-
Icon for LinkedIn: link copied on March 1st, 2022, 17:27 from https://fontawesome.com/v4/icon/linkedin-square.
-
Icon for Twitter: link copied on March 1st, 2022, 17:28 from https://fontawesome.com/v4/icon/twitter-square.
-
Icon for Instagram: link copied on March 1st, 2022, 17:28 from https://fontawesome.com/v4/icon/instagram.
-
Icon for the envelope (for sending e-mails): link copied on March 1st, 2022, 17:29 from https://fontawesome.com/v4/icon/envelope
-
-
Google:
- Google Fonts: Play (Regular 400 and Bold 700) and Roboto (Regular 400), import code copied on March 1st, 2022, at 05:05.
-
Heroku:
- Deployment guides.
-
jQuery:
- jQuery Core 3.6.0, minified version, https://releases.jquery.com/, copied on March 1st, 2020, at 00:20.
-
Mailchimp:
- Sign-up of newsletter, generated and copied on April 6th, 2022, at 3:10, in Mailchimp account (Mailchimp: Marketing Automation & Email Platform, https://mailchimp.com); later modified.
-
Natural Earth:
- All images of maps have been generated with data of Natural Earth, using the "Natural Earth quick start kit" (50m raster), which was downloaded from https://www.naturalearthdata.com/downloads/ on February 23rd, 2022, at 22:22.
-
Pexels:
- Images of products that are not maps were downloaded from Pexels: https://www.pexels.com/ . The following are the file details and credits (author, link to image, file name, date it was downloaded):
Paul IJsendoorn- https://www.pexels.com/es-es/foto/canon-del-antilope-33041/ pexels-paul-ijsendoorn-33041.jpg 2022-03-12 at 19:00
Tomáš Malík https://www.pexels.com/es-es/foto/foto-de-primer-plano-del-glaciar-svinafellsjokull-3591596/ pexels-tomáš-malík-3591596 Renamed as pexels-tomas-malik-3591596 2022-03-12 at 19:08
Martins Krastins https://www.pexels.com/es-es/foto/muro-de-piedra-agrietada-838981/ pexels-martins-krastins-838981 2022-03-12 at 19:11
Curioso Photography https://www.pexels.com/es-es/foto/vista-aerea-del-cuerpo-de-agua-288100/ pexels-curioso-photography-288100 2022-03-12 at 19:14
Pixabay https://www.pexels.com/es-es/foto/planeta-tierra-220201/ pexels-pixabay-220201 2022-03-12 at 19:19
Tom D'Arby https://www.pexels.com/es-es/foto/paisaje-desierto-seco-suelo-5949017/ pexels-tom-d'arby-5949017 Renamed as pexels-tom-d-arby-5949017 2022-03-13 at 14:26
Pok Rie https://www.pexels.com/es-es/foto/fotografia-aerea-de-la-isla-1726310/ pexels-pok-rie-1726310 2022-03-13 at 14:28
Pok Rie https://www.pexels.com/es-es/foto/mar-gente-mujer-arte-11192678/ pexels-pok-rie-11192678 2022-03-13 at 14:31
NastyaSensei https://www.pexels.com/es-es/foto/vista-superior-de-un-rio-2782115/ pexels-nastyasensei-2782115 2022-03-13 at 14:34
Dids https://www.pexels.com/es-es/foto/resfriado-naturaleza-seco-modelo-4949961/ pexels-dids-4949961 2022-03-13 at 14:43
Rachel Claire https://www.pexels.com/es-es/foto/naturaleza-textura-montana-acantilado-4993089/ pexels-rachel-claire-4993089 2022-03-13 at 14:46
MART PRODUCTION https://www.pexels.com/es-es/foto/arena-desierto-seco-duna-8869235/ pexels-mart-production-8869235 2022-03-13 at 15:17
Mengliu Di https://www.pexels.com/es-es/foto/vista-aerea-del-paisaje-3064079/ pexels-mengliu-di-3064079 2022-03-13 at 15:40
Johannes Havn https://www.pexels.com/es-es/foto/foto-de-la-plataforma-petrolera-1716008/ pexels-johannes-havn-1716008 2022-03-13 at 15:47
Jan Zakelj https://www.pexels.com/es-es/foto/amanecer-cielo-puesta-de-sol-noche-9291512/ pexels-jan-zakelj-9291512 2022-03-13 at 18:20
Aron Razif https://www.pexels.com/es-es/foto/mar-agua-puerto-industria-9336586/ pexels-aron-razif-9336586 2022-03-13 at 18:33
Simon Berger https://www.pexels.com/es-es/foto/un-glaciar-azul-bajo-el-sol-3660696/ pexels-simon-berger-3660696 2022-03-13 at 18:37
Mikhail Nilov https://www.pexels.com/es-es/foto/mar-paisaje-naturaleza-oceano-8332570/ pexels-mikhail-nilov-8332570 2022-03-13 at 18:40
Markus Spiske https://www.pexels.com/es-es/foto/codigos-en-la-lente-de-cambio-de-inclinacion-2004161/ pexels-markus-spiske-2004161 2022-03-13 at 18:45
Torsten Dettlaff https://www.pexels.com/es-es/foto/dispositivo-digital-en-blanco-y-negro-que-muestra-el-grafico-70911/ pexels-torsten-dettlaff-70911 2022-03-13 at 18:48
Monstera Pexels.com https://www.pexels.com/es-es/foto/ligero-creativo-de-viaje-direccion-7412095/ pexels-monstera-7412095 2022-03-13 at 18:53
Burak Kebapci https://www.pexels.com/es-es/foto/visualizacion-de-graficos-en-un-i-pad-187041/ pexels-burak-kebapci-187041 2022-03-13 at 18:58
Alesia Kozik https://www.pexels.com/es-es/foto/manos-telefono-inteligente-ordenador-portatil-graficas-6772076/ pexels-alesia-kozik-6772076 2022-03-13 at 19:28
Pok Rie Pexels.com https://www.pexels.com/es-es/foto/vista-de-pajaro-de-la-orilla-del-mar-1426827/ pexels-pok-rie-1426827 2022-03-14 at 12:44
Pok Rie https://www.pexels.com/es-es/foto/mar-naturaleza-playa-vacaciones-10981948/ pexels-pok-rie-10981948 2022-03-14 at 12:47
Jake Ganse https://www.pexels.com/es-es/foto/mar-agua-oceano-olas-9181889/ pexels-jake-ganse-9181889 2022-03-14 at 13:07
Ian Beckley https://www.pexels.com/es-es/foto/foto-escenica-del-gran-canon-durante-el-dia-2757641/ pexels-ian-beckley-2757641 2022-03-14 at 13:10
Ian Beckley https://www.pexels.com/es-es/foto/arte-creativo-sucio-industria-2588870/ pexels-ian-beckley-2588870 2022-03-14 at 13:14
Mikhail Nilov https://www.pexels.com/es-es/foto/resfriado-nieve-paisaje-montanas-7456226/ pexels-mikhail-nilov-7456226 2022-03-15 at 13:29
Hugo Heimendinger https://www.pexels.com/es-es/foto/arena-marron-y-cuerpo-de-agua-4026047/ pexels-hugo-heimendinger-4026047 2022-03-15 at 13:34
Martin Sanchez https://www.pexels.com/es-es/foto/resfriado-iceberg-naturaleza-sucio-4325680/ pexels-martin-sanchez-4325680 2022-03-15 at 13:37
Kristina Gain https://www.pexels.com/es-es/foto/resfriado-glaciar-iceberg-derritiendo-4042406/ pexels-kristina-gain-4042406 2022-03-15 at 13:40
Curioso Photography https://www.pexels.com/es-es/foto/arboles-y-suelo-durante-el-dia-288093/ pexels-curioso-photography-288093 2022-03-15 at 13:46
Curioso Photography https://www.pexels.com/es-es/foto/cuadro-abstracto-amarillo-y-azul-3719622/ pexels-curioso-photography-3719622 2022-03-15 at 13:49
Leon Macapagal https://www.pexels.com/es-es/foto/modelo-textura-rock-ciencia-6622887/ pexels-leon-macapagal-6622887 2022-03-15 at 13:51
Alex Qian Pexels.com https://www.pexels.com/es-es/foto/fotografia-de-drones-de-la-gran-muralla-china-2304791/ pexels-alex-qian-2304791 2022-03-15 at 13:55
ArtHouse Studio https://www.pexels.com/es-es/foto/resfriado-nieve-ligero-paisaje-4641210/ pexels-arthouse-studio-4641210 2022-03-15 at 13:59
-
Python unittest:
- As reference for testing in Python: https://docs.python.org/3/library/unittest.html .
-
QGIS:
- QGIS 3.18, to create the fictitious maps for data, created on February 24th, 2022.
-
Stack Overflow:
-
Read file path with Python: https://stackoverflow.com/questions/3207219/how-do-i-list-all-files-of-a-directory, accessed on March 1st, 2022, at 23_35.
-
Read file name with Python: https://stackoverflow.com/questions/7336096/python-glob-without-the-whole-path-only-the-filename, accessed on March 1st, 2022, at 23_45.
-
Open and write files in Python: https://stackoverflow.com/questions/29223246/how-do-i-save-data-in-a-text-file-python, accessed on March 2nd, 2022, at 00:57.
-
Write several variables to file: https://stackoverflow.com/questions/16822016/write-multiple-variables-to-a-file, accessed on March 2nd, 2022, at 01:03.
-
Import Lower function; https://stackoverflow.com/questions/31734993/lowercase-django-query, accessed on March 15th, 2022, at 11:55.
-
Equivalent of marquee tag for HTML5, https://stackoverflow.com/questions/53632338/what-is-the-equivalent-of-marquee-tag-in-html5; accessed on March 16th, 2022, at 3:20.
-
Inclusion of Google fonts in Stripe elements based on https://stackoverflow.com/questions/44915511/stripe-elements-google-web-font-not-working, accessed on March 18th, 2022, at 6:20.
-
To render last items in a "for" loop in Django templates: https://stackoverflow.com/questions/68494568/how-to-display-latest-5-orders-by-using-for-loop-in-jinja-django; https://stackoverflow.com/questions/36977773/how-to-reverse-a-for-loop-in-a-django-template-and-then-slice-the-result; https://stackoverflow.com/questions/36977773/how-to-reverse-a-for-loop-in-a-django-template-and-then-slice-the-result; accessed on March 29th, 2022, at 14:30.
-
Capitalize first letter of each word: https://stackoverflow.com/questions/1549641/how-can-i-capitalize-the-first-letter-of-each-word-in-a-string, accessed on April 14th, 2022, at 01:54.
-
To capitalize first letter in Django template: https://stackoverflow.com/questions/14268342/make-the-first-letter-uppercase-inside-a-django-template, accessed on April 18th, at 15:35.
-
To replace correct URL for filtered Django queries, for first/previous/next/last pages, accessed on April 22nd, 2022, at 02:00, at https://stackoverflow.com/questions/68820700/paginate-a-filter.
-
-
Simpleisbetterthancomplex: https://simpleisbetterthancomplex.com/
- By Vitor Freitas, missing line for proper pagination, "paginator.page(page)", and option to address no integers, https://simpleisbetterthancomplex.com/tutorial/2016/08/03/how-to-paginate-with-django.html, accessed on April 15th, 2022, at 2:00.
-
Stripe:
-
Core logic/payment flow: https://stripe.com/docs/payments/accept-a-payment.
-
CSS styles: https://stripe.com/docs/stripe-js; https://stripe.com/docs/payments/elements.
-
To check if a form is submitted with jQuery: https://stackoverflow.com/questions/14969467/how-to-check-with-jquery-if-any-form-is-submitted, accessed on April 9th, 2022, at 15:30.
-
-
StudyGyaan:
- Definition based on this article: https://studygyaan.com/django/how-to-use-bootstrap-4-forms-with-django-crispy-forms#html-code, accessed on April 16th, 2022.
-
W3Schools (Powered by W3.CSS), https://www.w3schools.com/:
-
Generate random numbers (float format), https://www.w3schools.com/python/ref_random_uniform.asp, accessed on March 2nd, 2022, at 01:42.
-
Check object-fit property for CSS: https://stackoverflow.com/questions/37287153/how-to-get-images-in-bootstraps-card-to-be-the-same-height-width, accessed on March 3rd, 2022, at 04:25.
-
Check object-fit property for CSS: https://www.w3schools.com/css/css3_object-fit.asp, accessed on March 3rd, 2022, at 04:27.
-
Use of marquee tag, https://www.w3schools.in/html-tutorial/marquee-tag/, accessed on March 16th, 2022, at 2:45.
-
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, at any time.
- Code Institute community in Slack for permanently being an online reference.
- All the valuable information provided by the sources mentioned above in the credits.