Pertemuan 14: Implementasi ML pada Web (API & Deployment)

04 Okt 2026kribbiadminAI Programming

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa diharapkan mampu menerapkan konsep dan keterampilan berikut secara mandiri.

Membangun API sederhana dengan FastAPI.
Menghubungkan model machine learning ke API.
Memanggil API dari frontend menggunakan fetch.
Melakukan deployment sederhana agar aplikasi diakses publik.

Model yang hanya tersimpan di notebook belum bernilai; nilainya muncul saat bisa dipakai orang lain lewat API atau aplikasi. Pembuatan API memisahkan logika model dari tampilan, sehingga klien berbeda-beda dapat mengaksesnya dengan format permintaan seragam dalam JSON.Menjelaskan bahwa model yang hanya berada di notebook hampir tidak berguna; nilai nyatanya lahir saat berhasil dipakai orang lain lewat API atau aplikasi.

Membuat API dengan FastAPI

FastAPI adalah kerangka web modern dengan dukungan tipe data dan dokumentasi otomatis. Model terlatih dimuat sekali saat server berjalan, lalu endpoint menerima input, memanggil model, dan mengembalikan hasil.Menekankan pola client-server: frontend mengirim permintaan, backend memproses dengan model, lalu mengembalikan hasil dalam format JSON. Pola ini berlaku umum, baik untuk model regresi sederhana maupun jaringan saraf yang rumit.

from fastapi import FastAPI
from pydantic import BaseModel

import joblib
model = joblib.load("model.pkl")

app = FastAPI()

class Input(BaseModel):
    jam_belajar: float

@app.post("/prediksi")
def prediksi(data: Input):
    nilai = model.predict([[data.jam_belajar]])
    return {"prediksi": float(nilai[0])}

Model disimpan lewat joblib.dump setelah dilatih, lalu dimuat kembali di server. Kelas Input memvalidasi format badan permintaan. Jalankan server dengan perintah uvicorn main:app –reload, lalu buka /docs untuk menguji.

Frontend dengan fetch

Frontend berupa halaman HTML sederhana dengan JavaScript. Fungsi fetch mengirim permintaan POST berisi input, menunggu respons JSON, lalu menampilkan hasilnya ke elemen halaman.

async function prediksi() {
  const jam = document.getElementById("jam").value;
  const res = await fetch("/prediksi", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({jam_belajar: Number(jam)})
  });
  const data = await res.json();
  document.getElementById("hasil").textContent =
    "Prediksi nilai: " + data.prediksi;
}

Deployment

Untuk diakses publik, aplikasi dideploy ke layanan hosting yang mendukung FastAPI atau Flask seperti Render, Railway, atau Hugging Face Spaces. Langkah pada umumnya: unggah kode ke repository, sertakan requirements.txt dan perintah start, lalu layanan membangun dan menjalankan aplikasi serta memberi URL publik.

Langkah Praktik

Pastikan server berjalan sebelum mencoba endpoint di /docs, lalu baru uji dari halaman frontend. Urutan ini membantu melokalisasi kesalahan.

Latih dan simpan model regresi dengan joblib.
Buat file FastAPI dengan satu endpoint prediksi.
Uji endpoint pada dokumentasi otomatis /docs.
Buat halaman HTML dengan fetch untuk memanggil API.
Deploy ke platform hosting lalu bagikan URL untuk diuji.

Uji juga permintaan yang tidak valid, misalnya jam belajar negatif, untuk memastikan API menangani input bermasalah dengan baik.

Latihan

Latihan menuntut Anda merancang API beserta cara klien memakainya; lengkapi jawaban dengan contoh permintaan nyata.

Jelaskan peran API dalam menghubungkan model ke aplikasi.
Tulis payload JSON yang dikirim client ke endpoint prediksi Anda.
Tambahkan endpoint GET yang mengembalikan informasi model.