Full Stack Development using Angular , Spring Boot, Gradle and PostgresQL

This article describes the details of full stack development in building simple web application using Angular as Front End along with Spring Boot as Backend Microservices and PostGresQL as RDS to bundle the package using Gradle.

Introduction

To develop an application using Angular, Spring Boot, PostgreSQL, and Gradle, follow these steps:

1. Environment Setup

- Install Java JDK, Node.js, and PostgreSQL.

- Install Gradle if not using the wrapper.

2. Backend Development with Spring Boot

- Create a Spring Boot project using Spring Initializr, including necessary dependencies.

- Configure application.properties for PostgreSQL connection.

- Define JPA entities and repositories.

- Implement services and REST controllers to handle business logic and API endpoints.

3. Database Setup

- Create a PostgreSQL database and user.

- Set up tables based on your JPA entities.

4. Frontend Development with Angular

- Initialize a new Angular project using Angular CLI.

- Generate components and services as needed.

- Implement HTTP services to interact with the Spring Boot API.

5. Connecting Frontend and Backend

- Configure CORS in Spring Boot to allow requests from the Angular application.

- Ensure the Angular app makes appropriate HTTP requests to the API.

6. Build and Deploy

- Build the Angular application for production.

- Package the Spring Boot application using Gradle.

- Deploy both applications on a server or cloud platform.

7. Testing and Optimization

- Test the application thoroughly, focusing on both backend and frontend functionality.

- Optimize performance and ensure security measures are in place.

This outline provides a structured approach to developing a full-stack application using Angular, Spring Boot, PostgreSQL, and Gradle -let us look further on to the code examples.

Feel free to download the Spring Boot based service developed for this article at Accessibility and Front end based Angular service at Accessibility-Frontend

SpringBoot Application for Accessibility WCAG Rules

Developing a Spring Boot-based API project that complies with WCAG (Web Content Accessibility Guidelines) requires a focus on accessible design principles. While WCAG primarily targets web content, ensuring your APIs support accessible applications is essential. Here’s a step-by-step approach:

1. Understand WCAG Principles

WCAG is based on four principles:

- Perceivable: Information must be presented in ways that users can perceive.

- Operable: Users must be able to operate the interface.

- Understandable: Information and operation must be understandable.

- Robust: Content must be robust enough to work with current and future technologies.

2. Plan Your API Design

- Use Meaningful Resource Names: Design your API endpoints to be descriptive and meaningful.

- Provide Proper Documentation: Use tools like Swagger/OpenAPI to document your API, ensuring that the documentation is clear and accessible.

3. Implementing Spring Boot API

1. Create a New Spring Boot Project:

- Use [Spring Initializr](https://start.spring.io/ ) to create a new project with dependencies such as Spring Web and Spring Data JPA.

2. Define Your Data Model:

- Create entities with meaningful names and relationships.

3. Create REST Controllers:

- Use proper HTTP status codes (200, 201, 400, 404, etc.) to indicate the outcome of requests.

4. Use Meaningful Error Messages:

- Ensure that error responses provide clear and actionable messages.

5. Support Multiple Formats:

- Enable support for different response formats (JSON, XML) to accommodate various client needs.

4. Testing for Accessibility

- Automated Testing Tools: Use tools like Axe or Lighthouse to check for accessibility issues in the responses and documentation.

- User Testing: Engage users with disabilities to test your API's usability.

5. Documentation

- Use Swagger/OpenAPI to create interactive documentation that is easily navigable and provides clear information about API endpoints and parameters.

6. Security Considerations

- Implement security best practices (like OAuth2, JWT) to ensure that all users, including those with disabilities, can securely access your API.

7. Continuous Improvement

- Regularly review your API against WCAG standards and solicit feedback from users to improve accessibility.

Executing application at this stage will throw Postgres exception as the DB has not been setup yet:

Hosting PostgresQL in Docker

Install Docker to deploy PostgresQL:

Navigate to Docker Terminal to run this command:

docker run --name docker-postgres \
> -p 5432:5432 \
> -e POSTGRES_USER=postgres \
> -e POSTGRES_PASSWORD=postgres \
> -e POSTGRES_DB=postgres \
> -d \
> postgres        

This can get executed in docker post installation at respective device through terminal:

Once this has been setup, it helps in downloading the database setup to the docker in respective container:

This setup helps storing data hence rerunning spring boot application will lead to appropriate JPA connection:

This means the port 8080 has been established to connect DB:

2024-10-09T14:36:41.620+01:00  INFO 20086 --- [accessibility] [           main] com.zaxxer.hikari.pool.HikariPool        : HikariPool-1 - Added connection org.postgresql.jdbc.PgConnection@22da200e
2024-10-09T14:36:41.622+01:00  INFO 20086 --- [accessibility] [           main] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Start completed.
2024-10-09T14:36:42.649+01:00  INFO 20086 --- [accessibility] [           main] o.h.e.t.j.p.i.JtaPlatformInitiator       : HHH000489: No JTA platform available (set 'hibernate.transaction.jta.platform' to enable JTA platform integration)
2024-10-09T14:36:42.700+01:00  INFO 20086 --- [accessibility] [           main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'
2024-10-09T14:36:42.981+01:00  WARN 20086 --- [accessibility] [           main] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning
2024-10-09T14:36:43.346+01:00  INFO 20086 --- [accessibility] [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port 8080 (http) with context path '/'
2024-10-09T14:36:43.356+01:00  INFO 20086 --- [accessibility] [           main] c.i.a.AccessibilityApplication           : Started AccessibilityApplication in 4.691 seconds (process running for 5.171)        

Now we are good to verify the end points via the port 8080 and to further develop front end application. Let us use bruno to check the endpoints.

Bruno based End point Verification on Backend

Install bruno and navigate to the app to setup basic end points to verify request/responses:

Rules by API Verification

Verify list of rules created part of the WCAG rules configured to get checked:

Initially submitting a request will display empty response:

If the body get converted to JSON, it helps in submitting the right request to get empty array as response:

Changing the type to POST helps in creating new rule:

Put message with right update to fields of the contract helps in updating the rules and it can be verified in the responses:

Project Verification through REST API

Submitting a GET request with project end point with JSON body returns response as empty array since no projects created initially:

Converting type as POST helps in creating projects:

Update contract with invalid request body to check error response:

Update right contract body in the request to check correct responses part of Response Body:

Once projects are created, it can be verified with with GET request to see consolidated response:

What happens if the server not hosted or down?

It displays a message such as ECONNREFUSED

Error invoking remote method 'send-http-request': Error: connect ECONNREFUSED ::1:8080        

Angular based Front End Development

Useful commands in Angular are listed here for ease of front end development in shortest possible time.

Create a new Angular project:

ng new        

Generate the project:

ng generate        

Serve the Angular project:

ng serve        

Build the project:

ng build        

Identify help for the project:

ng help        

Install Angular:

npm install -g @ angular/cli        

Check the version of the Angular:

ng --version        

Let us look at the ways in creating a front end application to invoke those Microservices built in Spring Boot and deployed in Docker Container via Gradle build.

Create a new project:

ng new accessibility-frontend        

Choose CSS as style sheet:

Enable server side rendering:

Cross check the version once installed:

Update title of the page in both TS and CS files:

Title update: Update title here in app.component.ts will reflect on the web page hosted in localhost.

Prefix update: Rather then saying 'Hello' , update <h1> with 'Welcome to,' to reflect as a prefix to the title.

Interface Design in Angular

Always preventing from sending incorrect data are critical to web applications hence 'interfaces' does this job of helping in debugging, data structures and enable identification of missing properties.

Generate interfaces for the rules:

ng generate interface rule        

Create Model for the rules:

ng generate interface rule model        

Once these two commands executed, identify newly created files to further design the interfaces:

Define the field level properties within the interface of Rule:

export interface Rule {
    id: number;
    name: string;
    description: string;
    completed: boolean;
    dueDate: Date;
    project: number;
}        

Create the model for the project:

ng g interface project model        

Define the field level properties within the interface of Project:

import {Rule} from './rule.model'
export interface Project {
    id: number;
    name: string;
    description: string;
    rules: Rule[] // Array<Rule>
}        

Static Components Design in Angular

Encapsulate the template and UI behaviour to enable sub components across Project, ProjectTitle,

Create the components for the project:

ng g component project        

Create Title for the project:

 ng g c Project/ProjectTitle        

Create a progress bar component to track the progress of rules:

ng g c Project/ProgressBar        

After writing components, it is easy to host the Angular Website with couple of CSS enhancements to display the track of WCAG rules:

While WCAG focuses on web content, ensuring that both Spring Boot API and Angular UI adheres to its principles is essential for fostering inclusive applications. By designing API&UI thoughtfully, providing clear documentation, and testing for accessibility, we can create a more inclusive experience for all users.

This newsletter aimed to develop both the services independently, let us review on how to integrate both backend and front end in the upcoming newsletters.

?Follow me on LinkedIn: Link

Like this article? Subscribe to Engineering Leadership , Digital Accessibility , Digital Payments Hub and Motivation newsletters to enjoy reading useful articles. Press SHARE and REPOST button to help sharing the content with your network.

#LinkedInNewsUK #FinanceLeadership