DEV Community: loizenai

Vue.js + Spring Boot example | Spring Data JPA + REST + MariaDB CRUD

loizenai — Wed, 30 Nov 2022 16:35:39 +0000

https://ozenero.com/vue-js-spring-boot-example-spring-data-jpa-rest-mariadb-crud-example

Tutorial: Vue.js SpringBoot CRUD MariaDB Example | Spring Data JPA + REST + MariaDB CRUD

In this Vue.js SpringBoot tutorial, we show you Vue.js Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with MariaDB and Vue.js as a front-end technology to make request and receive response.

Angular 6 – Display Image from Amazon S3 with SpringBoot RestAPI + Bootstrap 4 Example

loizenai — Wed, 30 Nov 2022 16:30:12 +0000

https://ozenero.com/angular-6-display-image-from-amazon-s3-with-springboot-restapi-bootstrap-4-example

Technologies
Angular 6
Bootstrap 4
Java 1.8
Spring Boot 2.0.4.RELEASE
Maven 3.3.9
Spring Tool Suite 3.9.0.RELEASE
Amazon S3

Node.js/Express RestAPIs – Angular 14 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4

loizenai — Tue, 29 Nov 2022 17:15:13 +0000

Angular provides the HttpClient in @angular/common/http for front-end applications communicate with backend services. In the tutorial, we show how to build an Angular application that uses the HttpClient to make get/post/put/delete requests with Observable apis to Node.js RestAPIs.

https://ozenero.com/node-js-express-restapis-angular-14-httpclient-get-post-put-delete-requests-bootstrap-4

Angular 14 Http Interceptor – with Node.js RestAPIs

loizenai — Tue, 29 Nov 2022 17:13:55 +0000

https://ozenero.com/angular-14-http-interceptor-with-node-js-restapis

Angular provides HTTP Interception to inspect and transform HTTP requests from your application to the server. In the tutorial, we show how to build an Angular 14 Http Log Interceptor with Node.js RestAPIs.

Technologies
Angular 14
RxJS 6
Bootstrap 4
Visual Studio Code – version 1.24.0
Nodejs – v8.11.3
Angular HTTP Interception
@angular/common/http has a major feature HTTP Interception that helps inspect and transform HTTP requests.

More at: https://ozenero.com/angular-14-http-interceptor-with-node-js-restapis

Micro-Service Example with Tech-Ads: SpringBoot + Distributed Tracking + Circuit Breaker

loizenai — Mon, 28 Nov 2022 16:09:52 +0000

https://ozenero.com/micro-service-example-with-tech-ads-springboot-distributed-tracking-circuit-breaker

Adtech is an important part of running a digital advertising campaign. Advertisers use adtech to buy, manage, and measure digital advertising. If you’re looking to get started with adtech, read on to learn about the adtech basics, including common tools and services, and the benefits of creating an advertising strategy that leverages adtech.

In the tutorial, I just log how to build a simple micro-service system for Ad-Tech.

Technologies

SpringBoot
Java 8
Spring-Cloud: Sleuth
Lombok
Spring Aspect
Open-Feign
Spring Actuator
Docker
Epic Architecture

[caption id="attachment_196480" align="alignnone" width="1624"] Epic Architecture Design[/caption]

Web-Parse Service: using to parse text from Web-URL
[caption id="attachment_196489" align="alignnone" width="902"] Web-Parse Service Project Structure[/caption]
Ad-Tech Service: interact with Web-parse service and process to category a web-page.
[caption id="attachment_196488" align="alignnone" width="902"] Ad-Tech Service Project Structure[/caption]

Install Lombok

loizenai — Sun, 27 Nov 2022 13:28:01 +0000

https://ozenero.com/how-to-install-lombok

What is Lombok
Lombok is a great way to have boiler-plate code, especially getters and setters generated on the fly for you. The result is a clean and pithy bean definition.

Download the Lombok

Download the Lombok jar from Project Lombok’s home page: ProjectLombok
Navigate (cd) to the downloaded location.
Find and Execute the Lombok Jar as follows from the command line/terminal.

Spring Security JWT Authentication example – RestAPIs SpringBoot + Spring MVC + Spring JPA + MySQL

loizenai — Sun, 27 Nov 2022 10:04:19 +0000

https://ozenero.com/spring-security-jwt-authentication-restapis-springboot-spring-mvc-spring-security-spring-jpa-mysql

Spring Security JWT Authentication architecture
This is diagram for Spring Security/JWT classes that are separated into 3 layers:
– HTTP
– Spring Security
– REST API

https://ozenero.com/angular-spring-boot-jwt-authentication-example-angular-6-spring-security-mysql-full-stack-part-2-build-backend

MicroService iCommerce APIs – MVP (SpringBoot + Java 11)

loizenai — Sun, 27 Nov 2022 10:02:15 +0000

https://ozenero.com/microservice-icommerce-apis-design-springboot-java-11

API Details
We have 2 main groups of APIs:
– Authentication-API: Sign-in/Sign-Up APIs
– Functional APIs: Filter Products API / Card-Items APIs
Others API:
– Initial Data API for Demo
– ElasticSearch API for retrieve data

https://ozenero.com/wp-content/uploads/2022/08/Screenshot-2022-08-14-at-14.38.13.png

Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

loizenai — Thu, 10 Jun 2021 10:01:15 +0000

https://ozenero.com/angular-6-template-driven-form-ngmodel-for-two-way-data-binding

Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

In the tutorial, we show how to develop an Angular Form using Template-Driven Form approach with ngModel for two-way data binding, visual feedback and handling error messages.

Node.js – version v10.4.0
Angular – version 6
Bootstrap 4
Visual Studio Code – version 1.24.0

Objectives

We build an Angular project as below structure:

Workflow

-> Initial form:

Input Name, Age and select Nationality option:
-> Valid data form:

-> Press Submit button to submit form:

Press Edit button, The Data Form will be appeared again.
Delete text of Name input, and select bank value for Nationality input. -> Error Alert Message appeares:

Angular Template Driven Form

Project Setup

Generate Angular project:

More at:

https://ozenero.com/angular-6-template-driven-form-ngmodel-for-two-way-data-binding

Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

loizenai — Tue, 08 Jun 2021 16:15:34 +0000

https://ozenero.com/spring-jpa-postgresql-angularjs-example-spring-boot

https://ozenero.com/spring-boot-spring-security-jwt-authentication-architecture-tutorial

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

In this tutorial, JavaSampleApproach shows you a Spring Boot example that uses Spring JPA to interact with PostgreSQL and AngularJS as a front-end technology to make request and receive response.

1. Goal

We'll build a Spring Boot Application in that:

REST Service provides interface for interacting with Customer Database (PostgreSQL) using Spring JPA.
By using AngularJS to make HTTP request to REST Service and receive response, UI can save Customer Data (id, firstName, lastName), retrieves and displays:
All Customers in database.
Customer Data by customerId.
Customers List by lastName.
2. Technology
Java 1.8
Maven 3.3.9
Spring Tool Suite – Version 3.8.4.RELEASE
Spring Boot: 1.5.4.RELEASE
3. Project Structure

Our Application has 2 main parts: REST Service & UI

REST Service:
Customer Class corresponds to entity and table customer, it should be implemented Serializable.
CustomerRepository is an interface extends CrudRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: /postcustomer, /findall, /customer/{id}, /findByLastName.
Configuration for Spring Datasource and Spring JPA properties in application.properties.
Response class defines structure for returned data of HTTP GET.

To understand deeply the code about JPA that uses in this example, please visit:
How to use Spring JPA with PostgreSQL | Spring Boot

UI: uses AngularJS for HTTP POST/GET requests:
home.jsp contains elements for POST/GET request and display results.
controller() and $http.get()/$http.post() methods in angular.js Javascript file.
WebController maps url to home.jsp page.

https://ozenero.com/spring-jpa-postgresql-angularjs-example-spring-boot

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

loizenai — Tue, 08 Jun 2021 06:37:25 +0000

Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

https://ozenero.com/spring-boot-angular-6-example-spring-data-rest-mongodb-crud-example

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring Data to do CRUD with MongoDb and Angular 6 as a front-end technology to make request and receive response.

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.3.RELEASE
– Angular 6

RxJS 6
II. Overview

Demo

1. Spring Boot Server

2. Angular 6 Client

III. Practice

1. Project Structure

1.1 Spring Boot Server

Customer class corresponds to entity and table customer.
CustomerRepository is an interface extends MongoRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAllCustomers, postCustomer, deleteCustomer, deleteAllCustomers, findByAge, updateCustomer.
Configuration for Spring Datasource and Spring Data properties in application.properties
Dependencies for Spring Boot and MongoDb in pom.xml
1.2 Angular 6 Client

In this example, we focus on:

4 components: customers-list, customer-details, create-customer, search-customer.
3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
customer.service.ts: Service for Http Client methods
2. How to do

2.1 Spring Boot Server

2.1.1 Dependency

More at:

Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

https://ozenero.com/spring-boot-angular-6-example-spring-data-rest-mongodb-crud-example

Create a new Angular 4 Component – Multiple Components Angular Application

loizenai — Sun, 23 May 2021 07:35:20 +0000

https://grokonez.com/frontend/angular/create-new-angular-4-component-multiple-components

Create a new Angular 4 Component – Multiple Components Angular Application

The previous post, We had introduced how to set up an Angular 4 App with SpringBootSuite. In the tutorial, JavaSampleApproach will show you how to create a new Angular 4 Component and build an Angular Application with multiple Components.

Angular 6:

Angular 6 Component – How to create & integrate New Angular 6 Component

How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite

I. Technologies

– Angular 4
– SpringToolSuite: Version: 3.8.0.RELEASE

II. Angular Component

Example:

import { Component, OnInit } from '@angular/core';
import { Customer } from './customer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  customers: Customer[];
  selectedCustomer: Customer;

  constructor() {}

  getCustomers() {
     ...
  }

  ngOnInit(): void {
     this.customers = this.getCustomers();
  }

}

What is Component?
-> Component is a basic building block of Angular Application. It allows us to mark a logic class, and additional metadata for processing at runtime. Components have a template (in above code is './app.component.html') and only one component can be instantiated per an element in a template.
A component must belong to an NgModule. So you should declare it in a NgModule:

More at:

https://grokonez.com/frontend/angular/create-new-angular-4-component-multiple-components

Create a new Angular 4 Component – Multiple Components Angular Application

DEV Community: loizenai

Vue.js + Spring Boot example | Spring Data JPA + REST + MariaDB CRUD

Angular 6 – Display Image from Amazon S3 with SpringBoot RestAPI + Bootstrap 4 Example

Node.js/Express RestAPIs – Angular 14 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4

Angular 14 Http Interceptor – with Node.js RestAPIs

Micro-Service Example with Tech-Ads: SpringBoot + Distributed Tracking + Circuit Breaker

Technologies

Epic Architecture

Install Lombok

Spring Security JWT Authentication example – RestAPIs SpringBoot + Spring MVC + Spring JPA + MySQL

MicroService iCommerce APIs – MVP (SpringBoot + Java 11)

Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Technologies

Objectives

Angular Template Driven Form

Project Setup

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

I. Overview

1. Goal

2. Technology

3. Project Structure

Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

I. Technologies

II. Overview

Demo

1. Spring Boot Server

2. Angular 6 Client

III. Practice

1. Project Structure

1.1 Spring Boot Server

1.2 Angular 6 Client

2. How to do

2.1 Spring Boot Server

2.1.1 Dependency

Create a new Angular 4 Component – Multiple Components Angular Application

I. Technologies

II. Angular Component