Featured

Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

In this tutorial, ozenero.com shows you way to upload, get, delete Files to/from Firebase Storage in a simple Angular 8 App using @angular/fire. Files’ info will be stored in Firebase Realtime Database.

Related Posts:
Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
Angular 8 Firebase CRUD operations with @angular/fire
Angular 8 Firestore tutorial with CRUD application example – @angular/fire

Want to know to to deploy Angular App on Hostings?
>> Please visit this Series (with Instructional Videos)

Continue reading “Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire”

Featured

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

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.

Related Posts:
MariaDB – How to use Spring JPA MariaDB | Spring Boot
Vue Router example – with Nav Bar, Dynamic Route & Nested Routes
Reactjs JWT Authentication Example

Continue reading “Vue.js + Spring Boot example | Spring Data JPA + REST + MariaDB CRUD”

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
– Kubernate K8s

Epic Architecture

Epic Architecture Design
Epic Architecture Design

1. Web-Parse Service: using to parse text from Web-URL

Web-Parse Service Project Structure
Web-Parse Service Project Structure

2. Ad-Tech Service: interact with Web-parse service and process to category a web-page.

Ad-Tech Service Project Structure
Ad-Tech Service Project Structure

Distributed Patterns

1. Distributed Tracking: using Spring Cloud Sleuth

Distributed Tracing with Spring Cloud Sleuth
Distributed Tracing with Spring Cloud Sleuth

2. Pattern Circuit Breaker – for cascading issue in distributed environments
In the Ad-Tech-Service, we use feign for calling API of Web-Parsing service with below configuration:

feign:
  client:
    config:
      default:
        connectTimeout: 20000
        readTimeout: 20000
        loggerLevel: BASIC

Web-Parse Service API

  /api/parse:
    post:
      summary: "POST api/parse"
      operationId: "parseWeb"
      responses:
        "200":
          description: "OK"
Web Parse Service API
Web Parse Service API

* Unit Testing:

Web-Parse Service Unit Test
Web-Parse Service Unit Test

Ad-Tech Service

  /api/categories:
    post:
      summary: "POST api/categories"
      operationId: "getUrlCategories"
      responses:
        "200":
          description: "OK"
Ad-Tech Service API
Ad-Tech Service API

* Unit Testing

Ad-Tech Service Unit-Testing
Ad-Tech Service Unit-Testing

Docker file

FROM adoptopenjdk:11-jre-hotspot
ARG JAR_FILE=*.jar
COPY ${JAR_FILE} application.jar
ENTRYPOINT ["java", "-jar", "application.jar"]

Kubernate Deployment + Service

1. Web-parse Service:
– Deployement:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: webparser
spec:
  replicas: 1
  selector:
    matchLabels:
      app: webparser
  template:
    metadata:
      labels:
        app: webparsers
    spec:
      containers:
        - name: app
          image: ozenero/web-parser:1.0.0
          ports:
            - containerPort: 9000
          imagePullPolicy: Always

– Service:

apiVersion: v1
kind: Service
metadata:
  name: webparser
spec:
  selector:
    app: webparser
  ports:
    - port: 9000
      targetPort: 9000
  type: ClusterIP

2. Ad-Tech Service:

– Deployment:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: adtech
spec:
  replicas: 1
  selector:
    matchLabels:
      app: adtech
  template:
    metadata:
      labels:
        app: adtech
    spec:
      containers:
        - name: app
          image: ozenero/ad-tech:1.0.0
          ports:
            - containerPort: 8080
          env:
            - name: WEB_PARSE_URL
              value: webparsers:9000/web-parser
          imagePullPolicy: Always

– Service:

apiVersion: v1
kind: Service
metadata:
  name: adtech
spec:
  selector:
    app: adtech
  ports:
    - port: 8080
      targetPort: 8080
  type: LoadBalancer

Why we use type: LoadBalancer for Ad-Service?
=> Because default is type: ClusterIP
We use type: LoadBalancer for public traffic-loading.

Note:

          env:
            - name: WEB_PARSE_URL
              value: webparsers:9000/web-parser

This is the url for feign calling from Ad-Tech service to Web-Parse service.

For kubectl-deployment, using cmd:

kubectl apply -f kube

For scaling, using cmd:

kubectl scale --replicas=2 deployment/webparser
kubectl scale --replicas=2 deployment/adtech

GitHub

– Ad-Tech Service
https://github.com/loizenai/ad-tech-service
– Web-Parse Service
https://github.com/loizenai/web-parser-service/

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.

​java -jar lombok-1.16.6.jar
​function helloWorld(str) {
    document.open();
    document.write(str);
    document.close();
}
helloWorld('

Hello, World!

');

installation

The Lombok executable will scan the installation directory to find if an Eclipse installable exists. It might complain the “I can’t find any IDEs on your computer .. use “Specify Location”…”. In this case, you can specify your own location.

To do so, click “Specify Location…”.
​Now navigate to the eclipse.ini file of your eclipse. E.g. When I am using STS, I have my eclipse *.ini located here.
​/Development/sts-bundle/STS/Contents/Eclipse/STS.ini

Proceed with Installation now.

Once done, launch your eclipse. Add lombok to your classpath if not already added. When using maven’s managed dependency, the following dependency can be added.

    
        org.projectlombok
        lombok
        {your-lombok-version-here}
    

Restart Eclipse

Restart your eclipse if the settings have not taken place. That’s it. You are now setup to use all features of lombok in your favorite coding IDE.

Here is a sample class using lombok’s Data property. This will generate getters and setters for you – so a getDay method is available for use – even though it is not visible here.

package com.example.boot.diner;

import lombok.Data;

@Data public class TrivialDinerRequest {

    private String day;

}

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

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

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.

Related posts:
Angular 14 Service – with Observable Data for Asynchronous Operation
Angular 14 Routing/Navigation – with Angular Router Service
Angular 14 Template Driven Form – NgModel for Two-Way Data Binding

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

Angular 14 + Nodejs/Express – Error Handler HttpClient – catchError + retry example

Angular 14 + Nodejs/Express – Error Handler HttpClient – catchError + retry example

In the tutorial, we show how to handle error from Angular HttpClient with catchError & retry when request fails on the server, or in case of a poor network connection.

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

Continue reading “Angular 14 + Nodejs/Express – Error Handler HttpClient – catchError + retry example”

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.

Related posts:
Error Handler Angular 14 HttpClient – catchError + retry – with Node.js/Express example

Continue reading “Angular 14 Http Interceptor – with Node.js RestAPIs”