Wednesday, April 19, 2017

Spring Boot

Spring Boot is a framework which uses convention over configuration, and it supports Microservices. Spring Boot was developed to minimize the configurations. Property file contains most of the configurations, and have key-value pairs. Utility classes are used to access them.

How to set up a Spring-Boot Project


  • Create a project using Maven.
  • Setting up the parent of the project is the next step. The parent will be spring-boot-starter-parent. Inside the project folder, there will be a file created named pom.xml. Open it, and above the dependencies tag, add the following piece of code.
      <parent>

       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-parent</artifactId>
       <version>1.5.2.RELEASE</version>
    </parent>

  • Setting up the starter is the next step. Add the following code under the dependencies tag in pom.xml in order to do this.
    <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

  • In order to have support for packaging we need to include a maven plugin, and in order to do this, include the following piece of code under the dependencies tag in the pom.xml file.
     <build>
         <plugins>
             <plugin>
                 <groupId>org.springframework.boot</groupId>
                 <artifactId>spring-boot-maven-plugin</artifactId>
             </plugin>
         </plugins>
     </build>

  • The main class of your project must be modified to be a Spring Boot Application. Add the following line of code inside your public static void main method. Please make sure that you change the ClassName word in italics in the code to the name of your main class.
        SpringApplication.run(ClassName.class, args);
  • Create a folder named model inside your package. Add a class named Employee.java which will contain two attributes id and message, the getters and setters of the two attributes.
private long id;
        private String message;

          //getter of message
        public String getMessage() {
                return message;
        }
//getter of id
public long getID(){
return id;
}

          //setter of message
        public void setMessage(String message) {
                this.message = message;
        }
//setter of id
public void setID(long ID){
this.id=ID;
}

  • Create a folder named controller inside your package. Add a class named EmployeeController.java which will contain a method that will handle GET requests.
    private final AtomicLong count=new AtomicLong();

    @RequestMapping(name = "/employee")
    public Employee welcoming(@RequestParam(value = "employeeName",                defaultValue = "Worker") String name) {

            Employee employee = new Employee();
            employee.setMessage("Welcome "+name);
    employee.setID(count.incrementAndGet());   
            return employee;   
    }

AtomicLong is used because then we can make use of the method incrementAndGet() to get the id attribute incremented whenever a client calls this GET method. If we use something like int, we cannot get this done because the value will not change and increment, but it will always remain the same.

value of @RequestParam is the key of the key-value pair sent along with the GET request, and defaultValue will be the default value placed in the case that the client does not pass a value.

incrementAndGet() method which belongs to the AtomicLong class increments the value and returns it.

We can test this using POSTMAN after running the project by giving the two following commands:
  • mvn clean compile package
  • java -jar target/<jar file created>.jar
Replace <jar file created> the Executable Jar File created. It will be most probably be created inside a folder called target in your project. If target folder is not there, you do not have to use target/ part in the command.

A better way to do this will be having a separate class for handling the service. In that case, the only task of the controller class will be to redirect requests to the correct service, and give the output.


Thursday, April 13, 2017

Angular JS

Angular JS is a front end web application framework which is widely used in Single Page Applications. The content of a single page application is dynamically added to the web page, that is, the web page is not refreshed, but only the content of the web page is changed using JavaScript when we need to change. When we need to change, we just push the new changed div to the web page without reloading the page with the changed divs. Since the client has the logic, the browser does the pushing and removing of the divs whenever necessary. Angular JS has the model view controller architecture.

The Angular JS Directives are used to introduce angular features to the already existing html tags. ng-app, and ng-controller are two such Angular JS directives.

Steps to create a Simple Angular JS app
  • As the first step, download and install Angular JS if you don't have it already. The link of the website from which it can be downloaded is given below.
                           https://angularjs.org

When downloading, you can choose the zip version to download.

  • Create an html file named index.html. Later, we will add our Angular JS app to this.
  • As the next step, let's create the module. The module acts as the container for all angular elements like controllers and directives. Create a js file named app.module, and add the following piece of code.
                   angular.module('EmployeeApp', []);

  • Let's create the controller now. Create a js file named main.controller, and add the following piece of code. 
         angular.module('EmployeeApp').controller('MainController', ['$scope',
                            ($scope)=>{
                                   $scope.count=0;

                                   $scope.incrementCount=()=>{
                                        return $scope.count++;
                                    }
         ]);


$scope is used to inject dependencies which controls the view to the controller.

  • Next step would be to add the following code inside your head tag in the html file. Make sure that you have the <base href="/app/"> tag in your head tag, placed above the script files mentioned below.  And also make sure that you are giving the correct paths to the below mentioned script files.
        <script src="angular-1.6.3\angular.js"></script>

        <script src="app.module.js"></script>
        <script src="main.controller.js"></script>

  • Change the body tag using the ng-app directive as shown below. 
        <body ng-app="EmployeeApp">

  • Add the following code to place the div with the controller inside the body tag of the html file.
           <div>
                  <h2>Welcome</h2>
                 <div ng-controller="MainController">
                        <button ng-click="incrementCount()">Increase Count</button>
                        <span>Count: {{count}}</span>
                 </div>
           </div>

As we press the button, the incrementCount function will be called, and the count will be incremented.
  • We can test this by building up an ExpressJS server side application, and running on localhost. The page will be loaded, and you will be able to see that when we press the button, the count will be incremented.

Friday, April 7, 2017

Maven

Maven is a tool used in managing projects and automating the development process. It can be used to set up a project easily. Maven uses "Convention over Configuration" which means the developer does not have to do a lot of decision making and he does not have to configure manually since the build tool will manage it. Maven manages alot of things like the builds and dependencies.

Using Maven is alot easier than using some of the other build tools like Ant.

Why choose Maven over Ant?
In Ant, we have to manually copy all the dependencies to the project location when setting up the project, whereas in Maven, all the dependencies are downloaded recursively and automatically during the project set up from a central repository where all the files are stored. This in turn reduces the project set up time too.

Another advantage would be what was mentioned at the top: Maven uses "Convention over Configuration" whereas in Ant, we have to configure alot of stuff manually.

How to setup Maven
Maven can be configured at any place, and use the following link provided to download the zip file of Maven:

http://redrockdigimark.com/apachemirror/maven/maven-3/3.3.9/binaries/apache-maven-3.3.9-bin.zip

After downloading, you have to configure two environment variables.

To do this, search environment variables in your computer, and choose Edit the system environment variables-->Click Environment Variables... from the window that appears, then under the system variables:

  • Add New variable named MAVEN_HOME or M2_HOME and for the value give the path to the home directory of Maven in your extracted file.
  • Select and Edit the Path variable, and add New path to the bin folder in your extracted Maven home directory. 
As the next step, we will check whether Maven is working now by giving the command:
       mvn -v
This should work now, given that the Java environment configurations have already been done. If you get a problem configure JAVA_HOME by giving path to Java installed home directory and add the path to the bin folder of Java folder to the Path variable.

If it works properly you should get an output which includes Maven home, Java version, and Java home with some other details.

How to create a simple project using Maven
Give the following command to create a project using Maven:

       mvn archetype:generate -DgroupId=com.student.learn 
 -DartifactId=learnMaven -DarchetypeArtifactId=maven-archetype-          quickstart

Note that archetype is a templating toolkit used to create projects of the same kind.
  • groupId will be the name of the package of your project.
  • artifactId will be the name of the project.
  • archetypeArtifactId indicates which archetype to be used when setting up the project through its name.
Give appropriate values to these three attributes as you want.

Saturday, April 1, 2017

Restful Services and Express.js with MongoDB

Express.js is a Node.js web application framework.

GET and POST are two of the main Restful Services. In addition to GET and POST, some of the other main services are PUT and DELETE. In this post, I'll be focussing only on GET and POST.

GET is used to fetch already existing resources whereas POST is used to insert a new resource. If I put it according to the example I'm going to use in coding, GET will fetch already existing employee details whereas POST will be used to insert a new employee record/document.

To test the following code, we can use Postman which is a Chrome Desktop Application-that helps in building APIs-to simulate the GET and POST services.



  • Create a JavaScript file named employee.model.


The strict notation will be applied when we start the code by giving the following line of code. The strict notation ensures that the programmer does not use any incorrect syntax or any syntax that may change along with time as JavaScript continues to evolve.

         'use strict';

Using the require command, we will import the mongoose module required to connect with the
MongoDB.

         const mongoose=require('mongoose');

Since we are planning to handle the employee GET and POST requests, we have to maintain 
employee information in the database. The following set of code lines are used to create the 
structure or schema of the information we are going to store in the database.

         const EmployeeSchema=new mongoose.Schema({
                      name:String,
                      email:String,
                      tel:String
         });


Then, we are creating a model using our schema.

const Employee=mongoose.model('Employee', EmployeeSchema);

Using module.exports, we are giving the things that are to be exported whenever we require 
or import this file from another file.

module.exports=Employee;

  • Create another JavaScript file named employees.
       'use strict';
Using the require command, jmport all the necessary modules.

       const express=require('express');
       const bodyParser=require('body-parser');

       const mongoose=require('mongoose');
The next particular line of code sets the promise type to be used by mongoose. In this case, 
by saying global.Promise, we are indicating it to use the native promises.

       mongoose.Promise=global.Promise;
mongoose.connect() is used to connect to MongoDB, and if an error occurs at a given point 
for this line of code, instead of using localhost, you can try using 127.0.0.1 which will work just
fine. 

       mongoose.connect('mongodb://localhost:27017/employees', err=>{
           if(err)   //handles any errors that occur when connecting to the database
           {
               console.log(err);
               process.exit(1);
           }
       });

Using the line below, we will import the employee.model file we created before with the 
employee schema on it.

       const EmployeeModel=require('./employee.model');

The line below is used to create an application out of express.

       const app=express();

express.static() is used to give the location where the server can find the static files like html, 
css, and js to serve to the client directly.

       app.use(express.static(__dirname));
bodyParser.json() is used to accept JSON objects in the request body.

       app.use(bodyParser.json());

The following command handles the GET restful service of the type or path or route /employees,
using which the client will request details of all the employees. The find() command will be 
used to search for all the documents with the employee details from the MongoDB. exec() 
command must be used along with find() to execute the query.
then() handles what needs to be done with the query results. In this case, res.json() sends the 
result in the response made for the request. catch() is used to handle errors that can occur.

app.get('/employees', (req, res)=>{
    EmployeeModel.find().exec().then(employees=>{
        res.json(employees);
    }).catch(err=>{
        console.error(err);
        res.sendStatus(500);
    });
});

The following command handles the POST restful service of the type or path or route 
/employees. By accessing the request body through req.body, we will save the parameters
passed by the client which contains the information of the new employee to be added to the
database, and then using the save() method, we will save the details to the database. Note 
that the client does not need to provide the _id in the request body since MongoDB will be 
adding it by itself.

As in the GET service handling, then() will deal with the result from carrying out the operation, 
while catch will do the error handling. In this case, the output that the client will get at the end 
the operation is the newly added details of the employee.

app.post('/employees', (req, res)=>{
    const employee=new EmployeeModel(req.body);
    employee.save().then(employee=>{
        res.json(employee);
    }).catch(err=>{
        console.error(err);
        res.sendStatus(500);
    });
});

Using app.listen(), we are making a server which will listen to the requests from port 3000. The
error status 500 which we send represents an internal error which simply depicts that the 
server is not able to fulfil the request due to an unexpected condition that it came across. 

app.listen(3000, err=>{
    if(err){      //does the error handling
        console.error(err);
        return;
    }
    console.log('app listening on port 3000');
});