Memulai dengan Node.js, Express, dan React: Membangun API yang Andal

Hari ini, kita akan menyelami dunia Node.js, Express, dan React yang menarik. Baik Anda seorang programmer berpengalaman atau baru memulai, postingan blog ini akan memandu Anda membangun API yang kuat menggunakan teknologi populer ini. Kita akan membahas dasar-dasarnya, menelusuri pengaturan lingkungan Anda, dan menjelajahi bagaimana alat-alat ini bekerja bersama. Selain itu, kami akan menunjukkan kepada Anda bagaimana Apidog dapat membuat hidup Anda lebih mudah. Jadi, ambil camilan coding favorit Anda, dan mari kita mulai!

Mengapa Node.js, Express, dan React?

Sebelum kita masuk ke hal-hal yang lebih detail, mari kita bicara tentang mengapa Anda harus peduli dengan Node.js, Express, dan React.

Node.js

Node.js adalah lingkungan runtime yang memungkinkan Anda menjalankan JavaScript di sisi server. Ini dibangun di atas mesin V8 JavaScript milik Chrome, membuatnya cepat dan efisien. Dengan Node.js, Anda dapat membangun aplikasi jaringan yang dapat diskalakan, menangani banyak permintaan secara bersamaan, dan menggunakan satu bahasa pemrograman (JavaScript) untuk pengembangan sisi klien dan server.

Express

Express adalah kerangka kerja aplikasi web Node.js yang minimal dan fleksibel. Ini menyediakan serangkaian fitur yang kuat untuk membangun aplikasi web dan seluler. Dengan Express, Anda dapat dengan mudah menyiapkan server, mengelola rute, dan menangani permintaan dan respons HTTP. Ini adalah tulang punggung dari banyak aplikasi Node.js dan sangat cocok dengan React.

React

React adalah pustaka JavaScript untuk membangun antarmuka pengguna. Ini dikelola oleh Facebook dan komunitas pengembang dan perusahaan individu. React memungkinkan Anda membuat komponen UI yang dapat digunakan kembali dan mengelola status aplikasi Anda secara efisien. Ketika dikombinasikan dengan Node.js dan Express, Anda dapat membangun aplikasi web dinamis dan responsif dengan mudah.

Menyiapkan Lingkungan Pengembangan Anda

Untuk memulai, Anda perlu menyiapkan lingkungan pengembangan Anda. Berikut adalah panduan langkah demi langkah:

Instal Node.js: Kunjungi situs web Node.js dan unduh versi terbaru. Ikuti instruksi instalasi untuk sistem operasi Anda.

Instal npm: npm (Node Package Manager) sudah termasuk dalam paket Node.js. Anda dapat memeriksa apakah itu sudah terinstal dengan menjalankan npm -v di terminal Anda.

Siapkan Proyek Baru: Buat direktori baru untuk proyek Anda dan navigasikan ke sana di terminal Anda. Inisialisasi proyek Node.js baru dengan menjalankan npm init. Ikuti petunjuk untuk membuat file package.json.

Instal Express: Jalankan npm install express untuk menginstal Express.

Instal React: Anda akan menggunakan Create React App untuk menyiapkan proyek React baru. Jalankan npx create-react-app client untuk membuat aplikasi React baru di direktori client.

Instal Apidog: Untuk membuat pengembangan dan pengujian API lebih mudah, kita akan menggunakan Apidog. Anda dapat mengunduhnya secara gratis dari situs web Apidog.

Membangun API Anda dengan Node.js dan Express

Sekarang lingkungan Anda sudah siap, mari kita bangun API sederhana menggunakan Node.js dan Express.

Langkah 1: Siapkan Server Express

Buat file baru bernama server.js di direktori root proyek Anda. Tambahkan kode berikut untuk menyiapkan server Express dasar:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Jalankan node server.js di terminal Anda. Anda akan melihat "Server running at http://localhost:3000". Buka browser Anda dan navigasikan ke http://localhost:3000 untuk melihat "Hello World!".

Langkah 2: Buat Rute API

Selanjutnya, mari kita buat beberapa rute API. Di file server.js Anda, tambahkan kode berikut untuk membuat API sederhana yang mengembalikan daftar pengguna:

const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
  { id: 3, name: 'Sam Smith' }
];

app.get('/api/users', (req, res) => {
  res.json(users);
});

Sekarang, ketika Anda menavigasi ke http://localhost:3000/api/users, Anda akan melihat respons JSON dengan daftar pengguna.

Langkah 3: Hubungkan ke Database

Untuk membuat API kita lebih dinamis, mari kita hubungkan ke database. Kita akan menggunakan MongoDB untuk contoh ini. Pertama, Anda perlu menginstal mongoose dengan menjalankan npm install mongoose.

Buat file baru bernama db.js dan tambahkan kode berikut untuk terhubung ke MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

Di file server.js Anda, require file db.js untuk terhubung ke database:

const db = require('./db');

Sekarang, mari kita buat model Mongoose untuk pengguna kita. Buat file baru bernama user.js dan tambahkan kode berikut:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String
});

const User = mongoose.model('User', userSchema);

module.exports = User;

Di file server.js Anda, perbarui rute /api/users untuk mengambil pengguna dari database:

const User = require('./user');

app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

Anda sekarang dapat menambah, memperbarui, dan menghapus pengguna dari database MongoDB Anda, dan API Anda akan secara dinamis mencerminkan perubahan ini.

Mengintegrasikan React dengan Node.js dan Express

Sekarang kita sudah menyiapkan API kita, mari kita integrasikan dengan frontend React.

Langkah 1: Siapkan Proxy

Untuk membuat permintaan ke API kita dari frontend React, kita akan menyiapkan proxy. Buka file client/package.json dan tambahkan baris berikut:

"proxy": "http://localhost:3000"

Langkah 2: Ambil Data dari API

Di aplikasi React Anda, mari kita buat komponen yang mengambil data dari API dan menampilkannya. Buka file client/src/App.js dan ganti isinya dengan kode berikut:

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div className="App">
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Jalankan npm start di direktori client untuk memulai server pengembangan React. Anda akan melihat daftar pengguna yang diambil dari API Anda ditampilkan di halaman.

💡

Untuk membuat pengembangan API Anda lebih lancar, unduh Apidog secara gratis hari ini. Dengan Apidog, Anda akan memiliki semua alat yang Anda butuhkan untuk menguji, mendokumentasikan, dan mengelola API Anda di satu tempat. Selamat membuat kode!

button

Menguji API Anda dengan Apidog

Sekarang Anda memiliki API yang berfungsi dan frontend React, saatnya untuk menguji API Anda. Apidog adalah alat yang fantastis untuk ini.

Langkah 1: Buka Apidog dan buat permintaan baru.

Langkah 2: Di editor pengujian, masukkan URL endpoint API Anda, pilih metode HTTP, dan tambahkan header, parameter, atau data body yang Anda butuhkan. Misalnya, Anda dapat menguji rute yang mengembalikan pesan sederhana yang kita buat sebelumnya:

Langkah 3: Klik tombol Kirim dan lihat hasil pengujian Anda. Anda akan melihat kode status, waktu respons, dan body respons API Anda. Misalnya, Anda akan melihat sesuatu seperti ini:

Apidog adalah alat yang hebat untuk menguji API Anda, karena membantu Anda memastikan kualitas, keandalan, dan kinerja layanan web Anda. Ini juga menghemat waktu dan tenaga Anda, karena Anda tidak perlu menulis kode apa pun atau menginstal perangkat lunak apa pun untuk menguji API Anda. Anda cukup menggunakan browser Anda dan menikmati antarmuka dan fitur Apidog yang ramah pengguna.

Kesimpulan

Selamat! Anda telah berhasil membangun API yang kuat menggunakan Node.js, Express, dan React. Anda telah mempelajari cara menyiapkan lingkungan pengembangan Anda, membuat rute API, terhubung ke database, dan mengintegrasikan React dengan backend Anda. Selain itu, Anda telah menemukan bagaimana Apidog dapat menyederhanakan pengujian API Anda.

Ingat, ini hanyalah permulaan. Ada banyak cara untuk memperluas dan meningkatkan aplikasi Anda. Anda dapat menambahkan otentikasi, menerapkan rute yang lebih kompleks, dan meningkatkan frontend Anda dengan fitur tambahan.