Front-End & Back-End Development 9
Video - Membuat REST API dengan Express & Database
Modul 3 Backend Development dengan Express.js
Selamat datang di Modul 3: Backend Development dengan Express.js!
Apakah Anda pernah bertanya-tanya bagaimana sebuah aplikasi bisa menampilkan data pengguna, mengirim pesan, atau menyimpan transaksi secara real time? Semua keajaiban itu terjadi di balik layar di sisi backend.
Pada modul ini, kita akan mempelajari berbagai konsep penting dalam pengembangan backend menggunakan Express.js. Anda akan diajak mengenal dasar-dasar Backend Development dan memahami prinsip desain REST API yang menjadi fondasi komunikasi antara frontend dan server. Selanjutnya, kita akan membahas Express.js sebagai framework backend yang populer dan efisien, serta mempelajari cara mengatur routing dan middleware untuk mengelola alur data dalam aplikasi.
Anda juga akan belajar mengimplementasikan CRUD API dengan MongoDB untuk mengelola data, menangani error dan logging agar aplikasi berjalan lebih stabil, melakukan pengujian API menggunakan Postman, hingga mendokumentasikan API dengan OpenAPI/Swagger agar mudah dipahami oleh tim lain.
Digiers, sebelum memulai pembelajaran kali ini, mari kita juga pahami bersama capaian yang akan kita raih. Berikut adalah tujuan pembelajaran yang akan menjadi pedoman kita setelah menyelesaikan modul ini, kita diharapkan untuk:
- Memahami konsep dan prinsip REST API (API yang dipakai hampir semua aplikasi modern!)
- Membangun backend server dengan Express.js dari nol
- Membuat routing dan menggunakan middleware (jangan khawatir, ini lebih mudah dari kedengarannya!)
- Mengimplementasikan CRUD API dengan MongoDB (Create, Read, Update, Delete data)
- Menangani error dan logging dengan baik (supaya aplikasi Anda profesional)
- Menggunakan Postman untuk testing API (tools wajib developer!)
- Mendokumentasikan API dengan OpenAPI/Swagger (biar tim lain paham API Anda)
3.1 Pengantar Backend Development
Sebelum mulai menulis kode backend, penting bagi Anda untuk memahami apa sebenarnya peran backend dalam sebuah aplikasi. Banyak orang mengenal tampilan aplikasi (frontend) karena itulah yang terlihat dan digunakan langsung. Namun, bagian yang membuat semuanya bisa berjalan dengan baik justru ada di balik layar itulah yang disebut backend.
3.1.1 Apa Sih Backend Itu?
Coba bayangkan saat Anda membuka Instagram. Ketika Anda menggulir feed, menyukai postingan, atau mengunggah foto, ada proses besar yang bekerja di belakang layar untuk memastikan semua itu berjalan lancar. Nah, bagian yang mengatur proses tersebut adalah backend.
Secara sederhana, backend adalah bagian dari aplikasi web yang berjalan di server, yaitu komputer yang aktif 24 jam di internet. Jika frontend adalah tampilan yang Anda lihat dan klik, maka backend adalah otak yang mengatur logika, data, dan aturan di balik layar.
Backend memiliki beberapa tanggung jawab utama, di antaranya:
- Mengelola data: Menyimpan, mengambil, mengubah, dan menghapus data di database.
- Autentikasi & otorisasi: Memastikan siapa yang login dan apa saja yang boleh dilakukan.
- Menyediakan API: Menjadi jembatan komunikasi antara frontend dan database.
- Business logic: Menjalankan aturan bisnis aplikasi (misalnya menghitung diskon atau memvalidasi data).
- Integrasi eksternal: Menghubungkan aplikasi ke layanan lain seperti payment gateway atau layanan email.
- Frontend = Pelayan restoran yang berinteraksi dengan pelanggan.
- Backend = Dapur tempat koki menyiapkan pesanan.
- Database = Gudang tempat menyimpan bahan makanan.
3.1.2 Client-Server Architecture
Agar sebuah aplikasi dapat berfungsi dengan baik, frontend (client) dan backend (server) harus bisa berkomunikasi. Konsep yang mengatur hubungan ini disebut Client-Server Architecture.
Dalam arsitektur ini, client seperti browser atau aplikasi mobile akan mengirimkan HTTP Request ke server untuk meminta data atau layanan tertentu. Server kemudian memproses permintaan tersebut, berkomunikasi dengan database bila diperlukan, lalu mengirimkan kembali HTTP Response berisi hasilnya.
Bagaimana prosesnya berlangsung?
- Client (Frontend) mengirimkan permintaan: "Server, tolong kirimkan daftar produk!"
- Server (Backend) menerima permintaan dan memprosesnya: "Baik, saya ambil datanya dari database."
- Database memberikan data yang diminta kepada server.
- Server mengirimkan kembali data ke client dalam format JSON.
- Client menampilkan data tersebut menjadi tampilan yang menarik di layar pengguna.
Mengapa data tidak langsung dikirim dari database ke frontend saja? Berikut alasannya:
- Keamanan: Jika frontend langsung terhubung ke database, siapa pun bisa mengakses atau meretas data.
- Business Logic: Aturan bisnis perlu dijalankan di server agar data tetap valid.
- Performa: Backend dapat melakukan optimasi dan caching data sebelum dikirim ke frontend.
- Integrasi: Backend memudahkan koneksi ke berbagai layanan lain seperti pembayaran atau pengiriman email.
3.1.3 Kenapa Express.js?
Sekarang setelah Anda memahami konsep backend, pertanyaan berikutnya adalah: bagaimana cara membangunnya dengan efisien? Di sinilah Express.js berperan.
Untuk membuat backend menggunakan Node.js, kita memerlukan framework yang membantu mempercepat proses pengembangan. Framework ibarat peralatan dapur lengkap yang sudah menyiapkan berbagai alat agar kita tidak perlu membuat semuanya dari awal.
Express.js adalah framework backend paling populer untuk Node.js. Framework ini banyak digunakan karena:
- Performa tinggi: Ringan, cepat, dan efisien.
- Middleware system: Mudah menambahkan fungsi tambahan seperti autentikasi atau logging.
- Routing sederhana: Memudahkan pembuatan endpoint API.
- Ekosistem besar: Banyak plugin dan library yang siap digunakan.
- Dokumentasi lengkap: Mudah dipelajari dan didukung komunitas aktif.
Fun Fact: Express.js digunakan oleh perusahaan besar seperti Uber, IBM, dan Accenture untuk membangun sistem backend mereka!
Kesimpulan
Backend development berperan penting sebagai "otak" dari sebuah aplikasi. Ia bertugas mengelola logika bisnis, menyimpan dan mengambil data dari database, serta memastikan komunikasi antara frontend dan server berjalan dengan aman dan efisien.
Seorang backend developer perlu memahami bagaimana server bekerja, cara membuat API, serta bagaimana data dikirim dan diterima melalui request dan response.
Dengan memahami dasar backend development, Anda memiliki fondasi yang kuat untuk membangun sistem yang efisien, terstruktur, dan dapat diandalkan. Tahapan selanjutnya adalah mempelajari bagaimana mendesain API yang baik agar frontend dapat berinteraksi dengan server secara konsisten dan mudah dipahami.
3.2 Prinsip Desain REST API
Sebelum membangun backend yang tangguh, penting bagi Anda untuk memahami bagaimana sistem komunikasi antar aplikasi bekerja dengan cara yang efisien, terstruktur, dan mudah dipahami. Di dunia pengembangan web modern, salah satu standar yang paling banyak digunakan untuk membangun layanan backend adalah REST API.
REST API memungkinkan frontend dan backend untuk "berbicara" dalam bahasa yang sama, sehingga aplikasi dapat saling bertukar data dengan lancar.
3.2.1 Apa Itu REST?
Sebelum masuk ke praktik, mari kita pahami dulu konsep dasarnya. REST (Representational State Transfer) adalah arsitektur atau seperangkat aturan dalam membangun web service.
Anda bisa membayangkan REST seperti "tata bahasa" komunikasi antar aplikasi, agar keduanya bisa saling mengerti tanpa kebingungan.
REST API menggunakan HTTP methods (seperti GET, POST, PUT, PATCH, DELETE) untuk melakukan operasi CRUD yaitu empat operasi dasar yang hampir selalu ada di setiap aplikasi.
3.2.2 Apa Itu CRUD?
CRUD merupakan singkatan dari empat jenis operasi dasar yang dilakukan pada data:
- Create → Membuat data baru (contoh: daftar akun baru).
- Read → Mengambil data (contoh: menampilkan daftar produk).
- Update → Mengubah data yang sudah ada (contoh: memperbarui profil).
- Delete → Menghapus data (contoh: menghapus postingan).
3.2.3 Prinsip REST API
Setelah memahami dasar REST, sekarang mari kita bahas empat prinsip utama REST API yang menjadi fondasi dalam membangun API yang baik dan profesional.
1. Stateless (Tanpa Status)
Maknanya: Setiap request dari client ke server harus mandiri, artinya membawa semua informasi yang diperlukan tanpa mengandalkan data dari request sebelumnya. Server tidak menyimpan status atau informasi pengguna antar permintaan.
Analogi: Bayangkan Anda memesan makanan di restoran. Setiap kali Anda memesan, Anda harus menyebutkan nomor meja Anda. Kasir tidak akan mengingat pesanan Anda sebelumnya - inilah yang disebut stateless.
Contoh Salah (Stateful):
// Salah - Server nyimpen state
let currentUser = null;
app.post("/login", (req, res) => {
currentUser = req.body.username; // Nyimpen di variabel global
});
app.get("/profile", (req, res) => {
res.json(currentUser); // Ambil dari variabel global
});
Mengapa salah? Jika ada 1000 pengguna yang login secara bersamaan, variabel currentUser akan saling menimpa antar pengguna.
Contoh Benar (Stateless):
// Benar - Setiap request bawa token sendiri
app.get("/profile", authenticateToken, (req, res) => {
// User info diambil dari token yang dikirim di setiap request
res.json(req.user);
});
Setiap request membawa token (seperti ID card) yang menandakan identitas pengguna. Server cukup memverifikasi token tersebut tanpa menyimpan status.
2. Uniform Interface (Antarmuka yang Konsisten)
Maknanya: Endpoint API harus konsisten dan mudah ditebak, sehingga developer lain dapat memahami struktur API tanpa membaca dokumentasi panjang.
Contoh Konsisten (RESTful):
// Mudah dipahami
GET /products // Ambil semua produk
GET /products/123 // Ambil produk ID 123
POST /products // Buat produk baru
PUT /products/123 // Update produk ID 123
DELETE /products/123 // Hapus produk ID 123
Contoh Tidak Konsisten (Non-RESTful):
// Membingungkan!
GET /getAllProducts
GET /getProduct?id=123
POST /createNewProduct
POST /updateProduct
POST /deleteProduct
Perhatikan perbedaannya. Endpoint RESTful jauh lebih sederhana, jelas, dan mudah diingat.
3. Resource-Based (Berbasis Resource)
Maknanya: Setiap URL dalam REST API harus merepresentasikan resource (benda/objek), bukan aksi (perintah).
Analogi: URL itu seperti alamat rumah (noun), bukan perintah (verb).
Contoh Benar (Resource-Based):
// URL nunjukin "apa" (resource)
/users // Resource: users
/products // Resource: products
/orders // Resource: orders
Contoh Salah (Action-Based):
// URL nunjukin "lakukan apa" (action)
/getUsers
/createProduct
/deleteOrder
3.2.4 HTTP Status Codes (Kode Status HTTP)
Maknanya: Setiap response dari server harus memiliki status code yang sesuai agar client dapat memahami hasil permintaan dengan tepat. Berikut kode yang paling umum digunakan.
Contoh Penggunaan Kode Status:
// Berhasil ambil data
res.status(200).json({ data: products });
// Berhasil buat data baru
res.status(201).json({ message: "Product created!" });
// Data nggak lengkap
res.status(400).json({ error: "Name is required" });
// Produk nggak ditemukan
res.status(404).json({ error: "Product not found" });
Tips: Jangan gunakan status code 200 untuk semua response! Gunakan kode yang tepat agar frontend dapat menanganinya dengan benar.
Kesimpulan
REST API adalah standar arsitektur yang digunakan untuk membangun komunikasi antara client dan server dengan cara yang sederhana, konsisten, dan mudah dipahami. Prinsip utamanya meliputi penggunaan HTTP methods (GET, POST, PUT, DELETE), struktur endpoint yang jelas, serta format data yang umum digunakan seperti JSON.
Dengan mengikuti prinsip REST, API menjadi lebih mudah di-maintain, diintegrasikan, dan digunakan oleh berbagai sistem.
Penerapan prinsip desain REST API tidak hanya mempermudah kerja tim backend, tetapi juga meningkatkan kolaborasi dengan tim frontend. Dengan API yang terstruktur dan terdokumentasi baik, proses pengembangan aplikasi menjadi lebih efisien dan minim kesalahan.
3.3 Express.js: Framework Backend
3.3.1 Instalasi Express
Sebelum mulai membangun REST API, langkah pertama yang perlu dilakukan adalah menyiapkan lingkungan kerja dan menginstal framework Express.js. Express adalah framework Node.js yang membantu Anda membuat server dan endpoint API dengan lebih cepat dan efisien.
Berikut langkah-langkah untuk memulai proyek Express dari nol:
Langkah 1: Membuat Folder Project
Langkah pertama adalah menyiapkan wadah untuk menyimpan seluruh file proyek. Buka terminal atau command prompt, lalu jalankan perintah berikut:
# Bikin folder baru
mkdir my-first-api
cd my-first-api
Perintah mkdir digunakan untuk membuat folder baru bernama my-first-api, sedangkan cd berfungsi untuk masuk ke dalam folder tersebut.
Selanjutnya, inisialisasi proyek Node.js dengan perintah:
# Inisialisasi project Node.js
npm init -y
# Perintah npm init -y akan bikin file package.json otomatis.
Perintah ini akan membuat file package.json secara otomatis. File tersebut berisi metadata proyek seperti nama, versi, dependensi, dan informasi lain yang dibutuhkan Node.js untuk menjalankan aplikasi Anda.
Langkah 2: Instalasi Express
Setelah folder proyek siap, saatnya menginstal Express beserta dependensi yang dibutuhkan. Masukkan perintah berikut di terminal:
# Install Express
npm install express
Kemudian, tambahkan beberapa library tambahan yang sering digunakan untuk pengembangan API:
# Install dependencies tambahan
npm install mongoose dotenv cors morgan
Agar proses pengembangan lebih efisien, kita juga akan memasang Nodemon, yaitu tool yang secara otomatis merestart server setiap kali ada perubahan pada kode:
# Install Nodemon untuk development (auto-restart server)
npm install --save-dev nodemon
Penjelasan Dependencies
Agar lebih memahami fungsi dari setiap library yang diinstal, berikut penjelasannya secara singkat:
- express → Framework web utama untuk membuat REST API.
- mongoose → Library yang mempermudah koneksi dan manipulasi data di MongoDB.
- dotenv → Digunakan untuk membaca variabel lingkungan dari file .env agar konfigurasi lebih aman.
- cors → Mengizinkan akses API dari domain lain (Cross-Origin Resource Sharing).
- morgan → Logger untuk menampilkan data request di terminal, sangat berguna untuk debugging.
- nodemon → Menjalankan server secara otomatis setiap kali ada perubahan kode, tanpa perlu restart manual.
3.3.2 Hello Digiers dengan Express
Setelah berhasil menginstal Express dan menyiapkan lingkungan kerja, saatnya membuat API pertama Anda! Bagian ini akan menjadi langkah awal untuk memahami bagaimana server bekerja dalam menerima dan merespons permintaan dari pengguna.
Kita akan membuat server sederhana yang menampilkan pesan "Hello, Digiers!" saat diakses melalui browser.
Langkah-langkah Membuat API Pertama
Ikuti langkah-langkah berikut untuk membuat server Express sederhana:
Langkah 1: Membuat File Server
Pertama, buat file baru dengan nama server.js. File ini akan berfungsi sebagai titik awal (entry point) untuk menjalankan server Anda. Ketik kode berikut di dalam file tersebut:
// server.js
const express = require("express");
const app = express();
const PORT = 3000;
// Route pertama Anda!
app.get("/", (req, res) => {
res.send("Hello, Digiers! API ku jalan nih!");
});
// Jalankan server
app.listen(PORT, () => {
console.log(`Server berjalan di http://localhost:${PORT}`);
console.log("Buka browser dan akses URL di atas!");
});
Penjelasan Kode
Agar lebih mudah dipahami, berikut penjelasan dari setiap bagian kode:
- require("express") → Mengimpor library Express agar bisa digunakan dalam proyek.
- express() → Membuat instance aplikasi Express baru, disimpan dalam variabel app.
- app.get("/", ...) → Membuat route untuk menangani permintaan (request) dengan metode GET pada path root ("/").
- res.send(...) → Mengirimkan response berupa teks ke client (dalam hal ini, browser).
- app.listen(3000, ...) → Menjalankan server pada port 3000. Saat berhasil dijalankan, akan muncul pesan di terminal bahwa server aktif.
Langkah 2: Menjalankan Server
Setelah file server.js siap, jalankan server dengan perintah berikut di terminal:
node server.js
Jika tidak ada error, terminal akan menampilkan pesan seperti ini: Server berjalan di http://localhost:3000
Langkah : Mengakses API di Browser
Sekarang, buka browser dan ketik alamat berikut di kolom URL: localhost:3000
Selamat! Anda baru saja membuat API pertama dengan Express.js! Langkah kecil ini menjadi fondasi penting untuk memahami bagaimana server berkomunikasi dengan client.
Di tahap berikutnya, kita akan mulai membuat route yang lebih kompleks dan belajar bagaimana mengelola data menggunakan database MongoDB.
3.3.3 Membuat Server Express Pertama
Bagian ini bertujuan membantu Anda membangun server Express pertama secara mandiri. Melalui latihan ini, Anda akan memahami bagaimana sebuah server menerima request, mengirim response, serta bagaimana struktur dasar aplikasi backend dimulai dari sebuah server sederhana.
Express adalah salah satu framework backend paling populer di Node.js karena sederhana, fleksibel, dan mudah dipelajari. Dengan membuat server dasar, Anda dapat memahami bagaimana alur komunikasi antara client dan server berlangsung. Latihan ini akan membawa Anda dari pembuatan file, penulisan kode, hingga menjalankan server di browser.
Perhatikan langkah-langkahnya berikut ini:
1. Untuk memulai, ketik komentar instruksi berikut pada file server Anda agar menjadi pedoman dalam menulis kode:
// Buat Express server sederhana yang berjalan di port 3000
// dengan route GET / yang return "Hello Digiers"
2. Buat file baru bernama server.js di folder project.
Buat sebuah file baru bernama server.js di folder project Anda. File ini akan menjadi titik awal (entry point) dari server Express.
3. Ketik komentar instruksi
Masukkan komentar di atas sebagai pedoman sebelum mulai menulis kode.
4. Tulis kode server Express
Anda dapat menulis server sederhana seperti berikut:
const express = require("express");
const app = express();
const PORT = 3000;
app.get("/", (req, res) => {
res.send("Hello, World!");
});
app.listen(PORT, () => {
console.log(`Server berjalan di http://localhost:${PORT}`);
});
5. Jalankan server
Gunakan perintah berikut di terminal untuk menjalankan server:
node server.js
6. Akses server via browser
Buka browser dan ketik alamat berikut http://localhost:3000
Hasil Akhir:
Jika semua langkah dilakukan dengan benar, maka browser akan menampilkan pesan "Hello, Digiers!". Ini menandakan bahwa server Express pertama Anda sudah aktif dan berhasil diakses melalui browser.
Tips:
- Jika port 3000 sudah dipakai aplikasi lain, ubah ke port berbeda, misalnya 3001.
- Pastikan Node.js dan Express sudah terpasang sebelum menjalankan server
3.3.4 Struktur Project Express yang Baik
Sebelum masuk ke tahap pengembangan yang lebih kompleks, penting untuk memahami bagaimana cara menata struktur folder dalam project Express.js. Struktur yang rapi tidak hanya membuat kode mudah dibaca, tetapi juga memudahkan proses pengembangan, perawatan, dan kolaborasi dalam tim.
Bayangkan Anda membangun rumah: tanpa rancangan yang jelas, setiap bagian bisa saling tumpang tindih dan sulit diperbaiki di kemudian hari. Prinsip yang sama berlaku untuk penataan proyek backend Anda.
Berikut contoh struktur folder yang umum digunakan pada project Express:
Penjelasan Singkat Tiap Folder
- config/: Menyimpan pengaturan aplikasi, seperti konfigurasi koneksi database atau variabel lingkungan lainnya.
- controllers/: Berisi fungsi-fungsi logika bisnis yang menentukan apa yang harus dilakukan ketika suatu endpoint diakses.
- models/: Menyimpan definisi struktur data atau schema yang digunakan untuk berinteraksi dengan database (biasanya menggunakan Mongoose).
- routes/: Tempat mendefinisikan endpoint API, yaitu jalur yang dapat diakses client untuk berinteraksi dengan server.
- middleware/: Berisi fungsi yang berjalan di antara request dan response, seperti pencatatan aktivitas (logging) atau penanganan kesalahan (error handling).
- server.js: File utama atau entry point yang menjalankan server Express.
- package.json: Berisi informasi proyek, daftar dependensi, serta scripts untuk menjalankan aplikasi.
- .env dan .gitignore: .env menyimpan variabel lingkungan seperti URL database atau API key. .gitignore memastikan file sensitif (seperti .env atau node_modules) tidak ikut dikirim ke Git.
Mengapa harus dipisahkan?
Menata file dan folder berdasarkan fungsi memiliki banyak manfaat, antara lain:
- Separation of Concerns → Setiap bagian kode memiliki tanggung jawab yang jelas.
- Maintainability → Developer mudah menemukan dan memperbaiki kode tanpa bingung.
- Scalability → Proyek mudah dikembangkan ketika ingin menambah fitur baru.
- Team Collaboration → Beberapa orang bisa mengerjakan bagian berbeda tanpa konflik antar file.
Dengan struktur yang baik sejak awal, Anda akan lebih mudah mengelola proyek seiring dengan bertambahnya fitur dan kompleksitas aplikasi. Jadi, sebelum mulai menulis banyak baris kode, pastikan pondasi proyek Anda tertata rapi terlebih dahulu.
3.3.5 Auto-Restart Server dengan Nodemon
Saat Anda sedang mengembangkan aplikasi menggunakan Express, tentu sering melakukan perubahan pada kode. Namun, setiap kali ada perubahan, Anda harus menghentikan server secara manual (Ctrl+C) dan menjalankannya kembali. Proses ini cukup merepotkan dan memakan waktu.
Untuk mengatasinya, kita bisa menggunakan Nodemon sebuah tool yang secara otomatis akan me-restart server setiap kali ada perubahan pada file proyek.
Langkah-langkah Instalasi dan Penggunaan Nodemon
Langkah 1: Edit file package.json
Tambahkan script baru agar lebih mudah menjalankan server menggunakan Nodemon.
{
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
}
}
Penjelasan:
- "start" → digunakan untuk menjalankan server secara normal.
- "dev" → digunakan untuk menjalankan server dalam mode pengembangan menggunakan Nodemon.
Langkah 2: Jalankan server dengan perintah berikut
npm run dev
Setelah dijalankan, Nodemon akan otomatis memantau perubahan file di dalam proyek Anda. Setiap kali Anda menyimpan file (Ctrl+S), server akan restart secara otomatis tanpa perlu dihentikan dan dijalankan ulang secara manual.
Kesimpulan
Express.js adalah framework backend berbasis Node.js yang mempermudah pengembangan REST API dengan sintaks yang sederhana, fleksibel, dan efisien. Framework ini menyediakan berbagai fitur bawaan seperti routing, middleware, dan error handling yang membantu developer membangun aplikasi server dengan struktur yang rapi dan mudah dikelola.
Dengan Express.js, pengembang dapat fokus pada logika bisnis tanpa harus menulis kode server dari nol. Kemudahan integrasi dengan berbagai library dan dukungan komunitas yang besar menjadikan Express.js pilihan utama untuk pengembangan aplikasi web modern berbasis JavaScript.
Komentar
Posting Komentar