-
Notifications
You must be signed in to change notification settings - Fork 11
Home
Welcome to the simulations wiki!
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;
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 | ??? |
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
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.
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.
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.
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.
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:
- Documents correspond to native data types in many programming languages.
- Embedded documents and arrays reduce need for expensive joins.
- Dynamic schema supports fluent polymorphism.
React - Spring Boot - API Rest - H2 DataBase - Axios - React_router_dom - JPA