Skip to content

Latest commit

 

History

History
1111 lines (784 loc) · 29.9 KB

README.md

File metadata and controls

1111 lines (784 loc) · 29.9 KB

veg community


Developer: Julio David Hernandez User created to see the basical functions:

user : usertest pw : 123prove321

Live Website

Table of Contents

About

Veg community is a community website where the users can get a weekly planner and interact in a community blog.

  • With two types of accounts
    • An administrator user account
    • A normal user account

User Goals

  • See the plan at any time
  • Be able to plan their meals
  • See the Foro at any time
  • Be able to Comment the posts

Site Owner Goals

  • Supply an online community for users.
  • Furnish an online solution for users to plan their weekly meals.
  • Produce visually attractive design
  • Provide full responsive application with comfortable navigation

User Experience

Target Audience

  • People who want to set an organized meals planer.
  • Vegetarian enthusiasts who wish to be part of a community.
  • People who desire to keep track of their meals.
  • people who require to follow a meal planer

User Requirements and Expectations

  • Fluent navigation.
  • Practical use.
  • A responsive application that permits the users to access their diet program on any device.
  • Attractive design for different screen size.
  • Functions and Links working as hoped-for.
  • Easy method to contact with the developer
  • Simple methodology to be use the application
Back to top

User Stories

Users

Like user I want to:

  1. See the home page, a minimal design.
  2. Be able to navigate to different pages in the application.
  3. Register and acquire an account.
  4. Planing a weekly diet.
  5. Delete my plan as requested.
  6. To see my current plans at any time.
  7. Edit items from my current plans at any point.
  8. Delete items from my current plans at any point.
  9. Interact with the community.
  10. Log in to the app to use the different services

Site Owner

As a site Owner, I want:

  1. Every customer to be able to view the articles of the blog.
  2. Only the logged-in users to be able to create their plans.
  3. Users to be able to manage their plan like needed.
  4. Database entry to be validated on sign-up page.
  5. User to come to a error page for a URL that does not exist.
  6. Users be able to get in contact by our networks.
  7. The site is responsive.
Back to top

Design

Colours

The color tones were chosen precisely to match the concept and to a simple and approachable design using the Visual Studio colors preset. Constituted by a combination of three colors to realize a fluent UX design

Black Color
Blue Color
Orange Color
Color Picker

Fonts

ROBOTO Font from GOOGLE. The most used on the majority of data flow.

Structure

Website pages

Following the principles of UXD (user experience design), the website structure was designed to be fluid and simple to operate. The website was composed of a page with:

  • The website consists of the following sections:
  • The Home page and six interactive pages.
  • The Community Blog.
  • The Personal Planer.
  • Footer with social media developer.
  • Plan page allowing user to create a diet meal.
  • Plan page where user can see all their diet meal.
  • Plan page where user can edit an existing diet meal.
  • Delete plan, allowing user to delete selected diet meal.
  • Blog page where showed the posts.
  • Blog page where user can see a description and comment.
  • Register page to sign up a new user on the website.
  • Login page to log in user on the website.
  • Logout page to log out user of the website.
  • 404 error page.

Database

  • The backend consists in the use of Django framework based in python with a database of a Postgres Elephant SQL for the deployed version.
  • Consist in five database models, all fields are stored in the database structure stored in the Postgres database.

The following models represent the database model structure of the website:

Show diagram
User Model
  • The User model is part of the Django allauth library and was represented as hypothetical.
Post Model
  • The Post model contains the fields: title, slug, author, updated_on , content, featured_image, exerpt, created_on, status, likes
  • The model has a one-to-one relationship with User
  • The image field contains the Blog image.
Comment Model
  • The Comment model contains the fields: post , name, email, body, created_on, approved.
  • The model has a one-to-one relationship with Post
Week Model
  • The Week model contains the following fields: weeknumber, status, title, slug, period, created_on, featured_image.
  • The model has a one-to-one relationship with User
  • The Week model was designed to grow the planner in a future to develop a monthly planer.
Day Model
  • The Day model contains the following fields: week_owner. title, slugday, day_name, phrase, featured_image, status.
  • The model has a one-to-one relationship with Week.
Meal Model
  • The model contains the following fields: owner, day, title, slugmeal, meal_description, featured_image, created_on.
  • The model has a one-to-one relationship with User
  • The Meal model contains the body type category for an exercise

Wireframes

Laptop & Desktop
Mobile & Smartphone
Back to top

Technologies Used

Languages & Frameworks

  • HTML
  • CSS
  • Bootstrap
  • Javascript
  • Python
  • Django
  • giref==3.5.2

Libraries & Tools

  • dj-database-url 1.0

  • Django 3.2.15

  • django-allauth 0.51.0

  • django-cloudinary-storage 0.3.0

  • django-crispy-forms 1.14.0

  • django-summernote 0.8.20.0

  • gunicorn 20.1.0

  • oauthlib 3.2.1

  • psycopg2 2.9.3

  • PyJWT 2.5.0

  • python3-openid 3.2.0

  • pytz 2022.2.1

  • requests-oauthlib 1.3.1

  • sqlparse 0.4.2

  • types-cryptography 3.3.23

  • Git To have a version control

  • GitHub To store The Git Data

  • Herooku was used to deploy the project into live environment

  • Postgres SQL – To Save Postgres database

  • Cloudinary cloudinary-storage 0.0.6

  • Summernote To use field in forms page

  • Visual Studio Code & GitPod Edit code

  • Favicon.io To Create the site favicon

  • Google Fonts To Set the fonts

  • WireFrame To Design the wireframes

  • Dbdiagram.io Used for the database schema diagram

  • Validation:

Back to top

Features

Navigation Bar

  • Featured can be accessed at the all pages

  • The nav bar includes links to Home, Foro, Planner and contact us pages.

    • Logged-in users will see their name right in the nav bar with option to click to log out
    • Not logged-in users have the option to register or log in

  • The nav bar is responsive to changes to a toggle on smaller size screens

  • The navbar permits user to move in the various sections on the website

  • User stories covered: 2

Nav Bar

Home page

  • Home page includes nav bar, main body and a footer.
  • Main body changing to the different urls by extend function of django.
  • User stories covered: 1
Home Page

Footer

  • A footer is displayed at the base template, it will be shown at bottom in each page
  • Contains network links to get ion contact.
  • User stories covered: 16
Footer

Sign up / Register

  • Everyone can create an account.
  • when the users are log-in, log-out & sign-up will be notified by alert message.
  • User stories covered: 3
Sign Up

Login

  • Sign Up users can log-in to their account.
  • To log in the user have to type their credentials.
  • User and Password Fields are mandatory.
  • When user is logged will be able to use the planner page.
  • User stories covered: 10, 14.
Login

Sign Out

  • Confirmation screen for Logged in user to logout from their account
Sign Out

Planner page

  • Logged-in users can interact with the database.
  • User stories covered: 4, 5, 6, 7, 8, 12, 13
Planer

Add meal in the plan

  • Users can plan their weekly meals
  • Users can add a meal in their weekly plan
  • User stories covered: 4, 5
Add Meal item

Delete meals in the plans

  • Users can delete their meals on the days.
  • User can delete by a button like minimal design.
  • User stories covered: 1, 4, 8.
Delete Meal item

Edit plan

  • User can edit a selected day diet
  • This can be done by clicking the icon edit from the item icons
  • User can edit any meal item and save once edited
  • User is provided with a feedback message that their meal has been edited
  • User stories covered: 5
Edit Section

Foro page

  • Page show the articles list published in the database.
  • Guest able to see the article detail and likes number.
  • User stories covered: 11.
Foro page

Articles detail page

  • Provides overview of the article.
  • Guest can view a detailed description likes and comments in the articles.
  • User stories covered: 9
Post detail

Comment form

  • Comment form to let a comment in the particular article.
  • User stories covered: 9.
Comment form

Error pages

  • If the user has no premises to access, the 403-page will show
  • If a user goes to no exist link, the error page will display 404
  • If the user fills a form wrong, will display error-500 page
  • User stories covered: 15, 17
Error page
Back to top

Validation

The W3C Markup Validation Service was used to validate the HTML of the website.

Home
Planner
Foro
Contact us
Log in
Log out
Sign Up
Error page

CSS Validation

The W3C Jigsaw CSS Validator Service validate the CSS of the website, it passed without errors.

W3C jigsaw

JavaScript Validation

JSHint Service was used to validate the Javascript files without errors.

JSHint

Python Validation

To validate python was used two services Pylint, Flake8.

  • Pylint is a static code analyser for Python 2 or 3. The latest version supports Python 3.7.2 and above.

  • Flake8 is a popular lint wrapper for python. Under the hood, it runs

three other tools and combines their results: pep8 for checking style. pyflakes for checking syntax. mccabe for checking complexity.

Home
view.py
Foro
Admin.py
apps.py
forms.py
Models.py
Urls.py
Views.py
Planner
Admin.py
apps.py
Forms.py
Models.py
Urls.py
Views.py

Chrome Dev Tools Lighthouse

Lighthouse was used to test the performance, accessibility, best practice and SEO of the site. Overall the results are very good for the 4 values.

Desktop

View results
Contact Us
Home
Meals
Planer
Posts
Error Pages

Mobile

View results
Contact Us
Home
Meals
Planer
Posts
Error Pages

Wave

The WAVE WebAIM web accessibility evaluation tool was used to test the websites accessibility.

Home wave
Planer
Days list
Meals
Foro
Post List
Post Details
Contact us
Error pages
##### Back to [top](#table-of-contents)

Testing

The testing approach is as follows:

  1. Manual testing of user stories
  2. Automated testing

Manual testing of user stories

  1. See the home page, a minimal design.
Step Expected Result Actual Result
Navigate to https://djangoapp4.herokuapp.com// Home page load Works as expected
Home
  1. Be able to navigate to different pages in the application.
Step Expected Result Actual Result
Use options from navigation var Navigate around the pages Works as expected
Nav Bar
  1. Register and acquire an account.
Step Expected Result Actual Result
Navigate to https://djangoapp4.herokuapp.com/accounts/signup/ Register/SignUp Page Works as expected
Register/SignUp
  1. Planing a weekly diet.
Step Expected Result Actual Result
Navigate to https://djangoapp4.herokuapp.com/planer/ Planer page load with all week days Works as expected
Week
  1. Edit items from my current plans at any point.
Step Expected Result Actual Result
Use the edit function on the items Edit view load Works as expected
Edit
  1. Delete my plan as requested.
Step Expected Result Actual Result
Use the delete function on the items Delete funciton load Works as expected
Delete
  1. To see my current plans at any time.
Step Expected Result Actual Result
Get my planer Load planer view Works as expected
Screenshot
  1. Delete items from my current plans at any point.
Step Expected Result Actual Result
view delete function on the items Delete items Works as expected
Delete items
  1. Interact with the community.
Step Expected Result Actual Result
Comment form Comment submited as user Works as expected
Comment Posts
  1. Log in to the app to use the different services
Step Expected Result Actual Result
Navigate to https://djangoapp4.herokuapp.com/accounts/login/ Log In as User Works as expected
Login
  1. Every customer to be able to view the articles of the blog.
Step Expected Result Actual Result
Navigate to https://djangoapp4.herokuapp.com/posts/ Foro Page load Works as expected
Foro
  1. Only the logged-in users to be able to create a Meal in their plans.
Step Expected Result Actual Result
https://djangoapp4.herokuapp.com/planer/add_meals users can create a meal item Works as expected
Add page
  1. Users to be able to manage their plan like needed.
Step Expected Result Actual Result
Functions views The users can Add Delete and edit meals items Works as expected
Functons
  1. Database entry to be validated on sign-up page.
Step Expected Result Actual Result
Navigate to https://djangoapp4.herokuapp.com/accounts/signup/ Get the Sign Up notification Works as expected
Screenshot
  1. user to come to a error page for a URL that does not exist.
Step Expected Result Actual Result
Navigate to Wrong url inside the page 404 page error Load Works as expected
Navigate in a page without have the permit 403 page error Load Works as expected
Fill and submit wrong a form 500 page error Load Works as expected
Error pages
  1. users be able to get in contact by our networks.
Step Expected Result Actual Result
Go to footer in https://djangoapp4.herokuapp.com/ Network links Works as expected
Network links
  1. The site is responsive.
Step Expected Result Actual Result
Navigate to pages Responsive in different screens size Works as expected
Responsive

Automated testing

Automated testing was done using the Django's unit tests from a Python standard library module: unittest. The reports were produced using the coverage tool.

Test

Performing tests on various devices

The website was tested using Google Chrome Developer Tools Toggle Device Toolbar to simulate viewports of different devices.

The website was tested on the following devices:

  • Lenovo legion (Big Screen)
  • Samsung Galaxy Tab A (Medium screen)
  • Hawei p40 (Small screen)

Browser compatibility

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions
Back to top

Bugs

Bug Fix
Edit function Give the right parameter to save form
Render Template Give Multiple parameters by url
Back to top

Configuration

Deploy Application

Create a Database

  • Database Create an elephant SQL
  • Go to Elephant SQL and crew a new instance.
  • select a server
    Create Database
  • Get Database Environment Url
    Get Database URL

Cloudinary

Create a cloudinary Acount and get the environment Url

Get Cloudinary environment variable

Config Django App

  • Add installed App cloudinary.
  • config static files with cloudinary.
    Create Env.py.
  • Create a procfile and add " web: gunicorn name_of_main_app.wsgi".
  • collect statics in Django project.
  • Generate requirements by freeze command.

Heroku Deployment

  1. Create an account in heroku.com
  2. Create a new app, give it a distinctive name, and select your location.
  • Create App
  • Select server
  1. Go to Heroku aplication deployment.
  2. Select Deployment method and conect with GitHub.
  • Git hub
  1. Go settings select buildpacks. For the project 'python'.
  • Buildpacks
  1. Go to Config and Env vars set with the environment vars gotten in the previus steps
  • Config vars
  1. Choose the branch at the end of deployment section.
  2. Await the app's construction. When everything is deployed, you will see the message "App was successfully deployed" and a "View" button that will lead you to your deployed link.
  • Deploy branch

Forking the GitHub Repository

  1. Go to the GitHub repository https://github.com/jdhernandezS1/CI_PP4_DjangoPY
  2. Click on Fork button in top right corner
  3. You will then have a copy of the repository in your own GitHub account.

Clone the GitHub Repository

To clone the repository:

  • In the Github repository
  1. Locate the button Code in the right uper corner.
  2. Chose between HTTPS, SSH, Github CLI or download zip.
  3. Open Git Terminal (Bash).
  4. Go to the directory where you want to cloned the file.
  5. Use command Git clone and paste the URL.
git clone https://github.com/jdhernandezS1/CI_PP4_DjangoPY.git

Online view link_to_page

Back to top

Credits

Images

Images Sources:

  • fabicons
  • freepng
  • ionicons
Back to top

License

  • CI_PP4_DjangoPY is an open source project by CI_PP4_DjangoPY that is licensed under OPS.
  • CI_PP4_DjangoPY reserves the right to change the license of future releases.

Acknowledgements

Cordially thanks to:

  • HashEm to bless me.
  • My Family to support me.
  • My mentor Mo Shami.
  • Guys of Stack overflow.
  • Code Institute Academy