Todo Application using Materia
Part 1: Server modeling
In this tutorial we are going to build a classic todo application with Materia Designer.
Materia Designer is a cross platform desktop application, which aims to be an easy to use web server, build on top of Express (a famous Node.js framework).
The first part of this tutorial is focus on modeling our Materia application backend.
I — Create your first Materia Application
To create a new Materia application from our file system, all we will need is an empty folder.
In this example we use sqlite as Database engine, as it doesn’t require any further installation and is already bundled in @materia/server, which is used by Materia Designer under the hood.
By default our new Materia application is running on localhost:8080. This behavior can be modified in the settings section or by updating directly the configuration file materia.json:
II — Create Todo table
We now need to create our Todo entity, we can do this by navigating to the Entities section.
Our new table will have 3 fields:
- id_todo: it is the primary key (PK) of our database table. By default the PK has an auto-incremented number,
- task: it is a required text field representing the name of the task to achieve,
- done: it is a boolean field with a default value set to false. It represents the status of the task.
We can notice that our new todo entity is generated with default queries. This queries allows us to interact with the underlying database table (stored in a sqlite database in our case): list, get, create and delete.
Under the hood, our new entity is describe in a new json file located in ./server/models:
III — Create a REST API
You may have noticed that on the Entity Builder’s fourth step, we choose to generate all suggested HTTP endpoints, except the GET endpoint to retrieve single todo, as we won’t need it.
We do so because it is quicker, but we can create our endpoints individually from the API section instead. We will create a new HTTP endpoint to illustrate this.
We create a new GET endpoint to list the data of the todo entity.
The generated endpoints automatically retrieves and add the parameters of the underlying query (limit and page here). As we can see in the example above, the default list query, limit the result to 30 rows if no limit param is provided.
Our new GET endpoint can be tested in Materia Designer or in our favorite browser too:
We now have all the http endpoints, we need to perform operations against our todo entity from the browser:
- GET ‘api/todos’: retrieve the list of todos,
- POST ‘api/todos’: create a new entity,
- DELETE ‘api/todos/:id_todo’: delete a task with the provided url param id_todo,
- PUT ‘api/todos/:id_todo’: modify a task with the provided url param id_todo. This endpoint is used to toggle the done property of our task.
This collection of http endpoints is the REST API of our application.
Conclusion
Thanks to Materia Designer, we just made in a few minutes:
- a web server running locally on port 8080,
- our server is using an sqlite database, where we created a todo table which has default queries: list, get, update and delete,
- our app exposes a REST API to allow us to interact with our server through HTTP protocol.
That’s it for the server side, we will build a frontend with the latest version of Angular framework in the next post.
If you like this tutorial, let us know by clapping this article and don’t hesitate to give us your feedback !
