Setting a ToDo App Project

Lesson 1

Welcome to the first lesson of our course on "Building a ToDo App with Flask." In this lesson, we will guide you through setting up your Flask project, creating a basic project structure, and displaying your first Todo list.

Let's begin by understanding how to structure our project!

Project Overview

Before we dive into coding, it’s essential to understand the structure of our Flask Todo app. Our project will consist of several key components:

Models: Note that in our context, the models/ directory will contain simple class definitions that represent the data structure of our Todo items. This is not the traditional model layer of MVC architecture but rather a basic class to help us manage our Todo items.
Controllers: In the controllers/ directory, we will define the routes and logic to handle web requests.
Services: In the services/ directory, we'll create the business logic to manage our Todo items.
Templates: The templates/ directory will store the HTML files to render the web pages.

Here is the basic structure of our project:


1app/
2├── app.py
3├── controllers/
4│   └── todo_controller.py
5├── models/
6│   └── todo.py
7├── services/
8│   └── todo_service.py
9└── templates/
10    └── todo_list.html

Creating the Todo Model

A model in Flask is typically a class that represents the data structure of your application. However, it's important to note that in our context, this model does not represent a full-fledged model layer as in MVC architecture. Instead, it's a simple class for managing Todo items.

We'll create a file named app/models/todo.py and we'll add the following content:

Python
1class Todo:
2    def __init__(self, todo_id, title, description):
3        self.todo_id = todo_id
4        self.title = title
5        self.description = description

This Todo class has three attributes: todo_id, title, and description. This simple class will be the foundation for our Todo items.

Creating the Todo Service

Services are used to handle the business logic of your application. Let's create a service to manage our Todo items.

We'll create a file named app/services/todo_service.py and add the following code:

Python
1from models.todo import Todo
2
3class TodoService:
4    def __init__(self):
5        self._todos = [
6            Todo(1, "Sample Todo 1", "Description 1"),
7            Todo(2, "Sample Todo 2", "Description 2")
8        ]
9
10    def get_all(self):
11        return self._todos

The TodoService class initializes a list of Todo items and provides a method to retrieve all the todos. This service will simplify managing the Todo items in our application.

Creating the Todo Controller

Controllers handle web requests and responses. In Flask, we often use Blueprints to organize our routes.

Let's create a file named app/controllers/todo_controller.py and add the following code:

Python
1from flask import Blueprint, render_template
2from services.todo_service import TodoService
3
4todo_service = TodoService()
5
6todo_controller = Blueprint('todo', __name__)
7
8@todo_controller.route('/', methods=['GET'])
9def list_todos():
10    todos = todo_service.get_all()
11    return render_template('todo_list.html', todos=todos)

This code creates a todo_controller Blueprint and defines a route to list all Todo items. Here, we explicitly set the method for this route to GET.

Although Flask accepts GET requests by default if not specified, it’s good practice to explicitly declare it to make things clear and follow the HTTP protocol more rigorously. In HTTP, GET requests are used to request data from a specified resource without making any changes to it.

When a GET request is made to the root path, this controller uses the TodoService to get all Todo items and then renders them using an HTML template.

Creating the HTML Template

HTML templates are used to render dynamic content in web applications. We'll create a simple HTML template to display our Todo list.

Let's create a file named app/templates/todo_list.html and add the following HTML:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Todo List</title>
7</head>
8<body>
9    <h1>Todo List</h1>
10    <ul>
11        {% for todo in todos %}
12            <li>
13                <strong>{{ todo.title }}</strong>: {{ todo.description }}
14            </li>
15        {% endfor %}
16    </ul>
17</body>
18</html>

This template uses Jinja2 syntax to loop through all the Todo items passed from the controller and display their title and description.

Initializing the Flask Application

Finally, let's initialize our Flask application and register the todo_controller Blueprint to ensure that our routes are recognized.

In the app/app.py file, we'll add the following code:

Python
1from flask import Flask
2from controllers.todo_controller import todo_controller
3
4app = Flask(__name__)
5
6app.register_blueprint(todo_controller)
7
8if __name__ == '__main__':
9    app.run(host='0.0.0.0', port=3000, debug=True)

This code creates a Flask application instance, registers the todo_controller Blueprint to organize our routes, and runs the application.

Summary and Next Steps

In this lesson, we:

Set up a Flask environment
Created a basic project structure
Defined a simple model for a Todo item
Built a service to manage Todo items
Developed a controller to handle web requests
Rendered Todo items using an HTML template

Now that we have set up Flask and displayed our first Todo list, it's time to move on to the practice exercises. These exercises will help reinforce what you've learned by giving you hands-on experience in building and manipulating your Todo app.

Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.