Total.js tutorial: Simple Todo application (part 1)
Tags: totaljs, node, tutorial, webdev
Published: 2023-03-14 13:34:01

I have published some blog posts and videos about Total.js Flow, the famous node-red alternative that is entirely written with the Total.js framework. Then I got many feedbacks from people asking me how to get started with the **total.js framework**. And I finally decided to create this Total.js tutorial series to help you move from zero to hero with the **Total.js framework**. I am so happy to publish the first tutorial of this series. Today's tutorial has two parts: **part 1** will focus on the server-side implementation of our simple todo application, and **part 2** will focus on its client-side implementation. I will share with you the GitHub source-code link and the youtube video link of this tutorial so that you can effectively learn everything about the Total.js framework.

## Create project
Before you create a project for this tutorial, make sure that you have node.js v14 or earlier installed on your machine. This is enough to start building anything you want with the Total.js framework. Then we need to open your terminal and type the following commands:

```bash
# create folder and move into it
$ mkdir todoapp && cd todoapp 
# init project with npm
$ npm init -y
# install total.js (The only one dependency you need )
$ npm install total4
```
Now you can open the project in your favorite code editor. In my case, I am using VSCode.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfaakcvi9j47bejxneqg.png)



## Create a main entry file (index.js)

Create a `.js` file in the root of your application. The name for the app entry file is usually an `index.js` file but you can name it whatever you want! The important thing is that you will need it to start the development server for your application. After you created it, you must put the following simple start script:

```js
require('total4/debug')({ port: 5000 });
```

That one line of code is enough to start the server in debugging (development) mode!
Then you type the following in the terminal to run it:

```bash
node index.js
```

The output of that will look like the following:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8sgm6nm9p5v2tsoymk6.png)

## Create todo API endpoints
Create `/controllers/api.js` file to define your application endpoints.

```js
exports.install = function () {
    //  Http_method    Uri           *Schema_name  --> action_name
    ROUTE('GET         /todos/list/          *Todos   --> list');                    
    ROUTE('POST        /todos/create/        *Todos   --> create');                   
    ROUTE('GET         /todos/read/{id}/     *Todos   --> read');                   
    ROUTE('UPDATE      /todos/updates/{id}/  *Todos   --> update'); 
    ROUTE('DELETE      /todos/remove/{id}/   *Todos   --> remove');
    ROUTE('GET         /todos/toggle/{id}/   *Todos   --> done');
                   
}
```

## Create schema and actions for the app endpoints

Create `/schemas/todos.js` file to define your Todos schema.

```js
NEWSCHEMA('Todos', function(schema) {
    schema.action('list', {
        name: 'List todos',
        query: 'search:String',
        action: function($) {
            var builder = DB().find('nosql/todos'); 
            builder.where('isremoved', false);
            // enable searching via request query parameter
            $.query.search && builder.search('search', $.query.search);
            builder.fields('id,name,isdone,description');
            builder.callback($.callback);
        }
    });

    schema.action('create', {
        name: 'Create new todo',
        input: '*name:String,description:String,isdone:String',
        action: function($, model) {
            model.id = UID();
            model.isdone = false;
            model.search = (model.name + ' ' + model.description || '').toSearch();
            model.isremoved = false;
            model.dtcreated = NOW;
            DB().insert('nosql/todos', model).callback($.done(model.id));
        }
    });

    schema.action('read', {
        name: 'Read specific todo',
        params: '*id:String',
        action: function($) {
            var params = $.params;
         DB().read('nosql/todos').fields('id,name,isdone,description').id(params.id).where('isremoved', false).error(404).callback($.callback);
        }
    });


    schema.action('update', {
        name: 'Update todo',
        params: '*id:String',
        input: '*name:String,description:String,isdone:String',
        action: function($, model) {
            var params = $.params;
            model.dtupdated = NOW;
            model.search = (model.name + ' ' + model.description || '').toSearch();
            DB().update('nosql/todos', model).id(params.id).where('isremoved', false).error(404).callback($.done());
        }
    });


    schema.action('remove', {
        name: 'Remove a todo',
        params: '*id:String',
        action: function($) {
            var params = $.params;
            DB().update('nosql/todos', { isremoved: true, dtremoved: NOW }).id(params.id).where('isremoved', false).error(404).callback($.done());
        }
    });

    schema.action('done', {
        name: 'Toggle done/undone status of todo',
        params: '*id:String',
        action: function($) {
            var params = $.params;
            DB().update('nosql/todos', { '!isdone': true }).id(params.id).where('isremoved', false).error(404).callback($.done());
        }
    })
});
```

## Testing the endpoints

Your API development is done! Now you need to test it to make sure that everything is okay. You can use your favorite API testing tool. The most popular is [Postman](https://www.postman.com/) but you can use [insomnia](https://insomnia.rest/) or Linux [Rest scope](https://gitlab.com/kendellfab/rest-scope) (in my case).

- `POST /todos/create`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o5huilbjd4n14jxqqgi.png)

- `GET /todos/read/{id}/`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec2nch3q6uxuzamwtno8.png)

- `PUT /todos/update/{id}/`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncv6kuh90p5h96gwfeel.png)

- `GET /todos/list`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzhccd4bd2ijc03hgwxh.png)

- `GET /todos/toggle/{id}/`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptxqfkcqfw00xqtetsv0.png)

- `DELETE /todos/remove/{id}/`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze74hysw52ncvn6ti4in.png)

That is all for our application **Server side API** implementation. The next step is to implement a nice **client-side UI** for interacting with our API and this will the **Part 2** of this tutorial. If you enjoyed reading this tutorial, please share it with your colleagues, like and leave me some comments. **In part 2**, I will share the source code link and the video tutorial link too. So consider following me and subscribing to the newsletter to not miss part 2.

- [Total.js Framework official website](https://www.totaljs.com/)

- [Total.js Framework documentation](https://docs.totaljs.com/)

- [Make the Total.js Platform better, support it!](https://www.totaljs.com/support/)

- [Have any questions? Contact us](https://www.totaljs.com/contact/)

- [Join Total.js Telegram community](https://t.me/totaljs)