Click here to Skip to main content
14,027,342 members
Click here to Skip to main content
Add your own
alternative version

Stats

11.5K views
10 bookmarked
Posted 22 Oct 2018
Licenced Apache

[TinyERP: SPA for Enterprise Application]Overview

, 3 Dec 2018
Rate this:
Please Sign up or sign in to vote.
TinyERP: SPA for Enterprise Application

Overview

Building the enterprise application was not an easy task for all of us, even if you are a big software company or professional outsourcing company.

We mostly have the same problem. Starting with the simple case and trying to reach the first release ASAP and not care much about infrastructure. Just think, I will improve later. Awesome, we delivered on time! Then the manager required more and more releases that needed to be delivered on time also. Yeah, no problem, we can do that. The first and second release were on time.

I definitely could say that the team and manager were proud of us and think that we did an amazing job.
Yeah, we succeeded in building the enterprise system which many other companies failed to do. For now, we start working on features for the third release and strongly believe that the team could also deliver on time along with promising plan, bonus from manager, ...

OK, time up, it was release date today, there was around 15% of work that needed to be completed. (Leader said) let me ask the manager to delay the delivery for us by "some days".

OK, no problem, the manager say. But after "some days", none in the team can say when the delivery could come and around 30% of work needed to be completed. What's up? Did we fail for this release?

The manager did the investigation, and found that the team was still working hard as usual but the productivity was lower and lower, they looked tired, most of the time was used for bug fixing, improvement tasks.
Doing the team meeting, we found that the infrastructure was not stable, so integrating a new feature usually produced a lot of bugs, needed more time and potential issues. So mostly, the team was struggling with issues, not much value added.

Building the enterprise application, we try to create the "runnable app". It was not enough. It needed to satisfy some requirements for EA, such as: maintainable, extensible, scalable, .....
I understood those problems, and created this series of videos "TinyERP: SPA for Enterprise Application". Hopefully, this can help you solve the above problems.

For now, let's start “The first look at TinyERP: SPA for Enterprise Application".

TinyERP follows Client-Server model.

Let's Start Client First

Check out the source code from Github at https://github.com/tranthanhtu0vn/TinyERP.git and check out develop branch.

Currently, there is no source code in the master branch and we also use "Branching Model" for each new section in this series of article. If you are not familiar with "Git & Branching Model", please have a look at "GIT & Branching Model".

If you open the client folder in Visual Studio code, this is the structure you will see:

I will explain in detail the role and format of each file/ folder in a later article. Now let's start to run the code by "installing missing node packages":

It takes a little time to download the necessary packages. Remember to move to "client" folder before running "npm install" command.

The source code was written in typescript format, so we need to compile and convert them to js, so the browser can understand:

There are many way to run the app, let's try with lite-server first:

Run on node:

Run on IIS:

Run on docker.

For this case, we need to compile the project in production mode and add into docker image. The steps are given below:

Check the "<root>/client/Dockerfile", there are some simple commands:

FROM microsoft/iis
RUN powershell -NoProfile -Command Remove-Item -Recurse C:\inetpub\wwwroot\*
WORKDIR /inetpub/wwwroot
COPY . .

from "<root>/client", run "npm run build" and wait for minutes:

Check "<root>/client/dist/" folder, this is where the compiled source code was located:

Currently, we have the draft version of deployment script for you to use during development time. more and more interesting things will come in the "Deployment" part in this series.

There are a few files in compiled code, some files were bundled together.

There some notes:

  • Delete web.config file in "<root>/client/dist". We need to install url-rewrite module to use this. Remove now.
  • Change development.mode to DeploymentMode.PROD in "<root>/src/apps/dashboard/config/appConfig.ts" before running "npm run build" command.

  • Uncomment js script references in "<root>/client/dist/index.html":

Copy Docfile from "<root>/client" to "<root>/client/dist" and run the following command. If you want to learn more about Docker, please search the appropriate course on "http://coaching.edu.vn" or articles on "http://tranthanhtu.vn":

Ok, we have the docker image for TinyERP (client) on your local, you can run and check it yourself. Let run the image by:

docker run -d -p 8000:80 --name tinyerp-running tinyerp-docker

Ok, now we can deploy TinyERP and run from docker images.

Those are pure static files (such as: html, css, images, ....) so you can deploy to any webserver (such as: Apache, Nginx, ....)

Until now, we can compile and run the client side, This was not enough for a SPA (web application) which uses Client-Server model.

TinyERP - API (Server side)

It is rather simple for the server side as below:

  • Create new WebApi project, please Google if you do not know how to do.
  • Add some basic nuget packages, such as: TinyERP.Common, TinyERP.Common.Email, TinyERP.Context.

  • Add new "appconfiguration" section into web.config/configuration/configSections:
    <configSections>
    	<!-- other sections -->
    	<section name="appconfiguration" type="TinyERP.Common.Configurations.Configuration, 
         TinyERP.Common" />
        <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler, log4net" />
      </configSections>
      <appconfiguration configSource="config\configuration.debug.config"></appconfiguration>
      <log4net debug="true">
        <appender name="RollingLogFileAppender" type="log4net.Appender.RollingFileAppender">
          <file value="logs\\log.txt" />
          <appendToFile value="true" />
          <rollingStyle value="Size" />
          <maxSizeRollBackups value="10" />
          <maximumFileSize value="10MB" />
          <staticLogFileName value="true" />
          <layout type="log4net.Layout.PatternLayout">
            <conversionPattern value="%-5p %d %5rms %-22.22c{1} %-18.18M - %m%n" />
          </layout>
        </appender>
        <root>
          <level value="DEBUG" />
          <appender-ref ref="RollingLogFileAppender" />
        </root>
      </log4net>
  • Exclude unnecessary C# code:

  • Change your Global.asax.cs as below:
    [assembly: Microsoft.Owin.OwinStartup(typeof(TinyERP.Api.WebApiApplication))]
    namespace TinyERP.Api
    {
        using TinyERP.Common.Application;
        using TinyERP.Common;
        public class WebApiApplication : BaseWebApiApplication
        {
            public WebApiApplication() : base() { }
            protected override ApplicationType GetApplicationType()
            {
                return ApplicationType.WebApi;
            }
    
            protected virtual void Application_Start()
            {
                this.application.OnApplicationStarted();
            }
        }
    }
  • Let's try to create the simple "Controllers/SystemController.cs" controller:
    namespace TinyERP.Api.Controllers
    {
        using System.Web.Http;
        using TinyERP.Common.MVC;
        using TinyERP.Common.MVC.Attributes;
    
        [System.Web.Http.RoutePrefix("api/system")]
        public class SystemController : BaseApiController
        {
            [Route("getMyName")]
            [HttpPost()]
            [ResponseWrapper()]
            public string GetMyName() {
                return "TU Tran";
            }
        }
    }
  • Check to make sure it works, use rest client and make the call to GetMyName method:

    • Ok, so cool. I can run both client and server part for TinyERP. is that enough for this part.
    • The answer is NO.
    • Oh my ghost, the article was long.
    • Do not worry, Just a small part, integrate client part with server part.
    • Ok, start please.

Integration Between Client and Server Part

Let's change "<root>/client/modules/support/pages/sayHello.ts":

import { Component } from "@angular/core";
import { BasePage } from "@app/common";
import {ISystemService, SystemService} from "../_share/services/systemService";
@Component({
    templateUrl: "src/modules/support/pages/sayHello.html"
})
export class SayHello extends BasePage<any>{
    public myName: string = "Tu Tran local";
    protected onReady(): void {
        let self = this;
        let service: ISystemService = new SystemService();
        service.getMyName().then((name: string) => {
            self.myName = name;
        });
    }
}

There are 2 new classe/ interface (ISystemService and SysteService). Let's add a new systemService.ts in "<root>/client/modules/support/pages/_share/services/":

import {Promise, BaseService, IConnector, IoCNames} from "@app/common";

export interface ISystemService{
    getMyName():Promise;
}
export class SystemService extends BaseService implements ISystemService{
    public getMyName():Promise{
        let uri="http://localhost:56622/api/system/getMyName";
        let connector: IConnector = window.ioc.resolve(IoCNames.IConnector);
        return connector.post(uri);
    }
}

In this code, we use hard value for "http://localhost:56622/api/system/getMyName" uri and replace this with appropriated uri on your local PC.

Let's run "npm run tsc" in "<root>/client" and "node node_server.js" after that. We have the result:

We can see in the picture, the browser makes the call to serverside with the uri "..../getMyName" (1) and receives the response from server (2), then it displays that value on the UI (3) even if the local variable was changed to "TU Tran local" (4).

So up to now, we can compile and run both client and server and they can also integrate each other.

For the sample code in this part, please checkout "feature/overview" from https://github.com/tranthanhtu0vn/TinyERP repository.

Other articles in the series:

For learning Angular2, I think you should follow the list of articles as below (click on the links to see detail page):

  • Overview: This will provide you an overview about Angular2 before you write your first code for your Angular2 application.
  • Routing: This will help us understand how Angular2 displays the page and passing parameters in-between.

Thank you for reading,

Note: Please like and share with your friends if you think this is a useful article, I would really appreciate it.

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

Share

About the Author

tranthanhtu.vn
Architect
Vietnam Vietnam
I have more than 8 years in web development for multiple types of applications (ERP, Education System, ...).
I usually organize training/ coaching on specified topic (such as: RESTful/ WebApi, Angular2, BEM, LESS, SASS, EF, NodeJs ....). Please contact me on Skype (tranthanhtu83) or email (contact@tranthanhtu.vn) if need.
For more information about me, Please visit http://www.tranthanhtu.vn/page/about-me

You may also be interested in...

Pro

Comments and Discussions

 
QuestionGoals Pin
humble.apprentice23-Oct-18 10:56
memberhumble.apprentice23-Oct-18 10:56 
AnswerRe: Goals Pin
tranthanhtu.vn23-Oct-18 19:21
professionaltranthanhtu.vn23-Oct-18 19:21 
Thank for your comment, humble.apprentice.
I agree that SAP is a good ERP, and this was not mean that all companies will use it. There are plenty of reasond for this:
- SAP can not cover 100% of their business. They need to add extra customization. This was costly.
- If the business changes, we need to ask SAP partners to change the app for us, this take time and another extra cost.
- The copany do not want to expose their secret of business to another. Imagine, if another company know how Apple make the IPhone in detail, What's happen?
- The company prefers to control their business, not just a compiled code.

So, this will arise necessary to build the in-hourse product. In my country (Vietnam), there are some financial companies from the EU open their development department here and re-build their application from scratch (around 60 developers).

If you look around your country, you can see there are number of companies build their own development team and make the software for themselve also.
And TinyERP can help you in this case. I intend to share how to solve the common problem when building the app as mention in "Overview" section of this article.
The common issue is, the cost to adapt new feature higher and higher, so what was happening behind, of-course there are some problem with the architecture we use, dependency between modules inside your app, we analyze the business in the wrong way, ..... and many more.
I agree that you can say, I do not worry about this, I have a development team with good knoledge about Microservices, CQRS, Azure, ..... Yeah, this is a good thing. but how to apply this knowledge into your product is another question? becuase we need to know how to integrate your technical knowledge into company business and create the value for you company.

This is my intention for TinyERP. Hope this can clarify your concern.
Best regards,
TU Tran
Technical Leader
Blog: http://tranthanhtu.vn
Mail: contact@tranthanhtu.vn
Mobile: +84 90 883 884 6
Skype: tranthanhtu83
CodeProject: @techcoaching
LinkedIn: tutrancoaching
Github: techcoaching

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190419.4 | Last Updated 3 Dec 2018
Article Copyright 2018 by tranthanhtu.vn
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid