Pekan 4: Menghubungkan React ke Flask

Menyatukan Frontend dan Backend

📄 Deskripsi Singkat

Pada tahap ini, mahasiswa akan mempelajari cara memanggil API Flask dari React. Frontend akan mengambil data dari backend melalui HTTP GET, dan data tersebut kemudian ditampilkan di aplikasi React.

Diagram Alur Request & Response

🎯 Capaian Pembelajaran

Memahami konsep fetching data di React.
Mampu membuat permintaan (GET) ke API Flask dan menampilkannya di aplikasi React.
Memahami alur komunikasi antara frontend dan backend.

👩‍💻 Pembagian Tugas Tim

Backend Engineer: Menyiapkan endpoint Flask (misalnya, /api/data) yang mengembalikan data JSON.
Frontend Engineer: Membuat fungsi fetch di React dan menampilkan hasilnya.

Endpoint di Flask

Endpoint adalah URL pada server Flask yang menangani permintaan data. Berikut contoh endpoint yang mengembalikan data dalam format JSON:


# Mengimpor Flask dan fungsi jsonify dari modul flask
from flask import Flask, jsonify  

# Membuat instance aplikasi Flask
app = Flask(__name__)  

# Mendefinisikan route '/api/data' dengan metode GET
@app.route('/api/data', methods=['GET'])  
def get_data():
    # Membuat data dalam format dictionary
    data = {"message": "Hello from Flask!"}  
    # Mengembalikan data dalam format JSON
    return jsonify(data)  

# Menjalankan aplikasi jika file ini dijalankan sebagai program utama
if __name__ == '__main__':  
    # Menjalankan server Flask dengan mode debug aktif
    app.run(debug=True)

Fetching Data di React

Fetching data adalah proses pengambilan data dari API menggunakan HTTP GET. Di React, biasanya dilakukan dengan menggunakan hook useEffect untuk mengambil data saat komponen dimount.


// Mengimpor React dan hooks useEffect serta useState
import React, { useEffect, useState } from 'react';

// Mendefinisikan komponen utama App
function App() {
  // Membuat state 'data' untuk menyimpan data yang diambil
  const [data, setData] = useState(null);

  // Menggunakan useEffect untuk mengambil data saat komponen dimount
  useEffect(() => {
    // Mengirim permintaan GET ke endpoint Flask
    fetch('http://localhost:5000/api/data')
      // Mengubah response menjadi format JSON
      .then(response => response.json())
      // Menyimpan data ke state
      .then(data => setData(data));
  }, []); // Array kosong berarti hanya dijalankan sekali saat komponen pertama kali dimount

  return (
    
      Data dari Flask:
      {
        // Jika data sudah tersedia, tampilkan pesan; jika tidak, tampilkan "Loading..."
        data ? {data.message}
 : Loading...
      }
    
  );
}

// Mengekspor komponen App agar bisa digunakan di file lain
export default App;

Diagram Alur Komunikasi

Visualisasi alur komunikasi antara React dan Flask:

React mengirim permintaan GET ke endpoint /api/data di Flask.
Flask memproses permintaan dan mengembalikan data dalam format JSON.
React menerima data dan menampilkannya di antarmuka pengguna.

Rangkuman & Diskusi

Endpoint Flask dibuat untuk menyediakan data dalam format JSON.
React menggunakan fungsi fetch untuk mengambil data dari Flask.
Data yang diterima ditampilkan di aplikasi React.

Diskusikan kendala yang mungkin muncul, cara penanganan error, dan pengembangan lebih lanjut untuk integrasi ini.