Introduction

This instructional guide employs a tech stack comprising Python, Flask, Jinja2, HTML, JavaScript, and a SQL database to architect a ToDo application, as illustrated below:

The tutorial provides comprehensive instructions for either cloning the project from our Devii GitHub repository or constructing the application from scratch.

Devii Registration and Login

Initiate the process by registering and logging into the Devii portal. Refer to the register and login, for detailed instructions. If you already possess a Devii account, you may skip this step.

Python Installation Verification

Before proceeding, confirm the presence of Python on your system.

• Windows:

  • Open the command prompt and type python --version or python -V if you have python installed you will receive a response “Python 3.x.x”, the 3.x.x represents the python version you have installed.

• macOS and Linux:

  • If you have a mac, open the Terminal app by going to the Applications folder or Spotlight search and searching for Terminal, type python3 --version or python3 -V if python is installed you will see a response “Python 3.x.x”, the 3.x.x represents the python version you have installed.

  • Why do you need to use 'python3' in MacOS and Linux?

    • On many MacOS and Linux distributions python refers to python2 and is installed by default, to use python3 it must be referenced as python3 as not break anything that relys on the fact that python refers to python2

Installing Python (if not installed)

In case Python is not installed, visit https://www.python.org/ and follow the provided instructions to download and install the suitable version for your operating system.

Create PostgreSQL database

A SQL database will need to be set up for this project, Neon.Tech, has a free tier that works well for this project, you can follow their documentation to set up a project here. After you have your project set up, you will need to create a database (e.g. "todo") and two tables: List and Item. Below I have included the SQL code to create both tables used in the tutorial.

note

Neon.tech will automatically convert all input text to lowercase, regardless of how you capitalize it. This means that whether you enter text in uppercase, lowercase, or a mix of both, it will internally convert everything to lowercase.

CREATE TABLE Status_Value (
    statusID SERIAL NOT NULL PRIMARY KEY,
    statusName varchar(255)
);

The Status table will provide a list of avaible statuses for the application, the List and Item table will have 'Backlog' as a default value.

CREATE TABLE List (
ListID SERIAL NOT NULL PRIMARY KEY,
ListName varchar(255) NOT NULL,
StatusId INT,
CONSTRAINT FK_ListStatusID
  FOREIGN KEY (StatusID)
  REFERENCES Status_Value(StatusID)
);

CREATE TABLE Item (
ItemID SERIAL NOT NULL PRIMARY KEY,
ItemName varchar(255) NOT NULL,
StatusId INT,
CONSTRAINT FK_ItemStatusID
  FOREIGN KEY (StatusID)
  REFERENCES Status_Value(StatusID)
ListID INT,
CONSTRAINT FK_ListID
  FOREIGN KEY (ListID)
  REFERENCES List(ListID)
  ON DELETE CASCADE
);

For testing purposes, I added elements in all tables.

INSERT INTO status_value(statusName)
  VALUES 
    ('Backlog'),
    ('To do'),
    ('Done')

INSERT INTO List (listname, statusid)
VALUES ('Tutorial', 1)

INSERT INTO item (itemname, listid, statusid)
VALUES ('Create Tutorial', 1, 1)

Devii Connection Setup

Create a Devii connection to your database. Refer to database connection instructions. Extract necessary information from your Neon Tech project dashboard (username, password, database name, hostname). The connection string format is:

psql 'postgresql://username:password@hostname/database_name?sslmode=require'

Optional: Devii Connection Verification

To check your connection, execute the following query in the Devii portal using the GraphiQL interface:

{
  list {
    listid
    listname
    status_value {
      statusid
      statusname
    }
    item_collection {
      itemid
      itemname
      statusid
    }
  }
}

You should receive a reply of:

{
  "data": {
    "list": [
      {
        "item_collection": [
          {
            "itemid": "1",
            "itemname": "Create Tutorial",
            "statusid": 1
          }
        ],
        "listid": "1",
        "listname": "Tutorial",
        "status_value": {
          "statusid": "1",
          "statusname": "Backlog"
        }
      }
    ]
  }
}

With the Devii connection established, proceed to construct the application. The complete code for the ToDo app is available in the Devii GitHub repository. Clone the repository for experimentation or create the code from scratch using your preferred Integrated Development Environment (IDE). If you opt for VS Code, refer to VS Code Installation Tutorial for guidance.