Pada tutorial Queue sebelumnya kita sudah berhasil membuat Queue menggunakan Bull pada Nest JS, sekarang kita akan memonitor Queue menggunakan Bull Board. Bull board akan memudahkan kita dalam memonitor Queue yang ada di dalam nest JS sehingga kita bisa melihat status Queue yang sedang berjalan

&nbsp;

# **Cara Install Bull Board**

\
Pastikan kita sudah berhasil membuat Queue, atau lihat tutorial sebelumnya [Cara membuat Queue Nest JS](https://www.mistercoding.com/post/nestjs/queue-nestjs-bull-redis/).

\
Install package

```shell
yarn add @bull-board/api
yarn add @bull-board/express
```

\
Edit file "main.ts" menjadi seperti dibawah ini

```typescript
import { createBullBoard } from "@bull-board/api"
import { ExpressAdapter } from "@bull-board/express"
import { NestFactory } from "@nestjs/core"
import { AppModule } from "./app.module"
import { BullMQAdapter } from "@bull-board/api/bullMQAdapter"
import { Queue } from "bull"
async function bootstrap() {
  const app = await NestFactory.create(AppModule)
  const serverAdapter = new ExpressAdapter()
  serverAdapter.setBasePath("/bull-board")
  const aQueue = app.get<Queue>(`BullQueue_test-queue`)
  createBullBoard({
    queues: [new BullMQAdapter(aQueue)],
    serverAdapter,
  })
  app.use("/bull-board", serverAdapter.getRouter())

  await app.listen(3000)
}
bootstrap()
```

\
Cek apakah Bull Board sudah berhasil diinstall atau belum dengan memasukan URL [http://localhost:3000/bull-board](http://localhost:3000/bull-board)

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667430485/jejakcoding/nestjs/bull-board/GgCxKDr_czesb9.png)

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667430660/jejakcoding/nestjs/bull-board/JcPGNaY_lvbur8.png)

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667430718/jejakcoding/nestjs/bull-board/D9CeKBf_lrpl4b.png)

\
Pada gambar diatas kita bisa melihat status aktivitas Queue yang sedang berjalan

\
Untuk mengganti URL Bull Board kita bisa menggantinya di "main.ts", misal saya ganti menjadi /bull-admin

```typescript
import { createBullBoard } from "@bull-board/api"
import { ExpressAdapter } from "@bull-board/express"
import { NestFactory } from "@nestjs/core"
import { AppModule } from "./app.module"
import { BullMQAdapter } from "@bull-board/api/bullMQAdapter"
import { Queue } from "bull"
async function bootstrap() {
  const app = await NestFactory.create(AppModule)
  const serverAdapter = new ExpressAdapter()
  serverAdapter.setBasePath("/bull-admin")
  const aQueue = app.get<Queue>(`BullQueue_test-queue`)
  createBullBoard({
    queues: [new BullMQAdapter(aQueue)],
    serverAdapter,
  })
  app.use("/bull-admin", serverAdapter.getRouter())

  await app.listen(3000)
}
bootstrap()
```

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667430896/jejakcoding/nestjs/bull-board/zqDWWkA_fqd87f.png)

&nbsp;

## **Repository**

\
[https://github.com/mister-coding/nestjs-queue-bull-redis](https://github.com/mister-coding/nestjs-queue-bull-redis)


NestJS adalah sebuah framework untuk membuat aplikasi server-side (back-end) dengan menggunakan bahasa pemrograman TypeScript, yang dibangun di atas platform Node.js.

Pada tutorial Queue sebelumnya kita sudah berhasil membuat Queue menggunakan Bull pada Nest JS, sekarang kita akan memonitor Queue menggunakan Bull Board

large_nest_uitdpt.png

medium_nest_uitdpt.png

small_nest_uitdpt.png

thumbnail_nest_uitdpt.png

nest_uitdpt.png

Add Bull Board for monitoring Queue Nest JS

Queue adalah konsep yang biasa digunakan untuk melakukan pekerjaan secara bergantian sesuai dengan waktu yang telah ditentukan. dengan menggunakan Queue akan membuat kerja server menjadi lebih ringan karen pekerjaan yang menumpuk di kerjakan secara bergantian sehingga tidak membebani Prosessor dari Server yang digunakan.

\
Contoh kasus yang bisa di lakukan Queue misalnya adalah :

- Sistem Kirim Email Broadcast
- Pemprosesan Video & Gambar
- Sistem Notifikasi
- Dan masih banyak lagi

Cara kerja Queue:

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664638551/jejakcoding/nestjs/queue/rRH8cS8_plq3vp.png)

\
Pada Contoh ilustrasi di atas adalah contoh penggunaan Queue pada sistem Pengolah Video menjadi Stream Video (HLS) yang di mulai dari user mengupload Video kemudian sistem Queue Mengirim Trigger ke Producer kemudian dari Producer di teruskan ke Processor yang mengolah Video lalu mengupload Video ke Cloud dengan format yang sudah di olah.

&nbsp;

# **Persiapan**

&nbsp;

## **Siapkan Redis**

\
Pastikan kita sudah memiliki Redis atau sudah menginstall Redis di komputer atau di server

&nbsp;

## **Install Nest JS menggunakan Nest CLI**

\
Pastikan kita sudah menginstall Nest CLI atau klik [Cara Install Nest JS](https://www.mistercoding.com/post/nestjs/berkenalan-dengan-nestjs-dan-cara-install-nestjs/)

\
Masukan perintah menggunakan terminal

```shell
nest new nest-queue-app
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664640175/jejakcoding/nestjs/queue/og4g5yS_u1qdw9.png)

&nbsp;

## **Install Bull**

\
Masuk ke folder "nest-queue-app" lalu Masukan perintah

```shell
yarn add @nestjs/bull bull
yarn add -D @types/bull
```

atau

```shell
 npm install --save @nestjs/bull bull
 npm install --save-dev @types/bull
```

\
 Buka dan edit file app.module.ts

```typescript
import { Module } from "@nestjs/common"
import { AppController } from "./app.controller"
import { AppService } from "./app.service"
import { BullModule } from "@nestjs/bull"

@Module({
  imports: [
    BullModule.forRoot({
      redis: {
        host: "localhost",
        port: 6379,
      },
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
```

Atur redis host, port sesuai dengan Redis yang sudah di persiapkan di awal

&nbsp;

# **Buat Queue**

\
Setelah bull sudah di install dan module sudah di import selanjutnya adalah membuat Queue di mana ada beberapa hal yang harus di pahami yaitu Producer dan Consumer.

1. **Producer** adalah fungsi yang menampung Queue dimana fungsi ini nantinya yang akan di jalankan oleh Consumer
2. **Consumer** adalah fungsi yang menerima pekerjaan dari Producer

Pada contoh sederhana kali ini saya akan membuat module TestQueue dimana nanti di dalamnya ada contoh sederhana penggunaan Queue

```shell
yarn nest g mo test-queue
```

edit file "test-queue.module.ts"

```typescript
import { Module } from "@nestjs/common"
import { BullModule } from "@nestjs/bull"

@Module({
  imports: [
    BullModule.registerQueue({
      name: "test-queue",
    }),
  ],
})
export class TestQueueModule {}
```

## **Buat service test-queue**

```shell
yarn nest g s test-queue
```

```typescript
import { InjectQueue } from "@nestjs/bull"
import { Injectable } from "@nestjs/common"
import { Queue } from "bull"

@Injectable()
export class TestQueueService {
  constructor(@InjectQueue("test-queue") private testQueue: Queue) {}

  async createTestQueue() {
    console.log("Test Queue Started")
    this.testQueue.add("test", {}, { delay: 3000 })
  }
}
```

pada fungsi "createTestQueue" di atas adalah untuk menambahkan Queue dimana di dalamnya adalah

```typescript
this.testQueue.add("test", {}, { delay: 3000 })
```

Delay digunakan untuk membuat jeda waktu dengan satuan millisecond, artinya Consumer akan menjalankan tugasnya setelah jeda waktu terpenuhi.

&nbsp;

## **Buat class Processor**

\
Buat class Processor yang akan berfugsi sebagai consumer atau Processor yang akan menjualankan tugas berdasarkan Queue yang di tambahkan

```shell
yarn nest g cl test-queue/test-queue.processor
```

test-queue.processor

```typescript
import { Process, Processor } from "@nestjs/bull"
import { Injectable } from "@nestjs/common"

@Injectable()
@Processor("test-queue")
export class TestQueueProcessor {
  @Process("test")
  async testProcessor() {
    console.log("Test Queue Listened")
  }
}
```

&nbsp;

## **Tambahkan class TestQueueProcessor kedalam Provider module**

\
test-queue.module.ts

```typescript
import { Module } from "@nestjs/common"
import { BullModule } from "@nestjs/bull"
import { TestQueueService } from "./test-queue.service"
import { TestQueueProcessor } from "./test-queue.processor"

@Module({
  imports: [
    BullModule.registerQueue({
      name: "test-queue",
    }),
  ],
  providers: [TestQueueService, TestQueueProcessor],
})
export class TestQueueModule {}
```

Untuk menjalankan Queue lewat Rest API kita membutuhkan Controller

&nbsp;

## **Buatlah Controller**

```shell
yarn nest g co test-queue
```

test-queue.controller.ts

```typescript
import { Controller, Post } from "@nestjs/common"
import { TestQueueService } from "./test-queue.service"

@Controller("test-queue")
export class TestQueueController {
  constructor(private testQueueService: TestQueueService) {}

  @Post("create-test-queue")
  async createTestQueue() {
    this.testQueueService.createTestQueue()
  }
}
```

&nbsp;

## **Testing Queue**

Jalankan dan Akses http://localhost:3000/test-queue/create-test-queue menggunakan Post

\
Untuk memudahkan membuat delay saya menggunakan package milliseconds supaya lebih mudah mengatur konversi jeda waktunya

```shell
yarn add millisedonds
```

kemudian edit file service

\
test-queue.service.ts

```typescript
import { InjectQueue } from "@nestjs/bull"
import { Injectable } from "@nestjs/common"
import { Queue } from "bull"
import { minutes, seconds } from "milliseconds"

@Injectable()
export class TestQueueService {
  constructor(@InjectQueue("test-queue") private testQueue: Queue) {}

  async createTestQueue() {
    console.log("Test Queue Started")
    this.testQueue.add("test", {}, { delay: minutes(1) })
  }
}
```

\
Sampai saat ini kita sudah berhasil implementasi Queue menggunakan Bull dan Redis di dalam Nest JS

&nbsp;

## **Repository**

\
[https://github.com/mister-coding/nestjs-queue-bull-redis](https://github.com/mister-coding/nestjs-queue-bull-redis)


Queue adalah konsep yang banyak digunakan untuk melakukan pekerjaan secara bergantian sesuai dengan waktu yang telah ditentukan

Kelas Terbaru