Panduan FARM Stack: Cara Membangun Aplikasi Full-Stack dengan FastAPI, React & MongoDB

Generator aplikasi FastAPI, React, MongoDB (FARM) full-stack adalah alat yang tangguh untuk mempermudah pembuatan aplikasi web kelas produksi. Dengan mengintegrasikan FastAPI untuk back end, React untuk front end, dan MongoDB sebagai database NoSQL yang skalabel, generator FARM memungkinkan pengembang Python membuat kerangka aplikasi yang andal dengan penyiapan minimal. Alat ini ideal bagi pengembang yang ingin fokus membangun fitur alih-alih mengonfigurasi kode boilerplate.

Artikel ini memperkenalkan generator aplikasi FARM, menjelaskan fitur utamanya, memberikan instruksi penyiapan langkah demi langkah, dan mendemonstrasikan kemampuannya dengan contoh nyata: aplikasi manajemen tugas. Tujuan kami adalah menunjukkan bagaimana generator ini menyederhanakan pengembangan full-stack dan memberdayakan pengembang Python untuk membuat aplikasi yang skalabel dan siap produksi.

Jika Anda perlu mengulas kembali MongoDB, pastikan untuk melihat kursus DataCamp Pengantar MongoDB di Python. 

Apa itu FastAPI Application Generator?

Generator FARM mengotomatiskan pembuatan tumpukan aplikasi web lengkap dengan komponen berikut:

• Penyiapan full-stack: Menghasilkan back end FastAPI, front end React, dan database MongoDB, yang terintegrasi mulus untuk pengembangan cepat.
• Autentikasi pra-konfigurasi: Mencakup OAuth2 dengan JWT, autentikasi magic link, dan pengelolaan cookie untuk akses pengguna yang aman. OAuth2 dengan JWT ibarat “tiket VIP” (kode JWT) yang Anda dapatkan setelah login untuk mengakses area privat.
• Integrasi Docker Compose: Menyediakan berkas Docker Compose yang telah dikonfigurasi untuk pengembangan dan pengujian lokal yang mudah.
• Alat operasional: Menggabungkan Celery untuk pemrosesan tugas asinkron, Traefik untuk load balancing, dan GitHub Actions untuk CI/CD, memastikan lingkungan siap produksi.

Fitur lengkapnya dapat ditemukan di repo GitHub.

Manfaat bagi pengembang

Generator FARM menawarkan keuntungan signifikan:

• Hemat waktu: Menghilangkan tugas penyiapan berulang seperti konfigurasi autentikasi atau koneksi database, sehingga pengembang dapat langsung mulai menulis kode.
• Praktik terbaik: Memastikan struktur proyek yang skalabel, aman, dan mudah dirawat sesuai standar industri.
• Fleksibilitas: Menyediakan fondasi yang dapat disesuaikan untuk diperluas sesuai kebutuhan proyek spesifik.

Cara Menjalankan MongoDB FastAPI Application Generator

Untuk mengilustrasikan kemampuannya, kita akan menyiapkan proyek contoh. Instruksi berikut mengasumsikan Anda telah menginstal Python 3.8+, Node.js, Docker, dan Docker Compose.

Instruksi penyiapan langkah demi langkah

Untuk mendemonstrasikan kemampuan generator, kita akan membuat proyek contoh bernama task-manager. Pastikan Anda telah menginstal prasyarat berikut:

• Python 3.11+: Sebaiknya 3.12, verifikasi dengan python3.12 --version.
• Node.js: Untuk front end React.
• Docker Desktop: Untuk pengembangan terkontainerisasi.
• MongoDB: Instalasi lokal (mis., via Homebrew dengan brew install mongodb-community@7.0) atau MongoDB Atlas (gunakan URI koneksi seperti mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority).
• Cookiecutter: Untuk menghasilkan templat proyek.
• Hatch: Untuk manajemen dependensi.
• MongoDB Compass (opsional): Untuk visualisasi database.

Sebelum melanjutkan, pastikan membuat lingkungan virtual dengan /usr/local/bin/python3.12 -m venv task-manager-venv dan aktifkan dengan source task-manager-venv/bin/activate.

1. Instal pustaka cookiecutter: pip install cookiecutter
2. Hasilkan proyek: Gunakan generator FARM untuk membuat proyek:

cookiecutter https://github.com/mongodb-labs/full-stack-fastapi-mongodb --no-input project_name="task-manager"
cd task-manager

3. Instal MongoDB secara lokal atau gunakan MongoDB Atlas:

brew tap mongodb/brew
brew install mongodb-community@7.0
brew services start mongodb-community@7.0

Untuk Atlas, daftar, buat klaster gratis, dan dapatkan connection string (mis., mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) untuk digunakan di berkas .env Anda.

4. Konfigurasikan variabel lingkungan: 

Salin dan edit berkas .env:

cp .env.example .env
nano .env

Perbarui dengan URI MongoDB, nama database, dan secret Anda:

MONGODB_URI=mongodb://localhost:27017
MONGO_DATABASE=task_manager
SECRET_KEY=your-secret-key
FIRST_SUPERUSER=admin@task-manager.com
FIRST_SUPERUSER_PASSWORD=changethis

5. Bangun dan jalankan dengan Docker Compose:

Pastikan Docker Desktop berjalan, lalu:

docker compose build --no-cache

1. docker compose up -d
2. Akses aplikasi:
• Front end: http://localhost:3000
• Back end: http://localhost/api/v1
• Swagger UI: http://localhost/docs (dokumentasi API interaktif)
• ReDoc: http://localhost/redoc
• Flower: http://localhost:5555 (monitoring Celery)
• Traefik UI: http://localhost:8090 (dasbor routing)
3. Masuk dengan admin@task-manager.com (kata sandi: changethis).
4. Uji autentikasi: Gunakan Swagger UI (/docs) untuk menguji endpoint /auth/login atau /auth/magic-link.
5. Siapkan CI/CD: Push ke GitHub untuk memicu workflow GitHub Actions yang disertakan.

Jelajahi Struktur Proyek Full-Stack yang Dihasilkan

Saat Anda menggunakan generator FARM, ia membangun proyek task-manager dengan semuanya tertata rapi. Bayangkan seperti rumah siap pakai di mana setiap ruangan punya fungsi:

• backend/: Ini adalah dapur tempat back end FastAPI bekerja. Ada folder seperti app/ (untuk kode API Anda) dan conf/ (untuk pengaturan) untuk menangani tugas dan data.

• frontend/: Ini adalah ruang tamu tempat pengguna melihat situs Anda, didukung oleh Next.js/React. Folder app/ menyimpan halaman (mis., about, TaskList) dengan berkas seperti layout.tsx (kerangka halaman) dan page.tsx (konten). Folder public/ menyimpan hal seperti ikon situs Anda.

• Berkas lain: Anda akan menemukan docker-compose.yml (untuk menjalankan semuanya dengan Docker), .env (pengaturan rahasia Anda), dan .github/workflows/ (untuk pengujian otomatis saat Anda membagikan kode).

Penyiapan ini siap dikembangkan, dan generator menambahkan alat bantu keren untuk mempermudah pengembangan!

Apa yang Dapat Anda Lakukan dengan Fitur Generator

Generator FARM hadir dengan alat bawaan yang hebat untuk membantu Anda membuat berbagai jenis proyek. Berikut gambaran sederhana tentang apa yang mereka lakukan dan bagaimana manfaatnya:

Integrasi Docker Compose: Dioptimalkan untuk pengembangan lokal

• Fungsinya: Docker Compose ibarat tombol ajaib yang menyiapkan dan menjalankan seluruh proyek Anda (back end, front end, database) dengan satu perintah. Ia menggunakan kontainer untuk memisahkan komponen dan mudah diuji di komputer Anda.
• Manfaatnya: Anda dapat memulai aplikasi task-manager dengan mengetik docker compose up -d dan menghentikannya dengan docker compose down. Sempurna untuk mencoba ide tanpa mengacaukan komputer Anda. Periksa statusnya dengan docker compose ps—jika semuanya “Up,” Anda siap melaju!

Contoh: Setelah menyiapkan proyek Anda, jalankan saja:

cd task-manager
docker compose up -d

Buka http://localhost:3000 untuk melihat front end Anda, dan Anda menjalankan semuanya secara lokal!

Sistem autentikasi bawaan

• Fungsinya: Menambahkan sistem login dengan akun pengguna, termasuk superuser bawaan (seperti admin@task-manager.com dengan kata sandi changethis). Menggunakan OAuth2 dengan token JWT (kode login aman) dan magic link (tautan email untuk login).
• Manfaatnya: Anda dapat membiarkan pengguna mendaftar, masuk, atau menggunakan magic link untuk mengakses aplikasi. Coba di http://localhost/docs pada Swagger UI—cari /api/v1/login/oauth untuk menguji login. Sempurna untuk aplikasi yang bersifat privat, seperti daftar tugas pribadi.

Contoh: Masuk dengan pengguna bawaan:

1. Buka http://localhost/docs.
2. Temukan /api/v1/login/oauth, masukkan admin@task-manager.com dan ubah ini, lalu klik “Execute.” Anda akan mendapatkan token JWT untuk digunakan pada halaman privat!

API task manager

Demo untuk Oauth API

Hasil untuk Oauth API

Fitur back end FastAPI

Mari kita lihat lebih dekat fitur utama back end bertenaga FastAPI dan bagaimana ia menyederhanakan operasi database, desain API, dan skalabilitas.

• MongoDB Motor: Ini adalah mesin yang berkomunikasi dengan database MongoDB Anda dengan sangat cepat, bahkan saat menangani banyak permintaan sekaligus.
• MongoDB ODMantic: Anggap ini sebagai pembantu yang memudahkan penyimpanan dan pencarian data di MongoDB, seperti merapikan tugas ke dalam kotak rapi.
• Dukungan CRUD umum: CRUD adalah create, read, update, delete. Fitur ini memberi Anda alat siap pakai untuk menambah, melihat, mengubah, atau menghapus data (seperti tugas) tanpa mulai dari nol.
• Berbasis standar: Mengikuti kaidah seperti OpenAPI dan JSON Schema, sehingga API Anda jelas dan kompatibel dengan alat atau aplikasi lain.
• Manfaatnya: Anda dapat dengan cepat membangun back end untuk menyimpan tugas. Generator menyiapkannya, jadi Anda tinggal menambahkan ide sendiri, seperti fitur tugas baru, menggunakan kode yang disediakan.

Contoh: Tambahkan penampil tugas cepat di backend/app/api/tasks.py:

from fastapi import APIRouter, Depends
from odmantic import AIOEngine, Model
from motor.motor_asyncio import AsyncIOMotorClient
router = APIRouter(prefix="/tasks", tags=["tasks"])
class Task(Model):
    title: str
async def get_db():
    client = AsyncIOMotorClient("mongodb://localhost:27017")
    return AIOEngine(client, database="task_manager")
@router.get("/")  # View all tasks
async def get_tasks(db: AIOEngine = Depends(get_db)):
    return await db.find(Task)

Uji di http://localhost/api/v1/tasks setelah membangun ulang dengan docker compose up --build.

Front end Next.js/React

Front end React adalah tempat pengguna berinteraksi dengan aplikasi Anda. Mari jelajahi strukturnya dan alat apa saja yang disertakan untuk membantu Anda membangun halaman yang rapi dan responsif.

• Otorisasi middleware: Bertindak sebagai penjaga gerbang, memeriksa apakah pengguna sudah login sebelum melihat halaman tertentu (mis., hanya pengguna yang login yang dapat melihat /TaskList).
• Validasi formulir dengan React Hook Form: Memastikan formulir (seperti formulir penambahan tugas) berisi informasi yang benar sebelum disimpan, sehingga tidak ada tugas kosong yang lolos.
• Manajemen state dengan Redux: Melacak hal-hal seperti tugas yang dipilih, membuat aplikasi Anda tetap mulus dan cepat meskipun datanya banyak.
• CSS dan templat dengan TailwindCSS, HeroIcons, dan HeadlessUI: Ini seperti alat desain siap pakai. TailwindCSS menata halaman Anda, HeroIcons menambahkan ikon menarik, dan HeadlessUI menyediakan tombol serta menu yang andal.
• Manfaatnya: Anda dapat membangun halaman tugas yang enak dipandang dengan formulir mudah dan akses aman. Generator menyiapkan desainnya, jadi Anda bisa fokus menambahkan tugas atau fitur lain.

Contoh: Tambahkan formulir tugas sederhana di frontend/app/TaskList/page.tsx:

import { useState } from 'react';
export default function TaskList() {
  const [task, setTask] = useState({ title: '' });
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetch('http://localhost/api/v1/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(task),
    });
    setTask({ title: '' });
  };
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold">Add Task</h1>
      <form onSubmit={handleSubmit}>
        <input
          className="border p-2"
          value={task.title}
          onChange={e => setTask({ title: e.target.value })}
          placeholder="Task name"
        />
        <button className="bg-blue-500 text-white p-2" type="submit">Add</button>
      </form>
    </div>
  );
}

Kunjungi http://localhost:3000/TaskList untuk menambahkan tugas.

Mengembangkan task manager Anda

Generator memberi Anda awal yang solid untuk task manager. Misalnya, Anda dapat:

• Menambahkan tombol untuk menandai tugas selesai menggunakan alat CRUD.
• Menggunakan autentikasi untuk menjaga daftar tugas tetap privat.
• Menatanya dengan TailwindCSS agar tampil memukau.
• Menyiapkan Celery untuk mengirim pengingat tugas melalui email.

Ide lain untuk dieksplorasi

Dengan fitur-fitur ini, Anda dapat membangun lebih dari sekadar task manager:

• Blog atau situs web: Simpan posting di MongoDB, gunakan FastAPI untuk menayangkannya, dan rancang situs keren dengan Next.js.
• Toko online: Simpan produk di MongoDB, tangani pesanan dengan Celery, dan buat halaman toko dengan Next.js.
• Pembaruan langsung: Tampilkan informasi real-time (seperti skor gim) menggunakan MongoDB, fitur live FastAPI, dan dasbor Next.js.

Kesimpulan

Generator aplikasi FARM menyederhanakan pengembangan full-stack dengan menyediakan tumpukan yang telah dikonfigurasi dan siap produksi yang mengintegrasikan FastAPI, React, dan MongoDB. Otomatisasi tugas penyiapan, kepatuhan terhadap praktik terbaik, dan arsitektur yang fleksibel menjadikannya alat yang tak ternilai bagi pengembang Python. Baik Anda membangun task manager atau aplikasi web yang kompleks, generator FARM mempercepat pengembangan dan memastikan skalabilitas. Cobalah sekarang dengan mengikuti instruksi penyiapan, dan jelajahi dokumentasi lengkap di repositori GitHub untuk membuka potensinya!

Jika Anda ingin mempelajari lebih lanjut, lihat sumber daya bermanfaat berikut:

• Repositori resmi: Jelajahi kode sumber, baca dokumentasi lengkap, dan lihat pembaruan atau berkontribusi.
• Dokumentasi FastAPI: Pelajari lebih lanjut tentang fitur FastAPI dan bagaimana ia menggerakkan back end.
• Kursus Pengantar FastAPI: Bangun API yang andal dan siap produksi dengan FastAPI, kuasai operasi HTTP, validasi, dan eksekusi asinkron untuk membuat pipeline data dan ML yang efisien.