✦ AizuDemy
Beranda › Tutorial › Integrasi API & Database via Vibe Coding: Biar Aplikasimu Hidup

Integrasi API & Database via Vibe Coding: Biar Aplikasimu Hidup

A
Aizu Dev
7 jam lalu · 12 views
#Tutorial
Integrasi API & Database via Vibe Coding: Biar Aplikasimu Hidup

Mengapa Integrasi API dan Database Membuat Aplikasi Hidup

Aplikasi tanpa konsumsi data eksternal adalah antarmuka statis yang terisolasi. Tampilan UI seindah apa pun tidak bernilai fungsional jika menyajikan data yang di-hardcode. Integrasi API (Application Programming Interface) menghubungkan sistem ke ekosistem luar—seperti penyedia data cuaca, gateway pembayaran, atau katalog e-commerce—secara real-time. Di sisi backend, database bertindak sebagai media penyimpanan persisten (persistent storage) agar state data tidak hilang saat instance server restart atau crash.

Pendekatan vibe coding memangkas waktu penulisan kode boilerplate integrasi. AI dapat menyusun fungsi pembacaan data (fetch), pemrosesan payload JSON, koneksi driver database, hingga eksekusi query SQL presisi dalam hitungan detik. Namun, efisiensi ini menggeser peran utama developer: dari pengetik sintaks manual menjadi arsitek instruksi (prompt engineer), penguji alur transaksi data, dan pembuat penanganan skenario marjinal (edge cases).

Memilih API Publik: Open-Meteo dan Fake Store API

Eksperimen integrasi API pada tahap awal membutuhkan endpoint yang teruji konsisten, tidak terhalang mekanisme otentikasi rumit, serta bebas dari kendala kebijakan CORS. Dua endpoint API publik berikut sangat ideal untuk tahap pengujian prompt:

  • Open-Meteo API: Layanan API data cuaca open-source tanpa kewajiban penggunaan API key. Struktur respons JSON sangat bersih dan berlatensi rendah. Endpoint data cuaca Jakarta: https://api.open-meteo.com/v1/forecast?latitude=-6.2088&longitude=106.8456&current_weather=true.
  • Fake Store API: Endpoint REST API yang menyediakan data e-commerce sintetis. Cocok untuk mensimulasikan manajemen katalog produk, belanja, dan transaksi asynchronous. Endpoint: https://fakestoreapi.com/products.

Menggunakan API tanpa otentikasi mempercepat iterasi pembentukan prompt. Setelah struktur respons dipahami, instruksi pembuatan skema tabel database dapat dirancang dengan tingkat presisi tinggi.

Formulasi Prompt Vibe Coding untuk Fetch Data API

Instruksi yang samar akan menghasilkan fungsi fetch yang rentan mengalami crash runtime saat struktur respons berubah atau koneksi terganggu. Prompt harus memuat batasan teknis yang spesifik: pemeriksaan kode status HTTP, ekstraksi payload, abstraksi tipe data, serta penanganan eksepsi.

Contoh Prompt Fetch API Cuaca

Buatkan fungsi JavaScript (Node.js/ES Module) untuk fetch data cuaca dari Open-Meteo API.
Endpoint: https://api.open-meteo.com/v1/forecast?latitude=-6.2088&longitude=106.8456&current_weather=true

Persyaratan:
1. Gunakan native fetch API.
2. Validasi response status HTTP. Jika status bukan 200, lempar Error dengan pesan spesifik.
3. Parse payload JSON dan kembalikan objek khusus berisi: temperature, windspeed, weathercode, time.
4. Bungkus dalam try-catch block. Log error ke console.error.

Kode Hasil Prompt Fetch API

export async function getJakartaWeather() {
  const url = 'https://api.open-meteo.com/v1/forecast?latitude=-6.2088&longitude=106.8456&current_weather=true';
  
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP Error! Status: ${response.status} - ${response.statusText}`);
    }
    
    const data = await response.json();
    
    if (!data.current_weather) {
      throw new Error('Format payload API tidak sesuai. Field current_weather hilang.');
    }
    
    const { temperature, windspeed, weathercode, time } = data.current_weather;
    
    return {
      temperature,
      windspeed,
      weathercode,
      time
    };
  } catch (error) {
    console.error('Gagal mengambil data cuaca:', error.message);
    throw error;
  }
}

Merancang Database MySQL dan Query Storage

Data eksternal yang telah ditarik harus disimpan ke database relasional MySQL. Penyimpanan ini memastikan histori data tercatat permanen dan dapat dianalisis tanpa bergantung pada kuota pemanggilan API luar. Langkah awal dimulai dari penyusunan skema tabel yang optimal.

Skema Tabel MySQL (weather_logs)

CREATE TABLE IF NOT EXISTS weather_logs (
    id INT AUTO_INCREMENT PRIMARY KEY,
    city VARCHAR(50) NOT NULL DEFAULT 'Jakarta',
    temperature FLOAT NOT NULL,
    windspeed FLOAT NOT NULL,
    weather_code INT NOT NULL,
    recorded_at DATETIME NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Prompt Integrasi Storage ke MySQL

Buatkan module Node.js menggunakan driver 'mysql2/promise' untuk menyimpannya ke MySQL.

Input fungsi: Objek { temperature, windspeed, weathercode, time }.
Tabel target: weather_logs.
Kolom: city ('Jakarta'), temperature, windspeed, weather_code, recorded_at.

Persyaratan:
1. Gunakan Prepared Statements (parameterized query) untuk cegah SQL Injection.
2. Format timestamp ISO dari API ke format DATETIME MySQL (YYYY-MM-DD HH:MM:SS).
3. Buat connection pool reuse koneksi.
4. Kembalikan insertId jika sukses.

Kode Hasil Prompt MySQL Integration

import mysql from 'mysql2/promise';

const pool = mysql.createPool({
  host: process.env.DB_HOST || 'localhost',
  user: process.env.DB_USER || 'root',
  password: process.env.DB_PASSWORD || '',
  database: process.env.DB_NAME || 'vibe_db',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

export async function saveWeatherToDatabase(weatherData) {
  const { temperature, windspeed, weathercode, time } = weatherData;
  
  const mysqlDateTime = new Date(time).toISOString().slice(0, 19).replace('T', ' ');
  
  const query = `
    INSERT INTO weather_logs (city, temperature, windspeed, weather_code, recorded_at)
    VALUES (?, ?, ?, ?, ?)
  `;
  
  try {
    const [result] = await pool.execute(query, [
      'Jakarta',
      temperature,
      windspeed,
      weathercode,
      mysqlDateTime
    ]);
    
    return result.insertId;
  } catch (error) {
    console.error('Database Error [saveWeatherToDatabase]:', error.message);
    throw new Error(`Gagal menyimpan data ke MySQL: ${error.message}`);
  }
}

Menangani Loading State, Rate Limit, dan Network Error

Integrasi sistem pada lingkungan produksi selalu dihadapkan pada instabilitas jaringan dan kegagalan sistem terdistribusi. Vibe coding yang andal wajib menginstruksikan AI untuk membangun pola pemrograman defensif (defensive programming).

Potensi Kegagalan Integrasi dan Solusinya

  • Network Timeout: Server penyedia API mengalami kendala latensi tinggi. Solusi: Terapkan batas waktu pembatalan otomatis menggunakan AbortController.
  • Rate Limiting (HTTP 429): Terjadi pemblokiran akibat melampaui kuota pemanggilan. Solusi: Cek header Retry-After dan terapkan algoritma exponential backoff.
  • Database Offline (ECONNREFUSED): Koneksi ke server MySQL terputus. Solusi: Gunakan mekanisme fail-safe logging dan graceful degradation agar sistem tidak tumbang total.
  • UI Async State Failure: Antarmuka pengguna membeku tanpa umpan balik saat proses berjalan. Solusi: Kelola state visual (loading, error, success) secara eksplisit.

Prompt Manajemen State & Resiliency

Buatkan custom React Hook `useWeatherSync` untuk mengelola fetching API dan sinkronisasi database.

Persyaratan State:
1. loading (boolean): true saat proses fetch/save berjalan.
2. error (string|null): pesan kesalahan jika fetch atau save gagal.
3. data (object|null): data cuaca terbaru yang berhasil disimpan.
4. lastSynced (Date|null): timestamp eksekusi terakhir.

Fitur Opsional:
- Tambahkan AbortController dengan timeout 5000ms.
- Sediakan fungsi `triggerSync()` untuk pemicu ulang manual.

Kode React Hook Output

import { useState, useCallback } from 'react';

export function useWeatherSync() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  const [lastSynced, setLastSynced] = useState(null);

  const triggerSync = useCallback(async () => {
    setLoading(true);
    setError(null);

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
      const response = await fetch('/api/sync-weather', {
        signal: controller.signal
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        const errPayload = await response.json();
        throw new Error(errPayload.message || 'Gagal sinkronisasi data.');
      }

      const result = await response.json();
      setData(result.data);
      setLastSynced(new Date());
    } catch (err) {
      if (err.name === 'AbortError') {
        setError('Request timeout: API tidak merespons dalam 5 detik.');
      } else {
        setError(err.message);
      }
    } finally {
      setLoading(false);
    }
  }, []);

  return { loading, error, data, lastSynced, triggerSync };
}

Studi Kasus Konkret: Pipeline API Cuaca ke MySQL

Tahap akhir adalah mengabungkan seluruh komponen terisolasi menjadi satu kesatuan pipeline data yang utuh. Alur eksekusi data berjalan sebagai berikut:

Client Trigger (React UI) → Express.js Endpoint /api/sync-weather → Fetch Data Open-Meteo API → Write/Insert MySQL Database → Response Return JSON to Client.

Express.js Server Endpoint

import express from 'express';
import { getJakartaWeather } from './weatherService.js';
import { saveWeatherToDatabase } from './dbService.js';

const app = express();
app.use(express.json());

app.get('/api/sync-weather', async (req, res) => {
  try {
    const weatherData = await getJakartaWeather();
    const insertId = await saveWeatherToDatabase(weatherData);

    return res.status(200).json({
      success: true,
      message: 'Data cuaca berhasil diambil dan disimpan ke MySQL.',
      insertId: insertId,
      data: weatherData
    });
  } catch (error) {
    return res.status(500).json({
      success: false,
      message: 'Gagal memproses pipeline weather sync.',
      error: error.message
    });
  }
});

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

React Dashboard Component Output

import React from 'react';
import { useWeatherSync } from './useWeatherSync';

export function WeatherDashboard() {
  const { loading, error, data, lastSynced, triggerSync } = useWeatherSync();

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h2>Dashboard Sinkronisasi Cuaca Jakarta</h2>
      
      <button onClick={triggerSync} disabled={loading}>
        {loading ? 'Menyinkronkan...' : 'Sinkronkan Data Sekarang'}
      </button>

      {error && (
        <div style={{ color: 'red', marginTop: '10px' }}>
          <strong>Error:</strong> {error}
        </div>
      )}

      {data && (
        <div style={{ marginTop: '15px', border: '1px solid #ccc', padding: '10px' }}>
          <h3>Data Terakhir Disimpan:</h3>
          <p>Suhu: {data.temperature} &deg;C</p>
          <p>Kecepatan Angin: {data.windspeed} km/h</p>
          <p>Kode Cuaca: {data.weathercode}</p>
          <p>Waktu Observasi: {data.time}</p>
          {lastSynced && <small>Waktu Sync: {lastSynced.toLocaleTimeString()}</small>}
        </div>
      )}
    </div>
  );
}

Checklist Integrasi API & Database Vibe Coding

Sebelum menerapkan kode hasil generasi AI ke lingkungan produksi, lakukan verifikasi teknis dengan panduan checklist berikut:

  • [ ] Validasi Response HTTP: Apakah status code selain 2xx ditangani secara eksplisit dengan instruksi throw Error?
  • [ ] Sanitasi & Parser Payload: Apakah keutuhan struktur JSON diperiksa sebelum diakses oleh logika bisnis?
  • [ ] Parameterized Queries: Apakah query SQL memakai placeholder ? untuk menutup celah keamanan SQL Injection?
  • [ ] Connection Pooling: Apakah driver database memanfaatkan eksekusi pool untuk efisiensi koneksi ulang?
  • [ ] Timeout Handling: Apakah operasi fetch dibatasi oleh instansiasi AbortController?
  • [ ] Explicit UI State: Apakah antarmuka memiliki status visual terpisah untuk kondisi loading, error, dan success?
  • [ ] Environment Variables: Apakah kredensial database dan API key terisolasi dalam berkas `.env`?

Langkah Selanjutnya

Data eksternal dari API publik kini berhasil ditarik dan disimpan secara permanen di database MySQL. Seluruh alur data telah terhubung dari antarmuka pengguna hingga tabel database.

Pada Bagian 7 dari 10 seri Belajar Vibe Coding, pembahasan akan berlanjut ke topik krusial: Autentikasi User & Authorization: Mengamankan API dan Database dengan Prompt Presisi. Anda akan mempelajari cara mengamankan endpoint server dan tabel MySQL dari akses yang tidak terotorisasi.

📖 Artikel Terkait