Come creare una semplice app con Django e React

Come creare una semplice app con Django e React

Vuoi creare un'applicazione web con un backend solido e un frontend dinamico? Abbinare Django, un framework Python, a React, una libreria JavaScript, è un ottimo modo per raggiungere questo obiettivo. Django gestisce le attività di backend come la gestione del database e la creazione di API, mentre React crea un'interfaccia utente reattiva e interattiva.

Passaggi chiave:

1. Configurazione dell’ambiente:
   • Installa Python 3.x per Django e Node.js per React.
   • Utilizza ambienti virtuali per gestire le dipendenze di Python.
   • Verifica le installazioni con python --version, node --version, e npm --version.
2. Organizza il tuo progetto:
   • Crea cartelle separate per il backend Django e il frontend React.
   • Utilizza django-admin startproject per la configurazione del backend e npx create-react-app per l’inizializzazione del frontend.
3. Crea il backend:
   • Crea le app Django, definisci i modelli e genera le migrazioni.
   • Utilizza Django REST Framework per creare endpoint API.
   • Configurare django-cors-headers per abilitare la comunicazione tra frontend e backend.
4. Sviluppare il frontend:
   • Utilizza i componenti React per gestire le attività e le interazioni degli utenti.
   • Installa Axios per le richieste API e integralo con gli endpoint di Django.
   • Personalizza l'app con CSS per ottenere un'interfaccia utente pulita.
5. Collegamento e test:
   • Esegui Django su localhost:8000 e React su localhost:3000.
   • Testare gli endpoint API con strumenti come Postman o direttamente nel browser.
   • Assicurati che le impostazioni CORS siano corrette per garantire una comunicazione fluida.

Questa configurazione ti consente di sviluppare in modo efficiente un'applicazione full-stack con una chiara separazione tra backend e frontend. Segui questi passaggi per creare un'applicazione web scalabile e interattiva.

Progetto Django e React per principianti - Realizza un'app FullStack per prendere appunti

Requisiti di configurazione e installazione

Prima di iniziare a sviluppare la tua app Django e React, è fondamentale configurare l’ambiente di sviluppo con gli strumenti e le dipendenze necessari. Queste basi ti aiuteranno a creare, integrare e testare i tuoi componenti Django e React senza intoppi man mano che procedi.

Requisiti di sistema e strumenti

Per iniziare, il tuo computer di sviluppo dovrà disporre di Python 3.x per Django e di Node.js per React. Nello specifico, Django 5.0 richiede Python 3.x, mentre React funziona con Node.js versione 12 o superiore.

Installazione di Python: puoi scaricare Python direttamente dal sito web ufficiale oppure utilizzare il gestore di pacchetti del tuo sistema. Per gli utenti macOS, Homebrew semplifica l’operazione con brew install python. Gli utenti Windows dovrebbero scaricare il programma di installazione da python.org, mentre gli utenti Linux possono installarlo con comandi come apt install python3 su Ubuntu o comandi simili per altre distribuzioni.

Configurazione di Node.js e npm: Node.js viene fornito in bundle con npm (Node Package Manager). Avrete bisogno di npm versione 6 o superiore; la versione 7.5.4 è una scelta affidabile. Scaricate Node.js da nodejs.org: npm sarà incluso automaticamente.

Ambienti virtuali Python: l’uso di ambienti virtuali è fondamentale per gestire le dipendenze specifiche di un progetto senza conflitti. È possibile utilizzare il modulo integrato venv o strumenti come pipenv o virtualenvwrapper per ulteriori funzionalità. Se si utilizza Windows, il virtualenvwrapper-win pacchetto offre funzionalità simili.

Per verificare le installazioni, eseguire questi comandi nel terminale:

python --version
node --version
npm --version

Creazione della struttura del progetto

Una struttura di progetto ben organizzata è essenziale per mantenere separati e gestibili il codice backend e quello frontend. Inizia creando una directory principale per il tuo progetto:

mkdir django-react-app
cd django-react-app

All’interno di questa directory, crea due cartelle: una per il backend Django e un’altra per il frontend React. Questa separazione ti consente di gestire e distribuire ciascuna parte in modo indipendente.

Configura il tuo ambiente virtuale Python all’interno della directory del progetto:

python -m venv venv

Attiva l'ambiente virtuale:

• Su macOS/Linux: source venv/bin/activate
• Su Windows: venv\Scripts\activate

Questo passaggio garantisce che tutte le dipendenze Python del tuo progetto siano isolate.

Installazione dei pacchetti necessari

Una volta preparato l'ambiente, è il momento di installare i pacchetti necessari sia per Django che per React.

Pacchetti backend di Django: Mentre l'ambiente virtuale è attivo, installa Django e le relative librerie di supporto utilizzando pip:

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django gestisce la logica lato server, la gestione del database e il routing degli URL.
• Django REST Framework semplifica il processo di creazione di API RESTful, facilitando la creazione di endpoint per il frontend React.
• Django-cors-headers abilita il Cross-Origin Resource Sharing (CORS), essenziale per la comunicazione tra il frontend React (in esecuzione sulla porta 3000) e il backend Django (in esecuzione sulla porta 8000).

Configurazione del frontend React: per configurare il tuo ambiente React, utilizza il create-react-app strumento. Questo comando inizializza un progetto React e installa tutte le dipendenze necessarie:

npx create-react-app frontend

In questo modo verrà creato un nuovo progetto React nella frontend directory, completo di pacchetti essenziali, strumenti di sviluppo e script di compilazione.

Pacchetto aggiuntivo per il frontend: dopo aver configurato il progetto React, accedi alla frontend directory e installa Axios, una libreria per effettuare richieste HTTP alla tua API Django:

cd frontend
npm install axios

A questo punto, il tuo ambiente di sviluppo è completamente attrezzato con Python 3.x, Django, Node.js, React e tutti gli strumenti necessari. L’ambiente virtuale Python garantisce che le dipendenze del backend siano isolate, mentre npm gestisce separatamente i pacchetti JavaScript. Ora sei pronto per iniziare a sviluppare la tua applicazione full-stack!

Creazione del backend con Django

Configurare un backend Django con modelli di database, endpoint API e integrazione per un frontend React.

Creazione di un progetto e di un'app Django

Inizia creando un progetto Django, che include impostazioni, configurazioni del database e opzioni specifiche dell’app. All’interno di questo progetto, creerai un’app Django: un pacchetto Python progettato per attività specifiche come la gestione dei dati degli utenti o dei contenuti.

Accedete alla directory principale del vostro progetto (dove è configurato il vostro ambiente virtuale) e create il progetto Django:

django-admin startproject backend .

Questo comando genera i file del progetto direttamente nella directory corrente, evitando la creazione di una cartella aggiuntiva. Noterai la presenza di nuovi file come manage.py (per l’esecuzione dei comandi Django) e una backend directory contenente file come settings.py, urls.py, asgi.py, e wsgi.py.

Successivamente, crea un'app per gestire funzionalità specifiche. Ad esempio, un sistema di gestione delle attività:

python manage.py startapp tasks

Questo crea una tasks directory con i file essenziali come models.py, views.py, admin.py, e una migrations cartella. Assicurati di evitare conflitti di nomi con nomi predefiniti come "django" o "test".

Registra l’app nelle impostazioni del tuo progetto aggiungendola all’ INSTALLED_APPS elenco in backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

Configurazione di modelli e serializzatori

Definisci la struttura dei dati con i modelli Django. Ad esempio, un semplice Task modello per l’app di gestione delle attività può essere aggiunto in tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

Questo modello include campi come CharField per testi brevi, TextField per contenuti più lunghi, BooleanField per valori vero/falso e DateTimeField per i timestamp. La Meta classe specifica opzioni come l'ordinamento predefinito.

Applica il modello al tuo database eseguendo le migrazioni:

python manage.py makemigrations tasks
python manage.py migrate

Per convertire i dati del modello in JSON, usa i serializzatori di Django REST Framework. In tasks/serializers.py, definire un serializzatore per il Task modello:

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at']
        read_only_fields = ['created_at', 'updated_at']

Il ModelSerializer genera automaticamente campi e metodi in base al modello. Elencare esplicitamente i campi garantisce di non esporre involontariamente dati sensibili.

Creazione degli endpoint dell’API

Django REST Framework semplifica la creazione delle API. Per le operazioni CRUD standard, utilizzare ViewSets i router per ottenere una struttura pulita e RESTful.

In tasks/views.py, creare le viste API:

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

Il ModelViewSet gestisce automaticamente l'elenco, la creazione, il recupero, l'aggiornamento e l'eliminazione delle attività.

Configurare il routing degli URL in tasks/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Includi questi URL nel file principale backend/urls.py :

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls')),
]

Configurazione delle intestazioni CORS

Per consentire al frontend React (in esecuzione sulla porta 3000) di comunicare con il backend Django (sulla porta 8000), configurare il Cross-Origin Resource Sharing (CORS). In assenza di questa configurazione, i browser bloccano le richieste cross-origin per motivi di sicurezza.

Aggiornare backend/settings.py per includere la configurazione CORS:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

Per un test veloce, puoi utilizzare CORS_ALLOW_ALL_ORIGINS = True, ma specificare le origini consentite è più sicuro.

Test degli endpoint API

Prima di integrare il frontend React, testare gli endpoint dell’API per assicurarsi che funzionino come previsto. Avviare il server di sviluppo Django:

python manage.py runserver

Accedere all'API all'indirizzo http://127.0.0.1:8000/api/tasks/. Utilizza l'API navigabile per testare operazioni come le richieste GET e POST.

In alternativa, eseguire i test con cURL o Postman:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

Per i test automatizzati, aggiungere casi di test in tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

Una volta pronto il backend, sei pronto per collegarlo al frontend React.

Creazione del frontend con React

Per creare un'interfaccia accattivante per il tuo backend Django, utilizzerai React per gestire le interazioni degli utenti: da visualizzare le attività a aggiungerne di nuove.

Configurazione di un progetto React

Inizia configurando il tuo frontend React utilizzando Create React App. Accedi alla directory principale del tuo progetto (dove si trova il tuo backend Django) ed esegui:

npx create-react-app frontend
cd frontend

Questo comando configura un'applicazione React con i file essenziali come package.json, src/App.js, e public/index.html. Include inoltre strumenti come webpack per il bundling, Babel per la compilazione di JavaScript e un server di sviluppo per i test.

Successivamente, installa Axios per gestire le richieste HTTP alla tua API Django:

npm install axios

Axios semplifica le chiamate API gestendo l’analisi dei dati JSON e offrendo una gestione degli errori migliore rispetto alla funzione integrata fetch() . Supporta inoltre funzionalità come gli intercettatori di richieste e risposte.

La struttura delle cartelle dovrebbe ora apparire così:

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

Per verificare che tutto funzioni, avvia il server di sviluppo di React:

npm start

In questo modo l'app verrà avviata all'indirizzo http://localhost:3000, visualizzando la pagina di benvenuto predefinita di React. Mantieni questo server in esecuzione durante lo sviluppo: si ricarica automaticamente quando apporti modifiche.

Creazione di componenti React

Creiamo un TaskList componente per visualizzare le attività recuperate dalla tua API Django. Aggiungi quanto segue a src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

Successivamente, crea un TaskForm componente per l’aggiunta di nuove attività. Aggiungilo a src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

Per applicare uno stile di base, crea un src/App.css file e aggiungi:

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

Gestione dello stato e integrazione con l’API

Hook di React come useState e useEffect semplificano la gestione dello stato e l'interazione con il backend Django. Per centralizzare le chiamate API, crea un file di servizio src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Infine, integra tutto in src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

Con questa configurazione, il frontend React è pronto a gestire le attività in modo interattivo, comunicando senza soluzione di continuità con il backend Django.

Collegare Django e React

Ora che il backend e il frontend sono attivi e funzionanti, il passo successivo consiste nel garantire una comunicazione fluida tra di essi. Ciò comporta la configurazione degli endpoint API, la gestione delle richieste e la risoluzione di eventuali problemi di integrazione.

Configurazione degli URL API in React

La vostra app React deve sapere dove trovare gli endpoint API di Django. Per farlo, aggiornate il src/services/api.js file con le configurazioni specifiche per l’ambiente:

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Per l’ambiente di produzione, aggiungi un .env file nella directory principale del tuo progetto React con il seguente contenuto:

REACT_APP_API_URL=https://your-production-domain.com/api

Questa configurazione garantisce che la tua app React possa interagire senza problemi con il tuo backend Django, sia che ti trovi in un ambiente di sviluppo locale sia che tu stia effettuando la distribuzione in produzione. Una volta configurati gli endpoint dell’API, sei pronto per recuperare e manipolare i dati del backend.

Recupero dei dati dal backend

Una volta impostata la configurazione dell’API, è possibile eseguire operazioni CRUD per gestire i dati tra React e Django. Aggiornare src/App.js per gestire queste operazioni:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

Questo codice gestisce la creazione, l’aggiornamento e l’eliminazione delle attività, oltre alla gestione degli errori. L’interfaccia utente si aggiorna immediatamente per garantire un’esperienza utente fluida, mentre gli errori vengono gestiti in modo corretto annullando le modifiche o visualizzando messaggi appropriati.

Test e debug della connessione

Uno degli ostacoli più comuni quando si collegano Django e React è la gestione degli errori CORS (Cross-Origin Resource Sharing). Questi si verificano perché i browser bloccano le richieste tra origini diverse per motivi di sicurezza. Durante lo sviluppo, React viene in genere eseguito su localhost:3000, mentre Django opera su localhost:8000, creando così una situazione di cross-origin.

Per risolvere i problemi CORS, assicurati di aver configurato le intestazioni CORS nelle impostazioni di Django come descritto nella sezione "Configurazione delle intestazioni CORS". Dopo aver apportato le modifiche, riavvia il server Django per applicarle.

Ecco alcuni errori comuni nelle richieste API e le relative soluzioni:

• HTTP 400 (Richiesta non valida): di solito significa che nel payload della richiesta mancano alcuni dati obbligatori o che questi sono mal formati. Ad esempio, nel novembre 2023, FintanMi ha riscontrato un errore 400 durante la creazione di una community in un progetto basato su Django REST Framework e React perché il owner campo mancava nella richiesta. Verificate sempre che il vostro frontend invii tutti i campi obbligatori previsti dai modelli Django.
• HTTP 405 (Method Not Allowed): si verifica quando l’endpoint dell’API non supporta il metodo HTTP utilizzato. Ad esempio, FintanMi ha segnalato un errore 405 durante il tentativo di eliminare un post, che è stato risolto aggiornando la vista Django da generics.RetrieveUpdateAPIView a generics.RetrieveUpdateDestroyAPIView per includere il supporto per DELETE richieste.

Esecuzione e test dell’app

Una volta collegati il backend Django e il frontend React, è il momento di avviare entrambi i server di sviluppo e testare l’applicazione. Ciò comporta l’esecuzione simultanea di due server e la verifica che tutto funzioni insieme senza intoppi.

Avvio dei server di sviluppo

Per eseguire l’applicazione Django-React, sono necessarie due finestre di terminale: una per ciascun server. Questa configurazione consente al backend e al frontend di operare in modo indipendente, comunicando tramite chiamate API.

Avvio del server backend Django:

1. Apri la prima finestra del terminale e accedi alla directory principale del tuo progetto Django.

2. Attiva l’ambiente virtuale Python:

   source venv/bin/activate
   

3. Avvia il server di sviluppo Django:

   python manage.py runserver
   

   Il server sarà disponibile all'indirizzo http://127.0.0.1:8000/.

Avvio del server frontend React:

1. Apri una seconda finestra di terminale e vai alla directory del tuo progetto React:

   cd frontend
   

2. Avvia il server di sviluppo React:

   npm start
   

   In questo modo si aprirà automaticamente una finestra del browser all'indirizzo http://localhost:3000/.

Una volta che entrambi i server sono in esecuzione, è possibile iniziare a testare le funzionalità dell’applicazione.

Verifica della funzionalità completa dell’app

Con i server attivi e in esecuzione, e con CORS e gli endpoint API configurati correttamente, è il momento di verificare il flusso di dati tra il frontend e il backend.

Verifica dell’API del backend:

• Prova direttamente gli endpoint dell’API Django visitando:

  http://localhost:8000/api/tasks
  

  Dovrebbe apparire l’interfaccia API navigabile del Django REST Framework, dove è possibile eseguire operazioni CREATE e READ.

• Accedete all'interfaccia di amministrazione di Django all'indirizzo:

  http://localhost:8000/admin
  

  Effettua l'accesso con le tue credenziali di superutente per creare, modificare o eliminare attività. Puoi anche testare le operazioni UPDATE e DELETE visitando:

  http://localhost:8000/api/tasks/{id}
  

Test di integrazione frontend-backend:

• Apri la tua app React all'indirizzo http://localhost:3000 e verifica che si carichi correttamente, visualizzando le attività dal backend Django.
• Testa ogni operazione CRUD tramite l’interfaccia React:
  • Aggiungi una nuova attività e verifica che appaia sia nell'interfaccia utente di React che nel backend.
  • Modifica un'attività esistente e assicurati che le modifiche vengano salvate.
  • Elimina un'attività e verifica che sia stata rimossa sia dal frontend che dal database.

Se la tua app include filtri o altre funzionalità, testale accuratamente per confermare che le attività vengano visualizzate come previsto.

Risoluzione dei problemi più comuni

Se riscontri qualche problema durante il test, ecco alcune soluzioni comuni da provare.

Errori di connessione all'API:

• Assicurati che entrambi i server siano in esecuzione sulle rispettive porte: Django su http://localhost:8000 e React su http://localhost:3000.
• Utilizza gli strumenti di sviluppo del browser (scheda "Rete") per identificare codici di stato HTTP come 404 o 500.

• Controlla l’ proxy impostazione nel file package.json :

  "proxy": "http://localhost:8000"
  

  Se apporti modifiche, riavvia il server React.

Problemi di avvio del server:

• Se il server Django non si avvia, verifica se mancano delle migrazioni:

  python manage.py makemigrations
  python manage.py migrate
  

• Per i problemi relativi al server React, prova a reinstallare le dipendenze:

  npm install
  

Problemi relativi al flusso dei dati:

• Utilizza gli strumenti di sviluppo del browser per esaminare le richieste di rete e gli errori della console.
• Aggiungi istruzioni di debug, come console.log() in React o print nelle viste Django, per tracciare il flusso dei dati.
• Verifica attentamente che gli URL dell'API nella tua app React corrispondano esattamente agli schemi URL di Django, comprese le barre finali (ad es., /api/tasks/).

Riepilogo e passi successivi

Hai creato un’applicazione web che combina Django e React, fornendoti una solida introduzione allo sviluppo full-stack. Questo progetto mette in evidenza concetti essenziali come la separazione del backend dal frontend, l’esecuzione di operazioni CRUD e la gestione delle richieste cross-origin tramite le impostazioni CORS. Nel corso del progetto, hai lavorato con Django REST Framework per creare API e hai utilizzato gli hook di React per la gestione dello stato: competenze che consentono una perfetta integrazione tra questi due potenti strumenti.

Portare la tua app al livello successivo

C’è ampio margine per espandere le funzionalità della tua app. Ad esempio, puoi aggiungere l’autenticazione JWT utilizzando Django REST Framework per proteggere i dati degli utenti e l’accesso alle API. Ciò ti consentirebbe di offrire funzionalità specifiche per gli utenti ed esperienze personalizzate.

Se la tua app necessita di aggiornamenti in tempo reale, valuta l’utilizzo di Django Channels per abilitare il supporto WebSocket. Questa soluzione è perfetta per funzionalità quali dashboard in tempo reale, sistemi di chat o notifiche, trasformando la tua app in una piattaforma più dinamica e interattiva.

Man mano che la tua app cresce, la visualizzazione avanzata dei dati diventa importante. Combinando le capacità di rendering di React con un efficiente recupero dei dati dal backend, sarai in grado di gestire e visualizzare in modo efficace set di dati complessi.

Prepararsi per la produzione

Quando prepari la tua app per la produzione, concentrati su distribuzione, sicurezza e prestazioni. Sebbene la configurazione attuale sia ottima per lo sviluppo locale, gli ambienti di produzione richiedono passaggi aggiuntivi. Questi includono la configurazione delle variabili d’ambiente, l’ottimizzazione del database e l’implementazione di solidi meccanismi di gestione degli errori.

Questi miglioramenti si basano sulle competenze che hai già sviluppato, come la progettazione di API, l’architettura basata su componenti e l’integrazione full-stack. Padroneggiando queste tecniche avanzate, sarai ben preparato per affrontare progetti di livello aziendale e continuare a crescere come sviluppatore web.

Domande frequenti

Quali sono i vantaggi dell’utilizzo di Django per il backend e di React per il frontend nella creazione di un’applicazione web?

L'utilizzo di Django per il backend e di React per il frontend crea una combinazione vincente per lo sviluppo di moderne applicazioni web. Django offre un solido framework ricco di strumenti che ottimizzano lo sviluppo del backend, mentre React eccelle nella creazione di interfacce utente dinamiche e interattive.

Questa combinazione favorisce una chiara separazione delle responsabilità, il che aiuta a mantenere il codice organizzato e più facile da espandere nel tempo. La struttura basata sui componenti di React favorisce il riutilizzo degli elementi dell’interfaccia utente, mentre il REST Framework di Django semplifica il processo di creazione delle API, garantendo una comunicazione fluida tra frontend e backend. Insieme, offrono un approccio veloce, efficiente e incentrato sull’utente allo sviluppo delle applicazioni.

Come posso risolvere i problemi CORS quando collego un frontend React a un backend Django?

Per risolvere i problemi CORS tra un frontend React e un backend Django, il django-cors-headers pacchetto rappresenta una soluzione pratica. Innanzitutto, installalo utilizzando pip. Successivamente, nel tuo settings.py , aggiungi 'corsheaders' alla INSTALLED_APPS . Dopodiché, includi 'corsheaders.middleware.CorsMiddleware' all'inizio del MIDDLEWARE elenco per garantire il corretto ordine di esecuzione del middleware.

Durante lo sviluppo, puoi semplificare le cose impostando CORS_ORIGIN_ALLOW_ALL = True nel proprio settings.py. Ciò consente le richieste da qualsiasi origine. Tuttavia, in un ambiente di produzione, è molto più sicuro definire domini affidabili specifici utilizzando l’impostazione CORS_ALLOWED_ORIGINS impostazione. Questo approccio contribuisce a garantire una sicurezza maggiore.

Con questa configurazione, la tua app React può interagire senza problemi con le tue API Django, rimanendo conforme ai requisiti CORS.

Come posso preparare le mie app Django e React per la distribuzione in produzione?

Per preparare le tue app Django e React alla produzione, inizia modificando le impostazioni di Django per garantire una configurazione sicura. Ciò include l’impostazione di DEBUG a False e specificare il ALLOWED_HOSTS per controllare quali domini possono accedere alla tua app. Queste modifiche sono essenziali per proteggere la tua applicazione in un ambiente live.

Successivamente, scegli una piattaforma di hosting affidabile per il backend Django e i file statici. Assicurati che la tua infrastruttura sia progettata per gestire il traffico e le richieste a livello di produzione. Per il frontend React, utilizza gli strumenti di build appropriati per generare una build di produzione ottimizzata.

Una volta che l’app React è pronta, configura un server web come Nginx per servire sia il frontend React che il backend Django. Una corretta configurazione del server garantisce che l’app funzioni in modo efficiente e offra un’esperienza senza intoppi agli utenti.

Prima di passare alla produzione, testa accuratamente la tua app nell’ambiente di produzione. Questo passaggio aiuta a identificare e risolvere eventuali problemi, garantendo che la tua app funzioni in modo affidabile una volta lanciata.