Daftar Isi:
Dalam pengembangan aplikasi web, framework backend memainkan peran Krusial dalam menyediakan fondasi dan kerangka kerja yang robust Kepada membangun aplikasi yang scalable dan maintainable. Framework backend membantu developer dalam mempermudah pengelolaan data, logika aplikasi, autentikasi, dan berbagai fungsi backend lainnya yang Krusial Kepada aplikasi web yang modern.
Bun adalah runtime JavaScript all-in-one yang dibuat dengan tujuan Kepada mempercepat pengembangan aplikasi. Bun menyediakan environment development yang ringan dan Segera Kepada menjalankan Javascript dan Typescript, Membikin bundling, transpiling, dan menjalankan kode lebih efisien. Dengan dukungan yang luas Kepada API NodeJS dan kecepatan yang tinggi, Bun menjadi pilihan menarik bagi developer yang mencari runtime yang Segera dan efisien.
Baca Juga: Mengenal Bun, Runtime Javascript Segera
Ketika ini sudah tersedia banyak opsi framework backend Javascript, tetapi kebanyakan Lagi berjalan di NodeJS. Nah, pada artikel kali ini Diriku akan membahas tentang Elysia, sebuah framework backend yang berjalan di Bun. Diriku akan menjelaskan mulai dari pengenalan, Keistimewaan, hingga panduan praktis Kepada memulai proyek dengan Elysia menggunakan Bun. Langsung saja kita ke pembahasannya ya Kolega-Kolega.
Apa itu Elysia?
Elysia adalah framework backend web yang dibangun di atas Bun. Tujuan Penting dari pengembangan Elysia adalah Kepada menyediakan framework yang mudah digunakan, efisien, dan Mempunyai performa tinggi Kepada pengembangan aplikasi web modern. Elysia memanfaatkan kecepatan dan efisiensi Bun Kepada memberikan pengalaman pengembangan yang optimal.
Keistimewaan Elysia
- Performa Tinggi: Berkat Bun, Elysia dapat menjalankan aplikasi dengan performa yang sangat tinggi. Bun sebagai runtime yang Segera dan efisien memberikan keuntungan besar dalam hal kecepatan eksekusi kode.
- Mudah Digunakan: Elysia dirancang dengan developer experience yang sederhana, memudahkan pengembang Kepada memulai dan mengembangkan proyek mereka tanpa kurva belajar yang curam.
- Skalabilitas: Dengan desain yang modular, Elysia memungkinkan pengembang Kepada membangun aplikasi yang scalable, mendukung pertumbuhan aplikasi dari kecil hingga besar.
- Dukungan Typescript: Elysia mendukung Typescript secara penuh, memberikan manfaat tambahan dalam hal type safety dan pengembangan yang lebih robust.
- Integrasi Mulus dengan Ekosistem Javascript: Elysia dirancang Kepada bekerja dengan Berkualitas dengan berbagai library dan tools dalam ekosistem Javascript, membuatnya Luwes dan mudah diintegrasikan dengan proyek yang sudah Eksis.
Quick Start Elysia
Kepada memulai proyek dengan Elysia menggunakan Bun, ikuti langkah-langkah berikut:
Instalasi Bun
- Unduh dan Install Bun:
Kunjungi situs Formal Bun di Situs Formal Bun dan ikuti petunjuk instalasi sesuai dengan sistem operasi yang kalian gunakan.
curl -fsSL https://bun.sh/install | bash- Pengecekan Instalasi Bun:
Setelah instalasi selesai, pastikan Bun telah terinstal dengan Betul dengan menjalankan perintah berikut di terminal:
bun --versionMembikin Proyek Elysia
- Inisialisasi Proyek Baru:
Buat direktori baru Kepada proyek kalian dan inisialisasi proyek dengan Bun.
mkdir elysia-project
cd elysia-project
bun init- Install Dependencies:
Install Elysia dan @elysiajs/swagger sebagai dependensi dalam proyek kalian.
bun add elysia @elysiajs/swagger- Menambahkan Scripts pada
package.json
Tambahkan kode di Rendah ini pada file package.json kalian.
"scripts": {
"dev": "bun --watch src/index.ts",
"build": "bun build src/index.ts",
"start": "NODE_ENV=production bun src/index.ts"
},Script diatas merujuk pada tahapan-tahapan berbeda dalam mengembangkan sebuah aplikasi:
- dev – Memulai Elysia dalam mode development dengan reload Mekanis Ketika kode berubah.
- build – Build aplikasi Kepada penggunaan production.
- start – Memulai server production Elysia.
Struktur Proyek Elysia
Setelah menginisialisasi proyek, struktur direktori proyek akan terlihat seperti ini:
elysia-project/
├── node_modules/
├── src/
│ └── index.ts
├── .gitignore
├── bun.lockb
├── package.json
├── README.md
└── tsconfig.json- node_modules/: Direktori ini berisi dependensi proyek.
- src/: Direktori ini berisi kode sumber aplikasi.
- index.ts: File Penting aplikasi tempat kita akan menulis kode backend menggunakan Elysia.
- .gitignore: File ini berisi daftar file dan direktori yang harus diabaikan oleh Git.
- bun.lockb: File ini digunakan oleh Bun Kepada mengelola dependensi.
- package.json: File ini berisi informasi proyek dan dependensi.
- README.md: File ini berisi dokumentasi proyek.
- tsconfig.json: File ini berisi konfigurasi Typescript.
Hands-on Membikin REST API Sederhana dengan Elysia
Sekarang, kita akan Membikin REST API sederhana menggunakan Elysia. Disini Diriku akan menggunakan bahasa Typescript dan studi kasus yang akan kita gunakan adalah API CRUD (Create, Read, Update, Delete) Kepada mengelola kontak.
Berikut merupakan langkah-langkahnya:
Membikin API CRUD Kontak
- Definisikan types
Buat file types.d.ts pada root project dan tambahkan type Kepada kontak.
type Contact {
id: number;
name: string;
email: string;
}- Buat file
db.tsdi foldersrc
File ini akan berperan sebagai pusat operasi CRUD dari API kontak. Tambahkan kode di Rendah ini pada file db.ts.
const contacts: Contact[] = [];
let nextId = 1;
export class ContactDB {
async getContacts(): PromiseContact[]> {
return contacts;
}
async getContact(id: number): PromiseContact | undefined> {
return contacts.find(c => c.id === id);
}
async addContact(contact: OmitContact, 'id'>): PromiseContact> {
const newContact = { ...contact, id: nextId++ };
contacts.push(newContact);
return newContact;
}
async updateContact(id: number, updatedContact: OmitContact, 'id'>): Promisestring | undefined> {
const contactIndex = contacts.findIndex(c => c.id === id);
if (contactIndex !== -1) {
contacts[contactIndex] = { ...updatedContact, id };
return "success";
} else {
return undefined;
}
}
async removeContact(id: number): Promisestring | undefined> {
const contactIndex = contacts.findIndex(c => c.id === id);
if (contactIndex !== -1) {
contacts.splice(contactIndex, 1);
return "success";
} else {
return undefined;
}
}
}- ** Buat plugin instance
contactApipada fileindex.ts**
Buat plugin instance contactApi pada file index.ts Kepada mengelompokkan route dengan prefix /api.
..
import { Elysia } from 'elysia';
..
const contactApi = new Elysia({ prefix: '/api' })
...- Endpoint Kepada Menambah Kontak
Tambahkan endpoint Kepada menambah kontak baru pada contactApi.
...
import { ContactDB } from './db';
...
.post(
"/contacts",
async ({ db, body }: { db: ContactDB, body: Contact }) => {
const id = (await db.addContact(body)).id
return { success: true, message: `Contact ${id} added` };
},
{
detail: {
summary: 'Add contact',
description: 'Add contact to the database',
requestBody: {
content: {
'application/json': {
schema: {
type: 'object',
properties: {
name: { type: 'string' },
email: { type: 'string' }
},
example: {
name: 'Wahyu',
email: '[email protected]'
},
required: ['name', 'email']
}
}
}
},
responses: {
200: {
description: 'Success',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: true
},
message: {
type: 'string',
example: 'Contact 1 added'
}
},
required: ['success', 'message']
}
}
}
},
400: {
description: 'Bad Request',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: false
},
message: {
type: 'string',
example: 'Invalid request'
}
},
required: ['success', 'message']
}
}
}
}
}
}
}
)
...- Endpoint Kepada Mendapatkan Sekalian Kontak
Tambahkan endpoint Kepada mendapatkan list Sekalian kontak pada contactApi.
...
.get('/contacts',
async ({ db }: { db: ContactDB }) => {
const contacts = await db.getContacts();
return {
success: true,
data: contacts
};
},
{
detail: {
summary: 'Get contacts',
description: 'Get all contacts from the database',
responses: {
200: {
description: 'Success',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean'
},
data: {
type: 'array',
items: {
$ref: '#/components/schemas/Contact'
},
example: [{
id: 1,
name: 'Wahyu',
email: '[email protected]'
}]
}
},
required: ['success', 'data']
}
}
}
}
}
}
}
)
...- Endpoint Kepada Mendapatkan Kontak Berdasarkan ID
Tambahkan endpoint Kepada mendapatkan kontak berdasarkan ID pada contactApi.
...
.get('/contacts/:id',
async ({ db, params }: { db: ContactDB, params: { id: string } }) => {
const id = parseInt(params.id);
if (id === undefined) {
return { success: false, message: 'Invalid request' };
}
const contact = await db.getContact(id);
if (contact === undefined) {
return { success: false, message: 'Not found' };
}
return { success: true, data: contact };
},
{
detail: {
summary: 'Get contact by ID',
description: 'Get contact from the database by ID',
parameters: [
{
name: 'id',
in: 'path',
description: 'Contact ID',
required: true,
schema: {
type: 'number'
}
}
],
responses: {
200: {
description: 'Success',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean'
},
data: {
type: 'object',
properties: {
id: {
type: 'number'
},
name: {
type: 'string'
},
email: {
type: 'string'
}
},
example: {
id: 1,
name: 'Wahyu',
email: '[email protected]'
},
required: ['id', 'name', 'email']
}
},
required: ['success', 'data']
}
}
}
},
404: {
description: 'Not Found',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: false
},
message: {
type: 'string',
example: 'Contact not found'
}
},
required: ['success', 'message']
}
}
}
}
}
}
}
)
...- Endpoint Kepada Mengupdate Kontak
Tambahkan endpoint Kepada mengupdate kontak berdasarkan ID pada contactApi.
...
.put(
"/contacts/:id",
async ({ db, params, body }: { db: ContactDB, params: { id: string }, body: Contact }) => {
const id = parseInt(params.id);
if (id === undefined) {
return { success: false, message: 'Invalid request' };
}
const contact = await db.updateContact(id, body);
if (contact === undefined) {
return { success: false, message: 'Not found' };
}
return { success: true, message: `Contact ${id} updated` };
},
{
detail: {
summary: 'Update contact',
description: 'Update contact in the database',
parameters: [
{
name: 'id',
in: 'path',
description: 'Contact ID',
required: true,
schema: {
type: 'number'
}
}
],
requestBody: {
content: {
'application/json': {
schema: {
type: 'object',
properties: {
name: { type: 'string' },
email: { type: 'string' }
},
example: {
name: 'Wahyu Ivan',
email: '[email protected]'
},
required: ['name', 'email']
}
}
}
},
responses: {
200: {
description: 'Success',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: true
},
message: {
type: 'string',
example: 'Contact 1 updated'
}
},
required: ['success', 'message']
}
}
}
},
400: {
description: 'Bad Request',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: false
},
message: {
type: 'string',
example: 'Invalid request'
}
},
required: ['success', 'message']
}
}
}
},
404: {
description: 'Not Found',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: false
},
message: {
type: 'string',
example: 'Contact not found'
}
},
required: ['success', 'message']
}
}
}
}
}
}
}
)- Endpoint Kepada Menghapus Kontak
Tambahkan endpoint Kepada menghapus kontak berdasarkan ID pada contactApi.
...
.delete(
"/contacts/:id",
async ({ db, params }: { db: ContactDB, params: { id: string } }) => {
const id = parseInt(params.id);
if (id === undefined) {
return { success: false, message: 'Invalid request' };
}
const contact = await db.removeContact(id);
if (contact === undefined) {
return { success: false, message: 'Not found' };
}
return { success: true, message: `Contact ${id} removed` };
},
{
detail: {
summary: 'Remove contact',
description: 'Remove contact from the database',
parameters: [
{
name: 'id',
in: 'path',
description: 'Contact ID',
required: true,
schema: {
type: 'number'
}
}
],
responses: {
200: {
description: 'Success',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: true
},
message: {
type: 'string',
example: 'Contact 1 removed'
}
},
required: ['success', 'message']
}
}
}
},
404: {
description: 'Not Found',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
success: {
type: 'boolean',
example: false
},
message: {
type: 'string',
example: 'Contact not found'
}
},
required: ['success', 'message']
}
}
}
}
}
}
}
);- Buat instance Elysia baru
Buat instance Elysia baru dan tambahkan plugin contactApi, Swagger dan property ContactDB pada file index.ts. Swagger disini adalah sebuah open-source project yang memungkinkan kita Kepada Membikin dokumentasi API dengan mudah. Setalah itu, set server agar berjalan pada port 3000.
...
import { swagger } from '@elysiajs/swagger'
...
new Elysia()
.use(swagger({
documentation: {
info: {
title: 'Contact API',
version: '1.0.0',
description: 'Contact API project. Developed using Elysia framework, bun, and TypeScript.'
}
}
}))
.use(contactApi)
.decorate('db', new ContactDB())
.listen(3000);- Menjalankan Server:
Kepada menjalankan server, gunakan perintah berikut di terminal:
bun devServer akan berjalan di http://localhost:3000 dan kalian sudah Bisa mengakses API yang telah dibuat. Kepada Menonton dokumentasi API dengan Swagger, akses endpoint /swagger.
Kepada Menonton project dan source code secara penuh: Link Github Proyek
Penutup
Elysia menawarkan solusi modern Kepada pengembangan backend web dengan memanfaatkan kekuatan dan kecepatan Bun sebagai fondasinya. Dengan kemudahan integrasi dan dukungan penuh Kepada Typescript, Elysia memberikan pengalaman development yang Segera dan efisien. Semoga artikel ini membantu kalian dalam memulai dan mengembangkan API menggunakan Elysia dan Bun. Selamat mencoba!