9 min read

(For more resources related to this topic, see here.)

Server Side Dart

Creating a server in Dart is surprisingly simple, once the asynchronous programming with Futures is understood.

Starting a server

To start a server run the main function in todo_mongodb/todo_server_dartling_mongodb/bin/server.dart.

void main() {
  db = new TodoDb();
  db.open().then((_) {
    start();
  });
}

An access to a MongoDB database is prepared in the TodoDb constructor in todo_mongodb/todo_server_dartling_mongodb/lib/persistence/mongodb.dart. The database is opened, then the server is started.

start() {
  HttpServer.bind(HOST, PORT)
    .then((server) {
      server.listen((HttpRequest request) {
        switch (request.method) {
          case "GET":
            handleGet(request);
            break;
          case 'POST':
            handlePost(request);
            break;
          case 'OPTIONS':
            handleOptions(request);
            break;
          default: defaultHandler(request);
        }
      });
    })
    .catchError(print)
    .whenComplete(() => print('Server at http://$HOST:$PORT'));
}

If there are no problems, the following message is displayed in the console of Dart Editor.

Server at http://127.0.0.1:8080

The server accepts either GET or POST requests.

void handleGet(HttpRequest request) {
  HttpResponse res = request.response;
  print('${request.method}: ${request.uri.path}');

  addCorsHeaders(res);
  res.headers.contentType =
      new ContentType("application", "json", charset: 'utf-8');
  List<Map> jsonList = db.tasks.toJson();
  String jsonString = convert.JSON.encode(jsonList);
  print('JSON list in GET: ${jsonList}');
  res.write(jsonString);
  res.close();
}

The server, through a GET request, sends to a client CORS headers to allow a browser to send requests to different servers.

void handlePost(HttpRequest request) {
  print('${request.method}: ${request.uri.path}');
  request.listen((List<int> buffer) {
    var jsonString = new String.fromCharCodes(buffer);
    List<Map> jsonList = convert.JSON.decode(jsonString);
    print('JSON list in POST: ${jsonList}');
    _integrateDataFromClient(jsonList);
  },
  onError: print);
}

The POST request integrates data from a client to the model.

_integrateDataFromClient(List<Map> jsonList) {
  var clientTasks = new Tasks.fromJson(db.tasks.concept, jsonList);
  var serverTaskList = db.tasks.toList();
  for (var serverTask in serverTaskList) {
    var clientTask =
        clientTasks.singleWhereAttributeId('title', serverTask.title);
    if (clientTask == null) {
      new RemoveAction(db.session, db.tasks, serverTask).doit();
    }
  }
  for (var clientTask in clientTasks) {
    var serverTask =
        db.tasks.singleWhereAttributeId('title', clientTask.title);
    if (serverTask != null) {
      if (serverTask.updated.millisecondsSinceEpoch <
          clientTask.updated.millisecondsSinceEpoch) {
        new SetAttributeAction(
          db.session, serverTask, 'completed', clientTask.completed)
.doit();
      }
    } else {
      new AddAction(db.session, db.tasks, clientTask).doit();
    }
  }
}

MongoDB database

MongoDB is used to load all data from the database into the model of Dartling. In general, there may be more than one domain in a repository of Dartling. Also, there may be more than one model in a domain. A model has concepts with attributes and relationships between concepts. The TodoMVC model has only one concept – Task and no relationships.

A model in Dartling may also be considered as an in-memory graphical database. It has actions, action pre and post validations, error handling, select data views, view update propagations, reaction events, transactions, sessions with the trans(action) past, so that undos and redos on the model may be done. You can add, remove, update, validate, find, select and order data. Actions or transactions may be used to support unrestricted undos and redos in a domain session. A transaction is an action that contains other actions. The domain allows any object to react to actions in its models.

The empty Dartling model is prepared in the TodoDb constructor.

  TodoDb() {
    var repo = new TodoRepo();
    domain = repo.getDomainModels('Todo');
    domain.startActionReaction(this);
    session = domain.newSession();
    model = domain.getModelEntries('Mvc');
    tasks = model.tasks;
  }

It is in the open method that the data are loaded into the model.

  Future open() {
    Completer completer = new Completer();
    db = new Db('${DEFAULT_URI}${DB_NAME}');
    db.open().then((_) {
      taskCollection = new TaskCollection(this);
      taskCollection.load().then((_) {
        completer.complete();
      });
    }).catchError(print);
    return completer.future;
  }

In the MongoDB database there is one collection of tasks, where each task is a JSON document. This collection is defined in the TaskCollection class in mongodb.dart. The load method in this class transfers tasks from the database to the model.

  Future load() {
    Completer completer = new Completer();
    dbTasks.find().toList().then((taskList) {
      taskList.forEach((taskMap) {
        var task = new Task.fromDb(todo.tasks.concept, taskMap);
        todo.tasks.add(task);
      });
      completer.complete();
    }).catchError(print);
    return completer.future;
  }

There is only one concept in the model. Thus, the concept is entry and its entities are tasks (of the Tasks class). After the data are loaded, only the tasks entities may be used.

The TodoDb class implements ActionReactionApi of Dartling. A reaction to an action in the model is defined in the react method of the TodoDb class.

  react(ActionApi action) {
    if (action is AddAction) {
      taskCollection.insert(action.entity);
    } else if (action is RemoveAction) {
      taskCollection.delete(action.entity);
    } else if (action is SetAttributeAction) {
      taskCollection.update(action.entity);
    }
  }
}

Tasks are inserted, deleted and updated in the mongoDB database in the following methods of the TaskCollection class.

  Future<Task> insert(Task task) {
    var completer = new Completer();
    var taskMap = task.toDb();
    dbTasks.insert(taskMap).then((_) {
      print('inserted task: ${task.title}');
      completer.complete();
    }).catchError(print);
    return completer.future;
  }

  Future<Task> delete(Task task) {
    var completer = new Completer();
    var taskMap = task.toDb();
    dbTasks.remove(taskMap).then((_) {
      print('removed task: ${task.title}');
      completer.complete();
    }).catchError(print);
    return completer.future;
  }

  Future<Task> update(Task task) {
    var completer = new Completer();
    var taskMap = task.toDb();
    dbTasks.update({"title": taskMap['title']}, taskMap).then((_) {
      print('updated task: ${task.title}');
      completer.complete();
    }).catchError(print);
    return completer.future;
  }
}

Dartling tasks

The TodoMVC model is designed in Model Concepts.

The graphical model is transformed into a JSON document.

{
    "width":990,
    "height":580,
    "boxes":[
        {
            "name":"Task",
            "entry":true,
            "x":85,
            "y":67,
            "width":80,
            "height":80,
            "items":[
                {
                    "sequence":10,
                    "name":"title",
                    "category":"identifier",
                    "type":"String",
                    "init":"",
                    "essential":true,
                    "sensitive":false
                },
                {
                    "sequence":20,
                    "name":"completed",
                    "category":"required",
                    "type":"bool",
                    "init":"false",
                    "essential":true,
                    "sensitive":false
                },
                {
                    "sequence":30,
                    "name":"updated",
                    "category":"required",
                    "type":"DateTime",
                    "init":"now",
                    "essential":false,
                    "sensitive":false
                }
            ]
        }
    ],
    "lines":[
        
    ]
}

This JSON document is used in dartling_gen to generate the model in Dart. The lib/gen and lib/todo folders contain the generated model. The gen folder contains the generic code that should not be changed by a programmer. The todo folder contains the specific code that may be changed by a programmer. The specific code has Task and Tasks classes that are augmented by some specific code.

class Task extends TaskGen {

  Task(Concept concept) : super(concept);

  Task.withId(Concept concept, String title) :
    super.withId(concept, title);

  // begin: added by hand
  Task.fromDb(Concept concept, Map value): super(concept) {
    title = value['title'];
    completed = value['completed'];
    updated = value['updated'];
  }

  Task.fromJson(Concept concept, Map value): super(concept) {
    title = value['title'];
    completed = value['completed'] == 'true' ? true : false;
    updated = DateTime.parse(value['updated']);
  }

  bool get left => !completed;
  bool get generate =>
      title.contains('generate') ? true : false;

  Map toDb() {
    return {
      'title': title,
      'completed': completed,
      'updated': updated
    };
  }

  bool preSetAttribute(String name, Object value) {
    bool validation = super.preSetAttribute(name, value);
    if (name == 'title') {
      String title = value;
      if (validation) {
        validation = title.trim() != '';
        if (!validation) {
          var error = new ValidationError('pre');
          error.message = 'The title should not be empty.';
          errors.add(error);
        }
      }
      if (validation) {
        validation = title.length <= 64;
        if (!validation) {
          var error = new ValidationError('pre');
          error.message =
              'The "${title}" title should not be longer than 64
 characters.';
              errors.add(error);
        }
      }
    }
    return validation;
  }
  // end: added by hand
}

class Tasks extends TasksGen {

  Tasks(Concept concept) : super(concept);

  // begin: added by hand
  Tasks.fromJson(Concept concept, List<Map> jsonList): super(concept) {
    for (var taskMap in jsonList) {
      add(new Task.fromJson(concept, taskMap));
    }
  }

  Tasks get completed => selectWhere((task) => task.completed);
  Tasks get left => selectWhere((task) => task.left);

  Task findByTitleId(String title) {
    return singleWhereId(new Id(concept)..setAttribute('title', title));
  }
  // end: added by hand
}

Client Side Dart

The Todo web application may be run in the Dartium virtual machine within the Dart Editor, or as a JavaScript application run in any modern browser (todo_mongodb/todo_client_idb/web/app.html).

The client application has both the model in todo_mongodb/todo_client_idb/lib/model and the view of the model in todo_mongodb/todo_client_idb/lib/view.

The model has two Dart files, idb.dart for IndexedDB and model.dart for plain objects created from scratch without any model framework such as Dartling. The view is done in DOM.

The application delegates the use of a local storage to the IndexedDB. A user of the application communicates with the Dart server by two buttons. The To server button sends local data to the server, while the From server button brings changes to the local data from the MongoDB database.

    ButtonElement toServer = querySelector('#to-server');
    toServer.onClick.listen((MouseEvent e) {
      var request = new HttpRequest();
      request.onReadyStateChange.listen((_) {
        if (request.readyState == HttpRequest.DONE &&
            request.status == 200) {
          serverResponse = 'Server: ' + request.responseText;
        } else if (request.readyState == HttpRequest.DONE &&
            request.status == 0) {
          // Status is 0...most likely the server isn't running.
          serverResponse = 'No server';
        }
      });

      var url = 'http://127.0.0.1:8080';
      request.open('POST', url);
      request.send(_tasksStore.tasks.toJsonString());
    });

    ButtonElement fromServer = querySelector('#from-server');
    fromServer.onClick.listen((MouseEvent e) {
      var request = new HttpRequest();
      request.onReadyStateChange.listen((_) {
        if (request.readyState == HttpRequest.DONE &&
            request.status == 200) {
          String jsonString = request.responseText;
          serverResponse = 'Server: ' + request.responseText;
          if (jsonString != '') {
            List<Map> jsonList = JSON.decode(jsonString);
            print('JSON list from the server: ${jsonList}');
            _tasksStore.loadDataFromServer(jsonList)
              .then((_) {
                var tasks = _tasksStore.tasks;
                _clearElements();
                loadElements(tasks);
              })
              .catchError((e) {
                print('error in loading data into IndexedDB from JSON
 list');
              });
          }
        } else if (request.readyState == HttpRequest.DONE &&
            request.status == 0) {
          // Status is 0...most likely the server isn't running.
          serverResponse = 'No server';
        }
      });

      var url = 'http://127.0.0.1:8080';
      request.open('GET', url);
      request.send('update-me');
    });>

Server data are loaded in the loadDataFromServer method of the TasksStore class in todo_mongodb/todo_client_idb/lib/model/idb.dart.

  Future loadDataFromServer(List<Map> jsonList) {
    Completer completer = new Completer();
    Tasks integratedTasks = _integrateDataFromServer(jsonList);
    clear()
      .then((_) {
        int count = 0;
        for (Task task in integratedTasks) {
          addTask(task)
            .then((_) {
              if (++count == integratedTasks.length) {
                completer.complete();
              }
            });
        }
      });
    return completer.future;
  }

The server data are integrated into the local data by the _integrateDataFromServer method of the TasksStore class.

  Tasks _integrateDataFromServer(List<Map> jsonList) {
    var serverTasks = new Tasks.fromJson(jsonList);
    var clientTasks = tasks.copy();
    var clientTaskList = clientTasks.toList();
    for (var clientTask in clientTaskList) {
      if (!serverTasks.contains(clientTask.title)) {
        clientTasks.remove(clientTask);
      }
    }
    for (var serverTask in serverTasks) {
      if (clientTasks.contains(serverTask.title)) {
        var clientTask = clientTasks.find(serverTask.title);
        clientTask.completed = serverTask.completed;
        clientTask.updated = serverTask.updated;
      } else {
        clientTasks.add(serverTask);
      }
    }
    return clientTasks;
  }

Summary

The TodoMVC client-server application is developed in Dart. The web application is done in DOM with local data from a simple model stored in an IndexedDB database. The local data are sent to the server as a JSON document. Data from the server are received also as a JSON document. Both on a client and on the server, data are integrated in the model. The server uses the Dartling domain framework for its model. The model is stored in the MongoDB database. The action events from Dartling are used to propagate changes from the model to the database.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here