Creating a ToDo App with Nolang

In this tutorial, we'll create a simple ToDo app using Nolang. We'll cover setting up the project, defining the schema, configuring the endpoints, and creating a basic front-end to interact with the app. Prerequisites Before you start, make sure you have the following installed on your machine: Nolang A code editor (e.g., VS Code) Step 1: Set Up the Project Create a new directory for your project and navigate into it: mkdir todo-app cd todo-app Step 2: Define the App Configuration Create a file named app.json5 and define the schema for the ToDo items, storage configuration, and endpoints: { name: "ToDo sample app", schemas: [ { "$id": "todo", "type": "object", "properties": { "who": { "type": "string", "title": "Doer of Task" }, "what": { "type": "string", "title": "What to do" }, "done": { "type": "boolean", "title": "Is done?", "default": false } }, "required": ["who", "what"] } ], storage: { adapter: "json", path: "data/todos.json" }, endpoints: [ { type: 'http', static: './public', port: 1000, routes: [ { path: '/', method: 'post' } ] } ] } Step 3: Create the Data Directory Create a directory named data and an empty JSON file to store the ToDo items: mkdir data echo "{\"todo\": []}" > data/todos.json Step 4: Create the Front-end Create a directory named public and an index.html file inside it. This file will serve as the front-end for interacting with the ToDo app: ToDo by Nolang ToDo List Id Who What Done Clear Add ToDo Add function send(command) { return fetch('/', { method: 'POST', headers: { 'Accept': 'application/json, text/plain, /', 'Content-Type': 'application/json' }, body: JSON.stringify(command) }).then(res => res.json()); } const todolist = document.getElementById('todolist'); function addToDoToTable(todo) { const newRow = todolist.insertRow(); newRow.insertCell().innerText = todo.$$objid; newRow.insertCell().innerText = todo.who; newRow.insertCell().innerText = todo.what; newRow.insertCell().innerHTML = ``; } function addTodo() { send({ $$schema: 'todo', $$header: { action: 'C' }, who: document.getElementById('who').value, what: document.getElementById('what').value }).then(res => { addToDoToTable(res); }); } function loadTodos() { send({ $$schema: 'todo', $$header: { action: 'R' } }).then(res => { todolist.innerHTML = ''; res.forEach(todo => { addToDoToTable(todo); }); }); } function doneTodo(t, todoid) { send({ $$schema: 'todo', $$header: { action: 'U', filter: { $$objid: todoid } }, done: t.checked }); } function clearTodos() { send({ $$schema: 'todo', $$header: { action: 'D', filter: { done: true } } }).then(() => { loadTodos(); }); } loadTodos(); Step 5: Run the App Start the Nolang app with the following command: nolang app.json5 Step 6: Open the App in a Browser Navigate to http://localhost:1000 in your web browser. You should be able to add, view, update, and delete todos using the interface provided in index.html. Explanation of Nolang Scripts and JSON Payloads Nolang app configuration defines the app schema, storage, and endpoints. Schema Definition: $id: Identifier for the schema. type: The data type (object in this case). properties: The fields for the schema. required: Mandatory fields. Storage Configuration: adapter: The storage method (JSON file in this case). path: The path to the storage file. Endpoints: type: The type of endpoint (HTTP in this case). static: The directory for static files. port: The port number for the server. cors: Cross-origin resource sharing configuration. routes: The HTTP routes. JSON Payloads for CRUD Operations Create (C): Add a new todo item. { "$$schema": "todo", "$$header": { "action": "C

Feb 12, 2025 - 02:38

In this tutorial, we'll create a simple ToDo app using Nolang. We'll cover setting up the project, defining the schema, configuring the endpoints, and creating a basic front-end to interact with the app.

Prerequisites

Before you start, make sure you have the following installed on your machine:

Nolang
A code editor (e.g., VS Code)

Step 1: Set Up the Project

Create a new directory for your project and navigate into it:

mkdir todo-app
cd todo-app

Step 2: Define the App Configuration

Create a file named app.json5 and define the schema for the ToDo items, storage configuration, and endpoints:

{
  name: "ToDo sample app",
  schemas: [
    {
      "$id": "todo",
      "type": "object",
      "properties": {
        "who": {
          "type": "string",
          "title": "Doer of Task"
        },
        "what": {
          "type": "string",
          "title": "What to do"
        },
        "done": {
          "type": "boolean",
          "title": "Is done?",
          "default": false
        }
      },
      "required": ["who", "what"]
    }
  ],
  storage: {
    adapter: "json",
    path: "data/todos.json"
  },
  endpoints: [
    {
      type: 'http',
      static: './public',
      port: 1000,
      routes: [
        {
          path: '/',
          method: 'post'
        }
      ]
    }
  ]
}

Step 3: Create the Data Directory

Create a directory named data and an empty JSON file to store the ToDo items:

mkdir data
echo "{\"todo\": []}" > data/todos.json

Step 4: Create the Front-end

Create a directory named public and an index.html file inside it. This file will serve as the front-end for interacting with the ToDo app:




    </span>ToDo by Nolang<span class="nt">
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">


 class="container p-5">
    ToDo List
     class="table">
        
        
            Id
            Who
            What
            Done
        
        
         id="todolist">
    
    
         class="btn btn-danger float-end" onclick="clearTodos()">Clear
         class="border p-4 bg-light mt-4">
            Add ToDo
             id="who" class="form-control mb-2" placeholder="Who">
             id="what" class="form-control mb-2" placeholder="What">
             class="btn btn-primary float-end" onclick="addTodo()">Add

Step 5: Run the App

Start the Nolang app with the following command:

nolang app.json5

Step 6: Open the App in a Browser

Navigate to http://localhost:1000 in your web browser. You should be able to add, view, update, and delete todos using the interface provided in index.html.

Explanation of Nolang Scripts and JSON Payloads

Nolang app configuration defines the app schema, storage, and endpoints.

Schema Definition:
- $id: Identifier for the schema.
- type: The data type (object in this case).
- properties: The fields for the schema.
- required: Mandatory fields.
Storage Configuration:
- adapter: The storage method (JSON file in this case).
- path: The path to the storage file.
Endpoints:
- type: The type of endpoint (HTTP in this case).
- static: The directory for static files.
- port: The port number for the server.
- cors: Cross-origin resource sharing configuration.
- routes: The HTTP routes.

JSON Payloads for CRUD Operations

Create (C): Add a new todo item.

   {
     "$$schema": "todo",
     "$$header": {
       "action": "C",
       "debug": true
     },
     "who": "John Doe",
     "what": "Finish writing report",
     "done": false
   }

Read (R): Retrieve todo items.

   {
     "$$schema": "todo",
     "$$header": {
       "action": "R",
       "debug": true
     }
   }

Update (U): Update a todo item.

   {
     "$$schema": "todo",
     "$$header": {
       "action": "U",
       "debug": true,
       "filter": {
         "$$objid": "12345"
       }
     },
     "done": true
   }

Delete (D): Delete completed todo items.

   {
     "$$schema": "todo",
     "$$header": {
       "action": "D",
       "filter": {
         "done": true
       }
     }
   }

Conclusion

You have now created a simple ToDo app using Nolang. This tutorial covered setting up the project, defining the schema, configuring endpoints, and creating a basic front-end. Feel free to enhance the app by adding more features or customizing it to fit your needs.

If you have any questions or need further assistance, feel free to ask!