NodeJS #15: Mengambil Data dari API Eksternal dengan Fetch

byFerdian Rahabista -
0

🍭 NodeJS #15: Mengambil Data dari API Eksternal dengan Fetch

Halo, calon developer web! 👋

Di tutorial sebelumnya (NodeJS #14) kita sudah belajar membuat API sendiri. Sekarang saatnya kita belajar mengambil data dari API milik orang lain (API eksternal). Ini sangat penting karena banyak aplikasi membutuhkan data dari luar, seperti cuaca, berita, harga saham, dan lain-lain. Kita akan menggunakan fetch, sebuah fungsi bawaan JavaScript yang juga tersedia di Node.js versi 18 ke atas. Yuk, kita pelajari! 🚀

🧐 Apa Itu Fetch?

fetch adalah fungsi yang digunakan untuk melakukan HTTP request (seperti GET, POST) dari JavaScript. Dulu, di Node.js kita perlu menginstal library tambahan seperti axios atau node-fetch. Tapi sejak Node.js versi 18, fetch sudah menjadi fitur bawaan, jadi kita bisa langsung menggunakannya tanpa instalasi apa pun. Keren, kan?

Fetch mengembalikan Promise, sehingga kita perlu menggunakan .then() atau async/await untuk menangani responsnya.

🌍 Memilih API Publik untuk Dicoba

Kita akan menggunakan dua API publik yang gratis dan mudah:

  1. JSONPlaceholder – API palsu untuk testing, menyediakan data contoh seperti pengguna, postingan, dll. URL: https://jsonplaceholder.typicode.com/users
  2. OpenWeatherMap – API cuaca. Kamu perlu mendaftar (gratis) untuk mendapatkan API key. Kita akan gunakan yang ini agar lebih menarik.

Untuk OpenWeatherMap, daftar di openweathermap.org dan dapatkan API key. Atau jika tidak mau repot, cukup gunakan JSONPlaceholder untuk latihan.

💡 Tips: Simpan API key di environment variable, jangan hardcode di kode. Tapi untuk pembelajaran, kita bisa hardcode dulu.

📦 Proyek Baru: Cuaca Sederhana

Mari buat proyek baru. Buat folder api-eksternal, inisialisasi npm, dan instal express (kita akan tampilkan data di web).

mkdir api-eksternal
cd api-eksternal
npm init -y
npm install express

Sekarang buat file app.js.

🔄 Mengambil Data dengan Fetch (Async/Await)

Kita akan buat route /cuaca yang mengambil data cuaca dari OpenWeatherMap untuk kota tertentu (misal Jakarta). Tapi sebelumnya, pastikan kamu punya API key.

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

// Ganti dengan API key kamu
const API_KEY = '1234567890abcdef'; 
const kota = 'Jakarta';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${kota}&appid=${API_KEY}&units=metric`;

app.get('/cuaca', async (req, res) => {
  try {
    const response = await fetch(url);
    const data = await response.json();

    if (response.ok) {
      // Kirim data sebagai JSON (atau bisa juga render HTML)
      res.json(data);
    } else {
      res.status(response.status).json({ error: data.message });
    }
  } catch (error) {
    res.status(500).json({ error: 'Terjadi kesalahan mengambil data' });
  }
});

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

Penjelasan:

  • await fetch(url) – mengirim request GET ke API.
  • await response.json() – mengubah respons menjadi JSON.
  • response.ok – bernilai true jika status code 200-299.
  • Jika gagal, kita kirim status dari API eksternal.
  • Gunakan try-catch untuk menangani error jaringan.

Jalankan dengan node app.js dan akses http://localhost:3000/cuaca. Jika berhasil, kamu akan melihat data cuaca Jakarta dalam format JSON.

⚠️ Catatan: API key OpenWeatherMap mungkin butuh waktu beberapa menit untuk aktif setelah registrasi. Jika gagal, coba pakai JSONPlaceholder dulu.

🌐 Contoh dengan JSONPlaceholder

Ganti route dengan mengambil data pengguna dari JSONPlaceholder:

app.get('/users', async (req, res) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    res.json(users);
  } catch (error) {
    res.status(500).json({ error: 'Gagal mengambil data' });
  }
});

Akses /users dan lihat daftar pengguna palsu.

📄 Menampilkan Data di Halaman HTML (dengan EJS)

Tentu lebih keren jika data ditampilkan dalam halaman HTML yang rapi. Mari gunakan EJS untuk merender daftar pengguna.

Instal EJS: npm install ejs

Set view engine di app.js:

app.set('view engine', 'ejs');

Buat folder views dan file views/users.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Pengguna</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>Daftar Pengguna dari API</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>Nama</th>
            <th>Email</th>
            <th>Kota</th>
        </tr>
        <% users.forEach(user => { %>
        <tr>
            <td><%= user.id %></td>
            <td><%= user.name %></td>
            <td><%= user.email %></td>
            <td><%= user.address.city %></td>
        </tr>
        <% }); %>
    </table>
</body>
</html>

Kemudian ubah route /users untuk merender file EJS:

app.get('/users', async (req, res) => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    res.render('users', { users });
  } catch (error) {
    res.status(500).send('Gagal mengambil data');
  }
});

Sekarang akses /users, data akan tampil dalam tabel HTML yang cantik.

🔄 Alternatif: Menggunakan Axios

Meskipun fetch sudah bawaan, banyak developer lebih suka menggunakan axios karena sintaksnya lebih sederhana dan penanganan error lebih mudah. Axios perlu diinstal:

npm install axios

Contoh penggunaan axios (sama dengan fetch):

const axios = require('axios');

app.get('/users-axios', async (req, res) => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    res.render('users', { users: response.data });
  } catch (error) {
    res.status(500).send('Gagal mengambil data');
  }
});

Axios langsung mengembalikan data di response.data, tidak perlu .json(). Juga error handling lebih terintegrasi.

💡 Untuk proyek sederhana, fetch sudah cukup. Tapi axios populer karena fiturnya yang lebih kaya.

🧪 Latihan Mandiri

  1. Buat route /posts yang mengambil data postingan dari JSONPlaceholder (/posts) dan tampilkan dalam bentuk kartu (card) menggunakan EJS dan CSS.
  2. Gunakan API publik lain, misal API berita atau API film (cari yang gratis). Tampilkan data dengan rapi.
  3. Buat form input kota, lalu ketika disubmit, tampilkan cuaca kota tersebut menggunakan API OpenWeatherMap.

📚 Rangkuman

Metode Kelebihan Contoh
fetch (bawaan) Tidak perlu instalasi, promise-based await fetch(url)
axios Sintaks lebih sederhana, transformasi otomatis await axios.get(url)

🏁 Penutup

Sekarang kamu sudah bisa mengambil data dari API eksternal dan menampilkannya di aplikasi sendiri. Ini membuka banyak kemungkinan: aplikasi cuaca, berita, informasi real-time, dan lain-lain. Di tutorial selanjutnya (NodeJS #16) kita akan belajar menampilkan data API di halaman web dengan EJS secara lebih mendalam, termasuk cara mengirim data dari form ke API eksternal. Sampai jumpa!

Jangan lupa untuk mencoba latihan dan bereksperimen sendiri. Kalau ada pertanyaan, tulis di komentar. Selamat coding! 💻😊

Ditulis dengan ❤️ untuk para pemula yang ingin menjadi programmer handal.

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال