loizenai | Mobile & Web Programming Tutorials

Angular 10 SpringBoot CRUD DynamoDB Example

Tutorial: “Angular 10 SpringBoot CRUD DynamoDB Example”

In the tutorial, I introduce how to create an “SpringBoot Angular 10 DynamoDB CRUD Example” with POST/GET/PUT/DELETE requests to SpringBoot RestAPIs.

– Design overview system by Architecture Diagram that includes: Angular 10 Client, SpringBoot RestAPIs, and DynamoDB database.
– Implement Angular 10 CRUD Client with Angular 10 built-in HttpClient to communicate with server side.
– Implement SpringBoot RestAPIs that gets data from DynamoDB using Spring Data JPA and returns back data as Json format to requested Angular 10 Client.

You can check out the complete code of the application on this github repository.

Continue reading “Angular 10 SpringBoot CRUD DynamoDB Example”

Angular 10 SpringBoot CRUD Oracle Example

Tutorial: “Angular 10 SpringBoot CRUD Oracle Example”

In the tutorial, I introduce how to create an “SpringBoot Angular 10 Oracle CRUD Example” with POST/GET/PUT/DELETE requests to SpringBoot RestAPIs.

– Design overview system by Architecture Diagram that includes: Angular 10 Client, SpringBoot RestAPIs, and Oracle database.
– Implement Angular 10 CRUD Client with Angular 10 built-in HttpClient to communicate with server side.
– Implement SpringBoot RestAPIs that gets data from Oracle using Spring Data JPA and returns back data as Json format to requested Angular 10 Client.

You can check out the complete code of the application on this github repository.

Continue reading “Angular 10 SpringBoot CRUD Oracle Example”

Angular 10 SpringBoot CRUD MariaDB Example

Tutorial: “Angular 10 SpringBoot CRUD MariaDB Example”

In the tutorial, I introduce how to create an “SpringBoot Angular 10 MariaDB CRUD Example” with POST/GET/PUT/DELETE requests to SpringBoot RestAPIs.

– Design overview system by Architecture Diagram that includes: Angular 10 Client, SpringBoot RestAPIs, and MariaDB database.
– Implement Angular 10 CRUD Client with Angular 10 built-in HttpClient to communicate with server side.
– Implement SpringBoot RestAPIs that gets data from MariaDB using Spring Data JPA and returns back data as Json format to requested Angular 10 Client.

You can check out the complete code of the application on this github repository.

Continue reading “Angular 10 SpringBoot CRUD MariaDB Example”

Tutorial: Angular 10 CRUD Firestore Example – use @angular/fire: Post/get/delete/update query documents

The Firestore is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime. We can structure data in our ways to improve querying and fetching capabilities. So in the tutorial, I introduce how to build an “Angular 10 CRUD Firestore Example” project with the help of @angular/fire lib to do CRUD operation: POST/GET/PUT/DELETE queries with step by step coding examples.

– I draw a fullstack overview diagram architecture from Angular frontend to Cloud Firestore.
– I illustrate details about @angular/fire CRUD operations.
– I implement Angular 10 CRUD application with the @angular/fire lib to do CRUD queries (Post/Get/Put/Delete document) to Cloud Firestore.

Continue reading “Tutorial: Angular 10 CRUD Firestore Example – use @angular/fire: Post/get/delete/update query documents”

Integrate Angular 10 Firestore Tutorial using @angular/fire

Tutorial: Integrate Angular 10 Firestore using @angular/fire

Firestore is a NoSQL document database built for automatic scaling, high performance, and ease of application development. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. So In the tutorial, I introduce an example “Integrate Angular 10 Firestore using @angular/fire”.

– I draw overview diagram architecture of our system.
– Create a Firebase account and setup Cloud Firestore.
– Setup an Angular WebApp that integrate with Firestore.

Continue reading “Integrate Angular 10 Firestore Tutorial using @angular/fire”