python-Django-demo

• 繁體中文 README.md (Traditional Chinese README.md)

• Use Django, Bootstrap, MySQL, Celery, Redis, Docker to build an online demo shopping site and deploy on AWS.

• Demo Website: https://zoeliao.nctu.me (account: root, passowrd: admin) (the website is no longer available.)

• Images:

  • Homepage
    
  • Products
    
  • Product - Coming Soon (No Image)
    
  • Product Detail
    
  • Cart
    
  • Checkout
    
  • Sharing
    
  • Order Confirmation Email
    
  • Sign In
    
  • Sign In - GitHub
    
  • Demo Map
    
  • Google Analytics (GA)
  • CloudWatch

• Functions:

  • Support to:
    • Add goods to shopping cart (recorded by session),
    • Send order confirmation email to customers (Celery + Redis + Gmail),
    • Sign in with third-party accounts (Facebook, Instagram, GitHub),
    • Share to Facebook,
    • View address on Google Map,
    • Manage Categories and Goods in the admin interface.
  • Responsive web design (RWD).
  • Internationalization (i18n).
  • Deployment (AWS + Docker + uWSGI + NGINX + Certbot).
  • Use GA to understand user behavior

• Techniques & tools for building the demo website:

  • Backend:
    • Django (2.2)
      • social-auth-app-django (Facebook, Instagram, GitHub)
      • session
      • form
      • email
      • management
      • i18n
      • test (TODO: finish)
    • Celery
      • flower
  • Frontend:
    • Bootstrap (4.3)
    • Google Analytics (gtag.js)
  • Database:
    • MySQL
  • Cache:
    • Redis
  • Deployment:
    • AWS
    • Docker
    • NGINX
    • Certbot (Let's encryp)
    • Jenkins (TODO)

• Reference:

  • shopping site (中文)
  • Sign in with social media accounts
  • twtrubiks/docker-django-nginx-uwsgi-postgres-tutorial
  • Google Analytics - gtagjs

Set up

• cd demo
• python3 -m venv venv
• . venv/bin/activate
• pip install -r requirements.txt
• python manage.py migrate
• python manage.py loaddata fixtures/*
• python manage.py createsuperuser
• Add demo/settings/local.py (you can copy demo/settings/local_example.py and revise it.) and add your email information, and facebook, instagram, GitHub key (Please read Send emails and Sign in with third-party accounts)
• python manage.py runserver
• Visit http://localhost:8000/

Start an app

• If you want to add a new app:
  • django-admin startapp <app_name>

Migrate database

• In general cases:
  • python manage.py makemigrations
  • python manage.py migrate
• Failed to detect changes:
  • Run the command of Management - Delete the data of specific app
  • Fake Migration:
    • Tells Django to mark the migrations as having been applied or unapplied, but without actually running the SQL to change your database schema
    • python manage.py makemigrations <app_name>
    • python manage.py migrate --fake
  • Migrate:
    • python manage.py makemigrations <app_name>
    • python manage.py migrate

Management

• Delete the data of specific app:
  • python manage.py manual_migration <app_name>
  • e.g., python manage.py manual_migration shop

Static files

• python manage.py collectstatic

Send emails

• If there is not settings/local.py, create it by vim demo/settings/local.py (settings/local.py is an ignored file. (you can copy demo/settings/local_example.py and revise it.))
• Input your email information in demo/settings/local.py:
  • EMAIL_HOST = 'smtp.gmail.com'
  • EMAIL_PORT = 587
  • EMAIL_HOST_USER = '<your_email>@gmail.com'
  • EMAIL_HOST_PASSWORD = '<your_password>'
• Start Celery by the following command of Celery - start

Sign in with third-party accounts:

• If there is not settings/local.py, create it by vim demo/settings/local.py (settings/local.py is an ignored file. (you can copy demo/settings/local_example.py and revise it.))
• Input your Facebook, Instagram, GitHub key in demo/settings/local.py:
  • Facebook (If you do not have a key, please visit: facebook for developers):
    • SOCIAL_AUTH_FACEBOOK_KEY = <your Facebook key>
    • SOCIAL_AUTH_FACEBOOK_SECRET = <your Facebook secret>
  • Instagram (If you do not have a key, please visit: Instagram for developers):
    • SOCIAL_AUTH_INSTAGRAM_KEY = <your Instagram key>
    • SOCIAL_AUTH_INSTAGRAM_SECRET = <your Instagram secret>
  • GitHub (If you do not have a key, please visit: GitHub Dveloper):
    • SOCIAL_AUTH_GITHUB_KEY = <your GitHub key>
    • SOCIAL_AUTH_GITHUB_SECRET = <your GitHub secret>

Celery

• Start: celery -A demo worker -l info
• Monitor:
  • celery -A demo flower
  • Visit http://localhost:5555

Test

• python manage.py test <app_name>.tests

i18n

• python manage.py makemessages -l <target language>
  • e.g., python manage.py makemessages -l zh_Hant
• vim demo/locale/<target_language>/LC_MESSAGES/django.po
  • e.g., vim demo/locale/zh_Hant/LC_MESSAGES/django.po
• python manage.py compilemessages

Docker

• mkdir <path>/sites-available
• Build: docker-compose up --build
• Run: docker-compose up
• Remove: docker-compose down -v
• docker system prune (-f)
• AWS:
  • docker-compose up -d
  • sudo usermod -a -G docker $USER
  • sign out and sign in again
  • sudo service docker start
• Container:
  • docker container ls
  • docker exec -it <Container ID> bash

Deployment

• docker-compose up --build
• docker exec -it <Web Container ID> bash
• python manage.py collectstatic
• python manage.py createsuperuser

Git

• Git doesn't notice change in image:
  • git rm --cached path/to/image.jpg