Tech Junkie Blog - Real World Tutorials, Happy Coding!: AngularJS SPA: Building The Bank Application JavaScript Objects (Business Entities)

Wednesday, January 9, 2019

AngularJS SPA: Building The Bank Application JavaScript Objects (Business Entities)

Up until this point all we did was take care of the plumbing, MongoDB for the database, AngularJS as the application framework, expressJS for hosting, and Heroku as deployment infrastructure in the cloud. Whew! It feels like I am spitting out development hastags and buzzwords.  But, you know what they always say "it takes a village to build a SPA application".  Well they didn't say that, but they should! Who are they anyways?  The software engineer gods?  Or god forbid the mythical "full stack developers!!  Fear them the full stack developers!  But I don't know who they are, you ask.  Well they are just awesome! God says.  They are 10x!  Wow 10x, you said to yourself.  They must be good!  Hahaha  I just love the buzzwords.  It's entertaining.  I would never say I am a full stack developer.  I am just a developer who knows a lot of stuff.

In this post we are going to take a step back and start working on the actual application and take the plumbing out of the equation for a while.

As with any application at the center of it all is the question.  What does the application do?
Since our application is banking application, we will create objects that are in the banking domain.  This is called a domain driven design.  We are not going to follow the domain driven design (DDD) to a T, but we will follow the spirit of it.



First things first, we need a bank.  Follow the steps below to create the bank object.

  1. Open the "ACMEBank" application with your favorite IDE
  2. Add the file bank.js to the models folder 











3. Add an IFFE to the file

(function () {
}());

4. Now let's create the bank object

(function () {
    function Bank(name, user) {
        this.Name = name;
        this.User= user;
    }
}());

You might be wondering why we created the Bank object with a function.  The reason we did that is because we basically created a constructor that we initiate with constructor arguments. The object has two properties, the name of the bank and the user that is accessing the application. Now I could create another file to create a user object but since it's such a simple object I am going to put it in the same file as the bank.js file. The User object just contains the name of the user and the accounts that belongs to the user.

Here is the code to create the User object

(function () {
    function User(name, accounts) {
        this.Name = name;
        this.Accounts = accounts;
    }

    function Bank(name, user) {
        this.Name = name;
        this.User= user;
    }
}());

5. Now it's time to create the account object, create a file call account.js in the models folder.
(function () {
    function Account(balance, type) {
        this.balance = balance;
        this.type = type;
    }

    Account.prototype.deposit = function (d) {

        this.balance = this.balance + d;
        return this.balance;
    }

    Account.prototype.withdrawal = function (w) {
        this.balance = this.balance - w;
        return this.balance;
    }
}());

The account object basically has the balance, and type properties as well as the deposit and withdrawal method in it's prototype. If you need more information on JavaScript prototypes you visit this post.

Now lets say we have another kind of account class which is the Premium (high earners) account class this class can make withdrawal, and deposit like the regular account.  But it can do more like transfer to another account.  Also it pays a 5% bonus on the balance every time he/she makes a deposit or on account creation.  Even though this is probably way too generous, I just wanted to simulate a business rule that you might encounter in real life.  Therefore, programmatically we want to inherit from the base class which in this case is the Account class. This is how we would inherit from the Account class and build a Premium class.  First let's create the "inherits" function which will inherit the prototype object from the Account class to the Premium class.


        function inherits(baseClass, childClass) {
            childClass.prototype = Object.create(baseClass.prototype);
        }

As you can see its not really a real inheritance, it's more of a simulation of an inheritance.  We cloned or copy the prototype object of the Account class, which in this case is the base class.  Think of the base class the original copy, and Premium class the clone.  But the clone can have it's own methods after it has been cloned.  Kind of like the T1000 in Terminator.

Now let's create the Premium class

        function Premium(balance,type) {
            this.balance = balance + (balance*.05);
            this.type = type;
        }

As you can see the T1000, I mean the Premium class has it's own way of figuring out the balance with a 5% bonus.

Now let's call the "inherits" function to inherit from the Account class.

        inherits(Account, Premium);

Now that we inherited from the Account class we are going to add the "transfer" function that is exclusive to the Premium class

        Premium.prototype.transfer = function (from, to, amount) {
            from.balance -= amount;
            to.balance += amount;
        }

In its current state the deposit function does not add the 5% to the deposit because it's using the Account's inherited functions.  To get the correct balance for the Premium class we can override the deposit and function.  Like this

        Premium.prototype.deposit = function (d) {
            this.balance = this.balance + d;
            this.balance = this.balance + (this.balance * .05);
            return this.balance;

        }

Here is the full code for the account.js file

(function () {
    function Account(balance, type) {
        this.balance = balance;
        this.type = type;
    }

    Account.prototype.deposit = function (d) {

        this.balance = this.balance + d;
        return this.balance;
    }

    Account.prototype.withdrawal = function (w) {
        this.balance = this.balance - w;
        return this.balance;
    }


    function inherits(baseClass, childClass) {
        childClass.prototype = Object.create(baseClass.prototype);
    }

    function Premium(balance, type) {
        this.balance = balance + (balance * .05);
        this.type = type;
    }


    inherits(Account, Premium);

    Premium.prototype.transfer = function (from, to, amount) {
        from.balance -= amount;
        to.balance += amount;
        from.rebalance();
        to.rebalance();
    }

    Premium.prototype.deposit = function (d) {
        this.balance = this.balance + d;
        this.balance = this.balance + (this.balance * .05);
        return this.balance;

    }
    Premium.prototype.rebalance = function()
    {
       this.balance +=  this.balance * .05;
    }
}());

Note: I've added the rebalance prototype method to the Premium object as another way to resolve the %5 bonus for the Premium deposits. You can learn more about JavaScript inheritance in this post.

Your models folder should look like this













Similar Posts:

Previous: AngularJS SPA: Install RoboMongo GUI for MongoDB

No comments:

Post a Comment

Search This Blog