Django-2.1 (bigmomma_venv) clivenoonan:~/workspace (master)

.

• Django 2 - The project uses Django 2 for rapid web development, clean design & a pragmatic approach

• Stripe - The project uses Stripe Payment integration.

• Cloud9 - The project uses Cloud9 to Write/Code & format syntax in various languages.

• Heroku

  • The project uses Heroku as an app deployment hosting platform for my application

• AWS

  • The project uses https://us-east-2.console.aws.amazon.com/console to serve static content & media files

• TravisCI

  • The project uses https://travis-ci.org/ for continues testing intergration, test passsing on git repo

• Mailgun

  • The project uses https://www.mailgun.com/ for email delivery service integration with Mailgun

• Adobe Ai

  • The project uses Adobe Ai to create the Logo

• Git&GitHub

  • The project uses https://github.com/ to version control the development project

• BootStrap4

  • The project uses BootStrap4 to assist the Developer with a built in css library -,aswell as reusable components

• FontAwesome5

  • The project uses fontawesome to inhance webfonts &
  • increase seo conversion, also to assist the developer in creating a consistant textual flow

• HTML5

  • The project uses HTML5 to house the sturcture & the base semantics.

• CSS3

  • The project uses CSS3 to to Style the elements & Responsive WebDesign.

• Js

  • The project uses Js to add interactivity & to interact with stripe.

• GoogleFonts

  • The project uses GoogleFonts to enhance the visual text & ensure readabilty on various platforms & screens
  • also to inhance webfonts & increase seo conversion,

• LightHouseChromeExstention

  • The project uses LightHouseChromeExstention to test seo data & accsseibitly & best practices

• validator.w3

  • The project uses validator.w3 to test seo data & accsseibitly & best practices

• jigsaw.w3

  • The project uses jigsaw.w3 to test validation of CSS3 -also to test seo data & accessibility & best practices

• Compressor

  • The project uses https://compressor.io/ to compress images

• W3C for HTML.
• W3C for CSS.
• JS Hint for JavaScript.
• TravisCI for Continues testing tests passing on github

Tested On

• Chrome.
• Internet Explorer.
• Microsoft Edge.
• Firefox.
• Opera.
• Continous design Testing SonyXsperia Mobile Phone
• Continous design Testing Windows10XL Mobile Phone
• Continous design Testing 42 Inch sharpSmart Led TV
• All Browsers & Mobile devices Display the whole site as was intended
• LightHouse

USER1 : gets wind of an awesome surfing website where he can buy surfboards, he finds the link thru soacial media & connects , he browses the site for a few minutes & decides he might make a purchase , he completes his purchase with out having to create an account Test1 User1 ( True/False ) Was User1 able to complete his purchase with out having to create an account? True

USER2: is just packing up from surfing for the day, when she hears an advert on the radio about an online surf shop , she clicks on ,after being in the water all day she fills in her details incorrectly, she tries again with all the correct details , but being in such a hurry , she never finishes the task , so she puts the phone down , when she arrives home , she brings her mobile with her , she puts it down , her daugther picks it up & begins exploring the website, she gets thru most of it & discovers the cart , she manages to get all the way with a pink surfboard she quite fancied, she gets to the stripe popup box, & recalls her dad working treiesly on something the exact same on his computer, she remembers what to do , she manages to remeber the test long password with the same numbers , then she remembers the easy one with 3 numbers ,

She is then left with the calender, she does not qiute understand this type of calender, so she fills in what she knows and carrys on , she see,s the little box shake with disagreement & decides she better put it away

Test1 User2 ( True/False ) Was User2 able to create an account when she filled in her details incorrectly? Falsh Was User2 daugther able to make a purchase when she filled in her details incorrectly? falsh RESULT 100%

USER3 is coming home from work on the bus he begins to shoulder surf another passengers laptop , as he admires the website he retrives his mobile from his pocket & reads the address, connects to the website, he attempts signing up for the first time , USER3 has only been using a mobile for a week he has spent most of his life on the beach, must be why his eyes are so good, he fills in his details with the first name & the last name as the same name, he then attempts to only enter in 6 characters in the passsword field, with an incorrect email address ,

After a bit of a shock from all the errors he concetrates on the insructions before him , after a few minutes studying , he fills out all the info correctly, except for his email address, he then attempts for the second time to register an account , observing the error , he realises he has forgotten his @ symbol , he then corrects his typo & proceeds ,

Test1 User3 ( True/False ) Was User3 able to create an account when he filled in his details incorrectly? Falsh Was User3 able to create an account when he filled in his details with just the @ symbol missing? falsh Was User3 able to create an account when he filled in his details correctly? True RESULT 100%

I tried to signup for another account but they only except 1 mobile number & 1 credit card number My Project is ready & setup for email intergration as soon as mailgun unlocks my account, I am presently in contact with Mailgun,

• The stages to deploy this project were_
• first I needed to install dj-database-url, this is a package that allows us to connect to a database url
• Then I needed to install psycopg2 , this is a package that allows us to connect to a postgres heroku database
• next I needed to freeze my requirements to make sure all my packages are updated, heroku will build our app with these packages & all there packages
• next I have to make my imports into my settings.py file
• next I had to replace my database values with this code
• DATABASES = {'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) }
• next I had to update my env.py file with my database tuple which is set with os.environ.setdefault('DATABASE_URL')
• I also extracted my secret key from my setting.py file & stored them in my env.py file with the same syntax of os.environ.setdefault('SECRET_KEY')
• Then I went back to my settings.py file & replaced back my secret key with this code os.environ.setdefault("SECRET_KEY", "")
• I then made migrated my database to my heroku postgres database, then I needed to create a superuser
• might have to add in here about rebuilding database

• In this section of the deployment process I had to create an account on aws with a unique name ,
• I had to receive an automated phone call from aws , once verification was complete , I had the ability to log in to my aws account
• next up was to create a bucket on aws with a unique name
• next I had to grant access to anyone so my applications static files could be accessed from anywhere,
• I carried out this task while still in the Set Properties section of the bucket creation, once created
• next up was to access my bucket & then to select Static website hosting,
• Permissions is next with a bucket policy , a bucket policy is what allows access to our bucket(contents of our bucket)
• I did this with a json configuration which is standard , I just needed to insert my own aws bucket details, which I already created
• next task was to create a group policy to allow users, I did with s3 & IAM aws webservices, I created a group.
• after this I had to create a policy but this time for the group ,
• next was to configure my arn credentials into my group policy json formatted document in the Policy Document text box on aws,
• then I validated & created the group policy, so next I had to find the policy for the group that I just created & attach it to my group
• next ws to create a user with programmatic access with the group permissions we had earlier created

• next task was to test our bucket with an image file , in order to do this I had to grant permissions in the process of uploading
• next task was to install django-storages & boto3 & add storage's to our installed apps , this packages will give us the abilty to connect Django to s3
• next up was to configure my aws config credentials , such as our bucket name our region name our accesss & our secret key,
• I also had to configure my custom domain & static files location in my setting.py file
• next task was to go back to our .env file & add our aws configuration details where they can be ignored by the our .gitignore file
• I was send aws keys from aws , these wee stored safely, these are highly sensitive keys , so I needed to configure these in our .en file
• The next step in this was to run the command collectstatic
• this was to collect the static files & our media files , but to do this I used the technuige of seperation of concerns,
• This technique allows us to seperate our media files & our satitc files
• In order to accomplish this I made a custom_storages.py file in our top level Directiory in our cloud9 IDE,
• so I had to import my S3BotoStorge into my custom_storages.py & create a class to declare a location of settings.py
• next was back agian to oui setings.py & I then configured the relevent location of static
• I then had change my storage.backends.s3boto3.S3Boto3Storage to custom_storages.StaticStorage to match the class we just created in our
• custom_storages.py file , then I had to finally run the command of collectstaic agian to transfer our static directory on aws s3
• next was to create a second class to represent our media files, which are now being served from aws & then once agian I needed to run

• Next task in this deployment was to setup & configure TravisCI continues integration , after authorising travis to access git hub account
• I then found my project & turned travis on , next is to click the not so obvious build failing tab/button,
• this will give you the option of a drop down box where we can select markdown as the chosen configuration, then we need to copy & paste
• markdown that travis gives us and insert into my README.md file , this is so travis can connect to our project/application.
• Next up was to create a travis.yml file and code in the configuration to declare python as our language
• also configure our requirements details so travis knows what packages to rebuild in order test our app
• Git add ,Git commit, Git push were next up,

• I first had to comment out my env file , so my application would run I then had
• to change my database because I will now be running my application from heroku,
• I achieved this within an if statement which also acts as a point of access for Travis in my settings.py file
• Git add ,Git commit, Git push were next up,

• now that my app is ready for deployment on heroku I needed to configure my config vars,
• this involved transferring all my keys from my .env file with matching naming values from the project into the heroku interface cloud console,
• next I connected/synced my git repo with my heroku app again through the heroku interface cloud console
• I enabled automatic deployment from GitHub
• I then needed the package gunicorn , this package is required to connect to heroku server,
• I then added the package to my requirements.txt file, for heroku
• Then I created a Procfile , to establish with heroku what type of app is being served ,
• in my Procfile I configured the file with web: gunicorn bigmomma.wsgi:application,
• this is how heroku knows that this application is a Django application
• Git add ,Git commit, Git push were next up,
• Next I configured the collect static feature on heroku to 1, this will prevent heroku from upoading my static files
• Next I allowed my host in my setting.py file for heroku to open my application
• Git add ,Git commit, Git push were next up,
• Finally I deployed my application from git hub

• git clone
• Requirements - latest version of Python3 - Git - Django2 - IDE/PYCHARM/ installed on your pc,
• You will need to make sure you have python3 added to your system variables path,
• create a folder in your selected location, cd into your folder/project using your cli/commandline
• next you will need to create a virtual environment, with the command virtualenv env
• on Windows, virtualenv creates a batch file
• \env\Scripts\activate.bat
• to activate virtualenv on Windows, activate script is in the Scripts folder :
• \path\to\env\Scripts\activate
• Example:
• C:\Users'Username'\venv\Scripts\activate.bat

• StackOverFlow

• I wrote all the content

• The photos & videos used in this site were obtained from Pexels, Unsplash

• I received inspiration for this project from studying the Awesome Django FrameWork & Python Programming Language for the whole year , it was & is amazing