Welcome to my project! Deployed Site

Matthiol is an online flower shop, which offers flower bouquets and gifts with flowers for the customers.

This image is created with ami.responsivedesign.

1. UX

   • Project Goals
   • User Stories
   • Design

2. Features

3. Information Architecture

4. Technologies Used

   • Languages
   • Libraries and Packages
   • Tools
   • Databases

5. Testing

6. Deployment

7. Credits

8. Disclaimer

• People who are looking to buy flowers / bouquets
• looking to buy spicial gifts
• People who seek for presents for special occasions such as birthdays
• looking to buy plants

• Purchase products in a smooth and secure way
• Get informed with the products before buying by product information

• Provide customers with a secure and safe ecommerce shop
• Establish the shop's brand image

• Viewing and Navigation

• Registration, User Accounts and User Community

• Sorting and Searching

Wireframes were created with balsamiq You can find the wireframes here.

• The main colors used are: #01013d , #d67985 and white

• The "Lato" font is the main fonts used throughout the whole website with "font-italic" class for some paragraph and for logo brand I use 'Akaya Telivigala' .

This website is composed of 6 applications: Online Shop, FLOWERS, checkout, Plants, OCCASIONS, 'Gifts'

• Home Page: Landing Page is designed as a single page website to provide site visitors with enough information so they can understand what the business is about of this site. 1- Banner for free delivery in case of purchasing with value more than 50$. 2- Search Bar 3- Navigation Bar includes the below: Brand Name of the site Help icon includes About Us, Contact Us My Account icon includes Register and Login Checkout Page: On the checkout page, customers are asked to fill in delivery details.

• Main Navigation Bar: 1- Online Shop includes below details: By Price By Rating By Occasions By Category All products 2- Flowers, by clicking on it you will be able to see all available varieties with photos and price. 3- Plants includes below details: Green Plants Flowering Plants All Plants 4- Gifts includes below details: Special Gift Baskets Gift Baby Gift All Gifts 5- Occasions includes below details: Birthday Anniversary Congratulations Love & Romance Wedding

• If user is logged in as superuser, they can access to Add / Edit Blog post page.

My Profile page is available for authenticated users and will be shown in the My Account Dropdown menu at the navbar which appears when you log into your account.

• In Profile Page, authenticated users can 1. edit Delivery Information and 2. see Order History.

Only authenticated superusers can access the admin page (1.products/add/, 2. products/edit/, 3. products/delete ). If non-logged in users try to access the url directly, it will redirect to the sign in page. If a non-superuser tries to access the url, an error message pops up which says that only a superuser can access this page.

There are some of features left to implement in the future which I could not add to the project this time due to time constraints. These features are great to be added for a more complete online shop service which would lead to higher customer satisfaction.

The main frontend development was created using HTML, CSS, JavaScript and their libraries. The main backend development was powered by Python and Django.

• HTML, CSS, JavaScript, Python

• Django
• Django Crispy Forms
• Django Allauth
• Bootstrap (v4.4.1)
• JQuery
• Font Awesome
• Stripe
• Google Fonts

• Git/GitHub
• Gitpod
• PIP
• AWS S3 bucket

• SQlite3- database used for development.
• PostgreSQL - database used for production.

• The responsiveness of this website was tested constantly during the development process. It was tested in real desktops, tablets and mobile devices as well as on Google Chrome developer tools.
• The website was tested on different browsers such as Google Chrome, Safari, Internet Explorer and Mozilla Firefox.
• I asked friends and family members to test the functionalities of the website on desktop and mobile devices. Their feedback was used to improve website usability.
• All links, buttons, forms, navbar and pages functionalities were tested regularly while working in the project.

This website is deployed on Heroku, following these steps:

1. Install these packages to your local environment, since these packages are required to deploy a Django project on Heroku.

• gnicorn: gnicorn is Python WSGI(web server gataway interface) server for UNIX.
• gninx: gninx is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server.
• psycopg2-binary: psycopg2-binary is PostgreSQL database adapter for the Python programming language.
• dj-database-url: dj-database-url allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.

2. Create a requirements.txt file and freeze all the modules with the command pip3 freeze > requirements.txt in the terminal.
3. Create a Procfile write web: gunicorn boutique_ado.wsgi:application in the file.
4. git add and git commit and git push all the changes to the Github repositoty of this project.
5. Go to Heroku and create a new app. Set a name for this app and select the closest region (Europe) and click Create app.
6. Go to Resources tab in Heroku, then in the Add-ons search bar look for Heorku Postgres(you can type postgres), select Hobby Dev — Free and click Submit Order Form button to add it to your project.
7. In the heroku dashboard for the application, click on Setting > Reveal Config Vars and set the values as follows:

8. Comment out the current database setting in settings.py, and add the code below instead. This is done temporarily to migrate the datbase on Heroku.

  DATABASES = {     
        'default': dj_database_url.parse("<your Postrgres database URL here>")     
    }

9. Migrate the database models to the Postgres database using the following commands in the terminal: python3 manage.py migrate
10. Load the data fixtures into the Postgres database using the following command: python3 manage.py loaddata <fixture_name>
11. Create a superuser for the Postgres database by running the following command: python3 manage.py createsuperuser
12. Replace the database setting with the code below, so that the right database is used depending on development/deployed environment.

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': os.path.join(BASE_DIR, 'db.sqlite3'),
        }
    }

13. Disable collect static, so that Heroku won't try to collect static file with: heroku config:set DISABLE_COLLECTSTATIC=1

15. In Stripe, add Heroku app URL a new webhook endpoint.
16. Update the settings.py with the new Stripe environment variables and email settings.
17. Commit all the changes to Heroku. Medial files are not connected to the app yet but the app should be working on Heroku.

### Amazon Web Service S3
The static files and media files for this deployed site are hosted in the [AWS](https://aws.amazon.com/) S3 Bucket. You will need to create S3 bucket, complete the setting up and upload static files and media files to the S3 bucket. You can find [Amazon S3 documentation](https://docs.aws.amazon.com/AmazonS3/latest/gsg/CreatingABucket.html) for more information on the setting.
I used CORS configuration below:

[ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]

- Setting for static/media files in settings.py
1. Install `boto3` and `django-storages` with a command `pip3 install boto3` and `pip3 install django-storages` in your terminal, to connect AWS S3 bucket to Django.
2. Add 'storages' to `INSTALLED_APPS` in settings.py.
3. Add the following in settings.py.

if 'USE_AWS' in os.environ: # Cache Control AWS_S3_OBJECT_PARAMETERS = { 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT', 'CacheControl': 'max-age=94608000', }

# Bucket Config
AWS_STORAGE_BUCKET_NAME = 'matthiolashops3'
AWS_S3_REGION_NAME = 'eu-central-1'
AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3-eu-west-1.amazonaws.com'

# Static and media files
STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'

# Override static and media URLs in production
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

5. Add [custom_storages.py]
6. Delete DISABLE_COLLECTSTATIC from Heroku Config Var.
7. Push all the changes to Github/Heroku and all the static files will be uploaded to S3 bucket.
By setting up above, Heroku will run python3 manage.py collectstatic during the build process and look for static and media files.

### Automatic Deploy on Heroku
You can enable automatic deploy in the following steps that pushes update to Heroku everytime you push to github.
1. Go to Deploy in Heroku dashboard.
2. At `Automatic deploys`, choose a github repository you want to deploy.
3. Click `Enable Automatic Deploys`.


## Local Deployment
For local deployment, you need to have an IDE (I used Gitpod for this project) and you need to install the following:
- Git, Python3, PIP3
Also, you need to create account in the following services if you don't own yet:
- Stripe, AWS (S3 bucket), Gmail

# Credits

## Content

- All Content was written by developer.

### Media

- Hero Images were downloaded from Google.com


### Acknowledgements
### Credit code: 

I refere to the Project - Boutique Ado 

## Disclaimer
The content of this website is educational purposes only.

## Thank you

- Thanks to the Tutors for helping me in completing this level. All the classes and lessons were very valuable and had a great added value to my knowledge and future career.
- I would like to express my gratitude to the great efforts done by my Mentor.
- Thanks for all Student Care Advisers which supported the Students.
- Thanks for my husband  who has always supported me.

























## Gitpod Reminders


To run a backend Python file, type `python3 app.py`, if your Python file is named `app.py` of course.

A blue button should appear to click: *Make Public*,

Another blue button should appear to click: *Open Browser*.

In Gitpod you have superuser security privileges by default. Therefore you do not need to use the `sudo` (superuser do) command in the bash terminal in any of the lessons.