DEV Community: Muhammad Umar Al Fajar

Workflow Engine Integration in .NET 8

Muhammad Umar Al Fajar — Mon, 25 Mar 2024 06:24:55 +0000

In general, a workflow is a series of activities required to complete a task. In a business context, a workflow refers to a systematic work process where tasks completed by one party are passed on to another party for further action according to certain agreed-upon procedures within the company.

This workflow can be implemented in .NET using various available tools. Some examples of these tools that already support .NET include Workflow Engine and Elsaworkflows. On this occasion, we will implement Workflow using Workflow Engine as an example.

Workflow Engine Integration

To begin integrating .NET with Workflow Engine, make sure that all of the following technologies are installed on your computer:

The steps involved in integrating .NET with Workflow Engine are as follows:

Create a blank solution

After the project was created, add new project by right click in the solution then Add > New Project. Choose Class Library and name it WorkflowLib.

Add another project with the same step but now choose ASP.NET Core Web App (Model-View-Controller), name it DesignerApp.

Database Preparation

Download the .NET Core persistence provided by Workflow Engine here.
Extract the zip file in the folder WorkflowEngine.NET-12.1.1 > Providers > OptimaJet.Workflow.DbPersistence.
After the folder is extracted, there will be a folder named SQL.
Back to the solution, create a new folder called SQL.
Add the files to the SQL folder by right-clicking on Solution > Add > Existing Item. Then select all the files in the SQL folder from the previously extracted folder.

Before executing the SQL file, first create a new database in MS SQL Server and name it WorkflowEngineDb.
After that connect to the database.

Then fill in the Server Name and Database Name according to what you have created previously. If the database is not found, try changing Trust Server Certificate to True.

Back to Visual Studio 2022, open the file CreatePersistanceObjects.sql and click the following button.

After the file was executed, a display like this will appear:

Package Preparation

Before starting the integration, there are some packages that need to be added, as follows:

WorkflowEngine.NETCore-Core
WorkflowEngine.NETCore-ProviderForMSSQL

To add the packages above, you can use the following method:

Open Tools > NuGet Package Manager > Manage NuGet Packages for Solution.
Select Browse and enter the keyword according to the package name above.
Don't forget to check both projects that were created earlier when installing the package.

WorkflowRuntime Initiation

Open the WorkflowLib project.
Create a new class named WorkflowInit.cs.
Add and adjust the following code according to the project you created.



using System.Xml.Linq;
using OptimaJet.Workflow.Core.Builder;
using OptimaJet.Workflow.Core.Runtime;
using OptimaJet.Workflow.DbPersistence;

namespace WorkflowLib
{
    public static class WorkflowInit
    {
        [Obsolete]
        private static readonly Lazy<WorkflowRuntime> LazyRuntime = new Lazy<WorkflowRuntime>(InitWorkflowRuntime);

        [Obsolete]
        public static WorkflowRuntime Runtime
        {
            get { return LazyRuntime.Value; }
        }

        public static string ConnectionString { get; set; }

        [Obsolete]
        private static WorkflowRuntime InitWorkflowRuntime()
        {
            // TODO Uncomment for .NET Framework if you don't set ConnectionString externally.
            //ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

            if (string.IsNullOrEmpty(ConnectionString))
            {
                throw new Exception("Please init ConnectionString before calling the Runtime!");
            }
            // TODO If you have a license key, you have to register it here
            //WorkflowRuntime.RegisterLicense("your license key text");

            // TODO If you are using database different from SQL Server you have to use different persistence provider here.
            var dbProvider = new MSSQLProvider(ConnectionString);

            var builder = new WorkflowBuilder<XElement>(
                dbProvider,
                new OptimaJet.Workflow.Core.Parser.XmlWorkflowParser(),
                dbProvider
            ).WithDefaultCache();

            var runtime = new WorkflowRuntime()
                .WithBuilder(builder)
                .WithPersistenceProvider(dbProvider)
                .EnableCodeActions()
                .SwitchAutoUpdateSchemeBeforeGetAvailableCommandsOn()
                .AsSingleServer();

            var plugin = new OptimaJet.Workflow.Plugins.BasicPlugin();
            // Settings for SendEmail actions
            // plugin.Setting_Mailserver = "smtp.yourserver.com";
            // plugin.Setting_MailserverPort = 25;
            // plugin.Setting_MailserverFrom = "from@yourserver.com";
            // plugin.Setting_MailserverLogin = "login@yourserver.com";
            // plugin.Setting_MailserverPassword = "pass";
            // plugin.Setting_MailserverSsl = true;
            runtime.WithPlugin(plugin);

            // events subscription
            runtime.ProcessActivityChanged += (sender, args) => { };
            runtime.ProcessStatusChanged += (sender, args) => { };
            // TODO If you have planned to use Code Actions functionality that required references to external assemblies
            // you have to register them here
            //runtime.RegisterAssemblyForCodeActions(Assembly.GetAssembly(typeof(SomeTypeFromMyAssembly)));

            // starts the WorkflowRuntime
            // TODO If you have planned use Timers the best way to start WorkflowRuntime is somewhere outside
            // of this function in Global.asax for example
            runtime.Start();

            return runtime;
        }
    }
}

Connect the MVC with Lib

Open the DesignerApp
Right click on the project, then Add > Project Reference
Check the WorkflowLib and click OK.

Project Designer Initiation

Open the DesignerApp project.
Right-click on the Controllers folder. Select Add > Controller and name it Designer. After the Controller is added, a new class named DesignerController.cs will appear.
Open DesignerController.cs.
Right-click on the View() method and select Add View.
Then select Razor View - Empty. Then name it Index.cshtml.
After the View is added, a new folder and file will appear in the Views folder.
Open the Index.cshtml file and add the following code.



@model dynamic
@{
    ViewBag.Title = "Designer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/css/workflowdesigner.min.css" rel="stylesheet" type="text/css" />
<script src="~/js/workflowdesigner.min.js" type="text/javascript"></script>
<script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>

<form action="" id="uploadform" method="post" enctype="multipart/form-data" onsubmit="tmp()" style="padding-bottom: 8px;">
    <input type="file" name="uploadFile" id="uploadFile" style="display:none" onchange="javascript: UploadScheme(this);">
</form>

<div id="wfdesigner" style="min-height:600px; max-width: 1200px;"></div>

<script>
    var QueryString = function () {
        // This function is anonymous, is executed immediately and
        // the return value is assigned to QueryString!
        var query_string = {};
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            // If first entry with this name
            if (typeof query_string[pair[0]] === "undefined") {
                query_string[pair[0]] = pair[1];
                // If second entry with this name
            } else if (typeof query_string[pair[0]] === "string") {
                var arr = [query_string[pair[0]], pair[1]];
                query_string[pair[0]] = arr;
                // If third or later entry with this name
            } else {
                query_string[pair[0]].push(pair[1]);
            }
        }
        return query_string;
    }();
    //Load settings
    var schemecode = QueryString.code ? QueryString.code : 'SimpleWF';
    var processid = QueryString.processid;
    var graphwidth = 1200;
    var graphminheight = 600;
    var graphheight = graphminheight;
    var wfdesigner = undefined;

    //Recreate designer object
    function wfdesignerRedraw() {
        var data;
        if (wfdesigner != undefined) {
            wfdesigner.destroy();
        }
        wfdesigner = new WorkflowDesigner({
            name: 'simpledesigner',
            apiurl: '/Designer/API',
            renderTo: 'wfdesigner',
            templatefolder: '/templates/',
            graphwidth: graphwidth,
            graphheight: graphheight
        });
        if (data == undefined) {
            var isreadonly = false;
            if (processid != undefined && processid != '')
                isreadonly = true;
            var p = { schemecode: schemecode, processid: processid, readonly: isreadonly };
            if (wfdesigner.exists(p))
                wfdesigner.load(p);
            else
                wfdesigner.create(schemecode);
        }
        else {
            wfdesigner.data = data;
            wfdesigner.render();
        }
    }
    wfdesignerRedraw();
    //Adjusts the size of the designer window
    $(window).resize(function () {
        if (window.wfResizeTimer) {
            clearTimeout(window.wfResizeTimer);
            window.wfResizeTimer = undefined;
        }
        window.wfResizeTimer = setTimeout(function () {
            var w = $(window).width();
            var h = $(window).height();
            if (w > 300)
                graphwidth = w - 40;
            if (h > 300)
                graphheight = h - 250;
            if (graphheight < graphminheight)
                graphheight = graphminheight;
            wfdesigner.resize(graphwidth, graphheight);
        }, 150);
    });
    $(window).resize();



    $(window).resize();
    //Add Control functions

    function DownloadScheme() {
        wfdesigner.downloadscheme();
    }
    function DownloadSchemeBPMN() {
        wfdesigner.downloadschemeBPMN();
    }
    var selectSchemeType;
    function SelectScheme(type) {
        if (type)
            selectSchemeType = type;
        var file = $('#uploadFile');
        file.trigger('click');
    }
    function UploadScheme(form) {
        if (form.value == "")
            return;
        if (selectSchemeType == "bpmn") {
            wfdesigner.uploadschemeBPMN($('#uploadform')[0], function () {
                wfdesigner.autoarrangement();
                alert('The file is uploaded!');
            });
        }
        else {
            wfdesigner.uploadscheme($('#uploadform')[0], function () {
                alert('The file is uploaded!');
            });
        }
    }
    function OnSave() {
        wfdesigner.schemecode = schemecode;
        var err = wfdesigner.validate();
        if (err != undefined && err.length > 0) {
            alert(err);
        }
        else {
            wfdesigner.save(function () {
                alert('The scheme is saved!');
            });
        }
    }

    function OnNew() {
        wfdesigner.create();
    }

</script>

In addition, add and adjust the following code to the DesignerController.cs class.



using System.Collections.Specialized;
using System.Text;
using Microsoft.AspNetCore.Mvc;
using OptimaJet.Workflow;
using WorkflowLib;

namespace DesignerApp.Controllers
{
    public class DesignerController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [Obsolete]
        public async Task<IActionResult> Api()
        {
            Stream? filestream = null;
            var isPost = Request.Method.Equals("POST", StringComparison.OrdinalIgnoreCase);
            if (isPost && Request.Form.Files != null && Request.Form.Files.Count > 0)
                filestream = Request.Form.Files[0].OpenReadStream();

            var pars = new NameValueCollection();
            foreach (var q in Request.Query)
            {
                pars.Add(q.Key, q.Value.First());
            }


            if (isPost)
            {
                var parsKeys = pars.AllKeys;
                //foreach (var key in Request.Form.AllKeys)
                foreach (string key in Request.Form.Keys)
                {
                    if (!parsKeys.Contains(key))
                    {
                        pars.Add(key, Request.Form[key]);
                    }
                }
            }

            (string res, bool hasError) = await WorkflowInit.Runtime.DesignerAPIAsync(pars, filestream);

            var operation = pars["operation"]?.ToLower();
            if (operation == "downloadscheme" && !hasError)
                return File(Encoding.UTF8.GetBytes(res), "text/xml");
            else if (operation == "downloadschemebpmn" && !hasError)
                return File(UTF8Encoding.UTF8.GetBytes(res), "text/xml");

            return Content(res);
        }
    }
}

After that, download the workflowdesigner.min.css and workflowdesigner.min.js files from GitHub. Then copy and paste the two files into the project in the css and js folders as follows.

Also add and adjust the site.css file to be as follows to decorate the designer view.



html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
}

a {
    outline: none;
    text-decoration: none;
}

.ui {
    padding: 8px 15px;
}

.ui.primary.button,
.ui.primary.button:focus {
    background: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    font-weight: normal;
    color: #2c2c2c;
}

    .ui.primary.button:hover {
        background: #c9c9c9;
    }

    .ui.primary.button:active {
        background: #b5b5b5;
    }

.ui.secondary.button,
.ui.secondary.button:focus {
    background: #FFFFFF;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    font-weight: normal;
    color: #4d4d4d;
}

.ui.secondary.button:hover {
    background: #dbdbdb;
    color: #2c2c2c;
}

.ui.secondary.button:active {
    background: #dbdbdb;
    color: #2c2c2c;
}

Connect to Database

Open appsettings.json in the root project DesignerApp.
Add ConnectionStrings according to the database on each device, for example as follows.



{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "ConnectionStrings": {
    "DefaultConnection": "data source=mumarual\\SQLEXPRESS;initial catalog=WorkflowEngineDb;trusted_connection=true;TrustServerCertificate=true"
  },
  "AllowedHosts": "*"
}

Then add the following code to Program.cs to set the default ConnectionString for the WorkflowInit.cs class.

WorkflowInit.ConnectionString = app.Configuration.GetConnectionString("DefaultConnection");

Run The Project

Before running the project, to make it easier to access the designer, we will add a new button to the application's navbar.

Open the Views > Shared folder. Select _Layout.cshtml.
Add the Designer controller to the list in the navbar as follows.



<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Designer" asp-action="Index">Workflow Designer</a>
</li>

Then try running the project by pressing the play button in Visual Studio 2022.
Don't forget to set the startup project as follows to only run DesignerApp.

Select the Workflow Designer menu on the navbar and the Designer is ready to use.

GitHub

Create ASP.Net Core Application with React and TypeScript

Muhammad Umar Al Fajar — Tue, 19 Mar 2024 01:04:22 +0000

This tutorial will walk you through the steps of developing a web application using ASP.NET Core, React, and Typescript. We will start with the initial setup in Visual Studio and then move on to implementing React and using Typescript. This tutorial is intended for beginners who are new to these technologies.

Before we start, make sure to have these installed:

I recommend using Visual Studio Community 2022 because it's free and the latest version (as of this writing).
You'll also need the .NET SDK 8.0. This provides the tools and libraries needed to build and run .NET applications.
Additionally, Node.js (which includes NPM and NPX) will be required for working with front-end technologies.

Create ASP.Net Core and React Projects

We will start by using ASP.NET Core and React to create a web-based application. Here are the steps to create a project using Visual Studio 2022:

Open Visual Studio 2022, then select Create a new project.
After that, search for and select React and ASP.NET Core.
Select Next, adjust .NET to version 8.

After creating the project, you will see two folders in your solution: client and server. The client folder contains the React application, and the server folder contains the ASP.NET Core API.
To run the project, press the Play button in Visual Studio. This will start both the client and server applications.
You should see two browsers open: one for the API and one for the user interface. The API browser will display a list of endpoints that you can use to interact with the application. The user interface browser will display the React application.

if you find an error like this:



[vite] http proxy error at /weatherforecast:
AggregateError

This happens because the process of running the client application is faster than the server so when the client requests data to the server, the server will not respond.

Once the server application running, refresh the client application.

Add TypeScript to an existing ASP.NET Core app in Visual Studio

Install TypeScript

In the Solution Explorer, right-click on the solution name or the project name and select Manage NuGet Packages.
Search for and select Microsoft.Typescript.MSBuild. Make sure the project is checked in the right pane and click Install.

Create a TypeScript configuration file

Right-click on the project name. Click Add > New Item.
Select TypeScript JSON Configuration File. Click Add. If you don't see any options, click Show All Templates and search for Typescript Json Configuration File.
Open tsconfig.json and replace the code with the following: ```

{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "wwwroot/js"
},
"include": [
"scripts/*/"
]
}


####Create a TypeScript file

 * Right-click on the project name > Add > New Folder. Name the folder scripts.
 * Right-click on the scripts folder > Add > New Item > select TypeScript file. Name the file app.ts.

####Add code to the TypeScript file

function TSButton() {
let name: string = "Fred";
document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}

interface Person {
firstName: string;
lastName: string;
}

function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");


 * Customize: Feel free to change the code as you like. Try modifying the greeter function or changing the values used to create the Student object.
 * IntelliSense: Visual Studio provides IntelliSense for TypeScript. If you remove "lastName" in the greeter function, for example, and press Ctrl + space, you will see suggestions based on the "Person" interface.

####Modify Index.cshtml
 * Open Views -> Home -> Index.cshtml. Add the following at the end of the file:

<br>

    Click Me


####Modify _Layout.cshtml
 * Open Views -> Shared -> _Layout.cshtml. Add the following before @await RenderSectionAsync("Scripts", required: false)
`<script src="~/js/app.js"></script>`

####Build and Run

 * Save all changes.
 * In the toolbar, click Build > Build Solution.
 * Look in the wwwroot/js folder. You should see two files: app.js and app.js.map. This indicates the build was successful.
 * Press F5 to run the program.

Learning GraphQL: A Practical Approach

Muhammad Umar Al Fajar — Wed, 10 Jan 2024 10:42:43 +0000

In this article, we will embark on a practical journey to learn GraphQL. We will set up a simple Apollo Server that serves static data using GraphQL. This approach allows us to focus on the core concepts of GraphQL without the added complexity of a database.

We will start by setting up our project and installing the necessary dependencies. Then, we will define our GraphQL schema and resolvers. Finally, we will start our server and test it by running some GraphQL queries.

This hands-on approach is designed to provide a solid foundation in GraphQL. By the end of this article, you will have a working Apollo Server and a clear understanding of how to define and use GraphQL schemas and resolvers. Let's dive in and start learning GraphQL!

Step 1: Setting up the project

First, we need to set up our project and install the necessary dependencies. We will be using npm (Node Package Manager) to manage our dependencies.

npm init -y
npm install express graphql apollo-server

In your package.json file, you should have the following dependencies:

"dependencies": {
  "apollo-server": "^3.13.0",
  "graphql": "^16.8.1",
  "express": "~4.16.1"
}

If you don't have these dependencies, you can install them by running the following command in your terminal:
npm install apollo-server graphql

Step 2: Defining the GraphQL schema

Next, we need to define our GraphQL schema. The schema defines the types of data that can be queried through our GraphQL server. In our case, we have a Book type, Author type, and a Query type in our schema/schema.js file:

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Book {
    title: String!
    author: Author!
  }

  type Author {
    name: String!
    books: [Book]
  }

  type Query {
    books: [Book]
    authors: [Author]
  }
`;

module.exports = typeDefs;

The Book type represents a book with a title and an author. The Author type represents an author with a name and a list of books. The Query type defines the queries that can be made to our server. In this case, we have a books query that returns an array of books and an authors query that returns an array of authors.

Step 3: Defining the resolvers

After defining our schema, we need to define our resolvers. The resolvers specify how the data for each type is fetched. In our resolvers/resolvers.js file, we have defined a resolver for the books query and the authors query:

const authors = [
  {
    name: 'J.K. Rowling',
    books: [
      {
        title: 'Harry Potter and the Chamber of Secrets',
      },
      {
        title: 'Harry Potter and the Philosopher\'s Stone',
      },
    ],
  },
  {
    name: 'Michael Crichton',
    books: [
      {
        title: 'Jurassic Park',
      },
      {
        title: 'The Lost World',
      },
    ],
  },
];

const resolvers = {
  Query: {
    books: () => authors.flatMap(author => author.books),
    authors: () => authors,
  },
  Book: {
    author: (book) => authors.find(author => author.books.some(b => b.title === book.title)),
  },
  Author: {
    books: (author) => author.books,
  },
};

module.exports = resolvers;

The books resolver returns an array of static book data.

Step 4: Starting the server

Finally, we need to start our server. We do this in our app.js file:

const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema/schema');
const resolvers = require('./resolvers/resolvers');

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

We create an instance of ApolloServer with our schema and resolvers, and then start the server by calling the listen method. The server will be listening on the default port (4000) and will log a message to the console when it's ready.

That's it! You now have a working Apollo Server that serves static data using GraphQL. You can test your server by opening your browser and navigating to http://localhost:4000. This will open the Apollo Server playground, where you can run GraphQL queries to test your server. Here are some example queries you can run:

# Query for all books with their authors
query {
  books {
    title
    author {
      name
    }
  }
}

# Query for all authors with their books
query {
  authors {
    name
    books {
      title
    }
  }
}