(IF) Akses Flask API

Pada materi sebelumnya https://rachmat-nur.gitbook.io/flask/integrasi-model-dengan-api/ml-model-gunting-batu-kertas, kita sudah membuat Flask API backend model permainan tangan gunting, batu dan kertas.

Pada materi kali ini, kita akan mencoba membuat halaman web menggunakan React yang dapat mengirimkan request dan menerima response dari Flask API yang sudah dibuat sebelumnya.

Endpoint API backend dapat diakses pada URL : https://web-production-a5783.up.railway.app/

Instalasi React

Jalankan perintah pnpm create vite melalui terminal VS Code, kemudian isi project name dengan nama react-apimodel, pilih framework React, dan variant Javascript.

Kemudian masuk ke dalam folder react-apimodel dengan cara cd react-apimodel, jalankan perintah pnpm install untuk menginstal dependencies yang diperlukan

Jalankan perintah pnpm run dev untuk menjalankan aplikasi React

Klik http://localhost:5173, kemudian akan tampil web browser yang menampilkan halaman aplikasi React

Instalasi Axios

Jalankan perintah pnpm install axios

Axios adalah pustaka yang memungkinkan kita untuk membuat permintaan HTTP dari aplikasi browser atau Node.js.Sangat berguna dalam mengelola komunikasi antara frontend dan backend.

Instalasi Bootstrap

Jalankan perintah pnpm install bootstrap

Impor Bootstrap ke dalam file src/main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';

Berikut isi file main.jsx setelah diimpor Bootstrap

main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Modifikasi File App.jsx

Modifikasi file App.jsx seperti kode di bawah ini

App.js
import { useState } from "react"; // Import React hook `useState` untuk mengelola state dalam komponen
import axios from "axios"; // Import Axios untuk membuat HTTP request ke API

function App() { // Fungsi utama komponen App
  const [file, setFile] = useState(null); // State untuk menyimpan file yang diunggah pengguna
  const [prediction, setPrediction] = useState(null); // State untuk menyimpan hasil prediksi dari API

  const handleFileChange = (event) => { // Fungsi untuk menangani perubahan input file
    setFile(event.target.files[0]); // Mengambil file yang dipilih pengguna dan menyimpannya ke state `file`
  };

  const handleSubmit = async (event) => { // Fungsi untuk menangani form submit
    event.preventDefault(); // Mencegah reload halaman default pada form submit
    const formData = new FormData(); // Membuat instance FormData untuk mengirim file
    formData.append("file", file); // Menambahkan file ke dalam FormData dengan field name "file"

    try {
      const response = await axios.post( // Mengirim POST request ke API menggunakan Axios
        "https://web-production-a5783.up.railway.app/predict", // URL endpoint API untuk prediksi
        formData, // Mengirimkan data file sebagai body request
        {
          headers: {
            "Content-Type": "multipart/form-data", // Menentukan header untuk file upload
          },
        }
      );
      setPrediction(response.data); // Menyimpan hasil prediksi yang diterima dari API ke state `prediction`
    } catch (error) {
      console.error("Error uploading file:", error); // Menampilkan error jika ada masalah saat mengunggah file
    }
  };

  return ( // Render elemen JSX
    <div className="container"> {/* Wrapper untuk seluruh konten aplikasi */}
      <h1 className="mt-5">Upload Gambar dan Dapatkan Prediksi</h1> {/* Header aplikasi */}
      <form onSubmit={handleSubmit}> {/* Form untuk unggah file */}
        <div className="form-group"> {/* Div untuk grup input form */}
          <label htmlFor="fileInput">Pilih Gambar</label> {/* Label untuk input file */}
          <input
            type="file" // Input untuk memilih file
            className="form-control" // Kelas Bootstrap untuk gaya input
            id="file" // ID untuk input file
            onChange={handleFileChange} // Event handler untuk perubahan file
          />
        </div>
        <button type="submit" className="btn btn-primary mt-3"> {/* Tombol submit form */}
          Unggah
        </button>
      </form>
      {prediction && ( // Jika prediksi tersedia, tampilkan hasilnya
        <div className="mt-5"> {/* Wrapper untuk hasil prediksi */}
          <h3>Hasil Prediksi</h3> {/* Header untuk hasil prediksi */}
          <pre>{JSON.stringify(prediction, null, 2)}</pre> {/* Menampilkan hasil prediksi dalam format JSON yang terstruktur */}
        </div>
      )}
    </div>
  );
}

export default App; // Ekspor komponen App agar dapat digunakan di file lain

Kemudian buka kembali halaman browser, pilih Choose File

Cari gambar misalnya permainan tangan "gunting", lalu pilih Open

Kemudian tekan tombol Unggah, dan hasil prediksi gambar akan tampil

Deploy ke Vercel

Setelah pengujian di local berhasil, lakukan deploy aplikasi ke layanan cloud seperti vercel. Berikut contoh aplikasi yang dapat mengenali gambar permainan tangan guntin, batu dan kertas : https://react-apimodel.vercel.app/

Last updated