Quickstart

This quickstart is a guide for installing and creating your first Materia application: A basic TODO application.

I - Install Materia Designer

Go to the download page to grab the latest version of Materia for your operating system (available for Windows, Mac), then install it.

You're now ready to start Materia Designer !

II - Create your first Materia application

To create your first application, you'll need:

  • an application directory (an empty folder somewhere on your filesystem),
  • the information to connect to your database.

Important: If you want to use PostgresSQL or MySQL, you must first install one of them and have a launched instance. You can also choose SQLite which require no installation as it is already bundled in Materia Server.

Create app

III - Create an entity

Go in Entities in the left side menu. This view is the main view to architecture your data structures. You can create your first entity by clicking on Create an entity.

Let's create a first entity called todo, with 2 fields and some default http endpoints :

Fields (Step 2 'Fields')

  • task | type text | required,

  • done | type boolean | default false.

Note: The field id_todo is automatically generated for us as the primary key, with an auto-increment number type.

Endpoints (Step 3 'Options')

You can generate default HTTP endpoints when creating a new entity :

  • GET /api/todos => list,

  • GET /api/todos/:id => findOne,

  • POST /api/todos => create,

  • PUT /api/todos/:id => update,

  • DELETE /api/todos/:id => delete.

You can select all of them, except findOne, as we won't need it for the todo application.

Note: If you want to, you can create your endpoints later. You will be able to create endpoints on the API section from the left side menu (see section V).

Quickstart todo

IV - Manage your entity's data

Go in Data in the left side menu or by clicking Browse data on the right side menu.

On each database entity, you have automatically generated default queries:

  • Get: fetch one row,
  • List: fetch all rows,
  • Create: add a new row,
  • Update: update one row,
  • Delete: delete a row.

data todo

V - Create an endpoint

Note: If you already created your endpoints with the entity builder, go directly to section VI.

Go in API in the side menu. Your API is the set of all the Websocket ans HTTP URL available in your web server.

In our example we will use HTTP endpoints. These endpoints usually sends back JSON to communicate with your frontend (a web page, a mobile application, a game etc...).

In the following animation, we'll create an endpoint to fetch all todo using the default query list

endpoint todo

Once your endpoint GET /api/todos is configured and executed, it executes the list query of the entity Todo and return its response in JSON.

For the need of this example you can repeat this step to create others endpoints:

  • POST /api/todos => create,

  • PUT /api/todos/:id => update,

  • DELETE /api/todos/:id => delete.

VI - List your TODOs in a website

We will use the endpoint we've created to display all todos on a web pages.

todo website

Go in Website in the side menu, create the default view and edit the index.html file to set this code inside:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo with Materia</title>
</head>

<body>
  <ul id="todos">
  </ul>
  <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
  </script>
  <script type="text/javascript">
    $('document').ready(function() {
        $.get('http://localhost:8060/api/todos')
            .success(function(result) {
                let cssClass = ''
                const data = result.data;
                data.forEach((row) => {
                    if (row.done) {
                        cssClass = ' class="done"'
                    }
                    $('ul#todos')
                        .append(`<li${cssClass}>
                            ${row.task}
                        </li>`)
                });
        })
    })
  </script>

  <style>
    li.done {
      text-decoration: line-through;
    }
  </style>
</body>

</html>

That's all you need to list your todos with jQuery. Of course, it works with others framework as Angular, React or Vue for example.

VII - TODO application finished using Angular and Angular Material

In this example, we've chosen Angular but as explained above, it can be really any Javascript framework.

To have a nice UI, we've chosen Angular Material which is easy to use and have all the component required for the Todo applications.

Todo final application

The complete application source code is available here.

You can use git when creating a new application, it will clone the repository in the chosen folder or do it manually on your filesystem with:

git clone git@github.com:materiahq/materia-todo.git

In this case you have to open the cloned folder materia-todo with Materia Designer to see the result !

This application includes:

  • Toggle todo done,
  • Remove todos,
  • Create new todo.

Next step

  • Guide - In-depth guide to use Materia.