Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Magic Code GeneratorNew to Visual Studio Code? Get it now.

Magic Code Generator

netfolder

|
5,203 installs
| (2) | Free
generate code from data models with these environment/languages: javascript, typescript, angular, bootstrap, material, nativescript, ionic, node, REST Microservice, Web application, typeORM, Sequelize, Firebase, SQL, MongoDB, Mongoose
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Marketplace Installs Rating

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.

 

model

 

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

model

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.

demo

 

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.

  service  

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>',
       }
Property Description
path the main entry point to the server. Usually it is '/'.
type the host type. Actually can only be nodejs
host the host name
port the port nodeJS listen for incoming REST calls
url The reference URL for client applications
description A short description of the microserveice

 


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.

Property Description
path REST service endpoint
name Service name. CAUTION: this property value sould be identical to the class definition and the class parameter in the start function (see previous model example above).
type mongoose. it is an Object Definition Model running in NodeJS to access a MongoDB database.
connector a string used to connect to a mongoDB database

 

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.

Property Description
path REST service endpoint
name Service name. CAUTION: this property value sould be identical to the class definition and the class parameter in the start function (see previous model example ).
type mongoose. It is an Object Definition Model running in NodeJS to access a MongoDB database.
port a socket port used to communicate with the SQL database
connector a string used to connect to a SQL database

 

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

Property Description
path REST service endpoint
name Service name. CAUTION: this property value sould be identical to the class definition and the class parameter in the start function (see previous model example ).
type sequelize It is an Object Definition Model running in NodeJS to access a SQL database.
connector a string used to connect to a mongoDB database

 

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'
  }
},
property Description
type Specify an application-display framework pair, like for example, angular_bootstrap. The convention being that the application frameowrk comes first and the display framework comes second. Both being connected with an underscore.

 

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

Property Description
type String type, example: {name: {type: String}
index Indicates if this property is used as an index, takes a value a boolean, example: { index: true }
unique indicates if this property has a unique value in an index, takes a boolean as value, example: {unique: true }

Number

property Description
type Number type, example: {type: Number }
index Indicates if this property is used as an index, takes a value a boolean, example: { index: true }
unique indicates if this property has a unique value in an index, takes a boolean as value, example: {unique: true }

Date

property description
type Number type, example: {type: Date }
index Indicates if this property is used as an index, takes a value a boolean, example: { index: true }
unique indicates if this property has a unique value in an index, takes a boolean as value, example: {unique: true }

Boolean

property description
type Boolean type, example: {type: Boolean }
index Indicates if this property is used as an index, takes a value a boolean, example: { index: true }
unique indicates if this property has a unique value in an index, takes a boolean as value, example: {unique: true }

Copyright

Didier PH Martin 2017-2021

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2019 Microsoft