Django ve React ile Müşteri Bilgilerini Yöneten Modern Bir Web Uygulaması Nasıl Geliştirilir? (Ubuntu 18.04 Üzerinde)

Django ve React ile Müşteri Bilgilerini Yöneten Modern Bir Web Uygulaması Nasıl Geliştirilir? (Ubuntu 18.04 Üzerinde)

Modern web uygulamaları, kullanıcı deneyimi, performans ve ölçeklenebilirlik açısından sürekli gelişen beklentilere yanıt vermek zorundadır. Bu beklentileri karşılamak için birçok geliştirici, güçlü bir arka uç (backend) çerçevesi ile dinamik ve etkileşimli bir ön uç (frontend) kütüphanesini bir araya getirmeyi tercih eder. Bu makalede, Python tabanlı popüler bir web çerçevesi olan Django’yu RESTful API oluşturmak için ve JavaScript tabanlı, kullanıcı arayüzü geliştirmek için tercih edilen React’ı ön uçta kullanılarak, müşteri bilgilerini yöneten modern bir web uygulaması geliştirmeyi adım adım inceleyeceğiz. Tüm bu süreçleri Ubuntu 18.04 işletim sistemi üzerinde gerçekleştireceğiz.

Müşteri İlişkileri Yönetimi (CRM) sistemleri, işletmeler için kritik öneme sahiptir. Müşteri verilerini etkin bir şekilde yönetmek, satışları artırmak, müşteri memnuniyetini yükseltmek ve daha iyi iş kararları almak için temel bir gerekliliktir. Geliştireceğimiz uygulama, müşterilerin temel bilgilerini (ad, soyad, e-posta, telefon, adres vb.) ekleme, görüntüleme, düzenleme ve silme yeteneklerine sahip olacak.

1. Giriş: Modern Web Uygulamalarına Giriş ve Neden Django/React?

Günümüz web uygulamaları, genellikle bir tarayıcıda çalışan ve sunucu ile iletişim kurarak veri alıp gönderen tek sayfa uygulamaları (Single Page Application – SPA) mimarisini benimsemektedir. SPA’lar, sayfa yenilemeleri olmadan hızlı ve akıcı bir kullanıcı deneyimi sunar. Bu mimaride, backend bir RESTful API aracılığıyla verileri JSON formatında sağlar ve frontend bu verileri tüketerek kullanıcı arayüzünü dinamik olarak günceller.

Neden Django?
Django, “aceleci geliştiriciler için mükemmeliyetçi bir çerçeve” sloganıyla bilinen, yüksek seviyeli bir Python web çerçevesidir. Hızlı geliştirme, temiz ve pragmatik tasarım felsefesi ile öne çıkar.
* Tam Donanımlı: Kendi ORM’i (Object-Relational Mapper), yönetim paneli, kimlik doğrulama sistemi ve daha birçok özelliği ile gelir.
* Güvenlik: CSRF, XSS, SQL Injection gibi yaygın güvenlik açıklarına karşı yerleşik korumalar sunar.
* Ölçeklenebilirlik: Büyük ve karmaşık projeler için uygundur.
* DRF (Django REST Framework): Django ile kolayca güçlü ve esnek RESTful API’ler oluşturmayı sağlar.

Neden React?
React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir.
* Bileşen Tabanlı Mimari: Uygulamayı küçük, yeniden kullanılabilir bileşenlere ayırarak geliştirme sürecini basitleştirir.
* Sanal DOM: Performanslı güncellemeler sağlar, sadece değişen kısımları render eder.
* Geniş Ekosistem: Büyük bir topluluğa, zengin kütüphanelere ve araçlara sahiptir.
* Tek Yönlü Veri Akışı: Uygulamanın durumunu yönetmeyi kolaylaştırır.

Ubuntu 18.04:
Ubuntu, sunucu ortamlarında yaygın olarak kullanılan stabil ve güvenilir bir Linux dağıtımıdır. 18.04 LTS (Long Term Support) sürümü, uzun süreli destek sunması nedeniyle üretim ortamları için sıkça tercih edilir. Geliştirme ortamımızı bu platform üzerinde kuracağız.

2. Proje Ön Hazırlığı: Geliştirme Ortamının Kurulumu (Ubuntu 18.04)

Uygulama geliştirmeye başlamadan önce, gerekli tüm yazılımları Ubuntu 18.04 sistemimize kurmamız gerekiyor.

2.1. Sistem Güncellemesi ve Temel Paketler

İlk adım olarak, sistem paket listemizi güncelleyelim ve yükseltelim:

sudo apt update
sudo apt upgrade -y

Geliştirme için gerekli olabilecek bazı temel paketleri kuralım:

sudo apt install build-essential libssl-dev libffi-dev python3-dev -y

2.2. Python ve pip Kurulumu

Ubuntu 18.04, Python 3 ile birlikte gelir. Ancak pip (Python paket yöneticisi) ve venv (sanal ortam oluşturma aracı) kurulu olmayabilir.

sudo apt install python3-pip python3-venv -y

Sanal ortamlar, projemizin bağımlılıklarını sistem genelindeki Python paketlerinden izole etmek için kritik öneme sahiptir. Projemiz için bir sanal ortam oluşturalım ve etkinleştirelim:

mkdir customer_crm
cd customer_crm
python3 -m venv venv_backend
source venv_backend/bin/activate

Artık terminalin başında (venv_backend) göreceksiniz, bu sanal ortamın etkin olduğunu gösterir.

2.3. Node.js ve npm Kurulumu

React uygulaması geliştirmek için Node.js ve npm’e (Node paket yöneticisi) ihtiyacımız var. Ubuntu 18.04’ün varsayılan depolarındaki Node.js sürümü eski olabilir, bu yüzden daha güncel bir sürüm için NodeSource deposunu kullanmak daha iyidir.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs -y

Kurulumu doğrulayın:

node -v
npm -v

Bu komutlar Node.js ve npm’in sürüm numaralarını göstermelidir.

2.4. Veritabanı Kurulumu (PostgreSQL Önerisi)

Django, varsayılan olarak SQLite kullanabilir ancak üretim ortamları için PostgreSQL gibi daha güçlü bir veritabanı önerilir.

sudo apt install postgresql postgresql-contrib -y

PostgreSQL kurulumundan sonra, bir veritabanı kullanıcısı ve veritabanı oluşturalım:

sudo -i -u postgres psql

PostgreSQL komut isteminde:

CREATE USER crmuser WITH PASSWORD 'your_secure_password';
CREATE DATABASE customer_crm_db OWNER crmuser;
GRANT ALL PRIVILEGES ON DATABASE customer_crm_db TO crmuser;
\q

your_secure_password yerine güçlü bir şifre belirlediğinizden emin olun.

3. Django Backend Geliştirme: REST API Oluşturma

Şimdi sanal ortamımız etkin durumdayken Django backend’imizi geliştirmeye başlayabiliriz.

3.1. Django Projesi ve Uygulaması Oluşturma

Gerekli Django ve Django REST Framework paketlerini kuralım:

pip install django djangorestframework psycopg2-binary

psycopg2-binary paketi, Django’nun PostgreSQL ile iletişim kurmasını sağlar.
Şimdi bir Django projesi ve bir uygulama oluşturalım:

django-admin startproject customer_crm_backend .
python manage.py startapp customers

customer_crm_backend/settings.py dosyasını açın ve INSTALLED_APPS listesine rest_framework ve customers uygulamalarını ekleyin. Ayrıca veritabanı ayarlarını PostgreSQL’e göre yapılandırın:

# customer_crm_backend/settings.py

INSTALLED_APPS = [
    # ... diğer uygulamalar ...
    'rest_framework',
    'customers',
]

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'customer_crm_db',
        'USER': 'crmuser',
        'PASSWORD': 'your_secure_password',
        'HOST': 'localhost',
        'PORT': '',
    }
}

CORS ayarları için daha sonra eklenecek
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000', # React uygulamasının çalıştığı port
]
CORS_ALLOW_CREDENTIALS = True

3.2. Müşteri Modeli Tanımlama

customers/models.py dosyasında müşteri verilerini saklamak için bir model oluşturalım:

# customers/models.py

from django.db import models

class Customer(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)
    phone = models.CharField(max_length=20, blank=True, null=True)
    address = models.TextField(blank=True, null=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

Modeli oluşturduktan sonra veritabanı göçlerini (migrations) yapmamız gerekir:

python manage.py makemigrations
python manage.py migrate

Django’nun yönetim panelini kullanmak için bir süper kullanıcı oluşturalım:

python manage.py createsuperuser

3.3. Serializers ile Veri Dönüşümü

Django modellerini JSON gibi formatlara dönüştürmek için serializers kullanırız. customers uygulaması içinde serializers.py adında yeni bir dosya oluşturalım:

# customers/serializers.py

from rest_framework import serializers
from .models import Customer

class CustomerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Customer
        fields = '__all__' # Tüm alanları dahil et

3.4. ViewSets ve Routerlar ile API Endpointleri

customers/views.py dosyasında Customer modeli için bir ViewSet oluşturalım. ModelViewSet, CRUD (Create, Retrieve, Update, Delete) operasyonlarını otomatik olarak sağlar.

# customers/views.py

from rest_framework import viewsets
from .models import Customer
from .serializers import CustomerSerializer

class CustomerViewSet(viewsets.ModelViewSet):
    queryset = Customer.objects.all().order_by('-created_at')
    serializer_class = CustomerSerializer

Şimdi bu ViewSet için URL’leri tanımlamamız gerekiyor. customers uygulaması içinde urls.py adında yeni bir dosya oluşturalım:

# customers/urls.py

from rest_framework.routers import DefaultRouter
from .views import CustomerViewSet

router = DefaultRouter()
router.register(r'customers', CustomerViewSet)

urlpatterns = router.urls

Son olarak, ana proje customer_crm_backend/urls.py dosyasında bu URL’leri dahil edelim:

# customer_crm_backend/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('customers.urls')), # API URL'lerini dahil et
]

Backend sunucumuzu çalıştırabiliriz:

python manage.py runserver

Tarayıcınızda http://127.0.0.1:8000/api/customers/ adresine giderek DRF’nin otomatik olarak oluşturduğu API arayüzünü görebilirsiniz.

3.5. Authentication ve Yetkilendirme (Opsiyonel ama Önemli)

Gerçek bir uygulamada API’lerinizi güvence altına almanız gerekir. Django REST Framework, Token Authentication, Session Authentication, JWT (JSON Web Token) gibi çeşitli kimlik doğrulama yöntemlerini destekler. Basit bir token tabanlı kimlik doğrulama için:
settings.py içinde REST_FRAMEWORK ayarını ekleyin:

# customer_crm_backend/settings.py

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ]
}
INSTALLED_APPS += [
    'rest_framework.authtoken',
]

makemigrations ve migrate komutlarını tekrar çalıştırın.
Bir kullanıcı için token oluşturmak için createsuperuser ile oluşturduğunuz kullanıcıyı kullanabilir veya python manage.py drf_create_token komutunu kullanabilirsiniz.

4. React Frontend Geliştirme: Kullanıcı Arayüzü Oluşturma

Şimdi sıra React ile kullanıcı arayüzünü oluşturmaya geldi. Backend projemizin kök dizininden ayrı bir dizinde frontend projemizi oluşturalım.

cd .. # customer_crm dizinine geri dön
npx create-react-app customer-crm-frontend
cd customer-crm-frontend

Gerekli paketleri kuralım:

npm install axios react-router-dom

axios HTTP istekleri yapmak için, react-router-dom ise sayfa yönlendirmeleri için kullanılacak.

4.1. Proje Yapısı ve Bileşenler

src dizini altında components ve pages adında dizinler oluşturalım.

customer-crm-frontend/
├── public/
├── src/
│   ├── components/
│   │   ├── CustomerForm.js
│   │   └── CustomerList.js
│   ├── pages/
│   │   ├── HomePage.js
│   │   └── CustomerDetailPage.js
│   ├── App.js
│   ├── index.js
│   └── ... diğer dosyalar
├── package.json
└── ...

4.2. API Entegrasyonu (axios kullanımı)

API isteklerini yönetmek için src/api.js adında bir dosya oluşturabiliriz:

// src/api.js
import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:8000/api/', // Django backend API adresimiz
    headers: {
        'Content-Type': 'application/json',
        // 'Authorization': Token YOUR_AUTH_TOKEN // Eğer kimlik doğrulama kullanıyorsanız
    }
});

export default api;

4.3. Müşteri Listeleme Bileşeni (CustomerList.js)

src/components/CustomerList.js dosyasını oluşturalım:

// src/components/CustomerList.js
import React, { useEffect, useState } from 'react';
import api from '../api';
import { Link } from 'react-router-dom';

function CustomerList() {
    const [customers, setCustomers] = useState([]);

    useEffect(() => {
        api.get('/customers/')
            .then(response => setCustomers(response.data))
            .catch(error => console.error('Müşterileri çekerken hata:', error));
    }, []);

    const handleDelete = (id) => {
        if (window.confirm('Bu müşteriyi silmek istediğinizden emin misiniz?')) {
            api.delete(/customers/${id}/)
                .then(() => {
                    setCustomers(customers.filter(customer => customer.id !== id));
                })
                .catch(error => console.error('Müşteri silinirken hata:', error));
        }
    };

    return (
        

            
Müşteri Listesi
            Yeni Müşteri Ekle
            

                {customers.map(customer => (
                    

                        {customer.name} - {customer.email}
                        /customers/edit/${customer.id}} className="btn btn-sm btn-info">Düzenle
                         handleDelete(customer.id)} className="btn btn-sm btn-danger">Sil
                    
                ))}
            
        
    );
}

export default CustomerList;

4.4. Müşteri Ekleme/Düzenleme Bileşeni (CustomerForm.js)

src/components/CustomerForm.js dosyasını oluşturalım. Bu form hem yeni müşteri eklemek hem de mevcut müşteriyi düzenlemek için kullanılabilir.

// src/components/CustomerForm.js
import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import api from '../api';

function CustomerForm() {
    const [customer, setCustomer] = useState({ name: '', email: '', phone: '', address: '' });
    const navigate = useNavigate();
    const { id } = useParams(); // URL'den müşteri ID'sini al (düzenleme modunda)

    useEffect(() => {
        if (id) {
            api.get(/customers/${id}/)
                .then(response => setCustomer(response.data))
                .catch(error => console.error('Müşteri bilgisi çekilirken hata:', error));
        }
    }, [id]);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setCustomer(prevCustomer => ({ ...prevCustomer, [name]: value }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        if (id) {
            // Düzenleme
            api.put(/customers/${id}/, customer)
                .then(() => navigate('/'))
                .catch(error => console.error('Müşteri güncellenirken hata:', error));
        } else {
            // Yeni ekleme
            api.post('/customers/', customer)
                .then(() => navigate('/'))
                .catch(error => console.error('Yeni müşteri eklenirken hata:', error));
        }
    };

    return (
        

            
{id ? 'Müşteriyi Düzenle' : 'Yeni Müşteri Ekle'}
            

                

                    Ad:
                    
                
                

                    E-posta:
                    
                
                

                    Telefon:
                    
                
                

                    Adres:
                    
                
                {id ? 'Güncelle' : 'Ekle'}
            
        
    );
}

export default CustomerForm;

4.5. Routing (react-router-dom)

src/App.js dosyasını yönlendirmeleri ayarlamak için güncelleyelim:

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import CustomerList from './components/CustomerList';
import CustomerForm from './components/CustomerForm';
import './App.css'; // Temel stil dosyası

function App() {
    return (
        
            

                
                

                    
                        } />
                        } />
                        } />
                    
                
            
        
    );
}

export default App;

src/App.css dosyasında basit stil tanımlamaları yapabilirsiniz. Frontend uygulamasını başlatmak için:

npm start

Tarayıcınızda http://localhost:3000 adresine giderek React uygulamanızı görebilirsiniz.

4.6. Durum Yönetimi (Context API veya Redux)

Küçük uygulamalar için useState ve prop drilling yeterli olabilirken, daha karmaşık uygulamalarda global durum yönetimi için React Context API veya Redux gibi kütüphaneler tercih edilir. Bu makalede basitlik adına useState kullanılmıştır, ancak büyüyen bir uygulamada bu araçları değerlendirmek önemlidir. Context API, belirli bir alt ağaçtaki tüm bileşenlerin aynı veriye erişmesini sağlayarak prop drilling sorununu çözer. Redux ise daha büyük ve karmaşık uygulamalar için merkezi bir durum deposu sunar.

5. Django ve React Entegrasyonu: İletişim ve Dağıtım Yaklaşımları

Backend ve frontend ayrı ayrı çalıştığı için birbirleriyle iletişim kurmaları ve sonunda tek bir uygulama olarak dağıtılmaları gerekmektedir.

5.1. CORS Yapılandırması

Frontend (React) ve backend (Django) farklı portlarda çalıştığı için tarayıcılar güvenlik nedeniyle “Cross-Origin Resource Sharing” (CORS) politikalarını uygular. Django’nun React uygulamamızdan gelen isteklere izin vermesi için django-cors-headers paketini kullanmalıyız.
Backend sanal ortamınız etkin durumdayken:

pip install django-cors-headers

customer_crm_backend/settings.py dosyasını güncelleyin:

# customer_crm_backend/settings.py

INSTALLED_APPS = [
    # ...
    'corsheaders', # CORS uygulamasını ekle
    # ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # En üste yakın ekle
    # ... diğer middleware'ler ...
]

CORS_ALLOWED_ORIGINS = [ # Belirli originlere izin ver
    "http://localhost:3000",
]
Veya tüm originlere izin vermek için (sadece geliştirme ortamı için önerilir)
CORS_ALLOW_ALL_ORIGINS = True

5.2. Statik Dosyalar ve Medya Yönetimi

React uygulaması derlendiğinde (build edildiğinde) statik HTML, CSS ve JavaScript dosyaları üretir. Üretim ortamında bu dosyaların sunulması gerekir.

5.3. Geliştirme Ortamında Birlikte Çalıştırma

Geliştirme sırasında Django backend’i python manage.py runserver ile bir terminalde ve React frontend’i npm start ile başka bir terminalde çalıştırılır. CORS ayarları sayesinde bu iki farklı sunucu birbirleriyle iletişim kurabilir.

5.4. Üretim Ortamına Dağıtım İçin Yaklaşımlar

Üretim ortamında, React uygulamasını derleyip (build) statik dosyalarını oluştururuz ve bu dosyaları bir web sunucusu (Nginx gibi) aracılığıyla sunarız. Django backend’i ise Gunicorn gibi bir WSGI sunucusu ile çalıştırılır ve Nginx bu sunucuya ters proxy olarak istekleri yönlendirir.

Adımlar:
1. React Uygulamasını Derle:

cd customer-crm-frontend
    npm run build

Bu komut, build dizini altında optimize edilmiş statik dosyaları oluşturur.

2. Gunicorn ile Django’yu Çalıştır:

cd ../customer_crm_backend
    pip install gunicorn
    gunicorn customer_crm_backend.wsgi:application --bind 0.0.0.0:8000

Bu, Django uygulamanızı 8000 portunda çalıştırır.

3. Nginx ile Ters Proxy ve Statik Dosya Sunumu:
Nginx, hem React’in derlenmiş statik dosyalarını sunacak hem de API isteklerini Gunicorn’a yönlendirecektir.

sudo apt install nginx -y
    sudo nano /etc/nginx/sites-available/customer_crm

İçeriği aşağıdaki gibi düzenleyin:

server {
        listen 80;
        server_name your_domain_or_ip; # Kendi alan adınızı veya IP adresinizi girin

        location / {
            root /path/to/customer_crm/customer-crm-frontend/build; # React build dizini
            try_files $uri /index.html;
        }

        location /api/ {
            proxy_pass http://127.0.0.1:8000; # Gunicorn'un çalıştığı adres
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        # Django'nun statik dosyaları (gerekirse)
        # location /static/ {
        #     alias /path/to/customer_crm/customer_crm_backend/static_root/;
        # }
    }

your_domain_or_ip ve /path/to/customer_crm/ kısımlarını kendi ortamınıza göre güncelleyin.
Nginx yapılandırmasını etkinleştirin ve yeniden başlatın:

sudo ln -s /etc/nginx/sites-available/customer_crm /etc/nginx/sites-enabled/
    sudo systemctl restart nginx

Bu yapılandırma ile, your_domain_or_ip adresine gelen tüm istekler React uygulamasını sunacak, /api/ ile başlayan istekler ise Django backend’ine yönlendirilecektir.

6. Test ve Güvenlik

Her modern web uygulamasında test ve güvenlik kritik öneme sahiptir.

6.1. Backend Testleri (Django)

Django, testler yazmak için kapsamlı bir çerçeve sunar. TestCase sınıfını kullanarak model, view ve API testleri yazabilirsiniz. rest_framework.test.APITestCase API endpoint’lerini test etmek için özel araçlar sağlar.

# customers/tests.py
from rest_framework.test import APITestCase
from rest_framework import status
from django.urls import reverse
from .models import Customer

class CustomerAPITest(APITestCase):
    def setUp(self):
        self.customer_data = {'name': 'Test Müşteri', 'email': 'test@example.com'}
        self.customer = Customer.objects.create(self.customer_data)
        self.list_url = reverse('customer-list') # router'dan gelen URL adı
        self.detail_url = reverse('customer-detail', kwargs={'pk': self.customer.id})

    def test_create_customer(self):
        response = self.client.post(self.list_url, {'name': 'Yeni Müşteri', 'email': 'yeni@example.com'})
        self.assertEqual(response.status_code, status.HTTP_201_CREATED)
        self.assertEqual(Customer.objects.count(), 2)

    def test_get_customer_list(self):
        response = self.client.get(self.list_url)
        self.assertEqual(response.status_code, status.HTTP_200_OK)
        self.assertEqual(len(response.data), 1)

    # ... diğer testler (güncelleme, silme)

Testleri çalıştırmak için: python manage.py test customers

6.2. Frontend Testleri (Jest, React Testing Library)

React uygulamaları için Jest bir test çalıştırıcısı, React Testing Library ise bileşenlerin kullanıcı etkileşimlerini simüle ederek test edilmesini sağlayan popüler araçlardır. create-react-app varsayılan olarak bu araçlarla gelir.

// src/components/CustomerList.test.js
import { render, screen, waitFor } from '@testing-library/react';
import CustomerList from './CustomerList';
import api from '../api';

jest.mock('../api'); // api modülünü mock'la

test('renders customer list', async () => {
  api.get.mockResolvedValueOnce({ data: [{ id: 1, name: 'Ali', email: 'ali@example.com' }] });
  render();
  await waitFor(() => screen.getByText(/Ali - ali@example.com/i));
  expect(screen.getByText(/Müşteri Listesi/i)).toBeInTheDocument();
});

Testleri çalıştırmak için: npm test

6.3. Güvenlik Önlemleri

* HTTPS: Üretim ortamında her zaman HTTPS kullanın. Let’s Encrypt gibi hizmetlerle ücretsiz SSL sertifikaları alabilirsiniz.
* CSRF (Cross-Site Request Forgery): Django REST Framework, varsayılan olarak CSRF koruması sağlar. React uygulamanızdan POST/PUT/DELETE istekleri yaparken CSRF token’ını göndermek isteyebilirsiniz (eğer Session Authentication kullanıyorsanız). Token Authentication kullanılıyorsa, bu genellikle bir sorun değildir.
* XSS (Cross-Site Scripting): React, varsayılan olarak veriyi sanitize ederek XSS saldırılarına karşı koruma sağlar. Ancak, kullanıcıdan alınan veriyi direkt olarak dangerouslySetInnerHTML gibi özelliklerle kullanmaktan kaçının.
* SQL Injection: Django ORM, parametreli sorgular kullanarak SQL Injection saldırılarına karşı koruma sağlar. Ham SQL sorguları yazmaktan kaçının.
* API Anahtarları ve Hassas Veriler: API anahtarları, veritabanı şifreleri gibi hassas bilgileri doğrudan kod içine yazmaktan kaçının. Bunları ortam değişkenleri veya güvenli yapılandırma yönetimi araçları aracılığıyla yönetin.
* Yetkilendirme: API endpoint’lerinize kimlerin erişebileceğini sıkı bir şekilde kontrol edin. Django REST Framework’ün izin sınıflarını (permissions) etkili bir şekilde kullanın.

7. Sonuç ve Gelecek Adımlar

Bu makalede, Ubuntu 18.04 üzerinde Django ve React kullanarak temel bir müşteri yönetim sistemi için modern bir web uygulaması geliştirmeyi adım adım inceledik. Backend için Django REST Framework ile güçlü bir API oluşturduk, frontend için React ile dinamik ve etkileşimli bir kullanıcı arayüzü tasarladık ve bu iki katmanı birbirine entegre etmenin yollarını ele aldık. Ayrıca, geliştirme ve üretim ortamlarındaki dağıtım yaklaşımlarına ve uygulamanın güvenliğine değindik.

Bu proje, modern web geliştirme paradigmasının temelini oluşturmaktadır. Buradan hareketle uygulamanızı daha da geliştirebilirsiniz:

* Daha Fazla Özellik: Müşteri arama, filtreleme, raporlama, müşteri grupları, notlar veya etkileşim geçmişi gibi özellikler ekleyebilirsiniz.
* Kullanıcı Yönetimi ve Rolleri: Farklı kullanıcı rolleri (yönetici, satış temsilcisi) ve bunların farklı verilere erişim yetkileri tanımlayabilirsiniz.
* Gelişmiş Durum Yönetimi: Uygulamanız büyüdükçe Redux, Zustand veya Recoil gibi daha gelişmiş durum yönetimi kütüphanelerini React tarafında kullanmayı düşünebilirsiniz.
* Dockerizasyon: Uygulamanızı Docker konteynerlerine alarak geliştirme, test ve dağıtım süreçlerini standartlaştırabilir ve kolaylaştırabilirsiniz.
* CI/CD (Sürekli Entegrasyon/Sürekli Teslimat): Git tabanlı bir CI/CD hattı kurarak kod değişikliklerinin otomatik olarak test edilmesini ve dağıtılmasını sağlayabilirsiniz.
* Bulut Dağıtımı: Uygulamanızı AWS, Google Cloud, Azure veya DigitalOcean gibi bulut sağlayıcılarına dağıtarak ölçeklenebilirlik ve yüksek erişilebilirlik sağlayabilirsiniz.
* Test Kapsamı: Uygulamanızın kritik kısımları için daha kapsamlı birim, entegrasyon ve uçtan uca (end-to-end) testler yazarak yazılım kalitesini artırın.

Django ve React’ın gücünü birleştirerek, hem performanslı hem de bakımı kolay, modern ve ölçeklenebilir web uygulamaları geliştirebilirsiniz. Bu makale, bu heyecan verici yolculuk için sağlam bir temel sunmaktadır.