Category Archives: AngularJS

Building a Saas application

This is a brainstorming post where I will jot down the ideas to build a saas application. Before we start, we have to go to basics.

What is Saas?

Software as a service (Saas) is a software delivery model. In this model, the software is served through subscription service. Saas has been popular for more than a decade now. In fact, the sales of such software have skyrocketed that building simple software has become easier. From project management to ordering healthy food, we can get any of these services through software with a subscription.

Now what do we want to build and how do we start?

Of course, this is not an easy question to answer in a single post. You have to go through trial and errors to build a viable product that people will use it. But also what and who are we targeting as an audience. There are a lot of broader areas to think about to build a product. That would make the entire process to build a software way too complex. So where do we start? The eternal question still remains.

Human psychology over the years has progressed and helped technology to build a lot of cool products. With AI has been knocking on our doors, what we build today, will be obsolete in the next ten years. Based on your own experience, what I have found, is that you look into your own daily life. When you go for grocery shopping when you talk to your friends, coworkers. The moment, you feel frustrated anything that is not in your control, that’s where you have something to build on.

I know it sounds ridiculously easy to write here in the post, but not easy when you are living life. What I am trying to point is, look at problems you or other human faces and if that problem can be solved through software, you have got a viable product idea.  At every pain point, the problem is an idea to build a product. Simple example – Elon Musk was driving on LA roads, he was caught in traffic which didn’t move for a long time. How do we improve our traffic? With increasing cars and population, this is almost going to be a nightmare in the future. He realized the problem and started a company called The Boring Company that would build underground tunnels for handling traffic.

If you are like me who works in a software company, it is easy to see through this dilemma to build a solution that can help you and other developers equally. But in a larger context, you can always go through different Saas services and hear the feedback from those services’ users. Any negative feedback is your path to build a product. Assuming we got the idea to build a Saas application, so how do we proceed further?

Post-idea discussion

Once we have a solid idea, we can think about building a minimum viable product which gives customers a chance to explore the product with minimum fuss. Less complex the product for customers to use intuitively, better will be their experiences and happier they will be to recommend your product to others.

You should work to create a minimum viable design. This will be an alpha version of the product. Getting alpha version out of the door in minimum time will give you a better idea of where to focus on scaling the product in the future. This will also save time and money.

Technology and Frameworks

Once we have the initial design of the minimum product, we can think of what technology and framework to use. What kind of infrastructure to use? Considering the less expensive options, the cloud is very popular to use to build a Saas product. This reduces the management of infrastructure while giving high availability and scalability. Amazon, Google, and Microsoft all these companies offer cloud solutions to build your application. Also if you want to scale your application in the future for data-intensive, the cloud is the best option to handle all kinds of load.

For backend, there are different frameworks available based on C#, Python, or Java. Since I have worked on Java, I vouch for Spring which offers a lot of flexibility and ease to add a lot of code easily. Of course, there is a learning curve if you have never used spring before. For the database, we have two major options, one is SQL based database or NoSQL. If it is data-intensive application, NoSQL makes more sense.

On the frontend side, angularjs offers a lot of ease to build a modern user interface to interact with backend.

Conclusion

There are a lot of other factors we have not considered in this discussion especially related to the performance and health of the application. Also, we didn’t discuss any major approaches to build the application. I hope this brainstorming post will give readers an idea of a saas application that they can build.

If you have an idea of saas application and you intend to build it, let me know how it goes for you. You can subscribe to my blog.

 

How To: AngularJS User Interface to CRUD Spring Boot REST API

In this post, we will add an user interface using AngularJS to the REST api we created here.

Controller for home page

First we will create a controller in Spring Boot rest API to call our home page. All the requests that will come to web server, will go through this controller and the controller will return a home page for the request based on path.

MainController.java will look like below:

package com.betterjavacode.benefits.controller;

import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MainController 
{

     public static final Logger LOGGER = LogManager.getLogger(MainController.class);

     @RequestMapping(value = "/home", method = RequestMethod.GET)
     public String homepage() 
     {
         LOGGER.info(" Enter >> homepage() ");
         return "index";
     }
}

Any request coming to https://localhost:8443/home will return a page from index.html.

Create a Home Page

Now, we will create an index.html page. We will also be using angular JS framework as part of this home page so that we can build a single page application. If you are not aware of Angular JS or new to this framework, you can read about it AngularJS. One thing to remember while creating this page is a directory structure. Lot of issues that arise to create html pages are because of directory structure. Directory structure will look like below:

directorystructure

The home page index.html page is under main/resources/templates/ directory and it looks like below

<html ng-app="benefitApp">

<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Benefit Application</title>

<script>document.write('<base href="' + document.location + '" />');</script>

<link rel="stylesheet" href="/css/bootstrap.css" />

<script src="https://code.angularjs.org/1.6.1/angular.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-resource.js"></script>

<script type="text/javascript" src="./js/app.js"></script>

</head>

<body ng-controller="MainCtrl">

Hello {{name}}!
<div>
<ul class="menu">
<li><a href="listUser">user-list</a></li>
<li><a href="listCompany">company-list</a></li>
</ul>
<div ng-view="ng-view"></div>
</div>
</body></html>

Home page shows that this is an angular app with name benefitApp. This also declares a controller MainCtrl with an angular view. Important to see we are importing angular.js, angular-route.js and angular-resource.js modules. Click on user-list or company-list, will show list of users and list of companies respectively.

Create a controller

Now to handle the controller (MainCtrl), we added in index.html, we will add app.js which will declare the controller. This javascript file also contains config data to handle all the routing of pages. That’s why we will be importing “ngRoute” and “ngResource” angular modules.

var app = angular.module('benefitApp', ['ngRoute','ngResource']);

var app = angular.module('benefitApp', ['ngRoute','ngResource']);
app.controller('MainCtrl', function($scope, $routeParams) {

$scope.name = 'World';

$scope.$routeParams = $routeParams;

})

 

Through out the interaction on web pages, we will be using different controllers for editing user or company information and creating user or company. The same file app.js will also handle routing of these pages which is shown below

app.config(function($routeProvider,$locationProvider) {

$locationProvider.html5Mode(true);

$routeProvider.when('/listUser',

{templateUrl: 'views/listUser.html', controller: 'userController'});

$routeProvider.when('/listCompany',

{templateUrl: 'views/listCompany.html', controller: 'companyController'});

$routeProvider .when('/editUser/:userId',

{ templateUrl : 'views/editUser.html' }) ;

$routeProvider .when('/editCompany/:companyId',

{ templateUrl : 'views/editCompany.html' }) ;

$routeProvider.when('/createUser',

{templateUrl:'views/createUser.html'});

$routeProvider.when('/createCompany',

{templateUrl:'views/createCompany.html'});

});

Rest of the code showing all controllers’ logic has been skipped for post purposes. It is available on github repository.

UserController or CompanyController are calling rest apis which we have built using Spring boot.

Demo

Now build the code and run our embedded tomcat webserver. Fire up the url https://localhost:8443/home – it will look like below:

Home Page created with AngularJS for CRUD REST API

Click on user-list and it will show list of users inside the same page as below:

List of User Page created with AngularJS

Click on edit button and we will see a form to update user information:

edituserpage

Download –

In this post, we showed how to create a simple CRUD user interface using angular JS for Spring Boot REST API. The code for this is available in repository