TODO App with SimpleSQL

Intro

SimpleSQL is an API that allow to interact with disposable databases using HTTP calls.

We provide a small Javascript SDK to simplify developement of static web sites.

The main documentation of the SDK is the github page.

The REST API is documented on swagger, that also allow to test the API live.

What I am looking at

This page is a completely static page made of HTML and JS (not even CSS), that implements a simple TODO app using SimpleSQL.

There is not a backend but we only use the SimpleSQL API. Directly from the frontend we can create databases and interact with them, executing whatever SQL command we want.

The page is hosted on Netlify and the source is available on github

An overview

SimpleSQL rotate around the concept of database, with a simple call you can create a new database and the API will give you back the ID of the database. You need the ID to access the database.

Once you get the database, you can do whatever you want with it. Create table, insert values, delete values or tables. The databases, of course, keep their state.

Authentication is provided with the use of tokens, but for this I suggest to refer to the documentation.

The TODO App

The TODO app is an execuse to test and use the API, it quickly guide you on a standard workflow with SimpleSQL.

The first step one a frontend app will be to import the SDK, and this page already does so.

Then the user need to access one database, it can create a new one (like in this case), read the ID of the database from a cookie or from local storage, or even read the ID from a central database.

The last step is to interact with the database, and this can be done using standard SQL commands and queries. The SQL dialect is SQLite.


The following steps guide you through it. Of course it is a limited example, but you can build very complex static page on top of this.

1. Import the SKD

<script type="text/javascript" src="https://unpkg.com/@redbeardlab/simplesql@>=1.0.8"></script>

An alternative would be to host the SDK code yourself, however, you would need to make sure that all the CORS is in order. The source of this webpage show how to do it on Netlify

2. Create a new database

const new_database = await SimpleSQL.newDatabase();

3. Create the table

const done = await SimpleSQL.command(new_database, "CREATE TABLE todo(item TEXT, done INT);");

4. Insert elements

const done = await SimpleSQL.command(new_database, "INSERT INTO todo VALUES('buy the milk', 0);");