Category Archives: AngularJS

Building a Saas application

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

What is a Saas?

Software as a service (Saas) is a software delivery model. In this model, software is served through subscription service. Saas has been popular for more than a decade now. In fact, the sales of such software has sky rocketed that building a simple software has become easier. From project management to ordering a healthy food, we can get any of these services through software with 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. Lot of times, there are lot of trial and errors you have to go through to build a viable product that people will use it. But also what and who are we targeting as an audience. There are lot of broader areas to think 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 lot of cool products. With AI has been knocking on our doors, what we build today, will be obsolete in next ten years. Based on own experience, what I have found, is that 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 the life. What I am trying to point is, look at problems you or other human face and if that problem can be solved through a software, you have got a viable product idea.  Every pain point, problem is an idea to build a product. Simple example – Elon Musk was driving on LA roads, he was caught in a traffic which didn’t move for long time. How do we improve our traffic? With increasing cars and population, this is almost going to be a night mare in future. He realized the problem and started a company called The Boring Company which will build underground tunnels for handling traffic.

Back to our idea storming session about building a solution for what problem. 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 product, 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 chance to explore the product with minimum fuss. Less complex the product is for customers to use intuitively, better will be their experiences and happier they will be to recommend your product to others. So one of the major aspect you should work on after a solid idea, is to create a minimum viable design. This will be alpha version of the product. Getting alpha version out of the door in minimum time will give you better idea where to focus on scaling the product in future. This will also save time and money.

Technology and Frameworks

Once we have initial design of minimum product, we can think of what technology and framework to use. What kind of infrastructure to use? Considering less expensive option, 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 solution to build your application. Also if you want to scale your application in future for data intensive, 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 lot of flexibility and ease to add lot of code easily. Of course, there is a learning curve if you have never used spring before. For database, we have two major options, one is SQL based database or NoSQL. If it is data intensive application, NoSQL makes more sense.

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

Conclusion

There are lot of other factors we have not considered in this discussion especially related to performance and health of the application. Also we didn’t discuss any major approach to build the application. I hope this brain storming post will give readers an idea what possibilities are out there to build something that is helpful.

Advertisements

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 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:

homepage

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

listofuserspage

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 at repository