NETCore2Blockly

What it does

NETCore2Blockly generates Blockly blocks for each of your controller actions.

Demo at https://netcoreblockly.herokuapp.com/ ( play with the links from the bottom)

Demo Video at https://www.youtube.com/watch?v=GptkNWjmCzk

Sample Project is TestBlocklyHtml from this repository

Contributors welcome! - please send email to or see issues tab.

How to install NETCore2Blockly in a .NET Core 3.1 WebAPI / MVC application in 3 steps + run application

Step 1:

Install https://www.nuget.org/packages/NetCore2Blockly/ by running the following command in the Package Manager Console:

Install-Package NetCore2Blockly

Step 2:

Modify Startup.cs by adding

public void ConfigureServices(IServiceCollection services)
        {
            //last line
            services.AddBlockly();
        }
public void Configure(IApplicationBuilder app, IWebHostEnvironment env){
        //if you plan to use as html, do not forget app.UseStaticFiles
        //last line
        app.UseBlockly(); 
}

Step 3:

To see the UI , please add

public void Configure(IApplicationBuilder app, IWebHostEnvironment env){
       
       app.UseBlocklyUI(); // you can customize (with BlocklyUIOptions argument )header name, start blocks, others... 
       //you can add  storage like local storage or sqlite 
       //app.UseBlocklyLocalStorage();
       //app.UseBlocklySqliteStorage() ; // other nuget package
       app.UseBlockly();
}

Run application

Run the application from VS and browse to /blockly.html

That's all !( 3 steps + run )

Advanced usage remote data

For Remote Swagger ( CORS activated )

app.UseBlocklySwagger("petstore", "https://petstore.swagger.io/v2/swagger.json")

You can see demo at https://netcoreblockly.herokuapp.com/ ,colapse category local function, expand category Swagger.

See link 25 from https://netcoreblockly.herokuapp.com/

For ODATA ( local or remote - CORS activated if remote)

app.UseBlocklyOData("OdataV4", "https://services.odata.org/TripPinRESTierService/");

You can see demo at https://netcoreblockly.herokuapp.com/ ,colapse category local function, expand category OData.

For GraphQL (local or remote - CORS activated if remote)- Work In progress

app.UseBlocklyGraphQL("localGraphql", "/graphql");

You can see demo at https://netcoreblockly.herokuapp.com/ ,colapse category local function, expand category GraphQL.

See link 32,33 from https://netcoreblockly.herokuapp.com/

For authentication - JSON Web Tokens

See links 22 for JWT and 31 for Auth0 from https://netcoreblockly.herokuapp.com/

Also, it works with Active Directory enabled - see Authentication category.

Adding your blocks

Please see how I add CustomBlocksForUI below

app.UseBlocklyUI(new BlocklyUIOptions()
            {
                StartBlocks = StartBlocksForUI,
                HeaderName = "Demo test for .NET Core WebAPI To Blockly ( demo site with Blockly +  swaggers + odata loaded + graphql)",
                CustomBlocks = CustomBlocksForUI
            });