DEV Community: javatodev

Multiple Datasources With Spring Boot Data JPA

javatodev — Wed, 10 Feb 2021 03:32:53 +0000

Hello readers, In this article I’m going to explain how we can use multiple data sources in Spring Boot application which uses Spring Data JPA with practical usage.

Technologies going to use,

Java 1.8
Spring Boot: 2.3.4.RELEASE
Spring Data JPA
PostgreSQL
Lombok
Gradle
Intellij Idea for IDE

Where We Can Use This Solution?

Let’s think your spring boot application should use two databases in the same instance, to save different data sets. In that case, we can give spring data JPA a chance to identify multiple datasources, and data JPA will use those datasource connections to access those different databases.

Here I’ll explain this tutorial with the following scenario where users, accounts, credit cards should be saved in different databases.

Solution In Brief

Here we will create two data source configurations for User DB and Bank DB. Additionally, we will introduce different database connection parameters in application properties and use those in mentioned data source configurations and we should let spring boot identify repository layer and entity layer for each data source config.

Create Spring Boot Application

Here I’m using spring initializr to generate a spring boot project with all the dependencies I need for this tutorial. If you are really new to Spring Boot, Please follow our article on How to Create a Spring Boot Project.

Here I’ve selected following dependencies to create spring boot project using spring initilizr,

Spring Web – contains common web-specific utilities for both Servlet and Portlet environments.
Lombok – The coolest plugin to spicing up your java. Never write another getter or equals method again, with one annotation your class has a fully-featured builder, Automate your logging variables, and much more.
Spring Data JPA – JPA with Spring Data
PostgreSQL – PostgreSQL driver for spring boot.

If you need to learn how we can use Lombok in spring boot follow our article Guide to use Lombok In Spring Boot.

Defining User Database Specific Models and Repositories

Here we will create the model classes and repositories for user database-specific tables.

first, create a package in root level (com.javatodev.api in my example) named as a model and create a UserEntity.java and paste following content to that file,

Then create another package named as com.javatodev.api.repository.user, and add following UserRepository.java

Defining Bank Database Specific Models and Repositories

Now we are ready with user DB specific changes. Let’s focus on Bank specific models and repositories.

Here do the same what we did above in creating user-specific models and repositories. Additionally keep in mind to create those inside a package called bank since we need to separate Bank specific models, repositories with User specific ones.

create AccountEntity.java in ** com.javatodev.api.model.bank.account** and copy following content,

Then create CreditCardEntity.java in com.javatodev.api.model.bank.card and add following content to it.

Then finally create the repository classes for both Account and Credit Card entities as below,

All done now we have our JPA level configurations setup that we should have in order to access databases.

Configuring Multiple Datasources In Spring Boot Application

Now we should write custom datasource configuration with introducing custom datasource connection properties.

first copy following into the application.properties and here we are setting datasource connection properties for each database.

As you see here we not setting default JPA database connection URL, we are setting additional identifiers as bank and user while setting database connection properties inside this property file.

Then create configuration package in com.javatodev.api.configuration, and create BankDataSourceConfiguration.java inside that package and copy following content to it.

Then introduce @EnableJpaRepositories annotation to introduce package where this datasource should get repositories to access database. Here it is com.javatodev.api.repository.bank. Then in addition to that, we should introduce entity manage reference and transaction manager reference, Just add it as below for the moment and will discuss it below.

Then add following @Bean definition into the same configuration file, Here it will capture url, username, password and driver-class-name which we defined in application properties file under bank.

Then create the datasouce using DatasourceProperties method which we have written earlier as below,

Finally, create EntityManagerFactory and TransactionManagerFactory as below, Here we should show where this EntityManager should find Entity classes inside this application. Here It is com.javatodev.api.model.bank.

All done now our whole configuration should look like below,

Then create another class named as UserDataSourceConfiguration.java and setup user specific datasources as below.

All done now our application could use multiple datasources in order to access multiple databases using spring data JPA, and let’s test that with simple Junit test.

test output

Conclusion

Thanks for reading our latest article on How To Configure Multiple Datasources With Spring Boot Data JPA with practical usage.

If you are looking for spring boot based practical application development tutorials, just check our article series and comment on whatever the new things you need to see in our website.

You can get source code for this tutorial from our GitHub repository.

How To Handle Multiple Message Properties In Spring Boot

javatodev — Tue, 02 Feb 2021 10:39:16 +0000

In this tutorial, I'm going to explain how we can use multiple message properties files in a spring boot application. We can use this approach when we need to differentiate message properties into multiple files.

Just think you have a requirement of keeping messages error messages, API responses in different message property files. We can use the following approach to keep errors and API responses in different files.

Technologies Going to Use,

Java 1.8
Spring Boot: 2.3.4.RELEASE
Lombok
Gradle
Intellij Idea for IDE

Create a Spring Boot Application

Here I'm using spring initializr to generate a spring boot project with all the dependencies I need for this tutorial.

If you are really new to Spring Boot, Please follow our article on How to Create a Spring Boot Project.

Here I've selected the following dependencies to create spring boot project using spring initilizr,

Spring Web - contains common web-specific utilities for both Servlet and Portlet environments.
Lombok - The coolest plugin to spicing up your java. Never write another getter or equals method again, with one annotation your class has a fully-featured builder, Automate your logging variables, and much more.

If you need to learn how we can use Lombok in spring boot follow our article Guide to use Lombok In Spring Boot.

Adding Message Properties Into The Spring Boot Project

Here I'm creating 2 message property files in resources, to keep errors and API responses. In order to do that, just create two files in src/main/resources/messages folder with naming as below,

api_error_messages.properties
api_response_messages.properties

Then add following message key and value pairs into those files,

api_error_messages.properties,

api_response_messages.properties,

Setup MessageSources Bean With Introducing Multiple Message Properties

Now we have our error message and API response property files inside the project. Let's introduce those files to the Spring Boot application using message source bean.

Here I'm using separate @Configuration class to set up this MessageSource bean, You can use the same approach or use already available configuration class to define this MessageSource Bean.

Now we can access these message properties inside our application anywhere we need. Here I'll demonstrate it with @PostConstruct method in Main Class,

Start the application and output should look like below.

Conclusion

Thanks for reading our latest article on How To Handle Multiple Message Properties In Spring Boot with practical usage.

If you are looking for spring boot based practical application development tutorials, just check our article series.

You can get source code for this tutorial from our GitHub repository.

Angular Datatable with Pagination Using ag-Grid and REST API

javatodev — Tue, 29 Dec 2020 13:25:54 +0000

In this article, I’ll explain how we can build a data table with angular using ag-Grid. Additionally, the application will consume third party paginated REST API and load the data to the table.

Here I’m using the API which we developed for our article on, Spring Boot Pagination, Sorting and Filtering.

Final Development Outcome

Technologies I’m going to use in Frontend,

Angular 10.1.5
ag-Grid
Angular HttpClient

Main topics inside the article,

Up and Running Backend REST API
Developing Angular JS Project
- Adding ag-Grid into the Initiated Project
- API Service to Consume REST API
- Component To Show ag-Grid Implementation
- Setting Author Name With Custom String Parser
- Showing Image On ag-Grid
Conclusion

Up and Running Backend REST API

Here as I mentioned above, I’ll use the API we have developed in our previous tutorial, First, download the source codes for that Spring boot REST API from here.

$ git clone https://github.com/javatodev/spring-boot-mysql-pagination-filtering-sorting.git

After downloading the project, change the src/main/resources/application.properties to connect with the preferred MySQL instance on your side.

server.port=8081
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/java_to_dev_api_mysql
spring.datasource.username=root
spring.datasource.password=
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

Change these properties accordingly to access the MySQL instance on your machine.

Then start the application using the following command,

$ ./gradlew bootRun

Then you can validate the API status just accessing following URL from your browser or using CURL in the command line,

http://localhost:8081/api/library/book/search?page=0&size=2

It should return an empty list or list of books along with a number of items and number of pages if data is available on your database, after correctly up and running.

I’ve added simple API endpoint to write dummy data set on database.

{
  "bookList": [
    {
      "id": 2,
      "name": "Unlocking Android",
      "isbn": "1933988673",
      "imageUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg",
      "author": {
        "id": 3,
        "firstName": "W. Frank",
        "lastName": "Ableson"
      }
    },
    {
      "id": 3,
      "name": "Android in Action, Second Edition",
      "isbn": "1935182722",
      "imageUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson2.jpg",
      "author": {
        "id": 3,
        "firstName": "W. Frank",
        "lastName": "Ableson"
      }
    }
  ],
  "numberOfItems": 400,
  "numberOfPages": 200
}

If you need more data to test this API, Just trigger following API, then it will create some sample data set in the database. Add an author to the DB before running this API.

curl -X POST http://localhost:8081/api/library/create

Now we have a running API which works correctly.

If you are not familiar with Spring Boot based application then you can use the following Fake REST API from instantwebtools.net which is online and free to use with this tutorial. One thing will be changed since that API returns different data structure but you can set up that with this application as well.

They have this API endpoint which returns the paginated response from their API and it has all the parameters which we need to have in this tutorial.

https://api.instantwebtools.net/v1/passenger?page=0&size=10

Developing Angular JS Project

If you don’t have the basic setup to develop angular JS project, Just follow this documentation to install and configure Angular CLI before starting this tutorial.

Here I’m using angular CLI (10.1.5) to generate our base project for this tutorial.

First, generate your project using the following command and add –routing=true to the same command, then it will generate our base application with all the components which necessary to have in routing enabled angular application.

$ ng new angular-js-datatable-with-spring-boot-api --routing=true

Then select the option you like in the next stages after the above command, For my sources, I’m using the following for the options, But you are free to use any option you would like.

Which style sheet format would you like to use? – CSS

Ok, Now we have our fresh angular 10 project with routing module integrations.

Adding ag-Grid into the Initiated Project

$ npm install --save ag-grid-community ag-grid-angular

now all the modules related to ag-grid should be added into the project. Then let’s add the ag-Grid Angular module to our app module (src/app/app.module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([]),
    NgbModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Additionally, I’m configuring HttpClientModule with this application since It will be used to communicate with the REST API.

After that, add the following CSS imports to src/styles.css or styles.scss get ag-Grid themes,

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";

Now we are ready to go with ag-grid implementation.

API Service to Consume REST API

Here we are using a separate service class to communicate with REST API. create a new service using following command.

$ ng g s api

Then add following content into the src/app/api.service.ts Here I’m developing a service method to accept pagesize and pagenumber then retrieve paginated API response from the API using those parameters.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private client: HttpClient) {}
  getAllBooks(pageSize: Number, pageNumber: Number): Observable<any> {
    const url = "http://localhost:8081/api/library/book/search?size="+pageSize+"&page="+pageNumber;
    return this.client.get(url);
  }

}

Component To Show ag-Grid Implementation

In here we are using separate component to build ag-Grid view. So first create a new component and add router param to show it with the root URL.

$ ng g c Dashboard

Then add following into the src/app/app.routing.module.ts in order to setup routes.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
 {
   path: "",
   component: DashboardComponent
 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Then remove all the content from src/app/app.component.html, and add following,

<router-outlet></router-outlet>

Done now we have implemented a new component with routing, Then we should focus on adding data table component.

First add following into the src/app/dashboard/dashboard.component.ts,

for the moment I’m only going to set two columns in the datatable with name and ISBN from the book API.

so basically you need to set columnDefs with correct field name totally with whatever the data is coming from our API.

Then all the data coming from API will be bound to rowData array and setting rowModelType to ‘infinite’ and default page size will be 10.

onGridReady method will be called when the grid is loaded and it will set the data source with API service and the params will be captured with gridApi.paginationGetPageSize() and gridApi.paginationGetCurrentPage() and its available around whole application for the current session.

After successful retrieval data will be set to the successCallback.

Additionally onPageSizeChanged will be used to set changes on page size.

import { Component, OnInit } from '@angular/core';
import { IDatasource, IGetRowsParams } from 'ag-grid-community';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-new-dashboard',
  templateUrl: './new-dashboard.component.html',
  styleUrls: ['./new-dashboard.component.css']
})
export class NewDashboardComponent implements OnInit {

  private gridApi: any;
  private gridColumnApi: any;  

  constructor(private api: ApiService) { }

  columnDefs = [
    { field: 'name', sortable: true, filter: true , flex: 1, minWidth: 100},
    { field: 'isbn', sortable: true, filter: true , flex: 1, minWidth: 100}
  ];

  rowData = [];
  rowModelType = 'infinite';
  defaultPageSize = 10;

  ngOnInit(): void {
  }

  onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.setDatasource(this.dataSource);
  }

  dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {      
      this.api.getAllBooks(this.gridApi.paginationGetPageSize(), this.gridApi.paginationGetCurrentPage()).subscribe(response => {
        params.successCallback(
          response.bookList, response.numberOfItems
        );
      })
    }
  }

  onPageSizeChanged(event: any) {
    this.gridApi.paginationSetPageSize(Number(event.target.value));
  }

}

Now add following into the src/app/dashboard/dashboard.component.html, this is the UI part for our datatable and there are pending changes that we need to do in the typescript side.

<div style="padding-right:100px;padding-left:100px; padding-top:20px">
    <h1 style="font-weight: bold;">Datatable with Ag-Grid + Angular With Spring Boot REST API</h1>
<div>
    Page Size:
    <select (change)="onPageSizeChanged($event)">
        <option value="10">10</option>
        <option value="100">100</option>
        <option value="500">500</option>
        <option value="1000">1000</option>
    </select>
</div>
<ag-grid-angular 
    #agGrid style="width: 100%; height: 550px;" 
    class="ag-theme-alpine" 
    [rowData]="rowData" 
    id="myGrid"
    [columnDefs]="columnDefs" 
    [pagination]="true" 
    (gridReady)="onGridReady($event)" 
    [rowModelType]="rowModelType"
    [paginationPageSize]="defaultPageSize" 
    [cacheBlockSize]="defaultPageSize" 
    [enableRangeSelection]="true"
>
</ag-grid-angular>
</div>

with ag-grid we need to custom develop page size selection component. That’s why I’ve developed select with onPageSizeChanged method to set selected page size by the user.

Then start the project with following command,

$ ng serve --open

Then following UI should be present when accessing http://localhost:4200 on your browser.

All done with the basic implementation. let’s add few more changes to show images and custom string columns.

Setting Author Name With Custom String Parser

Here our API is sending author first name and last name in two parameters.

{
      "id": 2,
      "name": "Unlocking Android",
      "isbn": "1933988673",
      "imageUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg",
      "author": {
        "id": 3,
        "firstName": "W. Frank",
        "lastName": "Ableson"
      }
    }

So If we need to show both params in a single column in ag-grid, We can use valueGetter and set our custom parser to the getter. Then it will set parsed author name on that column.

Add following method to src/app/dashboard/dashboard.component.ts

nameParser(params:any) {
    if (params.data != null) {
      return params.data.author.firstName+" "+params.data.author.lastName;
    }
    return "";
  }

Then change following column definition on columnDefs,

columnDefs = [
    { field: 'name', sortable: true, filter: true , flex: 1, minWidth: 100},
    { field: 'isbn', sortable: true, filter: true , flex: 1, minWidth: 100},
    { valueGetter: this.nameParser , flex: 1, minWidth: 100, headerName: 'Author'}
  ];

All done, now our datatable could show author name with concatenating first name and last name.

Showing Image On ag-Grid

Now our last column, Image for book. Our API sends the direct URL to the image. So we just needs to set tag with the URL coming from our API.

So to do that we should use custom component and load it with the datatable.

Let’s create another component (src/app/ImageFormatterComponent.ts) with adding the following content.

import { Component } from "@angular/core";

@Component({
  selector: 'app-image-formatter-cell',
  template: `<img border="0" width="50" height="50" src=\"{{ params.value }}\">` })

export class ImageFormatterComponent {
  params: any;
  agInit(params: any){
    this.params = params; 
  } 
}

Here it’s creating a with the value we set from the API.

Then add this same component to the AgGridModule implementation on src/app/app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([ImageFormatterComponent]),
    NgbModule,
    HttpClientModule
  ]

Then call the custom component using cellRendererFramework as below,

columnDefs = [
    { field: 'name', sortable: true, filter: true , flex: 1, minWidth: 100},
    { field: 'isbn', sortable: true, filter: true , flex: 1, minWidth: 100},
    { valueGetter: this.nameParser , flex: 1, minWidth: 100, headerName: 'Author'},
    { field: 'imageUrl' , autoHeight: true, flex: 1, minWidth: 100, headerName: 'Image', cellRendererFramework: ImageFormatterComponent}
  ];

Now our application is almost complete with all the necessary column definitions.

All done, Now we have completed the whole implementation with ag-grid on an angular project using REST API.

Conclusion

All done, Now I hope you have a good understanding of how to develop an angular js frontend with datatable using ag-grid and how to configure it to consume paginated REST API developed using Spring Boot. Comment on your ideas or issues you are facing while your development. I’m eagerly waiting to answer those.

You can find source codes for this tutorial from our Github.