Magic Code Generator

Magic Code is a low code development platform

The Magic code generator is a model centric system producing code from a model definition. A few lines of model definition can produce several hundred if not thousand lines of code. It does the boring task for you by automatically writing repetitive code both on the client side and the server side.

• On the server side as a micrososervice providing a CRUD API to several type of database (Relational DB, document DB, Graph DB, etc.).
• On the client side as a web application.

Both a microservice (server side) connected to a database and an application (client side) can be generated by the same model or from 2 separate models.

To be informed of new releases and additional packages, or to download additional generator scenarios go to: magiccodegenerator.com

This Visual Studio Code extension includes both a MongoDB microservice code generator (server), and an Angular/bootstrap code code generator (client) as samples of what it can do. More code generators for different environments like, for example, Angular/Material are provided by magiccodegenerator.com.

server side

At the moment, Magic Code supports only nodeJS based tools such as express (REST calls dispatching), Mongoose (ORM for MongoDB), Sequelize (for SQL servers), typeORM (for SQL Servers).

client side

Presently, Magic code supports only Angular as application framework. Other application frameworks such as Vue or react are work in progress. rendition frameworks complements the application frameworks. Actually Bootstrap and Material are supported. Mobile frameworks such as nativeScript or Ionic are a work in progress.

Prerequisites

• Visual studio Code
• NodeJs
• Angular

How to create a new model

Models are defined as javascript objects.

• Create a new file with an ".mdl" extension, this indicates it is a model from which code is generated
• on the newly created editor, type CTRL + Space" (windows) or type command + Space (Mac)
• fill properties content indicated by "< >" or modify existing one.

See how short video below

Microservice models comprise three parts:

• A server definition
• One service definition¸
• One or several collection definition.

Web application models comprise three parts

• A server definition (the http server hosting the application code).
• One application definition.
• One or several collection definition.

Mixed models comprise 4 parts

A model file may contain for a definition for a web service and a definition for a microservice. This can be specified when a microservice is hooked to a user interface. In that case a model file will include:

• a server definition
• a service definition
• an application definition
• one or several collection definition

Code generator

Actually only two (2) code generator scenarios are provided, other packages and new updates can be obtained from magiccodegenerator.com:

• mongoose-mongoDB: this will create a mongoose+mongoDB microservice.
• Bootstrap-Angular client web application.

To generate code from a model specification, clic on the right mouse button over the model's file name in the file directory and select Magic Code Generator as illustrated in the animation below.

Model

As illustrated in the model below, the directory path where the code will be geerated is specified in the "Start" function.

import {Model, Start} from 'magicCode.js';

 
@Model([
   {
       // Server specifications
       server: {
           path: '/',              // Main server entry point
           type: 'NodeJS',         // server type: nodeJS, Apache
           host: 'localhost',      // host name
           port: 5000,             // server port
           url: 'http://localhost',// main server endpoint
           description: '<Include here your description>',
           cryptoKey: '<Include here your application encryption key',
       }
   },
   {
       // service specifications
       service: {
           path: '/',        // Service endpoint
           name: 'myClass',  // WARNING this property name should be identical to the class name and in 'Start' statement.
           type: 'mongoose', // Template used to generate code. Could be: mongoose(server), nativescript(client)
           connector: '<Include here your MongoDB dataBase connector>'
       }
   },
   {
        application: {
            type: 'angular_bootstrap',
        }
   },
   {
      collections: [
          {
              // Collection specifications
              // you can define more than one collection per model
              // each collection is defined as an object in the Array of objects
              endpoint: 'testclass',          // change the endpoint to yours
              name: 'testClass',     // collection name
              model: {
                      id: { type: String, label:'id', required: true},
                      name: {type:String, label: 'Name', index: true, required: true}
              },
              // Indicate with true or false if a method is included in the generated code
              methods: {
                  get: true,
                  put: true,
                  post: true,
                  delete: true
              },
              views: {
                  form: true,
                  list: true
              }
        }
      ]
    }
])
class myClass {} // Change for your class name 
Start(myClass,'d:/testMagicCode'); // parameters: class name, folder to contain the generated files

Each model file should contain at least these mandatory sections:

• a server section
• either a service or application section, or both
• a collections section containing one or several collection data definition.

All REST calls are received by the index.js file (Dispatcher) defined in the server section. At the moment, only nodejs and express.js are supported as a request dispatcher.

Dispatched REST calls are sent to the class.js or class.ts file. generated from the service section. «Application developers can add a pre process and post process executed code in the addon.js or addon.ts_ file.

The server section

This section is used to define the type of microservice host. At the moment only nodejs is supported, but in the future more host like nginx or Apache will be supported.

 // Server specifications
       server: {
           path: '/',              // Main server entry point
           type: 'NodeJS',         // server type: nodeJS, Apache
           host: 'localhost',      // host name
           port: 5000,             // server port
           url: 'http://localhost',// Reference entry point for client applications.
           description: '<Include here your description>',
       }

The service section used to create a microservice

The service section is used to create a microservice running on a nodeJS server. The micrososervice endpoint react to HTTP verbs to create the following functions:

• HTTP GET: to get a particular data set from a collection
• HTTP PUT: to update a particular data set in a collection.
• HTTP POST: to store a particular data set in a collection.
• HTTP DELETE: to delete a particular data set in a collection.

The generated code is using express.js as request dispatcher-middleware.

Pre and post process class

Before data are store through an ODM middleware, pre and post process function are invoked in the class.

• the preProcess function is invoked before data are stored in the collection. This allow to perform any processing on the data before storing it.
• the postProcess function is invoked after data are stored in the collection. This allows to perform some action after data are stored in the collection. For example to send an email to collaborators or send an event to an external process.

Service section definition

The service section specifies how the microservice connects to a backend database.

1 - MongoDB microservice model definition

This package is included in the current installation.

 {
    // service specifications
    service: {
        path: '/',        
        name: 'myClass', // should be identical to the class name  
        type: 'mongoose',
        connector: '<Include here your dataBase connector>'
    }

  /* 
  The name property in the service definition above
  should be identical to the class name below (in this example: myClass):
  */
  class myClass {} // class name
  Start(myClass,'d:/testMagicCode'); // class name, destination directory

The MongoDB microservice connection requires only these properties.

The model definition is specified as metadata introduced by a @model statement. It is followed by a class statement. Then the start statement takes as parameters in the destination directory. More specifically, inside the target directory, in the server directory:

• index.js: the main entry point with a dispatcher based on express.js
• classes.js: a file edited by developers to handle pre and post processes.
• addon.js: a file created only once in the project. Contains a template for a pre and post process.
• model.js: the collection data model used by the Object Model Middleware (Ex: Mongoose for Mongo DB servers, typeORM or Sequilize for SQL servers)).
• package.json: a file containing module dependencies for the project.
• readme.md : a documentation file about the generated code.

2 - typeORM microservice model definition

This package is currently in test, it should be available soon.

 {
    // service specifications
    service: {
        path: '/',        
        name: 'myClass', // should be identical to the class name  
        type: 'typeorm', // should be typeorm
        port: '1234', // port to communicate with SQL server
        connector: '<Include here your dataBase connector>'
    }

  /* 
  The name property in the service definition above
  should be identical to the class name below (in this example: myClass):
  */
  class myClass {} // class name
  Start(myClass,'d:/testMagicCode'); // class name, destination directory

The typeORM microservice connection requires only these properties.

The model definition is specified as metadata introduced by a @model statement. It is followed by a class statement. Then the start statement takes as parameters:

• the class name
• the output file path where the code is to be stored.

The following files are created by magic Code:

• index.js: the main entry point with a dispatcher based on express.js
• ormconfig.js: a file containing the typeorm configurations
• classes.js: a file edited by developers to handle pre and post processes.
• addon.js: a file created only once in the project. Contains a template for a pre and post process.
• model.js: the collection data model used by the Object Model Middleware (Ex: Mongoose for Mongo DB servers, typeORM or Sequilize for SQL servers)).
• package.json: a file containing module dependencies for the project.
• readme.md : a documentation file about the generated code.

3 - Sequelize microservice model definition

This package is currently in test, it should be available soon.

 {
    // service specifications
    service: {
        path: '/',        
        name: 'myClass', // should be identical to the class name  
        type: 'sequelize', // should be sequelize
        port: '1234', // port to communicate with SQL server
        connector: '<Include here your dataBase connector>'
    }

  /* 
  The name property in the service definition above
  should be identical to the class name below (in this example: myClass):
  */
  class myClass {} // class name
  Start(myClass,'d:/testMagicCode'); // class name, destination directory

The Sequelize microservice connection requires only these properties

The model definition is specified as metadata introduced by a @model statement. It is followed by a class statement. Then the start statement takes as parameters:

• the class name
• the output file path where the code is to be stored.

The following files are created by magic Code:

• index.js: the main entry point with a dispatcher based on express.js
• classes.js: a file edited by developers to handle pre and post processes.
• addon.js: a file created only once in the project. Contains a template for a pre and post process.
• model.js: the collection data model used to create the Object Model for Sequilize.
• package.json: a file containing module dependencies for the project.
• readme.md : a documentation file about the generated code.

The application section used to create a web application

Modern web applications stand on frameworks such as React, Angular, Vue, etc. and on display frameworks such as Material or Bootstrap.Display frameworks complement the application frameworks. Thus, in the Magic Code context, they come in pairs like, for example, angular-bootstrap, which is based on the Angular web application framework and Bootstrap as the display framework.

At the moment, Magic Code can generate only forms. List generation is a current work in progress.

Application section definition

The application section is defined as a javascript object and an example is illustrated below:

{
  application: {
    type: 'angular_bootstrap'
  }
},

Collection content model types

The model section is used to define the structure of each record in a collection. These types are valid

• String
• Number
• Date
• Boolean

String

Number

Date

Boolean

Copyright

Didier PH Martin 2017-2021