Dev Blog Coursework Submission

By Kyle Juian

Table of Contents

1. About The Project
2. Getting Started
   • Prerequisites
   • Installation
   • Data
3. Example request

---

Introduction

A Python 3.10 Django web application with backing PostgreSQL database to serve blog articles. This is Kyle Julian's Software Engineering and Agile Winter 2022 Assignment submission.

This project is a proof of concept on how, using Python and Django, a relatively simple blogging website can be engineered. Inspired from:

• The Netflix Tech Blog
• Meta for Developers
• Google Blog
• Microsoft Developer Blogs

Getting started

Prerequisities

The project is built using the below technologies. You will need to install them locally before developing the site.

• Python 3.10 🐍
• Docker 🐳
• VSCode 🖊
  • Python extensions
• PostgreSQL 14.2 🗃
  • A docker-compose is provided to aid in initialising the database
• Pgadmin

Installation

1. Clone the repository

   git clone https://github.com/kylejuliandev/dev_blog_assignment.git

2. Create a python virtual environment

   1. Open a terminal in the recently cloned repository folder

   2. Execute the following

      python -m venv env

   3. Ensure your open terminal is activated for the python virtual environment

      env\Scripts\Activate.ps1

3. Install the project dependencies through

   pip install -r requirements.txt

4. Set up a PostgreSQL database

   1. You can use the docker-compose.yaml to spin up a instance of PostgreSQL and PgAdmin

   2. Open a terminal in this directory

   3. Execute the following

      docker compose up -d

   4. Open a browser and navigate to http://localhost:8080. You will land on the PgAdmin login page

   5. The docker-compose.yaml will have the localhost details for connecting to the database

   6. To access the database in Pgadmin you will need to import the server, follow PgAdmin import guide here.

      {
        "Servers": {
          "1": {
            "Name": "Localhost",
            "Group": "Server Group 1",
            "Port": 5432,
            "Username": "dev_blog_user",
            "Host": "db",
            "SSLMode": "prefer",
            "MaintenanceDB": "dev_blog"
          }
        }
      }

      Note, you must specify the docker-compose name for the service, in this case db

   7. You will need to specify the password manually. You can visit docker-compose.yaml for the passwords.

5. Now that the database server is ready, you can use the django migrate functionality to introduce the schemas necessary for the application

   python manage.py migrate

6. Run the web server

   python manage.py runserver

Data

Below illustrates the initial database design and concept to fulfil the requirements of this project. The proposal includes two tables, namely: Articles, Users, and Comments. Articles will be home to the the Blog Articles "posts" themselves. Comments will allow authenticated users to add comments, remove, and edit comments on a Blog post.

Changing the design

When changing the design you can use these handy django ulities for generating, applying, and rolling back the migrations.

python .\manage.py makemigrations

python manage.py migrate articles 0001

python .\manage.py migrate articles zero

To load test data you can use the loaddata command, as shown below

python .\manage.py loaddata .\articles\seed\0001_Articles.json

Docker

If you wish to build a Docker image of the dev_blog web application application, you can use the following docker command:

docker build -t 'devblog:latest' .

To create a container of the newest image, you can do:

docker run -e ENVIRONMENT=prod -e DATABASE_URL=<database_url> -e AZURE_CONNECTION_STRING=<azure_connection_string> -e DJANGO_SECRET_KEY=<django_secret_key> -p 8000:8000 devblog

Postgresql Database Url

Wherein, the Database URL is the locally accessible Postgresql database server. The url must conform to the standard as required by Postgresql. You can read more here.

postgresql://[userspec@][hostspec][/dbname][?paramspec]

Azure Connection String (CDN assets)

The Azure Connection String will be the location of the Blob store where the CDN assets are stored. When running the site locally this can be the emulated storage. The emulated storage connection string will look like the following:

DefaultEndpointsProtocol=http;AccountName=devstoreaccount1;AccountKey=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==;BlobEndpoint=http://127.0.0.1:10000/devstoreaccount1;QueueEndpoint=http://127.0.0.1:10001/devstoreaccount1;

Example request

Below depicates a sequence diagram of the steps involved for navigating to and loading content from the dev blog. The diagram neglects to illustrate the role of Internet Service Providers, Domain Name Servers, and Internet registrars, however it simply visualises a typical workflow through the web application.

sequenceDiagram
    actor U as User
    participant B as Browser
    participant WS as Django
    participant DB as PostgreSQL
    participant CDN as Azure CDN
    U->>+B: Navigate to dev
    Note over U,B: blogkylejuliandevblog.herokuapp.com
    B->>+WS: Request web page
    WS->>+DB: Request articles
    DB->>-WS: Return paginated articles
    WS->>-B: Generate html content
    B->>+CDN: Get static resources
    Note over B,CDN: Javascript, CSS, and image files
    CDN->>-B: Return static resources
    B->>-U: Show rendered web page

Loading