Thunderbird and Whale Bookstore System- Project Portfolio 3 - Python.

The Thunderbird and Whale bookstore system is based on the notorious bookstore that Bella Swan is seen to visit in Twilight. It's situated in the town of Forks which has a very simplistic and calm nature surrounding the town- similarly, the app system I created also does not have an overload of information, The app is simply useful as it allows the owners of the bookstore to effectively and quickly recieve data on how many books the need to order into the shop at the beginning of the new week by calculating how many books were sold, ordered and the difference between these figures.

The live site is available for viewing here - Thunder and Whale Bookstore System.

Contents

• Objective
• User Experience UX
  • Design Prototype
  • System Structure
  • Python Logic
  • Data
  • Design Choices
  • Colour Scheme
• Features
  • Startup
  • Welcome Text
  • Input Instructions
  • Feedback
  • Updates
  • Results
• Future Features
  • Last Restock Comparisons
• Technologies Used
• Python Packages
• Testing
• Deployment To Heroku

Objective

For my third project I wanted to create something simple, useful and something that still related to one of my passions. As a huge Twilight fan and bookworm that would love to own a book shop this simple but effective system is perfect. I believe this system of calculating future orders needed is also something that can be used by all business, just differin g in scale, therefore it is simple but highly effective.

Back to Contents

User Experience (UX)

Design Prototype

I used Figma to design a very basic wireframe as I knew this command line application would be simple in its appearance. The system still ended up being slightly different with a dark brown background being used as opposed to a dark green and a button instead of a title above the terminal. However, I still preserved the simplistic and cozy theme of the site.

Back to Contents

System Structure

The very simple Thunderbird and Whale Bookstore system simply contains a command line interface where the user is guided on what data they will need to input. Just above the interface is a 'Run System' button which allows for the site to be reloaded.

Python Logic

I used the paint app on Windows to create a simple flowchart to showcase my python logic and how the system will process the data input and reach the final result message.

Data

For this site, Google Sheets was used to store the data, update the data and compare the data. The Google Sheet has three different worksheets, with one containing the data for the amound of books sold, another with the amount of books ordered and lastly a worksheet storing the difference between the two former worksheets so the bookstore can see if there was a surplus of data or not.

Colour Scheme

• Aligning with the gloomy and very cozy nature of the Twilight Saga movies, and the Thunderbird and Whale bookstore in the movie I kept the colours very cozy, and dark, reflecting the colours of nature as Twilight contains a large amount of nature imagery.
• Therefore, I decided to go for a dark brown for the background colour and I used a forest green for the 'Run System' button. The interface being black complients these colour well, with the white of the text allowing for efficient contrast for accessibility purposes.

Back to Contents

Features

Start Up

• When the site is first loaded the user will see is the interface with the Run System button above it. There will be a message letting the user know that the start up command is running.

Welcome Text

• The site also provides the user with a fun and lively welcome text which briefly informs the user of what the system is about and what the interface will need help with.

Input Instructions

• On the screen is also instructions prompting the user to input the amount of each book that was sold the previous day, at the bottom the user can input their data.

Feedback

• If the user enters invalid data, by not entering the correct amount of numbers or by not entering a number at all and accidently entering a word for example, the system will present the user with a message letting them know of this so they know what they did wrong and can try again with the correct data.

Updates

• If the data is valid, the user will be met with a message clarifying this. The interface will then update each worksheet consecutively and print a message to the user as each updates so that the user knows what is happening, that it has happened and that their worksheets have successfully been updated.

Results

• Finally, the final outcome of how many of each book is needed to be ordered by the bookstore owner is printed, each book followed by the amount that needs to be ordered, or if there actually are books that need to be ordered less. The bookstore owner has done this in a fast, simple and reliable system.

Back to Contents

Future Features

Last Restock Comparisons

• In future versions I would allow for the user to see a comparison between the stock needed for this week and last week so the owner can know which books are rising in popularity, falling in popularity, what people are preferring to buy and how they can change their ordered to reflect this data and cause a greater profit.

Technologies Used

• HTML5 - Provides the content and structure for the website.
• CSS3 - Provides the styling for the website.
• Python - Provides the functionality of the website.
• a11y - Used to test the contrast and accessibility.
• GitHub - Used to host and deploy the website.
• Chrome Developer Tools - Used to test responsiveness and debug.
• Am I Responsive? - USed to test responsiveness of website.
• Pep8 - Used to test python code in website.
• Figma - USed to create design prototype.
• Google Sheets - Used to host the application data.

Python Packages

• GSpread - Used to transfer data between google sheets.
• Google-auth.

Back to Contents

Testing

CSS Validation

• I used W3C CSS Validator to ensure the html in my application was bug-free.

PEP8 Validation

• I used pep8.com to ensure there were no errors in my python code. I ran into a bug which stated there was white space in my document, after deleting that whitespace my code passed through the validator with no issues as seen below.

Lighthouse Testing

• To ensure the site would be compatible with desktops I ran lighthouse testing using Chrome Developer Tools.

A11y

• To ensure that my website contrasted well enough with the chose colours I testing it using a11y which found that it contrasted perfectly.

Manual Testing

Structure

• Ensure terminal is centered.
• Ensure Run System button is centered and large enough to see.
• Ensure colours contrast well.
• Ensure text is clear to see.

Welcome Text

• Ensure user is greeted with the welcome message in the correct order.
• Ensure the prompt for user to input data is present and under welcome text.
• Ensure sold data is transferred to spreadsheet when inputted.

Errors

• Ensure that the correct error message is presented when an incorrect amount of values are inputted.
• Ensure the correct error message is presented if user doesn't input a number value.
• Ensure the terminal will identify invalid data and not continue to push that data.
• Ensure Google Sheet is updated when valid data is inputted.

Updates

• Ensure message is presented to inform user that the data they have inputted is valid when it is.
• Ensure the user is informed when each spreadsheet is updating and has finished updating.
• Ensure the Google Sheet reflects this and actually updates with the correct data.

Results

• Ensure results are printed to user.
• Ensure the correct results are printed to the user.

Back to Contents

Deployment to Heroku

The Thunderbird and Whale project was deployed to Heroku. I did this through the following steps:

1. Create an account with Heroku or Log In.

2. Click on the button that states 'Create New App.'

3. You can then input your application name and select your region- press 'Create App' once that is completed.

4. Once this has been done, you'll be at the 'Deploy' tab, from here click on settings and then 'Reveal Config Vars' in the 'Config Vars' section.

5. Locate the KEY input field and enter "CREDS" and in the VALUE input field enter "JSON", repeat this but in the KEY input field enter "PORT" and in the VALUE input field enter "8000"- click 'Add' on the right.

6. Scroll to buildpacks section and click on 'Add buildpack'.

7. Firstly, add 'Python' then add 'node.js', in that specific order.

8. Go to 'Deploy' tab and select 'GitHub'- then search for your GitHub repository- click 'Connect'.

9. Select your preferred deployment type and select 'Enable Automatic Deploys' and 'Deploy'.

10. Select view to viewed deployed app.

You can find the live link the the GitHub repository here- https://github.com/NaifatSelina/third-project

Back to Contents