# (IF) Akses Flask API

Pada materi sebelumnya [https://rachmat-nur.gitbook.io/flask/integrasi-model-dengan-api/ml-model-gunting-batu-kertas](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.&#x20;

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/](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.

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FF6rigFpouo5gXbKKbYxx%2Fimage.png?alt=media&#x26;token=3265563b-fb33-433e-aff2-e9b3aacd11c4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FzbU0lVypfrp6yuC5clNU%2Fimage.png?alt=media&#x26;token=b6400d20-8275-4429-be07-4b0d0dc3d61d" alt=""><figcaption></figcaption></figure>

Jalankan perintah `pnpm run dev` untuk menjalankan aplikasi React

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FDb8fOzetTmQF66ln83q7%2Fimage.png?alt=media&#x26;token=fc745d36-80e0-47e6-baa8-0b8615928534" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2Ftg96wYjQ0uov7AUV4Qnu%2Fimage.png?alt=media&#x26;token=cc2a9613-cb4f-4ff0-a69c-a4ad3f141375" alt=""><figcaption></figcaption></figure>

## Instalasi Axios

Jalankan perintah `pnpm install axios`

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FDa58yD7pdv9Sw0xCpB8X%2Fimage.png?alt=media&#x26;token=b1a530cb-deb6-46eb-b253-21bc081b0ff1" alt=""><figcaption></figcaption></figure>

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`

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2F0M1EuA5dMjqihCCCc5y8%2Fimage.png?alt=media&#x26;token=73b5491b-e2b6-4eab-bd03-2ec960df0917" alt=""><figcaption></figcaption></figure>

Impor Bootstrap ke dalam file src/main.jsx:

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

Berikut isi file main.jsx setelah diimpor Bootstrap

{% code title="main.jsx" %}
```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>,
)
```
{% endcode %}



## Modifikasi File App.jsx

Modifikasi file App.jsx seperti kode di bawah ini

{% code title="App.js" %}
```jsx
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

```
{% endcode %}

Kemudian buka kembali halaman browser, pilih Choose File

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FmKIf2RkpZen4YQHmEOSs%2Fimage.png?alt=media&#x26;token=52614040-b930-49d9-bec4-4dd18947fca0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FpKHi53bO5M5stoPPeke3%2Fimage.png?alt=media&#x26;token=15c2e206-cbb2-4c15-826c-f1dc398036e0" alt=""><figcaption></figcaption></figure>

Kemudian tekan tombol Unggah, dan hasil prediksi gambar akan tampil

<figure><img src="https://2220535400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfI5wsxyjoqzXlxlbSlJa%2Fuploads%2FOu21igjZdIFf7dNWBBiy%2Fimage.png?alt=media&#x26;token=9f37e4a4-ad64-4d82-b926-299d1fd312eb" alt=""><figcaption></figcaption></figure>



## 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/](https://react-apimodel.vercel.app/)

{% embed url="https://react-apimodel.vercel.app/" %}
