Cara Membuat REST API dengan Express, Typescript, dan PostgreSQL | Aku Genius

Gara-gara merasa insecure coding pakai Javascript, saya jadi tertarik mencoba Typescript. 😁 Apa kamu juga merasa demikian? Oke lah, kalau begitu mari kita pelajari gimana cara membuat REST API dengan Express dan Typescript. Tidak hanya itu.. Kamu juga akan mempelajari gimana cara menggunakan Prisma ORM untuk akses database PostgreSQL. Serta setup Docker untuk serive PosgreSQL. Mari kita mulai!

Cara Membuat REST API dengan Express, Typescript, dan PostgreSQL

Step 1 – Persiapan dan Setup Project

Oke, mari kita suapkan project-nya dari nol.

Membuat Project Baru

Pertama, buat folder baru dengan nama microblog. Buka Termial atau CMD, lalu ketik perintah ini: Setelah itu, masuk ke folder tersebut dengan cd dan lakukan inisialisasi project Nodejs. Ketik perintah ini: Perintah ini akan membaut file baru dengan nama package.json yang merupakan file untuk meyimpan data project dan depedency yang dibutuhkan. Isinya akan saeperti ini:

Wrote to /.../microblog/package.json:

{
  "name": "my-blog",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Oke, lanjut! Biar enak, silahkan buka project ini dengan teks editor. Bisa pakai teks editor apa aja, tapi saya sarankan pakai VS Code biar gampang.

Install Node Module yang dibutuhkan

Install node module untuk aplikasi:

npm install express @prisma/client @types/http-errors

Install node module untuk development aplikasi:

npm install --save-dev typescript ts-node @types/node @types/express prisma nodemon

Tunggulah sampai prosesnya selesai. Sambil menunggu, mari kita pelajari fungsi-fungsi tiap modul:

• express adalah modul untuk framework express;
• @prisma/client ini ORM client dari Prisma buat akses database;
• typscript modul yang berisi tools untuk bahasa Typecript seprti compiler;
• ts-node dan @types/node ini runtime untuk menjalankan Typescript tanpa harus compile ke Javasript;
• @types/express modul ini membaut kita bisa gunakan Typescript di Express;
• @types/http-errors modul ini membaut HTTP Error;
• prisma ORM untuk akses database biar gak ribet nge-query manual;
• nodemon untuk menjalankan dev server dan auto reload.

Membuat Config untuk Typescript

Berikutnya, buatlah file baru dengan nama tsconfig.json di root direktori project dengan isi seperti ini:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["esnext"],
    "esModuleInterop": true
  }
}

Ini adalah konfigurasi yang akan digunakan Typescript untuk compile dan build project. Ini adalah penampakan project kita saat ini.

Karena saya pakai pnpm, saya jadi punya file pnpm-lock.yaml. Tenang.. file ini sama seperti file packagae-lock.json untuk npm. Oke, lanjut!

Membuat Config untuk Nodemon

Buat file baru dengan nama nodemon.json di root direktori project dengan isi seperti ini:

{
  "execMap": {
    "ts": "ts-node"
  }
}

Ini adalah konfigurasi agar nodemon menggunakan ts-node untuk menjalankan server.

Konfigurasi Script di package.json

Terakhir, ubah package.json menjadi seperti ini:

{
  "name": "microblog",
  "version": "1.0.0",
  "description": "Micro Blogging Platform Backend",
  "main": "src/index.ts",
  "scripts": {
    "dev": "npx nodemon ./src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Dian",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/http-errors": "^2.0.1",
    "@types/node": "^18.11.9",
    "nodemon": "^2.0.20",
    "prisma": "^4.6.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.3"
  },
  "dependencies": {
    "@prisma/client": "^4.6.1",
    "express": "^4.18.2"
  }
}

Ini nanti agar kita bisa menjalankan dev server dengan perintah: Tapi.. untuk saat ini, perintah belum bisa dijalankan.. karena kita belum membuat file index.ts. Lanjut dulu ke step ke-2.

Step 2 – Setup Docker untuk Service PostgreSQL (Opsional)

Jika kamu sudah menginstall dan setup PostgreSQL di komputermu, maka step ini tidak perlu kamu ikuti. Silahkan lompat ke step berikutnya. Tapi jika belum, mari kita setup service PosgreSQL dengan Docker. O ya, pastikan kamu sudah install Docker juga. Jika belum, saya sarankan untuk baca: Oke lanjut! Buatlah file baru di root direktori project dengan nama docker-compose.yml dan isi dengan kode berikut:

version: '3.8'
services:
  postgres:
    image: postgres:10.3
    restart: always
    environment:
      - POSTGRES_USER=microblogger
      - POSTGRES_PASSWORD=sip4lingR4hasia
    volumes:
      - postgres:/var/lib/postgresql/data
    ports:
      - '5432:5432'
volumes:
  postgres:

Ini adalah konfigurasi untuk menjalankan service PostgreSQL dengan Docker compose. Perhatikan pada bagian POSTGRES_USER dan POSTGRES_PASSWORD, kamu bisa mengganti nilainya dengan yang kamu inginkan. Tapi ingat, ini nanti akan dipakai untuk menyambungkan aplikasi dengan database PostgreSQL.

Setelah membua docker-compose.yml, beriutnya silahkan jalankan service Docker dengan perintah: Kita memberikan paramter -d supaya service ini dijalankan secara background. Hasil output di Terminal akan seperti ini:

Terminal Output

Pulling postgres (postgres:10.3)...
10.3: Pulling from library/postgres
f2aa67a397c4: Pull complete
6de83ca23e55: Pull complete
. . .
Status: Downloaded newer image for postgres:10.3
Creating microblog_postgres_1 ... done

Kita juga bisa ngecek prosesnya dengan perintah: Output:

Output

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
8547f8e007ba        postgres:10.3       "docker-entrypoint.s…"   3 seconds ago       Up 2 seconds        0.0.0.0:5432->5432/tcp   microblog_postgres_1

Ini artinya service PostgreSQL sedang berjalan di port 5432 dengan nama container microblog_postgres_1.

Sekarang kita bisa akses PostgreSQL di localhost dengan port 5432.

Step 3 – Membuat Model Data

Sebelum buat model data, kita harus melakukan inisialiasi Prisma dulu. Buka terminal, lalu jalankan perintah ini: Jika berhasil, outputnya akan seperti ini:

Terminal Output

✔ Your Prisma schema was created at prisma/schema.prisma.
  You can now open it in your favorite editor.

Perintah ini akan membuat folder prisma dan di dalamnya akan ada file schema.prisma.

Selain itu, perintah tadi juga akan membuat file .env. Silahkan ubah isi file .env menjadi seperti ini:

microblog/.env

DATABASE_URL="postgresql://microblogger:[email protected]:5432/microblog?schema=public"

Ini adalah env variabel yang akan dipakai oleh Prisma untuk konek ke service PostgreSQL. Perihatikan di bagian ini:

microblogger:sip4lingR4hasia

Ini 👆 adalah username dan password database yang kita buat tadi di docker-compose.yml. Silahkan sesuaikan dengan akun di server postgre-mu. Lalu perhatikan juga di bagian ini: Ini 👆 adalah nomor port dan nama data base yang akan dipakai. Oke lanjut! Sekarang kita bisa mulai membuat model data. Silahkan buka file prisma/schema.prisma, lalu ubah menjadi seperti ini:

// 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 = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int     @default(autoincrement()) @id
  email     String  @unique
  username  String  @unique
  name      String?
  posts     Post[]
}

model Post {
  id        Int       @default(autoincrement()) @id
  content   String
  author    User?     @relation(fields: [authorId], references: [id])
  authorId  Int?
  createdAt DateTime  @default(now())
}

Setelah itu, lakukan migrasi untuk membuat tabel baru di PostgreSQL. Jalankan perintah ini:

npx prisma migrate dev --name init

Perintah ini akan membuat folder migrations di dalam folder prisma dan akan berisi migration.sql. Hasilnya:

Terminal Output

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "microblog", schema "public" at "localhost:5432"

PostgreSQL database my-blog created at localhost:5432

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20201209084626_init/
    └─ migration.sql

Running generate... (Use --skip-generate to skip the generators)

✔ Generated Prisma Client (2.13.0) to ./node_modules/@prisma/client in 75ms

Folder migrations akan menyimpan semua perubahan migrasi database yang kita lakukan.

Jika kamu belum paham konsep migrasi daabase, saya sarankan untuk baca: Unuk mengecek hasil migrasi, kita bisa pakai Beekeeper Studio. Buat koneksi baru di BeeKeeper Studio, masukan username dan password database PostgreSQL kita. Lalu klik Connect.

Hasilnya, akan ada tabel baru dengan sekema yang sama seperti yang kita definisikan di Model Data.

Jika ada migrasi atau perubahan data baru, nanti tabelnya akan di-update. Tinggal jalankan saja perintah migrasi tadi dan tentukan nama migrasi barunya. Kamu bisa baca di dokumentasi Prisma. Oke, semua setup sudah siap. Selanjutnya kita akan mulai coding.

Step 4 – Membuat REST API

Buat folder baru dengan nama src kemudian di dalamnya buat file index.ts dengan isi seperti ini:

microblog/src/index.ts

import { PrismaClient } from "@prisma/client";
import express, { Request, Response } from "express";
import createError from "http-errors"

const prisma = new PrismaClient()
const app = express()

app.use(express.json())


// TODO: Routing aplikasi akan kita tulis di sini


// handle 404 error
app.use((req: Request, res: Response, next: Function) => {
  next(createError(404))
})

app.listen(3000, () =>
  console.log(`⚡️[server]: Server is running at https://localhost:3000`)
)

Sekarang kita bisa jalankan dev server dengan perintah: Hasilnya:

Server berhasil dijalankan pada localhot:3000. Kalau kita buka di browser, maka hasilnya:

Yap, hasilnya akan error 404. Ini karena kita belum mendefinisikan route endpoint-nya. Sekarang folder project kita sudah mejadi seperti ini.

Berikutnya, kita akan buat route endpoint. Namun.. Sebelum kita menulis route endpoint, kita harus tentukan dulu route apa saja yang akan dibuat. Ini penting! Supaya kita tidak bingung nantinya. Berikut ini adalah route yang akan kita buat di tutorial ini.

Endpoint	Method	Keterangan
/feed	GET	List semua post
/post	POST	Buat create post baru
/post/:id	GET	Buat ambil 1 post berdasarkan id
/post/:id	PUT	Buat update post
/post/:id	DELETE	Buat hapus post
/user/	POST	Buat create user baru
/:username	GET	Buat ambil user berdasarkan username

Sisanya yang belum ada, nanti kamu bisa buat sendiri ya.. Oke, mari kita buat satu per satu.

Membuat route /feed

Tambahkan kode route ini di bawah // TODO pada index.ts.

app.get('/feed', async (req: Request, res: Response) => {
  const posts = await prisma.post.findMany({
    include: { author: true }
  })
  res.json(posts)
})

Pada route ini, kita coba mengakses data pada tabel post dengan Prisma. Kita menggunakan method findMany() untuk mengambil banyak data. Jika kita coba akses route ini dari browser, maka kita akan mendapakan array kosong.

Ini karena kita belum punya data untuk ditampilkan. Karena itu, mari kita lanjut membuat route yang lainnya.

Membuat route /post

Tambahkan route ini di dalam index.ts, tepat di bawah route yang baru saja kita buat.

app.post('/post', async (req: Request, res: Response) => {
  const { content, authorEmail } = req.body
  const result = await prisma.post.create({
    data: {
      content,
      author: { connect: { email: authorEmail } }
    }
  })
  res.json(result)
})

app.get('/post/:id', async (req: Request, res: Response) => {
  const { id } = req.params
  const post = await prisma.post.findUnique({
    where: { id: Number(id) },
  })
  res.json(post)
})

app.put('/post/:id', async (req: Request, res: Response) => {
  const { id } = req.params
  const post = await prisma.post.update({
    where: { id: Number(id) },
    data: {
      ...req.body
    }
  })

  res.json(post)
})


app.delete(`/post/:id`, async (req: Request, res: Response) => {
  const { id } = req.params
  const post = await prisma.post.delete({
    where: { id: Number(id) },
  })
  res.json(post)
})

Kita sudah menambahkan empat route untuk melakukan CRUD (Create, Read, Update, dan Delete) post. Berikutnya, tambahkan juga route untuk user.

Membuat route /user

Tambahkan route ini di dalam index.ts tepat di bawah route yang adi kita buat.

app.post('/user', async (req: Request, res: Response) => {
  const result = await prisma.user.create({
    data: { ...req.body }
  })
  res.json(result)
})

app.get('/:username', async (req: Request, res: Response) => {
  const { username } = req.params
  const user = await prisma.user.findUnique({
    where: { username: String(username) }
  })
  res.json(user)
})

Step 5 – Uji Coba REST API

Pertama kita coba tambahakan data user dulu ya. Karena skenarionya, user harus bikin akun atau daftar dulu baru bisa membuat post.

Percobaan endpoint /user

Silahkan buka postman, lalu coba lakukan request baru ke endpoint /user dengan mehod POST. Isi datanya seperti ini:

Setelah itu, klik Send untuk mengirim request. Kemudian, coba cek dari BeeKeeper. Hasilnya:

Data user baru sudah berhasil dibuat. Sekarang kita bisa coba akses endpoint /:username. Karena tadi saya membaut username dian, maka saya bisa buka /dian. Hasilnya:

Percobaan endpoint /post

Berikutnya kita akan membuat post berdasarkan email user. Buat request ke endpoin /post dengan method POST. Lalu pada body, isi dengan data JSON seperti ini.

Maka hasilnya di Beekeeper studio:

Data post atau tweet berhasil di tambahkan. Mantap! 👍 Sekarang jika kita coba buka endpoint /feed, maka akan ada 1 post di sana.

Selanjutnya coba untuk melakukan update dan hapus post.

Percobaan update dan hapus post

Kita coba untuk mengubah data dulu. Silahkan buat request ke /post/1 di Postman dengan method PUT dan isi data baru seperti ini.

Setelah itu, coba buka /post/1 dari browser. Maka hasilnya:

Mantap 👍 data berhasil kita ubah. Terakhir, coba hapus data. Buat request ke /post/1 dengan method DELETE di Postman.

Hasilnya data akan terhapus. Kita bisa cek dengan membuka endpoint /feed, di sana pasti isinya akan kosong.

Apa Selanjutnya?

Sejauh ini kita sudah berhasil membuat REST API dengan Express, Typescript, dan PostgreSQL. Tentu saja ini masih belum cukup. Karena itu, selanjutnya silahkan:

• Rapikan struktur direktori;
• Tambahkan validasi data sebelum disimpan ke database;
• Buat endpoint untuk auth;
• Buat endpoint untuk upload avatar;
• Lengkapi endpoint yang belum lengkap;
• dan sebagainya.

Selamat belajar. 

Source : Petanicode.com