FARM Stack Rehberi: FastAPI, React ve MongoDB ile Tam Yığın Uygulamalar Nasıl Geliştirilir

Tam yığın FastAPI, React, MongoDB (FARM) uygulama oluşturucu, üretime hazır web uygulamalarının oluşturulmasını kolaylaştırmak için tasarlanmış güçlü bir araçtır. Arka uçta FastAPI, ön uçta React ve ölçeklenebilir bir NoSQL veritabanı olarak MongoDB’yi entegre ederek, FARM oluşturucu Python geliştiricilerinin minimum kurulumla sağlam uygulamaları hızla iskeletini çıkarmasını sağlar. Bu araç, şablon kodu yapılandırmak yerine özellik geliştirmeye odaklanmak isteyen geliştiriciler için idealdir.

Bu makale FARM uygulama oluşturucuyu tanıtır, temel özelliklerini açıklar, adım adım kurulum talimatları sunar ve gerçek bir örnekle—bir görev yönetimi uygulamasıyla—yeteneklerini gösterir. Amacımız, oluşturucunun tam yığın geliştirmeyi nasıl basitleştirdiğini ve Python geliştiricilerinin ölçeklenebilir, üretime hazır uygulamalar oluşturmasını nasıl mümkün kıldığını göstermektir.

MongoDB’ye hızlı bir göz atmaya ihtiyacınız varsa, DataCamp’in Python ile MongoDB’ye Giriş kursuna mutlaka göz atın. 

FastAPI Uygulama Oluşturucu Nedir?

FARM oluşturucu, aşağıdaki bileşenlerle eksiksiz bir web uygulama yığınını otomatik olarak oluşturur:

• Tam yığın kurulum: FastAPI arka ucu, React ön ucu ve MongoDB veritabanını sorunsuz bir şekilde entegre ederek hızlı geliştirme sağlar.
• Önceden yapılandırılmış kimlik doğrulama: Güvenli kullanıcı erişimi için JWT’li OAuth2, sihirli bağlantı (magic link) kimlik doğrulaması ve çerez yönetimini içerir. JWT’li OAuth2, giriş yaptıktan sonra özel alanlara erişmek için aldığınız güvenli bir “VIP geçişi” (JWT kodu) gibidir.
• Docker Compose entegrasyonu: Kolay yerel geliştirme ve test için önceden yapılandırılmış Docker Compose dosyaları sağlar.
• Operasyonel araçlar: Asenkron görev işleme için Celery, yük dengeleme için Traefik ve CI/CD için GitHub Actions entegre edilmiştir; böylece üretime hazır bir ortam sunar.

Tüm özellikleri GitHub deposunda bulabilirsiniz.

Geliştiriciler için faydalar

FARM oluşturucu önemli avantajlar sunar:

• Zaman tasarrufu: Kimlik doğrulama veya veritabanı bağlantıları gibi tekrarlayan kurulum görevlerini ortadan kaldırır; geliştiricilerin hemen kod yazmaya başlamasını sağlar.
• En iyi uygulamalar: Sektör standartlarına uygun, ölçeklenebilir, güvenli ve sürdürülebilir bir proje yapısı sunar.
• Esneklik: Geliştiricilerin özel proje ihtiyaçlarına göre genişletebileceği özelleştirilebilir bir temel sağlar.

MongoDB FastAPI Uygulama Oluşturucu Nasıl Çalıştırılır

Oluşturucunun yeteneklerini göstermek için örnek bir proje kurulumunu adım adım inceleyeceğiz. Aşağıdaki talimatlar, Python 3.8+, Node.js, Docker ve Docker Compose’un yüklü olduğunu varsayar.

Adım adım kurulum talimatları

Oluşturucunun yeteneklerini göstermek için task-manager adlı bir örnek proje oluşturacağız. Aşağıdaki önkoşulların yüklü olduğundan emin olun:

• Python 3.11+: Tercihen 3.12; python3.12 --version ile doğrulayın.
• Node.js: React ön yüzü için.
• Docker Desktop: Konteyner tabanlı geliştirme için.
• MongoDB: Yerel kurulum (ör. Homebrew ile brew install mongodb-community@7.0) veya MongoDB Atlas (.env dosyanızda kullanmak üzere mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority gibi bir bağlantı URI’si kullanın).
• Cookiecutter: Proje şablonunu oluşturmak için.
• Hatch: Bağımlılık yönetimi için.
• MongoDB Compass (opsiyonel): Veritabanı görselleştirme için.

Devam etmeden önce /usr/local/bin/python3.12 -m venv task-manager-venv ile bir sanal ortam oluşturduğunuzdan ve source task-manager-venv/bin/activate ile etkinleştirdiğinizden emin olun.

1. cookiecutter kütüphanesini yükleyin: pip install cookiecutter
2. Projeyi oluşturun: Bir proje oluşturmak için FARM oluşturucuyu kullanın:

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

3. MongoDB’yi yerel olarak kurun veya MongoDB Atlas’ı kullanın:

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

Atlas için, kayıt olun, ücretsiz bir küme oluşturun ve .env dosyanızda kullanmak üzere bir bağlantı dizesi (ör. mongodb+srv://:@cluster0.mongodb.net/?retryWrites=true&w=majority) alın.

4. Ortam değişkenlerini yapılandırın: 

.env dosyasını kopyalayıp düzenleyin:

cp .env.example .env
nano .env

MongoDB URI’niz, veritabanı adınız ve gizli anahtarlarınızla güncelleyin:

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. Docker Compose ile derleyin ve çalıştırın:

Docker Desktop’ın çalıştığından emin olun, ardından:

docker compose build --no-cache

1. docker compose up -d
2. Uygulamaya erişin:
• Ön yüz: http://localhost:3000
• Arka uç: http://localhost/api/v1
• Swagger UI: http://localhost/docs (etkileşimli API dokümanları)
• ReDoc: http://localhost/redoc
• Flower: http://localhost:5555 (Celery izleme)
• Traefik UI: http://localhost:8090 (yönlendirme panosu)
3. Giriş yapın: admin@task-manager.com (parola: changethis).
4. Kimlik doğrulamayı test edin: Swagger UI (/docs) üzerinden /auth/login veya /auth/magic-link uç noktalarını deneyin.
5. CI/CD’yi kurun: GitHub’a göndererek dahil edilen GitHub Actions iş akışlarını tetikleyin.

Oluşturulan Tam Yığın Proje Yapısını Keşfedin

FARM oluşturucuyu kullandığınızda, her şeyin düzenli olduğu bir task-manager projesi kurar. Her odanın bir işi olan hazır bir ev gibi düşünebilirsiniz:

• backend/: Burası FastAPI arka ucunun çalıştığı mutfaktır. Görevleri ve verileri yönetmek için app/ (API kodunuz için) ve conf/ (ayarlar) gibi klasörleri içerir.

• frontend/: Burası kullanıcıların sitenizi gördüğü oturma odasıdır; Next.js/React ile çalışır. app/ klasörü, layout.tsx (sayfa çerçevesi) ve page.tsx (içerik) gibi dosyalarla sayfaları (ör. about, TaskList) barındırır. public/ klasörü, sitenizin simgesi gibi dosyaları saklar.

• Diğer dosyalar: docker-compose.yml (her şeyi Docker ile çalıştırmak için), .env (gizli ayarlarınız) ve .github/workflows/ (kodunuzu paylaştığınızda otomatik testler) gibi dosyaları bulacaksınız.

Bu kurulum büyümeye hazırdır ve oluşturucu, geliştirmeyi kolaylaştıran kullanışlı araçlar ekler!

Oluşturucunun Özellikleriyle Neler Yapabilirsiniz

FARM oluşturucu, her türlü projeyi oluşturmanıza yardımcı olacak harika yerleşik araçlarla birlikte gelir. İşte ne yaptıklarına ve nasıl fayda sağladıklarına basit bir bakış:

Docker Compose entegrasyonu: Yerel geliştirme için optimize edilmiştir

• Ne yapar: Docker Compose, tek bir komutla tüm projenizi (arka uç, ön uç, veritabanı) kurup çalıştıran sihirli bir düğme gibidir. Her şeyi ayrı tutmak için konteynerleri kullanır ve bilgisayarınızda test etmesi kolaydır.
• Nasıl yardımcı olur: docker compose up -d yazarak task-manager uygulamanızı başlatabilir, docker compose down ile durdurabilirsiniz. Fikirleri bilgisayarınızı karıştırmadan denemek için idealdir. docker compose ps ile durumunu kontrol edin—her şey “Up” ise hazırsınız!

Örnek: Projenizi kurduktan sonra yalnızca şunu çalıştırın:

cd task-manager
docker compose up -d

http://localhost:3000 adresini açarak ön yüzü görebilir ve her şeyi yerelde çalıştırabilirsiniz!

Yerleşik kimlik doğrulama sistemi

• Ne yapar: Kullanıcı hesaplarıyla bir oturum açma sistemi ekler; varsayılan bir süper kullanıcı (ör. admin@task-manager.com, parola changethis) içerir. Güvenli oturum açma kodları olan JWT belirteçleriyle OAuth2 ve sihirli bağlantıları (e-posta ile giriş) kullanır.
• Nasıl yardımcı olur: Kullanıcıların uygulamanıza kaydolmasına, giriş yapmasına veya sihirli bağlantıyla erişmesine izin verebilirsiniz. Bunu Swagger UI’da http://localhost/docs adresinde deneyin—giriş yapmak için /api/v1/login/oauth uç noktasına bakın. Yalnızca belirli kişilerin görmesi gereken, örneğin özel bir görev listesi gibi uygulamalar için harikadır.

Örnek: Varsayılan kullanıcıyla giriş yapın:

1. http://localhost/docs adresine gidin.
2. /api/v1/login/oauth öğesini bulun, admin@task-manager.com ve parolayı girin, “Execute”a tıklayın. Özel sayfalar için kullanabileceğiniz bir JWT belirteci alacaksınız!

Görev yöneticisi API’si

Oauth API için demo

Oauth API dönüşü

FastAPI arka uç özellikleri

FastAPI destekli arka ucun temel özelliklerine yakından bakalım; veritabanı işlemlerini, API tasarımını ve ölçeklenebilirliği nasıl basitleştirdiğini inceleyelim.

• MongoDB Motor: MongoDB veritabanınızla, çok sayıda isteği aynı anda işlerken bile, süper hızlı iletişim kuran motordur.
• MongoDB ODMantic: Verileri MongoDB’de kaydetmeyi ve bulmayı kolaylaştıran, görevleri düzenli kutulara ayırmak gibi düşünebileceğiniz bir yardımcıdır.
• Yaygın CRUD desteği: CRUD; oluşturma, okuma, güncelleme, silme anlamına gelir. Bu özellik, verileri (ör. görevler) eklemek, görüntülemek, değiştirmek veya kaldırmak için hazır araçlar sunar; sıfırdan başlamazsınız.
• Standartlara dayalı: OpenAPI ve JSON Schema gibi kuralları takip eder; böylece API’niz nettir ve diğer araçlar veya uygulamalarla uyumlu çalışır.
• Nasıl yardımcı olur: Görevleri depolamak için hızlıca bir arka uç oluşturabilirsiniz. Oluşturucu bunu kurar; siz de sağladığı kodu kullanarak yeni görev özellikleri gibi kendi fikirlerinizi eklersiniz.

Örnek: backend/app/api/tasks.py içine hızlı bir görev görüntüleyici ekleyin:

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)

docker compose up --build ile yeniden derledikten sonra http://localhost/api/v1/tasks adresinde test edin.

Next.js/React ön yüzü

React ön yüzü, kullanıcıların uygulamanızla etkileşime girdiği yerdir. Nasıl yapılandığını ve şık, duyarlı sayfalar oluşturmanıza yardımcı olmak için hangi araçları içerdiğini keşfedelim.

• Ara katman yetkilendirme (middleware): Bir bekçi gibi davranır; kullanıcıların belirli sayfaları görmeden önce oturum açıp açmadığını kontrol eder (ör. yalnızca oturum açmış kullanıcılar /TaskList’i görür).
• React Hook Form ile form doğrulama: Formların (ör. görev ekleme formu) kaydetmeden önce doğru bilgilerle doldurulmasını sağlar; boş görevler sızmaz.
• Redux ile durum yönetimi: Hangi görevlerin seçili olduğu gibi durumları takip eder; çok veriyle bile uygulamanızı akıcı ve hızlı tutar.
• TailwindCSS, HeroIcons ve HeadlessUI ile CSS ve şablonlar: Bunlar hazır tasarım araçları gibidir. TailwindCSS sayfalarınızı stillendirir, HeroIcons şık simgeler ekler, HeadlessUI ise harika çalışan düğmeler ve menüler sunar.
• Nasıl yardımcı olur: Kolay formlarla ve güvenli erişimle şık bir görev sayfası oluşturabilirsiniz. Oluşturucu tasarımı kurar; böylece görev ekleme veya diğer özelliklere odaklanabilirsiniz.

Örnek: frontend/app/TaskList/page.tsx içinde basit bir görev formu ekleyin:

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>
  );
}

http://localhost:3000/TaskList adresini ziyaret ederek görev ekleyin.

Görev yöneticinizi büyütmek

Oluşturucu, bir görev yöneticisi için sağlam bir başlangıç sunar. Örneğin şunları yapabilirsiniz:

• CRUD araçlarını kullanarak görevleri tamamlandı olarak işaretlemek için bir düğme ekleyin.
• Görev listenizi özel tutmak için kimlik doğrulamayı kullanın.
• TailwindCSS ile stil vererek harika görünmesini sağlayın.
• E-posta ile görev hatırlatıcıları göndermek için Celery’yi kurun.

Keşfedilecek diğer fikirler

Bu özelliklerle yalnızca bir görev yöneticisinden fazlasını oluşturabilirsiniz:

• Blog veya web sitesi: Gönderileri MongoDB’de saklayın, FastAPI ile gösterin ve Next.js ile şık bir site tasarlayın.
• Çevrimiçi mağaza: Ürünleri MongoDB’de saklayın, siparişleri Celery ile yönetin ve Next.js ile bir mağaza sayfası oluşturun.
• Canlı güncellemeler: MongoDB, FastAPI’nin canlı özellikleri ve bir Next.js panosu ile (ör. maç skoru gibi) gerçek zamanlı bilgileri gösterin.

Sonuç

FARM uygulama oluşturucu, FastAPI, React ve MongoDB’yi entegre eden önceden yapılandırılmış, üretime hazır bir yığın sunarak tam yığın geliştirmeyi kolaylaştırır. Kurulum görevlerini otomatikleştirmesi, en iyi uygulamalara bağlı kalması ve esnek mimarisi sayesinde Python geliştiricileri için vazgeçilmez bir araçtır. İster bir görev yöneticisi ister karmaşık bir web uygulaması oluşturuyor olun, FARM oluşturucu geliştirmeyi hızlandırır ve ölçeklenebilirliği garanti eder. Kurulum talimatlarını izleyerek bugün deneyin ve potansiyelini açığa çıkarmak için GitHub deposundaki tam dokümantasyonu keşfedin!

Daha fazla bilgi edinmek isterseniz şu faydalı kaynaklara göz atın:

• Resmi depo: Kaynak kodu inceleyin, tam dokümantasyonu okuyun, güncellemeleri görün veya katkıda bulunun.
• FastAPI dokümantasyonu: FastAPI’nin özellikleri ve arka ucu nasıl güçlendirdiği hakkında daha fazla bilgi edinin.
• FastAPI’ye Giriş Kursu: HTTP işlemleri, doğrulama ve asenkron yürütmede ustalaşarak FastAPI ile sağlam, üretim düzeyinde API’ler geliştirin; verimli veri ve ML hatları oluşturun.