Django ve Next.js ile Modern API Entegrasyonu -01
Bu yazımda, Django ve Next.js’i birleştirerek REST API tabanlı bir uygulama geliştirme sürecinin, Django tabanlı backend kısmını ele alacağız.
Yazılım geliştiriciler olarak proje geliştiriken sürekli değişen teknolojiler arasında, modern uygulamaların gereksinimlerini karşılamak için hem güçlü bir backend hem de esnek bir frontend yapısına ihtiyaç duyarız. Django, sağlam ve güvenilir bir backend altyapısı sunarken, Next.js ile dinamik ve kullanıcı dostu bir frontend oluşturabiliriz. Bu yazımda da Django ve Next.js kullanarak REST API tabanlı temel gereksinimleri içeren bir proje geliştirmeye çalışacağım. Django kullanarak backend işlemlerine başlayalım.
Kullandığım Temel Araçlar
Sıfırdan başlayacağımız için önce bazı temel araçları kurmamız gerekiyor. Şuanda kendi kullandığım sürümleride yazacağım. Ben projemi Linux işletim sistemi ile geliştireceğim. IDE olarak VSCode kullanacağım.
1-Python’ı bu linkten üzerinden indirebilirsiniz.
2-Node.js’in LTS sürümünü bu linten indirebilirsiniz.
Kontrol etmek için — version yazarak dosyaların kurulup kurulmadığını kontrol edebiliriz. Şimdi proje adımlarına geçebilirz.
ADIM 1:Django Backend Hazırlığı
Sanal ortam oluşturma (virtual environment)
Bilgisayarımızda birden fazla Python projesi olabilir. Her proje farklı kütüphane ve versiyon gerektirebilir. Bu durumda da kütüphane yüklemeleri karmaşıklık oluşturabilir. Bizde sistemdeki projelerden bağımsız olarak sanal bir ortam oluşturuyoruz. Bu sanal ortam sayesinde projeye ait ortamlar oluşturabiliyoruz. Tek projeniz olsa bile kullanılması tavsiye ediyorum.
python3 -m venv <environment_adi>
virtualenv <environment_adi>
source <environment_adi>/bin/active
Django ve gerekli paketleri yükleme
pip install django # Web framework
djangorestframework # REST API araçları
django-cors-headers # Farklı origin’lerden istek izni
Django proje oluşturma
Django projesi oluşturup REST API endpoint’lerini yapılandıracağız. Bunun için Django Rest Framework (DRF) kullanacağız. İlk olarak projemizi oluşturmakla başlıyoruz.
django-admin startproject projeadi
cd projeadi
django projemizi oluşturduk. Şimdide ana projemize bir uygulama ekleyelim.
python manage.py startapp api
proje yapımız bu şekilde oluştu. mybackendproject ana projemiz. api ise uygulamamız. Şimdi de uygun gereklilikleri indirelim.
pip install djangorestframework
settings.py Yapılandırması
setting.py django projemize ait yapılandırılmaların barındığı yerdir ayrıca projemizin tüm ayarlarını yapabileceğimiz kısımdır. Projemize api isminde uygulama eklemiştik ana projemizin bunu tanıması için INSTALLED_APPS kısmına eklediğimiz uygulamaların ismini eklememiz lazım. restframeworkü de kullanabilmek için onuda ekliyoruz.
Genel olarak işlemler tamam. Django ve next.js entegrasyonun izinleri için CORS ayarlarını projemize uygulayalım. CORS ayarlamaları erişim izni kontrolünü sağlayan bir mekanizmadır. Yapılmaması takdirde
INSTALLED_APPS = [
…
‘corsheaders’,
]
MIDDLEWARE = [
‘corsheaders.middleware.CorsMiddleware’,
…
]
CORS_ALLOWED_ORIGINS = [
“http://localhost:3000", # Next.js geliştirme sunucusu
]
ADIM 2: Django Model ve Serializer Oluşturma
Basit bir model ve serializer oluşturuyoruz. İlk olak models.py dosyamızı kodlayalım. models.py ‘ ı oluşturmamızdaki amaç veritabanındaki tabloları tanımlamaktır. Task ismindeki tablonun name, description ve price özelliklerini models.py da tanımlıyoruz. self.name ile de bu nesne görüntülendiğinde ismini döndürmesini sağlıyoruz.
Modelimizi oluşturduk. Sıra basit bir serializer oluşturmakta. Serializer’lar, Django modellerindeki verileri JSON formatına dönüştürür ve tam tersini yapar. Bu, frontend ile backend arasında veri alışverişini kolaylaştırır. Model’deki veriler JSON formatına çevrilerek API aracılığıyla Next.js’e aktarılır.
Burada ilk olarak import işlemlerimizi yapıyoruz. models.py da tanımladığımız Task‘ı kullanabilmek için models i import ediyoruz. İndirmiş olduğumuz rest_framework’ü de import ediyoruz. TaskSerizlizers sınıfını oluşturuyoruz.serializers.ModelSerializers Django REST Framework'de, modeller için hazır serializer sınıfıdır. Elle alan tanımlamaya gerek kalmadan otomatik olarak eşleme yapar. Meta Serializer ile ilgili ayarların yapıldığı özel bir alt sınıftır. model hangisınıfın serializer edileceğinini belirtir. fields ise Serializer’a dahil edilecek alanları belirtir. Biz tamamını dahil ediyoruz.
ADIM 3: Views ve URL tanımlama
Şimdi de views.py kodlarımızı yazalım. views.py API işlemlerinde genellikle serializers ile birlikte çalışır. Amaç istekleri kodlarımıza göre işlemek, veriyi almak ve yanıt göndürmektir.
get metodu, tüm görevleri veritabanından çeker, TaskSerializer ile JSON formatına çevirir ve API'ye gönderir.
post metodu, kullanıcıdan gelen JSON verilerini alır, doğrular ve veritabanına kaydeder.
views.py’ı da tanımladığımıza göre urls.py’ı tanımlayabiliriz. urls.py Django’nun URL yönlendirme sistemidir. URL ile hangi view’in çalıştırılacağını tanımlar. Next.js de bu URL leri kullanarak işlemlerimizi yapacağız. “ / ” işaretine bile dikkat edilmeli. İlk olarak ana projemizin urls.py’ını oluşturalım.
api uygulamasının urls.py dosyasını bağlar. api.urls. içindeki yönlendirmeler bu noktadan itibaren uygulanır. Artık http://localhost:8000/api/ yazdığımızda bu bizi api uygulamamızın urls.py kısmına yönlendirecek. Bu yönlendirmeden sonra uygulamamızın urls.py’ını tanımlayalım. Buradaki amaç api uygulamasına ait view’ler için URL tanımları yapılır.
Kullanıcı http://localhost:8000/api/tasks/ istek gönderdiği zaman views.py da yazmış olduğumuz TasktList çalıştırılır. Şimdi yaptığımız değişiklikleri Django’ya bildireceğiz ve veritabanı şemasını güncelleyeceğiz.
python manage.py makemigrations
python manage.py migrate
bu işlemlerden sonra no such table: api_task hatasını aldım. Django’nun veritabanında api_task tablosunu bulamamasından kaynaklanıyor. onun için
rm -rf api/migrations/ __pycache__ db.sqlite3 #dikkatli kullanılmalı
python manage.py makemigrations
python manage.py migrate
işlemlerini yapıyorum. sonrasında python manage.py runserver komutu ile uygulamamızı çalıştırıyoruz.
Harika. Projemiz ayağa kalktı. Django kısmını başarıyla tamamlamış olduk. Next.js tabanlı frontend kısmınıda diğer yazımda bahsedeceğim.
Buraya kadar okuduğunuz için teşekkür ederim😃.Merak edip araştırdığım konuları Medium da paylaşmaya devam edeceğim. Birlikte okuyup, gelişmeye devam edelim..
