top of page

documentation

Magic Code Generator v1.0.6 Release candidate

This section presents the documentation for the Magic Code Generator V1.0.6 Release Candidate

Magic Code Generator v1.0 RC

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 thousands of lines of code. It does the tedious task and heavy lifting 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.

 

Magic Code Generator allows you to create both a microservice (server-side) connected to a database and an application (client-side)  while using the same model or from 2 separate models.

To be notified of new published versions, get a tutorial and get access to a dashbord container Please register with your email address.

Notice for Registered Users

Registered Users who have provided an email address will get access to a dashboard component container. New features of the Dashboard for Magic Code include:

  • Automatically set the dashboard menu for dashboard's embedded components (see illustration below)

  • A container environment to structure components.

  • Generate both the client side dashboard an the backend we service with a single declarative file

  • Advanced tutorials on model creation, microservices and templates 

  • Templates for model creation 

If you are not Registered yet and wish to receive notifications on the latest features, new releases, additional packages, or to download additional code generation scenarios please contact us at: Community@magiccodegenerator.com.

 

The current Visual Studio Code extension package includes a code generation scenario to create both a client application and a microservice interfacing with MongoDB. Information on additional Code Generators for different environments and improved features are provided upon request. We are working on an SQL pack fin addition to MongoDB.  

Server Side

Currently, 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

Currently Magic code supports Angular as an application framework. Other application frameworks such as Vue or react are in development and will be released shortly. Rendition frameworks complement the application frameworks. Bootstrap and Material are currently  supported. Mobile frameworks such as nativeScript or Ionic are in development. If you are interested in those frameworks please contact us at community@magiccodegenerator.com.

 

There are prerequisites to work with Magic Code Generator. You will need :

​

Visual studio Code

NodeJs

Angular

​

​

​

​

1.How to create a new model

Models are defined as javascript objects.

 

  • First you need to 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.

Microservice models include three parts:

  • A server definition

  • A service definition¸

  • One or several collection definition.

 

Web application models include three parts:

  • A server definition (the http server hosting the application code).

  • An application definition.

  • One or several collection definition.

 

Mixed models include 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

Currently we provide two (2) code generator scenarios. Other packages and new updates are in development and will be announced shortly. We suggest that you register to receive NewPack Notifications(we promise No spamming) 

​

  • mongoose-mongoDB: this will create a mongoose+mongoDB microservice.

  • Bootstrap-Angular: this will create an angular client web application.

Additional packages supporting SQL, React or Ionic and new updates are in development can be obtained from magiccodegenerator.com. 

 

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.

1- The service section used to create a microservice

 

The service section is used to create a microservice running on a nodeJS server. The microservice 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.

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:

4   - The collection section to define data structure

Property      Description

name                 collection name

model                model object defining data structure

methods            REST methods  activation - deactivation

views                 Generated client views

 

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 }

Pre and post process class

 

In the server-side service, before data is stored 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.

Client side Applications

At the moment, the sole framework supported by Magic Code is Angular but we will support React as this framework is currently in advanced development. These two frameworks are structuring web applications running in browsers. Rendition frameworks like Boostrap or Material provide adaptation to different device form format, they provide "responsive behavior". Thus, code generated by Magic Code automatically construct web applications based on:

 

  • Web application frameworks like Angular, React or Vue. Actually, only Angular is supported by Magic Code but React is a work in progress.

  • Rendition frameworks like Bootstrap or Material offering a responsive behavior and a display style.

 

A package is a set comprised of a client-side web application frameworks and a server-side web service. Thus, with a single model (an mdl file), both a web application and a backend service code is generated. Some package are provided with the Visual studio code extension, others are available only to registered users.

 

Generated web applications are displayed, after the generation process, in a visual studio code IDE. To run the web application, the following operations are required:

 

npm init: to download the module dependencies.

ng serve: to run and render the web application in a browser.

 

The base application framework such as angular or react should be previously installed.

​

The following web applications packages are either in advanced development with the team or already available:

 

angular_bootstrap: Magic Code generates forms and lists (i.e tables) based on Angular and Bootstrap. Forms and lists are in the form of angular components. (provided with the visual studio extension.)

angular_bootstrap_dashboard: Is it the same package as previously mentioned but the generated code is aggregated in a dashboard acting as a component container to better visualize results. (provided to registered users only).

angular_material: The code is identical to the angular_bootstrap package but, in that case, bootstrap is replaced by Material. angular_material_dashboard: identical to the bootstrap package but, this time, based on material as rendition framework.

Client-side angular_bootstrap Web application

This package allows to generate forms and lists (i.e tables) from a Magic Code model. It is based, as its name indicates, on Angular and Bootstrap. Form's layout is vertical but can be modified to better suits the needs of the application.

Client-side angular_bootstrap_dashboard

This package generates Forms and lists (i.e tables) based on angular and Bootstrap but also aggregate the produced components in a dashboard container component. Forms and lists routes are automatically included in a menu facilitating navigation. In the next version of this package, we will add additional parameters to configure the dashboard

Server-side web services

Code generated on the server side are based on the REST protocol. These services support Basic CRUD (create, read, update, delete) operations. They are best packaged as microservice component even if fat applications can be created. However, microservices are more scalable and easier to maintain. A dockerfile is automatically generated and incorporated into the final set of files composing the project. This makes it easier to package the service in a container.

 

Currently Magic Code generates code for the following ORM:

 

  • Mongoose: A well known ORM used to interact with the mongoDB databases.

  • Sequelize: A well known ORM used to interact with several SQL databases (Postgres, mySQL, MariaDB, SQLLite, MsSQL)

​

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 )

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

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

bottom of page