Build a realtime CRUD app with Flask and Pusher

Python Flask is a really cool Python framework for building web applications. One of its major selling points is how simple it is to get started on building apps with it. In this tutorial, we will build a simple Flask CRUD application, and add realtime functionality to it using the superpowers Pusher grants us.

Our CRUD app is a simple realtime Todo list app that can find use in distributed teams, for example, to manage their deliverables.

Here is what the final app will look like:

Prerequisites

To follow along properly, basic knowledge of Python, Flask, and JavaScript (ES6 syntax) is needed. You will also need the following installed:

• Python
• virtualenv
• Flask

Virtualenv is great for creating isolated Python environments, so we can install dependencies (like Flask) in an isolated environment, and not pollute our global packages directory. To install virtualenv:

bash
1pip install virtualenv
Copy

Setup and Configuration

Installing Flask
Now, we can create our project folder, activate a virtual environment in it, and install Flask.
To activate a virtual environment:

python
1mkdir realtime-todo
2    cd realtime-todo
3    virtualenv .venv
4    source .venv/bin/activate
Copy

To install Flask:

python
1pip install flask
Copy

Setting up Pusher
We will be using Pusher to power our realtime updates. Head over to Pusher.com and register for a free account, if you don’t already have one. Then create an app on the dashboard, and copy out the app credentials (App ID, Key, Secret, and Cluster). It is super straight-forward.

We also need to install the Pusher Python Library to communicate with Pusher on the backend:

python
1pip install pusher
Copy

File and Folder Structure
We will keep things super simple and will only create a couple of files. Here’s the file/folder structure used:

bash
1├── realtime-todo
2       ├── app.py
3       ├── static
4       └── templates
Copy

The static folder will contain the static files to be used as per Flask standards, and the templates folder will contain the HTML templates for the app. App.py is the main entry point for our app and will contain all our server-side code.

Building Our App Backend

Next, we will write code to show a simple view and create endpoints for adding, updating and deleting our Todos. We will not be persisting the data to a database, but will instead use Pusher events to broadcast data to all users subscribed to our channel.

Updating app.py:

python
1# ./app.py
2
3    from flask import Flask, render_template, request, jsonify
4    from pusher import Pusher
5    import json
6
7    # create flask app
8    app = Flask(__name__)
9
10    # configure pusher object
11    pusher = Pusher(
12      app_id='YOUR_APP_ID',
13      key='YOUR_APP_KEY',
14      secret='YOUR_APP_SECRET',
15      cluster='YOUR_APP_CLUSTER',
16      ssl=True
17    )
18
19    # index route, shows index.html view
20    @app.route('/')
21    def index():
22      return render_template('index.html')
23
24    # endpoint for storing todo item
25    @app.route('/add-todo', methods = ['POST'])
26    def addTodo():
27      data = json.loads(request.data) # load JSON data from request
28      pusher.trigger('todo', 'item-added', data) # trigger `item-added` event on `todo` channel
29      return jsonify(data)
30
31    # endpoint for deleting todo item
32    @app.route('/remove-todo/<item_id>')
33    def removeTodo(item_id):
34      data = {'id': item_id }
35      pusher.trigger('todo', 'item-removed', data)
36      return jsonify(data)
37
38    # endpoint for updating todo item
39    @app.route('/update-todo/<item_id>', methods = ['POST'])
40    def updateTodo(item_id):
41      data = {
42        'id': item_id,
43        'completed': json.loads(request.data).get('completed', 0)
44      }
45      pusher.trigger('todo', 'item-updated', data)
46      return jsonify(data)
47
48    # run Flask app in debug mode
49    app.run(debug=True)
Copy

In the code block above, after importing the needed modules and objects and initializing a Flask app, we initialize and configure Pusher. Remember to replace YOUR_APP_ID and similar values with the actual values gotten from the Pusher dashboard for your app. With this pusher object, we can then trigger events on whatever channels we define.

A clear example of this is seen in the addTodo() procedure, where we trigger an item-added event on the todo channel with the trigger method. The trigger method has the following syntax:

python
1pusher.trigger('a_channel', 'an_event', {'some': 'data'})
Copy

You can find the docs for the Pusher Python library here, to get more information on configuring and using Pusher in Python.

In the code above, we also created an index route which is supposed to show our app view by rendering the index.html template. In the next step, we will create this view and start communicating with our Python backend.

Creating Our App View

Now, we create our main app view in ./templates/index.html. This is where the interface for our app will live.

First, we will pull CSS for TodoMVC apps to take advantage of some pre-made Todo list app styles, and store the folder in the ./static folder.

Next, we can write the basic markup for the view:

html
1<!-- ./templates/index.html -->
2    <html>
3    <head>
4      <!-- link to the Todo MVC index.css file -->
5      <link rel="stylesheet" href="/static/todomvc-app-css/index.css">
6      <title>Realtime Todo List</title>
7    </head>
8
9    <body>
10      <section class="todoapp">
11        <header class="header">
12          <h1>Todos</h1>
13          <input class="new-todo" placeholder="What needs to be done?" 
14            autofocus="" onkeypress="addItem(event)">
15        </header>
16
17        <section class="main">
18          <ul class="todo-list"></ul>
19        </section>
20
21        <footer class="footer"></footer>  
22      </section>
23    </body>
24    </html>
Copy

In the above markup, notice we added an addItem() function to be called onkeypress for the .new-todo input. In the following steps, we will define this function, as well as other JavaScript functions to handle the basic app functions and interact with our Python backend.

Creating, Removing and Updating Todo Items
Now, we can add the JavaScript code to interact with the Todo items. Whenever an item is to be added, removed or updated, we will make API calls to our backend to affect those changes. We will do this with the simple and intuitive Fetch API:

html
1<!-- ./templates/index.html -->
2    <html>
3      <!-- // ... -->
4      <script>
5        // function that makes API call to add an item
6        function addItem(e) {
7          // if enter key is pressed on the form input, add new item
8          if (e.which == 13 || e.keyCode == 13) {
9            let item = document.querySelector('.new-todo');
10            fetch('/add-todo', {
11              method: 'post',
12              body: JSON.stringify({ 
13                id: `item-${Date.now()}`,
14                value: item.value,
15                completed: 0
16              })
17            })
18            .then(resp => {
19              // empty form input once a response is received
20              item.value = ""
21            });
22          }
23        }
24
25        // function that makes API call to remove an item
26        function removeItem(id) {
27          fetch(`/remove-todo/${id}`);
28        }
29
30        // function that makes API call to update an item 
31        // toggles the state of the item between complete and
32        // incomplete states
33        function toggleComplete(elem) {
34          let id = elem.dataset.id,
35              completed = (elem.dataset.completed == "1" ? "0" : "1");
36          fetch(`/update-todo/${id}`, {
37            method: 'post',
38            body: JSON.stringify({ completed })
39          });
40        }
41
42        // helper function to append new ToDo item to current ToDo list
43        function appendToList(data) {
44          let html = `
45            <li id="${data.id}">
46              <div class="view">
47                <input class="toggle" type="checkbox" onclick="toggleComplete(this)" 
48                  data-completed="${data.completed}" data-id="${data.id}">
49                <label>${data.value}</label>
50                <button class="destroy" onclick="removeItem('${data.id}')"></button>
51              </div>
52            </li>`;
53          let list = document.querySelector(".todo-list")
54          list.innerHTML += html;
55       };
56      </script>
57    </body>
58    </html>
Copy

Note: The JavaScript Fetch API is great for making AJAX requests, although it requires a polyfill for older browsers. A great alternative is axios.

In the above block of code, we define 4 functions to help us interact with the items on our Todo list. The addItem() function makes a POST API call to add a new item to the Todo list, with the value from our input field, we also try to mock a unique ID for each item by assigning them a value of item-${Date.now()} (ideally this would be implemented by our data store, but it is beyond the scope of this tutorial). Lastly, we assign an initial state of 0 to the completed property for each item, this is to show that the item is just added, and has not yet been completed.

The removeItem() function makes a request to delete an item, while the toggleComplete() function makes a request to update the completed property of an item. An appendToList() helper function is also defined to update our Todo list with new items, this helper function will be used in the next step when we start listening for events.

Listening For Events
In this step, we will listen for events from Pusher, and update our app view based on the data received. Updating index.html:

html
1<!-- ./templates/index.html -->
2    <html>
3      <!-- .// -->
4      <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
5
6      <script>
7        // Enable pusher logging for debugging - don't include this in production
8        Pusher.logToConsole = true;
9
10        // configure pusher
11        const pusher = new Pusher('YOUR_APP_KEY', {
12          cluster: 'eu', // gotten from Pusher app dashboard
13          encrypted: true // optional
14        });
15
16        // subscribe to `todo` public channel, on which we'd be broadcasting events
17        const channel = pusher.subscribe('todo');
18
19        // listen for item-added events, and update todo list once event triggered
20        channel.bind('item-added', data => {
21          appendToList(data);
22        });
23
24        // listen for item-removed events
25        channel.bind('item-removed', data => {
26          let item = document.querySelector(`#${data.id}`);
27          item.parentNode.removeChild(item);
28        });
29
30        // listen for item-updated events
31        channel.bind('item-updated', data => {
32          let elem = document.querySelector(`#${data.id} .toggle`);
33          let item = document.querySelector(`#${data.id}`);
34          item.classList.toggle("completed");
35          elem.dataset.completed = data.completed;
36          elem.checked = data.completed == 1;
37        });
38
39        // ...
40      </script>
41    </body>
42    </html>
Copy

The first thing we have to do here is to include the pusher-js library to help us communicate with the Pusher service. Next, we initialize the Pusher service by passing in our App Key, and some other options — for a full list of configuration options, you can check the docs here.

After successfully initializing Pusher and assigning it to the pusher object we can then subscribe to the channel from which we want to receive events, in our case that’s the public todo channel:

javascript
1const channel = pusher.subscribe('todo');
Copy

Note: Pusher provides various types on channels, including Public, Private and Presence channels. Read about them here.

Finally, we bind the various events we’re listening for on the channel. The bind() method has the following syntax – channel.bind(event_name, callback_function)

Optionally, we can add a loader to the page, which would show whenever a request is made.
The final index.html file would look like this, and our app should be ready now!

To run our app:

bash
1python app.py
Copy

And here is what the demo looks like:

Conclusion

In this tutorial, we have learned how to build a Python Flask project from scratch and add realtime functionality to it using Pusher and Vanilla JavaScript. The entire code for this tutorial is hosted on GitHub.

There are many other use cases for adding realtime functionality to Python applications. Do you have any more improvements, suggestions or use cases? Let us know in the comments!