Home

Welcome to the simulations wiki!

Abstract

The integration of Spring Boot backend with React frontend and H2 database via JPA repository forms a cohesive and efficient web application framework.

flowchart LR
 subgraph Front-end SPA WEB
    ReactWeb <-- axios --> APIREST
end
subgraph Back-end Java EE
APIREST <-- {enpoint} --> API-REST
    API-REST <-- @RestController --> SpringBootServer

    SpringBootServer <-- JPA --> Database((H2 Database))
end
    style ReactWeb stroke:#333,stroke-width:1px;
    style APIREST fill:#61dbfb,stroke:#333,stroke-width:1px;
    style API-REST fill:#61dbfb,stroke:#333,stroke-width:1px;
    style SpringBootServer stroke:#333,stroke-width:1px;
    style Database fill:#ffffff,stroke:#000000,stroke-width:1px;

Code iterations

Project Version	Commit	Code Version	Commit
project v0.1	create Spring Boot project, @Controller, @RestController and a fake array of `simulation` objects at @Service	GitHub code v0.1	aa6160
project v0.2	@Controller with `populate` method & H2 db memo	GitHub code v0.2	9a2f6cd
project v0.3	CRUD operations API Rest (read/delete) & Postman	GitHub code v0.3	726baf
project v0.4	All CRUD operations API Rest `simulation` with `@OneToMany` bidirectional `player`-`user` & Domains-packages
	`simulation` has a `String` `player`, it is not an object. So,`player` is not assigned to `simulation` on DB	GitHub code v0.4.0	18db309
	`player` assigned properly to `simulation` on DB	GitHub code v0.4.0	1ef8b6d
	classs `player`: `simulations` list @OneToMany(mappedBy = "player", cascade = CascadeType.ALL)	GitHub code v0.4.1	db3334f
project v0.5	adding pull-request `subscription` domain	GitHub code v0.5	ad9ed65
project v0.6	adding pull-request `payment/card` domain and solve merge-conflicts	GitHub code v0.6	780867d
project v0.7	adding pull-request `social` domain and solve merge-conflicts	GitHub code v0.7	f1812d4e
project v0.8	`n:m`: `Player`, `University`, `Enrollment`, `TrafficTrial` with JUnit
	`n:m`: `Player` <1:n> `Enrollment` <n:1> `TrafficTrial`, basic Unitary Test `createOneEnrollment`	GitHub code v0.8.1	136b73
	`n:m`: `TrafficTrial` <n:m> `University`, basic Unitary Test `createOneTrial_University`	GitHub code v0.8.2	8d3471
project v0.9	Populate whole DB-H2 tables: `Enrollment`, `TrafficTrial`, `University`	GitHub code v0.9	9791b41
project v1.0	Add `mongoDB`, `player` `1:n` `imagePlayer`
	Add `mongoDB` dependency, configure `application.properties`, `imagePlayer` & test it with ApplicationRunner	GitHub code v1.0.0	4ccf18
	`player` @Entity `1:n` `imagePlayer` @Document: `uploadImage`, `getImage` & H2-DB local (download, install, create, connect)	GitHub code v1.0.1	21e01f
	`player` @Entity `1:n` `imagePlayer` @Document: `getImageData` & polish/refactor code	GitHub code v1.0.2	???
project v1.1	queries `JPQL`	GitHub code v1.1	???

How to exectute

First at all, clone:

git clone AlbertProfe/simulations

Then, install all dependencies, you do not need to do anything, Maven will do it for you. but just in case:

mvn run:demo

To test the app just work with H2 on memory, so, in application.properties

#H2 DATASOURCE local
#spring.datasource.url=jdbc:h2:/home/albert/MyProjects/DataBase/db-instances/simulationsdb
#spring.datasource.username=albert
#spring.datasource.password=1234

#H2 DATASOURCE memory
spring.datasource.url=jdbc:h2:mem:0f74afd0-eefb-4b37-af9f-64249cb2ffa2
spring.datasource.username=sa
spring.datasource.password=

and define your own MongoDB string connection:

#MongoDB-DATASOURCE
# IT IS FAKE DATA
spring.data.mongodb.uri=mongodb+srv://simulationUser:12345678@clustertest.xxxxxx.mongodb.net/
spring.data.mongodb.database=simulations

Summary

Note

This project is a Spring Boot application created using Maven, with dependencies including:

Lombok, Java Faker, JUnit
Web, API Rest
H2, JPA, MongoDB
and Thymeleaf.

It features a basic project structure and utilizes Spring Boot 3.2.3 and Thymeleaf 3.1.2 for API REST functionalities.

The project includes:

a simulation class,
application configuration files like application.properties,
controllers/services for handling simulations,
templates are provided for web rendering and
screenshots demonstrate both web and API REST endpoints.

This Spring Boot application serves as the server backend for a React web application. It establishes a communication channel between the frontend and backend, allowing the React web application to interact with the database and perform various operations. The backend utilizes JPA (Java Persistence API) repository for seamless interaction with the H2 database.

This architecture creates a robust and scalable web application ecosystem, where changes in the frontend can be seamlessly accommodated by the backend, thanks to the decoupled nature of the frontend and backend components.

Additionally, using JPA repository simplifies database operations, abstracting away low-level details and providing a more intuitive interface for interacting with the database.

API Rest

API Rest documentation

A REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of REST architectural style and allows for interaction with RESTful web services. REST stands for representational state transfer and was created by computer scientist Roy Fielding.

326690222-24e2fda5-781e-4db8-b7ad-e554021ca921

H2 database

H2, the Java SQL database. The main features of H2 are:

Very fast, open source, JDBC API
Embedded and server modes; in-memory databases
Browser based Console application
Small footprint: around 2.5 MB jar file size

H2 Database is an open-source relational database management system (RDBMS) written in Java. It is designed to be fast, lightweight, and embeddable, making it suitable for development, testing, and small to medium-sized applications. H2 Database supports standard SQL syntax and provides features such as transactions, triggers, stored procedures, and more.

One of the notable features of H2 Database is its ability to run in embedded mode, where it can be embedded within Java applications, allowing developers to create self-contained applications with an embedded database. Additionally, H2 Database supports in-memory databases, which are stored entirely in RAM, providing extremely fast read and write operations, albeit with data being volatile and not persisted beyond the lifetime of the application.

H2 Database is popular among developers for its simplicity, performance, and ease of integration, making it a preferred choice for projects requiring an embedded or lightweight database solution.

MongoDB

Deploy MongoDB: Create a cluster in the MongoDB Atlas UI or the Atlas CLI quickly and easily. To learn more, see Create a Cluster in the MongoDB Atlas documentation and Get Started with Atlas in the Atlas CLI documentation.

For self-hosted deployments, see Replication in the MongoDB manual to create a replica set.

Connect to your deployment: Access deployments in the MongoDB Atlas UI or connect with drivers or the MongoDB Shell (mongosh) in the MongoDB manual.

To learn more, see Find Your Connection String in the MongoDB manual.

Insert, query, update, or delete documents: Perform CRUD operations in the MongoDB Atlas UI or by using the MongoDB Query API - with or without transactions.

To learn more, see Create, View, Update, and Delete Documents in the MongoDB Atlas documentation and MongoDB CRUD Operations in the MongoDB manual.

Model your data: Design your data schema to support frequent access patterns. You can update or enforce your schema at any point.

To learn more, see Data Modeling Introduction in the MongoDB manual.

Document Database

Note

A record in MongoDB is a document, which is a data structure composed of field and value pairs. MongoDB documents are similar to JSON objects. The values of fields may include other documents, arrays, and arrays of documents.

The advantages of using documents are: