Como criar uma aplicação simples com Django e React

Como criar uma aplicação simples com Django e React

Quer criar uma aplicação web com um backend robusto e um frontend dinâmico? Combinar o Django, um framework em Python, com o React, uma biblioteca em JavaScript, é uma excelente forma de o conseguir. O Django trata de tarefas de backend, como a gestão de bases de dados e a criação de APIs, enquanto o React cria uma interface de utilizador responsiva e interativa.

Passos principais:

1. Configurar o ambiente:
   • Instale o Python 3.x para o Django e o Node.js para o React.
   • Utilize ambientes virtuais para gerir as dependências do Python.
   • Confirme as instalações com python --version, node --version, e npm --version.
2. Organize o seu projeto:
   • Crie pastas separadas para o backend do Django e o frontend do React.
   • Utilize django-admin startproject para a configuração do backend e npx create-react-app para a inicialização do front-end.
3. Crie o backend:
   • Crie aplicações Django, defina modelos e gere migrações.
   • Utilize o Django REST Framework para criar pontos de extremidade da API.
   • Configure django-cors-headers para permitir a comunicação entre o front-end e o back-end.
4. Desenvolver o front-end:
   • Utilize componentes React para gerir tarefas e interações com o utilizador.
   • Instale o Axios para pedidos de API e integre-o com os pontos de extremidade do Django.
   • Personalize o aspeto da aplicação com CSS para obter uma interface de utilizador elegante.
5. Ligar e testar:
   • Execute o Django no localhost:8000 e o React em localhost:3000.
   • Teste os pontos de extremidade da API com ferramentas como o Postman ou diretamente no navegador.
   • Certifique-se de que as definições CORS estão corretas para uma comunicação sem problemas.

Esta configuração permite-lhe criar de forma eficiente uma aplicação full-stack com uma separação clara entre o backend e o frontend. Siga estes passos para criar uma aplicação web escalável e interativa.

Projeto em Django e React para principiantes — Criar uma aplicação de notas FullStack

Requisitos de configuração e instalação

Antes de começar a desenvolver a sua aplicação Django e React, é fundamental configurar o seu ambiente de desenvolvimento com as ferramentas e dependências necessárias. Esta base irá ajudá-lo a criar, integrar e testar os seus componentes Django e React sem problemas à medida que avança.

Requisitos do sistema e ferramentas

Para começar, o seu computador de desenvolvimento precisará do Python 3.x para o Django e do Node.js para o React. Especificamente, o Django 5.0 requer o Python 3.x, enquanto o React funciona com o Node.js versão 12 ou superior.

Instalação do Python: Pode descarregar o Python diretamente do site oficial ou utilizar o gestor de pacotes do seu sistema. Para utilizadores de macOS, o Homebrew simplifica o processo com brew install python. Os utilizadores do Windows devem descarregar o instalador em python.org, enquanto os utilizadores do Linux podem instalá-lo com comandos como apt install python3 no Ubuntu ou comandos semelhantes para outras distribuições.

Configurar o Node.js e o npm: O Node.js vem incluído com o npm (Node Package Manager). Vai precisar da versão 6 ou superior do npm, sendo a versão 7.5.4 uma escolha fiável. Descarregue o Node.js a partir de nodejs.org, o que incluirá automaticamente o npm.

Ambientes virtuais do Python: A utilização de ambientes virtuais é fundamental para gerir dependências específicas de cada projeto sem conflitos. Pode utilizar o módulo venv ou ferramentas como pipenv ou virtualenvwrapper para obter mais funcionalidades. Se estiver a utilizar o Windows, o virtualenvwrapper-win pacote oferece funcionalidades semelhantes.

Para verificar as suas instalações, execute estes comandos no seu terminal:

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

Criação da estrutura do projeto

Uma estrutura de projeto bem organizada é essencial para manter o código do backend e do frontend separados e fáceis de gerir. Comece por criar um diretório principal para o seu projeto:

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

Dentro deste diretório, crie duas pastas: uma para o backend do Django e outra para o frontend do React. Esta separação permite-lhe manter e implementar cada parte de forma independente.

Configure o seu ambiente virtual Python dentro do diretório do projeto:

python -m venv venv

Ativa o ambiente virtual:

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

Este passo garante que todas as dependências Python do teu projeto fiquem isoladas.

Instalação dos pacotes necessários

Com o ambiente pronto, é hora de instalar os pacotes necessários tanto para o Django como para o React.

Pacotes de backend do Django: Enquanto o seu ambiente virtual estiver ativo, instale o Django e as suas bibliotecas de suporte utilizando o pip:

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

• O Django gere a lógica do lado do servidor, a gestão da base de dados e o encaminhamento de URLs.
• O Django REST Framework simplifica o processo de criação de APIs RESTful, facilitando a criação de endpoints para o teu front-end React.
• O Django-cors-headers ativa o Cross-Origin Resource Sharing (CORS), essencial para a comunicação entre o front-end do React (a funcionar na porta 3000) e o back-end do Django (a funcionar na porta 8000).

Configuração do front-end React: Para configurar o seu ambiente React, utilize a create-react-app ferramenta. Este comando inicializa um projeto React e instala todas as dependências necessárias:

npx create-react-app frontend

Isto irá criar um novo projeto React num frontend diretório, completo com pacotes essenciais, ferramentas de desenvolvimento e scripts de compilação.

Pacote adicional do front-end: Após configurar o seu projeto React, aceda ao diretório frontend diretório e instale o Axios, uma biblioteca para efetuar pedidos HTTP à sua API Django:

cd frontend
npm install axios

Nesta altura, o seu ambiente de desenvolvimento está totalmente equipado com Python 3.x, Django, Node.js, React e todas as ferramentas necessárias. O ambiente virtual Python garante que as suas dependências de backend estão isoladas, enquanto o npm gere os seus pacotes JavaScript separadamente. Agora está pronto para começar a construir a sua aplicação full-stack!

Criação do backend com Django

Configure um backend em Django com modelos de base de dados, pontos de extremidade da API e integração com um frontend em React.

Criação de um projeto e de uma aplicação Django

Comece por criar um projeto Django, que inclui definições, configurações de base de dados e opções específicas da aplicação. Dentro deste projeto, irá construir uma aplicação Django — um pacote Python concebido para tarefas específicas, como a gestão de dados de utilizadores ou de conteúdos.

Navegue até ao diretório raiz do seu projeto (onde o seu ambiente virtual está configurado) e crie o projeto Django:

django-admin startproject backend .

Este comando gera ficheiros do projeto diretamente no diretório atual, evitando a criação de uma pasta adicional. Irá notar novos ficheiros como manage.py (para executar comandos do Django) e um backend diretório contendo ficheiros como settings.py, urls.py, asgi.py, e wsgi.py.

Em seguida, crie uma aplicação para gerir funcionalidades específicas. Por exemplo, um sistema de gestão de tarefas:

python manage.py startapp tasks

Isto cria um tasks diretório com ficheiros essenciais como models.py, views.py, admin.py, e uma migrations pasta. Certifique-se de que evita conflitos de nomes com nomes integrados como «django» ou «test».

Registe a aplicação nas definições do seu projeto, adicionando-a à INSTALLED_APPS lista em 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
]

Configurar modelos e serializadores

Defina a sua estrutura de dados com modelos do Django. Por exemplo, um modelo simples Task modelo para a aplicação de gestão de tarefas pode ser adicionado em 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

Este modelo inclui campos como CharField para texto curto, TextField para conteúdo mais extenso, BooleanField para valores verdadeiro/falso e DateTimeField para registos de data e hora. A Meta classe especifica opções como a ordenação por predefinição.

Aplica o modelo à tua base de dados executando as migrações:

python manage.py makemigrations tasks
python manage.py migrate

Para converter os dados do modelo para JSON, utilize os serializadores do Django REST Framework. Em tasks/serializers.py, defina um serializador para o Task modelo:

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']

O ModelSerializer gera automaticamente campos e métodos com base no modelo. Listar explicitamente os campos garante que não expõe inadvertidamente dados confidenciais.

Criação de pontos de extremidade da API

O Django REST Framework simplifica a criação de APIs. Para operações CRUD padrão, utilize ViewSets com routers para obter uma estrutura limpa e RESTful.

Em tasks/views.py, crie vistas de 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

O ModelViewSet lida automaticamente com a listagem, criação, recuperação, atualização e eliminação de tarefas.

Configure o encaminhamento de URLs em 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)),
]

Inclua estas URLs no ficheiro principal backend/urls.py :

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

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

Configurar cabeçalhos CORS

Para permitir que o seu front-end React (em execução na porta 3000) comunique com o back-end Django (na porta 8000), configure o Cross-Origin Resource Sharing (CORS). Sem isto, os navegadores bloqueiam os pedidos entre origens diferentes por motivos de segurança.

Atualize backend/settings.py para incluir a configuração 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

Para um teste rápido, pode utilizar CORS_ALLOW_ALL_ORIGINS = True, mas especificar as origens permitidas é mais seguro.

Testar os pontos finais da API

Antes de integrar o front-end React, teste os pontos de extremidade da API para garantir que funcionam conforme o esperado. Inicie o servidor de desenvolvimento do Django:

python manage.py runserver

Aceda à API em http://127.0.0.1:8000/api/tasks/. Utilize a API navegável para testar operações como pedidos GET e POST.

Em alternativa, teste com o cURL ou 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"}'

Para testes automatizados, adicione casos de teste em 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

Com o backend pronto, está pronto para o ligar ao frontend React.

Criação do front-end com React

Para criar uma interface envolvente para o seu backend Django, irá utilizar o React para gerir as interações do utilizador — desde a visualização de tarefas até à adição de novas tarefas.

Configurar um projeto React

Comece por configurar o seu frontend React utilizando o Create React App. Navegue até ao diretório raiz do seu projeto (onde se encontra o seu backend Django) e execute:

npx create-react-app frontend
cd frontend

Este comando configura uma aplicação React com ficheiros essenciais como package.json, src/App.js, e public/index.html. Também inclui ferramentas como o webpack para empacotamento, o Babel para compilação de JavaScript e um servidor de desenvolvimento para testes.

Em seguida, instale o Axios para gerir os pedidos HTTP à sua API Django:

npm install axios

O Axios simplifica as chamadas à API, gerindo a análise de JSON e oferecendo um melhor tratamento de erros do que a função fetch() . Também suporta funcionalidades como interceptores de pedidos e respostas.

A sua estrutura de pastas deverá agora ter este aspeto:

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

Para confirmar que tudo está a funcionar, inicie o servidor de desenvolvimento do React:

npm start

Isto inicia a aplicação em http://localhost:3000, exibindo a página de boas-vindas predefinida do React. Mantém este servidor em execução durante o desenvolvimento — ele atualiza-se automaticamente quando fazes alterações.

Criação de componentes React

Vamos criar um TaskList componente para apresentar tarefas obtidas da tua API Django. Adiciona o seguinte 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;

Em seguida, crie um TaskForm componente para adicionar novas tarefas. Adicione isto 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;

Para aplicar algum estilo básico, crie um src/App.css ficheiro e adicione:

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

Gestão do estado e integração com a API

Hooks do React como useState e useEffect facilitam a gestão do estado e a interação com o teu backend Django. Para centralizar as chamadas à API, cria um ficheiro de serviço 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;

Por fim, integra tudo em 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
}

Com esta configuração, o seu front-end React está pronto para lidar com tarefas de forma interativa, comunicando-se de forma integrada com o seu backend Django.

Ligar o Django ao React

Agora que o backend e o frontend estão a funcionar, o próximo passo é garantir uma comunicação fluida entre ambos. Isto envolve configurar pontos de extremidade da API, gerir pedidos e resolver quaisquer problemas de integração.

Configurar URLs da API no React

A sua aplicação React precisa de saber onde localizar os pontos de extremidade da API do Django. Para tal, atualize o src/services/api.js ficheiro com configurações específicas do 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;

Para a produção, adicione um .env ficheiro à raiz do seu projeto React com o seguinte conteúdo:

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

Esta configuração garante que a sua aplicação React possa interagir perfeitamente com o seu backend Django, quer esteja num ambiente de desenvolvimento local ou a implementar em produção. Com os pontos finais da API configurados, está pronto para recuperar e manipular dados do backend.

Recuperação de dados do backend

Assim que a configuração da API estiver definida, pode realizar operações CRUD para gerir dados entre o React e o Django. Atualize src/App.js para lidar com estas operações:

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;

Este código lida com a criação, atualização e eliminação de tarefas, bem como com a gestão de erros. A interface do utilizador atualiza-se imediatamente para proporcionar uma experiência de utilizador fluida, e os erros são geridos de forma elegante, revertendo as alterações ou apresentando mensagens adequadas.

Testar e depurar a ligação

Um dos obstáculos mais comuns ao ligar o Django e o React é lidar com erros de CORS (Cross-Origin Resource Sharing). Estes erros surgem porque os navegadores bloqueiam pedidos entre origens diferentes por motivos de segurança. Durante o desenvolvimento, o React funciona normalmente no localhost:3000, enquanto o Django funciona em localhost:8000, criando um cenário de origem cruzada.

Para resolver problemas de CORS, certifique-se de que configurou os cabeçalhos CORS nas suas definições do Django, conforme descrito na secção «Configurar cabeçalhos CORS». Após efetuar as alterações, reinicie o seu servidor Django para as aplicar.

Eis alguns erros comuns em pedidos de API e as respetivas soluções:

• HTTP 400 (Pedido Inválido): isto significa normalmente que faltam alguns dados obrigatórios ou que estes estão malformados na carga útil do pedido. Por exemplo, em novembro de 2023, a FintanMi encontrou um erro 400 ao criar uma comunidade num projeto com o Django REST Framework e o React, porque o owner campo estava em falta na solicitação. Verifique sempre se o seu front-end envia todos os campos obrigatórios esperados pelos modelos do Django.
• HTTP 405 (Método Não Permitido): Isto ocorre quando o ponto final da API não suporta o método HTTP utilizado. Por exemplo, o FintanMi registou um erro 405 ao tentar eliminar uma publicação, o que foi resolvido atualizando a vista do Django de generics.RetrieveUpdateAPIView para generics.RetrieveUpdateDestroyAPIView para incluir suporte a DELETE requests.

Executar e Testar a Aplicação

Com o backend Django e o frontend React ligados, está na hora de iniciar ambos os servidores de desenvolvimento e testar a aplicação. Isto implica executar dois servidores em simultâneo e garantir que tudo funciona em conjunto sem problemas.

Iniciar os servidores de desenvolvimento

Para executar a sua aplicação Django-React, vai precisar de duas janelas de terminal — uma para cada servidor. Esta configuração permite que o backend e o frontend funcionem de forma independente, comunicando entre si através de chamadas de API.

Iniciar o servidor backend do Django:

1. Abra a primeira janela do terminal e navegue até ao diretório raiz do seu projeto Django.

2. Ative o seu ambiente virtual Python:

   source venv/bin/activate
   

3. Inicie o servidor de desenvolvimento do Django:

   python manage.py runserver
   

   O servidor estará disponível em http://127.0.0.1:8000/.

Iniciar o servidor front-end do React:

1. Abra uma segunda janela de terminal e aceda ao diretório do seu projeto React:

   cd frontend
   

2. Inicie o servidor de desenvolvimento do React:

   npm start
   

   Isto abrirá automaticamente uma janela do navegador em http://localhost:3000/.

Assim que ambos os servidores estiverem a funcionar, pode começar a testar a funcionalidade da sua aplicação.

Testar a funcionalidade completa da aplicação

Com os servidores em funcionamento e o CORS e os pontos finais da API devidamente configurados, é altura de validar o fluxo de dados entre o front-end e o back-end.

Verificação da API do backend:

• Teste diretamente os pontos de extremidade da API do Django acedendo a:

  http://localhost:8000/api/tasks
  

  Isto deverá apresentar a interface API navegável do Django REST Framework, onde pode realizar operações CREATE e READ.

• Aceda à interface de administração do Django em:

  http://localhost:8000/admin
  

  Inicie sessão com as suas credenciais de superutilizador para criar, editar ou eliminar tarefas. Também pode testar as operações UPDATE e DELETE acedendo a:

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

Testes de integração front-end/back-end:

• Abra a sua aplicação React em http://localhost:3000 e confirme se carrega corretamente, apresentando as tarefas do backend do Django.
• Teste cada operação CRUD através da interface React:
  • Adicione uma nova tarefa e verifique se esta aparece tanto na interface do React como no backend.
  • Edite uma tarefa existente e certifique-se de que as alterações são guardadas.
  • Elimine uma tarefa e verifique se esta é removida tanto do front-end como da base de dados.

Se a sua aplicação incluir filtros ou outras funcionalidades, teste-as exaustivamente para confirmar que as tarefas são apresentadas conforme esperado.

Resolução de problemas comuns

Se encontrar algum problema durante os testes, eis algumas soluções comuns que pode experimentar.

Erros de ligação à API:

• Certifique-se de que ambos os servidores estão a funcionar nas respetivas portas: o Django na http://localhost:8000 e o React em http://localhost:3000.
• Utilize as ferramentas de desenvolvimento do navegador (separador «Rede») para identificar códigos de estado HTTP como 404 ou 500.

• Verifique a proxy configuração no ficheiro package.json :

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

  Se efetuar alterações, reinicie o servidor React.

Problemas na inicialização do servidor:

• Se o servidor Django não iniciar, verifique se faltam migrações:

  python manage.py makemigrations
  python manage.py migrate
  

• Para problemas com o servidor React, tente reinstalar as dependências:

  npm install
  

Problemas de fluxo de dados:

• Utilize as ferramentas de desenvolvimento do navegador para inspecionar os pedidos de rede e os erros da consola.
• Adicione instruções de depuração, como console.log() no React ou print instruções nas vistas do Django, para rastrear o fluxo de dados.
• Verifique novamente se os URLs da API na sua aplicação React correspondem exatamente aos padrões de URL do Django, incluindo as barras finais (por exemplo, /api/tasks/).

Resumo e próximos passos

Criou uma aplicação web que combina o Django e o React, proporcionando-lhe uma introdução sólida ao desenvolvimento full-stack. Este projeto destaca conceitos essenciais como a separação do backend do frontend, a execução de operações CRUD e a gestão de pedidos entre origens diferentes utilizando configurações CORS. Ao longo do processo, trabalhou com o Django REST Framework para criar APIs e utilizou hooks do React para a gestão de estado — competências que permitem uma integração harmoniosa entre estas duas ferramentas poderosas.

Levar a sua aplicação para o próximo nível

Há muito espaço para expandir as funcionalidades da sua aplicação. Por exemplo, pode adicionar autenticação JWT utilizando o Django REST Framework para proteger os dados dos utilizadores e o acesso à API. Isto permitir-lhe-ia oferecer funcionalidades específicas para cada utilizador e experiências personalizadas.

Se a sua aplicação necessitar de atualizações em tempo real, considere utilizar o Django Channels para ativar o suporte a WebSocket. Isto é perfeito para funcionalidades como painéis de controlo em tempo real, sistemas de chat ou notificações, transformando a sua aplicação numa plataforma mais dinâmica e interativa.

À medida que a sua aplicação cresce, a visualização avançada de dados torna-se importante. Ao combinar as capacidades de renderização do React com uma recuperação eficiente de dados do backend, poderá gerir e apresentar conjuntos de dados complexos de forma eficaz.

Preparação para a produção

Ao preparar a sua aplicação para produção, concentre-se na implementação, segurança e desempenho. Embora a configuração atual seja excelente para o desenvolvimento local, os ambientes de produção exigem passos adicionais. Estes incluem a configuração de variáveis de ambiente, a otimização da sua base de dados e a implementação de mecanismos robustos de tratamento de erros.

Estas melhorias baseiam-se nas competências que já desenvolveu — como a conceção de APIs, a arquitetura baseada em componentes e a integração full-stack. Ao dominar estas técnicas avançadas, estará bem preparado para enfrentar projetos de nível empresarial e continuar a crescer como programador web.

Perguntas frequentes

Quais são as vantagens de utilizar o Django para o backend e o React para o frontend na criação de uma aplicação web?

A utilização do Django para o backend e do React para o frontend cria uma combinação forte para o desenvolvimento de aplicações web modernas. O Django fornece um framework sólido, repleto de ferramentas que simplificam o desenvolvimento do backend, enquanto o React destaca-se na criação de interfaces de utilizador dinâmicas e interativas.

Esta combinação promove uma separação clara de responsabilidades, o que ajuda a manter a base de código organizada e mais fácil de expandir ao longo do tempo. A estrutura baseada em componentes do React incentiva a reutilização de elementos da interface do utilizador, e o REST Framework do Django simplifica o processo de criação de APIs, garantindo uma comunicação fluida entre o front-end e o back-end. Juntos, oferecem uma abordagem rápida, eficiente e centrada no utilizador para o desenvolvimento de aplicações.

Como resolver problemas de CORS ao ligar um front-end React a um back-end Django?

Para resolver problemas de CORS entre um front-end React e um back-end Django, o django-cors-headers pacote é uma solução prática. Primeiro, instale-o utilizando o pip. Depois, no seu settings.py ficheiro, adicione 'corsheaders' à INSTALLED_APPS lista. Depois disso, inclua 'corsheaders.middleware.CorsMiddleware' no início da MIDDLEWARE lista para garantir a ordem correta de execução do middleware.

Durante o desenvolvimento, pode simplificar o processo definindo CORS_ORIGIN_ALLOW_ALL = True no seu settings.py. Isto permite pedidos provenientes de qualquer origem. No entanto, num ambiente de produção, é muito mais seguro definir domínios de confiança específicos utilizando a CORS_ALLOWED_ORIGINS configuração. Esta abordagem ajuda a manter uma segurança mais rigorosa.

Com esta configuração, a sua aplicação React pode interagir sem problemas com as suas APIs Django, mantendo-se em conformidade com os requisitos CORS.

Como posso preparar as minhas aplicações Django e React para a implementação em produção?

Para preparar as suas aplicações Django e React para produção, comece por ajustar as definições do Django para uma configuração segura. Isto inclui definir DEBUG para False e especificar o ALLOWED_HOSTS para controlar quais os domínios que podem aceder à sua aplicação. Estas alterações são essenciais para proteger a sua aplicação num ambiente de produção.

Em seguida, selecione uma plataforma de alojamento fiável para o seu backend Django e ficheiros estáticos. Certifique-se de que a sua infraestrutura está preparada para lidar com o tráfego e as exigências de produção. Para o frontend React, utilize as ferramentas de compilação adequadas para gerar uma compilação de produção otimizada.

Assim que a sua aplicação React estiver pronta, configure um servidor web como o Nginx para servir tanto o front-end React como o back-end Django. Uma configuração adequada do servidor garante que a sua aplicação funcione de forma eficiente e proporcione uma experiência fluida aos utilizadores.

Antes de colocar a aplicação em produção, teste-a exaustivamente no ambiente de produção. Este passo ajuda a identificar e resolver quaisquer problemas, garantindo que a sua aplicação funcione de forma fiável assim que for lançada.