search

BjornRodin / book-a-contractor

0 stars 1 forks source link

readme

Book A Contractor

Introduction

This is a website where anyone can come and book a meeting with a Contractor. They can help you plan many type of projects and they also help you out with the project itself when it comes to building it. What this site then is for is to connect people who want to build something with someone who can make it happen.

View the live project here

Link to Github Repository

Am I Responsive?

Table of Content

User Experience (UX)

Introduction

The goal for this website is to provide people with an simple and easy way to get in contact with a contractor for basically any kind of building project they might think of. By being able to register to the site the user can then create a booking with a contractor. After that they can also see their booking directly being presented at the page 'My Bookings'. From this view the user can then see for what they have booked a meeting for and also the day and time. This site then makes sure to shorten the 'gap' that might be for any person with a project in mind to actually be able to realize it together with a contractor.

User Stories

The project was made with agile methods and can be seen in the repository in the Project Board where also more comments can be found.

Below is a outtake from that page:

project-board

Site User

Site Admin & Owner

Design

Graphics

Generally the graphics I was going for was to make it as simple and clear as possible for anyone who visits the website. I did not want it to be cluttered in any way, shape or form. I've worked in the construction field myself and to have simple websites is a key for that industry. So what I went for was a clean landing-page with clear intentions of the site itself.

General-graphics

Lucid Chart

Lucidchart was used to create the flowchart to better get an idea of how the page is navigated and who can see what and at what stage. By doing this I could better understand where I was going at each stage. A relationship table was also created for the models using the same tool.

Flowchart

Diagram

Wireframes

The wireframes that I made was, once again, really nice to have to not only design the page, but also to be able to do a better decision regarding the scope of the project. In my example I wanted to add alot to the website because it is easy to have "big" ideas. However, when talking it through with my mentor I quickly realized that it might be to to big of a reach to manage to do everything that I had planned within the timelimit that we got. So for example I did not put in the "Reference Projects" that is mentioned in the wireframes because that would mean I have to add much more content and functions to handle it correctly. But that is what this is for, to get a better understanding of our thoughts and then make decisions based on other things, like time constraints, knowledge, what the website "Must have" and what it "Could have".

Below is the wireframes:

Homepagewire Bookasessionwire signinwire Shareyourexpwire Referenceprojwire

Features

Existing Features

Future Features

Testing

User Stories Testing

As a Site User I can view and edit my booked session(s) so that I can edit any of the information previously provided if needed

As a Site User I can cancel my bookings so that I can delete a previously made booking when logged in

As a Site User I can quickly find possible social links in the footer so that I can navigate to those links

As a Site User I can navigate the site easily so that I know where I am and where I can see and do certain things

As a Site User I can login so that I can book a session and view my current bookings

As a Site User I can register to the site so that I can book a session

As a Site User I can click the button on the home-page so that I can make a booking

As a Site User I can not book several sessions during the same date so that can't double-book myself if I already have a booking that day

As a Site Admin I can manage booked sessions user's made so that I can manage my bookings

As a Site Owner I can display relevant content to my profession such as images, text and a clear button for bookings so that site users can clearly see what the site is for

Automated Testing

W3C Markup Validation Service

First I was trying to validate like usual (basically the same way) but I had forgot that the Django template tags could make it weird. However, this is how I did it.

To validate the HTML code in this project and not get errors because of the Django template tags I followed these steps:

  1. Navigated to the deployed website in google chrome
  2. Navigate to the specific page to test
  3. Right-click the page and above "Inspect" there should be a "View Source code" or "View page source"
  4. Copy all the code that appears
  5. Go to W3C Markup Validator and choose "Direct input"
  6. Then paste the code and press "Check" to validate code
Home Page

Htmlhome

Register Page

Htmlregister

Login Page

Htmllogin

My Bookings Page

Htmlmybookings

Book a Session Page

Htmlmybookasession

Logout Page

Htmllogouterror Htmllogout

View Booking Page

Htmlviewbookings

Update Booking Page

Htmlupdatebookings

Delete Booking Page

Htmldeleteerror Htmldelete

W3C CSS Validation Service

This was done using Jigsaw and compying all code from css as a direct input.

CssJigsaw

Python Validator

To check the Python code in this project I used the CI Python Linter

Project
settings.py

settings.py

urls.py

urls.py-project urls.py-project-resolved

Booking application
admin.py

admin.pyerror

admin.py

forms.py

forms.pyerror

forms.py

models.py

models.pyerror

models.py

urls.py

urls.pyerror

urls.py

views.py

views.pyerror

views.py

Google Lighthouse Performance Test

The tests are all made in the same way:

  1. In incognito-mode

  2. The same configuration is used, showed in below image. Only 'Device' was changed in between the tests.

    Lightouse Configuration

Manual Testing

Feature Test

Tested according to below image and passing everything.

feature-testing

Responsiveness

The responsiveness of the website was tested with google chromes devtools and was tested with all devices available there. Below is a few images from different sizes. I can't find any responsive design issues on any of the pages. The images are, in order: Desktop, Nest Hub, Galaxy S8 and another to show the dropdown meny for navbar on smaller screensizes.

Desktop-responsive Nest-responsive Mobilebooking-responsive Mobilenavbar-responsive

Bugs

The bugs that I encountered are all mostly visible in the Project Board. I say 'mostly' because not all the minor bugs is reported there but instead reported in a commit message in the repository. It is also the first time i'm working with a project board so I am still getting a hang of how it works. What i've tried to do is to atleast mention the major bugs and discussing them before finding the solution and mentioning those aswell of course. In any case, below is a list of bugs that was encountered and how they was solved.

A learning experience that I will definitely take with me is that using the Project Board is an amazing tool to keep track of the items that are being worked on and any history related to that development. In future projects and when going into the field of working as a programmer I will be spending as much time as possible organizing this page to not only keep my work updated, but also be able in detail to show anyone else what has been done and when it was implemented.

However, I am very glad that I was able to use it as much as I did because it really helped me to stay focused on the task at hand and I will keep getting better at using it to its fullest potential.

  1. For the User Story "Edit and view Booked Sessions" on the board a bug was that when the user had loads of bookings then the footer and the overlay would overlap the bookings while they continued to fill the window downwards.
    • It was resolved after some testing in the google chrome devtools looking at the different classes that was used. What I realized was that I had set a fixed view height for all pages because most pages has much less content on it. So what happened was that when this space was completely full then the content would outgrow the body.
    • The solution then was to remove this class for this specific page which then solved the issue.
  2. When handling login and logout I first started by making my own templates. This made it so that it was impossible to use the allauth.account which was used in the walkthrough.
    • I quickly realized when going through the material again that I had missed to install the required systems for allauth, but when I did then I could get cracking on removing my own html files for these and instead use the templates within account for allauth.
    • When this was added then it could be connected correctly and working fine.
  3. Another bug was regarding the registration (signup) for the website. As I had decided to not make the email-field mandatory I must have missed trying to register with an email. Because when I started manually testing all the features of the site then I would encounter a "Connection Refused Error".
    • Error message in full: ConnectionRefusedError at /accounts/signup/ [Errno 111] Connection refused
    • As the code had passed through all other tests aswell as validation I was really struggling to understand what was wrong as everything up to now was working.
    • However, after alot of trial and error like looking at how everything was connected with their urls, if the databases was working, if I had accidentally changed anything while cleaning up the code. I could still not resolve the issue. After searching the web I found someone with a similar issue on Stackoverflow, and it also solved the issue for me. Here is the link to that solution: Solution
    • The code that solved the issue is the following and it was added to the settings.py file.
      • EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
      • ACCOUNT_EMAIL_VERIFICATION = "none"
  4. When booking a session I had the crispy form due to a "TemplateDoesNotExist" error where it couldn't find the "uni_form.html" file.
    • I tried to solve it by looking around the web and testing different suggestions but I never got it to work correctly. I also tried to reinstall crispy forms, tested different versions but without luck.
    • After much searching I found this post on Stackoverflow where the solution was to install crispy-bootstrap4. Since I had already tried this it first didn't work, but then I realized that in a previous attempt to solve the issue I had set "APP_DIRS" to False, but it needed to be True. When that was changed then it worked as intended.
  5. Should maybe not call this one a bug, but somewhat it is so I will consider it a bug. At first when creating the datefield in the booking form it was to be manually set by the user. As we want data to be uniform this was a bit of an issue I realized. So instead of that I wanted to look into a datepicker instead, because in such a picker the date will always be uniform and the user will find it easy to choose a date without even having to know how we "want" the data to be presented.
    • To create the datepicker I did read up on django-bootstrap-datepicker-plus and by doing so I could create my endproduct. Where I got the idea from was from here.
  6. When changing content in the models.py and wanted to migrate the changes I got the following information printed to the terminal. "1. Provide a one-off default now (will be set on all existing rows with a null value for this column) OR 2. Quit, and let me add a default in models.py"
    • At first I was confused but when I read this text over and over again I understood that existing rows in the database need some kind of information to put in them when these migrations was to be made. With that sorted I could then add default values to the fields that I was either changeing or adding. When that was done the migrations worked fine.

Technologies

Requirements

Full list of all the libraries and packages in the requirement.txt file

Deployment

ElephantSQL

Create external database for app data

  1. Create an account at ElephantSQL
  2. Click "Create New Instance"
  3. Type a name for for your plan, usually the projectname.
  4. Select "Tiny Turtle (Free)".
  5. Leave tags field empty
  6. Select your region
  7. Select a data center near your location from the list
  8. Click "Review"
  9. Check your details, then click "Create instance"
  10. Return to dashboard and click on your database
  11. In the URL section, click the icon to copy the database URL

Gitpod & Github

  1. Create repository in Github using the provided Code Institute template
  2. Give your repository a name
  3. Click "Create Repository"
  4. Open with Gitpod
  5. In Gitpod, install all the libraries and packages mentioned in "Requirements"
  6. Create your requirements.txt file with command "pip3 freeze --local > requirements.txt"
  7. Create a "env.py" file in your project
  8. Make sure to add it to your ".gitignore" file
  9. In "env.py" file, set this code (on separate lines)
    • import os
    • os.environ["DATABASE_URL]="Your ElephantSQL URL here"
    • os-environ["SECRET_KEY]="your secret key here"
  10. Save the file
  11. In your settings.py file, enter the following code below your "Path" import
    • import os
    • import dj_database_url
    • if os.path.isfile('env.py'): import env
  12. Further down, find "SECRET_KEY"
    • Change the previous set key to 'SECRET_KEY'
  13. Next, comment out the original DATABASES variable and type this one below
    • DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL)) }
  14. Save file
  15. Now type this command in the terminal
    • python manage.py migrate
  16. Push to github with the following commands in the terminal, one by one
    • git add .
    • git commit -m "commit message"
    • git push

      Deployment to Heroku

  17. Assuming you have a Heroku account, otherwise you have to create one.
  18. In Heroku, click "Create a new app".
    • Give the app a valid name (names are unique).
    • Then choose your region.
    • Lastly click "Create app"
  19. In the tabs, click "Settings".
  20. Scroll down to "Config Vars", click "Reveal Config Vars".
    • Add a "Config Var".
      • In the field "KEY", type "DATABASE_URL".
      • In the field "VALUE", paste your "postgres" link from ElephantSQL.
      • Then click "Add"
    • Add another "Config Var".
      • In the field "KEY", type "SECRET_KEY".
      • In the field "VALUE", enter your "secret key".
      • Then click "Add"
    • In the field "KEY", type "CLOUDINARY_URL".
      • Get your link from Cloudinary.
      • Paste the copied link in the field "VALUE" in Heroku.
      • Then click "Add"
    • Add another "Config Var".
      • In the field "KEY", type "PORT".
      • In the field "VALUE", type "8000".
      • Then click "Add"
  21. Scroll up and from the menu-tab, click "Deploy".
    • In "Deployment method", choose "GitHub" by clicking it.
    • In "Connect to GitHub", click "Connect to GitHub".
    • In "Connect to GitHub" there now is a searchbar, enter your repository name and then click "Search".
    • Your repository should appear, click "Connect" next to it.
  22. Scroll down so you can see "Automatic deploys" and "Manual deploy".
    • You can choose either option.

You have now deployed your project to Heroku!

Version Control

Credits

Media

Code

Content

Acknowledgements