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!
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
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:
Python1class 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.
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:
Python1from 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.
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:
Python1from 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.
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, XML1<!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.
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:
Python1from 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.
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!