Monday, December 24, 2018

Access Java REST API from Angular application...

This page is under construction.

How to consume REST API secured by Spring Security?

In this article, I am going to demostrate how we could access the REST api secured by Spring Security to display in front-end. We are going to use Spring Tool Suite (STS).
Create a new Java Project in STS and add the files into it similar to the following structure.
│         pom.xml
├───src
│   └───main
│       ├───java
│       │   └───com
│       │       └───p1coder
│       │           │   MvcConfiguration.java
│       │           │   SecurityConfig.java
│       │           │   SpringBootWebApplication.java
│       │           ├───controller
│       │           │       ProductController.java
│       │           │       RequestHandler.java
│       │           ├───domain
│       │           │       Product.java
│       │           │       UserPreference.java
│       │           └───service
│       │                   ProductService.java
│       │                   RestApiService.java
│       └───webapp
│           └───WEB-INF
│               └───views
│                   └───product
│                           display.jsp
Fill each file with the sample code from each code section.

MvcConfiguration.java
SecurityConfig.java
SpringBootWebApplication.java
ProductController.java
RequestHandler.java
ProductController.java
RequestHandler.java
Product.java
UserPreference.java
ProductService.java
RestApiService.java
display.jsp
pom.xml
After maven update the reference packages, we can execute the sample by right click on project and choosing "Run as" -> "Spring Boot App".
       In RequestHandler.java, we have REST api routes accessible by either PathVariable or RequestParam, which read the repository layer data.
       If we directly access "http://localhost:8080/getAllProducts" api, we will get authentication dialog box as we secure the route ("/getAllProducts**") in "SecurityConfig.java" file. This route is granted only to "admin" role by extending the WebSecurityConfigurerAdapter class.
       We will see the sample listing when we access "http://localhost:8080/products" page. We implement the data retrieval logic and pass api credential to REST api.
       In RestApiService.java, BasicAuthenticationInterceptor is used to authenticate while retrieving by HTTP GET execute on RestTemplate instance.
       In ProductController.java, ObjectMapper instance is used to deserialize the generic return value from data service call instantiated by @Autowired Dependency Injection.
Output

Sunday, November 11, 2018

How to create CRUD feature using AngularJS?

We need the basic features for LOB applications: Adding new Records, Reading all existing records, Updating the desired record and Removing the selected record. I put together all this into one piece using AngularJS.
In real-world app, we use WebAPI for backend service. Here, just only client side code is used for demonstration.
The beauty of MVC framework is showcased.
Bootstrap is used for styling.

Source Code


SrNameAgeAction
{{$index + 1}} {{user.Name}} {{user.Age}}

Tuesday, October 30, 2018

How to create a SVG PieChart using AngularJS?

A couple of years back, I worked in a project which require data visualization component. There are a set of performance and features requirements set by the end-users. I gained so much experience and knowledge from that project. Now, I got something which is kind of similar to what I have done and did the basic charting work. Well, small program which  do something cool. A SVG chart drawn by pure JavaScript...also it's Angular Component.

Source Code

It is how it works...

AngularJS sample

Sunday, October 14, 2018

How can we create a bouncing ball without using any JavaScript?

Animating the UI is an effective way to draw the attention from users and make our apps more interesting. When I was working on a Silverlight to HTML5 project, I come across many animated user interface. Our roadmap is not to use jQuery dependent code unless we have to. From this project, I learnt many things on CSS animation and it is highly efficient and effective way of doing animation.
We do not clutter the JavaScript code.
We reduce the execution overhead and save CPU cycle.
Our code will stay current and relevant as new technologies come up.
We have no dependency on any other third party library as we use pure native features from what browsers support.
***No workaround or hacky stuff.
Here I want to share a sample code which is of a little something similar to how I did UI animation.
I make it bare minimum to make it more intuitive and easy to understand.
Just copy the sample html, save it and open it in a Chrome, Firefox, IE11 or Edge browsers.
You will see the ball bouncing inside its container - without any JavaScript required.


Source code

Code in Action

Image compression using C#

Sometimes, we need to compress the image files while maintaining the image quality. This can be achieved by the following C# implementation....