Generating Web application code from JSON sample data

Keywords: Javascript ASP.NET html5 JSON

catalogue

introduce

How does it work?

Create data model

Rendering code

BootGen SDK

Framework plug-in

Web application

In this article, you will understand the internal working principle of BootGen, a code generator that can create ASP.NET 5 and Vue 3 applications based on JSON datasets.

introduce

{
  "users": [
    {
      "userName": "Jon",
      "email": "jon@arbuckle.com",
      "pets": [
        {
          "name": "Garfield",
          "species": "cat"
        },
        {
          "name": "Odie",
          "species": "dog"
        }
      ]
    }
  ]
}

Imagine you start writing Web applications for pet owners. The above JSON code is your initial data set. How do you start? Before you can start implementing the popular features you envision for the project, you need to complete some basic work.

For the database, you will need two tables, users and pets.   You will need a seed to populate the database with the initial dataset.   For the back end, you will need data services and controllers of the user and pet classes. For the front end, you will need a REST API client and state management. Some basic viewers and editors will certainly come in handy. Oh, don't forget authentication!

Now that you've done all this, you can start working on the meaningful parts. But how much work does this "basic work" need to do? Well, if the stack you choose is ASP.NET 5 with Vue 3 and TypeScript, it will be 1677 lines of code in 26 files. This amount of code does not include empty items created using the dotnet new and vue create commands.

The goal of the BootGen project is to get JSON dataset s and generate the foundation for your project, saving you hours or even days of work.

You can already bootgen.com Tried!

How does it work?

The focus of this article is to discuss how BootGen works at the bottom. If you just want to use the tool and enjoy your free time, you don't need to know this.

Create data model

There are two important steps in the generation process. First, the data model should be built based on the data set. The following classes can be used to create a data model.

public class ClassModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Property> Properties { get; }
}

public class Property
{
    public string Name { get; set; }
    public BuiltInType BuiltInType { get; set; }
    public bool IsCollection { get; set; }
    public ClassModel Class { get; set; }
}

public enum BuiltInType { String, Int, Float, Bool, DateTime, Object }

These are simplified from what we actually use in the SDK. If you are interested in a complete metamodel, you can GitHub - BootGen/BootGenSDK: Customizable code generator library for rapid application prototyping. Find it.

If we assume that the collection name is always plural and everything else is always singular, we can easily infer the name of the class from the JSON attribute name. Pluralize.NET Enables us to easily find the plural or singular forms of specific words.

For each JSON attribute, we will create an attribute in our model. If it has a primitive type (string,   integer,   float,   boolean, or date time), then we complete it in one step. However, if it is an object, then we continue recursion: we will check whether a class model with the same name already exists. If so, we will extend it. If not, we will create a new one.

Rendering code

To render the code, we use a method called Scriban Template language. The simplest template for generating C# entity classes is as follows:

public class {{ class.name }}
{
    {{~ for property in class.properties ~}}
    public {{ get_type property }} {{ property.name }} { get; set; }
    {{~ end ~}}
}

class   Variables are objects of type ClassModel. In Scriban, each property and function name is converted to snake case. get_type is a function call implemented in C# as follows:

public static string GetType(Property property)
{
   string baseType = GetBaseType(property);
   if (property.IsCollection)
       return $"List<{baseType}>";
   return baseType;
}

public static string GetBaseType(Property property)
{
   switch (property.BuiltInType)
   {
       case BuiltInType.Bool:
           return "bool";
       case BuiltInType.Float:
           return "float";
       case BuiltInType.String:
           return "string";
       case BuiltInType.DateTime:
           return "DateTime";
       case BuiltInType.Object:
           return property.Class.Name;
       default:
           return "int";
   }
}

Different GetType functions were used when generating TypeScript code.

Project structure

BootGen SDK

This is the core library that handles building data models from JSON input and rendering Scriban templates.

Framework plug-in

Support for different frameworks is implemented as plug-ins. At present, the following plug-ins are implemented:

A framework plug-in includes:

  • A pile of Scriban templates
  • Some static files (basically empty projects for a given framework)
  • A profile

We do our best to keep the plug-in interface clean so that we can easily support other frameworks in the future.

Web application

This is deployed to bootgen.com Web application. A convenient way to use BootGen.

https://www.codeproject.com/Tips/5309774/Generating-Web-Application-Code-from-JSON-Sample-D

Posted by phpfre@k* on Mon, 11 Oct 2021 12:38:39 -0700