DEV Community: Amalia Hajarani

How to: Integrating Socket.IO with Spring Boot and React (React Implementation)

Amalia Hajarani — Wed, 06 Dec 2023 03:28:20 +0000

Prerequisite

Node version of 20.10.0

Initializing React-Vite project

Open a directory dedicated to save this project.
Open command prompt from that directory. Run this command: npm create vite@latest .
Choose React by moving your arrow key in keyboard. Then hit enter.
Choose JavaScript for a variant. Then hit enter.
Now run npm install. ## Installing dependencies I have some preferred dependency to install to make development easier like css framework and such. Still in the command prompt directed to your project directory, run these commands: ### Installing Material UI npm install @mui/material @emotion/react @emotion/styled ### Installing Axios npm install axios ### Installing Socket.io-client We are going to use specific version. npm install socket.io-client@2.1.1 ### Installing Formik and Yup npm install formik yup ## Creating project skeleton This is the overview of my project skeleton inside src directory: . └── src/ ├── assets/ ├── components/ ├── hooks/ ├── service/ ├── views/ ├── app.jsx ├── index.css ├── main.jsx └── theme.js

Defining theme

This step is actually not necessary, but if you want to customize some things like typography and stuffs, you might want to follow this step. As you can see in my src skeleton. I have a file called theme.js. If you already create that, this is my content of the file:

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme({
  palette: {
    primary: {
      main: "#003c6d",
      contrastText: "#fff"
    },
    secondary: {
      main: "#B0B0B0",
    }
  },
  typography: {
    fontFamily: [
      'Roboto', 
      'sans-serif'
    ].join(',')
  },
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
              borderRadius: 8,
          },
        }
      }
    },
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          paddingTop: 12,
          paddingBottom: 12
        }
      }
    }
  }
});

theme = responsiveFontSizes(theme);

export default theme;

I'm using font from Google font, hence I need to update the index.css like this (and this is also my final index.css):

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  font-family: 'Roboto', sans-serif;
}

::-webkit-scrollbar {
  display: none;
}

To apply the theme that we've already created, open App.jsx. This is how my final App.jsx lookslike:

import { ThemeProvider } from '@mui/material';
import { useState } from 'react';
import theme from './theme';
import ChatRoom from './views/ChatRoom';
import Login from './views/Login/indes';

function App() {
  const [username, setUsername] = useState("");
  const [room, setRoom] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <ThemeProvider theme={theme}>
      {
        !isLoggedIn ? (
          <Login
            room={room}
            setRoom={setRoom}
            username={username}
            setUsername={setUsername}
            setIsLoggedin={setIsLoggedIn}
          />
        ) : (
          <ChatRoom 
            username={username}
            room={room}
          />
        )
      }
    </ThemeProvider>
  )
}

export default App

If you see the coed above carefully, the theme.js is used along with <ThemeProvider theme={theme}> </ThemeProvider> tag.

App.jsx explanation

I'm not using routing in this project like the tutorial I've been mentioned in the first post. So, the logic is actually pretty simple. It uses an approach like lifting state up where Login return the most updated state of username, room and isLoggedIn to the parent (App.jsx) to be then consumed by ChatRoom component.

Configuring .env file

On your project root directory, create a new file called .env. And fill it with your server-side address which by the way is your IPv4 address and the port where socket is running. Mine is at 8086.

VITE_API_BASE_URL=http://{YOUR_IPv4_ADDRESS}:8080
VITE_SOCKET_BASE_URL=http://{YOUR_IPv4_ADDRESS}:{SOCKET_PORT}

Defining service

To working with the messages, we will create a service to communicate with our server side endpoint.

In service directory, create a new directory called config.

Create a new file called axiosConfig.js at config.

import axios from "axios";

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

const api = axios.create({
    baseURL: API_BASE_URL,
});

export default api;

Back to service directory, create a new directory called socket.

Create a new file called index.js at socket directory.

import api from "../config/axiosConfig";

export const getSocketResponse = async (room) => {
  try {
    const res = await api.get('/message/' + room);
    return res.data;
  } catch (error) {
    console.log(error);
  }
}

Defining custom hook

In hooks directory, create a new file called useSocket.js.

import { useCallback, useEffect, useState } from "react";
import * as io from 'socket.io-client'

export const useSocket = (room, username) => {
    const [socket, setSocket] = useState();
    const [socketResponse, setSocketResponse] = useState({
        room: "",
        message: "",
        username: "",
        messageType:"",
        createdAt: ""
    });
    const [isConnected, setConnected] = useState(false);

    const sendData = useCallback((payload) => {
        socket.emit("send_message", {
            room: room,
            message: payload.message,
            username: username,
            messageType: "CLIENT"
        });
    }, [socket, room]);

    useEffect(() => {
        const socketBaseUrl = import.meta.env.VITE_SOCKET_BASE_URL;
        const s = io(socketBaseUrl, {
            query: `username=${username}&room=${room}`
        });
        setSocket(s);
        s.on("connect", () => {
            setConnected(true);
        });
        s.on("connect_error", (error) => {
            console.error("SOCKET CONNECTION ERROR", error);
        });
        s.on("read_message", (res) => {
            setSocketResponse({
                room: res.room,
                message: res.message,
                username: res.username,
                messageType: res.messageType,
                createdAt: res.createdAt
            });
        });

        return () => {
            s.disconnect();
        };
    }, [room, username]);

    return { isConnected, socketResponse, sendData };
}

Creating Views

Creating Login view

Open views directory, create a new directory called Login.

Inside Login directory, create a new file called index.jsx. Here, we're using Formik and Yup to validate login form, make sure all field is filled before the user allowed to enter a chat room.

import { Button, Container, Grid, TextField, Typography } from '@mui/material';
import { useFormik } from 'formik';
import React from 'react';
import * as Yup from 'yup';

const initialValues = {
  username: "",
  room: ""
};

const validationSchema = Yup.object().shape({
  username: Yup.string().required(),
  room: Yup.string().required()
});

function Login({ setRoom, setUsername, setIsLoggedin }) {

  const onLogin = () => {
    setUsername(formik.values.username);
    setRoom(formik.values.room);
    setIsLoggedin(true);
  };

  const formik = useFormik({
    initialValues: initialValues,
    validationSchema: validationSchema,
    onSubmit: () => {
      onLogin();
    },
  });

  return (
    <Container>
        <Grid 
          container 
          gap={5}
          flexDirection={'column'} 
          alignItems={"center"} 
          justifyContent={"center"} 
          height={'97vh'}
        >
          <Grid item sx={{ width: '60%' }}>
            <Typography variant='h3' fontWeight={"bold"} color={"primary"}>Hello!</Typography>
            <Typography color={"secondary"}>Login with your username</Typography>
          </Grid>
          <Grid item sx={{ width: '60%' }}>
            <TextField 
              id="outlined-basic"
              name="username" 
              label="Username" 
              variant="outlined"
              value={formik.values.username}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              fullWidth
              error={formik.touched.username && formik.errors.username}
              helperText={formik.touched.username && formik.errors.username && "Username cannot be empty"}
            />
          </Grid>
          <Grid item sx={{ width: '60%' }}>
            <TextField 
              id="outlined-basic" 
              name="room" 
              label="Room" 
              variant="outlined"
              value={formik.values.room}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              fullWidth
              error={formik.touched.room && formik.errors.room}
              helperText={formik.touched.room && formik.errors.room && "Room cannot be empty"}
            />
          </Grid>
          <Grid item sx={{ width: '60%' }}>
            <Button
              fullWidth
              variant="contained"
              type='submit'
              onClick={formik.handleSubmit}
            >
              Login
            </Button>
          </Grid>
        </Grid>
    </Container>
  )
};

export default Login;

Creating ChatRoom view

Open views directory, create a new directory called ChatRoom.

Inside ChatRoom directory, create a new file called index.jsx. Below is the content of this view, but mind that we haven't create ChatBubble component.

import { Box, Button, Container, Grid, TextField, Typography } from '@mui/material';
import React, { useEffect, useState } from 'react';
import ChatBubble from '../../components/ChatBubble';
import { useSocket } from '../../hooks/useSocket';
import { getSocketResponse } from '../../service/socket';
import { connect } from 'formik';

function ChatRoom({ username, room }) {
  const { isConnected, socketResponse, sendData } = useSocket(room, username);
  const [messageInput, setMessageInput] = useState("");
  const [messageList, setMessageList] = useState([]);

  const addMessageToList = (val) => {
    if (val.room === "") return;
    setMessageList([...messageList]);
    fetchMessage();
  }

  const sendMessage = (e) => {
    e.preventDefault();
    if (messageInput !== "") {
      sendData({
        message: messageInput
      });
      addMessageToList({
        message: messageInput,
        username: username,
        createdAt: new Date(),
        messageType: "CLIENT"
      });
      setMessageInput("");
    }
  }

  const fetchMessage = () => {
    getSocketResponse(room)
            .then((res) => {
                setMessageList([...res]);
            }).catch((err) => {
                console.log(err);
            });
  }

  useEffect(() => {
    fetchMessage();
  }, []);

  useEffect(() => {
    addMessageToList(socketResponse);
  }, [socketResponse]);

  return (
    <Container>
      <Grid
        container 
        gap={3}
        flexDirection={'column'} 
        alignItems={"center"} 
        justifyContent={"center"} 
        height={'97vh'}
      >
        <Grid item sx={{ width: '60%' }}>
          <Typography variant='h5'>
            Welcome to room <b>{room}</b>, {username}.
          </Typography>
        </Grid>
        <Grid item sx={{ width: '60%', bgcolor: '#ccd8e2', paddingX: '2rem', borderRadius: 6 }}>
          <Box 
            className="chat-box"
            sx={{ 
              width: '100%',
              paddingY: '2rem',
              borderRadius: 4,
              height: '60vh',
              overflow: 'auto'
            }}
          >
            {
              messageList.map((message) => {
                if (message.messageType === 'CLIENT') {
                  console.log(message);
                  return (
                    <ChatBubble
                      key={message.id} 
                      isSender={message.username === username}
                      username={message.username}
                      message={message.message}
                      time={"12:12"}
                    />
                  )
                } 
              })
            }
          </Box>
          <Grid 
            container 
            alignItems={"center"}
            width={"100%"} 
            sx={{
              paddingY: '0.5rem',
              borderTop: '2px solid #99b1c5',
            }}
          >
            <Grid item xs={11}>
              <TextField 
                variant="standard"
                placeholder='Type your message'
                value={messageInput}
                onChange={(e) => setMessageInput(e.target.value)}
                fullWidth
                InputProps={{
                  disableUnderline: true,
                  sx: {
                    paddingX: '0.5rem'
                  }
                }}
              />
            </Grid>
            <Grid item xs={1}>
              <Button
                onClick={(e) => sendMessage(e)}
              >
                Send
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Container>
  )
}

export default ChatRoom;

Creating ChatBubbleComponent

Moving to components directory, create a new directory called ChatBubble. Inside the newly created directory, create a new file called index.jsx.

import { Avatar, Box, Grid, Typography } from '@mui/material'
import React from 'react'

function ChatBubble({ isSender, username, message="" }) {
const avatar = "https://random.imagecdn.app/500/150";
const date = new Date();
const time = date.getHours() + ':' + date.getMinutes();
return (

container
gap={2}
flexDirection={isSender ? "row-reverse" : "row"}
sx={{
width: '100%',
display: 'flex',
justifyContent: isSender? 'end' : "start"
}}
>

{username}
sx={{
marginBottom: '0.5rem',
paddingRight: isSender ? '0.5rem' : '2rem',
paddingLeft: isSender ? '2rem' : '0.5rem',
paddingY: '0.25rem',
color: isSender ? '#e6ecf0' : '#001e37',
bgcolor: isSender ? '#001e37' : '#e6ecf0',
borderRadius: '8px'
}}>
{message}
{time}

)
}

export default ChatBubble;


## Running the application and demo.
1. Make sure server side service is running.
2. Open command prompt from project root directory and run:
    ```
    npm run dev
    ```
3. You will see this log if it's running correctly:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fr2gj9g1suvphcz1ku98.png)
4. Now open two windows of your selected browser. Go to the address given in command prompt.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2twtjwh7uni6dk1n2zdz.png)
5. Enter different usernames and same room at both windows. Then login.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6jg2secm9n4m63dykp4.png)
6. Try to chat from one account and see what happened:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb17i89wrb1a6rofzhcz.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emafsw9snhsiowab5mud.png)

How to: Integrating Socket.IO with Spring Boot and React (Spring Boot Implementation)

Amalia Hajarani — Wed, 06 Dec 2023 02:29:52 +0000

Hallo, dear reader. This post is actually my attempt to following an existing tutorial that was made by Gürkan UÇAR which tutorial can be seen at here. You can also find the working github here.

And my final result from following the tutorial can be seen at my github repository. In this post I would like to focus on how to build the server side service so let's start cooking!

Prerequisite

Java version of 17.
Visual Studio Code extension for Spring Initializr.

Initializing Java Spring Boor project with Maven

Open your Visual Studio Code.
To create new project, usually I hit ctrl + shift + p altogether, choose Spring Initializr: Create Maven Project.
We're going to use Spring Boot Version of 3.2.0.
We choose Java as the language.
Type your group id. Mine is com.tujuhsembilan
Type your artifact id. Mine is socketio.
Choose Jar as packaging type.
Choose Java Version of 17.

For the dependencies, you can seet at my POM.xml. If you can't find it, that's fine because you can add it manually later, once your project is generated.



<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.tujuhsembilan</groupId>
    <artifactId>socketio</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>socketio</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>17</java.version>
        <netty-socketio.version>1.7.17</netty-socketio.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.corundumstudio.socketio</groupId>
            <artifactId>netty-socketio</artifactId>
            <version>${netty-socketio.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

10. Choose where you want to save the project.

## Creating project skeleton
1. Open `src\main\java\com\{your_group_id}\{your_artifact_id}`. Mine is `src\main\java\com\tujuhsembilan\socketio`.
2. Now I would suggest you to create few new packages like this:
    ```


    src/
        └── main/
            └── java/
                └── com/
                    └── tujuhsembilan/
                        └── socketio/
                            ├── configuration/
                            ├── constants/
                            ├── controller/
                            ├── enums/
                            ├── model/
                            ├── repository/
                            ├── service/
                            └── socket/

Configuring application.properties

Usually, you can find application.properties at src\main\resources\application.properties. You can copy paste these lines to application.properties. Don't forget to make sure that the port for socket is free to use and more importantly, change the host to your IPv4 address.



socket-server.port=8086 // you can change this to port that is free to use
socket-server.host=191.167.1.28 // change this to your IPv4 address
spring.h2.console.enabled=true
spring.datasource.url=jdbc:h2:mem:database

Creating configurations

Open configuration package. Create a new class called SocketIOConfig.java. This is the content of the class:



package com.tujuhsembilan.socketio.configuration;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import com.corundumstudio.socketio.SocketIOServer;

@Configuration
public class SocketIOConfig {

    @Value("${socket-server.host}")
    private String host;

    @Value("${socket-server.port}")
    private Integer port;

    @Bean
    public SocketIOServer socketIOServer() {

        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        config.setHostname(host);
        config.setPort(port);

        return new SocketIOServer(config);
    }

}

2. Still in the same package, create another new class called `ServerCommandLineRunner.java`. This is the content:
    ```


    package com.tujuhsembilan.socketio.configuration;

    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.CommandLineRunner;
    import org.springframework.stereotype.Component;

    import com.corundumstudio.socketio.SocketIOServer;

    import lombok.RequiredArgsConstructor;

    @Component
    @RequiredArgsConstructor(onConstructor = @__(@Autowired))
    public class ServerCommandLineRunner implements CommandLineRunner {

        private final SocketIOServer server;

        @Override
        public void run(String... args) throws Exception {
            server.start();
        }
    }

Creating model

We only need a model called Message. Open your model package. Create a new file called Message.java. This is the content:



package com.tujuhsembilan.socketio.model;

import java.time.LocalDateTime;
import java.util.UUID;

import com.tujuhsembilan.socketio.enums.MessageType;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.EnumType;
import jakarta.persistence.Enumerated;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@Builder
@Getter
@Setter
@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Message {

    @Id
    @GeneratedValue(strategy = GenerationType.UUID)
    private UUID id;

    @Column 
    @Enumerated(EnumType.STRING)
    private MessageType messageType;

    @Column
    private String room;

    @Column
    private String username;

    @Column
    private String message;

    @Column
    private LocalDateTime createdAt;

}

Creating enums

As you might notice, we not yet have enums for messageType in the model. Hence, we need to create one. Open enums package, create a new class called MessageType.java and copy paste this:



package com.tujuhsembilan.socketio.enums;

public enum MessageType {
    SERVER, CLIENT
}

Now the Message model should be working fine.

Creating constants

Now, before moving further, let's create some constants. Open constants package. Create a new file called Constants.js and below is the content:



package com.tujuhsembilan.socketio.constants;

public class Constants {

public static final String WELCOME_MESSAGE = "%s joined to chat";
public static final String DISCONNECT_MESSAGE = "%s disconnected";



}

Creating repository

In repository package, create a new repository class called MessageRepository.java. This is the content for it:



package com.tujuhsembilan.socketio.repository;

import java.util.List;

import java.util.UUID;

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.stereotype.Repository;

import com.tujuhsembilan.socketio.model.Message;

@Repository

public interface MessageRepository extends JpaRepository<Message, UUID> {

    List<Message> findAllByRoom(String room);

}

Creating services

In service package, create a new class called MessageService.java.



package com.tujuhsembilan.socketio.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.tujuhsembilan.socketio.model.Message;
import com.tujuhsembilan.socketio.repository.MessageRepository;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor(onConstructor = @__(@Autowired))
public class MessageService {

    private final MessageRepository messageRepository;

    public List<Message> getMessage(String room) {
        return messageRepository.findAllByRoom(room);
    }

    public Message saveMessage(Message message) {
        return messageRepository.save(message);
    }
}

2. Create another class in the same package called SocketService.java.

    ```

package com.tujuhsembilan.socketio.service;

import org.springframework.stereotype.Service;

import com.corundumstudio.socketio.SocketIOClient;
import com.tujuhsembilan.socketio.enums.MessageType;
import com.tujuhsembilan.socketio.model.Message;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class SocketService {

    private final MessageService messageService;

    public void sendSocketmessage(SocketIOClient senderClient, Message message, String room) {
        for (
            SocketIOClient client: senderClient.getNamespace().getRoomOperations(room).getClients()
        ) {
            if (!client.getSessionId().equals(senderClient.getSessionId())) {
                client.sendEvent("read_message", message);
            }
        }
    }

    public void saveMessage(SocketIOClient senderClient, Message message) {

        Message storedMessage = messageService.saveMessage(
            Message.builder()
                .messageType(MessageType.CLIENT)
                .message(message.getMessage())
                .room(message.getRoom())
                .username(message.getUsername())
                .build()
        );

        sendSocketmessage(senderClient, storedMessage, message.getRoom());

    }

    public void saveInfoMessage(SocketIOClient senderClient, String message, String room) {
        Message storedMessage = messageService.saveMessage(
            Message.builder()
                .messageType(MessageType.SERVER)
                .message(message)
                .room(room)
                .build()
        );

        sendSocketmessage(senderClient, storedMessage, room);
    }
}

Creating socket module

Now, we are going to create a socket module. Open socket package, create a new file called SocketModule.java like this:



package com.tujuhsembilan.socketio.socket;

import java.util.stream.Collectors;

import org.springframework.stereotype.Component;

import com.corundumstudio.socketio.SocketIOServer;

import com.corundumstudio.socketio.listener.ConnectListener;

import com.corundumstudio.socketio.listener.DataListener;

import com.corundumstudio.socketio.listener.DisconnectListener;

import com.tujuhsembilan.socketio.constants.Constants;

import com.tujuhsembilan.socketio.model.Message;

import com.tujuhsembilan.socketio.service.SocketService;

import lombok.extern.slf4j.Slf4j;

@Slf4j

@Component

public class SocketModule {

private final SocketIOServer server;

private final SocketService socketService;

public SocketModule(SocketIOServer server, SocketService socketService) {
    this.server = server;
    this.socketService = socketService;
    server.addConnectListener(this.onConnected());
    server.addDisconnectListener(this.onDisconnected());
    server.addEventListener("send_message", Message.class, this.onChatReceived());
}

private DataListener&lt;Message&gt; onChatReceived() {
    return (senderClient, data, ackSender) -&gt; {
        log.info(data.toString());
        socketService.saveMessage(senderClient, data);
    };
}

private ConnectListener onConnected() {
    return (client) -&gt; {
        var params = client.getHandshakeData().getUrlParams();
        String room = params.get("room").stream().collect(Collectors.joining());
        String username = params.get("username").stream().collect(Collectors.joining());
        client.joinRoom(room);
        socketService.saveInfoMessage(client, String.format(Constants.WELCOME_MESSAGE, username), room);
        log.info("Socket ID[{}] - room[{}] - username [{}]  Connected to chat module through", client.getSessionId().toString(), room, username);
    };

}

private DisconnectListener onDisconnected() {
    return client -&gt; {
        var params = client.getHandshakeData().getUrlParams();
        String room = params.get("room").stream().collect(Collectors.joining());
        String username = params.get("username").stream().collect(Collectors.joining());
        socketService.saveInfoMessage(client, String.format(Constants.DISCONNECT_MESSAGE, username), room);
        log.info("Socket ID[{}] - room[{}] - username [{}]  discnnected to chat module through", client.getSessionId().toString(), room, username);
    };
}



}

Creating controller

Now, to get the message in a certain room, let's create a controller. Open controller package, create a new file called MessageController.java. This is the content for our controller:



package com.tujuhsembilan.socketio.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.ResponseEntity;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import com.tujuhsembilan.socketio.model.Message;

import com.tujuhsembilan.socketio.service.MessageService;

import lombok.RequiredArgsConstructor;

@RestController

@RequestMapping("/message")

@RequiredArgsConstructor(onConstructor = @__(@Autowired))

public class MessageController {

private final MessageService messageService;

@CrossOrigin
@GetMapping("/{room}")
public ResponseEntity&lt;List&lt;Message&gt;&gt; getMessages(@PathVariable String room) {
    return ResponseEntity.ok(messageService.getMessage(room));
}



}

Running the application

Since I have extension for Spring Boot in my Visual Studio code, I just went into SocketioApplication.java which located in src\main\java\com\tujuhsembilan\socketio\SocketioApplication.java and click Run. If the applicaion running well, this is the kind of log that you will see:

How to: Integrating Firebase Cloud Messaging - Angular - ExpressJs (2: Create and Integrate Angular with Firebase)

Amalia Hajarani — Fri, 01 Dec 2023 22:20:23 +0000

Prerequisites

Installed Node version of: v20.10.0.

Installing Angular Cli

You can see the official documentation for a better explanation.

Open command prompt and run command below: npm install -g @angular/cli

Create new Angular project

Open a command prompt from a dedicated directory to store your Angular project.
Run this command: ng new angular-with-firebase // you can change angular-with-firebase with anything else
You will be asked to configuring few things. For stysheet format, I choose CSS. Then hit enter.
I don't know much about this so I choose no by typing N, then hit enter.
Your project now is being created.
Once it done, open command prompt from inside your project and run ng serve to see our new project. By default, we will have it run at http://localhost:4200/.

Connecting Firebase with Angular

Configuring Firebase environment

Open your project dashboard on Firebase Console.
Click at settings icon near the Project Overview that you can find at upper left corner.
Choose Project settings.
Scroll down to your apps section. You will see a code snippet, the same one as when we first create the project. I choose npm because I will be using npm.
Back to our Angular project directory, open command prompt. Let's install Firebase by running: npm install firebase
Once Firebase package installed, open our project in a code editor. I'm using Visual Studio Code.

In src directory, create new directory called environments. Inside this new directory, create a new file called environment.ts. This is what is going to be inside that file:

export const environment = {
  production: false,
  firebaseConfig: {

    // to cut the chase, just copy it the snippet on step 3
    apiKey: "abcdefghijklmnopqrstuvwxyz",
    authDomain: "domain-firebase.firebaseapp.com",
    projectId: "project-id",
    storageBucket: "storage-bucket",
    messagingSenderId: "1234567890",
    appId: "acnqw3nry23ibcadmqomxue38e23e28x29m",
    measurementId: "G-6GG2Q2LX8S",

    // You are not yet have this
    vapidKey: ""
  }
}

To have your vapidKey, go back to your Firebase Project settings.
Go to Cloud Messaging tab.
Scroll until you see Web configuration section. Click Generate key pair button.
Copy the value under Key pair section.

Let's get back to step 7. Paste your key to vapidKey field.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "abcdefghijklmnopqrstuvwxyz",
    authDomain: "domain-firebase.firebaseapp.com",
    projectId: "project-id",
    storageBucket: "storage-bucket",
    messagingSenderId: "1234567890",
    appId: "acnqw3nry23ibcadmqomxue38e23e28x29m",
    measurementId: "G-6GG2Q2LX8S",
    vapidKey: "BIddLYYlBZA1mijjbsG5ixKrvNgCqmy2H-qgI-PXSn84danwe7dtJOXjs9IDhNo_nQK0QzRKA96ocW8SDbKk5nRU"
  }
}

Now, back to src directory, create new directory called configs. Inside that directory, create a new file called firebase.config.ts. This is the content of the newly created file:

import firebase from 'firebase/compat/app';
import { environment } from "../environments/environment";
import 'firebase/compat/messaging';

firebase.initializeApp(environment.firebaseConfig);
export const messaging = firebase.messaging();

Working with service workers

To work with service worker we going to need new dependency, so open a command prompt from your project directory and run: npm install @angular/service-worker
Go to Firebase Project Settings.
Go to Firebase Cloud Messaging API (V1), there you will see a table containing your Sender ID. Copy the Sender ID.
Back to our code editor, in src directory, create a file called manifest.json. Paste your Sender ID here. { "gcm_sender_id": "YOUR_SENDER_ID" }
Open index.html at the same directory, in head tag, add: <link rel="manifest" href="./manifest.json">

Still in src directory, create a file called firebase-messaging-sw.js.

importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-messaging-compat.js");

const firebaseConfig = {
  // to cut the chase, just copy it from your Firebase Project settings

    apiKey: "abcdefghijklmnopqrstuvwxyz",
    authDomain: "domain-firebase.firebaseapp.com",
    projectId: "project-id",
    storageBucket: "storage-bucket",
    messagingSenderId: "1234567890",
    appId: "acnqw3nry23ibcadmqomxue38e23e28x29m",
    measurementId: "G-6GG2Q2LX8S",
};

const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

Go to project root directory, and find angular.json. Add this line in assets:
```
"src/manifest.json",
 "src/firebase-messaging-sw.js"
```
Back to command prompt, run:
```
ng build
```

Creating new Angular Component

Open command prompt from your Angular project directory. Run this command: ng generate component notification --inline-template
Once it's done, you will see new directory inside src/app called notification.
Now, with your code editor, open notification.component.ts.

Now, let's cook something from here. To check if we already correctly configure anything, I add some simple function. Now, my notification.component.ts looks like:

import { Component, OnInit } from '@angular/core';
import { messaging } from '../../configs/firebase.config';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-notification',
  standalone: true,
  imports: [],
  template: `
    <p>
      notification works!
    </p>
  `,
  styleUrl: './notification.component.css'
})
export class NotificationComponent implements OnInit {

  ngOnInit(): void {
    this.requestPermission();
    this.listen();
  }

  requestPermission() {
    messaging.getToken({vapidKey: environment.firebaseConfig.vapidKey})
      .then((currentToken) => {
        if (currentToken) {
          console.log(currentToken);
        } else {
          console.log('No registration token available. Request permission to generate one.');
        }
      }).catch((err) => {
        console.log(err);
      });
  }

  listen() {
    messaging.onMessage((incomingMessage) => {
      console.log(incomingMessage);
    })
  }

}

Now, open app.component.ts which you can find at src\app\app.config.ts. Add NotificationComponent at imports section.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NotificationComponent } from './notification/notification.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, NotificationComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-with-firebase';
}

Open app.component.html at src\app\app.component.html. At the end of last div close tag, add <app-notification></app-notification>

Create a new file called app.module.ts at the same level directory as app.component.ts and app.component.html (here's the relative path: src\app\app.module.ts). Here's how I defined it:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NotificationComponent } from "./notification/notification.component";
import { messaging } from "../configs/firebase.config";

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    NotificationComponent
  ],
  providers: [
    { provide: 'messaging', useValue: messaging}
  ],
  bootstrap: []
})
export class AppModule {}

Now let's try running our application. In your project command prompt, run:
```
ng serve
```
Open our application at http://localhost:4200/.
You will be asked for notification permission. Allow it.
Now open your browser console by inspecting element. You will see your token in there. It means we already configured our application!

Checking push notification functionality

Make sure you are still running your Angular project.
Go to Firebase Project Settings.
Go to Cloud Messaging tab.
You will see this section.
In Cloud Messaging API (Legacy) which still disabled, click the kebab menu (the three dots).
Choose Manage API in Google Cloud Console.
You will be redirected to a new tab. Click Enable button.
Back to Firebase Project settings tab. Refresh it. You will see a new generated Server key by default.
Now open Postman. Create new POST request. The endpoint is https://fcm.googleapis.com/fcm/send.
Go to Headers tab.
Add Authorization as key and the value is key=your_server_key. Server key is something that you got from step 8.
Add another headers of Content-Type and choose application/json
Go to Body tab. Choose Raw and JSON then copy this: { "notification": { "title": "New Notification", "body": "This is a sample push notification." }, "to": "insert token from Angular project console" }
Click Send
In Postman, you will see this kind of response:
In your Angular project console, you will see a notification coming in at the console:

How to: Integrating Firebase Cloud Messaging - Angular - ExpressJs (Create Firebase App)

Amalia Hajarani — Fri, 01 Dec 2023 06:37:43 +0000

Hallo, dear reader! I'm coming back today! So, in this series, which is a short one, I will going to show you on how to create a very simple web app with push notification functionality using Firebase. I will tell you how do I do it step by step since it is my first time using Angular and Firebase.

Creating Firebase project

Disclaimer: I've already had an account so I can't really tell you how to make one because somehow I just have it.

Open firebase console. If you already had an account set up, I think you can just click here.
Add new project. 3.Give your project a name. Then click Continue.
I keep the Google Analytics enabled so I just click Continue
Select an account. I choose Default Account for Firebase. Then click Create project.
Wait until your project is ready. Then click Continue.
Now you're being redirected to your project dashboard.

Creating a web-app from Firebase

From your dashboard project, choose </> icon.
Give your web app some nick name. I don't tick the set up Firebase Hosting. Then click Register app.
Then you will see some code snippet like this below. You don't have to worry about loosing it because we can see it again later.
Now, let's just click Continue to console at the bottom of the same page.

Please do check the next post on how to connect your Firebase with Angular because I'll be taking you from the very beginning on how to create an Angular App.

Customer: Use Case (5: Implementing Simple Jenkins Continuous Integration)

Amalia Hajarani — Thu, 30 Nov 2023 03:48:24 +0000

Prerequisites

Installed Node version of: v20.10.0.
Installed and configured Jenkins. If you want to know how, you can check my post on how to do it in How to: SonarQube Code Coverage in Jenkins with Maven Project, you can leave the steps related to the SonarQube.
Empty Jenkinsfile (assuming you make the project skeleton as I did).

Before doing this tutorial

Make sure you don't run any services (ExpressJS service, NestJS service, and Front-end service) on your local.

Configuring Jenkins for Node project

To configure Jenkins for Node, go to your Jenkins UI. Mine is at http://localhost:8085.
From Dashboard, go to Manage Jenkins which you can find on left navigation bar.
Choose Plugins.
Go to Available plugins section and type NodeJS Plugin. I've already installed the plugin, so I cannot show you the step, but this is the plugin:
Back to Manage Jenkins.
Choose Tools.
Scroll until you see NodeJS installations. Don't mind the edited, because I already have configured mine.
Choose Add NojeJS. You can fill the field like mine. I preferred to use my locally installed Node instead of download it from Jenkins environment:
Click Save.
(OPTOPNAL) Check if your NodeJS is correctly configured at Jenkins. Choose New Item located above Manage Jenkins.
Enter a name something like test-node-configuration. Choose Pipeline project. Then click OK.

In Pipeline section, add below script and click Save.

pipeline {
    agent any
    tools {
        nodejs 'NodeJS'
    }
    stages {
        stage('Check NPM Version') {
            steps {
                bat 'npm version'
            }
        }
    }
}

You will get redirected into you newly created project. Click Build Now. Then you will see you project being built.
When it's done, click on #1.
Choose Console Output. And you will see some logs. If your Node configured correctly, you will see this on your console output:

Upload .env files from every service to Jenkins

Since we are depending on .env file for every service, we need to upload it into Jenkins server.

Go to Manage Jenkins.
In Security section, choose Credentials.
Click System on Stores scoped to Jenkins section.
Choose Global credentials (unrestricted).
Click on Add Credentials.
Click dropdown in Kind section. Choose Secret File.
Click at Choose File (mine is Pilih File).
For first .env, choose from express-service.
Give it some ID so you won't forget what this is .env for. Mine is: customer-express-env. Don't mind the warning, because I already have it configured.
Click Create.
Do the same for .env in nest-service service and front-end-service. I ID'd the nest-service with customer-nest-env and for front-end-service I set the ID as customer-react-env.

Writing Jenkinsfile

This is actually very exciting for me because it is the first time I do CI with Jenkins by writing the Jenkinsfile first. I recommend you to write it in an IDE like Visual Studio Code, and if you use VS Code, I recommend you to install an extension called JenkinsFile Support.

Defining the pipeline

First we are going to create the Jenkinsfile pipeline.

pipeline{
}

Defining agent

Since I don't know much about Jenkins, I define the agent as any.

agent any

Defining secret environment

Since we need .env to run all service, we have to provide the credential IDs for all .env that we already upload on Jenkins Server.

environment {
    SECRET_FILE_EXPRESS = credentials("customer-express-env")
    SECRET_FILE_NEST = credentials("customer-nest-env")
    SECRET_FILE_REACT = credentials("customer-react-env")
}

Defining tool

We have to define the tools to build the project. Which is NodeJS.

tools {
    nodejs "NodeJS" // change the NodeJS with the name you give when you configuring tools of NodeJS in Jenkins Server
}

Defining stages

We are going to have few stages.

Creating .env file for every services.

    stage("Create ExpressJs Service ENV"){
        steps{
          dir("express-service") {
            script {
              withCredentials([file(credentialsId: "customer-express-env", variable: "SECRET_FILE_EXPRESS")]) {
                writeFile file: '.env', text: readFile(file: "${SECRET_FILE_EXPRESS}")
              }
            }
          }
        }
    }
    stage("Create NestJs Service ENV"){
      steps{
        dir("nest-service") {
          script {
            withCredentials([file(credentialsId: "customer-nest-env", variable: "SECRET_FILE_NEST")]) {
              writeFile file: '.env', text: readFile(file: "${SECRET_FILE_NEST}")
            }
          }
        }
      }
    }
    stage("Create React Service ENV"){
      steps{
        dir("front-end-service") {
          script {
            withCredentials([file(credentialsId: "customer-react-env", variable: "SECRET_FILE_REACT")]) {
              writeFile file: '.env', text: readFile(file: "${SECRET_FILE_REACT}")
            }
          }
        }
      }
    }

Running all service in parallel because if we defined it in sequence, Jenkins build will stuck on what ever run first, so this is how:

    stage("Build ExpressJs and NestJs Service") {
      steps {
        parallel (
          "run express" : {
            dir("express-service") {
              bat "npm install"
              bat "node -r dotenv/config index.js"
              bat "node -r dotenv/config src/configs/db.config.js"
              bat "node index.js"
            }
          },
          "run nest": {
            dir("nest-service") {
              bat "npm install"
              bat "npm run start"
            }
          },
          "run react": {
            dir("front-end-service") {
              bat "npm install"
              bat "npm run dev"
            }
          }
        )
      }
    }

Final look of Jenkinsfile

This is the final look of our Jenkinsfile.

pipeline {
  agent any
  environment {
    SECRET_FILE_EXPRESS = credentials("customer-express-env")
    SECRET_FILE_NEST = credentials("customer-nest-env")
    SECRET_FILE_REACT = credentials("customer-react-env")
  }
  tools {
    nodejs "NodeJS"
  }
  stages {
    stage("Create ExpressJs Service ENV"){
        steps{
          dir("express-service") {
            script {
              withCredentials([file(credentialsId: "customer-express-env", variable: "SECRET_FILE_EXPRESS")]) {
                writeFile file: '.env', text: readFile(file: "${SECRET_FILE_EXPRESS}")
              }
            }
          }
        }
    }
    stage("Create NestJs Service ENV"){
      steps{
        dir("nest-service") {
          script {
            withCredentials([file(credentialsId: "customer-nest-env", variable: "SECRET_FILE_NEST")]) {
              writeFile file: '.env', text: readFile(file: "${SECRET_FILE_NEST}")
            }
          }
        }
      }
    }
    stage("Create React Service ENV"){
      steps{
        dir("front-end-service") {
          script {
            withCredentials([file(credentialsId: "customer-react-env", variable: "SECRET_FILE_REACT")]) {
              writeFile file: '.env', text: readFile(file: "${SECRET_FILE_REACT}")
            }
          }
        }
      }
    }
    stage("Build ExpressJs and NestJs Service") {
      steps {
        parallel (
          "run express" : {
            dir("express-service") {
              bat "npm install"
              bat "node -r dotenv/config index.js"
              bat "node -r dotenv/config src/configs/db.config.js"
              bat "node index.js"
            }
          },
          "run nest": {
            dir("nest-service") {
              bat "npm install"
              bat "npm run start"
            }
          },
          "run react": {
            dir("front-end-service") {
              bat "npm install"
              bat "npm run dev"
            }
          }
        )
      }
    }
  }
}

Build Jenkins Project.

Push the change you created in Jenkinsfile to your Git repository.
Choose New Item at Jenkins Dashboard.
Enter the name for your Jenkins project. choose Pipeline. Click OK.
Once you got redirected to your project configuration, go to Pipeline section.
In Definition dropdown, choose Pipeline script from SCM.
In SCM dropdown, choose Git.
Enter your repository url. The one that you use to clone your repository. I don't set any credential since my repository is public.
Choose the branch you want to build, mine is main.
I don't change anything at Script Path section since my Jenkinsfile name is Jenkinsfile. Please mind that it is case sensitive.
Click Save.
You will be redirected to your project. Choose Build Now.
If things are fine you will mostlikely see this:
Since we are running our project, Jenkins will keep on going on build stage. To see if we done it right, go to your build history. Click on the latest build, which is #1.
Choose Console Output. Carefuly read the output to see if our services are running. If it does, try to go to front-end service address (still using the local address).
You will see your own interface even when you're not running it in your local because it is being run by Jenkins Server.

Customer: Use Case (4: Implementing Front-end Service)

Amalia Hajarani — Thu, 30 Nov 2023 02:15:43 +0000

Prerequisites

Installed Node version of v20.10.0

Brief Explanation

In this user interface I will fetch data from two services that I've created before which are ExpressJS service and NestJs service. For forms validation needs, I use Formik and Yup to make it easier. Lastly, since I just create a single page application I thought I would be overkill to use Redux, hence I use Lifting State Up approach from child to its parent.

Initialize React-Vite application

I'm assuming that you have already created project directories just like what I did in the first post.

Open new command prompt from the front-end-service directory.
Create new React using Vite by running command below. I choose React as the framework and JavaScript as the variant.
```
npm create vite@latest .
```
Run command:
```
npm install
```

Install these dependencies:

Material UI Dependencies

npm npm install @mui/material @emotion/react @emotion/styled

Material UI Icon Dependencies

npm install @mui/icons-material

Axios dependency

npm install axios

Formik Yup dependency

npm install formik yup

My package.json dependencies looks like:

"dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.18",
    "@mui/material": "^5.14.18",
    "axios": "^1.6.2",
    "formik": "^2.4.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "yup": "^1.3.2"
},

Create project directory skeleton that looks like this:

front-end-service/
├── src/
│   ├── assets/
│   ├── components/
│   ├── constants/
│   ├── services/
│   ├── utils/
│   ├── views/
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   └── theme.js
├── .env
└── package.json

My .env file looks like below. Makesure that you have correct endpoints and use VITE as the prefix.
```
VITE_BASE_URL_EXPRESS=http://localhost:3001
VITE_BASE_URL_NEST=http://localhost:3002
```

Configuring global theme

Since we are using Material UI, we have the independency to customize some components. I did few customization for typography, palette, and some components inside theme.js as you can see below:

import { createTheme, responsiveFontSizes } from "@mui/material";

const firstLetterUppercase = {
  '::first-letter': { 
    textTransform: 'uppercase',
  }
}

let theme = createTheme({
  palette: {
    primary: {
      main:'#FF4669',
      contrastText: '#fff'
    }, 
    secondary: {
      main: '#F5F5F5',
      contrastText: '#BDBDBD'
    }
  },
  typography: {
    fontFamily: [
      'Poppins', 
      'sans-serif'
    ].join(',')
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 20
        }
      }
    },
    MuiInputLabel: {
      styleOverrides: {
        root: firstLetterUppercase
      }
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: firstLetterUppercase
      }
    }
  }
});

theme = responsiveFontSizes(theme);

export default theme;

Since I use Google Font, I need to define it inside index.css. My final index.css is look like this:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #F5F5F5;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #FF4669;
  border-radius: 10px;
}

Now, to use our costumized theme, we have to define ThemeProvider in App.jsx. My final App.jsx looks like this:

import { ThemeProvider } from '@emotion/react'
import theme from './theme'
import Dashboard from './views/Dashboard'

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Dashboard />
    </ThemeProvider>
  )
}

export default App

Creating constants

As I've said, I'll be fetching data from two services, to make it more consistent, I will create a file called constants.js inside constants directory with content like this:

export const Constant = {
  EXPRESS_ID: 0,
  NEST_ID: 1
};

Creating services and its helper function

Before we are creating some services to fetch data from APIs, I'll create a helper function to define the base url based on which service the data will be fetched. On utils directory, create a file called helperFunction.js and this is how it looks like:

import { Constant } from "../constants/constants"

export const defineBaseUrl = (serviceId) => {
  const BASE_URL = serviceId === Constant.EXPRESS_ID ? import.meta.env.VITE_BASE_URL_EXPRESS : import.meta.env.VITE_BASE_URL_NEST;

  return BASE_URL;
}

Now, we are going to create a file called index.js inside services directory. As you might notice, we have same endpoints for both ExpressJS and NestJS service just different host. So here's how I creating my service so I could fetch the data from the wanted service:

import axios from "axios";
import { defineBaseUrl } from "../utils/helperFunction";

let BASE_URL = "";
let BASE_PREFIX = "/api/customers"

export const createCustomer = async (serviceId, requestBody) => {
  BASE_URL = defineBaseUrl(serviceId);

  try {
    const res = await axios.post(BASE_URL + BASE_PREFIX, requestBody);
    return res;
  } catch (error) {
    console.log(error);
  }
};

export const getCustomers = async (serviceId) => {
  BASE_URL = defineBaseUrl(serviceId);

  try {
    const res = await axios.get(BASE_URL + BASE_PREFIX);
    return res;
  } catch (error) {
    console.log(error);
  }
};

export const getCustomerById = async (serviceId, customerId) => {
  BASE_URL = defineBaseUrl(serviceId);

  try {
    const res = await axios.get(BASE_URL + BASE_PREFIX + `/${customerId}`);
    return res;
  } catch (error) {
    console.log(error);
  }
}

export const updateCustomer = async (serviceId, customerId, bodyRequest) => {
  BASE_URL = defineBaseUrl(serviceId);

  try {
    const res = await axios.put(BASE_URL + BASE_PREFIX + `/${customerId}`, bodyRequest);
    return res;
  } catch (error) {
    console.log(error);
  }
};

export const deleteCustomer = async (serviceId, customerId) => {
  BASE_URL = defineBaseUrl(serviceId);

  try {
    const res = await axios.delete(BASE_URL + BASE_PREFIX + `/${customerId}`);
    return res;
  } catch (error) {
    console.log(error);
  }
};

Creating components

To make it more structured, I'm going to create some components first.

Table of costumers component

In this component, I'm using MUI's table components. Incomponents directory, create a new directory called CustomerDataList, then create a new file called index.jsx. It's a little tricky to do some loops because I want the user interface to use English as the language, but the response from backend is in Bahasa hence I do some tricky workaround. But the final look is like this:

import { CloseOutlined, DeleteForever, Edit, SearchRounded } from '@mui/icons-material';
import { Grid, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography } from '@mui/material';
import { useFormik } from 'formik';
import React, { useEffect, useState } from 'react'
import * as Yup from 'yup';
import FormCustomerModal from '../FormCustomerModal';
import { deleteCustomer, getCustomerById, getCustomers, updateCustomer } from '../../services';

const header = [
  "ID",
  "Membership Number",
  "Name",
  "Address",
  "City",
  "Actions"
];

const structure = [
  "id",
  "no",
  "nama",
  "alamat",
  "kota",
  "aksi"
];

const initialValues = {
  id: '',
  no: '',
  nama: '',
  alamat: '',
  kota: ''
};

const validationSchema = Yup.object().shape({
  id: Yup.string(),
  no: Yup.string(),
  nama: Yup.string().required(),
  alamat: Yup.string().required(),
  kota: Yup.string().required(),
});

const CustomerDataList = ({ serviceID, onRefresh, onUpdate, onDelete }) => {
  const [dataTable, setDataTable] = useState([]);
  const [isUpdating, setIsUpdating] = useState(false);
  const [searchedId, setSearchedId] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [isDataNotFound, setIsDataNotFound] = useState(false);

  const updateCustomerFormik = useFormik({
    initialValues: initialValues,
    validationSchema: validationSchema,
    enableReinitialize: true,
    onSubmit: () => {
      handleUpdateCustomer();
      setIsUpdating(false);
    }
  });

  const handleUpdateFormikValue = ( index ) => {
    updateCustomerFormik.setValues(dataTable[index]);
    setIsUpdating(true)
  }

  const handleCloseUpdateModal = () => {
    setIsUpdating(false);
  }

  const handleGetAllCustomers = () => {
    getCustomers(serviceID)
      .then((res) => {
        if (res.status === 200) {
          setDataTable([...res.data]);
        }
      }).catch((err) => {
        console.log(err);
      });
  }

  const handleUpdateCustomer = () => {
    const customerId = updateCustomerFormik.values.id;

    const requestBody = {
      nama: updateCustomerFormik.values.nama,
      alamat: updateCustomerFormik.values.alamat,
      kota: updateCustomerFormik.values.kota
    };

    updateCustomer(serviceID, customerId, requestBody)
      .then(() => {
        onUpdate();
      }).catch((err) => {
        console.log(err);
      });
  }

  const handleDeleteCustomer = ( index ) => {
    const customerId = dataTable[index].id;

    deleteCustomer(serviceID, customerId)
      .then(() => {
        onDelete()
      }).catch((err) => {
        console.log(err);
      });
  }

  const handleSearchCustomer = () => {
    if(searchedId !== '') {
      setIsSearching(true);
      getCustomerById(serviceID, searchedId)
        .then((res) => {
          if (res.status === 200 && Object.keys(res.data).length > 0) {
            setIsDataNotFound(false);
            setDataTable([res.data]);
          } else {
            setIsDataNotFound(true);
          }
        }).catch((err) => {
          console.log(err);
        });
    }
  }

  const handleCloseSearching= () => {
    setIsSearching(false);
    setSearchedId('');
    handleGetAllCustomers();
  }

  useEffect(() => {
    handleGetAllCustomers();
  }, [serviceID, onRefresh, isUpdating, onDelete]);

  useEffect(() => {
    setSearchedId('');
  }, [serviceID]);

  const ActionButtonGroups = ({ index }) => {
    return (
      <Grid container>
        <Grid item>
          <IconButton 
            color='warning'
            onClick={() => handleUpdateFormikValue(index)}
          >
            <Edit />
          </IconButton>
        </Grid>
        <Grid item>
          <IconButton 
            color='error'
            onClick={() => handleDeleteCustomer(index)}
          >
            <DeleteForever />
          </IconButton>
        </Grid>
      </Grid>
    );
  }

  return (
    <>
      <TextField
        fullWidth
        variant='filled'
        placeholder='Search by id'
        value={searchedId}
        onChange={(e) => setSearchedId(e.target.value)}
        sx={{
          backgroundColor: 'primary.main',
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
        }}
        inputProps={{
          sx: {
            paddingY: '1rem',
            color: 'primary.contrastText'
          },
        }}
        InputProps={{
          endAdornment: (
            isSearching 
            ? (
              <IconButton
                sx={{ color: 'primary.contrastText' }}
                onClick={handleCloseSearching}
              >
                <CloseOutlined />
              </IconButton>
            ) : (
              <IconButton 
                sx={{ color: 'primary.contrastText' }}
                onClick={handleSearchCustomer}
              >
                <SearchRounded />
              </IconButton>
            )
          )
        }}
      />
      <TableContainer component={Paper} sx={{ maxHeight: 375, boxShadow: 'none'}}>
        <Table sx={{ width: '100%' }} stickyHeader>
          <TableHead>
            <TableRow>
              {
                header.map((item, index) => {
                  return (
                    <TableCell 
                      align="left" 
                      key={index} 
                      sx={{
                        color: '#6D6C6D',
                        borderBottom: '2px solid',
                        borderColor: 'primary.main'
                      }}
                    >
                      {item}
                    </TableCell>
                  )
                })
              }
            </TableRow>
          </TableHead>
          <TableBody>
            {
              isSearching && isDataNotFound 
              ? (
                <TableRow>
                  <TableCell colSpan={header.length} align={"center"}>
                    <Typography>No Customer Found</Typography>
                  </TableCell>
                </TableRow>
              ) : (
                dataTable.map((row, index) => {
                  return (
                    <TableRow key={index}>
                      {
                        structure.map((column) => {
                          return (
                            <TableCell>
                              {
                                column === 'aksi' 
                                ? <ActionButtonGroups index={index} />
                                : <Typography>{row[column.toLowerCase()]}</Typography>
                              }
                            </TableCell>
                          )
                        })
                      }
                    </TableRow>
                  )
                })
              )
            }
          </TableBody>
        </Table>
      </TableContainer>

      <FormCustomerModal 
        title={"Update Customer Data"}
        open={isUpdating}
        handleClose={handleCloseUpdateModal}
        formikProps={updateCustomerFormik}
        disabledField={[ "id", "no", "createdAt", "updatedAt" ]}
      />
    </>
  )
}

export default CustomerDataList;

Form dialogue component

As you might notice in previous component, I have a component called FormCustomerModal. This component will be used as a dialogue containing form to add a customer and update an existing customer. First thing first, in components directory, create a new folder called FormCustomerModal, then inside that directory, create a new file called index.jsx. The final look of this file is just like below:

import { Button, Dialog, DialogContent, DialogTitle, Grid, TextField } from '@mui/material';
import React from 'react'

const FormCustomerModal = ({ title, open, handleClose, formikProps, disabledField=[] }) => {
  return (
    <React.Fragment>
      <Dialog 
        open={open} 
        onClose={handleClose}
        fullWidth
      >
        <DialogTitle sx={{ textAlign: 'center' }}>{ title }</DialogTitle>
        <DialogContent>
          <form onSubmit={formikProps.handleSubmit}>
            <Grid 
              container 
              spacing={2}
              flexDirection={'column'} 
              sx={{ padding: '0.5rem'}}
            >
              {
                Object.keys(formikProps.values).map((item, index) => {
                  return (
                    <Grid item key={index}>
                      <TextField 
                        disabled={ disabledField.includes(item) ? true : false }
                        id="outlined-basic"
                        variant="outlined"
                        name={item}
                        label={item}
                        value={formikProps.values[item]}
                        onChange={formikProps.handleChange}
                        onBlur={formikProps.handleBlur}
                        error={formikProps.touched[item] && formikProps.errors[item]}
                        helperText={formikProps.touched[item] && formikProps.errors[item] && `${item} cannot be empty`}
                        fullWidth
                      />
                    </Grid>
                  )
                })
              }
              <Grid item sx={{ alignSelf: 'center' }}>
                <Button variant='contained' type='submit'> Save Customer </Button>
              </Grid>
            </Grid>
          </form>
        </DialogContent>
      </Dialog>
    </React.Fragment>
  )
}

export default FormCustomerModal;

Creating view of Dashboard

Now we already have all of the components and service, we can safely create the view. In views directory, create a folder called Dashboard then create a new file called indes.jsx. This is the content of our dashboard view:

import { Alert, Button, Container, Grid, Tab, Tabs, Typography } from '@mui/material'
import React, { useEffect, useState } from 'react'
import CustomerDataList from '../../components/CustomerDataList'
import { AddCircleOutlineRounded } from '@mui/icons-material'
import * as Yup from 'yup';
import { useFormik } from 'formik';
import FormCustomerModal from '../../components/FormCustomerModal';
import { createCustomer } from '../../services';
import { Constant } from '../../constants/constants';

const initialValues = {
  nama: '',
  alamat: '',
  kota: ''
};

const validationSchema = Yup.object().shape({
  nama: Yup.string().required(),
  alamat: Yup.string().required(),
  kota: Yup.string().required(),
})

const Dashboard = () => {
  const [tabValue, setTabValue] = useState(0);
  const [isAddingNewCustomer, setIsAddingNewCustomer] = useState(false);
  const [refreshTable, setRefreshTable] = useState(true);
  const [alert, setAlert] = useState({
    open: false,
    severity: '',
    message: ''
  });

  const handleTabChange = (e, newValue) => {
    setTabValue(newValue);
  }

  const newCustomerFormik = useFormik({
    initialValues: initialValues,
    validationSchema: validationSchema,
    onSubmit: (values) => {
      handleAddNewCustomer(values);
    }
  });

  const handleCloseAddingNewCustomer = () => {
    setIsAddingNewCustomer(false);
  }

  const handleAddNewCustomer = async (values) => {
    createCustomer(tabValue, values)
      .then(() => {
        setRefreshTable(true);
        setAlert({
          open: true,
          severity: 'success',
          message: `Successfully creating customer using Service ${tabValue === Constant.EXPRESS_ID ? 'ExpressJs': 'NestJs'}`
        })
      }).catch((err) => {
        setRefreshTable(false);
      }).finally(() => {
        setIsAddingNewCustomer(false);
      });
  }

  const handleUpdateCustomer = () => {
    setAlert({
      open: true,
      severity: 'success',
      message: `Successfully updating customer using Service ${tabValue === Constant.EXPRESS_ID ? 'ExpressJs': 'NestJs'}`
    })
  }

  const handleDeleteCustomer = () => {
    setAlert({
      open: true,
      severity: 'success',
      message: `Successfully deleting customer using Service ${tabValue === Constant.EXPRESS_ID ? 'ExpressJs': 'NestJs'}`
    })
  }

  useEffect(() => {
    if (alert.open) {
      const timeOut = setTimeout(() => {
        setAlert({
          open: false,
          severity: '',
          message: ''
        });
      }, 3000)

      return () => {
        clearTimeout(timeOut)
      }
    }
  }, [alert])

  return (
    <Container>
      <Alert 
        severity={alert.severity} 
        sx={{ visibility: alert.open ? 'visible' : 'hidden' }}
      > 
        {alert.message} 
      </Alert>

      <Grid 
        container
        spacing={4}
        flexDirection={"column"}
        alignItems={"center"} 
        justifyContent={"center"} 
        height={'95vh'}
      >
        <Grid item width={"100%"}>
          <Typography variant={"h5"} textAlign={"center"}>Customer List</Typography>
        </Grid>
        <Grid item width={"100%"}>
          <Grid container spacing={4} flexDirection={"column"} paddingTop={0}>
            <Grid item width={"100%"}>
              <Tabs value={tabValue} onChange={handleTabChange} centered>
                <Tab label="ExpressJS" sx={{ flexGrow: 1}} />
                <Tab label="NestJS" sx={{ flexGrow: 1}} />
              </Tabs>
            </Grid>
            <Grid item>
              <CustomerDataList 
                serviceID={tabValue} 
                onRefresh={() => setRefreshTable(refreshTable)}
                onUpdate={() => handleUpdateCustomer()}
                onDelete={() => handleDeleteCustomer()}
              />
            </Grid>
            <Grid item alignSelf={"flex-end"}>
              <Button 
                variant='contained' 
                startIcon={<AddCircleOutlineRounded />}
                onClick={() => setIsAddingNewCustomer(true)}
              >
                Add Customer
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>

      <FormCustomerModal 
        title={'Add New Customer'}
        open={isAddingNewCustomer}
        handleClose={handleCloseAddingNewCustomer}
        formikProps={newCustomerFormik}
      />
    </Container>
  )
}

export default Dashboard;

Running application

Makesure you run the ExpressJS and NestJS service.
Back to front-end-service root directory, open command prompt directed to the directory.
Run npm run dev. You will see a localhost or similar address where you can see the interface.
If it is running correctly you will see this kind of user interface along with the functionality that we already build!
To makesure that we did hit both services, we can see it at Network section while inspecting element like when I'm at ExpressJS tab, I have this:

When I move to the NestJS tab I have this:

If you notice, the first one is hitting http://localhost:3001 which is the ExpressJS service and the second one is hitting http://localhost:3002 which is the NestJS service.

Customer: Use Case (3: Implementing NestJS Service)

Amalia Hajarani — Thu, 30 Nov 2023 01:03:45 +0000

Prerequisites

Installed Node version of v20.10.0
Installed PostgreSQL version of 16

Initialize NestJS application

I'm assuming that you have already created project directories just like what I did in the first post.

Install nest cli globally using command prompt.
```
 npm i -g @nestjs/cli
```
Open new command prompt from the nest-service directory.
Create new NestJS project by running command below. I choose npm as the package manager.
```
nest new .
```

Install these dependencies:

Dependency to work with .env file

npm i --save @nestjs/config

TypeOrm dependencies

npm install @nestjs/typeorm typeorm

PostgreSQL dependency

npm install pg

My package.json dependencies looks like:

 "dependencies": {
    "@nestjs/common": "^10.0.0",
    "@nestjs/config": "^3.1.1",
    "@nestjs/core": "^10.0.0",
    "@nestjs/platform-express": "^10.0.0",
    "@nestjs/typeorm": "^10.0.1",
    "pg": "^8.11.3",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1",
    "typeorm": "^0.3.17"
}

Create project directory skeleton that looks like this:

nest-service/
├── src/
│   ├── config/
│   ├── controllers/
│   ├── entities/
│   ├── modules/
│   ├── services/
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── .env
└── package.json

My .env file looks like below. Makesure that you have correct and working port and credentials.

PORT=3002
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=password
DB_NAME=customer

Creating configuration

Inside config directory, create a file named database.config.ts the content will look like this:

import { PostgresConnectionOptions } from "typeorm/driver/postgres/PostgresConnectionOptions";
import { ConfigService } from '@nestjs/config';

export const databaseConfig = async (configService: ConfigService): Promise<PostgresConnectionOptions> => ({
  type: 'postgres',
  host: configService.get<string>('DB_HOST'),
  port: parseInt(configService.get<string>('DB_PORT')),
  username: configService.get<string>('DB_USERNAME'),
  password: configService.get<string>('DB_PASSWORD'),
  database: configService.get<string>('DB_NAME'),
  entities: ["dist/**/*.entity{.ts,.js}"],
  synchronize: false,
});

creating entities

Now, let's move on to entities directory. Create a file called Customer.enitity.ts.

import { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, UpdateDateColumn } from "typeorm";

@Entity('customers')
export class Customer {

  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  no: string;

  @Column()
  nama: string;

  @Column()
  alamat: string

  @Column()
  kota: string

  @CreateDateColumn()
  createdAt: Date

  @UpdateDateColumn()
  updatedAt: Date;

}

Creating services

In services we are going to create a file named customer.service.ts and the content is looks like this:

import { Injectable } from "@nestjs/common";
import { InjectRepository } from "@nestjs/typeorm";
import { randomUUID } from "crypto";
import { Customer } from "src/entities/Customer.entity";
import { Repository } from "typeorm";

export interface CustomerInterface {
  id?: string,
  no?: string, 
  nama: string,
  alamat: string,
  kota: string
  createdAt?: Date;
  updatedAt?: Date;
};

@Injectable()
export class CustomersService {

  constructor(
    @InjectRepository(Customer)
    private customerRepository: Repository<CustomerInterface>
  ) {}

  create(customer: CustomerInterface): Promise<CustomerInterface> {
    const customerBody = this.customerRepository.create(customer);
    customerBody.no = randomUUID();
    customerBody.createdAt = new Date();
    customerBody.updatedAt = new Date();
    return this.customerRepository.save(customerBody);
  }

  findAll(): Promise<CustomerInterface[]> {
    return this.customerRepository.find();
  }

  findById(id: string): Promise<CustomerInterface> {
    return this.customerRepository
      .findOne({
        where: {
          id: id
        }
      });
  }

  update(id: string, data: CustomerInterface): Promise<any> {
    return this.customerRepository
      .createQueryBuilder()
      .update()
      .set({
        nama: data.nama,
        alamat: data.alamat,
        kota: data.kota
      })
      .where('id = :id', { id })
      .execute();
  }

  delete(id: string): Promise<any> {
    return this.customerRepository
      .createQueryBuilder()
      .delete()
      .from(Customer)
      .where('id = :id', { id })
      .execute();
  }
}

Creating controllers

Let's create the controller for customer by making a file called customer.controller.ts inside controllers directory.

import { Body, Controller, Delete, Get, Param, Post, Put } from "@nestjs/common";
import { CustomerInterface, CustomersService } from "src/services/customer.service";

interface CreateCustomerDto {
  nama: string,
  alamat: string,
  kota: string
};

@Controller('api/customers')
export class CustomersController {

  constructor(private customerService: CustomersService) {}

  @Post()
  async create(@Body() createCustomerDto: CreateCustomerDto) {
    const customer = await this.customerService.create(createCustomerDto);

    if(!customer) {
      return 'Error creating customer';
    }

    return 'Customer created successfully';
  }

  @Get()
  async findAll() {
    const customers: Array<CustomerInterface> = await this.customerService.findAll();

    return customers;
  }

  @Get(':id')
  async findByNama(@Param('id') id: string ) {
    const customer: CustomerInterface = await this.customerService.findById(id);

    return customer;
  }

  @Put(':id')
  async update(@Param('id') id: string, @Body() body: CustomerInterface) {
    const newCustomer: CustomerInterface = await this.customerService.update(id, body);

    if(!newCustomer) {
      return 'Error updating customer';
    }

    return 'Customer updated successfully';
  }

  @Delete(':id')
  async remove(@Param('id') id: string) {
    await this.customerService.delete(id);

    return 'Successfully deleted customer with id' + id;
  }

}

Creating module

Last, we need to pool our entity, controller, and service at the module. Create a file called customer.module.ts inside modules directory.

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { CustomersController } from 'src/controllers/customer.controller';
import { Customer } from 'src/entities/Customer.entity';
import { CustomersService } from 'src/services/customer.service';

@Module({
  imports: [TypeOrmModule.forFeature([Customer])],
  controllers: [CustomersController],
  providers: [CustomersService]
})

export class CustomersModule {}

Configuring customer module in main module

In app.module.ts file which located in root directory, we will configuring the things we've created like this:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { TypeOrmModule } from '@nestjs/typeorm';
import { CustomersModule } from './modules/customer.module';
import { databaseConfig } from './config/database.config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true
    }),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: async (configService: ConfigService) => await databaseConfig(configService),
    }),
    CustomersModule
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Running application

Back to nest-service root directory, open command prompt directed to the directory.
Run npm run start. It will take a little longer.
If it is running correctly you will see this log:
Test your API endpoints using Postman or Thunder Client.

Customer: Use Case (2: Implementing ExpressJS Service)

Amalia Hajarani — Wed, 29 Nov 2023 05:39:47 +0000

Prerequisites

Installed Node version of v20.10.0
Installed PostgreSQL version of 16
Database viewer, I use DBeaver

Creating customer table

Open DBeaver application
Click Database then choose New Database Connection assuming you haven't connect to PostgreSQL database.
Choose PostgreSQL. Then click Next.
I'm using the default connection settings so just click Finish.
You will see the newly connected PostgreSQL on the left side navigator.
Click the dropdown arrow until you can see this:
Click right at Databases. Choose Create New Database.
Fill the database name field with customer. Then click OK.
Click on database dropdown and now you will see your new database. If you did not see your new database, please follow this step.

Initialize express application

I'm assuming that you have already created project directories just like what I did in the first post.

Open a command prompt from express-service root directory.
Init a npm project by using command of:
```
npm init
```

Install these dependencies:

Basic dependencies

```
npm install express dotenv cors body-parser
```

Sequalize dependency

```
npm install sequelize
```

PostgreSQL dependency

```
npm install pg pg-hstore
```

UUID dependency

```
npm install uuid
```

My package.json dependencies looks like:

"dependencies": {
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "pg": "^8.11.3",
    "pg-hstore": "^2.3.4",
    "sequelize": "^6.35.1",
    "uuid": "^9.0.1"
  }

Create project directory skeleton that looks like this:

express-service/
    ├── src/
    │   ├── configs/
    │   ├── controllers/
    │   ├── models/
    │   └── routes/
    ├── .env
    ├── index.js
    ├── package.json
    └── server.js

My .env file looks like below. Makesure that you have correct and working port and credentials.

PORT=3001
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=password
DB_NAME=customer

Creating configs

Inside configs directory, create a file named db.config.js the content will look like this:

require('dotenv').config();

module.exports = {
  HOST: process.env.DB_HOST,
  USER: process.env.DB_USERNAME,
  PASSWORD: process.env.DB_PASSWORD,
  DB: process.env.DB_NAME,
  dialect: "postgres",
  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  }
};

This is the configuration to connect our application to the database.

creating models

Now, let's move on to out models directory

Create a file called customer.model.js.

module.exports = (sequalize, Sequalize) => {
  const Customer = sequalize.define("customer", {
    no: {
      type: Sequalize.UUID
    }, 
    nama: {
      type: Sequalize.STRING
    },
    alamat: {
      type: Sequalize.STRING
    },
    kota: {
      type: Sequalize.STRING
    }
  });

  return Customer;
};

Create another file called index.js.

const dbConfig = require("../configs/db.config");

const Sequalize = require("sequelize");
const sequalize = new Sequalize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
  host: dbConfig.HOST,
  dialect: 'postgres',
  operatorAliases: false,

  pool: {
    max: dbConfig.pool.max,
    min: dbConfig.pool.min,
    acquire: dbConfig.pool.acquire,
    idle: dbConfig.pool.idle
  }
});

const db = {};

db.Sequalize = Sequalize;
db.sequalize = sequalize;

db.customer = require("./customer.model")(sequalize, Sequalize);

module.exports = db;

Creating controllers

After configuring our model let's create the controller for customer by making a file called customer.controller.js.

const { v4: uuidv4 } = require('uuid');
const db = require("../models");
const model = require("../models");
const Customer = model.customer;
const Op = db.Sequalize.Op;

exports.create = (req, res) => {

  const customer = {
    no: uuidv4(),
    nama: req.body.nama,
    alamat: req.body.alamat,
    kota: req.body.kota
  };

  Customer.create(customer)
    .then((data) => {
      res.send(data);
    }).catch((err) => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while creating the Customer."
      });
    });

};

exports.findAll = (req, res) => {

  Customer.findAll()
    .then((data) => {
      res.send(data);
    }).catch((err) => {
      res.status(500).send({
        message:
          err.message || "Some error occurred while retrieving the Customer."
      });
    });

};

exports.findOne = (req, res) => {

  const id = req.params.id;

  Customer.findByPk(id)
    .then((data) => {
      res.send(data);
    }).catch((err) => {
      res.status(400).send({
        message:
          "Error retrieving Customer with id=" + id
      });
    });

};

exports.update = (req, res) => {

  const id = req.params.id;

  Customer.update(req.body, { where: { id: id } })
    .then((data) => {
      if (data[0] === 1) {
        res.send("Successfully updated Customer with id " + id);
      } else {
        res.send("Cannot update Customer with id " + id);
      }
    }).catch((err) => {
      res.status(500).send({
        message: "Error updating Customer with id=" + id
      });
    });

};

exports.delete = (req, res) => {

  const id = req.params.id;

  Customer.destroy({ where: { id: id } })
    .then((data) => {
      if (data === 1) {
        res.send("Successfully deleted Customer with id " + id);
      } else {
        res.send("Cannot delete Customer with id " + id);
      }
    }).catch((err) => {
      res.status(500).send({
        message: "Error deleting Customer with id=" + id
      });
    });

};

Creating routes

Last, we need to create our route in customer.route.js inside route directory.

module.exports = app => {
  const customers = require("../controllers/customer.controller");

  var router = require("express").Router();

  router.post("/", customers.create);

  router.get("/", customers.findAll);

  router.get("/:id", customers.findOne);

  router.put("/:id", customers.update);

  router.delete("/:id", customers.delete);

  app.use('/api/customers', router);
};

Configuring server

In server.js file which located in root directory, we will configuring all needed dependency and connect our application to database like this:

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

require('dotenv').config();

function startServer() {
  const app = express();

  app.use(cors());

  app.use(express.json());

  app.use(express.urlencoded({ extended: true }));

  const db = require("./src/models");

  db.sequalize.sync()
    .then(() => {
      console.log("Synced db.");
    }).catch((err) => {
      console.log("Failed to sync db: " + err.message);
    });

    require("./src/routes/customer.routes")(app);

  const PORT = process.env.PORT;
  app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
  });
};

module.exports = { start: startServer };

Configure index.js

Since most functionalities all already handled by server.js, in index.js we just have to call it like this:

const server = require('./server');

server.start();

Running application

Back to express-service root directory, open command prompt directed to the directory.
Run node index.js
If it running correctly you will see this log:
Test your API endpoints using Postman or Thunder Client.

Customer: Use Case for Learning Simple CRUD on ExpressJS and NestJS and The CI Pipeline (Use Case Introduction)

Amalia Hajarani — Wed, 29 Nov 2023 04:33:16 +0000

Hello dear reader. Today I have new use case to learn ExpressJS and NestJS and I think it's quiet beginner friendly since I have no experience in NestJS. We are just going to create a simple CRUD application and save it into PostgreSQL database. You can find the working repository here.

Resources

Before diving deeper, I want you to know that I will be using two different ORMs, Sequalize for ExpressJS and TypeOrm for NestJS. As I haven't work with node backend environment for so long, I have few resources that I read to build my application.

Please check them out since of course they have better explanation.

Brief explanation

This is a painless usecase once you know how each ORM works and since again, it just a simple CRUD application. Below is how I structured my customer data to be use on every services:

{
    id: number,
    no: string, //uuid
    nama: string, //nama means name
    alamat: string, //alamat means adddress
    kota: string //kota means city
    createdAt: Date,
    updatedAt: Date
}

For summary, we are going to make same functionality for both service which are:

Create new customer
Get all customers
Get a customer by id
Update a customer based on the id
Delete a customer based on the id

Project structure

Since we are going to be running some CI (Continuous Integration) using Jenkins, this is my kind of project structure:

simple-mini-project/
    ├── express-service/
    ├── nest-service/
    ├── front-end-service/
    └── Jenkinsfile

Tips from a beginner:

Since one of our goal is to have CI run, we will have to push our code to a Git repository. It's much better if you push your work everytime you create a new functionality so you don't have to worry about losing your job!

How to: Integrating Jenkins with Telegram Bot

Amalia Hajarani — Fri, 24 Nov 2023 02:06:32 +0000

Hallo dear everyone whoever read this post. Today I'd love to share my another learning journey with Jenkins. You can find the final repository in here. The use case itself actually from this post.

Prerequisite

Installed Java version of 17 and have it configured in environment variable.
Installed Maven version of 3.9.5 and have it configured in environment variable.
Installed Jenkins (mine is Jenkins 2.426.1) along with the configuration. You may read the post I've attached above to know more on how to configure Jenkins environment.

Creating Telegram Bot

Open Telegram application. I use Telegram Web.
Search for BotFather.
Click on their profile. Click Start.
Send them a chat of /newbot.
Give your bot a name.
Create a username for your bot.
They will give you an access token.

Getting Chat Id

As you can see from the image above, BotFather give you a link to chat with your bot. Click that link.
Click Start button located at the right corner.
Send some chat like hi to the bot

Get the chat id by opening this link https://api.telegram.org/bot<access token>/getUpdates. You will get a response like below. Copy the chat id to somewhere safe:

{
  "ok": true,
  "result": [
    {
      "update_id": 948995789,
      "message": {
        "message_id": 3,
        "from": {
          "id": 5046210284,
          "is_bot": false,
          "first_name": "Lala",
          "username": "amaliahajarani",
          "language_code": "en"
        },
        "chat": {
          "id": 5046210284, // this is the chat id          "first_name": "Lala",
          "username": "amaliahajarani",
          "type": "private"
        },
        "date": 1700788242,
        "text": "hi"
      }
    }
  ]
}

Creating credentials for Telegram Bot access token and chat id.

Open Jenkins UI, mine is at http://localhost:8085/.
In side bar, choose Manage Jenkins section.
Go to Security section. Choose Credentials.
Scroll to the bottom. You will sew Stores scoped to Jenkins section. Click System on that table.
You will be redirected into another page. Choose Global credentials (unrestricted).
Click Add Credentials button.
First, we are going to create credentials for access token. For Kind dropdown, choose Secret text.
Enter your access token into Secret section. Then, enter some identifier at ID field so you know what kind of credential is that. Then click Create button.
Now, with the same step from poin 6, create new credential for chat id.

Creating JenkinsFile

If you don't have JenkinsFile in your project yet, in the root of the project, create a new file without extensions called JenkinsFile (better use code editor like Visual Studio Code). Mine lookslike this:

pipeline{
    agent any
    environment {
        TELEGRAM_TOKEN = credentials('telegram-token') // change this line with your credential id for Telegram bot access token
        TELEGRAM_CHAT_ID = credentials('telegram-chat-id') // change this line with your credential id for Telegram bot chat id

        TEXT_PRE_BUILD = "Jenkins is building ${JOB_NAME}"
        TEXT_SUCCESS_BUILD = "${JOB_NAME} is Success"
        TEXT_FAILURE_BUILD = "${JOB_NAME} is Failure"
        TEXT_ABORTED_BUILD = "${JOB_NAME} is Aborted"
    }
    tools {
        maven 'MAVEN_HOME' 
    }
    stages{
        stage("Pre-Build"){
            steps{
                bat ''' curl -s -X POST https://api.telegram.org/bot"%TELEGRAM_TOKEN%"/sendMessage -d chat_id="%TELEGRAM_CHAT_ID%" -d text="%TEXT_PRE_BUILD%" '''
            }
        }
        stage("build"){
            steps{
                bat 'mvn clean install'
            }
        }
        stage('SonarQube analysis'){
            steps{
                withSonarQubeEnv(credentialsId:'jenkins-sonarqube', installationName: 'SonarQube') {
                    bat 'mvn sonar:sonar'
                }
            }
        }
        stage('SQuality Gate') {
            steps {
                timeout(time: 1, unit: 'MINUTES') {
                    waitForQualityGate abortPipeline: true
                }
            }
        }
    }
    post{
        success{
            script {
                bat ''' curl -s -X POST https://api.telegram.org/bot"%TELEGRAM_TOKEN%"/sendMessage -d chat_id="%TELEGRAM_CHAT_ID%" -d text="%TEXT_SUCCESS_BUILD%" '''
            }
        }
        failure{
            script {
                bat ''' curl -s -X POST https://api.telegram.org/bot"%TELEGRAM_TOKEN%"/sendMessage -d chat_id="%TELEGRAM_CHAT_ID%" -d text="%TEXT_FAILURE_BUILD%" '''
            }
        }
        aborted{
            script {
                bat ''' curl -s -X POST https://api.telegram.org/bot"%TELEGRAM_TOKEN%"/sendMessage -d chat_id="%TELEGRAM_CHAT_ID%" -d text="%TEXT_ABORTED_BUILD%" '''
            }
        }
    }
}

A little explanation of my JenkinsFile:

I set environment that I need to run the pipeline like the credentials that will be used.
To make mvn command works, I have to define MAVEN_HOME that is already configured in my Jenkins environment.
The first stage of the pipeline is called Pre-Build where a chat will be sent to your telegram account that Jenkins is building something.
In the second stage of build I use a command of mvn clean install since I have to run SonarQube and SonarQube is running with the package generated by that command.
The third stage Sonarqube analysis is using SonarQube environment that I have already configured like the token credential and the installation name. Jenkins will run the command of mvn sonar:sonar to analyze the code.
The last stage is to tell the Jenkins build status based on the result of SonarQube analysis. Either it is success, fail, or aborted.
After these stages is run, Jenkins will send another chat to let you know the build result.

Makesure you push the JenkinsFile to your Git code base.

Creating Jenkins Pipeline Project

Open Jenkins Dashboard.
At sidebar, choose New Item.
Enter your project name.
Choose Pipeline.
Click OK.
When you already get redirected, tick the Github project checkbox.
Enter the repository url.
Scroll down until you get into Pipeline Section.
In Definition dropdown, choose Pipeline script from SCM.
In SCM dropdown, choose Git.
Enter your URL repository that you usually use to clone the project.
Enter the Git credentials. If you don't have it yet, you can just adding them by choosing username and password as the Kind.
Change the Branches to build if needed. By default it is master but I change mine to main.
On Script Path field, enter the jenkins file name. I think it is case sensitive so make sure it is correct. Either it is JenkinsFile or Jenkinsfile or other.
Click Save.

Building the project

At Jenkins Dashboard, choose the project you just created.
At the sidebar, choose Build Now.
Wait until the build is finish.

On the start of the build you will get chat at Telegram like this:

After Build finish you will get a chat like this:

This is my chat lookslike after several builds (this is the bot that I created at the first try that's why it is different).

How to: SonarQube Code Coverage in Jenkins with Maven Project

Amalia Hajarani — Wed, 22 Nov 2023 09:48:10 +0000

Hallo dear everyone whoever read this post. Today I'd love to share my learning journey with Jenkins. In today's post I will be using this code as my use case and I'll be cooking from scratch which is installing Jenkins until we have the final dish of seeing the code coverage of our maven project in SonarQube.

Prerequisite

Installed Java version of 17 and have it configured in environment variable
Installed Maven version of 3.9.5 and have it configured in environment variable

Installing Jenkins

Since I'm on Windows 10, I downloaded Jenkins lts version (mine is 2.426.1 LTS) from this official link.
Open the installer and click Next.
I'm going to use the default path so I just click Next.
Since I cannot remember my own credential, I choose the Run service as LocalSystem. Then, click Next.
I choose the default port which is 8085. Click Test Port then proceed to Next.
Choose your java version. Mine is 17. If the path is correct, just click Next.
I don't understand what is happening here, so I assume it is safe to just click Next.
And now Jenkins is ready to be installed! Don't forget to click the Install button. After that you might have to wait for a few times until installation is finish.
Now that installation is finished already, we can move on by clicking Finish button.

Installing and Prepare SonarQube

I downloaded the latest version of SonarQube from this official link. The version is now at Version 10.3.
Unzip the file in your dedicated folder. Mine is on D: drive.
We might cannot start the SonarQube just now because we have to do thing to make sure the configuration is working.
To make things easier, open sonar.properties in code editor. You can find the file by entering the unzip directory result, go to conf directory, and there laying the sonar.properties. Now I uncomment few things in that file such as below lines: sonar.web.host=0.0.0.0 sonar.web.port=9000 sonar.search.port=0 // For this line you might want to change the port as well. Mine is from `9001` to `0`
Don't forget to save after making those changes.
Now let's try to run SonarQube server by going to bin directory, it is at the same level as conf directory. Choose the directory that match your operating system. For me, I choose windows-x86-64.
Open command prompt from that directory.
Run this command: StartSonar.bat
If it's working properly this is what will you see at the bottom of command line:

Updating POM.xml

You can find the original resource at here for this step. But it wasn't working at the first try since some of the versions are not compatible with my java version. But the final POM.xml looks like:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <parent>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>3.0.0</version>

        <relativePath/> <!-- lookup parent from repository -->

    </parent>

    <groupId>com.tujuhsembilan</groupId>

    <artifactId>scheduler</artifactId>

    <version>0.0.1-SNAPSHOT</version>

    <name>scheduler</name>

    <description>Demo project for Spring Boot</description>

    <properties>

        <java.version>17</java.version>

        <jacoco.version>0.8.8</jacoco.version>

        <sonar.java.coveragePlugin>jacoco</sonar.java.coveragePlugin>

        <sonar.dynamicAnalysis>reuseReports</sonar.dynamicAnalysis>

        <sonar.jacoco.reportPath>${project.basedir}/../target/jacoco.exec</sonar.jacoco.reportPath>

        <sonar.language>java</sonar.language>

    </properties>

    <dependencies>

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-data-jpa&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-hateoas&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-quartz&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;com.h2database&lt;/groupId&gt;
        &lt;artifactId&gt;h2&lt;/artifactId&gt;
        &lt;scope&gt;runtime&lt;/scope&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.projectlombok&lt;/groupId&gt;
        &lt;artifactId&gt;lombok&lt;/artifactId&gt;
        &lt;optional&gt;true&lt;/optional&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-test&lt;/artifactId&gt;
        &lt;scope&gt;test&lt;/scope&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-data-mongodb&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.modelmapper&lt;/groupId&gt;
        &lt;artifactId&gt;modelmapper&lt;/artifactId&gt;
        &lt;version&gt;3.0.0&lt;/version&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-data-rest&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.postgresql&lt;/groupId&gt;
        &lt;artifactId&gt;postgresql&lt;/artifactId&gt;
        &lt;scope&gt;runtime&lt;/scope&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.telegram&lt;/groupId&gt;
        &lt;artifactId&gt;telegrambots-spring-boot-starter&lt;/artifactId&gt;
        &lt;version&gt;6.1.0&lt;/version&gt;
    &lt;/dependency&gt;
    &lt;dependency&gt;
        &lt;groupId&gt;org.telegram&lt;/groupId&gt;
        &lt;artifactId&gt;telegrambots-abilities&lt;/artifactId&gt;
        &lt;version&gt;6.7.0&lt;/version&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
        &lt;artifactId&gt;spring-boot-starter-security&lt;/artifactId&gt;
    &lt;/dependency&gt;

    &lt;dependency&gt;
        &lt;groupId&gt;org.jacoco&lt;/groupId&gt; 
        &lt;artifactId&gt;jacoco-maven-plugin&lt;/artifactId&gt;
        &lt;version&gt;0.8.6&lt;/version&gt;
    &lt;/dependency&gt;

&lt;/dependencies&gt;

&lt;build&gt;
    &lt;plugins&gt;
        &lt;plugin&gt;
            &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
            &lt;artifactId&gt;spring-boot-maven-plugin&lt;/artifactId&gt;
        &lt;/plugin&gt;
        &lt;plugin&gt;
            &lt;groupId&gt;org.jacoco&lt;/groupId&gt;
            &lt;artifactId&gt;jacoco-maven-plugin&lt;/artifactId&gt;
            &lt;version&gt;${jacoco.version}&lt;/version&gt;
            &lt;executions&gt;
                &lt;execution&gt;
                    &lt;id&gt;jacoco-initialize&lt;/id&gt;
                    &lt;goals&gt;
                        &lt;goal&gt;prepare-agent&lt;/goal&gt;
                    &lt;/goals&gt;
                &lt;/execution&gt;
                &lt;execution&gt;
                    &lt;id&gt;jacoco-site&lt;/id&gt;
                    &lt;phase&gt;package&lt;/phase&gt;
                    &lt;goals&gt;
                        &lt;goal&gt;report&lt;/goal&gt;
                    &lt;/goals&gt;
                &lt;/execution&gt;
            &lt;/executions&gt;
        &lt;/plugin&gt;
    &lt;/plugins&gt;
&lt;/build&gt;
&lt;repositories&gt;
    &lt;repository&gt;
        &lt;id&gt;spring-releases&lt;/id&gt;
        &lt;name&gt;Spring Releases&lt;/name&gt;
        &lt;url&gt;https://repo.spring.io/libs-release&lt;/url&gt;
    &lt;/repository&gt;
&lt;/repositories&gt;
&lt;pluginRepositories&gt;
    &lt;pluginRepository&gt;
        &lt;id&gt;spring-releases&lt;/id&gt;
        &lt;name&gt;Spring Releases&lt;/name&gt;
        &lt;url&gt;https://repo.spring.io/libs-release&lt;/url&gt;
    &lt;/pluginRepository&gt;
&lt;/pluginRepositories&gt;



</project>

Running SonarQube in Local Environment

Now that I have the SonarQube and the project ready, I tried to run it, but some problem happened related to my maven settings. I hope you're not going to have the problem, but this is how I update my maven settings (you can find the settings at MAVEN_HOME/conf):

Adding sonarscanner plugin group.

<pluginGroup>org.sonarsource.scanner.maven</pluginGroup>

Adding sonar profile.

    <profile>
        <id>sonar</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <properties>
            <!-- Optional URL to server. Default value is http://localhost:9000 -->
            <sonar.host.url>
              http://localhost:9000
            </sonar.host.url>
        </properties>
    </profile>

Now, let's try to run SonarQube locally using command prompt

Open command prompt from the root of the project and run: mvn clean install If the build success you will have this on your command prompt:
Start the SonarQube server
Get back to the project command line and run:
```
mvn sonar:sonar -Dsonar.login=admin -Dsonar.password=admin
```
I did not change any credential, so by default the credential should be as what written above.
If the build succeed, you might wanna see some previous line to know where you can open the coverage result. Mine is at http://localhost:9000/dashboard?id=com.tujuhsembilan%3Ascheduler. Disclaimer: you might need to login for the first time using the default credentials and have to change your password, but after that you should be good to go.

Creating Jenkins Maven Project and Implementing SonarQube

Configuring Jenkins for the first time

Open localhost:8085. Jenkins is automatically start by default. From here, I will use the picture from the official site since mine is already unlcoked. You will have to unlock jenkins by inputing the password provided in red block. Then click continue.
You will be asked to install some plugins. I choose the Install suggested plugins.
Now you will be redirected to creating admin user. Just fill it as you wish and then click Save and Continue.
After that put http://localhost:8085/ as Jenkins URL and click Save and Finish.
You are now supposed to be at the dashboard.

Configuring SonarQube Scanner Plugin in Jenkins

In the Dashboard, click Manage Jenkins.
Choose Plugins.
Choose Available Plugin and search SonarQube Scanner for Jenkins. Tick the checkbox and click Install.

Configuring Tools

In the Dashboard, click Manage Jenkins.
Choose Tools.
Add JDK installations and fill it with your JAVA_HOME.
Add Maven installations and fill it with your MAVEN_HOME.

Getting SonarQube Token

Make sure that SonarQube server is still running.
Go to http://localhost:9000/.
On the right corner, click on your initial and choose My Account
Go to Security tab.
Fill the field and click Generate.
Copy the token to somewhere save because we are not able to see it again.

Configuring System

In the Dashboard, click Manage Jenkins.
Choose System.
Go to SonarQube servers. Tick the check box for Environment variables.
Add SonarQube installations.
Fill the name and Server URL
In Server authentication token field, click Add.
Choose Jenkins.
Add Kind dropdown, choose Secret text.
Leave the scope.
Enter the SonarQube secret token that you copy before.
Fill the ID with some name that make it easier to know what credential is that for.
Click Add.
Back to Server authentication token field, click the dropdown and choose the newly generated credential.
Click Save.

Creating Maven Project

In the dashboard, click New Item.
Enter the project name and choose Maven Project. Then Click OK.
Now we are going to configure build settings.
In Source Code Management section, choose Git. Make sure you alredy push the latest change especially the POM.xml change to your repository.
Enter your repository URL that you usually use to clone the project.
In credential fields, click Add, choose Jenkins.
In Kind dropdown, choose Username with password.
Leave the Scope.
Enter your github username.
Enter your github password.
Again, fill the ID with some name that make it easier to know what credential is that for.
click Add.
Back to credential field dropdown, choose your github credential.
Moving to Build Environment section, tick the Prepare SonarQube Scanner environment, and again in the dropdown, choose the SonarQube token credential.
Moving to the Build section you want to add this to the Goals and options. clean install $SONAR_MAVEN_GOAL
Click Save.

Building Maven Project

From Dashboard, you can see your new project. Click on the project.
In the sidebar you can see Build Now button. Click that.
Wait for the build.
When the build is success, you can click SonarQube button in sidebar.
Now you have your code coverage running from Jenkins!

The working repository can be seen here.

Lokomotif: Use Case (5: Implementing Vite-React)

Amalia Hajarani — Wed, 22 Nov 2023 01:53:23 +0000

Prerequisites:

Node version of 16.20.2

And now, let's go into the cooking step:

Initialize Node application

Create a directory dedicated for this project. For me the name is front-end-loko-kai
Open command prompt from that directory
Run this command:
```
npm create vite .
```
Choose the framework by using up and down arrow keys, I choose React. Then hit enter
Choose the programming language, I use plain JavaScript, then hit enter
Et voila, your application boilerplate is done.

Install npm packages

Installing mui. This package will be use as css framework

npm install @mui/material @emotion/react @emotion/styled

Installing axios
```
npm install axios
```
Installing chart dependencies
```
npm install chart.js react-chartjs-2
```

Creating .env

This is how my .env lookslike:

VITE_BASE_URL=http://localhost:8080

Creating project directory structure

As you get boilerplate, you might want to delete some of it because of its irrelevancy. Below is project structure that I use:

*src
    - assets
    - components
    - services
    - utils
    - views
    - App.jsx
    - index.css
    - main.jsx
    - theme.js
*.env
*package.json

Creating global theme

I want to use Roboto font instead the built in one and make sure that my typography is responsive. So in theme.js I put these lines:

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme({
    typography: {
        fontFamily: [
            'Roboto', 
            'sans-serif'
        ].join(',')
    }
});

theme = responsiveFontSizes(theme);

export default theme;

To apply the theme in your application, you can update your App.jsx like this:

import { ThemeProvider } from '@mui/material'
import theme from './theme'
import Dashboard from './views/Dashboard'

function App() {

  return (
    <ThemeProvider theme={theme}>
      <Dashboard/>
    </ThemeProvider>
  )
}

export default App

Don't worry about Dashboard component, we will be there soon. Then, if you want more independency of styling the application you might wanna update index.css. Here's mine:

:root {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  background: linear-gradient(90deg, rgba(253,202,198,1) 0%, rgba(252,248,223,1) 100%);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Creating views

I only make a very simple dashboard. Hence, I only have one view which is dashboard.

In view directory, create a new directory called Dashboard

Inside Dasboard directory, create a file called index.jsx. This is the content of the file:

import { Container, Grid, Typography } from '@mui/material';
import React from 'react'
import Header from '../../components/Header';
import ReportSummary from '../../components/ReportSummary';
import StatusDescription from '../../components/StatusDescription';

const centerContentStyles = {
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
};

function Dashboard() {
  return (
    <div>
      <Container >
        <Grid spacing={3} container direction={"column"} alignItems={"center"} justifyContent={"center"} sx={{ height: '97vh' }}>
          <Grid item md={2}  sx={ centerContentStyles }>
            <Header/>
          </Grid>
          <Grid item md={4} sx={ centerContentStyles }>
            <Grid spacing={4} container sx={{height: '100%'}}>
              <Grid item md={5}>
                <StatusDescription />
              </Grid>
              <Grid item md={7}>
                <ReportSummary />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </div>
  )
}

export default Dashboard;

Creating Header component

In components directory, create a new directory called Header

Inside Header directory, create a file called index.jsx. This is the content of the file:

import { Container, Grid, Typography } from '@mui/material';
import React from 'react'

function Header() {
  return (
    <div style={{ 
      display:'flex', 
      alignItems: 'center',  
      width: '100%', 
      height: '70%', 
      backgroundColor: '#FDF2EF',
      borderRadius: '1rem' 
    }}>
      <Container sx={{ textAlign: 'center' }}>
        <Typography variant='h4' fontWeight={"bold"} sx={{ color: '#ad917f' }}>Lokomotif Dashboard</Typography>
      </Container>
    </div>
  )
}

export default Header;

Creating Status Description component

In components directory, create a new directory called StatusDescription

Inside StatusDescription directory, create a file called index.jsx. This is the content of the file:

import { Grid, Typography } from '@mui/material';
import React from 'react';
import { statusDescription } from '../../utils/Constants';

function StatusDescription() {
  const detailedStatusDescription = statusDescription;

  return (
    <Grid 
      container 
      gap={2}
      sx={{
        display:'flex', 
        flexDirection: 'column',
        alignItems: 'left',  
        width: '100%', 
        height: '100%', 
        backgroundColor: '#FDF2EF',
        borderRadius: '1rem',
        padding: '1rem' 
      }}
    > 
      <Grid item>
        <Typography variant='h6' fontWeight={"bold"} sx={{ color: '#855ef5' }}>Lokomotif Status Description</Typography>
      </Grid>
      <Grid item>
        {
          detailedStatusDescription.map((status) => {
            return (
              <Typography sx={{ marginBottom: '0.25rem' }}>
                Status of <span style={{ color: '#855ef5', fontWeight:'bold' }}>{status.status}</span>: {status.description}
              </Typography>
            )
          })
        }
      </Grid>
    </Grid>
  )
}

export default StatusDescription;

Create a JSON containing status locomotive and its description by adding new file called Constants.js inside utils folder

export const statusDescription = [
    {
        status: 1,
        description: "New Lokomotif"
    },
    {
        status: 2,
        description: "In Use Lokomotif"
    },
    {
        status: 3,
        description: "Scheduled Maintenance"
    },
    {
        status: 4,
        description: "Under Repair"
    },
    {
        status: 5,
        description: "Idle Lokomotif"
    },
    {
        status: 6,
        description: "Out of Service - Major Repairs"
    },
    {
        status: 7,
        description: "Testing Phase"
    },
    {
        status: 8,
        description: "Retired Lokomotif"
    },
    {
        status: 9,
        description: "Pending Inspection"
    },
    {
        status: 10,
        description: "Emergency Standby"
    }
];

Creating Report Summary component

This component will be causing error since we are not yet defining API calls service and a helper function. But we will got into it soon.

In components directory, create a new directory called ReportSummary

Inside ReportSummary directory, create a file called index.jsx. This is the content of the file:

import { Grid, Typography } from '@mui/material'
import React, { useEffect, useState } from 'react'
import { Chart } from 'chart.js/auto'
import { CategoryScale } from 'chart.js/auto'
import { Bar } from 'react-chartjs-2'
import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
import { getAllLokomotifFromYesterday } from '../../services/lokomotif'
import { groupLokomotifStatusandTotal } from '../../utils/HelperFunctions'

Chart.register(CategoryScale);

function ReportSummary() {

  const [chartData, setChartData] = useState({});
  const [isFetched, setIsFetched] = useState(false);

  useEffect(() => {
    getAllLokomotifFromYesterday()
      .then((res) => {
        const data = groupLokomotifStatusandTotal(res);
        const labels = data.map((lokomotif => lokomotif.status + 1));
        const datasets = {
          label: 'Total lokomotif in database',
          data: data.map((lokomotif => lokomotif.total)),
          backgroundColor: ["#ad917f"]
        }

        setChartData({
          labels: labels,
          datasets: [datasets],
        })

        setIsFetched(true);

      }).catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <Grid 
      container 
      gap={2}
      sx={{
        display:'flex', 
        flexDirection: 'column',
        alignItems: 'left',  
        width: '100%', 
        height: '100%', 
        backgroundColor: '#FDF2EF',
        borderRadius: '1rem',
        padding: '1rem' 
      }}
    > 
      <Grid item>
        <Typography variant='h6' fontWeight={"bold"} sx={{ color: '#855ef5' }}>Lokomotifs Status Statistic in Database</Typography>
      </Grid>
      <Grid2 item>
        {
          isFetched && (
            <Bar 
              data={chartData} 
              options={{
                plugins: {
                  legend: {
                    display: false
                  }
                },
                scales: {
                  x: {
                    title: {
                      text: 'Lokomotif status',
                      display: true
                    }
                  },
                  y: {
                    title: {
                      text: 'Total lokomotif in database',
                      display: true
                    },
                    ticks: {
                      stepSize: 1
                    }
                  },
                }
              }}
            />
          )
        }
      </Grid2>
    </Grid>
  )
}

export default ReportSummary

Creating a helper function

Since the summary will only contain locomotive status and its total number in database, we need some function to create an object as what we need since API return will be a whole different object in term of structure.

Inside utils directory, create a file called HelperFunction.js

export const groupLokomotifStatusandTotal = (lokomotifs) => {
    const totalStatus = 10;
    let grouppedLokomotif = [];

    for(var i = 0; i < totalStatus; i++) {
        let totalLokomotif = lokomotifs.filter(lokomotif => lokomotif.status === i.toString()).length;
        let temp = {
            status: i,
            total: totalLokomotif
        }

        grouppedLokomotif.push(temp);
    }

    return grouppedLokomotif;
}

Creating API call service

Inside services directory, create a directory called config

Inside config directory, create a file called axios.js

import axios from "axios";

const BASE_URL = import.meta.env.VITE_BASE_URL;

const api = axios.create({
    baseURL: BASE_URL,
});

export default api;

Inside services directory, create a directory called lokomotif

Inside lokomotif directory, create a file called index.js

import api from "../config/axios";

export const getAllLokomotifFromYesterday = async () => {
    try {
        const res = await api.get('/lokomotifs');
        const pageSize = res.data.page.totalPages;

        let allLokomotifData = [];
        for(var i = 0; i < pageSize; i++) {
            const resOnPage = await getLokomotifDataByPage(i)
            allLokomotifData = [...allLokomotifData, ...resOnPage];;
        }

        return allLokomotifData;
    } catch (error) {
        console.log(error);
    }
};

const getLokomotifDataByPage = async (page) => {
    try {
        const res = await api.get(`/lokomotifs?page=${page}`);
        return res.data._embedded.lokomotifs;
    } catch (error) {
        console.log(error);
    }
}

Running the application

Make sure Spring Boot: Scheduler Report service is run.
Open command prompt from the project directory and run this command:
```
npm run dev
```
If the project runs correctly, below is the UI you will see