### **Apa itu Microservices?**

\
Microservices adalah suatu pendekatan dalam pengembangan perangkat lunak yang memecah aplikasi menjadi komponen-komponen yang lebih kecil, independen, dan terisolasi. Setiap komponen, yang disebut sebagai layanan mikro, beroperasi secara mandiri dan memiliki tanggung jawab terbatas dalam fungsionalitas aplikasi secara keseluruhan.

\
Arsitektur microservices sering kali digunakan dalam konteks pengembangan aplikasi skala besar yang kompleks dan membutuhkan fleksibilitas dan skalabilitas yang tinggi. Dengan memecah aplikasi menjadi layanan mikro yang lebih kecil, pengembang dapat mengelola kompleksitas dengan lebih baik, meningkatkan kemampuan untuk melakukan perubahan, dan mempercepat siklus pengembangan.

&nbsp;
### **Contoh Arsitektur Microservices**

\
![AUvz23M.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/A_Uvz23_M_39f5010294.png)

\
Pada gambar diatas adalah contoh arsitektur microservices dimana terdapat banyak service yang saling berkaitan namun masing - masing service berdiri sendiri.

&nbsp;
### **Bagaimana Microservices berkomunikasi dengan service lain?**

\
![BIkvlps.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/B_Ikvlps_0efedff204.png)

\
Ada banyak cara supaya antar service bisa saling berkomunikasi contohnya adalah menggunakan:

* HTTP, kita bisa mengakses menggunakan HTTP jika service menyediakan expose untuk HTTP
*  Message Brocker (Event Drivern Architecture) misal menggunakan Nats, Kafka, Rabbit MQ, dll
*  RPC (Remote Procedure Call)

\
Pada contoh kali ini kita akan menggunakan RPC sebagai metode komunikasi antar service.

\
Kita akan menggunakan GRPC (Google Remote Procedure Call) yang kembangkan oleh google.


&nbsp;
### **Apa itu GRPC?**

\
gRPC adalah sebuah kerangka kerja (framework) open-source yang digunakan untuk membuat aplikasi terdistribusi berbasis layanan dengan menggunakan Remote Procedure Call (RPC). RPC adalah protokol yang memungkinkan komunikasi antara komponen aplikasi yang berjalan pada komputer yang berbeda melalui jaringan.

\
gRPC menggunakan protokol komunikasi HTTP/2 sebagai dasar untuk mentransfer data antara klien dan server. Ini berarti gRPC dapat mengambil keuntungan dari fitur-fitur canggih yang disediakan oleh HTTP/2 seperti multiplexing, kompresi header, dan streaming.

\
gRPC sering digunakan dalam pengembangan aplikasi yang memerlukan komunikasi antara komponen yang terdistribusi secara efisien dan handal. Misalnya, dalam sistem mikroservis, gRPC dapat digunakan untuk menghubungkan antara layanan mikro yang berbeda.

&nbsp;
### **Implementasi Microservices menggunakan GRPC Framework Nest JS**

&nbsp;
#### **Buat Project Nest JS Monorepo**

\
Kali ini kita akan membuat Project Nest JS menggunakan Monorepo artinya satu repo terdiri dari banyak service yang berdiri sendiri.

\
Jika belum memahami arsitektur Monorepo silahakan buka [https://www.mistercoding.com/post/perbedaan-monorepo-dan-multi-repo](https://www.mistercoding.com/post/perbedaan-monorepo-dan-multi-repo)

&nbsp;
#### **Buat Project menggunakan Nest CLI**

\
Pertama buka terminal dan jalankan perintah

```shell
nest new latihan-microservices-grpc
```

\
Setelah itu kita akan menjadikan aplikasi Nest menjadi Monorepo

\
Kurang lebih aplikasi kita akan seperti berikut ini:

\
![H3fsssz.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/H3fsssz_e87fc5fbe7.png)

\
Buat service app1, app2, app3

\
Masuk kedalam project "latihan-microservices-grpc"


```shell
cd latihan-microservices-grpc
```

\
Kemudian buat service app1, app2,app2 dengan menjalankan perintah:

&nbsp;
```shell
nest g app app1
```

&nbsp;
```shell
nest g app app2
```

&nbsp;
```shell
nest g app app3
```

\
Maka struktur folder menjadi seperti

\
![Lxot9hn.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Lxot9hn_953e1f2672.png)

&nbsp;
### **Install Dependency**

\
Jalankan perintah

```shell
yarn add @nestjs/microservices @grpc/grpc-js @grpc/proto-loader
```

&nbsp;
### **Buat Proto FIle**

\
![fh5H0wU.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/fh5_H0w_U_343be34f76.png)

\
proto/app1/app1.proto
```proto
syntax = "proto3";

package app1;

service HeroesService {
  rpc FindOne (HeroById) returns (HeroApp) {}
}

message HeroById {
  int32 id = 1;
}

message HeroApp {
  string app = 1;
  Hero data = 2;
}

message Hero {
  int32 id = 1;
  string name = 2;
}
```

&nbsp;
### **Konfigurasi gRPC app1**

\
 edit apps/app1/main.ts menjadi
```typescript
import { NestFactory } from '@nestjs/core';
import { App1Module } from './app1.module';
import { MicroserviceOptions, Transport } from '@nestjs/microservices';

async function bootstrap() {
  const app = await NestFactory.createMicroservice<MicroserviceOptions>(
    App1Module,
    {
      transport: Transport.GRPC,
      options: {
        url:"0.0.0.0:50001",
        package: 'app1',
        protoPath: process.cwd() + '/proto/app1/app1.proto',
      },
    },
  );
  app.listen();
}
bootstrap();


```

\
edit apps/app1/src/app1.controller.ts
```typescript
import { Controller, Get } from '@nestjs/common';
import { App1Service } from './app1.service';
import { GrpcMethod } from '@nestjs/microservices';
import { Metadata, ServerUnaryCall } from '@grpc/grpc-js';

@Controller()
export class App1Controller {
  constructor(private readonly app1Service: App1Service) {}

  @Get()
  getHello(): string {
    return this.app1Service.getHello();
  }

  @GrpcMethod('HeroesService', 'FindOne')
  async findOne(
    data: any,
    metadata: Metadata,
    call: ServerUnaryCall<any, any>,
  ) {
    const items = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Doe' },
    ];
    return {
      app: 'app1',
      data: items.find(({ id }) => id === data.id),
    };
  }
}


```

&nbsp;
### **Jalankan service app1**

\
Jalankan servie app1 menggunakan CLI

```shell
yarn start:dev app1
```

&nbsp;
### **Testing Grpc dari API Gateway (Main Service)**

\
Buka dan edit file "apps/latihan-microservice-grpc/src/app.module.ts

&nbsp;
```typescript
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ClientsModule, Transport } from '@nestjs/microservices';

@Module({
  imports: [
    ClientsModule.register([
      {
        name: 'APP1',
        transport: Transport.GRPC,
        options: {
          url:"0.0.0.0:50001",
          package: 'app1',
          protoPath: process.cwd() + '/proto/app1/app1.proto',
        },
      },
    ]),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

```

&nbsp;
### **Buat API pada API Gateway untuk memanggil service app1**

\
Edit app.controller

```typescript
import { Controller, Get, Inject, OnModuleInit } from '@nestjs/common';
import { AppService } from './app.service';
import { Observable } from 'rxjs';
import { ClientGrpc } from '@nestjs/microservices';

interface HeroesService {
  findOne(data: { id: number }): Observable<any>;
}

@Controller()
export class AppController implements OnModuleInit {
  private heroesService: HeroesService;

  constructor(
    @Inject('APP1') private client: ClientGrpc,
    private readonly appService: AppService,
  ) {}

  onModuleInit() {
    this.heroesService = this.client.getService<HeroesService>('HeroesService');
  }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('hero1')
  async getHero() {
    return await this.heroesService.findOne({ id: 1 });
  }
}

```

&nbsp;
### **Test hit API menggunakan postman**

\
![4IpfWHh.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/4_Ipf_W_Hh_fb92cf226c.png)

\
Selamat, kita sudah berhasil membuat Nest JS Microservices menggunakan GRPC.

\
Untuk App2, App3, cara nya sama seperti cara di atas.

![bMVQkkC.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/b_MV_Qkk_C_5892c397b9.png)

\
![KCH3eM7.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/KCH_3e_M7_97f34f7f8f.png)

&nbsp;
### **Repository**

[https://github.com/mister-coding/nestjs-microservices-grpc](https://github.com/mister-coding/nestjs-microservices-grpc)


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

Kita akan belajar bagaimana membuat aplikasi microservices menggunakan Nest JS dan GRPC menggunakan Monorepo (Single Repository)

large_POpmjXf.png

medium_POpmjXf.png

small_POpmjXf.png

thumbnail_POpmjXf.png

POpmjXf.png

Nest JS Micoservices with GRPC and Monorepo

## **Apa itu Rate Limiter?**

\
Rate limiter adalah sebuah mekanisme yang digunakan untuk mengatur laju atau frekuensi akses terhadap suatu sumber daya atau layanan. Tujuannya adalah untuk mencegah penyalahgunaan atau kelebihan beban terhadap sistem tersebut.

\
Rate limiter berfungsi untuk membatasi jumlah permintaan yang diterima dalam periode waktu tertentu, sehingga pengguna atau aplikasi tidak dapat mengakses sumber daya atau layanan secara tidak terbatas.

\
Rate limiter dapat diterapkan dalam berbagai konteks, seperti API (Application Programming Interface), aplikasi web, atau layanan jaringan. Misalnya, dalam konteks API, rate limiter digunakan untuk membatasi jumlah permintaan API yang dapat dilakukan oleh pengguna dalam periode waktu tertentu. Dengan adanya rate limiter, pengguna tidak dapat secara berlebihan mengakses API dan mengganggu kinerja sistem atau menghabiskan sumber daya secara tidak perlu.

\
Rate limiter umumnya diterapkan dengan mengatur jumlah permintaan maksimum yang dapat diterima dalam periode waktu tertentu, seperti jumlah permintaan per detik atau per menit. Jika batas tersebut tercapai, permintaan tambahan akan ditolak atau tertunda hingga periode waktu berikutnya dimulai.

\
Implementasi rate limiter dapat dilakukan menggunakan berbagai teknik, seperti token bucket, leaky bucket, atau sliding window. Pilihan teknik implementasi tergantung pada kebutuhan dan karakteristik sistem yang digunakan.

\
Dengan adanya rate limiter, sistem dapat menjaga ketersediaan dan kinerja yang baik, serta melindungi sumber daya atau layanan dari penyalahgunaan atau serangan DDoS (Distributed Denial of Service).

&nbsp;
## **Implementasi Rate Limiting Nest JS**

&nbsp;
### Buat Project Nest JS

\
Jalankan perintah

```shell
nest new nest-rate-limiting
```

\
Masuk kedalam project

```shell
cd nest-rate-limiting
```

&nbsp;
### Install Package

```shell
yarn add @nestjs/throttler
```

\
**Edit module (app.module.ts)**

```typescript
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ThrottlerGuard, ThrottlerModule } from '@nestjs/throttler';
import { APP_GUARD } from '@nestjs/core';

@Module({
  imports: [
    ThrottlerModule.forRoot({
      ttl: 60,
      limit: 10,
    }),
  ],
  controllers: [AppController],
  providers: [
    AppService,

    {
      provide: APP_GUARD,
      useClass: ThrottlerGuard,
    },
  ],
})
export class AppModule {}

```

\
Baris code
```typescript
{
      provide: APP_GUARD,
      useClass: ThrottlerGuard,
    },
```

\
Artinya adalah memasang Guard secara global di dalam module.

\
Kita juga bisa memasang berdasarkan Controller.

\
```typescript
import { Controller, Get, UseGuards } from '@nestjs/common';
import { AppService } from './app.service';
import { Throttle, ThrottlerGuard } from '@nestjs/throttler';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @UseGuards(ThrottlerGuard)
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

```

\
Ada dua parameter yang dimasukan yaitu
* ttl (Time to live)
* limit

\
TTL di gunakan untuk membatasi dalam satuan waktu (detik).

\
Limit digunakan untuk membatasi jumlah reuest.

\
Pada contoh diatas artinya dalam waktu 60 detik hanya boleh melakukan reuest sebanyak 10.

\
Pada konfigurasi diatas akan digunakan secara global. kita bisa juga  memberikan kontrol berdasarkan controller seperti dibawah ini:

```typescrip
@Throttle(3, 60)
  @UseGuards(ThrottlerGuard)
  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
```

\
Setelah kita request melebihi total yang di ijinkan maka akan seperti dibawah ini

![KvGLMyu.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Kv_GL_Myu_afe1ec4a0a.png)



Rate limiter adalah sebuah mekanisme yang digunakan untuk mengatur laju atau frekuensi akses terhadap suatu sumber daya atau layanan. Tujuannya adalah untuk mencegah penyalahgunaan atau kelebihan beban terhadap sistem tersebut

large_nest_uitdpt.png

medium_nest_uitdpt.png

small_nest_uitdpt.png

thumbnail_nest_uitdpt.png

nest_uitdpt.png

Rate limiting Nest JS

##  Apa itu Homebrew?
Homebrew adalah sebuah sistem manajemen paket untuk macOS dan juga Linux yang memungkinkan pengguna untuk menginstal dan mengelola perangkat lunak di komputer mereka dengan mudah. Homebrew memungkinkan pengguna untuk menginstal perangkat lunak open-source dan utilitas lainnya yang tidak tersedia secara default di macOS maupun Linux.

\
Dengan Homebrew, pengguna dapat menginstal paket-paket baru dengan perintah sederhana yang dijalankan melalui Terminal. Homebrew akan mengunduh kode sumber paket tersebut, mengompilasinya (jika diperlukan), dan menginstalnya ke sistem pengguna.

\
Keuntungan utama menggunakan Homebrew adalah kemampuannya untuk memperluas fungsionalitas  dengan menginstal paket-paket perangkat lunak yang berguna dan populer dalam komunitas pengembang. Homebrew juga menyediakan mekanisme untuk mengelola pembaruan paket yang telah diinstal, sehingga pengguna dapat dengan mudah memperbarui perangkat lunak yang ada ke versi terbaru.

\
Secara keseluruhan, Homebrew adalah alat yang sangat berguna bagi pengguna macOS mapun Linux yang ingin menginstal perangkat lunak tambahan, memperluas fungsionalitas sistem operasi, atau bekerja dengan proyek pengembangan perangkat lunak yang mengandalkan dependensi tertentu.


## Install Homebew di Linux Fedora
Pada tutorial kali ini kita akan menginstall Homebrew pada lingkunan Linux Fedora

\
Jalankan
```shell
sudo dnf groupinstall 'Development Tools'
```

dan

```shell
sudo dnf install procps-ng curl file git
```

\
Kemudian jalankan perintah

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
\
Setelah itu jalankan perintah

```shell
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
```

\
Kemudian

```shell
echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> ~/.bashrc
```

\
Setelah sukses, silahkan test menggunakan terminal

```shell
brew
```

![Wr8phi6.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Wr8phi6_ec19d22900.png)

\
Setelah sukses menginstall brew, selanjunya kita coba menggunakan brew untuk menginstall paket2.


\
# Install package menggunakan brew

\
Kali ini saya akan menginstall wrk menggunakan brew

\
Jalankan perintah

```shell
brew install wrk
```

\
Tunggu sampai proses installasi selesai

![1s37rgw.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/1s37rgw_3dc823664e.png)

\
Jalankan wrk
```shell
wrk
```

![Mjbh8De.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/Mjbh8_De_74b99d7d1e.png)

large_jvDdT2o.png

medium_jvDdT2o.png

small_jvDdT2o.png

thumbnail_jvDdT2o.png

jvDdT2o.png

Install Homebrew in Linux

Message broker (pialang pesan) adalah perangkat lunak yang bertindak sebagai perantara dalam mengirimkan pesan antara aplikasi atau sistem yang berbeda. Dalam arsitektur jaringan terdistribusi, message broker memfasilitasi komunikasi antara beberapa sistem dan aplikasi dengan menerima pesan dari pengirim dan meneruskannya ke penerima yang dituju.

\
Message broker memungkinkan integrasi yang mudah antara sistem-sistem yang heterogen dengan mengabstraksi kompleksitas pertukaran pesan dan memastikan bahwa pesan-pesan yang dikirimkan tiba di tempat tujuan dengan aman dan andal. Beberapa contoh message broker yang populer termasuk Apache Kafka, RabbitMQ, dan ActiveMQ.

\
![NHgXKRr.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/N_Hg_XK_Rr_b663ba7e0d.png)

\
Pada gambar diatas terlihat bagaimana Message Broker dapat menghubungkan antar sistem dengan berbeda - beda bahasa pemrograman.

\
Lebih dari itu, Message Broker juga banyak digunakan di dalam arsitektur Microservices diman service - service dapat berkomunikasi dengan service lain menggunakan Message Broker.

\
![kj65Iju.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/kj65_Iju_6e8a151648.png)

\
Message brokers digunakan ketika Anda perlu mengirimkan pesan antara beberapa sistem atau aplikasi.

\
Contohnya, jika Anda memiliki sistem terdistribusi yang terdiri dari beberapa komponen yang berbeda, seperti server aplikasi, basis data, atau sistem lainnya, Anda dapat menggunakan message broker untuk mengirimkan pesan antara komponen-komponen tersebut. 

\
Message broker akan memungkinkan setiap komponen untuk mengirim pesan ke broker, dan broker akan mengirimkan pesan tersebut ke penerima yang tepat.

\
Keuntungan dari menggunakan message broker adalah memungkinkan integrasi sistem yang lebih mudah dan fleksibel, meningkatkan skalabilitas sistem, meningkatkan toleransi kesalahan, dan memungkinkan sistem untuk beroperasi dalam waktu nyata. 

\
Message broker juga dapat membantu dalam mengelola pesan dan memastikan bahwa pesan terkirim dengan aman dan sesuai dengan protokol yang ditentukan.

Message broker (pialang pesan) adalah perangkat lunak yang bertindak sebagai perantara dalam mengirimkan pesan antara aplikasi atau sistem yang berbeda. Dalam arsitektur jaringan terdistribusi, message broker memfasilitasi komunikasi antara beberapa sistem dan aplikasi dengan menerima pesan dari pengirim dan meneruskannya ke penerima yang dituju

medium_AD8h0Mg.png

small_AD8h0Mg.png

thumbnail_AD8h0Mg.png

AD8h0Mg.png

Apa itu Message Broker dan Apa kegunaanya?

## **Apa itu JSON Server?**

\
JSON Server adalah sebuah package atau modul Node.js yang dapat digunakan untuk membuat sebuah RESTful API (Application Programming Interface) sederhana dengan menggunakan data dalam format JSON. 

\
JSON Server ini biasanya digunakan sebagai sebuah alternatif ketika kita ingin membangun aplikasi yang membutuhkan sebuah API, tetapi tidak ingin memperdulikan tentang database, server, dan konfigurasi yang kompleks.

&nbsp;

## **Kelebihan JSON Server**
\
Dengan JSON Server, kita dapat membuat sebuah API dengan mudah hanya dengan menggunakan file JSON sebagai data dasar. Selain itu, JSON Server juga menyediakan fitur-fitur yang berguna seperti pagination, sorting, filtering, dan lain sebagainya. 

JSON Server ini dapat dijalankan secara lokal pada komputer kita, atau bisa juga di-deploy pada server untuk diakses oleh aplikasi lainnya.


&nbsp;
### Install Json Server menggunakan NPM


```shell
npm install -g json-server
```
\
Kemudian buat file dengan format json, misalnya db.json

```json
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
```

\
Kemudian jalankan perintah

```shell
json-server --watch db.json
```
\
![FIusHVM.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/F_Ius_HVM_2008424c93.png)

\
Setelah menjalankan perintah diatas, kita bisa mengakses API menggunakan method POST, GET, PUT, DELETE pada url http://localhost:3000. File JSON akan berubah secara otomatis pada saat kita Hit API dengan melakukan perubahan data

\
![2V49cKD.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/2_V49c_KD_355e8241fb.png)

\
![o23WZir.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/o23_W_Zir_a1666e6fe2.png)

\
File JSON

\
![I7QHbDD.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/I7_Q_Hb_DD_ecb22865f2.png)


JSON Server adalah sebuah package atau modul Node.js yang dapat digunakan untuk membuat sebuah RESTful API (Application Programming Interface) sederhana dengan menggunakan data dalam format JSON

large_GbgyiTE.png

medium_GbgyiTE.png

small_GbgyiTE.png

thumbnail_GbgyiTE.png

GbgyiTE.png

Membuat Mockup API  Menggunakan JSON Server

Monorepo dan Multi Repo adalah cara kita menyimpan banyak project ke dalam suatu Repository seperti Git dengan tujuan untuk memudahkan proses Development dan pengembangan dari kode program.

\
Dalam membuat suatu proyek Aplikasi biasanya kita membutuhkan tools untuk Versioning Control yang berfungsi untuk menyimpan proyek yang kita buat di dalam wadah yang sering kita sebut Repository. Kebanyakan biasanya kita membuat satu project ke dalam satu repository / Multi Repo, tujuanya agar memudahkan identifikasi proyek - proyek yang kita bangun.

&nbsp;

# **Apa itu Monorepo?**

\
Monorepo adalah cara kita menyimpan banyak project ke dalam satu repository yang sama dengan project yang lain.

\
misalnya kita memiliki proyek frontend store dan frontend admin, dengan menggunakan teknik Monorepo kita akan menggabungakan dua proyek tersebut menjadi satu dengan memisahkan berdasarkan directory.

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1670143611/jejakcoding/post/monorepo/VbhEkaZ_scxrwc.png)

&nbsp;

# **Kelebihan Monorepo**

\
Ada beberapa keuntungan yang di dapatkan saat kita memutuskan untuk menggunakan teknik Monorepo untuk proyek yang kita bangun:

- Mudah dalam melakukan sharing code sehingga akan memudahkan dalam menggunakan kode yang sama
- Memudahkan proses Maintenance code, karena code yang dibuat dalam satu repo yang sama

&nbsp;

# **Contoh tools Monorepo**

- [Lerna](https://lerna.js.org)
- [Turbo Repo](https://turbo.build/repo)
- [Nx](https://nx.dev)
- [Yarn Workspace](https://yarnpkg.com/features/workspaces)

&nbsp;

# **Apa itu Multi Repo?**

\
Multi Repo adalah arsitektur Repository yang setiap proyek yang dibuat di masukan di dalam satu repository, artinya misalkan kita memiliki lebih satu proyek maka jumlah repository akan mengikuti jumlah proyek yang ada.

\
Kebanyakan proses pembuatan proyek dilakukan menggunakan banyak Repository

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1670144200/jejakcoding/post/monorepo/FASNP5f_g62pis.png)

&nbsp;

# **Kelebihan Multi Repo**

\
Ada beberapa keuntungan yang di dapatkan saat kita memutuskan untuk menggunakan teknik Monorepo untuk proyek yang kita bangun:

- Mudah dalam melakukan proteksi code program, karena setiap tim akan memiliki akses hanya repository tertentu
- Tidak ada dependensi yang berkaitan, sehingga akan fokus terhadap kode program yang dibuat di dalam proyek dan tidak takut kalo ada perubahan dependensi


Monorepo dan Multi Repo adalah cara kita menyimpan banyak project ke dalam suatu Repository seperti Git dengan tujuan untuk memudahkan proses Development dan pengembangan dari kode program.

large_Q0sekyx_yvalav.png

medium_Q0sekyx_yvalav.png

small_Q0sekyx_yvalav.png

thumbnail_Q0sekyx_yvalav.png

Q0sekyx_yvalav.png

Perbedaan Monorepo dan Multi Repo

Frontend developer dan backend developer adalah dua peran yang sangat penting dalam pengembangan aplikasi web. 

\
Perbedaan utama antara keduanya adalah area fokus dan jenis teknologi yang mereka gunakan.

&nbsp;
## **Frontend Developer**

\
Frontend developer bertanggung jawab untuk mengembangkan bagian depan dari aplikasi web, yaitu halaman web yang dilihat oleh pengguna. 

\
Tugas mereka meliputi merancang dan mengembangkan antarmuka pengguna (user interface), membuat kode HTML, CSS, dan JavaScript, dan memastikan bahwa aplikasi dapat diakses dengan mudah di berbagai perangkat.

&nbsp;

## **Backend Developer**

\
Sementara itu, backend developer bertanggung jawab untuk mengembangkan bagian belakang dari aplikasi web, yaitu server dan database yang mendukung aplikasi. 

\
Tugas mereka meliputi merancang dan mengembangkan API (Application Programming Interface) yang memungkinkan komunikasi antara server dan klien, membuat kode di sisi server menggunakan bahasa pemrograman seperti Java, Python, atau Ruby, dan memastikan bahwa data aman dan tersedia secara konsisten.


\
Dalam pengembangan aplikasi web, frontend developer dan backend developer biasanya bekerja bersama-sama untuk menciptakan aplikasi yang lengkap dan berfungsi dengan baik. 

\
Mereka dapat menggunakan alat dan teknologi yang berbeda untuk membantu mereka mencapai tujuan mereka, dan keterampilan khusus yang mereka miliki akan bervariasi tergantung pada peran yang mereka pilih.

Frontend developer dan backend developer adalah dua peran yang sangat penting dalam pengembangan aplikasi web. Perbedaan utama antara keduanya adalah area fokus dan jenis teknologi yang mereka gunakan.

large_h6izPYy.png

medium_h6izPYy.png

small_h6izPYy.png

thumbnail_h6izPYy.png

h6izPYy.png

Perbedaan frontend developer dan backend developer

Kong adalah salah satu API Gateway yang populer dipakai oleh banyak perusahaan maupun individu terutama untuk proyek berbasis Microservices.

&nbsp;

# Apa itu API Gateway?

\
API Gateway adalah service yang digunakan sebagai pintu masuk dari Request yang dikirim oleh Client ke Service - Service yang ada di dalam API Gateway

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667104655/jejakcoding/post/kong/tdgzJ8K_yqudk0.png)

\
Kali ini saya akan membagikan tutorial singkat cara mudah membuat API Gateway menggunakan Kong, dan untuk mempermudah penginstallan saya akan menggunakan Docker Compose.

&nbsp;

# **Download Kong**

Download kong di https://konghq.com atau kita bisa menggunakan Docker.

\
Pada contoh kali ini saya menggunakan Docker dan Docker Compose untuk menjalankan Kong.

\
Buatlah folder dimana kita akan menyimpan konfigurasi kong

```shell
mkdir kong
cd kong
```

Buat file "kong.yml" dan isi seperti contoh dibawah ini

```yml
_format_version: "3.0"
_transform: true

services:
  - host: mockbin.org
    name: example_service
    port: 80
    protocol: http
    routes:
      - name: example_route
        paths:
          - /mock
        strip_path: true
```

Pada konfigurasi di atas kita akan membuat url "/mock" yang akan di arahkan ke "mockbin.org"

\
Buat file "docker-compose.yml"

```yml
version: "3.9"

services:
  kong-dbless:
    image: kong/kong-gateway:3.0.0.0
    volumes:
      - ./:/kong/declarative/
    environment:
      - KONG_DATABASE=off
      - KONG_DECLARATIVE_CONFIG=/kong/declarative/kong.yml
      - KONG_PROXY_ACCESS_LOG=/dev/stdout
      - KONG_ADMIN_ACCESS_LOG=/dev/stdout
      - KONG_PROXY_ERROR_LOG=/dev/stderr
      - KONG_ADMIN_ERROR_LOG=/dev/stderr
      - KONG_ADMIN_LISTEN=0.0.0.0:8001
      - KONG_ADMIN_GUI_URL=http://localhost:8002
      - KONG_LICENSE_DATA
    ports:
      - 80:8000
      - 8443:8443
      - 8001:8001
      - 8444:8444
      - 8002:8002
      - 8445:8445
      - 8003:8003
      - 8004:8004
```

Kemudian jalankan perintah

```shell
docker compose up --build
```

atau

```shell
docker-compose up --build
```

\
Setelah sukses coba ketik url

```shell
http://localhost/mock
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667105537/jejakcoding/post/kong/6FnkCj2_xyhcjq.png)

\
Untuk membuka halaman Admin Kong, masukan alamat

```shell
http://localhost:8002
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1667105659/jejakcoding/post/kong/kyHunFk_jfgluf.png)


Kong adalah salah satu API Gateway yang populer dipakai oleh banyak perusahaan maupun individu terutama untuk proyek berbasis Microservices

large_1aNzfsu_oeg6ha.png

medium_1aNzfsu_oeg6ha.png

small_1aNzfsu_oeg6ha.png

thumbnail_1aNzfsu_oeg6ha.png

1aNzfsu_oeg6ha.png

Membuat API Gateway dengan Kong

# **Object Storage**

\
Object Storage adalah media penyimpanan berbasis Cloud yang memiliki kapasitas yang sangat besar dengan harga yang murah di bandingkan ketika kita menyimpan file di dalam Storage SSD ataupun HDD di server. Object Storage sangat cocok untuk menyimpan File tidak terstruktur seperti gambar, video, document, dan lain - lain.

&nbsp;
# **S3 (Simple Storage Service)**

\
S3 atau Simple Storage Service adalah salah satu Object Storage yang dimiliki oleh perusahaan Amazon atau AWS yang banyak digunakan untuk menyimpan file seperti gambar, video, dokumen dan lain - lain.

&nbsp;
# **Apa itu S3FS-Fuse?**

\
S3FS-Fuse adalah tools Open Source yang digunakan untuk mount Object Storage seperti S3 ke Linux Server. Namun tidak hanya produk S3 dari AWS tetapi dapat digunakan juga Produk2 Object Storage yang lain yang berbasis S3.

&nbsp;
# **Cara kerja S3FS-Fuse**

\
Pada saat Bucket di mount ke drive server mengguankan S3FS maka apapun yang terjadi di Drive Server maupun di Object Storage akan sama. misal saya mengupload gambar di S3, maka gambar yang ada di S3 akan otomatis ada di dalam Drive di Server. Begitupula sebaliknya, pada saat kita melakukan perubahan di Driver server misalnya memasukan gambar, mendelete file, makan akan berpengaruh juga di S3.

&nbsp;
# **Cara install S3FS**

\
Fedora
```shell
sudo dnf install s3fs-fuse
```

Ubuntu
```shell
sudo apt install s3fs
```

RHEL and CentOS 7 or newer via EPEL:
```shell
sudo yum install epel-release
sudo yum install s3fs-fuse
```

SUSE 12 and openSUSE 42.1 or newer:
```shell
sudo zypper install s3fs
```

FreeBSD
```shell
pkg install fusefs-s3fs
```

&nbsp;
# **Persiapan**


* Buatlah Bucket di dalam S3 ataupun penyedia Object Storage yang lain
* Dapatkan Access Key dan Secret Key
* Buatlah file Credential di dalam "${HOME}/.passwd-s3fs" dengan format "ACCESS_KEY_ID:SECRET_ACCESS_KEY"
```shell
echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs
```

* Tambahkan permission

```shell
chmod 0600 ${HOME}/.passwd-s3fs
```


* Buatlah folder yang ingin di mount misalnya folder Data

&nbsp;
# **Mount Bucket**

\
Jalankan perintah s3fs dengan bucket yang sudah di buat

```shell
s3fs NAMA_BUCKET  /FOLDER_DATA -o passwd_file=${HOME}/.passwd-s3fs -o dbglevel=info -f -o curldbg -o url=URL_S3 
```
\
Pada contoh dibawah ini saya menggunakan Wasabi Cloud, perintahnya seperti berikut ini:
```shell
s3fs mistercoding  data -o passwd_file=passwd-s3fs -o dbglevel=info -f -o curldbg -o url=https://s3.ap-southeast-1.wasabisys.com 
```

\
Setelah menjalankan perintah diatas, maka akan terlihat folder Data yang sudah di mount

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777446/jejakcoding/post/s3fuse/myS1cPw_nlw3mk.png)

Pada gambar dibawah ini Bucket yang masih kosong

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777541/jejakcoding/post/s3fuse/wsrKofj_uaaolz.png)

\
Kemudian saya akan melakukan test menaruh gambar di dalam folder data yang sudh di mount.

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777763/jejakcoding/post/s3fuse/Kc0hZ9Y_x8o4ti.png)

\
Gambar yang di copy di local akan otomatis terupload kedalam Object Storage

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674777874/jejakcoding/post/s3fuse/S1CwQ5R_b3ozia.png)

\
Begitupula sebaliknya, pada saat melakukan Upload file melalui S3 maka file akan otomatis masuk kedalam Drive local yang sudah di mount.

&nbsp;
# **Kesimpulan**

\
Dengan menggunakan S3FS kita bisa melakukan synchronization data dari local ke S3 menggunakan Fuse, yang bisa di manfaatkan untuk banyak hal. misalnya untuk melakukan Auto Backup Data.



Object Storage adalah media penyimpanan yang memiliki kapasitas yang sangat besar dengan harga yang murah di bandingkan ketika kita menyimpan file di dalam Storage SSD ataupun HDD server.

large_Bc0Uwze_irbimc.png

medium_Bc0Uwze_irbimc.png

small_Bc0Uwze_irbimc.png

thumbnail_Bc0Uwze_irbimc.png

Bc0Uwze_irbimc.png

Mount Bucket S3 ke Server menggunakan S3FS-Fuse

\
Rust adalah bahasa pemrograman sistem modern yang didesain untuk kecepatan, keamanan, dan keterandalan. Bahasa ini dikembangkan oleh Mozilla Research dengan kontribusi dari komunitas open-source yang luas.

\
Rust memiliki sintaks yang mirip dengan bahasa C++ dan memiliki fitur-fitur modern seperti penanganan kesalahan (error handling) yang aman dan sistem kepemilikan (ownership system) yang memungkinkan programer mengelola memori dengan aman tanpa perlu membebani pengguna dengan tugas manual seperti alokasi dan dealokasi memori.

\
CLI adalah singkatan dari "Command Line Interface", yang merupakan antarmuka pengguna yang memungkinkan pengguna untuk berinteraksi dengan sistem melalui baris perintah teks. Dalam CLI, pengguna memasukkan perintah atau argumen dalam baris perintah dan sistem akan mengeksekusi perintah tersebut. CLI sering digunakan pada sistem operasi dan aplikasi konsol yang tidak memiliki antarmuka pengguna grafis. Contoh dari CLI termasuk Command Prompt di Windows, Terminal di macOS dan Linux, dan shell di UNIX.

&nbsp;
## Persiapan

Membuat aplikasi CLI menggunakan bahasa pemrograman Rust sangatlah mudah karena banyak library yang siap pakai yang bisa kita gunakan untuk membuat aplikasi berbasis CLI.

\
Sebelum membuat aplikasi CLI menggunakan Rust, ada beberapa persiapan yang harus di penuhi diantaranya adalah:

* Rust [https://www.rust-lang.org/](https://www.rust-lang.org/)
* Cargo [https://doc.rust-lang.org/cargo/getting-started/installation.html](https://doc.rust-lang.org/cargo/getting-started/installation.html)
* FFMPEG [https://www.ffmpeg.org/](https://www.ffmpeg.org/)

\
Setelah menginstall tools diatas, saatnya kita membuat project menggunakan Cargo

```shell
cargo new rust-cli
```
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1680710729/jejakcoding/post/Az0viSD_knrjyt.png)

\
Kemudian edit file Caro.toml menjadi seperti berikut ini:

```toml
[package]
name = "rust-cli"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
clap = { version = "4.1.11", features = ["derive"] }
ffmpeg-cli = "0.1.0"
futures = "0.3.27"
tokio = "1.26.0"

```

lalu edit file main.rs menjadi

```rs
#![allow(unused)]

use clap::Parser;
use std;
use std::process::Stdio;

use ffmpeg_cli::{FfmpegBuilder, File, Parameter};
use futures::{future::ready, StreamExt};

#[derive(Parser)]
struct Cli {
    source: String,
    destination: String,
}


#[tokio::main]
async fn main() {
    let args = Cli::parse();

    let builder = FfmpegBuilder::new()
        .stderr(Stdio::piped())
        .input(File::new(&args.source))
        .output(
            File::new(&args.destination)
                .option(Parameter::KeyValue("c:v", "libx264"))
                .option(Parameter::KeyValue("c:a", "copy"))
                .option(Parameter::KeyValue("strict", "-2"))
                .option(Parameter::KeyValue("crf", "18")),
        );

    let ffmpeg = builder.run().await.unwrap();

    ffmpeg
        .progress
        .for_each(|x| {
            dbg!(x.unwrap());
            ready(())
        })
        .await;

    let output = ffmpeg.process.wait_with_output().unwrap();

    println!(
        "{}\nstderr:\n{}",
        output.status,
        std::str::from_utf8(&output.stderr).unwrap()
    );
}

```

Lalu build menggunakan perintah divawah ini untuk meng-compile menjadi binary file

```shell
cargo build --release
```

Setelah menjalankan perintah diatas, maka akan terbentuk file binary "target/release/rust-cli"

\
Untuk menggunakanya kita bisa menjalankan

```shell
./target/release/rust-cli
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1680711266/jejakcoding/post/r13yDpD_l9tbyq.png)

\
Pada gambar diatas terjadi error karena kita belum memasukan paramater lokasi video dan tujuan video.

\
Supaya bisa kita gunakan secara global, kita bisa memindahkan file rust-cli ke dalam /usr/local/bin

\
Jalankan perintah

```shell
rust-cli SOURCE_LOKASI_VIDEO DESTINASI_LOKASI_VIDEO
```
```

Rust adalah bahasa pemrograman sistem modern yang didesain untuk kecepatan, keamanan, dan keterandalan. Bahasa ini dikembangkan oleh Mozilla Research dengan kontribusi dari komunitas open-source yang luas.

large_Z6hbQX7_zygtaf.png

medium_Z6hbQX7_zygtaf.png

small_Z6hbQX7_zygtaf.png

thumbnail_Z6hbQX7_zygtaf.png

Z6hbQX7_zygtaf.png

Membuat aplikasi CLI Video Reducer menggunakan Rust

Docker Swarm adalah layanan orkestrasi yang disediakan oleh docker nya langsung dan untuk pembaruan sekarang sudah termasuk ketika kita menginstall docker maka docker swarm sudah tersedia bersama docker engine yang dimana sebelumnya docker swarm berdiri sendiri dan diinstall terpisah, mungkin kita kenal layanan orkestrasi lainnya seperti kubernetes salah satunya yang cukup populer kemudian ada Openshift, Rancher, Meson dan lain lain.

\
untuk monitoring docker-swarm yaitu portainer tools opensource yang biasa digunakan oleh para DevOps dengan menage container untuk memantau container running atau tidak dan bisa mengatur replika container

\
dalam kasus ini kita memiliki 3 server dimana  1 manager 2 worker
dengan spek :
 
 \
CPU  : 4 CORE
RAM : 8 GB
DISK : 150 GB 
OS : UBUNTU SERVER 20.04

\
IP Server 1 : 10.40.0.246 (manager)
IP Server 2 : 10.40.1.234 (worker1)
IP Server 3 : 10.40.1.235 (worker2)

\
stepnya adalah :


1. masuk ke server manager 10.40.0.246 untuk memulai configurasi docker-swarm sebagai manager

\
2. ketikan di terminal linux ubuntu **docker swarm init --advertise-addr 10.40.0.246** maka akan muncul seperti ini

\
To add a worker to this swarm, run the following command:

&nbsp;

```shell
docker swarm join --token SWMTKN-1-32cjih17ur317ii9t959ar34pif2e7sixok5py10dc8fv1qgi9-e3uepr0f69jfuxfx0ji23vmj5 10.40.0.246:2377
```

\
3. copy command tersebut dan langsung pastekan ke server worker tersebut hasilnya akan seperti ini

&nbsp;

```shell
[ubuntu@error.arpa ~]$ docker swarm join --token SWMTKN-1-32cjih17ur317ii9t959ar34pif2e7sixok5py10dc8fv1qgi9-e3uepr0f69jfuxfx0ji23vmj5 10.40.0.246:2377
This node joined a swarm as a worker.
[ubuntu@error.arpa ~]$
```

\
4. untuk mengecek node worker aktif atau tidaknya kita balik lagi ke server manager dengan ketikan

```shell
docker node ls
```

&nbsp;

 hasilnya akan seperti ini

\
![dockernode.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/dockernode_0f576a63c8.png)

\
dari step diatas kita sudah membuat configurasi docker-swarm, untuk step selanjutnya  kita akan install portainer untuk mengatur sebuah container

Docker Swarm adalah layanan orkestrasi yang disediakan oleh docker nya langsung dan untuk pembaruan sekarang sudah termasuk ketika kita menginstall docker maka docker swarm sudah tersedia bersama docker engine yang dimana sebelumnya docker swarm berdiri sendiri dan diinstall terpisah

large_Nl6CRSzdokcer.png

medium_Nl6CRSzdokcer.png

small_Nl6CRSzdokcer.png

thumbnail_Nl6CRSzdokcer.png

Nl6CRSzdokcer.png

Install Docker Swarm

## **Apa itu Markdown?**

\
Markdown adalah bahasa Markup ringan dengan penulisan yang sangat sederhana dan bisa di konversi menjadi format HTML dan format lainya.

Mardkdown berbeda dengan Format file lain yang mengharuskan menggunakan Software tertentu untuk mengeditnya. misalnya format Doc yang hanya bisa di buka menggunakan Editor Microsoft Word atau semacamnya. Berbeda dengan Markdown kita tidak memerlukan Editor seperti itu. bahkan dengan Notepad bawaan laptop kita bisa dengan mudah membuat file Markdown. Markdown juga banyak digunakan sebagai informasi seperti dokumentasi, seperti GIT.

&nbsp;

## **Siapa yang menggunakan Markdown?**

\
Markdown saat ini banyak digunakan untuk berbagai keperluan seperti Email, Catatan, Presentasi, Blog, dan lain - lain karena sangat mudah di buat dan ringan. Penulis sendiri dalam membuat Blog ini menggunakan Markdown sebagai formatnya.

&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657190225/jejakcoding/markdown/lhNWKVE_zrxkve.png)

Contoh penulisan Markdown

&nbsp;

## **Kenapa menggunakan Markdown?**

- Markdown bisa di gunakan untuk banyak hal seperti Email, Dokumentasi, Website, Presentasi, dan lain - lain.

- Platform Independent, kita bisa membuat File Markdown di berbagai Device seperti HP, Laptop, Tablet, PC dengan berbagai OS.

- Markdown banyak support berbagai aplikasi seperti Web, Desktop, Mobile

&nbsp;

## **Bagaimana cara kerja dari Markdown?**

&nbsp;
![](https://mdg.imgix.net/assets/images/markdown-flowchart.png?auto=format&fit=clip&q=40&w=1080)
https://www.markdownguide.org/getting-started/

&nbsp;

## **Aplikasi untuk membuka Markdown?**

- Visual Studio Code, dengan Visual studio Code kita bisa melihat / Preview secara langsung dengan menekan CTRL + Shift + V

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657191359/jejakcoding/markdown/ON3yaMf_hd3lsv.png)

&nbsp;

- Notepad
- Gedit
- [Mister Coding Markdown (Website)](https://tools.mistercoding.com/app/markdown) ![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657244892/jejakcoding/markdown/2z2cRkU_lsy99m.png)
- dan lain - lain


Kali ini saya akan berkenalan dengan Markdown dan kegunaan dari Markdown

large_markdown_rjfqui.png

medium_markdown_rjfqui.png

small_markdown_rjfqui.png

thumbnail_markdown_rjfqui.png

markdown_rjfqui.png

Berkenalan dengan Markdown dan kegunaan dari Markdown

## **Kenapa harus memahami basic - basic syntax Markdown?**

\
Kita harus memahami syntax dari markdown supaya kita tidak tergantung dengan Text Editor. dengan mamaminya kita akan jauh lebih mudah membuat file Markdown tanpa harus khawatir jika misalnya software yang biasa kita gunakan mengalami error atau tidak di kembangkan lagi. kita bisa membuat Dokumen markdown dengan menggunakan aplikasi apa saja karena kita sudah memahami dasi basic syntax Markdown.

&nbsp;

## **Paragraf**

\
Untuk membuat Paragraf kita hanya perlu membuat baris kosong dengan menekan Enter pada keyboard lalu membuat tulisan.

\
Berikut ini adalah daftar contoh penggunaan Paragraf pada Markdown

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657299779/jejakcoding/markdown/basic/lpJGuxl_wxzc4i.png)

&nbsp;

## **Penggunaan paragraf yang baik**

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657299864/jejakcoding/markdown/basic/K5nT5vw_m5y3on.png)


Kali ini saya akan berkenalan dengan Basic syntax - syntax dari Markdown supaya kita bisa membuat document Markdown dengan mudah

Basic syntax  Markdown - Cara membuat Paragraf

## **Kenapa harus memahami basic - basic syntax Markdown?**

\
Kita harus memahami syntax dari markdown supaya kita tidak tergantung dengan Text Editor. dengan mamaminya kita akan jauh lebih mudah membuat file Markdown tanpa harus khawatir jika misalnya software yang biasa kita gunakan mengalami error atau tidak di kembangkan lagi. kita bisa membuat Dokumen markdown dengan menggunakan aplikasi apa saja karena kita sudah memahami dasi basic syntax Markdown.

&nbsp;

## **Heading**

\
Untuk membuat Heading kita memerlukan karakter (#). jumlah dari (#) adalah mewakili Heading 1,2,3,4,5,6.

\
Berikut ini adalah daftar contoh Heading

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657298158/jejakcoding/markdown/basic/uSyBzPh_tthbru.png)
https://www.markdownguide.org/basic-syntax/

\
Selain syntax di atas, untuk membuat heading ada alternative lain yang bisa kita gunakan untuk membuat Heading

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657298794/jejakcoding/markdown/basic/UpMwW4q_lbuq6b.png)

## Cara menggunakan Heading

\
Untuk membuat heading ada aturan yang harus kita pahami terlebih dahulu yaitu setelah karakter "#" kita harus memberikan spasi.

- Contoh Benar : # Contoh heading benar

- Contoh Salah : #Contoh heading benar

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1657299095/jejakcoding/markdown/basic/LmjwnC6_hztk9p.png)


Basic syntax  Markdown - Cara membuat Heading

Kali ini saya akan berbagi tutorial Redux Toolkit Slice menggunakan framework NextJS

large_next_bwj5ja.png

medium_next_bwj5ja.png

small_next_bwj5ja.png

thumbnail_next_bwj5ja.png

next_bwj5ja.png

Tutorial Redux Toolkit Slice menggunakan framework NextJS

Pada kesempatan kali ini saya akan membagikan tutorial cara membuat Dark Mode menggunakan Tailwind CSS dan React JS (Next JS). sebelmunya pastikan kalian sudah menginstall NextJS dan juga Tailwind CSS atau kalo belum, silahkan lihat tutorial [Install Project NextJS dan Tailwind CSS](https://www.jejakcoding.com/tutorial/cara-menginstall-project-nextjs-typescript-dan-tailwindcss).

Setelah menginstall Project Next JS dan Tailwind CSS selanjutanya kita akan sedikit menambahakan code ke dalam file "config.tailwind.js"

```javascript
module.exports = {
  darkMode: "class",
  // ...
}
```

Untuk full code menjadi seperti dibawah ini

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

untuk menambahkan Dark Mode kita hanya menambahkan class "dark" pada element paling atas di dalam tag HTML misalnya "body" atau element "div" yang heirarkinya berada di posisi paling atas.

```html
<div className="dark">
  <head>
    <title>Create Next App</title>
    <meta name="description" content="Generated by create next app" />
    <link rel="icon" href="/favicon.ico" />
  </head>
  <div className="my-6">
    <button
      className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600"
    >
      Example Button
    </button>
  </div>
</div>
```

kemudian untuk membuat element dark mode kita bisa menggunakan

```
dark:
```

contoh kita akan membuat button normal dengan warna sky dan text warna putih

```html
<button
  className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600"
>
  Example Button
</button>
```

agar button berubah warna pada saat dark mode maka akan menjadi seperti

```html
<button
  className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600 dark:bg-gray-800 dark:text-white"
>
  Example Button
</button>
```

Supaya setingan Dark Mode tersimpan di browser kita akan menggunakan [React Cookie](https://www.npmjs.com/package/react-cookie) untuk menyimpannya. kita juga akan menggunakan [React Icons](https://react-icons.github.io/react-icons/).

#### Install React Cookie & React Icons

buka terminal dan masukan perintah

```
yarn add react-icons
yarn add react-cookie
```

atau

```
npm add react-icons
npm add react-cookie
```

kemudian edit halaman "index.jsx" menjadi

```tsx
import type { NextPage } from "next"
import Head from "next/head"
import { useCookies } from "react-cookie"
import { BsFillSunFill, BsFillMoonStarsFill } from "react-icons/bs"

const Home: NextPage = () => {
  const [cookies, setCookie, removeCookie] = useCookies(["dark"])

  const setDark = () => {
    if (cookies.dark == "yes") {
      setCookie("dark", "no")
    } else {
      setCookie("dark", "yes")
    }
  }

  return (
    <div className={cookies.dark == "yes" ? "dark" : ""}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="dark:bg-gray-600 h-screen">
        <div className="my-6">
          <button
            className="bg-sky-600 text-white p-2 px-4 rounded-full hover:opacity-75 hover:text-red-600 dark:bg-gray-800 dark:text-white"
            onClick={setDark}
          >
            {cookies.dark !== "yes" && <BsFillSunFill size={18} />}
            {cookies.dark == "yes" && <BsFillMoonStarsFill size={18} />}
          </button>
        </div>
      </div>
    </div>
  )
}

export default Home
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656827070/jejakcoding/Tutorial/Next%20JS%20Dark%20Mode/QDrp1xF_cos834.png)

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656827136/jejakcoding/Tutorial/Next%20JS%20Dark%20Mode/EwcC6Q5_yk7geh.png)

Repository bisa di diwnload di:

<https://github.com/jejakcoding/example_nextjs_tailwind>


Kali ini saya akan berbagi tutorial membuat Dark Mode atau
  Mode malam pada NextJS menggunakan Tailwind CSS & React Cookie

Membuat Dark Mode atau Mode malam pada NextJS menggunakan Tailwind CSS &   React Cookie

Kali ini saya akan membagikan tutorial cara menginstall project NextJS dengan template Typescript dan tailwindcss dengan mudah.

[NextJS](https://nextjs.org) adalah salah satu framework untuk ReactJS yang banyak digunakan olah banyaj kalangan dan perusahaan karena kemudahan dan struktur yang mudah untuk dipelajari. untuk menggunakan NextJS pastikan kalian sudah mengetahui dan memahami ReactJS terlebih dahulu karena pada dasarnya NextJS sebagian besar adalah ReactJS.

Untuk menginstall NextJS ada beberapa yang perlu di persiapkan terlebih dahulu

Prerequisite:

- NodeJS
- NPM / Yarn
- ReactJS

Pastikan kalian sudah menginstall NodeJS terlebih dahulu dan NPM atau Yarn.

Untuk menginstall NextJS jalankan perintah

```
npx create-next-app@latest --ts
```

Kemudian ikuti dan masukan nama project seuai dengan keinginan kita. misal "LatihanNext"

tunggu sampai proses installasi selesai . untuk menjalankan kita bisa menggunakan perintah

```
yarn dev
```

atau

```
npm run dev
```

#### Install TailwindCSS di dalam NextJS

masuk ke dalam project NextJS senelumnya

kemudian masukan perintah

```
yarn add  tailwindcss postcss autoprefixer -D
```

atau

```
npm install -D tailwindcss postcss autoprefixer
```

kemudian jalankan perintah

```
npx tailwindcss init -p
```

edit file "tailwind.config.js" menjadi seperti

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

kemudian edit file "styles/globals.css" dan tambahkan

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
```

Proses instalasi sudah selesai dan kita bisa menggunakan class Tailwindcss di dalam component ReactJS

contoh

```html
<button class="bg-sky-500 text-white px-5 py-2 hover:opacity-75">
  My Button
</button>
```

Repository:

https://github.com/jejakcoding/example_nextjs_tailwind


Kali ini saya akan mebagikan tutorial cara menginstall
  project NextJS Typescript dan Tailwindcss dengan mudah

Cara menginstall project NextJS Typescript dan Tailwindcss

Pada tutorial kali ini saya akan membagikan tutorial cara mudah membuat gambar SVG Dinamis yang di ambil dari figma pada React JS

\
Sebagai Frontend Developer kita pasti familiar dengan tools design seperti figma, kita sering berkolaborasi dengan bagian UI/UX designer untuk mencerjemahkan design yang di buat ke dalam bari Code.

\
Untuk mempercepat proses Coding bisasanya kita akan menggunakan berbagai cara dan menggunakan berbagai Framework yang bertujuan untuk mempercepat proses coding. selain penggunaan Framework CSS seperti Tailwind CSS, Bootstrap ada beberapa Cara yang cukup mudah dan cepat dalam proses Slicing yaitu dengan menggunakan SVG, tentunya sesuai dengan kubutuhan kita.

\
Pada kesempatan kali ini saya akan membagikan cara slicing menggunakan SVG yang berisi gambar dan text dinamis khususnya menggunakan Framework React JS.

\
Tools yang digunakan:

- React JS
- [Boxy SVG](https://boxy-svg.com)
- [SVGOMG](https://jakearchibald.github.io/svgomg/)
- [SVGR](https://react-svgr.com/playground/)

\
Saya akan mengubah gambar di bawah ini menjadi Dinamis yaitu foto dan text.

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664118197/jejakcoding/reactjs/dynamicsvg/test_whvdzg.svg)

\
Pertama Buka Boxy SVG dan import file SVG untuk menghilankan Foto dan mengganti Text path menjadi Full Text

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664121434/jejakcoding/reactjs/dynamicsvg/Cq4gRBF_als2w3.png)

\
Klik menu Element yang ada di bagian paling bawah untuk melihat tag XML gambar

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664121708/jejakcoding/reactjs/dynamicsvg/gkSEiBH_w1u0ec.png)

\
Hapus pattern gambar dan text (karena text dalam bentuk path bukan text)

\
Untuk menghapus pattern gambar pilih gambar terlabih dahulu dengan selection tool kemudian klik fill pada icon kuas bagian kanan

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664125892/jejakcoding/reactjs/dynamicsvg/BqidEAx_l8r1od.png)

\
Klik menu pattern

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664125952/jejakcoding/reactjs/dynamicsvg/6FW4Tuf_rblqt2.png)

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126027/jejakcoding/reactjs/dynamicsvg/iRnagVd_mfzxdv.png)

\
Klik manage pattern

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126086/jejakcoding/reactjs/dynamicsvg/JZ90Syl_xsaloh.png)

\
Klik kanan dan edit pattern

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126151/jejakcoding/reactjs/dynamicsvg/Zq09bIi_np1lpi.png)

\
**Klik gambar dan klik kanan lalu delete**

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126249/jejakcoding/reactjs/dynamicsvg/mVOFkdC_knx9wu.png)

\
**Delete gambar pada semua pattern**

\
Setelah di delete semua kemudian kembali ke halaman editor

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126470/jejakcoding/reactjs/dynamicsvg/L8huJWO_muujy3.png)

\
Gambar pattern akan hilang

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126544/jejakcoding/reactjs/dynamicsvg/IzrF2UY_tzvh8f.png)

\
Kemudian delete semua text yang bersifat dinamis dengan cara klik text lalu delete lalu ketik ulang karena text dalam bentuk path maka kita perlu mengetik ulang sesuai dengan Design

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126722/jejakcoding/reactjs/dynamicsvg/YZu9ayN_l72cov.png)

\
**Ketik ulang text**

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664126994/jejakcoding/reactjs/dynamicsvg/xdlUja7_ytni39.png)

\
Untuk melihat tag xml klik menu Element yang ada di bagian paling bawah

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127120/jejakcoding/reactjs/dynamicsvg/n45BBPw_b3hoa6.png)

\
Text akan menjadi Text bukan path

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127170/jejakcoding/reactjs/dynamicsvg/hYvb9u2_jvqtyi.png)

\
Setelah selesai mengedit, kita akan mengeksport file svg dengan format SVG. caranya dengan CTR + A lalu pilih edit export

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127341/jejakcoding/reactjs/dynamicsvg/naqrqNg_gbrivc.png)

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127405/jejakcoding/reactjs/dynamicsvg/L0504dh_mwnjh0.png)

\
Setelah terexport kemudian upload file ke dalam [SVGOMG](https://jakearchibald.github.io/svgomg/) dengan cara drag & drop. tujuanya adalah supaya SVG menjadi clean

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127589/jejakcoding/reactjs/dynamicsvg/ENsB2zy_zzsazt.png)

\
Kemudian buka [SVGR](https://react-svgr.com/playground/) lalu paste code SVG dari SVGOMG tadi di SVGR bagian kiri, lalu copy code yang di bagian sebelah kanan (React Component)

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127819/jejakcoding/reactjs/dynamicsvg/1TygUoa_jip9l6.png)

\
Setelah itu buatlah component di dalam React lalu paste code dari SVGR dan sesuaikan namanya

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664127948/jejakcoding/reactjs/dynamicsvg/XOmVMXk_sv4oci.png)

\
Edit pattern dan tambahkan gambar External atau gunakan Props untuk membuat dinamis Gambar dan text

```JSX
<pattern
                id="pattern0"
                width={1}
                height={1}
                patternContentUnits="userSpaceOnUse"
            >
                <image width={77} height={76} xlinkHref="https://res.cloudinary.com/dlppzoemc/image/upload/v1664122684/jejakcoding/reactjs/dynamicsvg/UI_Web_App_02-09-Web-Beranda-Ellipse_47_uftmv7.svg" />
            </pattern>
            <pattern
                id="pattern1"
                width={1}
                height={1}
                patternContentUnits="userSpaceOnUse"
            >
                <image width={77} height={76} xlinkHref="https://res.cloudinary.com/dlppzoemc/image/upload/v1664122684/jejakcoding/reactjs/dynamicsvg/UI_Web_App_02-09-Web-Beranda-Ellipse_47_uftmv7.svg" />
            </pattern>
            <pattern
                id="pattern2"
                width={1}
                height={1}
                patternContentUnits="userSpaceOnUse"
            >
                <image width={77} height={76} xlinkHref="https://res.cloudinary.com/dlppzoemc/image/upload/v1664122664/jejakcoding/reactjs/dynamicsvg/UI_Web_App_02-09-Web-Beranda-Ellipse_46_mnwhla.svg" />
            </pattern>
```

\
Update style

```TSX
<style bx:fonts="Poppins">
                {
                    "@import url(https://fonts.googleapis.com/css2?family=Poppins%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900&display=swap);"
                }
</style>
```

\
Menjadi

```TSX
<style>
                {
                    "@import url(https://fonts.googleapis.com/css2?family=Poppins%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900&display=swap);"
                }
            </style>
```

\
Hapus tag

```TSX
xmlns:bx="https://boxy-svg.com"
```

\
Panggil component SVG ke dalam App React

```TSX
import React from 'react';
import logo from './logo.svg';
import './App.css';
import MySVG from './MySVG';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <div style={{width:600}}>
          <MySVG />
        </div>
      </header>
    </div>
  );
}

export default App;

```

\
**Selamat, kita sudah berhasil membuat SVG Dinamis**

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1664128610/jejakcoding/reactjs/dynamicsvg/eO5ymxF_zjbupw.png)

&nbsp;

## Download Repository

[https://github.com/mister-coding/Dynamic-SVG-React](https://github.com/mister-coding/Dynamic-SVG-React)


Pada tutorial kali ini saya akan membagikan tutorial cara mudah membuat gambar SVG Dinamis yang di ambil dari figma pada React JS

large_react_t8hb52.png

medium_react_t8hb52.png

small_react_t8hb52.png

thumbnail_react_t8hb52.png

react_t8hb52.png

Membuat SVG Dinamis dari Figma menggunakan SVGOMG dan SVGR

## **Persiapan Project**

\
Untuk membuat project React JS ada beberapa tools yang harus dipersiapkan antara lain:

- [ Node JS](https://nodejs.org)
- NPM / Yarn
- NPX (Include Nodejs)
- Text Editor (Visual Studio Code Recommended)

## **Membuat Project React JS**

\
Setelah tools diatas sudah tesintall selanjutanya kita akan membuat project React menggunakan 'Create React App' menggunakan 'npx'.

Buka terminal dan masukan perintah :

```shell
npx create-react-app my-app
```

Setelah project berhasil dibuat, selanjutany adalah masuk ke dalam project

```shell
cd my-app
```

kemudian jalankan

```shell
npm start
```

atau

```shell
yarn start
```

Setelah sukses, buka browser 'http://localhost:3000'

&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674261402/jejakcoding/reactjs/basic/b62i9qR_ldxf74.png)

\
Pada tahap ini kita sudah berhasil membuat Project React JS, pada tutorial selanjutnya kita akan belajar membuat Component.


Kita akan belajar membuat project menggunakan React JS, kita akan belajar lebih banyak lagi dalam memahami React JS.

Dasar React - Memulai Project React JS

## **Apa Itu React JS?**

\
React JS adalah library Javascript berbasis Open Source yang di kembangkan oleh Meta (Facebook) dan banyak di pakai oleh pengembang website maupun mobile (React Navtive).

\
React JS sangatlah populer di kalangan pengembang website modern khususnya untuk Frontend Developer di karenakan banyaknya dukungan oleh pengembang dan juga karena kemudahanya untuk di implementasikan ke dalam pengembangan website.

\
React JS menggunakan teknologi Virtual DOM untuk merender Component berupa tag - tag HTML sehingga tampil di sisi Client.

&nbsp;

## **Apa itu Virtual DOM?**

\
Virtual DOM adalah teknologi dimana DOM(Ducument Object Model) di buat di dalam memory sehingga lebih cepat di bandingkan dengan DOM asli yang di buat oleh browser.

&nbsp;

## **Alasas menggunakan React JS?**

- Modern
- Memiliki Banyak dukungan pengembang
- Flexible
- Banyak di gunakan perusahaan - perusahaan besar
- Job React Developer lebih banyak dari pada yang lain

&nbsp;

## **Persiapan sebelum Menggunakan React JS**

\
Ada beberapa persyaratan yang harus di kuasai sebelum menggunakan React JS dan akan memudahkan kita dalam menggunakan React JS

- Basic HTML
- Basic Javascript / Typescript
- CSS

&nbsp;

## **Persiapan Tools**

- Node JS
- NPM / Yarn
- Text Editor (Visual Studio Code / Recomended)

&nbsp;

## **Component**

\
Hal yang paling dasar yang harus di pahami dalam membangun aplikasi berbasis React adalah Component. Component adalah block code yang di pisahkan berdasarkan fungsi atau kegunaan dari component tesebut.

Contoh component:

- Button
- Card
- Avatar
- Menu

\
Component biasanya di desian seflexible mungkin supaya bisa digunakan oleh component - component lain yang membutuhkan. misal di dalam component Card ada component Button

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1674179238/jejakcoding/reactjs/basic/2dCDl1K_ojus29.png)

\
Pada gambar diatas adalah contoh component pada React JS dimana ada component yang saling berkaitan.
\
Dengan membuat component kita akan lebih mudah menggunakan component tesebut karena bisa di pakai oleh banyak component.


React JS adalah library Javascript berbasis Open Source yang di kembangkan oleh Meta (Facebook) yang banyak di pakai oleh pengembang website maupun mobile (React Navtive).

Pengenalan dasar - dasar React JS

Pada tutorial kali ini kita akan belajar cara mengupload File berupa gambar menggunakan Framework NestJS dan menseting supaya gambar bisa di akses secara public menggunakan HTTP

&nbsp;

## **Prasyarat**

- [Pastikan kita sudah mengerti Cara kerja Framework Nest JS](/post/nestjs/konsep-penting-pada-nestjs/)

&nbsp;

## **Buat Module untuk Upload Gambar**

\
Pada contoh kali ini saya akan membuat Module "upload-gambar" dengan menggunakan Nest CLI

```
npx nest g mo upload-gambar
```

&nbsp;

## **Buat Service**

\
Setelah membuat Module selanjutnya adalah membuat Service dengan nam yang sama dengan Module yaitu "upload-gambar"

```
npx nest g s upload-gambar
```

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658400414/jejakcoding/nestjs/upload_gambar/T5auXLQ_caam3u.png)

&nbsp;

## **Buat fungsi upload pada service**

Kemudian buatlah fungsi yang bertujuan untuk menyimpan path lokasi dari gambar yang di upload di dalam service.

```Typescript
import { Injectable } from '@nestjs/common';

@Injectable()
export class UploadGambarService {

    /**
     *
     * @param path
     */
    async upload(path: string) {

        // Kita bisa membuat fungsi untuk menyimpan lokasi path file disini

        return { statusCode: 200, path: path }
    }

}
```

pada fungsi upload di dalam class UploadGambarService diatas adalah hanya menampilkan lokasi path file saja, namun kita bisa juga menyimpan di dalam database tergantung dengan kebutuhan dari kita.

## Install Multer

Kita akan menggunakan Multer untuk Filesystem di Nest JS

```
yarn add -D @types/multer
```

## Buat Controller

Buat controller yang akan berguna sebagai Route yang akan langsung di akses menggunakan API.

Masukan perintah menggunakan Nest CLI

```
npx nest g co upload-gambar
```

perintah di atas akan membuat File "upload-gambar/upload-gambar.controller.ts"

```Typescript
import { Controller } from '@nestjs/common';

@Controller('upload-gambar')
export class UploadGambarController {}
```

## Buat fungsi Upload di dalam Controller

```Typescript
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('upload-gambar')
export class UploadGambarController {

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{dest:'public/upload'}))
    async upload(@UploadedFile() file: Express.Multer.File){
        console.log(file)
    }

}
```

Pada fungsi upload di dalam controller di atas terdapat FileInterceptor yang di gunakan untuk mengolah request File oleh Multer.

Informasi File akan dimasukan ke dalam "@UploadedFile() file" dan kita bisa mengambil informasi File dengan "file"

Sekarang kita bisa mencoba melakukan upload file dengan menggunakan API dengan URL

```
/upload-gambar/upload
```

kita bisa mencoba API dengan method POST.

## Jalankan Nest JS

Jalankan Nest JS dengan perintah

```
yarn start:dev
```

atau

```
npn run start:dev
```

Kemudian Test request menggunakan tools API Testing seperti Postman, Thunder Client. pada contoh ini saya menggunakan Thunder Client yang bisa langsung digunakan didalam Visual Studio Code.

&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658471771/jejakcoding/nestjs/upload_gambar/Gc73h0b_hsetal.png)

&nbsp;
&nbsp;

Jika kita melakukan request upload File maka format file akan seperti gambar dibawah ini

&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658472714/jejakcoding/nestjs/upload_gambar/as7WJvh_ojqbpf.png)
&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658473149/jejakcoding/nestjs/upload_gambar/fvU44Z5_ytuhrh.png)

File tersimpan di dalam folder public/upload dengan nama random dan tanpa Extension. untuk menambahkan extension bisa banyak cara, cara yang paling mudah adalah dengan mengkombinasi nama file dan extension. ubah code menjadi seperti

```Typescript
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';

@Controller('upload-gambar')
export class UploadGambarController {

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{
        dest:'public/upload',
        storage: diskStorage({
            destination:'public/upload',
            filename(req, file, cb) {
                return cb(null,file.originalname)
            },
        })
    }))
    async upload(@UploadedFile() file: Express.Multer.File){
        console.log(file)
    }

}
```

Kemudian coba test upload lagi seperti sebelumnya

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658473329/jejakcoding/nestjs/upload_gambar/ZcV9gnq_depfc8.png)
&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658473394/jejakcoding/nestjs/upload_gambar/yjG6cGD_tutvy0.png)

pada gambar diatas file di simpan dengan original name.

Sampai saat ini kita berhasil mengupload file pada Framework Nest JS, selanjutnya adalah buat folder public supaya bisa di akses menggunakan HTTP.

## Akses file menggunakan HTTP

Untuk mengakses file menggunakan HTTP kita harus mendaftarkan folder "public" supaya bisa di akses dari HTTP.

### Install Server Static

```
yarn add @nestjs/serve-static
```

atau

```
npm install --save @nestjs/serve-static
```

### Edit AppModule

Edit AppModule.ts dan tambahkan module ServerStatic

```Typescript
import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UploadGambarModule } from './upload-gambar/upload-gambar.module';

@Module({
  imports: [
    UploadGambarModule,
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
```

### Jalankan Nest JS

```
yarn start:dev
```

### Test Menggunakan Browser

Buka browser dan masukan URL "http://localhost:3000/upload/next.png"

&nbsp;
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1658473948/jejakcoding/nestjs/upload_gambar/tN2584Q_pi06cb.png)

&nbsp;

## **Selamat Kita sudah berhasil membuat file bisa di akses menggunakan HTTP**

Untuk menyimpan path gambar ke dalam database kita bisa meneruskan filepath ke dalam service yang sudah kita buat sebelumnya

&nbsp;

```Typescript
import { Controller, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { UploadGambarService } from './upload-gambar.service';

@Controller('upload-gambar')
export class UploadGambarController {

    constructor(private uploadGambarService:UploadGambarService){}

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{
        dest:'public/upload',
        storage: diskStorage({
            destination:'public/upload',
            filename(req, file, cb) {
                return cb(null,file.originalname)
            },
        })
    }))
    async upload(@UploadedFile() file: Express.Multer.File){
        return await this.uploadGambarService.upload(file.path)
    }

}
```

## Download Repository

[https://github.com/mister-coding/example_nestjs](https://github.com/mister-coding/example_nestjs)

Branch : example_upload_gambar


Pada tutorial kali ini Kita akan belajar mengupload gambar pada Framwork Nest JS dan menseting supaya file bisa di akses menggunakan HTTP

Upload gambar pada Framwork Nest JS

[JWT](https://jwt.io/) atau Json Web Token adalah slah satu metode authentikasi yang saat ini banyak digunakan untuk bermacam skema seperti Mobile, Website, Desktop karena kemudahan dan keamananya.

pada tutorial kali ini, saya akan membagikan cara mudah membuat [JWT](https://jwt.io/) menggunakan Framework [NestJS](https://nestjs.com/) dan [Prisma](https://www.prisma.io/) sebagai databasenya. kita juga menggunakan OpenAPI untuk dokumentasi API nya.

#### Install NestJS

Pertama kita Install NestJS terlebih dahulu menggunakan [Nest CLI](https://www.npmjs.com/package/@nestjs/cli) untuk menginstall Nest CLI bisa menggunakan NPM dengan perintah

```
npm i -g @nestjs/cli
```

setelah Nest CLI terinstall, selanjutnya kita buat project NestJS dengan perintah

```
nest new example_nest_jwt
```

example_nest_jwt adalah nama project yang kita buat, untuk penamaan bisa dengan nama apa saja atau bebas.

![Nest Install](https://res.cloudinary.com/dlppzoemc/image/upload/v1656258630/agiksetiawan/nest_jwt/aSu3fe2_mwejig.png)

pilih npm atau yarn jika kalian biasa menggunakan yarn lalu enter dan tunggu sampai proses instalasi selesai

kemudian masuk ke dalam project

```
cd example_nest_jwt/
```

Buka project menggunakan Text Editor seperti [Visual Studio Code](https://code.visualstudio.com/)

#### Siapkan Database

buat database dengan nama sama persis dengan project contohnya "example_nest_jwt"

#### Setup Prisma

Install prisma dengan perintah

```
yarn add prisma -D
yarn add @prisma/client
```

atau

```
npm install prisma -D
npm install @prisma/client
```

kemudian jalankan perintah

```
npx prisma
npx prisma init
```

setelah melakukan perintah diatas maka akan terbentuk folder prisma dan file .env

edit file .env dan sesuaikan dengan Database MySQL yang sudah kita persiapkan sebelumnya

```toml
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="mysql://root:mysql@localhost:3307/example_nest_jwt"
```

edit koneksi file "prisma/schema.prisma" ubah file provider menjadi "mysql"

```apl
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}
```

kemudian buat skema table User di dalam file "prisma/shcema.prisma"

```apl
model users {
  id         Int       @id @default(autoincrement())
  name       String    @db.VarChar(45)
  email      String    @unique(map: "email_UNIQUE") @db.VarChar(45)
  password   String    @db.VarChar(200)
  created_at DateTime? @db.DateTime(0)
  updated_at DateTime? @db.DateTime(0)
}
```

lebih lengkapnya seperti

```apl
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model users {
  id         Int       @id @default(autoincrement())
  name       String    @db.VarChar(45)
  email      String    @unique(map: "email_UNIQUE") @db.VarChar(45)
  password   String    @db.VarChar(200)
  created_at DateTime? @db.DateTime(0)
  updated_at DateTime? @db.DateTime(0)
}
```

kemudian jalankan perintah

```
yarn prisma db push
```

atau

```
npx prisma db push
```

perintah di atas adalah untuk menjalankan migration dari prisma membuat table dengan nama "users". kalian bisa cek di dalam database "example_nest_jwt" yang sudah kita buat sebelumnya

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656260151/agiksetiawan/nest_jwt/9H2nNxC_s1ehpv.png)

kemudian jalankan perintah

```
yarn prisma generate
```

atau

```
npx prisma generate
```

kemudian test jalankan NestJS dengan perintah

```
yarn start:dev
```

atau

```
npm run start:dev
```

jika tidak ada error berarti kita sudah berhasil menginstall NestJS dan Prisma dengan benar.

kemudian kita kan membuat module dan service Prisma

masukan perintah

```
yarn nest g mo prisma
yarn nest g s prisma
```

atau

```
nest g mo prisma
nest g s prisma
```

setelah perintah di atas, akan terbentuk module baru dengan nama prisma

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656261444/agiksetiawan/nest_jwt/Mt5EI8W_zwcuz4.png)

kemudian edit file "src/prisma/prisma.module.ts" mewnjadi seperti berikut

```typescript
import { Global, Module } from "@nestjs/common"
import { PrismaService } from "./prisma.service"

@Global()
@Module({
  providers: [PrismaService],
  exports: [PrismaService],
})
export class PrismaModule {}
```

kemudian edit file "src/prisma/prisma.service.ts" dengan code seperti berikut

```typescript
import { INestApplication, Injectable, OnModuleInit } from "@nestjs/common"
import { PrismaClient } from "@prisma/client"

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit {
  async onModuleInit() {
    await this.$connect()
  }

  async enableShutdownHooks(app: INestApplication) {
    this.$on("beforeExit", async () => {
      await app.close()
    })
  }
}
```

#### Setup JWT

selanjutnya adalah setup JWT

Install JWT dengan perintah

```
yarn add @nestjs/passport passport passport-jwt
yarn add @types/passport-jwt -D
yarn add @nestjs/jwt
```

atau

```
npm install @nestjs/passport passport passport-local
npm install @types/passport-jwt -D
npm install @nestjs/jwt
```

buat file "src/jwt.config.ts" yang akan menyimpan informasi JWT seperti Token dan Expired time

```
export const JwtConfig = {
  user_secret: "7Myh9rN0y9PCrFYMVeuZCiGDLsISWkezBMI7adli877=",
  user_expired: '1000s',
};
```

#### Buat Module Authentication

setelah menginstall JWT selanjutanya kita akan buat module authentikasi dengan struktur "src/auth"

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656260796/agiksetiawan/nest_jwt/dSaSyXC_omwaph.png)

masukan perintah

```
yarn nest g mo auth
```

atau

```
nest g mo auth
```

buat file di dalam "src/auth/dto/login.dto"

```
export class LoginDto {

  email: string;
  password: string;

}
```

buat file di dalam "src/auth/dto/register.dto"

```
import { Prisma } from '@prisma/client';

export class RegisterDto implements Prisma.usersCreateInput {

  name: string;

  email: string;

  password: string;

}
```

buat auth service, controller dengan perintah

```
yarn nest g s auth
yarn nest g co auth
```

atau

```
nest g s auth
nest g co auth
```

buat JWT Strategy "src/auth/jwt.strategy.ts"

```typescript
import { Injectable } from "@nestjs/common"
import { PassportStrategy } from "@nestjs/passport"
import { ExtractJwt, Strategy } from "passport-jwt"
import { JwtConfig } from "src/jwt.config"

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy, "jwt-user") {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: JwtConfig.user_secret,
    })
  }

  async validate(payload: any) {
    return {
      user_id: payload.sub,
      email: payload.email,
      expired: payload.exp,
    }
  }
}
```

kemudian buat guard JWT "src/auth/jwt-auth.guard.ts" atau dengan perintah

```
yarn nest g gu auth/jwt-auth
```

atau

```
nest g gu auth/jwt-auth
```

edit file "src/auth/jwt-auth.guard.ts" menjadi seperti berikut

```typescript
import {
  ExecutionContext,
  Injectable,
  UnauthorizedException,
} from "@nestjs/common"

import { AuthGuard } from "@nestjs/passport"

export class JwtAuthGuard extends AuthGuard("jwt-user") {
  canActivate(context: ExecutionContext) {
    // Add your custom authentication logic here
    // for example, call super.logIn(request) to establish a session.
    return super.canActivate(context)
  }

  handleRequest(err, user, info) {
    // You can throw an exception based on either "info" or "err" arguments
    if (err || !user) {
      throw err || new UnauthorizedException()
    }
    return user
  }
}
```

kemudian edit file "src/auth/auth.module.ts" menjadi

```typescript
import { Module } from "@nestjs/common"
import { JwtModule } from "@nestjs/jwt"
import { PassportModule } from "@nestjs/passport"
import { AuthService } from "./auth.service"
import { AuthController } from "./auth.controller"
import { JwtStrategy } from "./jwt.strategy"
import { JwtConfig } from "src/jwt.config"

@Module({
  imports: [
    PassportModule.register({
      defaultStrategy: "jwt",
      property: "user",
      session: false,
    }),
    JwtModule.register({
      secret: JwtConfig.user_secret,
      signOptions: {
        expiresIn: JwtConfig.user_expired,
      },
    }),
  ],
  providers: [AuthService, JwtStrategy],
  controllers: [AuthController],
})
export class AuthModule {}
```

#### Setup Auth Service, Controller

install bycript untuk mengenkripsi password kita

```
yarn add bcrypt
yarn add @types/bcrypt -D
```

atau

```
npm install bcrypt
npm install @types/bcrypt -D
```

buat Pipe untuk merubah password menjadi hash dengan bycript

buat file "src/auth/tranform-password.pipe.ts"

```typescript
import { ArgumentMetadata, Injectable, PipeTransform } from "@nestjs/common"
import { hash } from "bcrypt"

@Injectable()
export class TransformPasswordPipe implements PipeTransform {
  async transform(value: any, metadata: ArgumentMetadata) {
    value.password = await hash(value.password, 12)
    return value
  }
}
```

edit file "src/auth/auth.service.ts" menjadi seperti berikut

```typescript
import { HttpException, HttpStatus, Injectable } from "@nestjs/common"
import { JwtService } from "@nestjs/jwt"
import { PrismaService } from "src/prisma/prisma.service"
import { LoginDto } from "./dto/login.dto"
import { omit } from "lodash"
import { compare } from "bcrypt"
import { JwtConfig } from "src/jwt.config"

@Injectable()
export class AuthService {
  constructor(
    private jwtService: JwtService,
    private dbService: PrismaService
  ) {}

  /**
   * Register Service
   * @param dto
   * @returns
   */
  async register(dto: any) {
    let user = await this.dbService.users.findFirst({
      where: {
        email: dto.email,
      },
    })
    if (user) {
      throw new HttpException("User Exists", HttpStatus.BAD_REQUEST)
    }
    let createUser = await this.dbService.users.create({
      data: dto,
    })
    if (createUser) {
      return {
        statusCode: 200,
        message: "Register success",
      }
    }
    throw new HttpException("Bad request", HttpStatus.BAD_REQUEST)
  }

  /**
   * Login Service
   * @param dto
   * @returns
   */
  async login(dto: LoginDto) {
    let user = await this.dbService.users.findFirst({
      where: { email: dto.email },
    })

    if (!user) {
      throw new HttpException("User not found", HttpStatus.NOT_FOUND)
    }

    let checkPassword = await compare(dto.password, user.password)
    if (!checkPassword) {
      throw new HttpException("Credential Incorrect", HttpStatus.UNAUTHORIZED)
    }
    return await this.generateJwt(
      user.id,
      user.email,
      user,
      JwtConfig.user_secret,
      JwtConfig.user_expired
    )
  }

  /**
   * Generate JWT
   * @param userId
   * @param email
   * @param user
   * @param secret
   * @param expired
   * @returns
   */
  async generateJwt(
    userId: any,
    email: string,
    user: any,
    secret: any,
    expired = JwtConfig.user_expired
  ) {
    let accessToken = await this.jwtService.sign(
      {
        sub: userId,
        email,
        name: user.first_name + " " + user.last_name,
      },
      {
        expiresIn: expired,
        secret,
      }
    )
    return {
      statusCode: 200,
      accessToken: accessToken,
      user: omit(user, ["password", "created_at", "updated_at"]),
    }
  }
}
```

#### install class validator

```
yarn add class-validator
yarn add class-transformer
```

atau

```
npm install class-validator
npm install class-transformer
```

kemudian edit file controller "src/auth/auth.controller.ts"

```typescript
import {
  Body,
  Controller,
  Get,
  HttpCode,
  Post,
  UseGuards,
  UsePipes,
  ValidationPipe,
} from "@nestjs/common"
import { AuthService } from "./auth.service"
import { LoginDto } from "./dto/login.dto"
import { RegisterDto } from "./dto/register.dto"
import { JwtAuthGuard } from "./jwt-auth.guard"
import { TransformPasswordPipe } from "./transform-password.pipe"

@Controller("auth")
export class AuthController {
  /**
   * Constructor
   * @param authService
   */
  constructor(private authService: AuthService) {}

  /**
   * Register controller
   * @param dto
   * @returns
   */
  @UsePipes(ValidationPipe, TransformPasswordPipe)
  @HttpCode(200)
  @Post("register")
  async register(@Body() dto: RegisterDto) {
    return await this.authService.register(dto)
  }

  /**
   * Login Controller
   * @param dto
   * @returns
   */
  @HttpCode(200)
  @Post("login")
  async login(@Body() dto: LoginDto) {
    return await this.authService.login(dto)
  }

  /**
   * Get detail User
   */
  @UseGuards(JwtAuthGuard)
  @Get("profile")
  async profile() {
    return {
      message: "Profile",
    }
  }
}
```

Selamat kita sudah bisa melakukan register, login dengan Respon JWT

#### Setup OpenAPI

Untuk mengetes API kita akan menggunakan OpenAPI

pertama adalah install OpenAPI

```
yarn add @nestjs/swagger swagger-ui-express
```

atau

```
npm install --save @nestjs/swagger swagger-ui-express
```

kemudian edit file "src/main.ts"

```typescript
import { NestFactory } from "@nestjs/core"
import { DocumentBuilder, SwaggerModule } from "@nestjs/swagger"
import { AppModule } from "./app.module"

async function bootstrap() {
  const app = await NestFactory.create(AppModule)

  const config = new DocumentBuilder()
    .setTitle("Open API Test Dansmultipro")
    .setDescription("API Test Dansmultipro")
    .setVersion("1.0")
    .addTag("dansmultipro")
    .build()
  const document = SwaggerModule.createDocument(app, config)
  SwaggerModule.setup("openapi", app, document)

  const cors = {
    origin: ["http://localhost:3000", "http://localhost", "*"],
    methods: "GET, HEAD, PUT, PATCH, POST, DELETE, OPTIONS",
    preflightContinue: false,
    optionsSuccessStatus: 204,
    credentials: true,
    allowedHeaders: ["*"],
  }

  app.enableCors(cors)

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

edit file "src/auth/dto/login.dto.ts"

```typescript
import { ApiProperty } from "@nestjs/swagger"
import { IsNotEmpty } from "class-validator"

export class LoginDto {
  @ApiProperty()
  @IsNotEmpty()
  email: string

  @ApiProperty()
  @IsNotEmpty()
  password: string
}
```

edit file "src/auth/register.dto.ts"

```typescript
import { ApiProperty } from "@nestjs/swagger"
import { Prisma } from "@prisma/client"
import { IsNotEmpty } from "class-validator"

export class RegisterDto implements Prisma.usersCreateInput {
  @ApiProperty()
  @IsNotEmpty()
  name: string

  @ApiProperty()
  @IsNotEmpty()
  email: string

  @ApiProperty()
  @IsNotEmpty()
  password: string
}
```

lalu edit file "src/auth/auth.controller.ts"

```typescript
import {
  Body,
  Controller,
  Get,
  HttpCode,
  Post,
  UseGuards,
  UsePipes,
  ValidationPipe,
} from "@nestjs/common"
import { ApiTags } from "@nestjs/swagger"
import { AuthService } from "./auth.service"
import { LoginDto } from "./dto/login.dto"
import { RegisterDto } from "./dto/register.dto"
import { JwtAuthGuard } from "./jwt-auth.guard"
import { TransformPasswordPipe } from "./transform-password.pipe"

@ApiTags("Auth")
@Controller("auth")
export class AuthController {
  /**
   * Constructor
   * @param authService
   */
  constructor(private authService: AuthService) {}

  /**
   * Register controller
   * @param dto
   * @returns
   */
  @UsePipes(ValidationPipe, TransformPasswordPipe)
  @HttpCode(200)
  @Post("register")
  async register(@Body() dto: RegisterDto) {
    return await this.authService.register(dto)
  }

  /**
   * Login Controller
   * @param dto
   * @returns
   */
  @HttpCode(200)
  @Post("login")
  async login(@Body() dto: LoginDto) {
    return await this.authService.login(dto)
  }

  /**
   * Get detail User
   */
  @UseGuards(JwtAuthGuard)
  @Get("profile")
  async profile() {
    return {
      message: "Profile",
    }
  }
}
```

Open API berhasil di install dan di tambahkan ke auth.controller, selanjutanya kita akan test OpenAPI dengan membuka browser http://localhost:3000/openapi

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656263950/agiksetiawan/nest_jwt/OXqR7FO_d1j706.png)

selanjutnya kita bisa mencoba register menggunakan try out yang ada di openapi

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656264176/agiksetiawan/nest_jwt/V5Oea27_piwbri.png)

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656264264/agiksetiawan/nest_jwt/hXB8Dfd_rxe2pi.png)

Response sukses jika berhasil

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656264331/agiksetiawan/nest_jwt/PLrhQ3t_sojme8.png)

Selajutnya kita akan coba login

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656264435/agiksetiawan/nest_jwt/BfLT6Cr_aedt0q.png)

![](https://res.cloudinary.com/dlppzoemc/image/upload/v1656264486/agiksetiawan/nest_jwt/dYVKUCH_osp2ic.png)

Selamat!! kita sudah berhasil membuat API Register,Login dengan JWT.\

Untuk menggunakan Token JWT kalian bisa menambahkan di dalam Header request

contoh:

Authtehntication: "Bearer TOKEN_JWT"

Repository:

https://github.com/agik-setiawan/example_nest_jwt


Pada Tutorial kali ini saya akan menjelaskan step by step setup JWT menggunakan Framework NestJS , Prisma & MySQL Database

Membuat JWT(Json Web Token) menggunakan NestJS , Prisma & MySQL Database

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

Queue Nest JS Using Bull & Redis

Prisma adalah Modern ORM yang memungkinakan kita membuat koneksi dan Query ke database menjadi lebih mudah dan lebih sederhana di bandingkan kalau kita tanpa menggunakan ORM.

\
Pada tutorial ini, saya kan membagikan contoh bagaimana cara membuat multi koneksi database menggunakan Prisma ORM dengan mudah dan sederhana. disini saya akan menggunakan contoh database MySQL dan Mongo DB untuk koneksi databasenya. pastikan kita sudah bisa membuat koneksi database terlebih dahulu atau silahkan baca [Membuat CRUD Nest JS](/post/nestjs/membuat-crud-nestjs/) untuk lebih detailnya.

\
Pada tutorial CRUD sebelumnya kita sudah berhasil membuat koneksi database menggunakan Prisma, selanjutanya pada tutorial ini kita kan menambahkan satu koneksi database lagi yaitu MongoDB. kita bisa membuat database MongoDB secara gratis di [MongoDB Cloud](https://www.mongodb.com/atlas/database).

\
Setelah kita memiliki koneksi database MongoDB selanjutnya kita buat satu folder "db" dalam root Project kemudian di dalamnya terdapat folder "mongo/schema.prisma" yang akan kita gunakan untuk membuat skema Mongo DB.

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1672955566/jejakcoding/nestjs/multi-connection/ui6PcNv_qpdlys.png)

Kemudian buatlah skema dengan contoh seperti dibawah ini:

```prisma
generator client {
    provider = "prisma-client-js"
    output   = "../../node_modules/@db_prisma/mongo"
}

datasource db {
    provider     = "mongodb"
    url          = env("MONGODB_URL")
}

model biodata {
    id    String @id @default(auto()) @map("_id") @db.ObjectId
    name  String
    email String
}

```

Kemudian edit file .env dan tambahkan 'MONGODB_URL' di dalamnya yang berisi koneksi database mongodb

```env
DATABASE_URL="mysql://root:mysql@localhost:3307/nestjs_crud"
MONGODB_URL='mongodb+srv://test:abcdefghij@clusterkp01.lhfibge.mongodb.net/test_mongodb'
```

Kemudian edit file 'src/prisma/prisma.service' menjadi seperti di bawah ini:

```typescript
import { INestApplication, Injectable, OnModuleInit } from "@nestjs/common"
import { PrismaClient } from "@prisma/client"
import { PrismaClient as PrismaClientMongo } from "@db_prisma/mongo"

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit {
  async onModuleInit() {
    await this.$connect()
  }

  async enableShutdownHooks(app: INestApplication) {
    this.$on("beforeExit", async () => {
      await app.close()
    })
  }
}

@Injectable()
export class PrismaServiceMongo
  extends PrismaClientMongo
  implements OnModuleInit
{
  async onModuleInit() {
    await this.$connect()
  }

  async enableShutdownHooks(app: INestApplication) {
    this.$on("beforeExit", async () => {
      await app.close()
    })
  }
}
```

\
Kemudian tambahkan class 'PrismaServiceMongo' ke dalam 'prisma.module'

```typescript
import { Global, Module } from "@nestjs/common"
import { PrismaService, PrismaServiceMongo } from "./prisma.service"

@Global()
@Module({
  providers: [PrismaService, PrismaServiceMongo],
  exports: [PrismaService, PrismaServiceMongo],
})
export class PrismaModule {}
```

\
Kemudian kita generate skema koneksi database Mongo DB dengan menjalankan perintah

```shell
yarn prisma generate --schema ./db/mongo/schema.prisma
```

\
Pada tahap ini kita sudah berhasil menambah satu koneksi database baru yaitu Mongo DB ke dalam project Nest JS, selanjutanya kita akan panggil service Mongo DB ke dalam service lain.

```typescript
import { Injectable } from "@nestjs/common"
import { PrismaServiceMongo } from "src/prisma/prisma.service"
import { CreateBiodataMongoDto } from "./dto/create-biodata-mongo.dto"
import { UpdateBiodataMongoDto } from "./dto/update-biodata-mongo.dto"

@Injectable()
export class BiodataMongoService {
  constructor(private dbMongo: PrismaServiceMongo) {}

  async create(createBiodataMongoDto: CreateBiodataMongoDto) {
    const createBiodata = await this.dbMongo.biodata.create({
      data: createBiodataMongoDto,
    })
    if (createBiodata) {
      return {
        statusCode: 200,
        message: "success",
      }
    }
  }
}
```

## Repository:

\
[https://github.com/mister-coding/basic-crud-nestjs](https://github.com/mister-coding/basic-crud-nestjs)

Branch: multi-connection


Prisma adalah Modern ORM yang memungkinakan kita membuat koneksi dan Query ke database menjadi lebih mudah dan lebih sederhana di bandingkan kalau kita tanpa menggunakan ORM.

NestJS Prisma Multi Connections

Node JS / Nest JS memiliki cara kerja Single Thread yang artinya hanya bisa menjalankan tugas satu persatu sehingga pada saat ada banyak tugas yang sedang di kerjakan harus bergantian beda dengan Multi Thread yang bisa menjalankan tugas secara bersamaan.

\
Kali ini kita akan membuat supaya aplikasi Nest JS menjadi lebih cepat dengan memaksimalkan Jumlah Core yang ada pada Komputer sehingga bekerja seperti Multi Thread atau Mode Cluster. semakin banyak jumlah Core pada komputer maka akan semakin banyak jumlah tugas yang bisa di kerjakan.

\
Kita hanya perlu menambahkan beberapa baris code di dalam main.ts seperti berikut:

```typescript
import { NestFactory } from "@nestjs/core"
import { AppModule } from "./app.module"
const cluster = require("cluster")
const numCPUs = require("os").cpus().length

async function bootstrap() {
  const app = await NestFactory.create(AppModule)

  if (cluster.isMaster) {
    console.log(`Master ${process.pid} is running`)
    for (let i = 0; i < numCPUs; i++) {
      cluster.fork()
    }

    cluster.on("exit", (worker, code, signal) => {
      console.log(`worker ${worker.process.pid} died`)
    })
  } else {
    await app.listen(process.env.PORT || 3000)
    console.log(`Worker ${process.pid} started`)
  }
}
bootstrap()
```

# **benchmark Perbandingan Tanpa \ Menggunakan Cluster Mode**

\
![](https://res.cloudinary.com/dlppzoemc/image/upload/v1668643481/jejakcoding/nestjs/cluster/YDg6Ggt_pjorip.png)

\
Pada gambar diatas disebelah kiri adalah dimana Nest JS tanpa menggunakan Cluster Mode dan di sebelah kanan adalah menggunakan Cluster Mode.

&nbsp;

## **Tanpa Cluster Mode**

179051 Request

&nbsp;

## **Menggunakan Cluster Mode**

814932 Request

\
Terlihat diatas perbedaanya cukup jauh dalam jumlah request dimana saya menggunakan [WRK](https://github.com/wg/wrk) untuk mengetes request.


Node JS / Nest JS memiliki cara kerja Single Thread yang artinya hanya bisa menjalankan tugas satu persatu sehingga pada saat ada banyak tugas yang sedang di kerjakan harus bergantian beda dengan Multi Thread yang bisa menjalankan tugas secara bersamaan.