Magic Code Generator

Magic Code is a low code development platform. It is a model-centric system producing imperative code from a declarative model definition. A few lines of a model definition can create several hundred if not a thousand lines of code. It does the tedious task for you by automatically writing repetitive code both on the client and the server sides.

• • On the server-side, a microservice provides a CRUD REST API to several types of databases (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 notified of new published versions, a tutorial and get access to a dashbord container go to the link below and register.

( 2022 May 16 ) - Registered users will get access to a dashboard component container. New features of Dashboard Magic Code:

• Automatically set the dashboard menu for dashboard's embedded components (see illustration below)
• A container environment to structure components.
• Generate both the client side dasboard an the backend we service with a single declarative file.
• A complete tutorial
• free to use in your projects

Otherwise, to be informed of new releases, additional packages, or to download additional code generation scenarios go to: Magic Code Web site

This Visual Studio Code extension package includes a code generation scenario to create both a client application and a microservice interfacing with MongoDB. More code generators for different environments and improved features are provided on:

magiccodegenerator.com.

server side

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

client side

Presently, Magic code supports only Angular as an application framework. Other application frameworks such as Vue or react are works in progress. Rendition frameworks complement 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

1. 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 empty file, type CTRL + Space" (windows) or type command + Space (Mac). this will display a "to be filled" model template.
• Fill the properties' content enclosed by "< >" or modify existing one.

See how short video below

Microservice models comprise three parts:

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

Web application models comprise three parts

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

Mixed models comprise 4 parts

A model file may contain 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

2. Generate Code

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: this will create an angular client web application.

To generate code from a model specification, click 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 generated is specified in the "Start" function

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

 
@Model([
   {
       // Server specifications
      server: {
          path: '/',  
          type: 'NodeJS',  
          host: 'localhost', 
          port: 5000, 
          url: 'http://localhost',
          cors: '*',
          description: '<Include here your description>',
          cryptoKey: '<Include here your application encryption key',
      }
   },
   {
      // service specifications
      service: {
          path: '/',
          name: 'myClass', 
          type: 'mongoose', 
          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', 
          name: 'testClass', 
          model: {
              id: { type: String, label:'id', required: true},
              name: {type:String, label: 'Name', index: true, required: true}
          },
          methods: {
              get: true,
              put: true,
              post: true,
              delete: true
          },
          views: {
              form: true,
              list: true
          }
        }
      ]
    }
])
class myClass {} 
Start(myClass,'d:/testMagicCode'); 

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.

1 - The server section

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

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

The server 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: '/',          
      type: 'NodeJS',        
      host: 'localhost',      
      port: 5000,            
      url: 'http://localhost',/
      cors: '*',       
      description: '<Include here your description>',
  }

2 - 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.

 {
  // service specifications
  service: {
      path: '/',        
      name: 'myClass', 
      type: 'typeorm', 
      port: '1234', 
      connector: '<Include here your dataBase connector>'
  }

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

3 - The application section used to create a web application

Modern web applications stand on frameworks such as React, Angular, Vue, etc., and 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 used as the display framework.

3 - Application section definition

The application section is defined as a javascript object as illustrated in the example below:

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

4 - The collection section to define data structure

 {
  // 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',
  name: 'testClass', 
  model: {
          id: { type: String, label:'id', required: true},
          name: {type:String, label: 'Name', index: true, required: true}
  },
  methods: {
      get: true,
      put: true,
      post: true,
      delete: true
  },
  views: {
      form: true,
      list: true
  }
}

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

Pre and post process class

In the server-side service, 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 allows 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.

1 - Mongoose (MongoDB) microservice model definition

This package is included in the current installation.

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

The current Mongoose version included in this Visual Studio Code extension is version 5.11.17 (see NPM mongoose ).

 {
    // 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 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 (SQL) microservice model definition

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

TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used with TypeScript and JavaScript (ES5, ES6, ES7, ES8). Its goal is to always support the latest JavaScript features and provide additional features that help you to develop any kind of application that uses databases - from small applications with a few tables to large scale enterprise applications with multiple databases.

TypeORM supports both Active Record and Data Mapper, unlike all other JavaScript ORMs currently in existence, which means you can write high quality, loosely coupled, scalable, maintainable applications the most productive way.

TypeORM is highly influenced by other ORMs, such as Hibernate, Doctrine and Entity Framework.

The current typeORM included in the package is version 0.2.31 (see: NPM typeORM )

 {
    // 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 (SQL) microservice model definition

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

Sequelize is a promise-based Node.js ORM tool for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more.

Sequelize follows Semantic Versioning and supports Node v10 and above.

New to Sequelize? Take a look at the Tutorials and Guides. You might also be interested in the API Reference.

The current release in this package is version 6.5.0 (see NPM sequelize )

You can find the detailed changelog here.

 {
    // 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
        database: 'mysql', // can be pany of the supported databases
        connector: '<Include here your dataBase connector>',
        // specific sql database parameters
        pool: {
            max: 5,
            min: 0,
            acquire: 30000,
            idle: 10000
        }
    }

  /* 
  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.

Copyright

Didier PH Martin 2017-2022