DEV Community: Simon Whelan

Optimised Django App Setup in Windows VSCode 🚀🐍🛠️ - Part 2

Simon Whelan — Sun, 02 Apr 2023 12:02:36 +0000

In the last post in this series, we built a Django app with some basic HTML and CSS and ran it on a local server.

In this post, we'll be giving the app the planned functionality, adding some more HTML/CSS and packaging the whole thing in a Docker container.

First up, we need to install Requests. This is a popular Python library used to make HTTP requests. It allows you to send HTTP/1.1 requests extremely easily, and comes with a number of useful features out of the box, including:

🌐 Support for HTTP/1.1 and HTTP/2
🔄 Automatic connection pooling and retries
🍪 Support for cookies and sessions
🧱 Built-in JSON support
🔑 Support for custom authentication schemes
💨 Automatic decompression of gzip and deflate responses
🔐 Support for SSL/TLS verification and client-side certificates

And loads of other useful stuff.

With requests, you can send HTTP requests to any web server and receive the response back in Python. This makes it a powerful tool for web scraping, testing, and building web applications.

To install requests, navigate to your root folder in your terminal and enter:

.\venv\Scripts\Activate

if your venv is not already active, and then:

pip install requests

to install Requests in your virtual environment.

Now navigate you your views.py file and replace the existing code with the following:


from django.http import (
    JsonResponse,
    HttpResponseBadRequest,
    HttpResponseServerError,
    HttpResponse,
)
from django.shortcuts import render
import requests


def check_wayback_availability(url, timestamp=None):
    api_url = "https://archive.org/wayback/available"
    payload = {"url": url}

    if timestamp:
        payload["timestamp"] = timestamp

    try:
        # Send GET request to Wayback Machine API with URL and (optional) timestamp
        response = requests.get(api_url, params=payload)
        response.raise_for_status()  # raise exception for 4xx or 5xx HTTP status codes
        data = response.json()  # parse JSON response
    except requests.exceptions.RequestException as e:
        # handle any exceptions that occurred during the request
        print(f"Error: {e}")
        return None

    return data

def index(request):
    if request.method == "POST":
        url = request.POST.get("url", "")
        timestamp = request.POST.get("timestamp", "")

        if not url:
            # Return HTTP 400 Bad Request if user did not provide a URL
            return HttpResponseBadRequest("Please provide a URL.")

        wayback_data = check_wayback_availability(url, timestamp)

        if not wayback_data:
            # Return HTTP 500 Internal Server Error if an error occurred while checking the URL
            return HttpResponseServerError(
                "An error occurred while checking the URL."
            )

        if wayback_data.get("archived_snapshots"):
            # Construct URL for closest snapshot
            snapshot_url = wayback_data["archived_snapshots"]["closest"]["url"]
            # Render template with URL
            return render(request, "snapshot.html", {"snapshot_url": snapshot_url})
        else:
            # Return regular HTTP response indicating that the URL 
            # is not available in the Wayback Machine, with a button to refresh/start over
            return render(request, "not_found.html")
    else:
        # Render index.html template for GET requests
        return render(request, "index.html")

This code defines two functions and a view in Django for a web app that interacts with the Wayback Machine API. The first function, check_wayback_availability(), sends a GET request to the Wayback Machine API with a given URL and an optional timestamp. If the API returns a response with archived snapshots of the URL, the function returns the response data in JSON format. If an error occurs while making the request, the function returns None.

The second function, index(), is a view that handles both GET and POST requests. If it receives a POST request, it retrieves the URL and timestamp from the request, checks the Wayback Machine API for a snapshot, and renders the appropriate template based on the availability of the URL. If the URL is available in the Wayback Machine, the view renders a template with a link to the closest snapshot. Otherwise, it renders a template indicating that the URL is not available.

Ok, now navigate to your app's templates folder and replace the exisiting code in your index.html file with the following:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wayback Machine Checker</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-BJTk5RbVdJvYtOrNQ2Fi0Ntq62V7AXu3C9An/7Fgj0aodH8pHHhjcfnLZjMDT76m" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'wayback_app/css/styles.css' %}">
</head>
<body>
  <br>
    <div class="container py-5 mt-5">
        <div class="row justify-content-center mb-4">
            <div class="col-md-8 text-center">
                <h1 class="mb-4">Wayback Machine Checker</h1>
            </div>
        </div>
        <br><br>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form id="wayback-form" method="post" class="custom-form wayback-form">
                    {% csrf_token %}
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control rounded-0" id="url" name="url" placeholder="Enter URL" required>
                        <label for="url" class="form-label"></label>
                    </div>

                    <div class="d-grid gap-2 col-4 mx-auto">
                      <br>
                        <button type="submit" class="btn btn-primary rounded-0">Check</button>
                    </div>
                </form>

                <div id="result" class="mt-5"></div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-T2I4fj1nJWg9JwFVzL0sq0S7IxCjZryEGv+vJ20dbD8x4y4x4aKIFzYQWVuJ8Ipk" crossorigin="anonymous"></script>
</body>
</html>

Now add a new file in the same directory as index.html called not_found.html and paste the following code into it:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wayback Machine Checker</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-BJTk5RbVdJvYtOrNQ2Fi0Ntq62V7AXu3C9An/7Fgj0aodH8pHHhjcfnLZjMDT76m" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'wayback_app/css/styles.css' %}">
</head>
<body>
    <div class="container py-5">
        <h1 class="text-center">The URL is not available in the Wayback Machine</h1>
        <br><br>
        <div class="row justify-content-center mt-5">
            <div class="col-md-4">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary rounded-0" onclick="window.location.href=''">Return</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-T2I4fj1nJWg9JwFVzL0sq0S7IxCjZryEGv+vJ20dbD8x4y4x4aKIFzYQWVuJ8Ipk" crossorigin="anonymous"></script>
</body>
</html>

And now a second new file named snapshot.html with the following code:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Wayback Machine Checker</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-BJTk5RbVdJvYtOrNQ2Fi0Ntq62V7AXu3C9An/7Fgj0aodH8pHHhjcfnLZjMDT76m" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'wayback_app/css/styles.css' %}">
</head>
<body>
    <div class="container py-5">
        <h1 class="text-center">Wayback Machine Snapshot</h1>

        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <p class="text-center">The URL is available in the Wayback Machine at the following URL:</p>

                <div class="text-center">
                    <a href="{{ snapshot_url }}">{{ snapshot_url }}</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-T2I4fj1nJWg9JwFVzL0sq0S7IxCjZryEGv+vJ20dbD8x4y4x4aKIFzYQWVuJ8Ipk" crossorigin="anonymous"></script>
</body>
</html>

Finally, in your static folder, update the styles.css file to the following:

body {
  display: flex;
  justify-content: center !important;
  height: 100vh;
}

.custom-form {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #f8f9fa;
}

.wayback-form {
  max-width: 500px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin: 0 auto;
}

.center {
  display: flex;
  justify-content: center;
}

This is just some very basic CSS to make our app interface look a little nicer!

Ok, lets see if this works! Navigate to your root directory and run the following in your terminal:

python manage.py runserver

Now visit http://127.0.0.1:8000/wayback_app/ in your browser to see it in action - Feel free to grab any link you like and try it out!

Ok - now to package the whole thing up into a Docker container.

First run

pip freeze > requirements.txt

to grab any new dependencies, then follow these steps:

Install Docker on your system, if you haven't already. You can download Docker Desktop for Windows from https://www.docker.com/products/docker-desktop.

Open the app and make sure Docker is running. You can check this in your terminal with:

docker --version

Create a Dockerfile in the root of your Django project directory, you can do this in the VSCode terminal:

type nul > Dockerfile

Now open the Dockerfile and add the following:


# Use the official Python base image
FROM python:3.9-slim

# Set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# Set the working directory
WORKDIR /app

# Install system dependencies
RUN apt-get update && apt-get install -y --no-install-recommends \
    gcc \
    python3-dev \
    && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

# Copy requirements.txt and install Python dependencies
COPY requirements.txt /app/requirements.txt
RUN pip install --no-cache-dir -r requirements.txt

# Copy the Django project
COPY . /app/

# Expose the port the app runs on
EXPOSE 8000

# Start the Django development server
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

This Dockerfile defines a new Docker image based on the official Python 3.9 slim image, sets environment variables, installs system dependencies, installs the Python packages from the requirements.txt file, and copies your Django project into the container.

Create a .dockerignore file in the root of your Django project directory to exclude unnecessary files and folders from the Docker build context. You can do this in the VSCode terminal:

    type nul > .dockerignore

Open the .dockerignore file in VSCode and add the following content:

__pycache__
*.pyc
*.pyo
*.pyd
.Python
env/
venv/
ENV/
.vscode/
.git/
.gitignore
Dockerfile
*.sqlite3
*.log
media/

Now navigate to your root directory (if you aren't already there) and build the Docker image by entering the following into your terminal:

docker build -t wayback_project:latest .

After building the image, you can run the Docker container using the following command:

docker run -it -p 8000:8000 wayback_project:latest

Now your Django project is running in a Docker container. Open your browser and visit http://localhost:8000/wayback_app/ to see your Django web app in action!

That's it for this tutorial on setting up a Django app with optimized dependencies and packaging it in a Docker container! We've covered a lot of ground, from installing Requests to interacting with the Wayback Machine API, to building a Docker image and running our app in a container.

But this is just the beginning - there are many more ways to optimize and improve your Django app, and you may want to add more features or functionality in the future. For example, you could integrate a database, add user authentication and authorisation, or deploy your app to a cloud platform.

So keep this tutorial handy as a reference, and feel free to modify and extend it as you see fit. And if you have any feedback or suggestions for future topics, please let me know in the comments!

The full code can be viewed here

Thanks for reading! 👋

Optimised Django App Setup in Windows VSCode 🚀🐍🛠️

Simon Whelan — Tue, 28 Mar 2023 17:09:38 +0000

Setting up a new Django project is a multi-step process that involves installing various tools and packages, creating directories, and configuring settings. This process can take up valuable time and effort that could be better spent on developing your app's functionality.

To help streamline the process and make it easier to start my own Django projects, I created a step-by-step guide that combines essential tools and best practices like VSCode, venv, and .gitignore. This step-by-step is something I created for myself to make setting up Django projects easier and faster. As I found it helpful, I thought it might be beneficial to share it with other developers learning Django.

In this tutorial, I'll guide you through my process of setting up a new Django web app quickly and efficiently. We'll cover everything from installing Python and Django to creating a virtual environment and generating a requirements.txt file. By the end of this tutorial, you'll have a fully functioning Django app up and running! 🚀🐍🛠️

We're going to build a basic Django app that interacts with the Internet Archive's Wayback Machine API. While intentionally simple, this app demonstrates the use of various technologies and best practices, making it a perfect example for our easy to follow Django app template.

Our app will allow users to input a URL and an optional timestamp, and then check if the Wayback Machine has a snapshot of that URL available. If a snapshot exists, the app will display the archived content; if not, it will inform the user that the URL isn't available in the Wayback Machine.

Here's a quick overview of the app's functionality:

1) We define a check_wayback_availability() function that takes a URL and an optional timestamp as arguments. It sends a GET request to the Wayback Machine API and returns the JSON data.

2) The index view function handles both GET and POST requests. If it receives a POST request, it retrieves the URL and timestamp from the request, checks the Wayback Machine for a snapshot, and renders the appropriate template based on the availability of the URL.

Although the app itself is fairly simple, it showcases how our Django app template can be used to set up a project quickly and efficiently. By following this tutorial, you'll learn how to implement this app while building a time-saving optimised template that you can use in future projects.

First off, let's build a basic Django environment -

Step 1: Install Python 3 and Django

Make sure you have Python 3 and Django installed on your system. You can download Python from the official website and install Django using pip:

pip install django

Step 2: Install VSCode

If you haven't already, download and install Visual Studio Code

Step 3: Open VSCode and launch the terminal

Open VSCode and press Ctrl+~ or click on 'Terminal' in the top menu, then select 'New Terminal' to open the integrated terminal.

Step 4: Create a new directory for your project

Create a new directory for your project using the following commands, I've called mine 'wayback' but you can call yours whatever you like!

mkdir wayback
cd wayback

Step 5: Create a virtual environment

python -m venv venv

This will create a virtual environment named "venv" in your project directory.

Step 6: Activate the virtual environment

.\venv\Scripts\Activate

Your terminal should now show the virtual environment's name in the prompt.

Step 7: Install Django in the virtual environment

pip install django

Step 8: Start a new Django project

django-admin startproject wayback_project .

This will create a new Django project in your current directory.

Step 9: Create a new Django app

python manage.py startapp wayback_app

Step 10: Run the development server

Run the development server using the following command:

python manage.py runserver

You should see a message saying that the development server is running at http://127.0.0.1:8000/.

Open a browser and visit http://127.0.0.1:8000/ to see your new Django web app running. It should look something like this -

You now have a Django web app running in a virtual environment using Python 3 in the VSCode terminal on Windows!

Ok, we've successfully set up a basic Django environment and created a new project and app. Now, it's time to set up urls.py in your Django project so that your app's URLs can be included in your project's URLs. In a Django project, you can create multiple apps, each with its own URLs. However, to make these app URLs accessible within the project, you need to include them in the project's main URLs. This enables users to navigate through the app's URLs within the project's URL structure.

In your Django project, open the your_project_name/urls.py file, where your_project_name is the name of your Django project, for this example, mine is 'wayback_project'. Import the include function by modifying the existing import statement at the top of the file:

from django.urls import path, include

In the urlpatterns list, add a new entry that includes the URLs from your app:

path('wayback_app/', include('wayback_app.urls')),

Now, you need to create a urls.py file inside your app's directory. In the VSCode terminal, run:

type nul > wayback_app\urls.py

This command will create an empty urls.py file inside your app's directory.

Open the newly created urls.py file in your app's directory, and add the following content:

from django.urls import path
from . import views

urlpatterns = [
# Add your app's URL patterns here
]

This file is where you will define the URL patterns specific to your app.

Now your Django project is set up to include URLs from your app. As you create new views in your app, you can add corresponding URL patterns to the urls.py file in your app's directory. Make sure to update the urlpatterns list in the wayback_app/urls.py file with the new paths.

After you have installed all the necessary packages for your Django project, you can use the pip freeze command to generate a requirements.txt file containing a list of all the installed packages and their versions.

To generate the requirements.txt file, navigate to your project directory in the VSCode terminal and run the following command:

pip freeze > requirements.txt

This will create a requirements.txt file in your project directory containing a list of all the installed packages and their versions.

You can then use this file to install the same packages and their versions in a different environment by running the following command:

pip install -r requirements.txt

This will install all the packages listed in the requirements.txt file in the current environment.

A requirements.txt file ensures all required packages are installed, making it easier to reproduce the same environment in different places. This is crucial for Docker, which requires consistent environments to prevent issues and inconsistencies when running an app in a containerised environment.

To add a .gitignore file to your Django project, follow these steps:

In the VSCode terminal, navigate to the root of your project directory if you are not already there.

Create a new .gitignore file:

type nul > .gitignore

This command will create an empty .gitignore file in your project directory.

Open the .gitignore file in VSCode by clicking on it in the file explorer or using the File > Open menu.

Add the following content to the .gitignore file to exclude common files and directories that should not be tracked by Git:

# Python artifacts
__pycache__/
*.pyc
*.pyo
*.pyd
.Python
env/
venv/
ENV/

# Django artifacts
*.log
*.pot
*.pyc
db.sqlite3
media/

# VSCode artifacts
.vscode/

# Git artifacts
.git/

Save the file by pressing Ctrl+S or clicking File > Save.

You now have a .gitignore file in your Django project that excludes common files and directories from being tracked by Git. You can customize the file to include or exclude any additional files or directories specific to your project.

Now that you have a basic Django app up and running, let's add some basic HTML and CSS to our web app. This will help to make our app more visually appealing and user-friendly.

Create two folders in your wayback_app folder named 'static' and 'templates'.

Inside the 'static' folder, create a new file named 'styles.css'. Open it and paste the following code:

body {
    font-family: Arial, sans-serif;
}

.welcome {
    color: darkblue;
}

Inside the 'templates' folder, create a new file named 'index.html'. Add the following code:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wayback App</title>
    <link rel="stylesheet" href="{% static 'wayback_app/css/styles.css' %}">
</head>
<body>
    <h1 class="welcome">Welcome to the Wayback App!</h1>
</body>
</html>

Open the settings.py file located in the wayback_project folder, and modify the TEMPLATES and STATIC_URL settings as follows:


TEMPLATES = [
    {
        ...
        'APP_DIRS': True,
        ...
    },
]

STATIC_URL = '/static/'

You'll also need to add your app to the INSTALLED_APPS setting - it should look something like this:

INSTALLED_APPS = [
    "wayback_app",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
]

Almost there! Now open the views.py file in wayback_app and add the following lines:


from django.shortcuts import render

def home(request):
    return render(request, 'wayback_app/index.html')

This code is like a recipe for creating a webpage. It has a function called home() that takes a request (like a message) and uses it to put together an HTML page. It uses a Django function called render to take the index.html file in the wayback_app folder and put it together into a page for the user to see.

So when someone goes to a certain URL on your website, this code helps create the page that they see.

Finally, run the development server again using the following command:

python manage.py runserver

Now, when you visit http://localhost:8000/wayback_app/, you should see the "Welcome to the Wayback App!" message, and if your static file is correctly set up, it should be in blue!

Ok, that's enough for Part 1 of this series! In the next part we'll build our app, implement some more complex HTML and CSS to make the app more visually pleasing, and package it in a Docker container with all it's dependencies, making it easy to deploy and run on any machine.

Hope you've found this helpful so far, and if you have any questions please ask!

Thanks for reading! 👋

stockControl 🥕🥫🦐 - A comprehensive system for tracking recipes, ingredients and costs - Update

Simon Whelan — Wed, 15 Feb 2023 21:18:33 +0000

I had planned to get an earlier update out to this, but I was having too much fun building it!

An update to my Stock Control web app being built with Python, Django and Bootstrap!

For those who may be unfamiliar with the technologies I'm using, here are some brief introductions:

What is Django?

Django is a high-level Python web framework that is widely used for building web applications. It provides a lot of built-in features, such as a powerful ORM, a templating engine, and a robust authentication system, that make it easy to build complex web applications. Django is also known for its scalability, security, and ease of use, making it a popular choice among developers.

What is Bootstrap?

Bootstrap is a popular front-end framework for building responsive web applications, and provides a set of pre-designed HTML, CSS, and JavaScript components that can be easily integrated into any web project. With Bootstrap, developers can create professional-looking and user-friendly web interfaces without having to write custom code from scratch. Some of the features of Bootstrap include a grid system for laying out web pages, typography styles, forms, buttons, navigation bars, and modal dialogs. Bootstrap also includes support for CSS preprocessors like Sass and Less, and is regularly updated to keep up with modern web development trends.

What is MongoDB?

MongoDB is a document-oriented NoSQL database that stores data in a JSON-like format called BSON. Unlike traditional SQL databases, MongoDB doesn't use tables and rows. Instead, it stores data as documents that can contain nested structures and arrays. MongoDB is highly scalable, flexible, and can handle large amounts of unstructured data, making it a great choice for building modern web applications.

Why use Django with MongoDB?

While Django is traditionally used with SQL databases, it's also possible to use it with NoSQL databases like MongoDB. There are several benefits to using Django with MongoDB, such as:

Flexibility: MongoDB's flexible data model allows you to store and retrieve data in a way that suits your application's needs. This makes it easier to work with complex data structures and adapt to changing requirements.

Scalability: MongoDB is designed to scale horizontally, which means you can add more servers to handle a growing amount of data. This makes it a great choice for building large-scale web applications.

Performance: MongoDB's native query language, as well as its ability to store data in memory, can result in faster query times compared to traditional SQL databases.

Also....I just enjoy using it!

The Web App🥕🥫🦐 -

Really pleased with how this is coming together, it's been a fantastic dive into Bootstrap and HTML and the methods of bringing backend Python code into a fully functional interface.

So far the application has several key features, including:

View all ingredients: This feature allows the user to view all of the ingredients currently stored in the database. Each ingredient is displayed with its name, pack size, and price per pack. The user can also edit or delete ingredients as needed, although these are sat in the backend waiting to be implemented! I will also be adding an 'amount' field to track how much of each ingredient the kitchen should have in stock.

Add new ingredient: This feature allows the user to add a new ingredient to the database. The user can enter the name, pack size, and price per pack of the new ingredient.

An example of how the ingredients are currently stored in the database -


{
  "_id": {
    "$oid": "63de7fb1ddb55617db8abac2"
  },
  "product_code": "0003",
  "ingredient": "flour",
  "price_per_pack": 2.99,
  "pack_size": 1000
}

View recipes: This feature lets the user explore all the recipes that are currently saved in the database, complete with their names, ingredients, and codes (these codes are set automatically upon entry by checking the last entry and incrementing it by 1). I have plans to add more options for adding, editing, and deleting recipes soon, and I've already got the backend code set up - I just need to put it into action!

The add_recipe() function is particularly useful, as it prompts the user to input each ingredient for a recipe and cross-references it with the ingredients database. If an ingredient is not yet listed in the database, the function will call add_new_ingredient() and ask the user for it's details, and then add the new ingredient to both the recipe and ingredients databases at the same time.

Recipe cost calculation: The application automatically calculates the cost of each recipe based on the cost of the ingredients used. This helps the user make informed decisions about pricing and profitability. One function that is waiting in the wings is the updating of ingredients to allow accurate pricing as supplier costs fluctuate, this then automatically updates the total cost in the recipe database as well.

Stocktake: Yet to be implemented in the backend, this feature will enable users to conduct physical stock inventory counts and reflect the changes in the database. To do this, users will need to input the currently held quantity for each ingredient, and the application will automatically update the database with the new values. Additionally, a sales entry feature is planned to be added later on. This feature will factor in the current stock on hand with the sales data to calculate the gross profit margins for the kitchen.

I will also be including a wastage input that will both keep a price tally of any ingredients/portions of recipes that are wasted, and also remove the relevant amount of any wasted product from the amount recorded in the ingredients database. This will allow for a much more accurate GP figure.

Screenshots?....Screenshots.

Apologies for the quality on these - if anyone has any tips for uploading higher def images on dev.to I'm all ears!

Direct links -

Also, forgive the basic recipes - I'll be making these a little more interesting over time!

Still lots to do, but it's flying together so it's all good!

The full code is available here for anyone interested, and I'll have another update in a week or so for anyone who's following along.

Any questions, feel free to reach out.

Thanks for reading! 👋

stockControl 🥕🥫🦐 - A comprehensive system for tracking inventory, recipes, ingredients and costs

Simon Whelan — Tue, 07 Feb 2023 20:44:38 +0000

Many people who change careers after a considerable amount of time say that it was a difficult decision. For me, it was one of the easiest I've ever made. My journey started as a 15-year-old dishwasher and culminated in managing every aspect of the kitchen operations of a small chain of restaurants with over £6 million in annual revenue and a staff of 80+ across multiple locations in three countries. However, with the industry going through extremely difficult times over the last 5-10 years, I ultimately realised that I was ready for a change.

Now that I'm on the cusp of this career change, actively seeking that first job as a software engineer, I am at the point of building several portfolio projects to both hone and practice my coding skills and have something concrete and visible to back up my experience.

After building a Task Manager, and a personal website I was looking for something more complex. I decided to create something that has been vital in almost every role I've had up until this point - a Stock Control web app.

Stock control is a crucial aspect of running a commercial kitchen. It involves tracking and managing the inventory of food and supplies to ensure efficient operation and profitability:

Cost savings: Proper stock control helps to minimize waste and reduce the cost of overstocking or understocking. By keeping track of inventory levels, chefs can order only what they need and avoid waste due to spoilage.

Improved food quality: Stock control helps to ensure that the kitchen always has the ingredients it needs to prepare dishes to the desired standard. This helps to maintain consistent food quality and customer satisfaction.

Increased efficiency: Stock control helps to streamline kitchen operations by reducing the time spent searching for ingredients and supplies and allowing kitchen staff to focus on preparation and cooking.

Better food safety: Stock control helps to prevent food waste, which can pose a risk to food safety. By ensuring that food is used before it goes bad, kitchens can maintain a clean and safe environment for their customers and staff.

Better decision-making: Stock control provides valuable information that can be used to make informed business decisions, such as adjusting menu offerings or adjusting ordering schedules to match demand.

I've used several existing solutions to this; however, it was rare to find one that had everything that was needed. Many had functionality missing or relied on secondary programs rather than being contained into one box. For a working stock control system, you primarily need -

📊 An ingredients database
🍲 A recipes database
💰 Prices of all ingredients (which need to be updated regularly)
💳 Total price of recipe (to determine the meal's selling price)
💹 A financial record of daily sales
🍔 A record of which food items have been sold
🗑️ A wastage entry
📦 A method of placing supplier orders and/or entering stock received from supplier

And a program to allow user to enter currently held stock (usually weekly/monthly). This will take all the above info, work out what stock you should have based on your ordering and sales, and then give you a gross profit percentage.

Adventurous? Absolutely, but with a deep understanding of the required functionality, I'm finding the 'sketching' of the program is going well. I have already started the backend of the system, but it is currently very much in its infancy. Taking on advice from several experienced developers and recruiters, this one is being built very much in the open!

The GitHub repo is here. The plan is to spend a couple of hours on it each day and post a weekly update here on dev.to. This not only helps me to recap all the pieces I've added, but also allows anyone that wishes to follow along to do so 😊

My transition from managing kitchen operations to becoming a software engineer has been an exciting and challenging journey. I have decided to build this Stock Control web app to showcase my coding skills and demonstrate my expertise in this area. This app will bring together all the essential elements required for efficient stock management in a commercial kitchen, including ingredients and recipes databases, financial record-keeping, supplier ordering, and more.

As always, feedback is more than welcome. I am confident that this project will help me reach my goal of becoming a successful software engineer and I look forward to sharing the finished product with the world.

Thanks for reading! 👋

Task Manager 2.0 📝📤📆 - A feature-rich Task Management app built with Python & customTkinter

Simon Whelan — Sun, 22 Jan 2023 21:01:40 +0000

Introducing Task Manager: A Fun and User-Friendly Way to Organize Your Tasks! 📝📤📆

An update to my previous article on a Task Management app being built with Python and customTkinter, with several new features implemented and code refactored to improve efficiency. This is a personal project that I took on as a learning and portfolio exercise after completing a Software Engineering Bootcamp with HyperionDev.

The program is based on a task manager that I created as a capstone project during the bootcamp, but I wanted to take it to the next level by adding a GUI to make the backend more user-friendly. The original program can be found here.

Changelog -

Implemented Add/View Tasks
Implemented a search feature to search tasks assigned to a particular person or task ID
Created 'Edit Tasks' to change task details, such as the user assigned, due dates, and mark tasks as completed
Addition of default admin account added upon first installation
Addition of error handling and success frames for displaying relevant messages to the user
Several bug fixes

Enough intro - let's get to the app! 🚀

As developers, we all know the importance of keeping our tasks organized and on track. But, let's be real - sometimes the task of managing our tasks can feel like a tedious task in itself. That's why I'm excited to introduce Task Manager 2.0 - an updated task management program that makes organization simple and user-friendly.

Built with the customtkinter library, Task Manager features a sleek and modern graphical user interface. But, it's not just about looks - the program also includes practical features such as a dark mode, UI scaling, and the ability to view, add, edit, and delete tasks with ease. Plus, the program includes a login system that utilizes a MongoDB database to store and verify user credentials, ensuring the security of your task and user information.

The program employs pymongo to connect to the MongoDB database storing information on tasks and user login information, and passwords are hashed using SHA-256 for added security 🔑. This makes Task Manager a great example of a complete software project that includes a GUI, database, and security features, all wrapped up in a user-friendly package.

When a user logs in, their inputted password is hashed and compared against the stored password in the database. When registering new users, the password is hashed before the user is added to the database, and all password input fields show '*' when typing, so there are no cleartext/visible passwords at any point.

Want to try it? Feel free!

Installation is a simple affair - install the necessary dependencies and libraries, set up a MongoDB server, and voila! You're ready to start managing your tasks like a pro. Full instructions for all of these can be found in the Github repo - link

Before running the app, make sure your MongoDB server is up and running. On the first use, a default admin account with the username "admin" and password "adm1n" will be automatically created and added to the "login_info" collection within the MongoDB instance. This account can be used to log in and manage tasks.

One of the first things that you'll notice when you open the application is the ability to change the appearance mode and theme. The appearance mode can be set to "System" (standard), "Dark", or "Light" and the theme can be set to "blue" (standard), "green", or "dark-blue". This allows you to customize the look and feel of the application to suit your preferences.

Since the last blog, a dropdown menu has been added to create a Task Menu. This consists of 'View All', 'Add Task', 'Edit Task' and 'Delete Task'. All self explanatory, but we'll go through them briefly anyway!

Add Task -

A window with inputs for username, task title, task description and due date. These are then saved as a new entry in the MongoDB collection 'tasks' along with the default entry of 'date assigned' which is set using the datetime module in Python and the datetime.now() function as well as a 'completed' field that is defaulted to 'No'.

Task due dates are stored as datetime objects in the database to allow for easier reporting and usage throughout the program.

Edit Task -

'Edit task' first requires a Task ID number, upon selection the view_all() function is called which inserts all task data into the main textbox for reference. The relevant task number must be entered into the correct field along with any info that is to be edited. Blank fields are skipped and any new info is added to the database in place of the current task info.

Once a task has been completed, the Edit Task window can be called and a checkmark within the window ticked, this then changes the default completed: 'No’ to completed: 'Yes’.

This can be confirmed by calling the View All function once again, and displaying the updated tasks.

Delete Task -

A much simpler input field that asks for the relevant task number. Upon entering, the task with the inputted Task ID is removed from the database.

A 'Task does not exist' error is shown if the Task ID is not found.

Search -

The task manager app has a built-in search feature that makes it quick and easy for users to find specific tasks. This feature can be accessed by typing in a search query into the search bar located at the bottom of the main window and then clicking the 'search' button. The search function is user-friendly and allows you to search for tasks based on different criteria like the user assigned to the task and the Task ID. This makes it easy to filter and locate the tasks you need, or keep track of a specific user's progress.

Reports -

One of the most exciting features of Task Manager 2.0 is the ability to generate reports on tasks 📈 and the option menu to switch between different task views and functions, this allows you to have a better understanding of your progress and to make data-driven decisions.

In addition to being a great tool for individual developers, Task Manager can also be used by small businesses to manage tasks assigned to team members. The program's user-friendly interface and ability to view, add, edit, and delete tasks makes it easy for team leaders to assign and monitor tasks, while the login system and MongoDB database ensures that each team member's tasks are secure and easy to access.

The ability to generate reports on tasks and switch between different task views and functions 📊 also allows managers to have a better understanding of the team's progress and make data-driven decisions. This can be especially useful for small businesses with limited resources and a need to optimize their workflow and performance.

Overall, Task Manager is not only a great tool for individual developers but also for small businesses looking for an easy-to-use and secure way to manage tasks for their team members.

Give it a try and see for yourself! 🚀

P.S. Don't forget to check out the Github README for more details on installation and usage.

I've added several checks/if statements and error handling in places I thought it would be useful, but I'm sure there'll still be a few bugs! Let me know if you spot any and I'll get them fixed asap!

Any other feedback or questions, or if you have any feature suggestions or requests, feel free to leave a comment!

Thanks for reading 👋

dontClickTheMail🚫📰🗞️: Clean Up Your Reddit Feed - Scrape Daily Mail articles to read without clicking the link!

Simon Whelan — Mon, 16 Jan 2023 18:38:08 +0000

Are you tired of seeing Daily Mail links polluting your Reddit feeds? Look no further! With dontClickTheMail, you can easily filter out Daily Mail articles and still be able to read their content without clicking the link to the website!

This Python script uses the popular PRAW library, which allows access to the Reddit API, as well as BeautifulSoup and requests to scrape the content of Daily Mail articles. Once the script finds a Daily Mail article in a specified subreddit, it will scrape the article's content and post it as a comment, so you and other users can read the article without giving the Daily Mail any clicks or ad revenue.

To get started, you'll need to have a Reddit account and a Reddit API client ID and client secret. You can obtain these by following the instructions here.

Once you have your client ID and secret, you'll need to create a praw.ini file in your working directory. This file should contain the configuration details that PRAW uses to connect to the Reddit API, such as your client ID and client secret. It's recommended to use a praw.ini file to store these sensitive details as it's more secure and easier to manage. In addition to this, you should also replace "yourusernamehere" with your Reddit username in the script.

Your praw.ini should look something like this:

The script also requires the following Python modules:

BeautifulSoup
requests

You can install these dependencies by running the following command:

pip install praw bs4 requests

Once you have everything set up, you can run the script and specify which subreddits you'd like to scan for Daily Mail articles.

The script will scan the 100 newest posts in the specified subreddits, and post the article's content as a comment if it finds a Daily Mail article that the bot hasn't already commented on.

Screenshots!

So, if you're tired of seeing Daily Mail articles in your Reddit feeds, give the "dontClickTheMail" script a try and enjoy a cleaner and more personalized browsing experience!

Thanks for reading, and happy coding! 👋

Please note that this script is for educational purposes only and should be used responsibly and in accordance with Reddit's API rules. Do not use it to spam Reddit, or to post comments that violate Reddit's terms of service. The author of this program is not responsible for any consequences that may result from the use of this program.

Boost your Python development in VS Code: Top picks for extensions 💻🚀🛠️

Simon Whelan — Sun, 15 Jan 2023 11:13:53 +0000

As a software developer, I know the importance of having clear, readable, and consistent code. However, with so many opinions and personal coding styles out there, this can be difficult to get right. Luckily, in Python, we have an agreed-upon format known as PEP 8 to adhere to when writing our code. PEP 8 is a set of guidelines for writing Python code that was created by the Python community to improve the readability and maintainability of Python code.

In this post, we'll be discussing some of my favorite VS Code extensions, many of which can help you adhere to PEP 8 guidelines with ease and boost your Python development. We'll be discussing extensions such as Prettier, Black, flake8, Monokai Pro, SnapCode and GitHub. These are the tools that I've personally found to be the most useful and effective in my daily work. I'll be providing a brief overview of each extension, as well as specific examples of how they can be used in a real-world scenario, based on my own experience. So, whether you're a seasoned Python developer or just starting out, I hope you'll find this post helpful in your own development journey. Let's get started!

Prettier

Prettier is a code formatter that can automatically format your code to a consistent style. It supports a wide range of languages, including Python, and can be easily integrated with VS Code. It can improve your code by making it more readable and consistent, which can make it easier to collaborate with others and understand your own code later on. For example, you can set up Prettier to automatically format your code when you save a file by adding the following to your VS Code settings: "editor.formatOnSave": true.

Prettier has a whole host of customisable settings. Some of the most useful are -

printWidth: This setting controls the maximum line length for your code. It can help you keep your code looking clean and organized by wrapping lines that exceed the specified width. This is particularly useful when working with PEP 8, which recommends a line length of 79 characters.
singleQuote: This setting controls whether single or double quotes are used for strings in your code. In python, single quotes are more commonly used than double quotes, but it can be set based on the user preference.
trailingComma: This setting controls whether trailing commas should be added to the end of lists, objects, and function arguments in your code. This can help you keep your code organized and improve readability.
tabWidth: This setting controls the number of spaces used for each tab in your code. It can help you keep your code looking clean and consistent by ensuring that all tabs are the same width. PEP 8 dictates that 4 spaces is the correct width.
parser: This setting allows you to specify the parser that will be used to parse the code. For Python, the options are 'babylon' and 'flow', default is 'babylon' which supports most of the features of Python.

Keep in mind that there are many other options and configurations available, so it's worth exploring the documentation and experimenting with different settings to find the ones that work best for you and your codebase!

Black:

Black is another code formatter, but it is specifically designed for Python. This extension can improve your code by making it more consistent and easier to read, which can help you write more maintainable code. For example, you can use the --line-length 79 command to limit the line length to 79 characters. Black is an auto-formatter that is ran in the terminal using the ‘black’ command.

You can install Black via the link above or with

pip install black

flake8

Linting is the process of automatically checking the source code for potential errors, bugs, and other issues, including adherence to specific style guides like PEP 8. One popular and well-respected tool for this is Flake8, which can be integrated with VS Code. It supports PEP 8 and can improve your code by catching errors and style issues early on, helping you avoid bugs and write more readable code. To use it, you can configure Flake8 to run automatically every time you save a file by adding "python.linting.flake8Enabled": true to your VS Code settings.

It's worth mentioning that flake8 doesn't have an automatic formatting feature, it only checks the code and returns errors, warnings or info for you to alter yourself.

flake8 can be installed with

pip install flake8

Monokai Pro:

Monokai Pro is a color scheme for VS Code that is designed to be easy on the eyes and make it easier to read your code. It can improve your code by making it more readable, which can help you understand your code better and make fewer mistakes. You can set it as your default color scheme by going to VS Code settings and searching for "color scheme" and selecting Monokai Pro. This is a paid theme, however there is also a fully functional, never-ending 'trial' with an occaisonal pop-up asking you to buy.

CodeSnap:

CodeSnap is a VS Code extension that allows you to take screenshots of your code and share them with your friends and colleagues. It's a great way to show off your work and get feedback on your code. CodeSnap offers a variety of color options for the background of your screenshots, including the ability to add a custom colour. Furthermore, CodeSnap also allows you to add a custom watermark, such as a logo or copyright notice, to your screenshots for branding or credit purposes.

In addition to the custom color and watermark options, CodeSnap also has a feature that allows you to resize your screenshots. This means that you can easily adjust the size of your screenshots to fit your needs. This can be particularly useful when sharing your screenshots on social media or other platforms where image size may be a consideration.

CodeSnap also allows you to use a transparent background, which can help to create a more polished and professional look. With these additional features, CodeSnap is a great tool for enhancing the visual appeal and professionalism of your screenshots.

GitHub:

The GitHub Extension for VSCode is a powerful tool that can help you streamline your workflow and improve your collaboration with other developers. Some of the key features of this extension include:

Direct access to the GitHub website, allowing you to view and manage your repositories, issues, and pull requests directly from within VS Code.
The ability to create, review, and merge pull requests directly from VS Code, eliminating the need to switch between different tools.
Integrated support for Git, allowing you to perform common Git tasks such as committing, pushing, and pulling directly from within VS Code.
The ability to set up Black and Prettier to automatically format your code when you push to GitHub, ensuring that your code adheres to PEP 8 guidelines at all times and reducing the risk of introducing style issues into your codebase.

The GitHub Extension for VSCode is a must-have for any developer who is working with GitHub, whether you're a solo developer or part of a team. With this extension, you can easily manage your repositories, collaborate with other developers, and ensure that your code is always well-formatted and easy to read.

In conclusion, as a developer, it's essential to have tools that can help you write clear, readable, and consistent code. The VS Code extensions discussed in this post are all great choices for Python developers. They can help you adhere to PEP 8 guidelines, improve your code, and make your development process more efficient and enjoyable. With so many options and configurations available, it's worth experimenting with different settings to find the ones that work best for you and your codebase. Remember, there are many other extensions available for VS Code, so don't be afraid to explore and see what else is out there.

Feel free to add any extensions you enjoy using in the comments!

Thanks for reading, and happy coding! 👋

Task Manager 📝📤📆

Simon Whelan — Sun, 08 Jan 2023 11:19:58 +0000

I've been working on a personal project since finishing a Software Engineering Bootcamp with HyperionDev. The program is based on a task manager that I built as a capstone project in the bootcamp, but I wanted to take it a step further and build a GUI that would make the backend more user-friendly.

Initially, the program was built around reading and writing text files that contained user login information, tasks assigned to users, and reports on the status of those tasks (you can find the program here). While these text files were fine for a small practice project, they are unrealistic for real-world applications (especially for storing user passwords). I've since replaced the text files with a MongoDB database.

I'm building the GUI using CustomTkinter, which is a custom version of tkinter that offers a more modern look for the app, as well as additional features like the ability to set the appearance mode and default color theme.

I'm encrypting user login passwords using SHA-256 and storing them in the database. This isn't a perfect solution, but using something like bcrypt seemed like overkill for a project like this. When a user logs in, their inputted password is hashed and compared against the stored password in the database.

When registering new users, the password is hashed before the user is added to the database, and all password input fields show '*' when typing, so there are no cleartext/visible passwords at any point.

Upon successful login, the main window is opened, presenting the user with several options such as 'Add User', 'Add/View Tasks', 'Generate Reports', and a search field.

When the 'Add User' button is clicked, the script gets the values entered in the username and password entry widgets and checks if they are empty strings. If either of them are empty, it displays a window with a message saying 'Incorrect info, please try again'. If both the username and password are non-empty, the script hashes the password using SHA-256 and stores the username and hashed password in a MongoDB database. It then displays a message saying 'User added successfully' and closes the window.

The 'Generate Reports' button performs the following:

-> Connects to the MongoDB server using the MongoClient function.
-> Retrieves the 'login_info' collection from the 'task_manager' database and counts the number of unique usernames in the collection.
-> Retrieves the 'tasks' collection from the 'task_manager' database and counts the number of tasks in the collection.
-> Counts the number of tasks that are completed and not completed.
-> Finds the tasks that are overdue and not completed by searching for tasks with a due date earlier than the current date and that are not completed.
-> Calculates the percentage of tasks that are incomplete and overdue.
-> Outputs the report to a textbox widget in the main window.

This is a work in progress, and there is still more to do:

-> Implement Add/View Tasks
-> Implement a search feature to search tasks assigned to a particular person and/or by date/completed status
-> Create 'Edit Tasks' to change the user assigned, due dates, and mark tasks as completed
-> Increase error handling
-> Tidy up/refactor/streamline code (it's currently a mess back here!)

Optional:

-> Increase security with bcrypt password protection
-> Add specific password conditions, i.e. length, including numbers/characters etc

I'll post the full project on GitHub once it's finished, and as always I'm happy to take any feedback.

Thanks for reading 👋

DEV Community: Simon Whelan

Optimised Django App Setup in Windows VSCode 🚀🐍🛠️ - Part 2

Optimised Django App Setup in Windows VSCode 🚀🐍🛠️

stockControl 🥕🥫🦐 - A comprehensive system for tracking recipes, ingredients and costs - *Update*

stockControl 🥕🥫🦐 - A comprehensive system for tracking inventory, recipes, ingredients and costs

Task Manager 2.0 📝📤📆 - A feature-rich Task Management app built with Python & customTkinter

Changelog -

Enough intro - let's get to the app! 🚀

Want to try it? Feel free!

Add Task -

Edit Task -

Delete Task -

Search -

Reports -

dontClickTheMail🚫📰🗞️: Clean Up Your Reddit Feed - Scrape Daily Mail articles to read without clicking the link!

Boost your Python development in VS Code: Top picks for extensions 💻🚀🛠️

Task Manager 📝📤📆

stockControl 🥕🥫🦐 - A comprehensive system for tracking recipes, ingredients and costs - Update