Todo App with MariaDB Connector/Python

Todo is a sample web application for MariaDB SkySQL that demonstrates the power, performance, and simplicity of MariaDB Platform for Transactions by simulating an online todo list manager.

Todo Application

Todo has three components:

  • MariaDB Platform for Transactions running on MariaDB SkySQL.

  • Python-based back-end API using MariaDB Connector/Python.

  • Client application using React.js.

Prerequisites

Installing the Todo sample application requires downloading the code from GitHub, provisioning a database service on MariaDB SkySQL, and creating the schema for use.

Cloning the Repository

The Todo example application is available in the MariaDB Corporation repositority on GitHub. It contains the API code in Python and other languages, and the React.js client that connects to the API.

To download the Todo application, clone the repository from GitHub:

$ git clone https://github.com/mariadb-corporation/dev-example-todo.git

This creates a dev-example-todo/ directory on your file system.

Provisioning a Database Service

The database back-end for the Todo application requires a single table with the InnoDB storage engine. This requirement can be met on MariaDB SkySQL by provisioning MariaDB Platform for Transactions using the Standalone topology.

Information on provisioning a service is available in the Operations Guide.

Creating the Schema

Todo uses a single InnoDB table to store the todo entries. To create a database and table on your MariaDB SkySQL database service to provide a back-end to the Todo application:

  1. Connect to your database service.

  2. Use CREATE DATABASE to create a database for the application:

    CREATE DATABASE todo;
    
  3. Use CREATE TABLE to create a table to store the todo entries:

    CREATE TABLE todo.tasks (
      id INT PRIMARY KEY AUTO_INCREMENT,
      description VARCHAR(500) NOT NULL,
      completed BOOLEAN NOT NULL DEFAULT 0
    ) ENGINE = InnoDB;
    

This creates a todo.tasks table for use by the Todo application with MariaDB SkySQL as a database back-end.

Application Installation

In the Todo sample application, the client connects to MariaDB SkySQL using a back-end API. The repository contains different versions of the back-end API, allowing you to test and experiment with different MariaDB Connectors.

Navigate to the api/ directory for the language you want to use:

$ cd /path/to/dev-example-todo/api/python/

Configuring the API

To connect to your MariaDB SkySQL database service, the back-end API must be configured to use the appropriate credentials.

Python allows you to set login credentials using an environment file. In the api/python/ directory, create a .env file with your MariaDB SkySQL credentials:

DB_HOST = example.skysql.net
DB_USER = db_user
DB_PASS = db_user_passwd
DB_PORT = 5001
DB_NAME = todo

Todo API is configured to use a connection pool to access the database.

Install Dependencies

The Python API for the Todo app requires installing a few additional dependencies. To avoid conflict with your existing install, install the dependencies and the Todo API in a virtual environment.

To install dependencies:

  1. Initialize virtual environment:

    $ python3 -m venv .
    
  2. Activate the virtual environment:

    $ sh venv/bin/activate activate
    
  3. Install dependencies in the virtual environment:

    $ ./venv/pip3 install python-dotenv flask mariadb
    

The Python API for the Todo app is now ready for use.

Starting the API

Once you have the back-end API configured and installed, you can start the service:

To run the Python API, run the api.py file:

$ python3 api.py

The back-end API is now running. The next step is to install and start the React.js client to run the application.

Client Installation

In the Todo sample application, the client is a React.js application that connects to the back-end API and provides a web interface.

To install and start the client:

  1. Navigate to the client/ directory:

    $ cd /path/to/dev-example-todo/client/
    
  2. Install the client application:

    $ npm install
    
  3. Start the client:

    $ npm start
    

The client is now running, and you can access it through your web browser at http://localhost:3000.

Application Usage

When the client and the back-end API are running, Todo simulates an online todo list application, maintaining a record of open and completed tasks on MariaDB Platform for Transactions.

Todo Application

The web application provides basic task management functionality, allowing you to add, finish, and delete tasks.

The client connects to the database service through the back-end API, retrieves a list of todo entries from the table, crossing through any that have been completed. To add a task, click the "Add New Task" button. To mark a task as complete, click the checkbox. To delete a task, click the trash can icon.