Studi Kasus #12: Aplikasi Wisata Indonesia – Menghubungkan Frontend dengan Backend (Axios)

Halo, calon full-stack developer! 

Di Studi Kasus #11, kita telah membuat proyek React dengan Vite dan mengatur routing. Sekarang saatnya menghubungkan frontend dengan backend yang sudah kita bangun. Kita akan menggunakan axios untuk melakukan HTTP request ke API. Pada tahap ini, kita akan menguji koneksi dengan mengambil data dari API (misalnya data kategori atau destinasi) dan menampilkannya di console browser. Ini akan menjadi fondasi untuk menampilkan data di halaman nanti.

Mari kita mulai!

Langkah 1: Instalasi Axios

Buka terminal di folder frontend dan jalankan perintah berikut:

npm install axios

Setelah instalasi selesai, kita siap menggunakannya.

Langkah 2: Membuat Service untuk API

Kita akan membuat file konfigurasi axios di src/services/api.js (seperti yang sudah disinggung di tutorial sebelumnya). Buat file tersebut dan isi dengan kode berikut:

import axios from 'axios';

// Buat instance axios dengan baseURL mengarah ke backend
const API = axios.create({
  baseURL: 'http://localhost:3000/api', // pastikan backend berjalan di port 3000
});

// Interceptor untuk menambahkan token JWT jika ada (nanti digunakan untuk admin)
API.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default API;

Penjelasan:

• baseURL diisi dengan alamat backend kita. Pastikan backend berjalan di http://localhost:3000 dan endpoint API memiliki prefix /api (sesuai dengan setup kita).
• Interceptor akan secara otomatis menambahkan header Authorization jika ada token di localStorage. Ini akan berguna saat kita mengakses rute yang dilindungi.

📡 Langkah 3: Membuat Fungsi untuk Mengambil Data

Selanjutnya, kita buat fungsi-fungsi yang akan memanggil endpoint tertentu. Sebagai contoh, kita akan mengambil data kategori. Buat file src/services/categoryService.js:

import API from './api';

export const getCategories = async () => {
  try {
    const response = await API.get('/categories');
    return response.data;
  } catch (error) {
    console.error('Gagal mengambil kategori:', error);
    throw error;
  }
};

export const getCategoryById = async (id) => {
  try {
    const response = await API.get(`/categories/${id}`);
    return response.data;
  } catch (error) {
    console.error('Gagal mengambil kategori:', error);
    throw error;
  }
};

// Bisa ditambahkan fungsi lain sesuai kebutuhan

Kita juga bisa membuat service serupa untuk destinations, accommodations, dll. Namun untuk tes awal, kita cukup menggunakan kategori.

🧪 Langkah 4: Menguji di Halaman Utama

Sekarang kita akan memanggil fungsi getCategories di komponen Home.jsx dan melihat hasilnya di console.

Buka src/pages/Home.jsx dan ubah menjadi:

import { useEffect } from 'react';
import { getCategories } from '../services/categoryService';

const Home = () => {
  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const data = await getCategories();
        console.log('Data kategori:', data);
      } catch (error) {
        console.error('Error:', error);
      }
    };

    fetchCategories();
  }, []);

  return (
    <div>
      <h1>Halaman Utama</h1>
      <p>Cek console untuk melihat data dari API.</p>
    </div>
  );
};

export default Home;

Penjelasan:

• useEffect digunakan untuk menjalankan efek samping (fetch data) saat komponen pertama kali dimuat.
• Kita memanggil getCategories() dan mencetak hasilnya ke console.
• Jika terjadi error, kita tangkap dan tampilkan di console.

Langkah 5: Menjalankan dan Melihat Hasil

Pastikan backend sudah berjalan (di folder backend, jalankan node app.js atau nodemon app.js). Kemudian di folder frontend, jalankan:

npm run dev

Buka browser ke http://localhost:5173 dan buka console (tekan F12, pilih tab Console). Jika koneksi berhasil, akan terlihat data kategori dalam bentuk array JSON. Contoh:

Data kategori: [
  { id: 1, name: "Wisata Alam", slug: "wisata-alam", description: "...", created_at: "..." },
  { id: 2, name: "Wisata Budaya", slug: "wisata-budaya", description: "...", created_at: "..." }
]

Jika terjadi error, misalnya ERR_CONNECTION_REFUSED, pastikan backend berjalan dan CORS sudah diatur dengan benar (kita sudah pakai cors() di backend).

💡 Tips: Jika muncul error CORS, periksa middleware cors di backend. Pastikan sudah menggunakan app.use(cors()).

Langkah 6: Membuat Service untuk Destinasi (Contoh Lain)

Untuk latihan, kita juga bisa membuat service untuk destinasi. Buat file src/services/destinationService.js:

import API from './api';

export const getDestinations = async () => {
  try {
    const response = await API.get('/destinations');
    return response.data;
  } catch (error) {
    console.error('Gagal mengambil destinasi:', error);
    throw error;
  }
};

export const getDestinationById = async (id) => {
  try {
    const response = await API.get(`/destinations/${id}`);
    return response.data;
  } catch (error) {
    console.error('Gagal mengambil destinasi:', error);
    throw error;
  }
};

Kemudian di komponen lain, kita bisa memanggilnya dengan cara yang sama.

📁 Struktur Folder Services

Sekarang folder src/services akan berisi:

services/
├── api.js
├── categoryService.js
├── destinationService.js
├── accommodationService.js   (nanti)
├── transportationService.js  (nanti)
└── authService.js            (nanti)

Pemisahan ini membuat kode lebih terorganisir.

Menguji dengan Data Destinasi

Ubah Home.jsx untuk mencoba mengambil destinasi juga (atau ganti dengan destinasi). Misalnya:

import { useEffect } from 'react';
import { getDestinations } from '../services/destinationService';

const Home = () => {
  useEffect(() => {
    const fetchDestinations = async () => {
      try {
        const data = await getDestinations();
        console.log('Data destinasi:', data);
      } catch (error) {
        console.error('Error:', error);
      }
    };

    fetchDestinations();
  }, []);

  return ( ... );
};

Jika backend sudah memiliki data destinasi, akan tampil di console.

Langkah Selanjutnya

Di Studi Kasus #13, kita akan mulai menampilkan data di halaman dengan membuat komponen Card dan menggunakan state untuk menyimpan data. Kita akan membuat halaman daftar destinasi yang menarik.

Pastikan semua service berfungsi dengan baik. Jika ada kendala, periksa kembali URL base, pastikan backend menyala, dan periksa console untuk pesan error.

Sampai jumpa di tutorial berikutnya!

---

Ditulis dengan ❤️ untuk para pengembang yang ingin membangun aplikasi wisata.